chore: Add the option to edit custom attribute display name (#3382)
This commit is contained in:
parent
bb18516403
commit
c2db8a1fd7
4 changed files with 39 additions and 20 deletions
|
@ -32,7 +32,8 @@
|
|||
"KEY": {
|
||||
"LABEL": "Key",
|
||||
"PLACEHOLDER": "Enter custom attribute key",
|
||||
"ERROR": "Key is required"
|
||||
"ERROR": "Key is required",
|
||||
"IN_VALID": "Invalid key"
|
||||
}
|
||||
},
|
||||
"API": {
|
||||
|
|
|
@ -59,11 +59,7 @@
|
|||
:label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
|
||||
type="text"
|
||||
:class="{ error: $v.attributeKey.$error }"
|
||||
:error="
|
||||
$v.attributeKey.$error
|
||||
? $t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR')
|
||||
: ''
|
||||
"
|
||||
:error="$v.attributeKey.$error ? keyErrorMessage : ''"
|
||||
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
|
||||
@blur="$v.attributeKey.$touch"
|
||||
/>
|
||||
|
@ -122,6 +118,12 @@ export default {
|
|||
this.uiFlags.isCreating
|
||||
);
|
||||
},
|
||||
keyErrorMessage() {
|
||||
if (!this.$v.attributeKey.isKey) {
|
||||
return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.IN_VALID');
|
||||
}
|
||||
return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR');
|
||||
},
|
||||
},
|
||||
|
||||
validations: {
|
||||
|
@ -140,6 +142,9 @@ export default {
|
|||
},
|
||||
attributeKey: {
|
||||
required,
|
||||
isKey(value) {
|
||||
return !(value.indexOf(' ') >= 0);
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
|
@ -148,6 +153,10 @@ export default {
|
|||
this.attributeKey = convertToSlug(this.displayName);
|
||||
},
|
||||
async addAttributes() {
|
||||
this.$v.$touch();
|
||||
if (this.$v.$invalid) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await this.$store.dispatch('attributes/create', {
|
||||
attribute_display_name: this.displayName,
|
||||
|
@ -159,7 +168,7 @@ export default {
|
|||
this.alertMessage = this.$t('ATTRIBUTES_MGMT.ADD.API.SUCCESS_MESSAGE');
|
||||
this.onClose();
|
||||
} catch (error) {
|
||||
const errorMessage = error?.response?.data?.message;
|
||||
const errorMessage = error?.message;
|
||||
this.alertMessage =
|
||||
errorMessage || this.$t('ATTRIBUTES_MGMT.ADD.API.ERROR_MESSAGE');
|
||||
} finally {
|
||||
|
|
|
@ -14,7 +14,6 @@
|
|||
: ''
|
||||
"
|
||||
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
|
||||
readonly
|
||||
@blur="$v.displayName.$touch"
|
||||
/>
|
||||
<label :class="{ error: $v.description.$error }">
|
||||
|
@ -46,11 +45,7 @@
|
|||
:label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
|
||||
type="text"
|
||||
:class="{ error: $v.attributeKey.$error }"
|
||||
:error="
|
||||
$v.attributeKey.$error
|
||||
? $t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR')
|
||||
: ''
|
||||
"
|
||||
:error="$v.attributeKey.$error ? keyErrorMessage : ''"
|
||||
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
|
||||
readonly
|
||||
@blur="$v.attributeKey.$touch"
|
||||
|
@ -112,6 +107,9 @@ export default {
|
|||
},
|
||||
attributeKey: {
|
||||
required,
|
||||
isKey(value) {
|
||||
return !(value.indexOf(' ') >= 0);
|
||||
},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
|
@ -130,6 +128,12 @@ export default {
|
|||
this.selectedAttribute.attribute_display_type
|
||||
).id;
|
||||
},
|
||||
keyErrorMessage() {
|
||||
if (!this.$v.attributeKey.isKey) {
|
||||
return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.IN_VALID');
|
||||
}
|
||||
return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR');
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.setFormValues();
|
||||
|
@ -153,14 +157,17 @@ export default {
|
|||
await this.$store.dispatch('attributes/update', {
|
||||
id: this.selectedAttribute.id,
|
||||
attribute_description: this.description,
|
||||
attribute_display_name: this.displayName,
|
||||
});
|
||||
this.showAlert(this.$t('ATTRIBUTES_MGMT.EDIT.API.SUCCESS_MESSAGE'));
|
||||
|
||||
this.alertMessage = this.$t('ATTRIBUTES_MGMT.EDIT.API.SUCCESS_MESSAGE');
|
||||
this.onClose();
|
||||
} catch (error) {
|
||||
const errorMessage =
|
||||
error?.response?.message ||
|
||||
this.$t('ATTRIBUTES_MGMT.EDIT.API.ERROR_MESSAGE');
|
||||
this.showAlert(errorMessage);
|
||||
const errorMessage = error?.message;
|
||||
this.alertMessage =
|
||||
errorMessage || this.$t('ATTRIBUTES_MGMT.EDIT.API.ERROR_MESSAGE');
|
||||
} finally {
|
||||
this.showAlert(this.alertMessage);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
@ -41,7 +41,8 @@ export const actions = {
|
|||
const response = await AttributeAPI.create(attributeObj);
|
||||
commit(types.ADD_CUSTOM_ATTRIBUTE, response.data);
|
||||
} catch (error) {
|
||||
throw new Error(error);
|
||||
const errorMessage = error?.response?.data?.message;
|
||||
throw new Error(errorMessage);
|
||||
} finally {
|
||||
commit(types.SET_CUSTOM_ATTRIBUTE_UI_FLAG, { isCreating: false });
|
||||
}
|
||||
|
@ -52,7 +53,8 @@ export const actions = {
|
|||
const response = await AttributeAPI.update(id, updateObj);
|
||||
commit(types.EDIT_CUSTOM_ATTRIBUTE, response.data);
|
||||
} catch (error) {
|
||||
throw new Error(error);
|
||||
const errorMessage = error?.response?.data?.message;
|
||||
throw new Error(errorMessage);
|
||||
} finally {
|
||||
commit(types.SET_CUSTOM_ATTRIBUTE_UI_FLAG, { isUpdating: false });
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue