Display in list

Signed-off-by: Lucas ONeil <[email protected]>

services/tenant-ui/frontend/src/components/innkeeper/authentications/ApiKeys.vue

@@ -38,6 +38,26 @@
           <DeleteApiKey :record-id="data.tenant_authentication_api_id" />
         </template>
       </Column>
+      <Column
+        sortable
+        field="name"
+        header="Tenant Name"
+        filter-field="name"
+        :show-filter-match-modes="false"
+      >
+        <template #body="{ data }">
+          <LoadingLabel :value="data.name" />
+        </template>
+        <template #filter="{ filterModel, filterCallback }">
+          <InputText
+            v-model="filterModel.value"
+            type="text"
+            class="p-column-filter"
+            placeholder="Search By Tenant Name"
+            @input="filterCallback()"
+          />
+        </template>
+      </Column>
       <Column
         :sortable="true"
         field="tenant_id"
@@ -118,28 +138,39 @@ import { storeToRefs } from 'pinia';
 import { TABLE_OPT, API_PATH } from '@/helpers/constants';
 import { formatDateLong, formatGuid } from '@/helpers';
 import CreateApiKey from './createApiKey/CreateApiKey.vue';
+import DeleteApiKey from './DeleteApiKey.vue';
+import LoadingLabel from '@/components/common/LoadingLabel.vue';
 import MainCardContent from '@/components/layout/mainCard/MainCardContent.vue';
 import RowExpandData from '@/components/common/RowExpandData.vue';
-import DeleteApiKey from './DeleteApiKey.vue';
 
 const toast = useToast();
 
 const innkeeperTenantsStore = useInnkeeperTenantsStore();
 
 // Populating the Table
-const { loading, apiKeys } = storeToRefs(useInnkeeperTenantsStore());
+const { findTenantName } = useInnkeeperTenantsStore();
+const { loading, apiKeys, tenants } = storeToRefs(useInnkeeperTenantsStore());
 const loadTable = async () => {
   innkeeperTenantsStore.listApiKeys().catch((err: string) => {
     console.error(err);
     toast.error(`Failure: ${err}`);
   });
+
+  // Load tenants if not already there for display
+  if (!tenants.value || !tenants.value.length) {
+    innkeeperTenantsStore.listTenants().catch((err) => {
+      console.error(err);
+      toast.error(`Failure: ${err}`);
+    });
+  }
 };
 
 // Formatting the table row
 const formattedApiKeys = computed(() =>
   apiKeys.value.map((api: any) => ({
     tenant_authentication_api_id: formatGuid(api.tenant_authentication_api_id),
     tenant_id: api.tenant_id,
+    name: findTenantName(api.tenant_id),
     alias: api.alias,
     created: formatDateLong(api.created_at),
     created_at: api.created_at,
@@ -156,6 +187,10 @@ const filter = ref({
     value: null,
     matchMode: FilterMatchMode.CONTAINS,
   },
+  name: {
+    value: null,
+    matchMode: FilterMatchMode.CONTAINS,
+  },
   tenant_id: {
     value: null,
     matchMode: FilterMatchMode.CONTAINS,

services/tenant-ui/frontend/src/components/innkeeper/authentications/createApiKey/CreateApiKeyForm.vue

@@ -3,20 +3,27 @@
     <!-- Tenant -->
     <div class="field">
       <label
-        for="tenantId"
-        :class="{ 'p-error': v$.tenantId.$invalid && submitted }"
+        for="selectedTenant"
+        :class="{ 'p-error': v$.selectedTenant.$invalid && submitted }"
       >
-        {{ $t('profile.tenantId') }}
+        {{ $t('common.tenantName') }}
+        <ProgressSpinner v-if="loading" />
       </label>
-      <InputText
-        id="tenantId"
-        v-model="v$.tenantId.$model"
+
+      <AutoComplete
+        id="selectedTenant"
+        v-model="v$.selectedTenant.$model"
         class="w-full"
-        :class="{ 'p-invalid': v$.tenantId.$invalid && submitted }"
+        :disabled="loading"
+        :suggestions="filteredTenants"
+        :dropdown="true"
+        option-label="label"
+        force-selection
+        @complete="searchTenants($event)"
       />
-      <small v-if="v$.tenantId.$invalid && submitted" class="p-error"
-        >{{ v$.tenantId.required.$message }}
-      </small>
+      <small v-if="v$.selectedTenant.$invalid && submitted" class="p-error">{{
+        v$.selectedTenant.required.$message
+      }}</small>
     </div>
 
     <!-- Alias -->
@@ -42,7 +49,11 @@
   <!-- Display created key the one time -->
   <div v-else>
     <p>
-      {{ $t('apiKey.generatedKeyMessage', { key: v$.tenantId.$model }) }}
+      {{
+        $t('apiKey.generatedKeyMessage', {
+          key: formFields.selectedTenant.value,
+        })
+      }}
     </p>
     <p>
       {{ $t('apiKey.generatedKey') }} <br />
@@ -58,8 +69,10 @@ import { reactive, ref } from 'vue';
 import { useInnkeeperTenantsStore } from '@/store';
 import { storeToRefs } from 'pinia';
 // PrimeVue / Validation
+import AutoComplete from 'primevue/autocomplete';
 import Button from 'primevue/button';
 import InputText from 'primevue/inputtext';
+import ProgressSpinner from 'primevue/progressspinner';
 import { required } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { useToast } from 'vue-toastification';
@@ -70,17 +83,29 @@ const toast = useToast();
 const innkeeperTenantsStore = useInnkeeperTenantsStore();
 
 // use the loading state from the store to disable the button...
-const { loading } = storeToRefs(useInnkeeperTenantsStore());
+const { loading, tenantsDropdown } = storeToRefs(useInnkeeperTenantsStore());
 
-const emit = defineEmits(['closed', 'success']);
+// Autocomplete setup
+const filteredTenants = ref();
+const searchTenants = (event: any) => {
+  if (!event.query.trim().length) {
+    filteredTenants.value = [...(tenantsDropdown as any).value];
+  } else {
+    filteredTenants.value = (tenantsDropdown.value as any).filter(
+      (tenant: any) => {
+        return tenant.label.toLowerCase().includes(event.query.toLowerCase());
+      }
+    );
+  }
+};
 
 // Validation
 const formFields = reactive({
-  tenantId: '',
+  selectedTenant: undefined as any,
   alias: '',
 });
 const rules = {
-  tenantId: { required },
+  selectedTenant: { required },
   alias: {},
 };
 const v$ = useVuelidate(rules, formFields);
@@ -97,7 +122,7 @@ const handleSubmit = async (isFormValid: boolean) => {
 
   try {
     const response = await innkeeperTenantsStore.createApiKey({
-      tenant_id: formFields.tenantId,
+      tenant_id: formFields.selectedTenant.value,
       alias: formFields.alias,
     });
     createdKey.value = response.data.api_key;

services/tenant-ui/frontend/src/components/messages/Messages.vue

@@ -158,7 +158,7 @@ const loadTable = async () => {
   messageStore.listMessages().catch((err: any) => {
     toast.error(`Failure: ${err}`);
   });
-  // messages = messages.map()
+
   // Load contacts if not already there for display
   if (!contacts.value || !contacts.value.length) {
     listContacts().catch((err) => {

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

@@ -3,7 +3,6 @@ import {
   ReservationRecord,
   TenantAuthenticationApiRecord,
   TenantAuthenticationsApiRequest,
-  TenantAuthenticationsApiResponse,
   TenantConfig,
   TenantRecord,
 } from '@/types/acapyApi/acapyInterface';
@@ -12,7 +11,12 @@ import { defineStore, storeToRefs } from 'pinia';
 import { computed, ref, Ref } from 'vue';
 import axios from 'axios';
 import { useAcapyApi } from '../acapyApi';
-import { fetchListFromAPI } from '../utils';
+import {
+  fetchListFromAPI,
+  filterByStateActive,
+  filterMapSortList,
+  sortByLabelAscending,
+} from '../utils';
 import { RESERVATION_STATUS_ROUTE } from '@/helpers/constants';
 import { API_PATH, RESERVATION_STATUSES } from '@/helpers/constants';
 import { useConfigStore } from '../configStore';
@@ -42,6 +46,25 @@ export const useInnkeeperTenantsStore = defineStore('innkeeperTenants', () => {
     reservations.value.filter((r) => r.state !== RESERVATION_STATUSES.REQUESTED)
   );
 
+  const tenantsDropdown = computed(() => {
+    // Get the display list of active connections from the util
+    return filterMapSortList(
+      tenants.value,
+      _tenantLabelValue,
+      sortByLabelAscending,
+      filterByStateActive
+    );
+  });
+
+  const findTenantName = computed(() => (id: string) => {
+    if (loading.value) return undefined;
+    // Find the tenant name for an ID
+    const tenant = tenants.value?.find((t: TenantRecord) => {
+      return t.tenant_id === id;
+    });
+    return tenant && tenant.tenant_name ? tenant.tenant_name : '';
+  });
+
   // actions
 
   // (using both things temporarily)
@@ -262,11 +285,26 @@ export const useInnkeeperTenantsStore = defineStore('innkeeperTenants', () => {
       });
   }
 
+  // Display for a tenant dropdown list item
+  const _tenantLabelValue = (item: TenantRecord) => {
+    let result = null;
+    if (item != null) {
+      result = {
+        label: item.tenant_name,
+        value: item.tenant_id,
+        status: item.state,
+      };
+    }
+    return result;
+  };
+
   return {
     loading,
     error,
     apiKeys,
+    findTenantName,
     tenants,
+    tenantsDropdown,
     reservations,
     currentReservations,
     reservationHistory,