LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Add support for List and Checkbox in Custom Attributes (#3439)

Browse Source
This commit is contained in:
Sivin Varghese
2021-11-24 09:00:55 +05:30
committed by GitHub
parent 0530e9491c
commit da8f9d0337
9 changed files with 388 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,6 +5,7 @@
:key="attribute.id"
:attribute-key="attribute.attribute_key"
:attribute-type="attribute.attribute_display_type"
:values="attribute.attribute_values"
:label="attribute.attribute_display_name"
:icon="attribute.icon"
emoji=""

96
app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
View File

@@ -30,6 +30,15 @@
@input="onDisplayNameChange"
@blur="$v.displayName.$touch"
/>
<woot-input
v-model="attributeKey"
:label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
type="text"
:class="{ error: $v.attributeKey.$error }"
:error="$v.attributeKey.$error ? keyErrorMessage : ''"
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
@blur="$v.attributeKey.$touch"
/>
<label :class="{ error: $v.description.$error }">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.LABEL') }}
<textarea
@@ -54,15 +63,29 @@
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.ERROR') }}
</span>
</label>
<woot-input
v-model="attributeKey"
:label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
type="text"
:class="{ error: $v.attributeKey.$error }"
:error="$v.attributeKey.$error ? keyErrorMessage : ''"
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
@blur="$v.attributeKey.$touch"
/>
<div v-if="isAttributeTypeList" class="multiselect--wrap">
<label>
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.LABEL') }}
</label>
<multiselect
ref="tagInput"
v-model="values"
:placeholder="
$t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.PLACEHOLDER')
"
label="name"
track-by="name"
:class="{ invalid: isMultiselectInvalid }"
:options="options"
:multiple="true"
:taggable="true"
@close="onTouch"
@tag="addTagValue"
/>
<label v-show="isMultiselectInvalid" class="error-message">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
</label>
</div>
<div class="modal-footer">
<woot-submit-button
:disabled="isButtonDisabled"
@@ -103,7 +126,10 @@ export default {
attributeKey: '',
models: ATTRIBUTE_MODELS,
types: ATTRIBUTE_TYPES,
values: [],
options: [],
show: true,
isTouched: false,
};
},
@@ -111,11 +137,21 @@ export default {
...mapGetters({
uiFlags: 'getUIFlags',
}),
isMultiselectInvalid() {
return this.isTouched && this.values.length === 0;
},
isTagInputInvalid() {
return this.isAttributeTypeList && this.values.length === 0;
},
attributeListValues() {
return this.values.map(item => item.name);
},
isButtonDisabled() {
return (
this.$v.displayName.$invalid ||
this.$v.description.$invalid ||
this.uiFlags.isCreating
this.uiFlags.isCreating ||
this.isTagInputInvalid
);
},
keyErrorMessage() {
@@ -124,6 +160,9 @@ export default {
}
return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR');
},
isAttributeTypeList() {
return this.attributeType === 6;
},
},
validations: {
@@ -149,6 +188,16 @@ export default {
},
methods: {
addTagValue(tagValue) {
const tag = {
name: tagValue,
};
this.values.push(tag);
this.$refs.tagInput.$el.focus();
},
onTouch() {
this.isTouched = true;
},
onDisplayNameChange() {
this.attributeKey = convertToSlug(this.displayName);
},
@@ -164,6 +213,7 @@ export default {
attribute_model: this.attributeModel,
attribute_display_type: this.attributeType,
attribute_key: this.attributeKey,
attribute_values: this.attributeListValues,
});
this.alertMessage = this.$t('ATTRIBUTES_MGMT.ADD.API.SUCCESS_MESSAGE');
this.onClose();
@@ -183,4 +233,30 @@ export default {
padding: 0 var(--space-small) var(--space-small) 0;
font-family: monospace;
}
.multiselect--wrap {
margin-bottom: var(--space-normal);
.error-message {
color: var(--r-400);
font-size: var(--font-size-small);
font-weight: var(--font-weight-normal);
}
.invalid {
::v-deep {
.multiselect__tags {
border: 1px solid var(--r-400);
}
}
}
}
::v-deep {
.multiselect {
margin-bottom: 0;
}
.multiselect__content-wrapper {
display: none;
}
.multiselect--active .multiselect__tags {
border-radius: var(--border-radius-normal);
}
}
</style>

102
app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
View File

@@ -16,6 +16,16 @@
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
@blur="$v.displayName.$touch"
/>
<woot-input
v-model.trim="attributeKey"
:label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
type="text"
:class="{ error: $v.attributeKey.$error }"
:error="$v.attributeKey.$error ? keyErrorMessage : ''"
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
readonly
@blur="$v.attributeKey.$touch"
/>
<label :class="{ error: $v.description.$error }">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.LABEL') }}
<textarea
@@ -40,22 +50,29 @@
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.ERROR') }}
</span>
</label>
<woot-input
v-model.trim="attributeKey"
:label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
type="text"
:class="{ error: $v.attributeKey.$error }"
:error="$v.attributeKey.$error ? keyErrorMessage : ''"
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
readonly
@blur="$v.attributeKey.$touch"
/>
<div v-if="isAttributeTypeList" class="multiselect--wrap">
<label>
{{ $t('ATTRIBUTES_MGMT.EDIT.TYPE.LIST.LABEL') }}
</label>
<multiselect
ref="tagInput"
v-model="values"
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.PLACEHOLDER')"
label="name"
track-by="name"
:class="{ invalid: isMultiselectInvalid }"
:options="options"
:multiple="true"
:taggable="true"
@tag="addTagValue"
/>
<label v-show="isMultiselectInvalid" class="error-message">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
</label>
</div>
</div>
<div class="modal-footer">
<woot-button
:is-loading="isUpdating"
:disabled="$v.description.$invalid"
>
<woot-button :is-loading="isUpdating" :disabled="isButtonDisabled">
{{ $t('ATTRIBUTES_MGMT.EDIT.UPDATE_BUTTON_TEXT') }}
</woot-button>
<woot-button variant="clear" @click.prevent="onClose">
@@ -92,6 +109,9 @@ export default {
types: ATTRIBUTE_TYPES,
show: true,
attributeKey: '',
values: [],
options: [],
isTouched: true,
};
},
validations: {
@@ -116,6 +136,22 @@ export default {
...mapGetters({
uiFlags: 'attributes/getUIFlags',
}),
setAttributeListValue() {
return this.selectedAttribute.attribute_values.map(values => ({
name: values,
}));
},
updatedAttributeListValues() {
return this.values.map(item => item.name);
},
isButtonDisabled() {
return this.$v.description.$invalid || this.isMultiselectInvalid;
},
isMultiselectInvalid() {
return (
this.isAttributeTypeList && this.isTouched && this.values.length === 0
);
},
pageTitle() {
return `${this.$t('ATTRIBUTES_MGMT.EDIT.TITLE')} - ${
this.selectedAttribute.attribute_display_name
@@ -134,6 +170,9 @@ export default {
}
return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR');
},
isAttributeTypeList() {
return this.attributeType === 6;
},
},
mounted() {
this.setFormValues();
@@ -142,11 +181,19 @@ export default {
onClose() {
this.$emit('on-close');
},
addTagValue(tagValue) {
const tag = {
name: tagValue,
};
this.values.push(tag);
this.$refs.tagInput.$el.focus();
},
setFormValues() {
this.displayName = this.selectedAttribute.attribute_display_name;
this.description = this.selectedAttribute.attribute_description;
this.attributeType = this.selectedAttributeType;
this.attributeKey = this.selectedAttribute.attribute_key;
this.values = this.setAttributeListValue;
},
async editAttributes() {
this.$v.$touch();
@@ -158,6 +205,7 @@ export default {
id: this.selectedAttribute.id,
attribute_description: this.description,
attribute_display_name: this.displayName,
attribute_values: this.updatedAttributeListValues,
});
this.alertMessage = this.$t('ATTRIBUTES_MGMT.EDIT.API.SUCCESS_MESSAGE');
@@ -178,4 +226,30 @@ export default {
padding: 0 var(--space-small) var(--space-small) 0;
font-family: monospace;
}
.multiselect--wrap {
margin-bottom: var(--space-normal);
.error-message {
color: var(--r-400);
font-size: var(--font-size-small);
font-weight: var(--font-weight-normal);
}
.invalid {
::v-deep {
.multiselect__tags {
border: 1px solid var(--r-400);
}
}
}
}
::v-deep {
.multiselect {
margin-bottom: 0;
}
.multiselect__content-wrapper {
display: none;
}
.multiselect--active .multiselect__tags {
border-radius: var(--border-radius-normal);
}
}
</style>

8
app/javascript/dashboard/routes/dashboard/settings/attributes/constants.js
View File

@@ -26,4 +26,12 @@ export const ATTRIBUTE_TYPES = [
id: 5,
option: 'Date',
},
{
id: 6,
option: 'List',
},
{
id: 7,
option: 'Checkbox',
},
];