feat: add file search

src/main/webapp/src/components/layouts/FilesLayout.vue

@@ -14,7 +14,7 @@ const { xs } = useDisplay();
 
 const configurationStore = useConfigurationStore();
 const { loadFile } = configurationStore;
-const { isGrid } = storeToRefs(configurationStore);
+const { search, isGrid } = storeToRefs(configurationStore);
 
 defineProps<{
   files: Array<File> | undefined;
@@ -27,7 +27,7 @@ setInterval(() => {
 }, 10000);
 
 const headers = ref<Array<any>>([
-  { title: t('information.title'), value: 'title', sortable: true, width: '100%' },
+  { title: t('information.title'), key: 'title', sortable: true, width: '100%' },
   { title: '', key: 'actions', sortable: false, align: 'end' },
 ]);
 
@@ -65,6 +65,8 @@ watch(
     :headers="headers"
     :items="files"
     :sort-by="[{ key: 'title', order: 'asc' }]"
+    :search="search"
+    filter-keys="title"
     :loading="files == undefined"
     :items-per-page="-1"
     sort-asc-icon="fas fa-sort-up"

src/main/webapp/src/plugins/fontawsome.ts

@@ -14,12 +14,14 @@ import {
   faFolder,
   faGear,
   faGlobe,
+  faMagnifyingGlass,
   faPlus,
   faSave,
   faShareNodes,
   faSortDown,
   faSortUp,
   faStar,
+  faTimesCircle,
   faTrash,
   faXmark,
 } from '@fortawesome/free-solid-svg-icons';
@@ -42,12 +44,14 @@ const register = (app: App): void => {
     faFolder,
     faGear,
     faGlobe,
+    faMagnifyingGlass,
     faPlus,
     faSave,
     faShareNodes,
     faSortDown,
     faSortUp,
     faStar,
+    faTimesCircle,
     faTrash,
     faXmark,
   );

src/main/webapp/src/stores/configurationStore.ts

@@ -39,6 +39,8 @@ export const useConfigurationStore = defineStore('configuration', () => {
 
   let lastUpdated = new Date();
 
+  const search = ref<string | undefined>();
+
   const files = ref<Array<File> | undefined>();
 
   const loadFiles = debounce(async (requestedFiles: Navigation | string): Promise<void> => {
@@ -98,6 +100,7 @@ export const useConfigurationStore = defineStore('configuration', () => {
   const isNew = ref<boolean>(false);
 
   const resetState = (): void => {
+    search.value = undefined;
     currentFile.value = undefined;
     isInfo.value = false;
     isConfirmation.value = false;
@@ -116,6 +119,7 @@ export const useConfigurationStore = defineStore('configuration', () => {
     isInit,
     isSoffitOk,
     lastNavigation,
+    search,
     files,
     loadFiles,
     refresh,

src/main/webapp/src/views/home/ProjectsView.vue

@@ -1,16 +1,37 @@
 <script setup lang="ts">
 import { useConfigurationStore } from '@/stores/configurationStore.ts';
 import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
 import { useDisplay } from 'vuetify';
 
 const { mobile } = useDisplay();
 
 const configurationStore = useConfigurationStore();
-const { isNew } = storeToRefs(configurationStore);
+const { search, isNew } = storeToRefs(configurationStore);
+
+const { t } = useI18n();
 </script>
 
 <template>
-  <div :class="[mobile ? 'mb-2' : 'mb-4']">
+  <div :class="['d-flex', 'align-center', ' justify-space-between', mobile ? 'mb-2' : 'mb-4']">
     <v-btn icon="fas fa-plus" variant="tonal" @click="isNew = true" />
+    <v-text-field
+      v-model="search"
+      variant="solo"
+      density="compact"
+      rounded="xl"
+      prepend-inner-icon="fas fa-magnifying-glass"
+      flat
+      hide-details
+      single-line
+      clearable
+      :class="[mobile ? 'ml-2' : 'ml-4', 'max-width']"
+    />
   </div>
 </template>
+
+<style scoped lang="scss">
+.max-width {
+  max-width: 300px;
+}
+</style>