From 963701ac7facc281053d4ef8d6b3ee4fc4ffb351 Mon Sep 17 00:00:00 2001 From: Johannes Millan Date: Thu, 27 Feb 2025 18:05:39 +0100 Subject: [PATCH] feat(boards): make super basic drag & drop work --- .../board-task-list.component.html | 4 +++ .../board-task-list.component.scss | 2 ++ .../board-task-list.component.ts | 27 ++++++++++++++++--- .../boards/board/board.component.html | 5 +++- .../features/boards/board/board.component.ts | 15 +++++++++-- src/app/features/boards/boards.component.html | 6 ++++- src/app/features/boards/boards.component.ts | 13 ++++++++- src/app/features/boards/boards.model.ts | 4 +++ .../components/_overwrite-material.scss | 1 + 9 files changed, 69 insertions(+), 8 deletions(-) diff --git a/src/app/features/boards/board-task-list/board-task-list.component.html b/src/app/features/boards/board-task-list/board-task-list.component.html index 4fc8d0c4e9..1f4dd0440f 100644 --- a/src/app/features/boards/board-task-list/board-task-list.component.html +++ b/src/app/features/boards/board-task-list/board-task-list.component.html @@ -1,6 +1,10 @@ + +
@for (task of tasks(); track task.id) { (); panelCfg = input.required(); + fieldsToRemove = input.required(); store = inject(Store); + taskService = inject(TaskService); allTasks$ = this.store.select(selectAllTasks); allTasks = toSignal(this.allTasks$, { @@ -51,4 +54,22 @@ export class BoardTaskListComponent { }); }); protected readonly T = T; + + drop(ev: CdkDragDrop): void { + const panelCfg = ev.container.data; + const task = ev.item.data; + const fieldsToRemove = this.fieldsToRemove(); + let newTagIds: string[] = []; + if (fieldsToRemove.tagIds?.length) { + newTagIds = task.tagIds.filter((tagId) => !fieldsToRemove.tagIds!.includes(tagId)); + } + if (panelCfg.tagIds) { + newTagIds = newTagIds.concat(panelCfg.tagIds); + } + + this.taskService.updateTags(task, newTagIds); + // const allTasks = this.tasks(); + + console.log(ev, panelCfg, task); + } } diff --git a/src/app/features/boards/board/board.component.html b/src/app/features/boards/board/board.component.html index 1e6e730890..9eac6a745d 100644 --- a/src/app/features/boards/board/board.component.html +++ b/src/app/features/boards/board/board.component.html @@ -6,6 +6,9 @@ more_vert - +
} diff --git a/src/app/features/boards/board/board.component.ts b/src/app/features/boards/board/board.component.ts index 7bf5ad1f24..593e6690e1 100644 --- a/src/app/features/boards/board/board.component.ts +++ b/src/app/features/boards/board/board.component.ts @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { ChangeDetectionStrategy, Component, input } from '@angular/core'; -import { BoardCfg } from '../boards.model'; +import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core'; +import { BoardCfg, BoarFieldsToRemove } from '../boards.model'; import { BoardTaskListComponent } from '../board-task-list/board-task-list.component'; import { MatIconButton } from '@angular/material/button'; import { MatIcon } from '@angular/material/icon'; @@ -19,4 +19,15 @@ import { MatIcon } from '@angular/material/icon'; }) export class BoardComponent { boardCfg = input.required(); + fieldsToRemove = computed(() => { + const tagIdsToRemove: string[] = []; + this.boardCfg().panels.forEach((panel) => { + if (panel.tagIds) { + tagIdsToRemove.push(...panel.tagIds); + } + }); + return { + tagIds: tagIdsToRemove, + }; + }); } diff --git a/src/app/features/boards/boards.component.html b/src/app/features/boards/boards.component.html index 24ef2ee9d8..6e655c5806 100644 --- a/src/app/features/boards/boards.component.html +++ b/src/app/features/boards/boards.component.html @@ -1,10 +1,14 @@ @for (board of boards(); track board.id) { - + } diff --git a/src/app/features/boards/boards.component.ts b/src/app/features/boards/boards.component.ts index 3a5de5d6fe..322acf9cb6 100644 --- a/src/app/features/boards/boards.component.ts +++ b/src/app/features/boards/boards.component.ts @@ -5,11 +5,22 @@ import { T } from '../../t.const'; import { MatIcon } from '@angular/material/icon'; import { DEFAULT_BOARDS } from './boards.const'; import { BoardComponent } from './board/board.component'; +import { CdkScrollable } from '@angular/cdk/overlay'; +import { CdkDropListGroup } from '@angular/cdk/drag-drop'; @Component({ selector: 'boards', standalone: true, - imports: [MatTabGroup, MatTab, MatIcon, MatTabContent, MatTabLabel, BoardComponent], + imports: [ + MatTabGroup, + MatTab, + MatIcon, + MatTabContent, + MatTabLabel, + BoardComponent, + CdkScrollable, + CdkDropListGroup, + ], templateUrl: './boards.component.html', styleUrl: './boards.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/src/app/features/boards/boards.model.ts b/src/app/features/boards/boards.model.ts index 60df67ac7d..1ccf045718 100644 --- a/src/app/features/boards/boards.model.ts +++ b/src/app/features/boards/boards.model.ts @@ -5,6 +5,10 @@ export interface BoardSrcCfg { filterTaskState?: number[]; } +export interface BoarFieldsToRemove { + tagIds?: string[]; +} + export interface BoardPanelCfg extends BoardSrcCfg { id: string; title: string; diff --git a/src/styles/components/_overwrite-material.scss b/src/styles/components/_overwrite-material.scss index 4a3ae76d8d..4f4b6ec843 100644 --- a/src/styles/components/_overwrite-material.scss +++ b/src/styles/components/_overwrite-material.scss @@ -205,6 +205,7 @@ mat-icon.mat-icon[svgicon] { .cdk-drop-list-receiving { outline: 1px dashed $c-primary; + border-color: $c-primary; border-radius: 6px; cursor: grabbing; //border: 2px solid green;