feat: early work on actions

frappe · Jan 13, 2025 · 64c439b · 64c439b
1 parent 0a83c7e
commit 64c439b
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 15 deletions.
diff --git a/frontend/src/components/DriveToolBar.vue b/frontend/src/components/DriveToolBar.vue
@@ -97,6 +97,32 @@
           </div>
         </div>
       </div>
+      <div v-if="multi" class="flex gap-3">
+        <Button
+          v-for="(item, index) in actionItems.filter((i) => i.important)"
+          :key="index"
+          :loading="actionLoading"
+          :disabled="actionLoading"
+          @click="item.onClick"
+        >
+          <FeatherIcon
+            v-if="typeof item.icon === 'string'"
+            :name="item.icon"
+            class="h-4 w-4"
+            :class="
+              item.label === 'Unfavourite'
+                ? 'stroke-yellow-500 fill-yellow-500'
+                : ''
+            "
+          />
+          <component
+            :is="item.icon"
+            v-else
+            class="h-4 w-auto text-gray-800"
+            :class="item.danger ? 'text-red-500' : ''"
+          />
+        </Button>
+      </div>
       <div class="ml-auto flex gap-x-1 items-center">
         <Dropdown
           v-if="columnHeaders"
@@ -193,6 +219,10 @@ export default {
     Unknown,
   },
   props: {
+    multi: {
+      type: Boolean,
+      default: false,
+    },
     breadcrumbs: {
       type: Array,
       default: null,
@@ -329,4 +359,3 @@ export default {
   },
 }
 </script>
-./EspressoIcons/Sort.vue
diff --git a/frontend/src/components/ListView.vue b/frontend/src/components/ListView.vue
@@ -11,7 +11,7 @@
       >
         <div class="w-4 h-4 ml-1 mr-3 my-1">
           <input
-            @click="deselectAll"
+            @click="selectAll"
             :checked="
               selectedEntities.length ===
               Object.values(folderContents).reduce(
@@ -75,7 +75,7 @@
               : 'hover:bg-gray-50'
           "
           :draggable="false"
-          @[action]="dblClickEntity(entity)"
+          @[action]="dblClickEntity(entity, $event)"
           @click="
             !multi && selectEntity(entity, $event, displayOrderedEntities)
           "
@@ -245,6 +245,7 @@ export default {
     "showEmptyEntityContext",
     "fetchFolderContents",
     "updateOffset",
+    "update-multi",
   ],
   setup(props, { emit }) {
     const container = ref(null)
@@ -306,10 +307,13 @@ export default {
     },
     checkboxSelect(entity, event) {
       this.multi = true
+      this.$emit("update-multi", true)
       event.stopPropagation()
       this.selectEntity(entity, event)
-      if (!document.querySelector("input[type=checkbox]:checked"))
+      if (!document.querySelector("input[type=checkbox]:checked")) {
         this.multi = false
+        this.$emit("update-multi", false)
+      }
     },
     selectEntity(entity, event, entities) {
       this.$emit("showEntityContext", null)
@@ -350,24 +354,25 @@ export default {
         this.$store.commit("setEntityInfo", [entity])
       }
     },
-    dblClickEntity(entity) {
-      if (this.multi) return null
+    dblClickEntity(entity, event) {
+      if (this.multi || event.target.type === "checkbox") return null
       this.$store.commit("setEntityInfo", [entity])
       this.$emit("openEntity", entity)
     },
-    deselectAll() {
+    selectAll() {
       if (this.selectedEntities.length) {
         this.selectedEntities.splice(0, this.selectedEntities.length)
         this.multi = false
+        this.$emit("update-multi", false)
       } else {
         for (let group in this.folderContents) {
           this.folderContents[group].forEach((entity) => {
             this.selectedEntities.push(entity)
           })
           this.multi = true
+          this.$emit("update-multi", true)
         }
       }
-      console.log(this.selectedEntities)
       this.$emit("entitySelected", this.selectedEntities)
       this.$store.commit("setEntityInfo", this.selectedEntities)
       this.$emit("showEntityContext", null)

diff --git a/frontend/src/components/PageGeneric.vue b/frontend/src/components/PageGeneric.vue
@@ -11,6 +11,7 @@
   >
     <DriveToolBar
       :action-items="actionItems"
+      :multi="multi"
       :column-headers="showSort ? columnHeaders : null"
     />
     <FolderContentsError
@@ -45,6 +46,7 @@
       @open-entity="(entity) => openEntity(entity)"
       @fetch-folder-contents="() => $resources.folderContents.fetch()"
       @update-offset="fetchNextPage"
+      @update-multi="(val) => (multi = val)"
     />
     <EntityContextMenu
       v-if="showEntityContext"
@@ -299,6 +301,7 @@ export default {
     },
   },
   data: () => ({
+    multi: false,
     folderItems: null,
     previewEntity: null,
     showPreview: false,
@@ -501,6 +504,7 @@ export default {
                 }
               }
             },
+            important: true,
           },
           /* Folder Download */
           {
@@ -530,6 +534,7 @@ export default {
                 return allEntitiesSatisfyCondition
               }
             },
+            important: true,
           },
 
           {
@@ -545,6 +550,7 @@ export default {
                   this.selectedEntities[0].share)
               )
             },
+            important: true,
           },
           {
             label: "Get Link",
@@ -555,6 +561,7 @@ export default {
             isEnabled: () => {
               return this.selectedEntities.length === 1
             },
+            important: true,
           },
           {
             label: "Rename",
@@ -612,6 +619,7 @@ export default {
                 this.selectedEntities.length === 1
               )
             },
+            important: true,
           },
           {
             label: "Hide Info",
@@ -624,6 +632,7 @@ export default {
                 this.$store.state.showInfo && this.selectedEntities.length === 1
               )
             },
+            important: true,
           },
           /*{
             label: "Paste",
@@ -651,6 +660,7 @@ export default {
                 this.selectedEntities.every((x) => !x.is_favourite)
               )
             },
+            important: true,
           },
           {
             label: "Unfavourite",
@@ -664,6 +674,7 @@ export default {
                 this.selectedEntities.every((x) => x.is_favourite)
               )
             },
+            important: true,
           },
           {
             label: "Color",
@@ -722,6 +733,7 @@ export default {
               })
               return this.selectedEntities.length > 0 && allOwned
             },
+            important: true,
           },
         ].filter((item) => item.isEnabled())
       }
@@ -1178,23 +1190,26 @@ export default {
           // Toggled OFF
           if (this.selectedEntities[0].is_favourite) {
             toast({
-              title: `${this.selectedEntities.length} ${
-                this.selectedEntities.length > 1 ? " items" : " item"
-              } removed from Favourites`,
+              title: `${
+                this.selectedEntities.length > 1
+                  ? this.selectedEntities.length + " items removed"
+                  : "Removed"
+              } from Favourites`,
               position: "bottom-right",
               timeout: 2,
             })
           } else {
             toast({
-              title: `${this.selectedEntities.length} ${
-                this.selectedEntities.length > 1 ? " items" : " item"
-              } added to Favourites`,
+              title: `${
+                this.selectedEntities.length > 1
+                  ? this.selectedEntities.length + " items added"
+                  : "Added"
+              } to Favourites`,
               position: "bottom-right",
               timeout: 2,
             })
           }
           this.handleListMutation(this.selectedEntities[0].name)
-          this.selectedEntities = []
         },
       }
     },