feat: add search to my apps list (#267)

Kong · Oct 16, 2023 · 68e90f5 · 68e90f5
1 parent 306e3b2
commit 68e90f5
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 2 deletions.
diff --git a/src/locales/ca_ES.ts b/src/locales/ca_ES.ts
@@ -284,6 +284,8 @@ export const ca_ES: I18nType = {
     plus: 'Més',
     myApps: 'Les meves aplicacions',
     refreshSecret: 'Actualitzar secret',
+    noSearchResults: translationNeeded(en.myApp.noSearchResults),
+    searchPlaceholder: translationNeeded(en.myApp.searchPlaceholder),
     delete: 'Eliminar',
     cancel: 'Cancel·lar',
     noApp: 'Sense aplicacions',

diff --git a/src/locales/de.ts b/src/locales/de.ts
@@ -284,6 +284,8 @@ export const de: I18nType = {
     plus: 'Plus',
     myApps: 'Meine Applikationen',
     refreshSecret: 'Secret erneuern',
+    noSearchResults: translationNeeded(en.myApp.noSearchResults),
+    searchPlaceholder: translationNeeded(en.myApp.searchPlaceholder),
     delete: 'Löschen',
     cancel: 'Abbrechen',
     noApp: 'Keine Applikationen',

diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -283,6 +283,8 @@ export const en = {
     delete: 'Delete',
     cancel: 'Cancel',
     noApp: 'No Applications',
+    searchPlaceholder: 'Search applications',
+    noSearchResults: 'No Applications Found',
     create: 'Create a new app',
     getStarted: ' to get started',
     deleteDialog: (name: string) => `Are you sure you want to delete ${name}? This action cannot be undone.`

diff --git a/src/locales/es_ES.ts b/src/locales/es_ES.ts
@@ -284,6 +284,8 @@ export const es_ES: I18nType = {
     plus: 'Plus',
     myApps: 'Mis aplicaciones',
     refreshSecret: 'Refrescar clave secreta',
+    noSearchResults: translationNeeded(en.myApp.noSearchResults),
+    searchPlaceholder: translationNeeded(en.myApp.searchPlaceholder),
     delete: 'Eliminar',
     cancel: 'Cancelar',
     noApp: 'No hay aplicaciones',

diff --git a/src/locales/fr.ts b/src/locales/fr.ts
@@ -284,6 +284,8 @@ export const fr: I18nType = {
     plus: 'Plus',
     myApps: 'Mes applications',
     refreshSecret: 'Actualiser le secret',
+    noSearchResults: translationNeeded(en.myApp.noSearchResults),
+    searchPlaceholder: translationNeeded(en.myApp.searchPlaceholder),
     delete: 'Supprimer',
     cancel: 'Annuler',
     noApp: 'Aucune application',

diff --git a/src/locales/i18n-type.d.ts b/src/locales/i18n-type.d.ts
@@ -282,6 +282,8 @@ export interface I18nType {
     refreshSecret: string;
     delete: string;
     cancel: string;
+    searchPlaceholder: string;
+    noSearchResults: string;
     noApp: string;
     create: string;
     getStarted: string;

diff --git a/src/views/MyApps.vue b/src/views/MyApps.vue
@@ -66,9 +66,20 @@
             is-small
             class="applications-table"
             :pagination-page-sizes="paginationConfig.paginationPageSizes"
+            :search-input="searchStr"
             :initial-fetcher-params="{ pageSize: paginationConfig.initialPageSize }"
             @row:click="(_, row) => $router.push({ name: 'show-application', params: { application_id: row.id }})"
           >
+            <template #toolbar="{ state }">
+              <div class="applications-toolbar">
+                <KInput
+                  v-if="state.hasData || searchStr"
+                  v-model="searchStr"
+                  :placeholder="helpText.searchPlaceholder"
+                  type="search"
+                />
+              </div>
+            </template>
             <template #name="{ row }">
               {{ row.name }}
             </template>
@@ -102,7 +113,7 @@
             </template>
             <template #empty-state>
               <EmptyState
-                :title="helpText.noApp"
+                :title="searchStr ? helpText.noSearchResults : helpText.noApp"
               >
                 <template #message>
                   <p>
@@ -202,6 +213,7 @@ export default defineComponent({
   setup () {
     const { notify } = useToaster()
     const errorMessage = ref('')
+    const searchStr = ref('')
     const applications = ref([])
     const key = ref(0)
     const fetcherCacheKey = computed(() => key.value.toString())
@@ -242,7 +254,11 @@ export default defineComponent({
 
     const fetcher = async (payload: { pageSize: number; page: number }) => {
       const { pageSize, page: pageNumber } = payload
-      const reqPayload = { pageNumber, pageSize }
+      const reqPayload = {
+        pageNumber,
+        pageSize,
+        ...(searchStr.value.length && { filterNameContains: searchStr.value })
+      }
 
       send('FETCH')
 
@@ -353,6 +369,7 @@ export default defineComponent({
       token,
       onModalClose,
       handleRefreshSecret,
+      searchStr,
       fetcherCacheKey,
       fetcher,
       paginationConfig,