chore(front): upload form files table

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,8 +142,19 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
 </script>
 
 <template>
-  <Layout form>
-    <div class="fields">
+  <Layout form class="ui form">
+    <Layout stack class="fields">
+      <div class="field">
+        <Input
+          id="search"
+          v-model="query"
+          search
+          :label="t('views.content.libraries.FilesTable.label.search')"
+          :placeholder="t('views.content.libraries.FilesTable.placeholder.search')"
+        />
+      </div>
+      <Layout flex>
+        <Spacer grow/>
         <div class="field">
           <label for="import-status">
             {{ t('views.content.libraries.FilesTable.label.importStatus') }}
@@ -208,7 +220,8 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
             </option>
           </select>
         </div>
-    </div>
+      </Layout>
+    </Layout>
   </Layout>
   <import-status-modal
     v-if="detailedUpload"