chore: Add the option to edit custom attribute display name (#3382)

This commit is contained in:
Muhsin Keloth 2021-11-15 12:45:47 +05:30 committed by GitHub
parent bb18516403
commit c2db8a1fd7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 39 additions and 20 deletions

View file

@ -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": {

View file

@ -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 {

View file

@ -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);
}
},
},

View file

@ -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 });
}