fix: vue3 event subscription problems (#1074)

* fix: vue3 event subscription fixes * fix: icon sizes for email management * fix: add space under steppers with buttons * fix: autohide checkbox details to tighten spacing * fix: css for panels was not applied * fix: css for info card text size * fix: layout of email receipt dialog
bcgov · Oct 11, 2023 · a50d1c1 · a50d1c1
1 parent ba404d7
commit a50d1c1
Show file tree

Hide file tree

Showing 10 changed files with 43 additions and 24 deletions.
diff --git a/app/frontend/src/components/base/BaseDialog.vue b/app/frontend/src/components/base/BaseDialog.vue
@@ -180,7 +180,7 @@ export default {
 </template>
 
 <style scoped>
-.v-card__text {
+.v-card-text {
   display: flex !important;
   padding: 1.5rem;
 }

diff --git a/app/frontend/src/components/base/BaseInfoCard.vue b/app/frontend/src/components/base/BaseInfoCard.vue
@@ -20,7 +20,7 @@
     color: #38598a;
     margin-right: 0.5em;
   }
-  .v-card__text:not(.under-title) {
+  .v-card-text:not(.under-title) {
     color: #494949 !important;
     font-size: 16px;
     padding: 0;

diff --git a/app/frontend/src/components/base/BasePanel.vue b/app/frontend/src/components/base/BasePanel.vue
@@ -12,13 +12,13 @@
 <style lang="scss" scoped>
 .v-card {
   border-radius: 0.5em;
-  .v-card__title {
+  .v-card-title {
     background-color: #efefef;
     border-bottom: 1px solid lightgray;
     font-weight: 800;
     padding: 0.5em 1em;
   }
-  .v-card__text {
+  .v-card-text {
     padding: 1.5em;
   }
 }

diff --git a/app/frontend/src/components/base/BaseStepper.vue b/app/frontend/src/components/base/BaseStepper.vue
@@ -65,12 +65,12 @@ export default {
 
       <v-stepper-window>
         <v-stepper-window-item :value="1">
-          <div>
+          <div class="mb-4">
             <slot name="setUpForm"></slot>
           </div>
         </v-stepper-window-item>
         <v-stepper-window-item :value="2">
-          <div>
+          <div class="mb-4">
             <slot name="designForm"></slot>
           </div>
         </v-stepper-window-item>

diff --git a/app/frontend/src/components/designer/settings/FormFunctionalitySettings.vue b/app/frontend/src/components/designer/settings/FormFunctionalitySettings.vue
@@ -59,6 +59,7 @@ export default {
     >
     <v-checkbox
       v-model="form.enableSubmitterDraft"
+      hide-details="auto"
       class="my-0"
       :disabled="form.userType === ID_MODE.PUBLIC"
       @update:model-value="enableSubmitterDraftChanged"
@@ -72,7 +73,11 @@ export default {
       </template>
     </v-checkbox>
 
-    <v-checkbox v-model="form.enableStatusUpdates" class="my-0">
+    <v-checkbox
+      v-model="form.enableStatusUpdates"
+      hide-details="auto"
+      class="my-0"
+    >
       <template #label>
         <span
           :class="{ 'mr-2': isRTL }"
@@ -84,6 +89,7 @@ export default {
 
     <v-checkbox
       v-model="form.allowSubmitterToUploadFile"
+      hide-details="auto"
       class="my-0"
       :disabled="form.userType === ID_MODE.PUBLIC"
       @update:model-value="allowSubmitterToUploadFileChanged"
@@ -126,6 +132,7 @@ export default {
       v-if="!isFormPublished"
       v-model="form.schedule.enabled"
       disabled
+      hide-details="auto"
       class="my-0"
     >
       <template #label>
@@ -138,6 +145,7 @@ export default {
     <v-checkbox
       v-if="isFormPublished"
       v-model="form.schedule.enabled"
+      hide-details="auto"
       class="my-0"
     >
       <template #label>
@@ -175,6 +183,7 @@ export default {
 
     <v-checkbox
       v-model="form.enableCopyExistingSubmission"
+      hide-details="auto"
       class="my-0"
       :disabled="form.userType === ID_MODE.PUBLIC"
     >
@@ -214,6 +223,7 @@ export default {
     </v-checkbox>
     <v-checkbox
       v-model="form.subscribe.enabled"
+      hide-details="auto"
       class="my-0"
       :disabled="idirUser === false || !isFormPublished"
     >

diff --git a/app/frontend/src/components/designer/settings/FormSubmissionSettings.vue b/app/frontend/src/components/designer/settings/FormSubmissionSettings.vue
@@ -38,6 +38,7 @@ export default {
     >
     <v-checkbox
       v-model="form.showSubmissionConfirmation"
+      hide-details="auto"
       class="my-0"
       :class="{ 'dir-rtl': isRTL }"
     >
@@ -75,7 +76,11 @@ export default {
       </template>
     </v-checkbox>
 
-    <v-checkbox v-model="form.sendSubReceivedEmail" class="my-0">
+    <v-checkbox
+      v-model="form.sendSubReceivedEmail"
+      hide-details="auto"
+      class="my-0"
+    >
       <template #label>
         <div :class="{ 'mr-2': isRTL }">
           <span :lang="lang">

diff --git a/app/frontend/src/components/forms/RequestReceipt.vue b/app/frontend/src/components/forms/RequestReceipt.vue
@@ -130,7 +130,11 @@ export default {
             ]"
             :label="$t('trans.requestReceipt.emailPriority')"
             :lang="lang"
-          />
+          >
+            <template #prepend>
+              <v-icon />
+            </template>
+          </v-select>
         </v-form>
       </template>
       <template #button-text-continue>

diff --git a/app/frontend/src/components/forms/manage/EmailManagement.vue b/app/frontend/src/components/forms/manage/EmailManagement.vue
@@ -46,6 +46,8 @@ export default {
           }}<v-icon
             color="primary"
             class="ml-3"
+            size="small"
+            density="default"
             :class="{ 'mr-2': isRTL }"
             icon="mdi:mdi-flask"
           />
@@ -59,6 +61,8 @@ export default {
               <v-btn
                 class="mx-1"
                 color="primary"
+                size="x-small"
+                density="default"
                 icon
                 :disabled="!formId"
                 v-bind="props"

diff --git a/app/frontend/src/components/forms/manage/ManageFormActions.vue b/app/frontend/src/components/forms/manage/ManageFormActions.vue
@@ -115,11 +115,7 @@ export default {
         </template>
         <span :lang="lang">
           {{ $t('trans.manageFormActions.emailManagement') }}
-          <v-icon
-            class="ml-3"
-            :class="{ 'mr-2': isRTL }"
-            icon="mdi:mdi-flask"
-          />
+          <v-icon icon="mdi:mdi-flask" size="small" />
         </span>
       </v-tooltip>
     </span>

diff --git a/app/frontend/src/components/forms/manage/Subscription.vue b/app/frontend/src/components/forms/manage/Subscription.vue
@@ -32,6 +32,7 @@ export default {
       'form',
       'lang',
       'permissions',
+      'subscriptionData',
       'version',
     ]),
   },
@@ -43,7 +44,9 @@ export default {
     ...mapActions(useNotificationStore, ['addNotification']),
     async updateSettings() {
       try {
-        if (this.$refs.subscriptionForm.validate()) {
+        const { valid } = await this.$refs.subscriptionForm.validate();
+
+        if (valid) {
           let subscriptionData = {
             ...this.subscriptionData,
             formId: this.form.id,
@@ -131,18 +134,15 @@ export default {
         </v-col>
         <v-col cols="12" sm="3">
           <v-tooltip location="bottom">
-            <template #activator="{ on, attrs }">
+            <template #activator="{ props }">
               <v-btn
                 color="primary"
-                icon
-                size="small"
-                v-bind="attrs"
-                v-on="on"
+                :icon="showSecret ? 'mdi:mdi-eye-off' : 'mdi:mdi-eye'"
+                size="x-small"
+                v-bind="props"
+                density="default"
                 @click="showHideKey"
-              >
-                <v-icon v-if="showSecret">visibility_off</v-icon>
-                <v-icon v-else>visibility</v-icon>
-              </v-btn>
+              />
             </template>
             <span v-if="showSecret" :lang="lang">
               {{ $t('trans.subscribeEvent.hideSecret') }}