From 99fee772e0adc8e2af7a8d1b6ac3f693787f4b9f Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Tue, 25 Mar 2025 04:23:53 +0100
Subject: [PATCH] chore(front): upload form files table

---
 .../views/content/libraries/FilesTable.vue    | 143 ++++++++++--------
 1 file changed, 78 insertions(+), 65 deletions(-)

diff --git a/front/src/views/content/libraries/FilesTable.vue b/front/src/views/content/libraries/FilesTable.vue
index efb3bf435..133e719bb 100644
--- a/front/src/views/content/libraries/FilesTable.vue
+++ b/front/src/views/content/libraries/FilesTable.vue
@@ -22,6 +22,7 @@ import ImportStatusModal from '~/components/library/ImportStatusModal.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 
 import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 import Button from '~/components/ui/Button.vue'
@@ -141,74 +142,86 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
 </script>
 
 <template>
-  <Layout form>
-    <div class="fields">
+  <Layout form class="ui form">
+    <Layout stack class="fields">
       <div class="field">
-        <label for="import-status">
-          {{ t('views.content.libraries.FilesTable.label.importStatus') }}
-        </label>
-        <select
-          id="import-status"
-          class="ui dropdown"
-          :value="getTokenValue('status', '')"
-          @change="addSearchToken('status', ($event.target as HTMLSelectElement).value)"
-        >
-          <option value>
-            {{ t('views.content.libraries.FilesTable.option.status.all') }}
-          </option>
-          <option value="draft">
-            {{ t('views.content.libraries.FilesTable.option.status.draft') }}
-          </option>
-          <option value="pending">
-            {{ t('views.content.libraries.FilesTable.option.status.pending') }}
-          </option>
-          <option value="skipped">
-            {{ t('views.content.libraries.FilesTable.option.status.skipped') }}
-          </option>
-          <option value="errored">
-            {{ t('views.content.libraries.FilesTable.option.status.failed') }}
-          </option>
-          <option value="finished">
-            {{ t('views.content.libraries.FilesTable.option.status.finished') }}
-          </option>
-        </select>
+        <Input
+          id="search"
+          v-model="query"
+          search
+          :label="t('views.content.libraries.FilesTable.label.search')"
+          :placeholder="t('views.content.libraries.FilesTable.placeholder.search')"
+        />
       </div>
-      <div class="field">
-        <label for="ordering-select">
-          {{ t('views.content.libraries.FilesTable.ordering.label') }}
-        </label>
-        <select
-          id="ordering-select"
-          v-model="ordering"
-          class="ui dropdown"
-        >
-          <option
-            v-for="(option, key) in orderingOptions"
-            :key="key"
-            :value="option[0]"
+      <Layout flex>
+        <Spacer grow/>
+        <div class="field">
+          <label for="import-status">
+            {{ t('views.content.libraries.FilesTable.label.importStatus') }}
+          </label>
+          <select
+            id="import-status"
+            class="ui dropdown"
+            :value="getTokenValue('status', '')"
+            @change="addSearchToken('status', ($event.target as HTMLSelectElement).value)"
           >
-            {{ sharedLabels.filters[option[1]] }}
-          </option>
-        </select>
-      </div>
-      <div class="field">
-        <label for="ordering-direction">
-          {{ t('views.content.libraries.FilesTable.ordering.direction.label') }}
-        </label>
-        <select
-          id="ordering-direction"
-          v-model="orderingDirection"
-          class="ui dropdown"
-        >
-          <option value="+">
-            {{ t('views.content.libraries.FilesTable.ordering.direction.ascending') }}
-          </option>
-          <option value="-">
-            {{ t('views.content.libraries.FilesTable.ordering.direction.descending') }}
-          </option>
-        </select>
-      </div>
-    </div>
+            <option value>
+              {{ t('views.content.libraries.FilesTable.option.status.all') }}
+            </option>
+            <option value="draft">
+              {{ t('views.content.libraries.FilesTable.option.status.draft') }}
+            </option>
+            <option value="pending">
+              {{ t('views.content.libraries.FilesTable.option.status.pending') }}
+            </option>
+            <option value="skipped">
+              {{ t('views.content.libraries.FilesTable.option.status.skipped') }}
+            </option>
+            <option value="errored">
+              {{ t('views.content.libraries.FilesTable.option.status.failed') }}
+            </option>
+            <option value="finished">
+              {{ t('views.content.libraries.FilesTable.option.status.finished') }}
+            </option>
+          </select>
+        </div>
+        <div class="field">
+          <label for="ordering-select">
+            {{ t('views.content.libraries.FilesTable.ordering.label') }}
+          </label>
+          <select
+            id="ordering-select"
+            v-model="ordering"
+            class="ui dropdown"
+          >
+            <option
+              v-for="(option, key) in orderingOptions"
+              :key="key"
+              :value="option[0]"
+            >
+              {{ sharedLabels.filters[option[1]] }}
+            </option>
+          </select>
+        </div>
+        <div class="field">
+          <label for="ordering-direction">
+            {{ t('views.content.libraries.FilesTable.ordering.direction.label') }}
+          </label>
+          <select
+            id="ordering-direction"
+            v-model="orderingDirection"
+            class="ui dropdown"
+          >
+            <option value="+">
+              {{ t('views.content.libraries.FilesTable.ordering.direction.ascending') }}
+            </option>
+            <option value="-">
+              {{ t('views.content.libraries.FilesTable.ordering.direction.descending') }}
+            </option>
+          </select>
+        </div>
+      </Layout>
+    </Layout>
   </Layout>
   <import-status-modal
     v-if="detailedUpload"