This is an automated email from the ASF dual-hosted git repository. machristie pushed a commit to branch develop in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit 5e286bf5f58ed9d34efe9ee826e27c57b410d187 Author: Marcus Christie <[email protected]> AuthorDate: Fri Nov 18 10:00:26 2022 -0500 AIRAVATA-3669 Validation feedback displayed when save is click but form is invalid --- .../src/components/users/ExtendedUserProfileContainer.vue | 15 +++++++-------- .../field-editors/ExtendedUserProfileFieldEditor.vue | 14 ++++++++++++-- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/users/ExtendedUserProfileContainer.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/users/ExtendedUserProfileContainer.vue index 1948a0dc..f2ff36a0 100644 --- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/users/ExtendedUserProfileContainer.vue +++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/users/ExtendedUserProfileContainer.vue @@ -17,6 +17,7 @@ > <div class="col"> <extended-user-profile-field-editor + ref="extendedUserProfileFieldEditors" :extendedUserProfileField="field" @valid="recordValidChildComponent(field)" @invalid="recordInvalidChildComponent(field)" @@ -39,13 +40,7 @@ >User Agreement</b-dropdown-item > </b-dropdown> - <b-button - variant="primary" - @click="save" - :disabled="!valid" - class="ml-2" - >Save</b-button - > + <b-button variant="primary" @click="save" class="ml-2">Save</b-button> <b-button variant="secondary" class="ml-auto" href="/admin/users" >Return to Manage Users</b-button > @@ -116,7 +111,11 @@ export default { field.links.splice(i, 1); }, save() { - this.saveExtendedUserProfileFields(); + if (this.valid) { + this.saveExtendedUserProfileFields(); + } else { + this.$refs.extendedUserProfileFieldEditors.forEach((c) => c.touch()); + } }, }, computed: { diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/users/field-editors/ExtendedUserProfileFieldEditor.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/users/field-editors/ExtendedUserProfileFieldEditor.vue index 965fdd06..a8d60d14 100644 --- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/users/field-editors/ExtendedUserProfileFieldEditor.vue +++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/users/field-editors/ExtendedUserProfileFieldEditor.vue @@ -1,5 +1,8 @@ <template> - <b-card :title="title"> + <b-card + :title="title" + :border-variant="$v.$anyDirty && $v.$invalid ? 'danger' : null" + > <b-form-group label="Name" label-cols="3"> <b-form-input v-model="name" :state="validateState($v.name)" /> <b-form-invalid-feedback :state="validateState($v.name)" @@ -19,7 +22,11 @@ >This field is required.</b-form-invalid-feedback > </b-form-group> - <b-form-group label="Help text" label-cols="3"> + <b-form-group label-cols="3"> + <template #label> + Help text + <small class="text-muted text-small">(Optional)</small> + </template> <b-form-input v-model="help_text" /> </b-form-group> <b-form-group> @@ -381,6 +388,9 @@ export default { }); }, validateState: errors.vuelidateHelpers.validateState, + touch() { + this.$v.$touch(); + }, }, watch: { valid: {
