feat(gantt): add gantt-quick-time-focus-item

worktile · Dec 3, 2024 · b35fa44 · b35fa44
1 parent 7cb86d0
commit b35fa44
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 25 deletions.
diff --git a/packages/gantt/src/components/main/gantt-main.component.html b/packages/gantt/src/components/main/gantt-main.component.html
@@ -40,23 +40,12 @@
 <div class="gantt-quick-time-focus-container" [style.width.px]="ganttUpper.view.width">
   <div class="gantt-quick-time-focus" [style.width.px]="dom.mainViewport().clientWidth">
     <ng-container *ngFor="let data of viewportItems; let i = index; trackBy: trackBy">
-      <div class="gantt-quick-time-focus-item" [style.height.px]="ganttUpper.styles.lineHeight">
-        <span class="ml-2">
-          @if ((data.refs?.x < dom.mainViewport().leftBoundary ) && data.refs?.width ) {
-          <a class="gantt-quick-time-focus-item-arrow link-secondary" href="javascript:;" (click)="quickTime(data.origin, 'left')">
-            <gantt-icon iconName="arrow-left"></gantt-icon>
-          </a>
-          }
-        </span>
-
-        <span class="mr-2">
-          @if((data.refs?.x + data.refs?.width > dom.mainViewport().rightBoundary) && data.refs.width) {
-          <a class="gantt-quick-time-focus-item-arrow link-secondary" href="javascript:;" (click)="quickTime(data.origin, 'right')">
-            <gantt-icon iconName="arrow-right"></gantt-icon>
-          </a>
-          }
-        </span>
-      </div>
+      <gantt-quick-time-focus-item
+        class="gantt-quick-time-focus-item"
+        [style.height.px]="ganttUpper.styles.lineHeight"
+        [mainViewport]="dom.mainViewport()"
+        [item]="data"
+      ></gantt-quick-time-focus-item>
     </ng-container>
   </div>
 </div>

diff --git a/packages/gantt/src/components/main/gantt-main.component.ts b/packages/gantt/src/components/main/gantt-main.component.ts
@@ -7,8 +7,8 @@ import { NgxGanttBarComponent } from '../bar/bar.component';
 import { NgxGanttRangeComponent } from '../range/range.component';
 import { NgFor, NgIf, NgClass, NgTemplateOutlet } from '@angular/common';
 import { GanttLinksComponent } from '../links/links.component';
-import { GanttIconComponent } from '../icon/icon.component';
 import { GanttDomService } from '../../gantt-dom.service';
+import { GanttQuickTimeFocusItemComponent } from '../quick-time-focus/quick-time-focus.component';
 
 @Component({
     selector: 'gantt-main',
@@ -26,7 +26,7 @@ import { GanttDomService } from '../../gantt-dom.service';
         IsGanttRangeItemPipe,
         IsGanttBarItemPipe,
         IsGanttCustomItemPipe,
-        GanttIconComponent
+        GanttQuickTimeFocusItemComponent
     ]
 })
 export class GanttMainComponent {
@@ -57,9 +57,4 @@ export class GanttMainComponent {
     trackBy(index: number, item: GanttGroupInternal | GanttItemInternal) {
         return item.id || index;
     }
-
-    quickTime(item: GanttItemInternal, type: 'left' | 'right') {
-        const date = type === 'left' ? item.start || item.end : item.end || item.start;
-        this.ganttUpper.scrollToDate(date);
-    }
 }
diff --git a/packages/gantt/src/components/quick-time-focus/quick-time-focus.component.html b/packages/gantt/src/components/quick-time-focus/quick-time-focus.component.html
@@ -0,0 +1,15 @@
+<span class="ml-2">
+  @if ((item.refs?.x < mainViewport().leftBoundary ) && item.refs?.width ) {
+  <a class="gantt-quick-time-focus-item-arrow link-secondary" href="javascript:;" (click)="quickTime(item, 'left')">
+    <gantt-icon iconName="arrow-left"></gantt-icon>
+  </a>
+  }
+</span>
+
+<span class="mr-2">
+  @if((item.refs?.x + item.refs?.width > mainViewport().rightBoundary) && item.refs.width) {
+  <a class="gantt-quick-time-focus-item-arrow link-secondary" href="javascript:;" (click)="quickTime(item, 'right')">
+    <gantt-icon iconName="arrow-right"></gantt-icon>
+  </a>
+  }
+</span>
diff --git a/packages/gantt/src/components/quick-time-focus/quick-time-focus.component.ts b/packages/gantt/src/components/quick-time-focus/quick-time-focus.component.ts
@@ -0,0 +1,25 @@
+import { Component, HostBinding, Inject, Input, input, InputSignal } from '@angular/core';
+import { GanttItemInternal } from '../../class/item';
+import { GANTT_UPPER_TOKEN, GanttUpper } from '../../gantt-upper';
+import { GanttIconComponent } from '../icon/icon.component';
+
+@Component({
+    selector: 'gantt-quick-time-focus-item',
+    templateUrl: './quick-time-focus.component.html',
+    standalone: true,
+    imports: [GanttIconComponent]
+})
+export class GanttQuickTimeFocusItemComponent {
+    @HostBinding('class.gantt-quick-time-focus-item') class = true;
+
+    mainViewport: InputSignal<{ clientWidth?: number; leftBoundary?: number; rightBoundary?: number }> = input();
+
+    @Input() item: GanttItemInternal;
+
+    constructor(@Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper) {}
+
+    quickTime(item: GanttItemInternal, type: 'left' | 'right') {
+        const date = type === 'left' ? item.start || item.end : item.end || item.start;
+        this.ganttUpper.scrollToDate(date);
+    }
+}
diff --git a/packages/gantt/src/gantt.module.ts b/packages/gantt/src/gantt.module.ts
@@ -23,6 +23,7 @@ import { NgxGanttRootComponent } from './root.component';
 import { NgxGanttTableColumnComponent } from './table/gantt-column.component';
 import { NgxGanttTableComponent } from './table/gantt-table.component';
 import { GanttScrollbarComponent } from './components/scrollbar/scrollbar.component';
+import { GanttQuickTimeFocusItemComponent } from './components/quick-time-focus/quick-time-focus.component';
 
 @NgModule({
     imports: [
@@ -47,6 +48,7 @@ import { GanttScrollbarComponent } from './components/scrollbar/scrollbar.compon
         NgxGanttBaselineComponent,
         NgxGanttToolbarComponent,
         GanttScrollbarComponent,
+        GanttQuickTimeFocusItemComponent,
         IsGanttRangeItemPipe,
         IsGanttBarItemPipe,
         IsGanttCustomItemPipe
@@ -63,7 +65,8 @@ import { GanttScrollbarComponent } from './components/scrollbar/scrollbar.compon
         GanttCalendarHeaderComponent,
         GanttCalendarGridComponent,
         GanttDragBackdropComponent,
-        GanttScrollbarComponent
+        GanttScrollbarComponent,
+        GanttQuickTimeFocusItemComponent
     ],
     providers: [
         CdkVirtualScrollViewport,

diff --git a/packages/gantt/src/public-api.ts b/packages/gantt/src/public-api.ts
@@ -25,3 +25,4 @@ export * from './components/calendar/header/calendar-header.component';
 export * from './components/calendar/grid/calendar-grid.component';
 export * from './components/drag-backdrop/drag-backdrop.component';
 export * from './components/scrollbar/scrollbar.component';
+export * from './components/quick-time-focus/quick-time-focus.component';