From b3692d2239749627d341655d6105f0baba77ccb8 Mon Sep 17 00:00:00 2001
From: sanjayk03-dev <imsanjay003@gmail.com>
Date: Fri, 31 May 2024 14:41:35 +0530
Subject: [PATCH] delete prompt ui change

---
 src/js/control-view.js             | 10 ++++++++++
 src/pug/templates/control-view.pug | 19 ++++++++++++-------
 src/stylus/style.styl              | 26 ++++++++++++++++++++++++++
 3 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/src/js/control-view.js b/src/js/control-view.js
index 8ded016..861e7b0 100644
--- a/src/js/control-view.js
+++ b/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" : "";
diff --git a/src/pug/templates/control-view.pug b/src/pug/templates/control-view.pug
index 0046c5f..fee397c 100644
--- a/src/pug/templates/control-view.pug
+++ b/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
-                label(v-for="item in gcode_files" :key="item")
-                  input(type="checkbox" :value="item" v-model="selected_items_to_delete")
-                  | {{ item }}
+              .search-bar
+                input(type="text" v-model="search_query" placeholder="Search Files...")
+              .container
+                .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
               //-   | &nbsp;All
-              button.pure-button.button-success(@click="delete_current")
+              button.pure-button.button-success(@click="delete_current",style="height:50px")
                 .fa.fa-trash
                 | &nbsp;Selected
 
diff --git a/src/stylus/style.styl b/src/stylus/style.styl
index 049063c..4109c49 100644
--- a/src/stylus/style.styl
+++ b/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