mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-01 11:37:58 +00:00
7343e53659
# Pull Request Template
## Description
This PR fixes an issue where typing variables, like `{{contact.name}}`,
caused the variable list to miss showing `contact.name`. The search key
in this case became `contact.name}},` which didn't match any available
options. The logic in `VariableList.vue` only checked the part after the
last comma and didn’t fully sanitize the input.
**Solution**
Updated `searchKey` to remove all {} and commas for accurate matching.
Fixes
[CW-4574](https://linear.app/chatwoot/issue/CW-4574/i-dont-see-an-option-for-contactname-it-shows-initially-but-it-doesnt)
## Type of change
- [x] Bug fix (non-breaking change which fixes an issue)
## How Has This Been Tested?
### Loom video
https://www.loom.com/share/fc86e53853ad49e6acf6de57ebbd8fcb?sid=6702f896-d1a3-4c5a-9eb7-b96b5ed91531
## 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
- [ ] 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
79 lines
1.9 KiB
Vue
79 lines
1.9 KiB
Vue
<script>
|
|
import { mapGetters } from 'vuex';
|
|
import { MESSAGE_VARIABLES } from 'shared/constants/messages';
|
|
import { sanitizeVariableSearchKey } from 'dashboard/helper/commons';
|
|
import MentionBox from '../mentions/MentionBox.vue';
|
|
|
|
export default {
|
|
components: { MentionBox },
|
|
props: {
|
|
searchKey: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
emits: ['selectVariable'],
|
|
computed: {
|
|
...mapGetters({
|
|
customAttributes: 'attributes/getAttributes',
|
|
}),
|
|
sanitizedSearchKey() {
|
|
return sanitizeVariableSearchKey(this.searchKey);
|
|
},
|
|
items() {
|
|
return [
|
|
...this.standardAttributeVariables,
|
|
...this.customAttributeVariables,
|
|
];
|
|
},
|
|
standardAttributeVariables() {
|
|
return MESSAGE_VARIABLES.filter(variable => {
|
|
return (
|
|
variable.label.includes(this.sanitizedSearchKey) ||
|
|
variable.key.includes(this.sanitizedSearchKey)
|
|
);
|
|
}).map(variable => ({
|
|
label: variable.key,
|
|
key: variable.key,
|
|
description: variable.label,
|
|
}));
|
|
},
|
|
customAttributeVariables() {
|
|
return this.customAttributes.map(attribute => {
|
|
const attributePrefix =
|
|
attribute.attribute_model === 'conversation_attribute'
|
|
? 'conversation'
|
|
: 'contact';
|
|
|
|
return {
|
|
label: `${attributePrefix}.custom_attribute.${attribute.attribute_key}`,
|
|
key: `${attributePrefix}.custom_attribute.${attribute.attribute_key}`,
|
|
description: attribute.attribute_description,
|
|
};
|
|
});
|
|
},
|
|
},
|
|
methods: {
|
|
handleVariableClick(item = {}) {
|
|
this.$emit('selectVariable', item.key);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<!-- eslint-disable-next-line vue/no-root-v-if -->
|
|
<template>
|
|
<MentionBox
|
|
v-if="items.length"
|
|
type="variable"
|
|
:items="items"
|
|
@mention-select="handleVariableClick"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.variable--list-label {
|
|
font-weight: 600;
|
|
}
|
|
</style>
|