feat(ui): restore file or folder (wip)

NethServer · Dec 3, 2024 · b54d486 · b54d486
1 parent 472e47e
commit b54d486
Showing 1 changed file with 32 additions and 2 deletions.
diff --git a/ui/src/components/shared-folders/RestoreFileSearch.vue b/ui/src/components/shared-folders/RestoreFileSearch.vue
@@ -8,13 +8,17 @@
       'restore-file-search',
       'cv-combo-box',
       `${carbonPrefix}--list-box__wrapper`,
+      `${carbonPrefix}--search`,
       {
         [`${carbonPrefix}--text-input__field-wrapper--warning`]:
           !isInvalid && isWarn
       }
     ]"
     @focusout="onFocusOut"
   >
+    <div :class="`${carbonPrefix}--search-magnifier`">
+      <Search20 :class="`${carbonPrefix}--search-magnifier-icon`" />
+    </div>
     <label
       v-if="title"
       :for="uid"
@@ -88,6 +92,7 @@
           ref="input"
           :class="[
             `${carbonPrefix}--text-input`,
+            `${carbonPrefix}--search-input`,
             {
               [`${carbonPrefix}--text-input--empty`]:
                 !filter || filter.length === 0
@@ -101,7 +106,7 @@
           autocomplete="off"
           :disabled="disabled"
           :placeholder="placeholder"
-          v-model="filter"
+          v-model.trim="filter"
           v-debounce:500ms="seekSnapshotContents"
           @input="onInput"
           @focus="inputFocus"
@@ -141,6 +146,19 @@
             class="loading-results"
           />
         </div>
+        <!-- no results -->
+        <div v-if="!loading && !dataOptions.length && noResults">
+          <div :class="[`${carbonPrefix}--list-box__menu-item`]">
+            <div
+              :class="[
+                `${carbonPrefix}--list-box__menu-item__option`,
+                'item-disabled'
+              ]"
+            >
+              {{ noResultsLabel }}
+            </div>
+          </div>
+        </div>
         <div class="search-results">
           <!-- search results -->
           <div
@@ -230,6 +248,7 @@ import to from "await-to-js";
 import { UtilService, TaskService } from "@nethserver/ns8-ui-lib";
 import { mapState } from "vuex";
 import Mark from "mark.js";
+import Search20 from "@carbon/icons-vue/es/search/20";
 
 export default {
   name: "RestoreFileSearch",
@@ -242,7 +261,13 @@ export default {
     UtilService,
     TaskService
   ],
-  components: { WarningFilled16, WarningAltFilled16, ChevronDown16, Close16 },
+  components: {
+    WarningFilled16,
+    WarningAltFilled16,
+    ChevronDown16,
+    Close16,
+    Search20
+  },
   props: {
     // autoFilter: Boolean, ////
     repositoryId: String,
@@ -281,6 +306,7 @@ export default {
     //   }
     // },
     clearFilterLabel: { type: String, default: "Clear" },
+    noResultsLabel: { type: String, default: "No results found" },
     // limit the number of options to be displayed
     maxDisplayOptions: { type: Number, default: 100 },
     marginBottomOnOpen: { type: Boolean, default: false },
@@ -309,6 +335,7 @@ export default {
       isInvalid: false,
       isWarn: false,
       limitReached: false,
+      noResults: false,
       // internalOptions: [] ////
       loading: false,
       errorMessage: ""
@@ -437,6 +464,7 @@ export default {
       this.internalUpdateValue("");
       this.filter = "";
       this.dataOptions = [];
+      this.noResults = false;
       this.doOpen(false);
       this.$refs.input.focus();
       // this.doOpen(true); ////
@@ -521,6 +549,7 @@ export default {
     onInput() {
       if (this.disabled) return;
       this.doOpen(true);
+      this.noResults = false;
       // this.updateOptions(); ////
       this.updateHighlight();
     },
@@ -697,6 +726,7 @@ export default {
         value: item
       }));
 
+      this.noResults = this.dataOptions.length === 0;
       this.limitReached = taskResult.output.limit_reached; //// will become a prop
 
       // if (taskResult.output.limit_reached) { ////