Merge pull request #912 from bcgov/feat/907

Create option to show soft deleted tenants

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

@@ -18,13 +18,23 @@
         <div class="flex justify-content-between">
           <div class="flex justify-content-start"></div>
           <div class="flex justify-content-end">
-            <span class="p-input-icon-left">
-              <i class="pi pi-search ml-0" />
-              <InputText
-                v-model="filter.global.value"
-                placeholder="Search Tenants"
+            <div class="container">
+              <ToggleButton
+                v-model="showDeleted"
+                :on-label="$t('common.hideDeleted')"
+                :off-label="$t('common.showDeleted')"
+                class="mr-2 container-item"
+                style="width: 10rem"
+                @change="loadTable"
               />
-            </span>
+              <span class="p-input-icon-left container-item">
+                <i class="pi pi-search ml-0" />
+                <InputText
+                  v-model="filter.global.value"
+                  :placeholder="$t('tenants.search')"
+                />
+              </span>
+            </div>
           </div>
         </div>
       </template>
@@ -33,16 +43,19 @@
       <Column :expander="true" header-style="width: 3rem" />
       <Column :sortable="false" :header="$t('common.actions')">
         <template #body="{ data }">
-          <div class="container">
+          <div v-if="data.state == 'active'" class="container">
             <EditConfig :tenant="data" />
             <DeleteTenant :tenant="data" />
           </div>
+          <div v-else class="container-item deleted-btn">
+            {{ $t('common.deleted') }}
+          </div>
         </template>
       </Column>
       <Column
         :sortable="true"
         field="tenant_name"
-        header="Name"
+        :header="$t('common.name')"
         filter-field="tenant_name"
         :show-filter-match-modes="false"
       >
@@ -51,15 +64,15 @@
             v-model="filterModel.value"
             type="text"
             class="p-column-filter"
-            placeholder="Search By Contact"
+            :placeholder="$t('common.searchByName')"
             @input="filterCallback()"
           />
         </template>
       </Column>
       <Column
         :sortable="true"
         field="created"
-        header="Created at"
+        :header="$t('common.createdAt')"
         filter-field="created"
         :show-filter-match-modes="false"
       >
@@ -71,7 +84,28 @@
             v-model="filterModel.value"
             type="text"
             class="p-column-filter"
-            placeholder="Search By Contact"
+            :placeholder="$t('common.searchByCreated')"
+            @input="filterCallback()"
+          />
+        </template>
+      </Column>
+      <Column
+        :sortable="true"
+        field="deleted"
+        :header="$t('common.deletedAt')"
+        filter-field="deleted"
+        :show-filter-match-modes="false"
+        :hidden="!showDeleted"
+      >
+        <template #body="{ data }">
+          {{ data.deleted }}
+        </template>
+        <template #filter="{ filterModel, filterCallback }">
+          <InputText
+            v-model="filterModel.value"
+            type="text"
+            class="p-column-filter"
+            :placeholder="$t('common.searchByDeleted')"
             @input="filterCallback()"
           />
         </template>
@@ -84,36 +118,37 @@
 </template>
 
 <script setup lang="ts">
-// Vue
-import { onMounted, ref, computed } from 'vue';
-// PrimeVue
+import { storeToRefs } from 'pinia';
+import { FilterMatchMode } from 'primevue/api';
 import Column from 'primevue/column';
 import DataTable from 'primevue/datatable';
 import InputText from 'primevue/inputtext';
-import { FilterMatchMode } from 'primevue/api';
+import ToggleButton from 'primevue/togglebutton';
+import { computed, onMounted, ref } from 'vue';
 import { useToast } from 'vue-toastification';
-// State
-import { useInnkeeperTenantsStore } from '@/store';
-import { storeToRefs } from 'pinia';
-// Other components
-import { TABLE_OPT, API_PATH } from '@/helpers/constants';
+
+import RowExpandData from '@/components/common/RowExpandData.vue';
+import MainCardContent from '@/components/layout/mainCard/MainCardContent.vue';
 import { formatDateLong } from '@/helpers';
-import EditConfig from './editConfig/editConfig.vue';
+import { API_PATH, TABLE_OPT } from '@/helpers/constants';
+import { useInnkeeperTenantsStore } from '@/store';
 import DeleteTenant from './deleteTenant/DeleteTenant.vue';
-import MainCardContent from '@/components/layout/mainCard/MainCardContent.vue';
-import RowExpandData from '@/components/common/RowExpandData.vue';
+import EditConfig from './editConfig/editConfig.vue';
 
 const toast = useToast();
 
 const innkeeperTenantsStore = useInnkeeperTenantsStore();
+const showDeleted = ref(false);
 
 // Populating the Table
 const { loading, tenants } = storeToRefs(useInnkeeperTenantsStore());
-const loadTable = async () => {
-  innkeeperTenantsStore.listTenants().catch((err: string) => {
-    console.error(err);
-    toast.error(`Failure: ${err}`);
-  });
+const loadTable = () => {
+  innkeeperTenantsStore
+    .listTenants(showDeleted.value ? 'all' : 'active')
+    .catch((err: string) => {
+      console.error(err);
+      toast.error(`Failure: ${err}`);
+    });
 };
 
 // Formatting the Tenant table row
@@ -126,10 +161,13 @@ const formattedTenants = computed(() =>
     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,
   }))
 );
 
-onMounted(async () => {
+onMounted(() => {
   loadTable();
 });
 
@@ -147,6 +185,10 @@ const filter = ref({
     value: null,
     matchMode: FilterMatchMode.CONTAINS,
   },
+  deleted: {
+    value: null,
+    matchMode: FilterMatchMode.CONTAINS,
+  },
 });
 
 // necessary for expanding rows, we don't do anything with this
@@ -156,4 +198,19 @@ const expandedRows = ref([]);
 .container {
   display: flex;
 }
+.container-item {
+  height: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.deleted-btn {
+  height: 2.625rem;
+  background-color: #ef4444;
+  border: 1px solid #ef4444;
+  color: white;
+  border-radius: 10px;
+  width: 50%;
+  font-weight: 600;
+}
 </style>

services/tenant-ui/frontend/src/plugins/i18n/locales/en.json

@@ -49,28 +49,38 @@
     "actions": "Actions",
     "alias": "Alias",
     "apiKey": "API Key",
+    "byName": "Search By Name",
     "confirmation": "Confirmation",
     "connectionName": "Connection Name",
     "contactName": "Contact Name",
+    "createdAt": "Created At",
     "credentialId": "Credential ID",
     "credentials": "Credentials",
     "decodedJwt": "Decoded JWT",
+    "deleted": "Deleted",
+    "deletedAt": "Deleted At",
     "developer": "Developer",
     "emailAddress": "Email Address",
     "encodedJwt": "Encoded JWT",
     "endorser": "Endorser",
     "errorGettingUrl": "Error fetching {url}",
     "genericError": "An error occurred",
+    "hideDeleted": "Hide Deleted",
     "invitationUrl": "Invitation URL",
     "json": "JSON",
     "loading": "Loading data. Please wait...",
     "logout": "Logout",
+    "name": "Name",
     "noRecordsFound": "No Records Found",
     "profile": "Profile",
     "protocol": "Protocol",
     "refreshTable": "Refresh Table",
     "request": "Request",
+    "searchByCreated": "Search By Created at Date",
+    "searchByDeleted": "Search By Deleted at Date",
+    "searchByName": "Search By Name",
     "settings": "Settings",
+    "showDeleted": "Show Deleted",
     "status": "Status",
     "submit": "Submit",
     "tenantId": "Tenant ID",
@@ -460,6 +470,7 @@
   },
   "tenants": {
     "checkIn": "Check-In Tenant",
+    "search": "Search Tenants",
     "settings": {
       "canBecomeIssuer": "Tenant can become issuer, i.e connect to endorser and register DID",
       "canConnectEndorser": "Tenant allowed to connect to Endorser",

services/tenant-ui/frontend/src/plugins/i18n/locales/fr.json

@@ -49,33 +49,44 @@
     "actions": "Actions <FR>",
     "alias": "Alias <FR>",
     "apiKey": "API Key <FR>",
+    "byName": "Search By Name <FR>",
     "confirmation": "Confirmation <FR>",
     "connectionName": "Connection Name <FR>",
     "contactName": "Contact Name <FR>",
+    "createdAt": "Created At <FR>",
     "credentialId": "Credential ID <FR>",
     "credentials": "Credentials <FR>",
     "decodedJwt": "Decoded JWT <FR>",
+    "deleted": "Deleted <FR>",
+    "deletedAt": "Deleted At <FR>",
     "developer": "Developer <FR>",
     "emailAddress": "Email Address <FR>",
     "encodedJwt": "Encoded JWT <FR>",
     "endorser": "Endorser <FR>",
     "errorGettingUrl": "Error fetching {url} <FR>",
     "genericError": "An error occurred <FR>",
+    "hideDeleted": "Hide Deleted <FR>",
     "invitationUrl": "Invitation URL <FR>",
     "json": "JSON <FR>",
     "loading": "Loading data. Please wait... <FR>",
     "logout": "Logout <FR>",
+    "name": "Name <FR>",
     "noRecordsFound": "No Records Found <FR>",
     "profile": "Profile <FR>",
+    "protocol": "Protocol <FR>",
     "refreshTable": "Refresh Table <FR>",
     "request": "Request <FR>",
+    "searchByCreated": "Search By Created at Date <FR>",
+    "searchByDeleted": "Search By Deleted at Date <FR>",
+    "searchByName": "Search By Name <FR>",
     "settings": "Settings <FR>",
+    "showDeleted": "Show Deleted <FR>",
     "status": "Status <FR>",
     "submit": "Submit <FR>",
     "tenantId": "Tenant ID <FR>",
     "tenantName": "Tenant Name <FR>",
     "tenantReason": "Tenant Reason <FR>",
-    "toggleCardExpand": "Toggle Expanded",
+    "toggleCardExpand": "Toggle Expanded <FR>",
     "walletId": "Wallet ID <FR>"
   },
   "configuration": {

services/tenant-ui/frontend/src/plugins/i18n/locales/ja.json

@@ -49,27 +49,38 @@
     "actions": "Actions <JA>",
     "alias": "Alias <JA>",
     "apiKey": "API Key <JA>",
+    "byName": "Search By Name <JA>",
     "confirmation": "Confirmation <JA>",
     "connectionName": "Connection Name <JA>",
     "contactName": "Contact Name <JA>",
+    "createdAt": "Created At <JA>",
     "credentialId": "Credential ID <JA>",
     "credentials": "Credentials <JA>",
     "decodedJwt": "Decoded JWT <JA>",
+    "deleted": "Deleted <JA>",
+    "deletedAt": "Deleted At <JA>",
     "developer": "Developer <JA>",
     "emailAddress": "Email Address <JA>",
     "encodedJwt": "Encoded JWT <JA>",
     "endorser": "Endorser <JA>",
     "errorGettingUrl": "Error fetching {url} <JA>",
     "genericError": "An error occurred <JA>",
+    "hideDeleted": "Hide Deleted <JA>",
     "invitationUrl": "Invitation URL <JA>",
     "json": "JSON <JA>",
     "loading": "Loading data. Please wait... <JA>",
     "logout": "Logout <JA>",
+    "name": "Name <JA>",
     "noRecordsFound": "No Records Found <JA>",
     "profile": "Profile <JA>",
+    "protocol": "Protocol <JA>",
     "refreshTable": "Refresh Table <JA>",
     "request": "Request <JA>",
+    "searchByCreated": "Search By Created at Date <JA>",
+    "searchByDeleted": "Search By Deleted at Date <JA>",
+    "searchByName": "Search By Name <JA>",
     "settings": "Settings <JA>",
+    "showDeleted": "Show Deleted <JA>",
     "status": "Status <JA>",
     "submit": "Submit <JA>",
     "tenantId": "Tenant ID <JA>",

services/tenant-ui/frontend/src/store/innkeeper/innkeeperTenantsStore.ts

@@ -98,14 +98,14 @@ export const useInnkeeperTenantsStore = defineStore('innkeeperTenants', () => {
     );
   }
 
-  async function listTenants() {
+  async function listTenants(state: string = 'active') {
     return fetchListFromAPI(
       acapyApi,
       API_PATH.INNKEEPER_TENANTS,
       tenants,
       error,
       loading,
-      {}
+      { state }
     );
   }