Merge branch 'main' into feat/forms-1331-event-stream

app/frontend/src/components/admin/FormComponentsProactiveHelp.vue

@@ -1,172 +1,80 @@
-<script>
-import { mapActions, mapState } from 'pinia';
+<script setup>
+import { storeToRefs } from 'pinia';
+import { computed, onMounted, ref, watch } from 'vue';
 
 import GeneralLayout from '~/components/infolinks/GeneralLayout.vue';
 import { useAdminStore } from '~/store/admin';
+import { FormComponentProactiveHelpValues } from '~/utils/constants';
 
-export default {
-  components: {
-    GeneralLayout,
-  },
-  data() {
-    return {
-      layout: {
-        'Basic Layout': [
-          'Text/Images',
-          'Columns - 2',
-          'Columns - 3',
-          'Columns - 4',
-          'Tabs',
-          'Panel',
-        ],
-        'Basic Fields': [
-          'Text Field',
-          'Multi-line Text',
-          'Select List',
-          'Checkbox',
-          'Checkbox Group',
-          'Radio Group',
-          'Number',
-          'Phone Number',
-          'Email',
-          'Date / Time',
-          'Day',
-        ],
-        'Advanced Layout': [
-          'HTML Element',
-          'Content',
-          'Columns',
-          'Field Set',
-          'Panel',
-          'Table',
-          'Tabs',
-          'Well',
-        ],
-        'Advanced Fields': [
-          'Text Field',
-          'Email',
-          'Text Area',
-          'Url',
-          'Number',
-          'Phone Number',
-          'Tags',
-          'Address',
-          'Password',
-          'Date / Time',
-          'Checkbox',
-          'Day',
-          'Time',
-          'Select Boxes',
-          'Select',
-          'Currency',
-          'Radio',
-          'Survey',
-          'Signature',
-        ],
-        'Advanced Data': [
-          'Hidden',
-          'Container',
-          'Data Map',
-          'Data Grid',
-          'Edit Grid',
-          'Tree',
-        ],
-        'BC Government': ['File Upload', 'Business Name Search', 'BC Address'],
-      },
-      isPanelOpened: new Map(),
-      groupComponentsList: [],
-    };
-  },
-  computed: {
-    ...mapState(useAdminStore, ['fcProactiveHelp', 'fcProactiveHelpGroupList']),
-    groupList() {
-      return this.extractGroups();
-    },
-  },
-  watch: {
-    fcProactiveHelp() {
-      this.listFCProactiveHelp();
-    },
-  },
-  mounted() {
-    this.listFCProactiveHelp();
-  },
-  methods: {
-    ...mapActions(useAdminStore, ['listFCProactiveHelp']),
-    onExpansionPanelClick(groupName) {
-      if (
-        this.isPanelOpened.get(groupName) === undefined ||
-        !this.isPanelOpened.get(groupName)
-      ) {
-        this.isPanelOpened.set(groupName, true);
-        this.groupComponentsList = this.extractGroupComponents(groupName);
-      } else {
-        this.isPanelOpened.set(groupName, false);
-      }
+const loading = ref(false);
 
-      for (let key of this.isPanelOpened.keys()) {
-        if (key !== groupName) {
-          this.isPanelOpened.set(key, false);
-        }
-      }
-    },
-
-    //extract form builder layout groups.
-    extractGroups() {
-      let allgroups = [];
-      for (let [title] of Object.entries(this.layout)) {
-        if (title) {
-          allgroups.push(title);
-        }
-      }
-      return allgroups;
-    },
-
-    //extract all components in the select group in form builder
-    extractGroupComponents(groupName) {
-      let groupComponents = [];
-      for (let [title, components] of Object.entries(this.layout)) {
-        if (title && title === groupName && components) {
-          for (let componentName of components) {
-            groupComponents.push({ componentName: componentName });
-          }
-        }
+const adminStore = useAdminStore();
+
+const { fcProactiveHelp, fcProactiveHelpGroupList } = storeToRefs(adminStore);
+const formComponentGroupNames = computed(() =>
+  Object.keys(FormComponentProactiveHelpValues).filter((name) => name !== '')
+);
+
+watch(fcProactiveHelp, async () => {
+  await refreshData();
+});
+
+onMounted(async () => {
+  await refreshData();
+});
+
+async function refreshData() {
+  loading.value = true;
+  await adminStore.listFCProactiveHelp();
+  loading.value = false;
+}
+
+//extract all components in the select group in form builder
+function extractGroupComponents(groupName) {
+  let groupComponents = [];
+  for (let [title, components] of Object.entries(
+    FormComponentProactiveHelpValues
+  )) {
+    if (title && title === groupName && components) {
+      for (let componentName of components) {
+        groupComponents.push({ componentName: componentName });
       }
-      return groupComponents;
-    },
-  },
-};
+    }
+  }
+  return groupComponents;
+}
 </script>
 
 <template>
   <div class="mt-5">
-    <v-expansion-panels
-      class="nrmc-expand-collapse"
-      data-cy="info_link_expansion_panels"
-    >
-      <v-expansion-panel
-        v-for="(groupName, index) in groupList"
-        :key="index"
-        @click="onExpansionPanelClick(groupName)"
+    <v-skeleton-loader :loading="loading">
+      <v-expansion-panels
+        class="nrmc-expand-collapse"
+        data-cy="info_link_expansion_panels"
       >
-        <v-expansion-panel-title>
-          <div class="header">
-            <strong>{{ groupName }}</strong>
-          </div>
-        </v-expansion-panel-title>
-        <v-expansion-panel-text>
-          <GeneralLayout
-            :group-name="groupName"
-            :layout-list="groupComponentsList"
-            :components-list="
-              fcProactiveHelpGroupList && fcProactiveHelpGroupList[groupName]
-                ? fcProactiveHelpGroupList[groupName]
-                : []
-            "
-          />
-        </v-expansion-panel-text>
-      </v-expansion-panel>
-    </v-expansion-panels>
+        <v-expansion-panel
+          v-for="(groupName, index) in formComponentGroupNames"
+          :key="index"
+        >
+          <v-expansion-panel-title>
+            <div class="header">
+              <strong>{{ groupName }}</strong>
+            </div>
+          </v-expansion-panel-title>
+          <v-expansion-panel-text>
+            <GeneralLayout
+              :group-name="groupName"
+              :form-component-names="extractGroupComponents(groupName)"
+              :form-component-data="
+                fcProactiveHelpGroupList && fcProactiveHelpGroupList[groupName]
+                  ? fcProactiveHelpGroupList[groupName]
+                  : []
+              "
+            />
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+      </v-expansion-panels>
+    </v-skeleton-loader>
   </div>
 </template>
 

app/frontend/src/components/forms/PrintOptions.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
-import { onBeforeUnmount, computed, ref, watch } from 'vue';
+import { onBeforeUnmount, computed, ref, watch, nextTick } from 'vue';
 
 import { createDownload } from '~/composables/printOptions';
 import { formService, utilsService } from '~/services';
@@ -51,6 +51,8 @@ const defaultTemplateFilename = ref('');
 const defaultTemplateExtension = ref('');
 const displayTemplatePrintButton = ref(false);
 const isValidFile = ref(true);
+const isValidSize = ref(true);
+const fileInput = ref(null);
 const fileInputKey = ref(0);
 const validFileExtensions = ref(['txt', 'docx', 'html', 'odt', 'pptx', 'xlsx']);
 const defaultExportFileTypes = ref(['pdf']);
@@ -64,6 +66,7 @@ const { isRTL, form } = storeToRefs(formStore);
 const files = computed(() => templateForm.value.files);
 const formId = computed(() => (properties.f ? properties.f : form.value.id));
 const validationRules = computed(() => [
+  isValidSize.value || t('trans.documentTemplate.fileSizeError'),
   isValidFile.value || t('trans.documentTemplate.invalidFileMessage'),
 ]);
 
@@ -268,8 +271,16 @@ async function fetchDefaultTemplate() {
   }
 }
 
-function validateFileExtension(event) {
+function validateFile(event) {
   if (event.length > 0) {
+    // validate file size
+    if (event[0].size > 25000000) {
+      isValidSize.value = false;
+    } else {
+      isValidSize.value = true;
+    }
+
+    // validate file extension
     const fileExtension = event[0].name.split('.').pop();
     // reset the outputFileName when a new file is uploaded
     templateForm.value.outputFileName = event[0].name
@@ -294,25 +305,34 @@ function validateFileExtension(event) {
       );
     }
     isValidFile.value = true;
+    isValidSize.value = true;
   }
 }
 
 function handleFileUpload(event) {
   fileInputKey.value += 1;
   templateForm.value.files = event;
-  validateFileExtension(event);
+  validateFile(event);
+
+  //force immediate validation as the v-file-input is bound to the :key
+  nextTick(() => {
+    if (fileInput.value) {
+      fileInput.value.validate();
+    }
+  });
 }
 
 defineExpose({
   createBody,
   createDownload,
   fetchDefaultTemplate,
   isValidFile,
+  isValidSize,
   selectedOption,
   templateForm,
   timeout,
   uploadExportFileTypes,
-  validateFileExtension,
+  validateFile,
 });
 </script>
 
@@ -446,6 +466,7 @@ defineExpose({
                   value="upload"
                 ></v-radio>
                 <v-file-input
+                  ref="fileInput"
                   :key="fileInputKey"
                   v-model="templateForm.files"
                   :class="{ label: isRTL }"
@@ -482,7 +503,11 @@ defineExpose({
                         id="file-input-submit"
                         variant="flat"
                         class="btn-file-input-submit px-4"
-                        :disabled="!displayTemplatePrintButton || !isValidFile"
+                        :disabled="
+                          !displayTemplatePrintButton ||
+                          !isValidFile ||
+                          !isValidSize
+                        "
                         color="primary"
                         :loading="loading"
                         v-bind="props"