feat: support custom fill start or end days #INFR-5800 (#286)

* feat: support custom fill start or end days #INFR-5800 * fix: change fillItemStartOrEndDays to fillDays * fix: fix fillDays * fix: add explain * fix: fix test
worktile · Dec 22, 2022 · c4b12e9 · c4b12e9
1 parent 770731b
commit c4b12e9
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 40 deletions.
diff --git a/example/src/app/gantt-custom-view/custom-day-view.ts b/example/src/app/gantt-custom-view/custom-day-view.ts
@@ -15,7 +15,8 @@ const viewOptions: GanttViewOptions = {
     start: new GanttDate().startOfYear().startOfWeek({ weekStartsOn: 1 }),
     end: new GanttDate().endOfYear().endOfWeek({ weekStartsOn: 1 }),
     addAmount: 1,
-    addUnit: 'month'
+    addUnit: 'month',
+    fillDays: 1
 };
 
 export class GanttViewCustom extends GanttView {

diff --git a/packages/gantt/src/class/item.ts b/packages/gantt/src/class/item.ts
@@ -1,6 +1,5 @@
 import { GanttDate } from '../utils/date';
 import { BehaviorSubject } from 'rxjs';
-import { GanttViewType } from './view-type';
 import { GanttLink, GanttLinkType } from './link';
 
 export interface GanttItemRefs {
@@ -51,15 +50,15 @@ export class GanttItemInternal {
     children: GanttItemInternal[];
     type?: GanttItemType;
     progress?: number;
-    viewType?: GanttViewType;
+    fillDays?: number;
 
     get refs() {
         return this.refs$.getValue();
     }
 
     refs$ = new BehaviorSubject<{ width: number; x: number; y: number }>(null);
 
-    constructor(item: GanttItem, options?: { viewType: GanttViewType }) {
+    constructor(item: GanttItem, options?: { fillDays: number }) {
         this.origin = item;
         this.id = this.origin.id;
         this.links = (this.origin.links || []).map((link) => {
@@ -80,32 +79,26 @@ export class GanttItemInternal {
         this.expanded = this.origin.expanded === undefined ? false : this.origin.expanded;
         this.start = item.start ? new GanttDate(item.start) : null;
         this.end = item.end ? new GanttDate(item.end) : null;
-        this.viewType = options && options.viewType ? options.viewType : GanttViewType.month;
+        //  默认填充 30 天
+        this.fillDays = options?.fillDays || 30;
         this.children = (item.children || []).map((subItem) => {
-            return new GanttItemInternal(subItem, { viewType: this.viewType });
+            return new GanttItemInternal(subItem, { fillDays: this.fillDays });
         });
         this.type = this.origin.type || GanttItemType.bar;
         this.progress = this.origin.progress;
-        // fill one month when start or end is null
+        // fill days when start or end is null
         this.fillItemStartOrEnd(item);
     }
 
     fillItemStartOrEnd(item: GanttItem) {
-        let addInterval: number;
-        switch (this.viewType) {
-            case GanttViewType.day:
-            case GanttViewType.week:
-                addInterval = 0;
-                break;
-            default:
-                addInterval = 30;
-                break;
-        }
-        if (item.start && !item.end) {
-            this.end = new GanttDate(item.start).addDays(addInterval).endOfDay();
-        }
-        if (!item.start && item.end) {
-            this.start = new GanttDate(item.end).addDays(-addInterval).startOfDay();
+        if (this.fillDays > 0) {
+            const fillDays = this.fillDays - 1;
+            if (item.start && !item.end) {
+                this.end = new GanttDate(item.start).addDays(fillDays).endOfDay();
+            }
+            if (!item.start && item.end) {
+                this.start = new GanttDate(item.end).addDays(-fillDays).startOfDay();
+            }
         }
     }
 
@@ -123,7 +116,7 @@ export class GanttItemInternal {
     addChildren(items: GanttItem[]) {
         this.origin.children = items;
         this.children = (items || []).map((subItem) => {
-            return new GanttItemInternal(subItem, { viewType: this.viewType });
+            return new GanttItemInternal(subItem, { fillDays: this.fillDays });
         });
     }
 

diff --git a/packages/gantt/src/class/test/item.spec.ts b/packages/gantt/src/class/test/item.spec.ts
@@ -1,7 +1,6 @@
 import { GanttLinkType } from 'ngx-gantt';
 import { GanttDate } from '../../utils/date';
 import { GanttItem, GanttItemInternal } from '../item';
-import { GanttViewType } from '../view-type';
 
 describe('GanttItemInternal', () => {
     let ganttItemInternal: GanttItemInternal;
@@ -33,24 +32,19 @@ describe('GanttItemInternal', () => {
     });
 
     it(`should has correct end`, () => {
-        expect(ganttItemInternal.end.getUnixTime()).toBe(new GanttDate('2020-06-20 23:59:59').getUnixTime());
+        expect(ganttItemInternal.end.getUnixTime()).toBe(new GanttDate('2020-06-19 23:59:59').getUnixTime());
 
-        ganttItem.end = null;
-        ganttItem.start = new GanttDate('2020-05-21 12:34:35').getUnixTime();
-        ganttItemInternal = new GanttItemInternal(ganttItem);
-        expect(ganttItemInternal.end.getUnixTime()).toBe(new GanttDate('2020-06-20 23:59:59').getUnixTime());
-
-        ganttItemInternal = new GanttItemInternal(ganttItem, { viewType: GanttViewType.day });
+        ganttItemInternal = new GanttItemInternal(ganttItem, { fillDays: 1 });
         expect(ganttItemInternal.end.getUnixTime()).toBe(new GanttDate('2020-05-21 23:59:59').getUnixTime());
     });
 
     it(`should has correct start`, () => {
         ganttItem.start = null;
         ganttItem.end = new GanttDate('2020-05-21 12:34:35').getUnixTime();
         ganttItemInternal = new GanttItemInternal(ganttItem);
-        expect(ganttItemInternal.start.getUnixTime()).toBe(new GanttDate('2020-04-21 00:00:00').getUnixTime());
+        expect(ganttItemInternal.start.getUnixTime()).toBe(new GanttDate('2020-04-22 00:00:00').getUnixTime());
 
-        ganttItemInternal = new GanttItemInternal(ganttItem, { viewType: GanttViewType.day });
+        ganttItemInternal = new GanttItemInternal(ganttItem, { fillDays: 1 });
         expect(ganttItemInternal.start.getUnixTime()).toBe(new GanttDate('2020-05-21 00:00:00').getUnixTime());
     });
 

diff --git a/packages/gantt/src/gantt-upper.ts b/packages/gantt/src/gantt-upper.ts
@@ -204,13 +204,13 @@ export abstract class GanttUpper implements OnChanges, OnInit, OnDestroy {
             this.originItems.forEach((origin) => {
                 const group = this.groupsMap[origin.group_id];
                 if (group) {
-                    const item = new GanttItemInternal(origin, { viewType: this.viewType });
+                    const item = new GanttItemInternal(origin, { fillDays: this.view.options?.fillDays });
                     group.items.push(item);
                 }
             });
         } else {
             this.originItems.forEach((origin) => {
-                const item = new GanttItemInternal(origin, { viewType: this.viewType });
+                const item = new GanttItemInternal(origin, { fillDays: this.view.options?.fillDays });
                 this.items.push(item);
             });
         }

diff --git a/packages/gantt/src/views/day.ts b/packages/gantt/src/views/day.ts
@@ -8,7 +8,8 @@ const viewOptions: GanttViewOptions = {
     start: new GanttDate().startOfYear().startOfWeek({ weekStartsOn: 1 }),
     end: new GanttDate().endOfYear().endOfWeek({ weekStartsOn: 1 }),
     addAmount: 1,
-    addUnit: 'month'
+    addUnit: 'month',
+    fillDays: 1
 };
 
 export class GanttViewDay extends GanttView {

diff --git a/packages/gantt/src/views/month.ts b/packages/gantt/src/views/month.ts
@@ -8,7 +8,8 @@ const viewOptions: GanttViewOptions = {
     end: new GanttDate().endOfQuarter().addQuarters(2),
     cellWidth: 280,
     addAmount: 1,
-    addUnit: 'quarter'
+    addUnit: 'quarter',
+    fillDays: 30
 };
 
 export class GanttViewMonth extends GanttView {

diff --git a/packages/gantt/src/views/quarter.ts b/packages/gantt/src/views/quarter.ts
@@ -11,7 +11,8 @@ const viewOptions: GanttViewOptions = {
     max: new GanttDate().addYears(2).endOfYear(),
     cellWidth: 500,
     addAmount: 1,
-    addUnit: 'year'
+    addUnit: 'year',
+    fillDays: 30
 };
 
 export class GanttViewQuarter extends GanttView {

diff --git a/packages/gantt/src/views/view.ts b/packages/gantt/src/views/view.ts
@@ -22,6 +22,8 @@ export interface GanttViewOptions {
     addAmount?: number;
     addUnit?: GanttDateUtil;
     dateFormat?: GanttDateFormat;
+    // fill days when start or end is null
+    fillDays?: number;
     // custom key and value
     [key: string]: any;
 }

diff --git a/packages/gantt/src/views/week.ts b/packages/gantt/src/views/week.ts
@@ -8,7 +8,8 @@ const viewOptions: GanttViewOptions = {
     start: new GanttDate().startOfYear().startOfWeek({ weekStartsOn: 1 }),
     end: new GanttDate().endOfYear().endOfWeek({ weekStartsOn: 1 }),
     addAmount: 1,
-    addUnit: 'month'
+    addUnit: 'month',
+    fillDays: 1
 };
 
 export class GanttViewWeek extends GanttView {

diff --git a/packages/gantt/src/views/year.ts b/packages/gantt/src/views/year.ts
@@ -9,7 +9,8 @@ const viewOptions: GanttViewOptions = {
     start: new GanttDate().addYears(-2).startOfYear(),
     end: new GanttDate().addYears(2).endOfYear(),
     addAmount: 1,
-    addUnit: 'year'
+    addUnit: 'year',
+    fillDays: 30
 };
 
 export class GanttViewYear extends GanttView {