Show error messages contextually when creating a group

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-03-24 16:36:30 +01:00 committed by tykayn
parent 16fd012e9b
commit 774e4a514c

View File

@ -22,11 +22,8 @@
}}</label> }}</label>
<div class="field-body"> <div class="field-body">
<b-field <b-field
:message=" :message="preferredUsernameErrors[0]"
$t( :type="preferredUsernameErrors[1]"
'Only alphanumeric lowercased characters and underscores are supported.'
)
"
> >
<b-input <b-input
ref="preferredUsernameInput" ref="preferredUsernameInput"
@ -63,8 +60,8 @@
<b-field <b-field
:label="$t('Description')" :label="$t('Description')"
label-for="group-summary" label-for="group-summary"
:message="fieldErrors.summary" :message="summaryErrors[0]"
:type="fieldErrors.summary ? 'is-danger' : undefined" :type="summaryErrors[1]"
> >
<b-input v-model="group.summary" type="textarea" id="group-summary" /> <b-input v-model="group.summary" type="textarea" id="group-summary" />
</b-field> </b-field>
@ -140,13 +137,17 @@ export default class CreateGroup extends mixins(IdentityEditionMixin) {
errors: string[] = []; errors: string[] = [];
fieldErrors: Record<string, string> = {}; fieldErrors: Record<string, string | undefined> = {
preferred_username: undefined,
summary: undefined,
};
usernameWithDomain = usernameWithDomain; usernameWithDomain = usernameWithDomain;
async createGroup(): Promise<void> { async createGroup(): Promise<void> {
try { try {
this.errors = []; this.errors = [];
this.fieldErrors = { preferred_username: undefined, summary: undefined };
await this.$apollo.mutate({ await this.$apollo.mutate({
mutation: CREATE_GROUP, mutation: CREATE_GROUP,
variables: this.buildVariables(), variables: this.buildVariables(),
@ -263,6 +264,24 @@ export default class CreateGroup extends mixins(IdentityEditionMixin) {
} }
}); });
} }
get summaryErrors() {
const message = this.fieldErrors.summary
? this.fieldErrors.summary
: undefined;
const type = this.fieldErrors.summary ? "is-danger" : undefined;
return [message, type];
}
get preferredUsernameErrors() {
const message = this.fieldErrors.preferred_username
? this.fieldErrors.preferred_username
: this.$t(
"Only alphanumeric lowercased characters and underscores are supported."
);
const type = this.fieldErrors.preferred_username ? "is-danger" : undefined;
return [message, type];
}
} }
</script> </script>