scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-02 12:08:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Replace attributeMixin within the component (#9919)

Browse Source 
# Pull Request Template

## Description

This PR will replace the usage of `attributeMixin` within the component
itself. And moved the component from option API to composition API and
updated the styles and related component

Fixes
https://linear.app/chatwoot/issue/CW-3444/rewrite-attributemixin-mixin-to-a-composable

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

**Test cases**
1. Add custom attributes for both conversation and contact from the
settings
2. See all attributes are showing based on the conversation and contact
in both conversation and contact sidebar.
3. Try all CRUD operations like EDIT, DELETE. 
4. Check whether styles are properly showing or not (Background color
based on odd/even)

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
This commit is contained in:
Sivin Varghese
2024-08-12 18:26:07 +05:30
committed by GitHub
parent 4c6572c2c9
commit b1da3dc7cf
6 changed files with 192 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
View File

@@ -115,13 +115,11 @@ export default {
<CustomAttributes
:contact-id="contact.id"
attribute-type="contact_attribute"
attribute-class="conversation--attribute"
attribute-from="contact_panel"
:custom-attributes="contact.custom_attributes"
:empty-state-message="
$t('CONTACT_PANEL.SIDEBAR_SECTIONS.NO_RECORDS_FOUND')
"
class="even"
/>
</AccordionItem>
</div>

2
app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
View File

@@ -218,8 +218,6 @@ export default {
>
<CustomAttributes
attribute-type="contact_attribute"
attribute-class="conversation--attribute"
class="even"
attribute-from="conversation_contact_panel"
:contact-id="contact.id"
:empty-state-message="

50
app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
View File

@@ -70,41 +70,39 @@ const staticElements = computed(() =>
},
].filter(attribute => !!attribute.content.value)
);
const evenClass = [
'[&>*:nth-child(odd)]:!bg-white [&>*:nth-child(even)]:!bg-slate-25',
'dark:[&>*:nth-child(odd)]:!bg-slate-900 dark:[&>*:nth-child(even)]:!bg-slate-800/50',
];
</script>
<template>
<div class="conversation--details">
<ContactDetailsItem
v-for="element in staticElements"
:key="element.title"
:title="$t(element.title)"
:value="element.content.value"
class="conversation--attribute"
>
<a
v-if="element.type === 'link'"
:href="referer"
rel="noopener noreferrer nofollow"
target="_blank"
class="text-woot-400 dark:text-woot-600"
<div :class="evenClass">
<ContactDetailsItem
v-for="element in staticElements"
:key="element.title"
:title="$t(element.title)"
:value="element.content.value"
class="border-b border-solid border-slate-50 dark:border-slate-700/50"
>
{{ referer }}
</a>
</ContactDetailsItem>
<a
v-if="element.type === 'link'"
:href="referer"
rel="noopener noreferrer nofollow"
target="_blank"
class="text-woot-400 dark:text-woot-600"
>
{{ referer }}
</a>
</ContactDetailsItem>
</div>
<CustomAttributes
:class="staticElements.length % 2 === 0 ? 'even' : 'odd'"
:start-at="staticElements.length % 2 === 0 ? 'even' : 'odd'"
attribute-class="conversation--attribute"
attribute-from="conversation_panel"
attribute-type="conversation_attribute"
/>
</div>
</template>
<style scoped lang="scss">
.conversation--attribute {
@apply border-slate-50 dark:border-slate-700/50 border-b border-solid;
&:nth-child(2n) {
@apply bg-slate-25 dark:bg-slate-800/50;
}
}
</style>

326
app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
View File

@@ -1,153 +1,187 @@
<script>
<script setup>
import { computed, onMounted } from 'vue';
import { useToggle } from '@vueuse/core';
import { useRoute } from 'dashboard/composables/route';
import { useStore, useStoreGetters } from 'dashboard/composables/store';
import { useAlert } from 'dashboard/composables';
import { useI18n } from 'dashboard/composables/useI18n';
import { useUISettings } from 'dashboard/composables/useUISettings';
import { copyTextToClipboard } from 'shared/helpers/clipboard';
import CustomAttribute from 'dashboard/components/CustomAttribute.vue';
import attributeMixin from 'dashboard/mixins/attributeMixin';
export default {
components: {
CustomAttribute,
const props = defineProps({
attributeType: {
type: String,
default: 'conversation_attribute',
},
mixins: [attributeMixin],
props: {
attributeType: {
type: String,
default: 'conversation_attribute',
},
attributeClass: {
type: String,
default: '',
},
contactId: { type: Number, default: null },
attributeFrom: {
type: String,
required: true,
},
emptyStateMessage: {
type: String,
default: '',
},
contactId: { type: Number, default: null },
attributeFrom: {
type: String,
required: true,
},
setup() {
const { uiSettings, updateUISettings } = useUISettings();
emptyStateMessage: {
type: String,
default: '',
},
startAt: {
type: String,
default: 'even',
validator: value => value === 'even' || value === 'odd',
},
});
const store = useStore();
const getters = useStoreGetters();
const route = useRoute();
const { t } = useI18n();
const { uiSettings, updateUISettings } = useUISettings();
const [showAllAttributes, toggleShowAllAttributes] = useToggle(false);
const currentChat = computed(() => getters.getSelectedChat.value);
const attributes = computed(() =>
getters['attributes/getAttributesByModel'].value(props.attributeType)
);
const contactIdentifier = computed(
() =>
currentChat.value.meta?.sender?.id ||
route.params.contactId ||
props.contactId
);
const contact = computed(() =>
getters['contacts/getContact'].value(contactIdentifier.value)
);
const customAttributes = computed(() => {
if (props.attributeType === 'conversation_attribute')
return currentChat.value.custom_attributes || {};
return contact.value.custom_attributes || {};
});
const conversationId = computed(() => currentChat.value.id);
const toggleButtonText = computed(() =>
!showAllAttributes.value
? t('CUSTOM_ATTRIBUTES.SHOW_MORE')
: t('CUSTOM_ATTRIBUTES.SHOW_LESS')
);
const filteredAttributes = computed(() =>
attributes.value.map(attribute => {
// Check if the attribute key exists in customAttributes
const hasValue = Object.hasOwnProperty.call(
customAttributes.value,
attribute.attribute_key
);
const isCheckbox = attribute.attribute_display_type === 'checkbox';
const defaultValue = isCheckbox ? false : '';
return {
uiSettings,
updateUISettings,
...attribute,
// Set value from customAttributes if it exists, otherwise use default value
value: hasValue
? customAttributes.value[attribute.attribute_key]
: defaultValue,
};
},
data() {
return {
showAllAttributes: false,
};
},
computed: {
toggleButtonText() {
return !this.showAllAttributes
? this.$t('CUSTOM_ATTRIBUTES.SHOW_MORE')
: this.$t('CUSTOM_ATTRIBUTES.SHOW_LESS');
},
filteredAttributes() {
return this.attributes.map(attribute => {
// Check if the attribute key exists in customAttributes
const hasValue = Object.hasOwnProperty.call(
this.customAttributes,
attribute.attribute_key
);
})
);
const isCheckbox = attribute.attribute_display_type === 'checkbox';
const defaultValue = isCheckbox ? false : '';
const displayedAttributes = computed(() => {
// Show only the first 5 attributes or all depending on showAllAttributes
if (showAllAttributes.value || filteredAttributes.value.length <= 5) {
return filteredAttributes.value;
}
return filteredAttributes.value.slice(0, 5);
});
return {
...attribute,
// Set value from customAttributes if it exists, otherwise use default value
value: hasValue
? this.customAttributes[attribute.attribute_key]
: defaultValue,
};
});
},
displayedAttributes() {
// Show only the first 5 attributes or all depending on showAllAttributes
if (this.showAllAttributes || this.filteredAttributes.length <= 5) {
return this.filteredAttributes;
}
return this.filteredAttributes.slice(0, 5);
},
showMoreUISettingsKey() {
return `show_all_attributes_${this.attributeFrom}`;
},
},
mounted() {
this.initializeSettings();
},
methods: {
initializeSettings() {
this.showAllAttributes =
this.uiSettings[this.showMoreUISettingsKey] || false;
},
onClickToggle() {
this.showAllAttributes = !this.showAllAttributes;
this.updateUISettings({
[this.showMoreUISettingsKey]: this.showAllAttributes,
});
},
async onUpdate(key, value) {
const updatedAttributes = { ...this.customAttributes, [key]: value };
try {
if (this.attributeType === 'conversation_attribute') {
await this.$store.dispatch('updateCustomAttributes', {
conversationId: this.conversationId,
customAttributes: updatedAttributes,
});
} else {
this.$store.dispatch('contacts/update', {
id: this.contactId,
custom_attributes: updatedAttributes,
});
}
useAlert(this.$t('CUSTOM_ATTRIBUTES.FORM.UPDATE.SUCCESS'));
} catch (error) {
const errorMessage =
error?.response?.message ||
this.$t('CUSTOM_ATTRIBUTES.FORM.UPDATE.ERROR');
useAlert(errorMessage);
}
},
async onDelete(key) {
try {
const { [key]: remove, ...updatedAttributes } = this.customAttributes;
if (this.attributeType === 'conversation_attribute') {
await this.$store.dispatch('updateCustomAttributes', {
conversationId: this.conversationId,
customAttributes: updatedAttributes,
});
} else {
this.$store.dispatch('contacts/deleteCustomAttributes', {
id: this.contactId,
customAttributes: [key],
});
}
const showMoreUISettingsKey = computed(
() => `show_all_attributes_${props.attributeFrom}`
);
useAlert(this.$t('CUSTOM_ATTRIBUTES.FORM.DELETE.SUCCESS'));
} catch (error) {
const errorMessage =
error?.response?.message ||
this.$t('CUSTOM_ATTRIBUTES.FORM.DELETE.ERROR');
useAlert(errorMessage);
}
},
async onCopy(attributeValue) {
await copyTextToClipboard(attributeValue);
useAlert(this.$t('CUSTOM_ATTRIBUTES.COPY_SUCCESSFUL'));
},
},
const initializeSettings = () => {
showAllAttributes.value =
uiSettings.value[showMoreUISettingsKey.value] || false;
};
const onClickToggle = () => {
toggleShowAllAttributes();
updateUISettings({
[showMoreUISettingsKey.value]: showAllAttributes.value,
});
};
const onUpdate = async (key, value) => {
const updatedAttributes = { ...customAttributes.value, [key]: value };
try {
if (props.attributeType === 'conversation_attribute') {
await store.dispatch('updateCustomAttributes', {
conversationId: conversationId.value,
customAttributes: updatedAttributes,
});
} else {
store.dispatch('contacts/update', {
id: props.contactId,
custom_attributes: updatedAttributes,
});
}
useAlert(t('CUSTOM_ATTRIBUTES.FORM.UPDATE.SUCCESS'));
} catch (error) {
const errorMessage =
error?.response?.message || t('CUSTOM_ATTRIBUTES.FORM.UPDATE.ERROR');
useAlert(errorMessage);
}
};
const onDelete = async key => {
try {
const { [key]: remove, ...updatedAttributes } = customAttributes.value;
if (props.attributeType === 'conversation_attribute') {
await store.dispatch('updateCustomAttributes', {
conversationId: conversationId.value,
customAttributes: updatedAttributes,
});
} else {
store.dispatch('contacts/deleteCustomAttributes', {
id: props.contactId,
customAttributes: [key],
});
}
useAlert(t('CUSTOM_ATTRIBUTES.FORM.DELETE.SUCCESS'));
} catch (error) {
const errorMessage =
error?.response?.message || t('CUSTOM_ATTRIBUTES.FORM.DELETE.ERROR');
useAlert(errorMessage);
}
};
const onCopy = async attributeValue => {
await copyTextToClipboard(attributeValue);
useAlert(t('CUSTOM_ATTRIBUTES.COPY_SUCCESSFUL'));
};
onMounted(() => {
initializeSettings();
});
const evenClass = [
'[&>*:nth-child(odd)]:!bg-white [&>*:nth-child(even)]:!bg-slate-25',
'dark:[&>*:nth-child(odd)]:!bg-slate-900 dark:[&>*:nth-child(even)]:!bg-slate-800/50',
];
const oddClass = [
'[&>*:nth-child(odd)]:!bg-slate-25 [&>*:nth-child(even)]:!bg-white',
'dark:[&>*:nth-child(odd)]:!bg-slate-800/50 dark:[&>*:nth-child(even)]:!bg-slate-900',
];
const wrapperClass = computed(() => {
return props.startAt === 'even' ? evenClass : oddClass;
});
</script>
<!-- TODO: After migration to Vue 3, remove the top level div -->
<template>
<div class="custom-attributes--panel">
<div :class="wrapperClass">
<CustomAttribute
v-for="attribute in displayedAttributes"
:key="attribute.id"
@@ -160,8 +194,8 @@ export default {
show-actions
:attribute-regex="attribute.regex_pattern"
:regex-cue="attribute.regex_cue"
:class="attributeClass"
:contact-id="contactId"
class="border-b border-solid border-slate-50 dark:border-slate-700/50"
@update="onUpdate"
@delete="onDelete"
@copy="onCopy"
@@ -187,27 +221,3 @@ export default {
</div>
</div>
</template>
<style scoped lang="scss">
.custom-attributes--panel {
.conversation--attribute {
@apply border-slate-50 dark:border-slate-700/50 border-b border-solid;
}
&.odd {
.conversation--attribute {
&:nth-child(2n + 1) {
@apply bg-slate-25 dark:bg-slate-800/50;
}
}
}
&.even {
.conversation--attribute {
&:nth-child(2n) {
@apply bg-slate-25 dark:bg-slate-800/50;
}
}
}
}
</style>