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