refactor: Forms 1124 composition api infolinks (bcgov#1473)

* Update GeneralLayout and FormComponentsProactiveHelp GeneralLayout has been updated to the composition API with almost full coverage, did not add coverage for the HTML FormComponentsProactiveHelp was updated to the composition API but no coverage was added, it was just confusing deciphering what was happening in the file so it was refactored. * Update ProactiveHelpDialog ProactiveHelpDialog updated to the composition API and test coverage has been added excluding FileReader testing and vue watch changes. * Update ProactiveHelpDialog.vue awaiting addFCProactiveHelp * Update ProactiveHelpPreviewDialog ProactiveHelpPreviewDialog is updated to the composition API and should have coverage excluding the watch variable
usingtechnology · Aug 27, 2024 · a3bbe41 · a3bbe41
1 parent eabf469
commit a3bbe41
Show file tree

Hide file tree

Showing 9 changed files with 963 additions and 529 deletions.
diff --git a/app/frontend/src/components/admin/FormComponentsProactiveHelp.vue b/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>