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

NethServer · Dec 2, 2024 · 472e47e · 472e47e
1 parent d801245
commit 472e47e
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 24 deletions.
diff --git a/ui/public/i18n/en/translation.json b/ui/public/i18n/en/translation.json
@@ -79,7 +79,8 @@
         "no_snapshot_to_restore": "No snapshot to restore",
         "start_typing_to_search": "Start typing to search file or folder",
         "restore_file_info": "The selected file or folder will be restored to '{restoredFolder}'. Ensure there is sufficient space on {node} to avoid restore failure.",
-        "restoring_to_share_name": "Restoring to share '{name}'"
+        "restoring_to_share_name": "Restoring to share '{name}'",
+        "searchbox_limit_reached": "Continue typing to show more options"
     },
     "about": {
         "title": "About"

diff --git a/ui/src/components/shared-folders/RestoreFileSearch.vue b/ui/src/components/shared-folders/RestoreFileSearch.vue
@@ -127,44 +127,63 @@
       </div>
 
       <div
-        v-show="true"
+        v-show="open"
         :id="uid"
-        :class="['search-results', `${carbonPrefix}--list-box__menu`]"
+        :class="[`${carbonPrefix}--list-box__menu`]"
         role="listbox"
         ref="list"
       >
         <!-- loading results -->
-        <div v-if="loading">
+        <div v-show="loading">
           <cv-skeleton-text
             :paragraph="true"
             :line-count="4"
             class="loading-results"
           />
         </div>
-        <!-- search results -->
+        <div class="search-results">
+          <!-- search results -->
+          <div
+            v-show="!loading"
+            v-for="(item, index) in limitedDataOptions"
+            :key="`combo-box-${index}-${item.value}`"
+            :class="[
+              `${carbonPrefix}--list-box__menu-item`,
+              {
+                [`${carbonPrefix}--list-box__menu-item--highlighted`]:
+                  highlighted === item.value
+              }
+            ]"
+            ref="option"
+            @click.stop.prevent="onItemClick(item.value)"
+            @mousemove="onMousemove(item.value)"
+            @mousedown.prevent
+          >
+            <div
+              :class="[
+                'search-result',
+                `${carbonPrefix}--list-box__menu-item__option`
+              ]"
+            >
+              {{ item.label }}
+            </div>
+          </div>
+        </div>
+        <!-- more options available -->
         <div
-          v-else
-          v-for="(item, index) in limitedDataOptions"
-          :key="`combo-box-${index}`"
-          :class="[
-            `${carbonPrefix}--list-box__menu-item`,
-            {
-              [`${carbonPrefix}--list-box__menu-item--highlighted`]:
-                highlighted === item.value
-            }
-          ]"
-          ref="option"
-          @click.stop.prevent="onItemClick(item.value)"
-          @mousemove="onMousemove(item.value)"
-          @mousedown.prevent
+          v-if="
+            dataOptions.length &&
+            (limitReached || dataOptions.length > maxDisplayOptions)
+          "
+          :class="`${carbonPrefix}--list-box__menu-item`"
         >
           <div
             :class="[
-              'search-result',
-              `${carbonPrefix}--list-box__menu-item__option`
+              `${carbonPrefix}--list-box__menu-item__option`,
+              'item-disabled'
             ]"
           >
-            {{ item.label }}
+            {{ $t("shares.searchbox_limit_reached") }}
           </div>
         </div>
       </div>
@@ -289,6 +308,7 @@ export default {
       isHelper: false,
       isInvalid: false,
       isWarn: false,
+      limitReached: false,
       // internalOptions: [] ////
       loading: false,
       errorMessage: ""
@@ -611,6 +631,7 @@ export default {
 
       this.loading = true;
       this.errorMessage = "";
+      this.limitReached = false;
       this.doOpen(true);
       const taskAction = "seek-snapshot-contents";
       const eventId = this.getUuid();
@@ -676,9 +697,17 @@ export default {
         value: item
       }));
 
-      // const fileSearchResults = taskResult.output; ////
+      this.limitReached = taskResult.output.limit_reached; //// will become a prop
 
-      // const fileSearchResults ////
+      // if (taskResult.output.limit_reached) { ////
+      //   searchResults.push({
+      //     name: "limit_reached",
+      //     label: this.$t("shares.searchbox_limit_reached"),
+      //     value: "limit_reached",
+      //     disabled: true
+      //   });
+      // }
+      // this.dataOptions = searchResults;
 
       this.loading = false;
     }
@@ -711,6 +740,8 @@ export default {
 </style>
 
 <style lang="scss">
+@import "../../styles/carbon-utils";
+
 // global styles
 
 /* full width */
@@ -731,6 +762,11 @@ export default {
   white-space: normal;
 }
 
+.restore-file-search .bx--list-box__menu-item__option.item-disabled {
+  color: $text-03;
+  cursor: not-allowed;
+}
+
 .restore-file-search .bx--tooltip__label .bx--tooltip__trigger {
   margin-left: 0.25rem;
 }