fix(web): cards move between board columns again
Since the swimlanes, each column's list is stamped from a template declared outside the cdkDropListGroup, and a template only sees the drop groups around where it is declared: every column was on its own and no card could leave its column. The lists of each row are now connected by id, with and without swimlanes. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,9 +1,4 @@
|
||||
import {
|
||||
CdkDrag,
|
||||
CdkDragDrop,
|
||||
CdkDropList,
|
||||
CdkDropListGroup,
|
||||
} from '@angular/cdk/drag-drop';
|
||||
import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
@@ -90,7 +85,6 @@ const NOBODY = '__nobody__';
|
||||
selector: 'ts-board-page',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [
|
||||
CdkDropListGroup,
|
||||
CdkDropList,
|
||||
CdkDrag,
|
||||
FormField,
|
||||
@@ -218,7 +212,7 @@ const NOBODY = '__nobody__';
|
||||
</div>
|
||||
} @else {
|
||||
@if (laneMode() === 'none') {
|
||||
<div class="ts-board" cdkDropListGroup>
|
||||
<div class="ts-board">
|
||||
@for (column of board.columns(); track column.status) {
|
||||
<section
|
||||
class="ts-column"
|
||||
@@ -261,7 +255,7 @@ const NOBODY = '__nobody__';
|
||||
<span class="ts-mono ts-muted">{{ lane.count }}</span>
|
||||
</h3>
|
||||
<!-- Cards move between columns of their own row only. -->
|
||||
<div class="ts-board" cdkDropListGroup>
|
||||
<div class="ts-board">
|
||||
@for (column of lane.columns; track column.status) {
|
||||
<section
|
||||
class="ts-column ts-column--lane"
|
||||
@@ -304,6 +298,7 @@ const NOBODY = '__nobody__';
|
||||
class="ts-column__list"
|
||||
cdkDropList
|
||||
[id]="lane + '|' + column.status"
|
||||
[cdkDropListConnectedTo]="rowLists()[lane] ?? []"
|
||||
[cdkDropListData]="column"
|
||||
[cdkDropListDisabled]="!project.canContribute()"
|
||||
[cdkDropListEnterPredicate]="canEnter"
|
||||
@@ -748,6 +743,21 @@ export class BoardPage {
|
||||
protected statusTone = (status: string) =>
|
||||
statusLook(this.project.workflow(), status).tone;
|
||||
|
||||
/**
|
||||
* The ids of each row's column lists, by row ('' without swimlanes): a card
|
||||
* moves between the columns of its own row. Connected by id because the
|
||||
* lists are stamped from a template, and a template only sees the drop
|
||||
* groups around where it is declared, not where it is placed.
|
||||
*/
|
||||
protected readonly rowLists = computed(() => {
|
||||
const statuses = this.board.columns().map((c) => c.status);
|
||||
const rows =
|
||||
this.laneMode() === 'none' ? [''] : this.lanes().map((l) => l.key);
|
||||
return Object.fromEntries(
|
||||
rows.map((row) => [row, statuses.map((status) => `${row}|${status}`)]),
|
||||
);
|
||||
});
|
||||
|
||||
/** Columns a dragged ticket can enter: its allowed transitions. */
|
||||
protected readonly canEnter = (
|
||||
drag: CdkDrag<IssueSummary>,
|
||||
|
||||
Reference in New Issue
Block a user