diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue index bdadc8c59..b11350d2d 100644 --- a/app/javascript/dashboard/components/CustomAttribute.vue +++ b/app/javascript/dashboard/components/CustomAttribute.vue @@ -2,77 +2,113 @@

- - {{ label }} - +
+ +
+
+ + {{ label }} + + +

-
-
- -
- +
+
+
+ +
+ +
+
+ + {{ errorMessage }} + +
+
+ + {{ value || '---' }} + +

+ {{ formattedValue || '---' }} +

+
+ +
- - {{ errorMessage }} -
-
- - {{ value || '---' }} - -

- {{ formattedValue || '---' }} -

- - - +
@@ -82,13 +118,18 @@ import format from 'date-fns/format'; import { required, url } from 'vuelidate/lib/validators'; import { BUS_EVENTS } from 'shared/constants/busEvents'; +import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue'; const DATE_FORMAT = 'yyyy-MM-dd'; export default { + components: { + MultiselectDropdown, + }, props: { label: { type: String, required: true }, - value: { type: [String, Number], default: '' }, + values: { type: Array, default: () => [] }, + value: { type: [String, Number, Boolean], default: '' }, showActions: { type: Boolean, default: false }, attributeType: { type: String, default: 'text' }, attributeKey: { type: String, required: true }, @@ -115,9 +156,28 @@ export default { }, computed: { + listOptions() { + return this.values.map((value, index) => ({ + id: index + 1, + name: value, + })); + }, + selectedItem() { + const id = this.values.indexOf(this.editedValue) + 1; + return { id, name: this.editedValue }; + }, + isAttributeTypeCheckbox() { + return this.attributeType === 'checkbox'; + }, + isAttributeTypeList() { + return this.attributeType === 'list'; + }, isAttributeTypeLink() { return this.attributeType === 'link'; }, + notAttributeTypeCheckboxAndList() { + return !this.isAttributeTypeCheckbox && !this.isAttributeTypeList; + }, inputType() { return this.isAttributeTypeLink ? 'url' : this.attributeType; }, @@ -156,6 +216,12 @@ export default { this.focusInput(); }); }, + onUpdateListValue(value) { + if (value) { + this.editedValue = value.name; + this.onUpdate(); + } + }, onUpdate() { const updatedValue = this.attributeType === 'date' @@ -194,8 +260,23 @@ export default { display: flex; align-items: center; margin: 0; + width: 100%; +} +.checkbox-wrap { + display: flex; + align-items: center; +} +.checkbox { + margin: 0 var(--space-small) 0 0; +} +.name-button__wrap { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; } .attribute-name { + width: 100%; &.error { color: var(--r-400); } @@ -206,22 +287,34 @@ export default { .edit-button { display: none; } +.delete-button { + display: flex; + justify-content: flex-end; + width: var(--space-normal); +} .value--view { display: flex; &.is-editable:hover { .value { background: var(--color-background); + margin-bottom: 0; } .edit-button { display: block; } } + + .action-buttons__wrap { + display: flex; + max-width: var(--space-larger); + } } .value { display: inline-block; min-width: var(--space-mega); border-radius: var(--border-radius-small); + margin-bottom: 0; word-break: break-all; padding: var(--space-micro) var(--space-smaller); } @@ -235,4 +328,17 @@ export default { margin-top: -1.6rem; width: 100%; } + +::v-deep { + .selector-wrap { + margin: 0; + top: var(--space-smaller); + .selector-name { + margin-left: 0; + } + } + .name { + margin-left: 0; + } +} diff --git a/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json b/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json index 0ea8af780..77c81edd3 100644 --- a/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json +++ b/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json @@ -27,7 +27,12 @@ "TYPE": { "LABEL": "Type", "PLACEHOLDER": "Please select a type", - "ERROR": "Type is required" + "ERROR": "Type is required", + "LIST": { + "LABEL": "List Values", + "PLACEHOLDER": "Please enter value and press enter key", + "ERROR": "Must have at least one value" + } }, "KEY": { "LABEL": "Key", @@ -58,6 +63,12 @@ "EDIT": { "TITLE": "Edit Custom Attribute", "UPDATE_BUTTON_TEXT": "Update", + "TYPE": { + "LIST": { + "LABEL": "List Values", + "PLACEHOLDER": "Please enter values and press enter key" + } + }, "API": { "SUCCESS_MESSAGE": "Custom Attribute updated successfully", "ERROR_MESSAGE": "There was an error updating custom attribute, please try again" diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json index 0286dbfa4..a06331b4b 100644 --- a/app/javascript/dashboard/i18n/locale/en/contact.json +++ b/app/javascript/dashboard/i18n/locale/en/contact.json @@ -279,6 +279,13 @@ "TITLE": "Add attributes", "PLACEHOLDER": "Search attributes", "NO_RESULT": "No attributes found" + }, + "ATTRIBUTE_TYPE": { + "LIST": { + "PLACEHOLDER": "Select value", + "SEARCH_INPUT_PLACEHOLDER": "Search value", + "NO_RESULT": "No result found" + } } }, "VALIDATIONS": { diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue index c95e15ff7..ece28d004 100644 --- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue +++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue @@ -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="" diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue index 29f5c3fc8..75d0e0f72 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue @@ -30,6 +30,15 @@ @input="onDisplayNameChange" @blur="$v.displayName.$touch" /> +