fix(components): fix bottomTemplate position and droppable when entry…

… is empty #TINFR-1083
worktile · Nov 28, 2024 · d2f6745 · d2f6745
1 parent 83636e3
commit d2f6745
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 19 deletions.
diff --git a/packages/components/board/entry/entry-base.ts b/packages/components/board/entry/entry-base.ts
@@ -105,9 +105,12 @@ export abstract class ThyBoardEntryBase extends ThyBoardEntryDragDrop {
         const virtualScroll = this.boardEntry.virtualScroll();
         const containerHeight = this.boardEntry.container()?.clientHeight;
         const laneHeight = this.boardEntry.laneHeight();
+        const draggingCard = this.boardEntry.draggingCard();
 
-        if (this.boardEntry.hasLane()) {
-            if (virtualScroll) {
+        if (virtualScroll) {
+            if (draggingCard) {
+                this.entryBodyHeight = Math.min(laneHeight, containerHeight);
+            } else {
                 const realHeight = this._getRealHeight();
                 this.entryRealHeight.set(realHeight);
                 if (this.entryVirtualScroll()) {
@@ -116,12 +119,12 @@ export abstract class ThyBoardEntryBase extends ThyBoardEntryDragDrop {
                     this.entryBodyHeight = containerHeight;
                 }
                 this.entryDroppableZonesHeight = Math.min(laneHeight, containerHeight);
-            } else {
-                this.entryBodyHeight = containerHeight;
-                this.entryDroppableZonesHeight = Math.min(this.elementRef.nativeElement.parentElement.clientHeight, containerHeight);
             }
-            this.changeDetectorRef.markForCheck();
+        } else {
+            this.entryBodyHeight = containerHeight;
+            this.entryDroppableZonesHeight = Math.min(this.elementRef.nativeElement.parentElement.clientHeight, containerHeight);
         }
+        this.changeDetectorRef.markForCheck();
     }
 
     private getCardStatus(card: ThyBoardCard): ThyBoardEntryStatus {

diff --git a/packages/components/board/entry/movable/movable.component.html b/packages/components/board/entry/movable/movable.component.html
@@ -43,7 +43,7 @@
             *cdkVirtualFor="let card of cards(); let i = index; trackBy: trackByFn; last as isLast"
             #card
             [attr.name]="card._id + '-' + i"
-            class="entry-card"
+            class="entry-card-list"
             cdkDropList
             [cdkDropListAutoScrollStep]="5"
             thyDragDrop
@@ -58,6 +58,7 @@
             [cdkDropListEnterPredicate]="dropListEnterPredicate"
           >
             <div
+            class="entry-card"
               cdkDrag
               [cdkDragData]="card"
               [cdkDragDisabled]="
@@ -82,7 +83,7 @@
 
         @for (card of cards(); track card._id) {
           <div
-            class="entry-card"
+            class="entry-card-list"
             cdkDropList
             [cdkDropListAutoScrollStep]="5"
             thyDragDrop
@@ -97,6 +98,7 @@
             [cdkDropListEnterPredicate]="dropListEnterPredicate"
           >
             <div
+            class="entry-card"
               cdkDrag
               [cdkDragData]="card"
               [cdkDragDisabled]="

diff --git a/packages/components/board/entry/sortable/sortable.component.html b/packages/components/board/entry/sortable/sortable.component.html
@@ -17,7 +17,7 @@
           }
         </div>
       }
-      @if (boardEntry.topTemplateRef()) {
+      @if (boardEntry.topTemplateRef() && !boardEntry.draggingCard()) {
         <div #top class="entry-top">
           <ng-template
             [ngTemplateOutlet]="boardEntry!.topTemplateRef()!"
@@ -33,8 +33,7 @@
           [cards]="cards()!"
           [defaultCardSize]="boardEntry.defaultCardSize()"
           (scrolledIndexChange)="scrolledIndexChange($event)"
-          thyFlexItem="auto"
-          [ngClass]="{ 'entry-viewport flex-shrink-0': boardEntry.hasLane() }"
+          [ngClass]="{ 'entry-viewport': boardEntry.hasLane(), 'flex-fill': cards()!.length > 0 }"
         >
           <div
             cdkDropList
@@ -53,9 +52,10 @@
             *cdkVirtualFor="let card of cards(); let i = index; trackBy: trackByFn; last as isLast"
             #card
             [attr.name]="card._id + '-' + i"
-            class="entry-card"
+            class="entry-card-list"
           >
             <div
+              class="entry-card"
               cdkDrag
               [cdkDragData]="card"
               [cdkDragDisabled]="
@@ -91,9 +91,10 @@
             }"
             (cdkDropListDropped)="drop($event)"
             [cdkDropListEnterPredicate]="dropListEnterPredicate"
-            class="entry-card"
+            class="entry-card-list"
           >
             <div
+              class="entry-card"
               cdkDrag
               [cdkDragData]="card"
               [cdkDragDisabled]="
@@ -114,7 +115,26 @@
           </div>
         }
       }
-      @if (boardEntry.bottomTemplateRef()) {
+
+      @if (cards()?.length === 0 && boardEntry.draggingCard()) {
+        <div
+          cdkDropList
+          [cdkDropListAutoScrollStep]="5"
+          thyDragDrop
+          [cdkDropListData]="{
+            entry: boardEntry.entry(),
+            lane: boardEntry.lane(),
+            cards: cards(),
+            status: status(),
+            changeDetectorRef: changeDetectorRef
+          }"
+          (cdkDropListDropped)="drop($event)"
+          [cdkDropListEnterPredicate]="dropListEnterPredicate"
+          class="entry-card-list entry-empty"
+        ></div>
+      }
+
+      @if (boardEntry.bottomTemplateRef() && !boardEntry.draggingCard()) {
         <div #bottom class="entry-bottom">
           <ng-template
             [ngTemplateOutlet]="boardEntry.bottomTemplateRef()!"

diff --git a/packages/components/board/examples/custom-template/custom-template.component.html b/packages/components/board/examples/custom-template/custom-template.component.html
@@ -8,6 +8,9 @@
     [thyVirtualScroll]="true"
     [thyAllLanesExpanded]="false"
     [thyEntryCollapsible]="true"
+    [thySortable]="'all'"
+    [thyCardDropEnterPredicate]="thyDropEnterPredicate"
+    [thyCardDropAction]="thyDropAction"
   >
     <ng-template #header let-entry="">
       @if (entry) {
@@ -56,6 +59,9 @@
     [thyShowLane]="true"
     [thyVirtualScroll]="true"
     [thyEntryCollapsible]="true"
+    [thySortable]="'all'"
+    [thyCardDropEnterPredicate]="thyDropEnterPredicate"
+    [thyCardDropAction]="thyDropAction"
   >
     <ng-template #lane let-lane="" let-isExpanded="isExpanded">
       @if (isExpanded) {

diff --git a/packages/components/board/examples/custom-template/custom-template.component.ts b/packages/components/board/examples/custom-template/custom-template.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { ThyBoardCard, ThyBoardEntry, ThyBoardLane } from '@tethys/pro/board';
+import { ThyBoardCard, ThyBoardDragPredicateEvent, ThyBoardDropActionEvent, ThyBoardEntry, ThyBoardLane } from '@tethys/pro/board';
 import { entries, items, lanes } from '../mock';
+import { delay, of } from 'rxjs';
 
 interface CardInfo extends ThyBoardCard {
     title: string;
@@ -63,4 +64,15 @@ export class ThyProBoardCustomTemplateExampleComponent implements OnInit {
             this.singleBottomHeights[entry._id].top = this.singleBottomHeights[entry._id].top === 22 ? 100 : 22;
         }
     }
+
+    thyDropEnterPredicate = (event: ThyBoardDragPredicateEvent) => {
+        // console.log(`判断是否可拖动到：`, event);
+        // return event.container.entry._id !== '2';
+        return true;
+    };
+
+    thyDropAction = (event: ThyBoardDropActionEvent) => {
+        console.log(`拖动到：`, event);
+        return of(false).pipe(delay(1000));
+    };
 }
diff --git a/packages/components/board/scroll/entry-virtual-scroll.ts b/packages/components/board/scroll/entry-virtual-scroll.ts
@@ -133,6 +133,10 @@ export class ThyBoardEntryVirtualScrollStrategy extends AutoSizeVirtualScrollStr
     private getCardHeight(cardElement: Element) {
         let marginY =
             parseFloat(window.getComputedStyle(cardElement).marginBottom) + parseFloat(window.getComputedStyle(cardElement).marginTop);
+        if (cardElement.firstChild) {
+            const childStyle = window.getComputedStyle(cardElement.firstElementChild!) || { marginBottom: '0', marginTop: '0' };
+            marginY = marginY + parseFloat(childStyle.marginBottom) + parseFloat(childStyle.marginTop);
+        }
 
         return cardElement.clientHeight + marginY;
     }

diff --git a/packages/components/board/styles/entry.scss b/packages/components/board/styles/entry.scss
@@ -113,11 +113,14 @@
         }
     }
 
-    .entry-card {
-        margin: 8px 8px 0 8px;
-        flex-shrink: 0;
+    .entry-card-list {
+        .entry-card {
+            margin: 8px 8px 0 8px;
+        }
         &:last-child {
-            margin-bottom: 8px;
+            .entry-card {
+                margin-bottom: 8px;
+            }
         }
     }
 
@@ -222,6 +225,23 @@
         height: inherit;
         .entry-body {
             .entry-cards {
+                .entry-empty {
+                    height: 100%;
+                }
+                //#region 当 entry 只有一个卡片时，拖起卡片后，drop-list 撑满以便可再次放下
+                .cdk-drop-list-dragging {
+                    flex: 1;
+                    & + .cdk-drop-list {
+                        flex: none;
+                    }
+                }
+
+                .cdk-drop-list {
+                    & + .cdk-drop-list-dragging {
+                        flex: none;
+                    }
+                }
+                //#endregion
                 .cdk-drag {
                     &:not(:last-child) {
                         margin-bottom: 8px;