Show write ledger on tenant list

Signed-off-by: Lucas ONeil <lucasoneil@gmail.com>

services/tenant-ui/frontend/src/components/innkeeper/tenants/Tenants.vue

@@ -69,6 +69,23 @@
           />
         </template>
       </Column>
+      <Column
+        :sortable="true"
+        field="curr_ledger_id"
+        header="Write Ledger"
+        filter-field="curr_ledger_id"
+        :show-filter-match-modes="false"
+      >
+        <template #filter="{ filterModel, filterCallback }">
+          <InputText
+            v-model="filterModel.value"
+            type="text"
+            class="p-column-filter"
+            placeholder="Search By Write Ledger"
+            @input="filterCallback()"
+          />
+        </template>
+      </Column>
       <Column
         :sortable="true"
         field="created"
@@ -118,7 +135,6 @@
 </template>
 
 <script setup lang="ts">
-import { storeToRefs } from 'pinia';
 import { FilterMatchMode } from 'primevue/api';
 import Column from 'primevue/column';
 import DataTable from 'primevue/datatable';
@@ -127,14 +143,15 @@ import ToggleButton from 'primevue/togglebutton';
 import { computed, onMounted, ref } from 'vue';
 import { useToast } from 'vue-toastification';
 
-import RowExpandData from '@/components/common/RowExpandData.vue';
-import MainCardContent from '@/components/layout/mainCard/MainCardContent.vue';
-import { formatDateLong } from '@/helpers';
-import { API_PATH, TABLE_OPT } from '@/helpers/constants';
+// State
 import { useInnkeeperTenantsStore } from '@/store';
-import DeleteTenant from './deleteTenant/DeleteTenant.vue';
+import { storeToRefs } from 'pinia';
+// Other components
+import { TABLE_OPT, API_PATH } from '@/helpers/constants';
+import { formatTenants } from '@/helpers/tableFormatters';
 import EditConfig from './editConfig/editConfig.vue';
-
+import DeleteTenant from './deleteTenant/DeleteTenant.vue';
+import RowExpandData from '@/components/common/RowExpandData.vue';
 const toast = useToast();
 
 const innkeeperTenantsStore = useInnkeeperTenantsStore();
@@ -152,20 +169,7 @@ const loadTable = () => {
 };
 
 // Formatting the Tenant table row
-const formattedTenants = computed(() =>
-  tenants.value.map((ten: any) => ({
-    tenant_id: ten.tenant_id,
-    tenant_name: ten.tenant_name,
-    connect_to_endorser: ten.connect_to_endorser,
-    created_public_did: ten.created_public_did,
-    created: formatDateLong(ten.created_at),
-    created_at: ten.created_at,
-    enable_ledger_switch: ten.enable_ledger_switch,
-    state: ten.state,
-    deleted: formatDateLong(ten.deleted_at),
-    deleted_at: ten.deleted_at,
-  }))
-);
+const formattedTenants = computed(() => formatTenants(tenants));
 
 onMounted(() => {
   loadTable();
@@ -189,6 +193,10 @@ const filter = ref({
     value: null,
     matchMode: FilterMatchMode.CONTAINS,
   },
+  curr_ledger_id: {
+    value: null,
+    matchMode: FilterMatchMode.CONTAINS,
+  },
 });
 
 // necessary for expanding rows, we don't do anything with this

services/tenant-ui/frontend/src/helpers/tableFormatters.ts

@@ -2,16 +2,20 @@ import { SchemaStorageRecord } from '@/types';
 import {
   CredDefStorageRecord,
   CredentialDefinition,
+  TenantRecord,
 } from '@/types/acapyApi/acapyInterface';
 import { Ref } from 'vue';
 import { formatDateLong } from '.';
 
+export interface FormattedCredDef extends CredDefStorageRecord {
+  created: string;
+}
 export interface FormattedSchema extends SchemaStorageRecord {
   created: string;
   credentialDefinitions: CredentialDefinition[];
 }
 
-export interface FormattedCredDef extends CredDefStorageRecord {
+export interface FormattedTenantRecord extends TenantRecord {
   created: string;
 }
 
@@ -40,3 +44,19 @@ export const formatStoredCredDefs = (
     created_at: credDef.created_at,
     created: formatDateLong(credDef.created_at),
   }));
+
+export const formatTenants = (
+  tenants: Ref<TenantRecord[]>
+): FormattedTenantRecord[] =>
+  tenants.value.map((tenant: any) => ({
+    deleted_at: tenant.deleted_at,
+    tenant_id: tenant.tenant_id,
+    tenant_name: tenant.tenant_name,
+    connect_to_endorser: tenant.connect_to_endorser,
+    created_public_did: tenant.created_public_did,
+    created: formatDateLong(tenant.created_at),
+    created_at: tenant.created_at,
+    enable_ledger_switch: tenant.enable_ledger_switch,
+    state: tenant.state,
+    curr_ledger_id: tenant.curr_ledger_id,
+  }));

services/tenant-ui/frontend/test/components/about/__snapshots__/Acapy.test.ts.snap

@@ -8,16 +8,8 @@ exports[`Acapy > mount matches snapshot with expected values 1`] = `
   <div data-v-59165757=\\"\\" class=\\"col-12 md:col-6 flex justify-content-end pt-0\\"><img data-v-59165757=\\"\\" src=\\"/img/logo/aries-logo-color.png\\" class=\\"logo-acapy\\"></div>
 </div>
 <div data-v-59165757=\\"\\" class=\\"grid\\">
-  <div data-v-59165757=\\"\\" class=\\"col-2\\">about.acaPy.ledger</div>
-  <div data-v-59165757=\\"\\" class=\\"col-10\\">ledgerName</div>
-  <div data-v-59165757=\\"\\" class=\\"col-2\\">about.acaPy.ledgerBrowser</div>
-  <div data-v-59165757=\\"\\" class=\\"col-10\\">ledgerBrowser</div>
-  <div data-v-59165757=\\"\\" class=\\"col-2\\">about.acaPy.tailsServer</div>
-  <div data-v-59165757=\\"\\" class=\\"col-10\\">tailsServer</div>
-</div>
-<div data-v-59165757=\\"\\" class=\\"grid mt-4\\">
   <div data-v-59165757=\\"\\" class=\\"col-12 md:col-6 lg:col-4\\">
-    <div data-v-59165757=\\"\\" class=\\"p-accordion p-component\\" data-pc-name=\\"accordion\\" data-pc-section=\\"root\\">
+    <div data-v-680038a3=\\"\\" data-v-59165757=\\"\\" class=\\"p-accordion p-component\\" data-pc-name=\\"accordion\\" data-pc-section=\\"root\\">
       <div class=\\"p-accordion-tab\\" data-pc-section=\\"root\\" data-pc-name=\\"accordiontab\\" data-pc-index=\\"0\\" data-p-active=\\"false\\">
         <div class=\\"p-accordion-header\\" data-pc-section=\\"header\\" data-p-highlight=\\"false\\"><a id=\\"undefined_0_header_action\\" class=\\"p-accordion-header-link p-accordion-header-action\\" tabindex=\\"0\\" role=\\"button\\" aria-expanded=\\"false\\" aria-controls=\\"undefined_0_content\\" data-pc-section=\\"headeraction\\"><svg width=\\"14\\" height=\\"14\\" viewBox=\\"0 0 14 14\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"p-icon p-accordion-toggle-icon\\" aria-hidden=\\"true\\" data-pc-section=\\"headericon\\">
               <path d=\\"M4.38708 13C4.28408 13.0005 4.18203 12.9804 4.08691 12.9409C3.99178 12.9014 3.9055 12.8433 3.83313 12.7701C3.68634 12.6231 3.60388 12.4238 3.60388 12.2161C3.60388 12.0084 3.68634 11.8091 3.83313 11.6622L8.50507 6.99022L3.83313 2.31827C3.69467 2.16968 3.61928 1.97313 3.62287 1.77005C3.62645 1.56698 3.70872 1.37322 3.85234 1.22959C3.99596 1.08597 4.18972 1.00371 4.3928 1.00012C4.59588 0.996539 4.79242 1.07192 4.94102 1.21039L10.1669 6.43628C10.3137 6.58325 10.3962 6.78249 10.3962 6.99022C10.3962 7.19795 10.3137 7.39718 10.1669 7.54416L4.94102 12.7701C4.86865 12.8433 4.78237 12.9014 4.68724 12.9409C4.59212 12.9804 4.49007 13.0005 4.38708 13Z\\" fill=\\"currentColor\\"></path>
@@ -27,7 +19,7 @@ exports[`Acapy > mount matches snapshot with expected values 1`] = `
         <transition-stub name=\\"p-toggleable-content\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\" data-pc-section=\\"accordiontab.transition\\">
           <div id=\\"undefined_0_content\\" class=\\"p-toggleable-content\\" role=\\"region\\" aria-labelledby=\\"undefined_0_header_action\\" data-pc-section=\\"toggleablecontent\\" style=\\"display: none;\\">
             <div class=\\"p-accordion-content\\" data-pc-section=\\"content\\">
-              <div data-v-59165757=\\"\\" class=\\"vjs-tree\\">
+              <div data-v-680038a3=\\"\\" class=\\"vjs-tree\\">
                 <div class=\\"vjs-tree-node\\">
                   <!---->
                   <!---->