refactor: Forms 1115 composition api admin (#1512)

* Update AddOwner AddOwner updated to the composition API and has full test coverage * Update AdminPage.vue AdminPage is updated to the composition API. Moved the developer tab to the front for the admin store, so we don't immediately fetch all the forms. * Update Developer.vue Developer view updated to the composition API * Update AdminFormsTable.vue Updated AdminFormsTable to the composition API * Update AdminAPIsTable AdminAPIsTable is converted to the composition API and has almost full coverage. Just missing the internationalization rendering. * Update AdministerForm AdministerForm is updated to the composition API * Update AdministerUser.vue AdministerUser is updated to the composition API * Update AdminVersions, AdminUsersTable AdminVersions and AdminUsersTable updated to the composition API as well as having full test coverage * Update Dashboard.vue Updated Dashboard to the composition API * Update FormComponentsProactiveHelp.spec.js Added another test to FormComponentsProactiveHelp
bcgov · Oct 10, 2024 · 4f3cc6d · 4f3cc6d
1 parent 4536b3f
commit 4f3cc6d
Show file tree

Hide file tree

Showing 17 changed files with 989 additions and 553 deletions.
diff --git a/app/frontend/src/components/admin/AddOwner.vue b/app/frontend/src/components/admin/AddOwner.vue
@@ -1,48 +1,40 @@
-<script>
-import { mapActions } from 'pinia';
+<script setup>
 import { version as uuidVersion, validate as uuidValidate } from 'uuid';
 import { useI18n } from 'vue-i18n';
+import { ref } from 'vue';
 
 import { useAdminStore } from '~/store/admin';
 import { FormRoleCodes } from '~/utils/constants';
 
-export default {
-  props: {
-    formId: {
-      type: String,
-      required: true,
-    },
-  },
-  setup() {
-    const { locale } = useI18n({ useScope: 'global' });
+const { locale } = useI18n({ useScope: 'global' });
 
-    return { locale };
-  },
-  data() {
-    return {
-      userGuid: '',
-      valid: false,
-      userGuidRules: [
-        (v) => !!v || 'User ID required',
-        (v) =>
-          (uuidValidate(v) && uuidVersion(v) === 4) ||
-          'Enter a valid User ID GUID',
-      ],
-    };
-  },
-  methods: {
-    ...mapActions(useAdminStore, ['addFormUser', 'readRoles']),
-    async addOwner() {
-      if (this.$refs.addUserForm.validate()) {
-        await this.addFormUser({
-          userId: this.userGuid,
-          formId: this.formId,
-          roles: [FormRoleCodes.OWNER],
-        });
-      }
-    },
+const properties = defineProps({
+  formId: {
+    type: String,
+    required: true,
   },
-};
+});
+
+const addUserForm = ref(null);
+const userGuid = ref('');
+const valid = ref(false);
+const userGuidRules = ref([
+  (v) => !!v || 'User ID required',
+  (v) =>
+    (uuidValidate(v) && uuidVersion(v) === 4) || 'Enter a valid User ID GUID',
+]);
+
+const adminStore = useAdminStore();
+
+async function addOwner() {
+  if (addUserForm.value.validate()) {
+    await adminStore.addFormUser({
+      userId: userGuid.value,
+      formId: properties.formId,
+      roles: [FormRoleCodes.OWNER],
+    });
+  }
+}
 </script>
 
 <template>

diff --git a/app/frontend/src/components/admin/AdminAPIsTable.vue b/app/frontend/src/components/admin/AdminAPIsTable.vue
@@ -1,147 +1,139 @@
-<script>
-import { mapActions, mapState } from 'pinia';
-
-import { i18n } from '~/internationalization';
+<script setup>
+import { storeToRefs } from 'pinia';
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import { useAdminStore } from '~/store/admin';
 import { useFormStore } from '~/store/form';
 import BaseDialog from '~/components/base/BaseDialog.vue';
 
-export default {
-  components: {
-    BaseDialog,
+const { t } = useI18n({ uesScope: 'global' });
+
+const loading = ref(true);
+const search = ref('');
+const editDialog = ref({
+  title: '',
+  item: {
+    id: null,
+    formName: null,
+    ministry: null,
+    ministryText: null,
+    name: null,
+    endpointUrl: null,
+    code: null,
+    allowSendUserToken: false,
   },
-  data() {
-    return {
-      loading: true,
-      search: '',
-      editDialog: {
-        title: '',
-        item: {
-          id: null,
-          formName: null,
-          ministry: null,
-          ministryText: null,
-          name: null,
-          endpointUrl: null,
-          code: null,
-          allowSendUserToken: false,
-        },
-        show: false,
-      },
-    };
+  show: false,
+});
+
+const adminStore = useAdminStore();
+const formStore = useFormStore();
+
+const { externalAPIList, externalAPIStatusCodes } = storeToRefs(adminStore);
+const { isRTL, lang } = storeToRefs(formStore);
+
+const headers = computed(() => [
+  {
+    title: t('trans.adminAPIsTable.ministry'),
+    align: 'start',
+    key: 'ministry',
   },
-  computed: {
-    ...mapState(useAdminStore, ['externalAPIList', 'externalAPIStatusCodes']),
-    ...mapState(useFormStore, ['isRTL', 'lang']),
-    headers() {
-      return [
-        {
-          title: i18n.t('trans.adminAPIsTable.ministry'),
-          align: 'start',
-          key: 'ministry',
-        },
-        {
-          title: i18n.t('trans.adminAPIsTable.ministryName'),
-          align: 'start',
-          key: 'ministryName',
-          // we don't want to see this (too long)
-          // but we need it for searching, so it needs to be in the DOM
-          headerProps: {
-            class: 'hidden',
-          },
-          cellProps: {
-            class: 'hidden',
-          },
-        },
-        {
-          title: i18n.t('trans.adminAPIsTable.formName'),
-          align: 'start',
-          key: 'formName',
-        },
-        {
-          title: i18n.t('trans.adminAPIsTable.formId'),
-          align: 'start',
-          key: 'formId',
-        },
-        {
-          title: i18n.t('trans.adminAPIsTable.name'),
-          align: 'start',
-          key: 'name',
-        },
-        {
-          title: i18n.t('trans.adminAPIsTable.display'),
-          align: 'start',
-          key: 'display',
-        },
-        {
-          title: i18n.t('trans.adminAPIsTable.actions'),
-          align: 'end',
-          key: 'actions',
-          filterable: false,
-          sortable: false,
-        },
-      ];
+  {
+    title: t('trans.adminAPIsTable.ministryName'),
+    align: 'start',
+    key: 'ministryName',
+    // we don't want to see this (too long)
+    // but we need it for searching, so it needs to be in the DOM
+    headerProps: {
+      class: 'hidden',
     },
-    items() {
-      // add ministry name to objects so we can search on them
-      return this.externalAPIList.map((x) => ({
-        ...x,
-        ministryName: this.getMinistryName(x),
-      }));
+    cellProps: {
+      class: 'hidden',
     },
   },
-  async mounted() {
-    await this.getExternalAPIStatusCodes();
-    await this.getExternalAPIs();
-    this.loading = false;
+  {
+    title: t('trans.adminAPIsTable.formName'),
+    align: 'start',
+    key: 'formName',
   },
-  methods: {
-    ...mapActions(useAdminStore, [
-      'getExternalAPIs',
-      'updateExternalAPI',
-      'getExternalAPIStatusCodes',
-    ]),
-    getMinistryName(item) {
-      return item.ministry ? i18n.t(`trans.ministries.${item.ministry}`) : '';
-    },
-    resetEditDialog() {
-      this.editDialog = {
-        title: '',
-        item: {
-          id: null,
-          formName: null,
-          ministry: null,
-          name: null,
-          endpointUrl: null,
-          code: null,
-          allowSendUserToken: false,
-        },
-        show: false,
-      };
-    },
-    handleEdit(item) {
-      this.resetEditDialog();
-      this.editDialog.item = { ...item };
-      this.editDialog.item.ministryText = this.getMinistryName(item);
-      this.editDialog.title = i18n.t('trans.adminAPIsTable.editTitle');
-      this.editDialog.show = true;
-    },
-    async saveItem() {
-      await this.updateExternalAPI(
-        this.editDialog.item.id,
-        this.editDialog.item
-      );
+  {
+    title: t('trans.adminAPIsTable.formId'),
+    align: 'start',
+    key: 'formId',
+  },
+  {
+    title: t('trans.adminAPIsTable.name'),
+    align: 'start',
+    key: 'name',
+  },
+  {
+    title: t('trans.adminAPIsTable.display'),
+    align: 'start',
+    key: 'display',
+  },
+  {
+    title: t('trans.adminAPIsTable.actions'),
+    align: 'end',
+    key: 'actions',
+    filterable: false,
+    sortable: false,
+  },
+]);
 
-      // reset and close on success...
-      this.resetEditDialog();
-      // reload data...
-      this.loading = true;
-      await this.getExternalAPIs();
-      this.loading = false;
+const items = computed(() =>
+  externalAPIList.value.map((x) => ({
+    ...x,
+    ministryName: getMinistryName(x),
+  }))
+);
+
+onMounted(async () => {
+  await adminStore.getExternalAPIStatusCodes();
+  await adminStore.getExternalAPIs();
+  loading.value = false;
+});
+
+function getMinistryName(item) {
+  return item?.ministry ? t(`trans.ministries.${item.ministry}`) : '';
+}
+
+function resetEditDialog() {
+  editDialog.value = {
+    title: '',
+    item: {
+      id: null,
+      formName: null,
+      ministry: null,
+      name: null,
+      endpointUrl: null,
+      code: null,
+      allowSendUserToken: false,
     },
-  },
-};
+    show: false,
+  };
+}
+
+function handleEdit(item) {
+  resetEditDialog();
+  editDialog.value.item = { ...item };
+  editDialog.value.item.ministryText = getMinistryName(item);
+  editDialog.value.title = t('trans.adminAPIsTable.editTitle');
+  editDialog.value.show = true;
+}
+
+async function saveItem() {
+  await adminStore.updateExternalAPI(
+    editDialog.value.item.id,
+    editDialog.value.item
+  );
+
+  // reset and close on success...
+  resetEditDialog();
+  // reload data...
+  loading.value = true;
+  await adminStore.getExternalAPIs();
+  loading.value = false;
+}
 </script>
 
 <template>