feat: select all displayed photos

yy4382 · Nov 11, 2024 · 2b09349 · 2b09349
1 parent cf6f121
commit 2b09349
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/app/components/Photo/Toolbar/PhotoToolbar.vue b/app/components/Photo/Toolbar/PhotoToolbar.vue
@@ -3,22 +3,30 @@ const settings = useSettingsStore();
 const galleryState = useGalleryStateStore();
 
 const selectedPhotos = computed(() => galleryState.imageSelected);
+const hasSelectedPhotos = computed(() => selectedPhotos.value.length > 0);
 </script>
 
 <template>
   <div class="flex gap-2 items-center">
     <PhotoToolbarRefresh />
 
     <UButton
-      v-if="selectedPhotos.length > 0"
       icon="i-mingcute-checkbox-line"
-      :label="selectedPhotos.length + ''"
+      :label="hasSelectedPhotos ? selectedPhotos.length + '' : undefined"
       variant="solid"
       color="gray"
-      @click="galleryState.clearSelectedPhotos"
+      @click="
+        () => {
+          if (hasSelectedPhotos) {
+            galleryState.clearSelectedPhotos();
+          } else {
+            galleryState.selectDisplayedPhotos();
+          }
+        }
+      "
     />
     <BaseSecondConfirm
-      v-if="selectedPhotos.length > 0"
+      v-if="hasSelectedPhotos"
       :action="
         () => {
           galleryState.deletePhoto();

diff --git a/app/stores/galleryState.ts b/app/stores/galleryState.ts
@@ -66,6 +66,9 @@ export const useGalleryStateStore = defineStore("galleryState", () => {
   const clearSelectedPhotos = () => {
     imageSelected.value = [];
   };
+  const selectDisplayedPhotos = () => {
+    imageSelected.value = imageDisplayed.value.map((photo) => photo.Key);
+  };
 
   async function deletePhoto(inputKeys?: string[]) {
     const keys = inputKeys ?? imageSelected.value;
@@ -92,6 +95,7 @@ export const useGalleryStateStore = defineStore("galleryState", () => {
     imageDisplayed,
     imageSelected,
     clearSelectedPhotos,
+    selectDisplayedPhotos,
     deletePhoto,
   };
 });