[airavata-django-portal] 04/04: AIRAVATA-3565 Combining both forms into one

[ma...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

machristie pushed a commit to branch AIRAVATA-3562
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git

commit 5c2aed337dbba7302f214c5c2991b56bb121e520
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Tue May 10 17:30:34 2022 -0400

    AIRAVATA-3565 Combining both forms into one
---
 .../js/components/ExtendedUserProfileEditor.vue    |  4 +-
 .../js/components/UserProfileEditor.vue            | 11 +----
 .../js/containers/UserProfileContainer.vue         | 47 +++++++++++++++-------
 3 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileEditor.vue b/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileEditor.vue
index 1f6bcdf8..d1a6df0d 100644
--- a/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileEditor.vue
+++ b/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileEditor.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-card>
+  <div>
     <template v-for="extendedUserProfileField in extendedUserProfileFields">
       <component
         ref="extendedUserProfileFieldComponents"
@@ -8,7 +8,7 @@
         :extended-user-profile-field="extendedUserProfileField"
       />
     </template>
-  </b-card>
+  </div>
 </template>
 
 <script>
diff --git a/django_airavata/apps/auth/static/django_airavata_auth/js/components/UserProfileEditor.vue b/django_airavata/apps/auth/static/django_airavata_auth/js/components/UserProfileEditor.vue
index 68f423e8..bbac76ab 100644
--- a/django_airavata/apps/auth/static/django_airavata_auth/js/components/UserProfileEditor.vue
+++ b/django_airavata/apps/auth/static/django_airavata_auth/js/components/UserProfileEditor.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-card v-if="user">
+  <div v-if="user">
     <b-form-group
       label="Username"
       :disabled="true"
@@ -40,14 +40,7 @@
         ></b-alert
       >
     </b-form-group>
-    <!-- TODO: move save button up to container -->
-    <b-button
-      variant="primary"
-      @click="save"
-      :disabled="$v.$invalid || disabled"
-      >Save</b-button
-    >
-  </b-card>
+  </div>
 </template>
 
 <script>
diff --git a/django_airavata/apps/auth/static/django_airavata_auth/js/containers/UserProfileContainer.vue b/django_airavata/apps/auth/static/django_airavata_auth/js/containers/UserProfileContainer.vue
index 3955c151..86fbb395 100644
--- a/django_airavata/apps/auth/static/django_airavata_auth/js/containers/UserProfileContainer.vue
+++ b/django_airavata/apps/auth/static/django_airavata_auth/js/containers/UserProfileContainer.vue
@@ -16,16 +16,22 @@
     <b-alert v-else-if="user && !user.complete" show>
       >Please complete your user profile before continuing.</b-alert
     >
-    <user-profile-editor
-      ref="userProfileEditor"
-      @save="onSave"
-      @resend-email-verification="handleResendEmailVerification"
-    />
-    <!-- TODO: include both forms in the same card -->
-    <!-- include extended-user-profile-editor if there are extendedUserProfileFields -->
-    <extended-user-profile-editor
-      v-if="extendedUserProfileFields && extendedUserProfileFields.length > 0"
-    />
+    <b-card>
+      <user-profile-editor
+        ref="userProfileEditor"
+        @save="onSave"
+        @resend-email-verification="handleResendEmailVerification"
+      />
+      <!-- include extended-user-profile-editor if there are extendedUserProfileFields -->
+      <template
+        v-if="extendedUserProfileFields && extendedUserProfileFields.length > 0"
+      >
+        <hr />
+        <extended-user-profile-editor ref="extendedUserProfileEditor" />
+      </template>
+
+      <b-button variant="primary" @click="onSave">Save</b-button>
+    </b-card>
     <b-link
       v-if="user && user.complete"
       class="text-muted small"
@@ -64,7 +70,9 @@ export default {
     }
   },
   data() {
-    return {};
+    return {
+      invalidForm: false,
+    };
   },
   computed: {
     ...mapGetters("userProfile", ["user"]),
@@ -83,10 +91,12 @@ export default {
       "saveExtendedUserProfileValues",
     ]),
     async onSave() {
-      // TODO: only save if both standard and extended user profiles are valid
-      this.saveExtendedUserProfileValues();
-      if (this.$refs.userProfileEditor.valid) {
+      if (
+        this.$refs.userProfileEditor.valid &&
+        this.$refs.extendedUserProfileEditor.valid
+      ) {
         await this.updateUser();
+        await this.saveExtendedUserProfileValues();
         notifications.NotificationList.add(
           new notifications.Notification({
             type: "SUCCESS",
@@ -94,6 +104,15 @@ export default {
             duration: 5,
           })
         );
+      } else {
+        // TODO: make sure to highlight which fields are invalid
+        notifications.NotificationList.add(
+          new notifications.Notification({
+            type: "WARNING",
+            message: "The form is invalid. Please fix and try again.",
+            duration: 5,
+          })
+        );
       }
     },
     async handleResendEmailVerification() {