Merge pull request #304 from bcgov/feature/tenant-ui-refactor-row-expand

Reduce duplicated code for Row Expand components

services/tenant-ui/frontend/src/components/common/RowExpandData.vue

@@ -2,32 +2,45 @@
   <div v-if="loading" class="flex justify-content-center">
     <ProgressSpinner />
   </div>
-  <div v-if="data">
+  <div v-if="item">
     <div>
-      <slot name="details" v-bind="data"></slot>
+      <slot name="details" v-bind="item"></slot>
     </div>
     <Accordion>
       <AccordionTab header="View Raw Content">
-        <vue-json-pretty :data="data" />
+        <vue-json-pretty :data="item" />
       </AccordionTab>
     </Accordion>
   </div>
 </template>
 
-<script setup lang="ts">
-import { PropType } from 'vue';
+<script async setup lang="ts">
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
 import ProgressSpinner from 'primevue/progressspinner';
 import VueJsonPretty from 'vue-json-pretty';
+import useGetItem from '@/composables/useGetItem';
 
 const props = defineProps({
-  data: {
-    type: null as unknown as PropType<any>,
+  url: {
+    type: String,
     required: true,
   },
-  loading: {
-    type: Boolean,
+  id: {
+    type: String,
+    required: true,
+  },
+  params: {
+    type: Object,
+    required: false,
+    default() {
+      return {};
+    },
   },
 });
+
+const { loading, item, fetchItem } = useGetItem(props.url);
+
+// ok, let's load up the row with acapy data...
+fetchItem(props.id, props.params);
 </script>

services/tenant-ui/frontend/src/components/contacts/Contacts.vue

@@ -49,7 +49,11 @@
       </template>
     </Column>
     <template #expansion="{ data }">
-      <ContactRowExpandData :row="data" />
+      <RowExpandData
+        :id="data.contact_id"
+        :url="'/tenant/v1/contacts/'"
+        :params="{ acapy: true }"
+      />
     </template>
   </DataTable>
 </template>
@@ -70,7 +74,7 @@ import { storeToRefs } from 'pinia';
 import AcceptInvitation from './acceptInvitation/AcceptInvitation.vue';
 import CreateContact from './createContact/CreateContact.vue';
 import { formatDateLong } from '@/helpers';
-import ContactRowExpandData from './ContactRowExpandData.vue';
+import RowExpandData from '../common/RowExpandData.vue';
 
 const confirm = useConfirm();
 const toast = useToast();

services/tenant-ui/frontend/src/components/holder/Credentials.vue

@@ -26,7 +26,11 @@
     <template #empty> No records found. </template>
     <template #loading> Loading data. Please wait... </template>
     <template #expansion="{ data }">
-      <CredentialRowExpandData :row="data" />
+      <RowExpandData
+        :id="data.holder_credential_id"
+        :url="'/tenant/v1/holder/credentials/'"
+        :params="{ acapy: true }"
+      />
     </template>
     <Column :expander="true" header-style="width: 3rem" />
     <Column header="Actions" class="action-col">
@@ -78,7 +82,7 @@ import { useToast } from 'vue-toastification';
 import { useHolderStore } from '../../store';
 import { storeToRefs } from 'pinia';
 import { useConfirm } from 'primevue/useconfirm';
-import CredentialRowExpandData from './CredentialRowExpandData.vue';
+import RowExpandData from '../common/RowExpandData.vue';
 
 import { formatDateLong } from '@/helpers';
 

services/tenant-ui/frontend/src/components/issuance/IssuedCredentials.vue

@@ -39,7 +39,11 @@
     </Column>
     <Column field="revoked" header="Revoked?" />
     <template #expansion="{ data }">
-      <IssuedCredentialRowExpandData :row="data" />
+      <RowExpandData
+        :id="data.issuer_credential_id"
+        :url="'/tenant/v1/issuer/credentials/'"
+        :params="{ acapy: true }"
+      />
     </template>
   </DataTable>
 </template>
@@ -59,7 +63,7 @@ import DataTable from 'primevue/datatable';
 
 // Other Components
 import OfferCredential from './offerCredential/OfferCredential.vue';
-import IssuedCredentialRowExpandData from './IssuedCredentialRowExpandData.vue';
+import RowExpandData from '../common/RowExpandData.vue';
 import { formatDateLong } from '@/helpers';
 
 // Other Imports

services/tenant-ui/frontend/src/components/issuance/Schemas.vue

@@ -58,7 +58,11 @@
       </template>
     </Column>
     <template #expansion="{ data }">
-      <SchemaRowExpandData :row="data" />
+      <RowExpandData
+        :id="data.schema_template_id"
+        :url="'/tenant/v1/governance/schema_templates/'"
+        :params="{ acapy: true, credential_templates: true }"
+      />
     </template>
   </DataTable>
 </template>
@@ -73,7 +77,7 @@ import DataTable from 'primevue/datatable';
 import CreateSchema from './createSchema/CreateSchema.vue';
 import CopySchema from './copySchema/CopySchema.vue';
 import CreateCredentialTemplate from './credentialtemplate/CreateCredentialTemplate.vue';
-import SchemaRowExpandData from './SchemaRowExpandData.vue';
+import RowExpandData from '../common/RowExpandData.vue';
 
 import { useConfirm } from 'primevue/useconfirm';
 import { useToast } from 'vue-toastification';

services/tenant-ui/frontend/src/components/verifier/PresentationRowExpandData.vue

@@ -1,5 +1,9 @@
 <template>
-  <RowExpandData :loading="loading" :data="item">
+  <RowExpandData
+    :id="props.row.verifier_presentation_id"
+    :url="'/tenant/v1/verifier/presentations/'"
+    :params="{ acapy: true }"
+  >
     <template #details="presentation">
       <div>
         <ul>
@@ -46,7 +50,6 @@ import { PropType } from 'vue';
 import { formatDateLong } from '@/helpers';
 import RowExpandData from '../common/RowExpandData.vue';
 import VerifiedPresentationData from './VerifiedPresentationData.vue';
-import useGetVerifierPresentation from '@/composables/useGetVerifierPresentation';
 
 const props = defineProps({
   row: {
@@ -64,10 +67,6 @@ const props = defineProps({
     default: false,
   },
 });
-
-const { loading, item, fetchItemWithAcapy } = useGetVerifierPresentation();
-
-fetchItemWithAcapy(props.row.verifier_presentation_id);
 </script>
 
 <style scoped></style>

services/tenant-ui/frontend/src/composables/useGetContact.ts → services/tenant-ui/frontend/src/composables/useGetItem.ts

@@ -1,33 +1,29 @@
 import { ref } from 'vue';
 import { GetItem } from '../types';
-import { useContactsStore } from '../store';
+import { fetchItem as utilFetchItem } from '../store/utils/fetchItem';
 
-export default function useGetContact(): GetItem {
-  const store = useContactsStore();
+export default function useGetItem(url: string): GetItem {
+  const _url = ref(url);
 
   const item = ref();
   const loading: any = ref(false);
 
   async function fetchItem(id: string, params: any = {}) {
+    const error: any = ref(null);
     try {
       // call store
       loading.value = true;
-      item.value = await store.getContact(id, params);
+      item.value = await utilFetchItem(_url.value, id, error, loading, params);
     } catch (error) {
       item.value = null;
     } finally {
       loading.value = false;
     }
   }
 
-  async function fetchItemWithAcapy(id: string) {
-    return fetchItem(id, { acapy: true });
-  }
-
   return {
     item,
     loading,
     fetchItem,
-    fetchItemWithAcapy,
   };
 }