Merge pull request #910 from qunm00/feature/add-option-to-delete-all-cards-in-a-column

feat: allow user to delete all cards in a column

Author: trobonox

components/kanban/Column.vue

@@ -30,7 +30,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. -->
     <div
       id="board-title"
       :class="[
-        'flex flex-row items-start justify-between gap-4',
+        'flex flex-row justify-between gap-4',
         titleTextClassZoom,
       ]"
     >
@@ -66,36 +66,37 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. -->
           emitter.emit('columnActionDone');
         "
       />
-
-      <div class="flex flex-row items-center gap-2">
-        <Tooltip v-if="addToTopButtonShown" direction="top">
-          <template #trigger>
-            <PlusIcon
-              :class="[
-                'text-dim-4 text-accent-hover cursor-pointe mt-1.5 shrink-0 grow-0',
-                iconSizeClass,
-              ]"
+      
+      <Dropdown align="end">
+        <template #trigger>
+          <button
+          class="bg-elevation-1 bg-elevation-2-hover transition-button h-full rounded-md"
+          @click.prevent
+          >
+          <EllipsisHorizontalIcon class="size-6" />
+          </button>
+        </template>
+        <template #content>
+            <DropdownMenuItem
+              class="bg-elevation-2-hover w-full cursor-pointer rounded-md px-4 py-1.5 pr-6 text-left flex items-center gap-2"
               @click="enableCardAddMode(true)"
-            />
-          </template>
-
-          <template #content>{{
-            $t("components.kanban.column.addCardTop")
-          }}</template>
-        </Tooltip>
-
-        <ClickCounter
-          @double-click="$emit('removeColumnNoConfirmation', id)"
-          @single-click="$emit('removeColumn', id)"
-        >
-          <XMarkIcon
-            :class="[
-              'text-dim-4 text-accent-hover mt-1.5 shrink-0 grow-0 cursor-pointer',
-              iconSizeClass,
-            ]"
-          />
-        </ClickCounter>
-      </div>
+            >
+                {{$t('components.kanban.column.addCardTop')}}
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              class="bg-elevation-2-hover w-full cursor-pointer rounded-md px-4 py-1.5 pr-6 text-left flex items-center gap-2"
+              @click="$emit('removeAllColumnCards', id)"
+            >
+                 {{$t('components.kanban.card.deleteAllColumnCardsAction')}}               
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              class="bg-elevation-2-hover w-full cursor-pointer rounded-md px-4 py-1.5 pr-6 text-left flex items-center gap-2"
+              @click="$emit('removeColumn', id)"
+            >
+                {{$t('components.kanban.column.deleteColumnAction')}}
+            </DropdownMenuItem>
+        </template>
+      </Dropdown>
     </div>
 
     <Container
@@ -213,7 +214,7 @@ import type { Ref } from "vue";
 
 import { applyDrag } from "@/utils/drag-n-drop";
 import emitter from "@/utils/emitter";
-import { PlusIcon, XMarkIcon } from "@heroicons/vue/24/solid";
+import { PlusIcon, EllipsisHorizontalIcon } from "@heroicons/vue/24/solid";
 //@ts-expect-error, sadly this library does not have ts typings
 import { Container, Draggable } from "vue3-smooth-dnd";
 import { useI18n } from "vue-i18n";
@@ -238,6 +239,7 @@ const emit = defineEmits<{
   (e: "openEditCardModal", columnId: string, el: Card): void;
   (e: "addCard", columnId: string, card: Card, addToTop: boolean | undefined): void;
   (e: "removeCard", columnId: string, cardId: string | undefined): void;
+  (e: "removeAllColumnCards", columnId: string): void;
   (
     e: "removeCardWithConfirmation",
     columnId: string,

composables/useBoard.ts

@@ -103,6 +103,11 @@ export function useBoard(id: string | Ref<string>) {
     if (!cardId) return;
     store.deleteCard(board.value.id, columnId, cardId);
   }
+  
+  function deleteAllColumnCards(columnId: string) {
+    if (!board.value) return;
+    store.deleteAllColumnCards(board.value.id, columnId);
+  }
 
   function mutateCard(columnId: string, cardId: string, mut: Parameters<typeof store.mutateCard>[3]) {
     if (!board.value) return;
@@ -242,6 +247,7 @@ export function useBoard(id: string | Ref<string>) {
     // card actions
     createCard,
     deleteCard,
+    deleteAllColumnCards,
     duplicateCard,
     mutateCard,
     reorderCards,

i18n/locales/en.json

@@ -153,7 +153,10 @@
       },
       "card": {
         "deleteCardAction": "Delete card",
-        "deleteCardConfirmation": "Are you sure you want to delete the card '{cardName}'? This action is irreversible."
+        "deleteCardConfirmation": "Are you sure you want to delete the card '{cardName}'? This action is irreversible.",
+        "deleteAllColumnCardsAction": "Delete all cards",
+        "deleteAllColumnCardsConfirmation": "Are you sure you want to delete all the cards in column '{columnName}'? This action is irreversible.",
+        "deleteAllColumnCardsConfirmationTitle": "Delete all cards in this column"
       },
       "searchBar": {
         "placeholder": "Search for cards..."

pages/kanban/[id].vue

@@ -87,6 +87,14 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. -->
       @closeModal="cardRemoveDialog.cancel()"
       @confirmAction="cardRemoveDialog.confirm(true)"
     />
+    <ModalConfirmation
+      v-show="removeAllColumnCardsModalVisible"
+      :close-button-text="$t('general.cancelAction')"
+      :confirm-button-text="$t('general.deleteAction')"
+      :title="$t('components.kanban.card.deleteAllColumnCardsConfirmationTitle') + '?'"
+      @closeModal="allColumnCardsRemoveDialog.cancel()"
+      @confirmAction="allColumnCardsRemoveDialog.confirm(true)"
+    />
 
     <div class="absolute top-4 z-50 ml-8 w-[calc(100vw-112px)]">
       <h1
@@ -261,6 +269,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. -->
                   @addCard="board.createCard"
                   @removeCard="board.deleteCard"
                   @removeCardWithConfirmation="removeCardWithConfirmation"
+                  @removeAllColumnCards="removeAllColumnCards"
                   @removeColumn="openColumnRemoveDialog(column.id)"
                   @removeColumnNoConfirmation="board.removeColumn"
                   @setColumnEditIndex="setColumnEditIndex"
@@ -360,13 +369,15 @@ const currentlyActiveCardInfo: {
 
 const removeColumnModalVisible = ref(false);
 const removeCardModalVisible = ref(false);
+const removeAllColumnCardsModalVisible = ref(false);
 const deleteBoardModalVisible = ref(false);
 const renameBoardModalVisible = ref(false);
 
 const editTagModalVisible = ref(false);
 
 const columnRemoveDialog = useConfirmDialog(removeColumnModalVisible);
 const cardRemoveDialog = useConfirmDialog(removeCardModalVisible);
+const allColumnCardsRemoveDialog = useConfirmDialog(removeAllColumnCardsModalVisible);
 
 const board = useBoard(computed(() => route.params.id as string));
 const { board: boardContent } = board;
@@ -665,6 +676,27 @@ const removeCardWithConfirmation = async (
   emitter.emit("columnDraggingOn");
 };
 
+const removeAllColumnCards = async (
+    columnID: string
+) => {
+  const column = boardContent.value?.columns.filter((obj: Column) => {
+    return obj.id === columnID;
+  })[0];
+  
+  emitter.emit("openModalWithCustomDescription", {
+    description: t("components.kanban.card.deleteAllColumnCardsConfirmation", {
+      columnName: column.title,
+    }),
+  });
+  
+  const { isCanceled } = await allColumnCardsRemoveDialog.reveal();
+  if (!isCanceled) {
+    setTimeout(() => {
+      board.deleteAllColumnCards(columnID);
+    }, 250);
+  }
+}
+
 /**
  * Get the text color with the correct contrast if a background image is set
  */

stores/boards.ts

@@ -311,6 +311,15 @@ export const useBoardsStore = defineStore("boards", {
       col.cards = col.cards.filter(c => c.id !== cardId);
       b.lastEdited = new Date();
     },
+    deleteAllColumnCards(boardId: string, columnId: string) {
+      const b = this.boardById(boardId);
+      if (!b) return;
+      const col = b.columns.find(c => c.id === columnId);
+      if (!col) return;
+
+      col.cards = [];
+      b.lastEdited = new Date();
+    },
     mutateCard(boardId: string, columnId: string, cardId: string, mut: (c: Card) => void) {
       const b = this.boardById(boardId);
       if (!b) return;