delete prompt ui change

src/js/control-view.js

@@ -55,6 +55,8 @@ module.exports = {
       totalFiles: 0,
       files_sortby: "By Upload Date",
       selected_items_to_delete: [],
+      search_query: "",
+      filtered_files: [],
     };
   },
 
@@ -230,6 +232,9 @@ module.exports = {
         return files;
       }
     },
+    gcode_filtered_files: function () {
+      return this.filtered_files.filter(file => file.toLowerCase().includes(this.search_query.toLowerCase()));
+    },
     gcode_folders: function () {
       return this.state.gcode_list
         .map(item => item.name)
@@ -289,6 +294,11 @@ module.exports = {
         alert("Restore failed");
       }
     },
+
+    populateFiles(index) {
+      this.filtered_files = this.state.gcode_list[index].files.map(item => item.file_name);
+    },
+
     getJogIncrStyle(value) {
       const weight = `font-weight:${this.jog_incr === value ? "bold" : "normal"}`;
       const color = this.jog_incr === value ? "color:#0078e7" : "";

src/pug/templates/control-view.pug

@@ -320,19 +320,24 @@ script#control-view-template(type="text/x-template")
             :disabled="!state.selected || !is_ready",style="height:100px;width:100px;font-weight:normal")
             img(src="images/delete_gcode.png" style="height: 30px;")
 
-          message(:show.sync="deleteGCode")
+          message.error-message(:show.sync="deleteGCode")
             h3(slot="header") Select files to delete:
             div(slot="body")
-              .gcode_container
+              .search-bar
-                label(v-for="item in gcode_files" :key="item")
+                input(type="text" v-model="search_query" placeholder="Search Files...")
-                  input(type="checkbox" :value="item" v-model="selected_items_to_delete")
+              .container
-                  | {{ item }}
+                .folders
+                  div(v-for="(folder, index) in state.gcode_list" :key="index" @click="populateFiles(index)" class="folder-item") {{ folder.name }}
+                .files
+                  label.file-item(v-for="item in gcode_filtered_files" :key="item")
+                    input(type="checkbox" :value="item" v-model="selected_items_to_delete")
+                    | {{ item }}
             div(slot="footer")
-              button.pure-button(@click="cancel_delete") Cancel
+              button.pure-button(@click="cancel_delete",style="height:50px") Cancel
               //- button.pure-button.button-error(@click="delete_all_except_macros")
               //-   .fa.fa-trash
               //-   |  All
-              button.pure-button.button-success(@click="delete_current")
+              button.pure-button.button-success(@click="delete_current",style="height:50px")
                 .fa.fa-trash
                 |  Selected
 

src/stylus/style.styl

@@ -297,6 +297,32 @@ span.unit
     overflow-y scroll
     max-height 400px
     margin-bottom 10px
+  
+  .container
+    display flex
+    width 100%
+    height 100vh
+  
+  .folders
+    width 30%
+    border-right 1px solid #ccc
+    padding 10px
+    overflow-y auto
+  
+  .files
+    width 70%
+    padding 10px
+    overflow-y auto
+  
+  .folder-item, .file-item
+    padding: 5px
+    cursor: pointer
+  
+  .folder-item:hover, .file-item:hover
+    background-color #f0f0f0
+  
+  .search-bar
+    margin-bottom 10px
 
   table
     border-collapse collapse