fix(components): set height after bottom changed #PJM-21216 (#155)

worktile · Dec 4, 2024 · 4c50678 · 4c50678
1 parent 7aac762
commit 4c50678
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 30 deletions.
diff --git a/packages/components/board/entry/entry-base.ts b/packages/components/board/entry/entry-base.ts
@@ -77,7 +77,7 @@ export abstract class ThyBoardEntryBase extends ThyBoardEntryDragDrop {
         );
 
         afterNextRender(() => {
-            if (this.boardEntry.virtualScroll() && this.boardEntry.hasLane()) {
+            if (this.boardEntry.virtualScroll()) {
                 const elementsObserve: Observable<ResizeObserverEntry[]>[] = [
                     this.sharedResizeObserver.observe(this.boardEntry.container(), { box: 'border-box' }).pipe(debounceTime(100))
                 ];

diff --git a/packages/components/board/examples/custom-template/add/add.component.html b/packages/components/board/examples/custom-template/add/add.component.html
@@ -0,0 +1,28 @@
+<div class="card-add-btn py-1 ml-2 mb-1" [class.d-none]="isAdded">
+  <a
+    href="javascript:;"
+    class="link-has-icon link-muted add-btn d-flex align-items-center"
+    [class.d-none]="isAdded"
+    #addWorkItem
+    (click)="goAddStep()"
+    >新建工作项</a
+  >
+</div>
+<div class="card-add-creating" *ngIf="isAdded">
+  <textarea
+    class="form-control"
+    (thyEnter)="create($event)"
+    #workItemTitleInput
+    name="workItemTitle"
+    [(ngModel)]="title"
+    [thyAutofocus]="true"
+    [maxlength]="titleMaxLength"
+  ></textarea>
+
+  <div class="d-flex mt-2">
+    <div class="flex-grow-1 btn-pair-sm">
+      <button thyButton="primary" thySize="sm" [thyLoading]="saving" (click)="create($event)">确定</button>
+      <a thyButton="link-secondary" thySize="sm" (click)="cancel()">取消</a>
+    </div>
+  </div>
+</div>
diff --git a/packages/components/board/examples/custom-template/add/add.component.ts b/packages/components/board/examples/custom-template/add/add.component.ts
@@ -0,0 +1,38 @@
+import { Component, HostBinding, OnInit, input } from '@angular/core';
+import { ThyBoardCard } from '@tethys/pro/board';
+
+interface CardInfo extends ThyBoardCard {
+    title: string;
+}
+
+@Component({
+    selector: 'thy-board-custom-template-add',
+    templateUrl: './add.component.html',
+    host: {
+        class: 'card-add-container'
+    }
+})
+export class ThyBoardCustomTemplateAddComponent implements OnInit {
+    @HostBinding('class.card-add-container--creating') isCreating = false;
+
+    isAdded = false;
+
+    constructor() {}
+
+    ngOnInit() {}
+
+    goAddStep() {
+        this.isAdded = true;
+        this.isCreating=true
+    }
+
+    create(event: Event) {
+        this.isAdded = false;
+        this.isCreating=false
+    }
+
+    cancel() {
+        this.isAdded = false;
+        this.isCreating=false
+    }
+}
diff --git a/packages/components/board/examples/custom-template/custom-template.component.html b/packages/components/board/examples/custom-template/custom-template.component.html
@@ -29,23 +29,11 @@
     </ng-template>
 
     <ng-template #entryTop let-entry="entry" let-lane="lane">
-      <div [style.height.px]="singleBottomHeights[entry._id].top" (click)="clickTop(entry)">
-        栏的顶部《
-        @if (lane) {
-          泳道：{{ lane.name }}；
-        }
-        栏：{{ entry.name }}》
-      </div>
+      <thy-board-custom-template-add></thy-board-custom-template-add>
     </ng-template>
 
     <ng-template #entryBottom let-entry="entry" let-lane="lane">
-      <div [style.height.px]="singleBottomHeights[entry._id].bottom" (click)="clickBottom(entry)">
-        栏的底部《
-        @if (lane) {
-          泳道：{{ lane.name }}；
-        }
-        栏：{{ entry.name }}》
-      </div>
+      <thy-board-custom-template-add></thy-board-custom-template-add>
     </ng-template>
   </thy-board>
 </div>
@@ -88,23 +76,11 @@
     </ng-template>
 
     <ng-template #entryTop let-entry="entry" let-lane="lane">
-      <div [style.height.px]="hasLanesBottomHeights[lane._id + entry._id].top" (click)="clickTop(entry, lane)">
-        栏的顶部《
-        @if (lane) {
-          泳道：{{ lane.name }}；
-        }
-        栏：{{ entry.name }}》
-      </div>
+      <thy-board-custom-template-add></thy-board-custom-template-add>
     </ng-template>
 
     <ng-template #entryBottom let-entry="entry" let-lane="lane">
-      <div [style.height.px]="hasLanesBottomHeights[lane._id + entry._id].bottom" (click)="clickBottom(entry, lane)">
-        栏的底部《
-        @if (lane) {
-          泳道：{{ lane.name }}；
-        }
-        ；栏：{{ entry.name }}》
-      </div>
+      <thy-board-custom-template-add></thy-board-custom-template-add>
     </ng-template>
   </thy-board>
 </div>
diff --git a/packages/components/board/examples/custom-template/custom-template.component.scss b/packages/components/board/examples/custom-template/custom-template.component.scss
@@ -23,3 +23,25 @@
         margin-bottom: 8px;
     }
 }
+
+.card-add-container {
+    display: block;
+    line-height: 1;
+    background: variables.$gray-80;
+    position: sticky;
+    bottom: 0;
+    width: 100%;
+    margin: 0 auto;
+
+    &--creating {
+        width: calc(100% - 16px);
+        position: relative;
+        position: relative;
+        display: block;
+        padding: 12px 12px 6px 12px;
+        border-radius: 2px;
+        background: variables.$white;
+        cursor: pointer;
+        border: solid 1px variables.$gray-200;
+    }
+}
diff --git a/packages/components/board/examples/module.ts b/packages/components/board/examples/module.ts
@@ -8,14 +8,20 @@ import { ThyProBoardVirtualScrollExampleComponent } from './virtual-scroll/virtu
 import { ThyProBoardMultiExampleComponent } from './multi/multi.component';
 import { ThyProBoardDragExampleComponent } from './drag/drag.component';
 import { ThyProBoardScrollLoadExampleComponent } from './scroll-load/scroll-load.component';
+import { ThyIconModule } from 'ngx-tethys/icon';
+import { ThySharedModule } from 'ngx-tethys/shared';
+import { ThyButtonModule } from 'ngx-tethys/button';
+import { ThyBoardCustomTemplateAddComponent } from './custom-template/add/add.component';
+import { FormsModule } from '@angular/forms';
 
 export default {
-    imports: [ThyProBoardModule, CommonModule],
+    imports: [ThyProBoardModule, CommonModule, FormsModule, ThyIconModule, ThySharedModule, ThyButtonModule],
     declarations: [
         ThyProBoardBasicExampleComponent,
         ThyBoardBasicCardComponent,
         ThyProBoardSingleExampleComponent,
         ThyProBoardCustomTemplateExampleComponent,
+        ThyBoardCustomTemplateAddComponent,
         ThyProBoardVirtualScrollExampleComponent,
         ThyProBoardScrollLoadExampleComponent,
         ThyProBoardMultiExampleComponent,