feat: structure adjustment

packages/gantt/src/class/event.ts

@@ -1,12 +1,12 @@
-import { GanttItemInfo } from './item';
+import { GanttItem } from './item';
 
 export class GanttDragEvent {
-    item: GanttItemInfo;
+    item: GanttItem;
 }
 
 export class GanttDependencyDragEvent {
-    source: GanttItemInfo;
-    dependent?: GanttItemInfo;
+    source: GanttItem;
+    dependent?: GanttItem;
 }
 
 export class GanttLoadOnScrollEvent {
@@ -16,6 +16,6 @@ export class GanttLoadOnScrollEvent {
 
 export class GanttDependencyEvent {
   event: MouseEvent;
-  source: GanttItemInfo;
-  dependent: GanttItemInfo;
+  source: GanttItem;
+  dependent: GanttItem;
 }

packages/gantt/src/class/group.ts

@@ -2,14 +2,14 @@
 import { GanttItemInternal } from './item';
 import { GanttOptions, getGroupHeight } from '../gantt.options';
 
-export interface GanttGroupInfo {
-    _id: string;
-    [key: string]: any;
+export interface GanttGroup<T = unknown> {
+    id: string;
+    origin?: T;
 }
 
 export class GanttGroupInternal {
-    _id: string;
-    origin: GanttGroupInfo;
+    id: string;
+    origin: GanttGroup;
     items: GanttItemInternal[][];
     refs?: {
         x: number;
@@ -21,8 +21,8 @@ export class GanttGroupInternal {
         };
     };
 
-    constructor(group: GanttGroupInfo, private previous: GanttGroupInternal, private options: GanttOptions) {
-        this._id = group._id;
+    constructor(group: GanttGroup, private previous: GanttGroupInternal, private options: GanttOptions) {
+        this.id = group.id;
         this.origin = group;
         this.items = [[]];
     }

packages/gantt/src/class/item.ts

@@ -8,31 +8,34 @@ interface GroupPositions {
     y: number;
 }
 
-export interface GanttItemInfo {
-    _id: string;
-    start: number;
-    end: number;
-    group_id: string;
-    dependencies?: string[];
-    children?: GanttItemInfo[];
-    [key: string]: any;
+export interface GanttItem<T = unknown> {
+    id: string;
+    start?: number;
+    end?: number;
+    group_id?: string;
+    links: string[];
+    color?: string;
+    draggable?: boolean;
+    linkable?: boolean;
+    children?: GanttItem[];
+    origin?: T;
 }
 
 export class GanttItemInternal {
-    _id: string;
+    id: string;
     start: GanttDate;
     end: GanttDate;
-    dependencies: string[];
-    origin: GanttItemInfo;
+    links: string[];
+    origin: GanttItem;
     refs$ = new BehaviorSubject<{ width: number; x?: number; y?: number }>(null);
     get refs() {
         return this.refs$.getValue();
     }
 
-    constructor(item: GanttItemInfo, private view: GanttView, private options: GanttOptions) {
+    constructor(item: GanttItem, private view: GanttView, private options: GanttOptions) {
         this.origin = item;
-        this._id = this.origin._id;
-        this.dependencies = this.origin.dependencies || [];
+        this.id = this.origin.id;
+        this.links = this.origin.links || [];
         this.start = new GanttDate(item.start);
         this.end = new GanttDate(item.end);
     }
@@ -68,14 +71,4 @@ export class GanttItemInternal {
         this.origin.start = this.start.getUnixTime();
         this.origin.end = this.end.getUnixTime();
     }
-
-    public addDependency(dependencyId: string) {
-        this.dependencies = [...this.dependencies, dependencyId];
-        this.origin.dependencies = this.dependencies;
-    }
-
-    public deleteDependency(dependencyId: string) {
-        this.dependencies = this.dependencies.filter((id) => id !== dependencyId);
-        this.origin.dependencies = this.dependencies;
-    }
 }

packages/gantt/src/example.html

@@ -1,12 +1,11 @@
-<ngx-gantt items="" groups="" mode="table | flat">
-  <ng-template ngxGanttColumnsContainer>
-    <gantt-column title=""></gantt-column>
-    <gantt-column title=""></gantt-column>
-    <gantt-column title=""></gantt-column>
+<ngx-gantt>
+  <ng-template #columns>
+    <ngx-gantt-column title="">
+      <ng-template #cell></ng-template>
+    </ngx-gantt-column>
   </ng-template>
-  <ng-template ngxGanttGroupTemplate></ng-template>
-  <ng-template ngxGanttItemTemplate></ng-template>
+  <ng-template #group let-group="group"></ng-template>
+  <ng-template #bar let-item="item"></ng-template>
 </ngx-gantt>
 
-<ngx-gantt></ngx-gantt>
 <ngx-gantt-flat></ngx-gantt-flat>

packages/gantt/src/flat/gantt-flat.component.ts

@@ -1,10 +1,22 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
+import { GANTT_REF_TOKEN } from '../gantt-ref';
 
 @Component({
-    selector: 'gantt-flat',
+    selector: 'ngx-gantt-flat',
     templateUrl: './gantt-flat.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: GANTT_REF_TOKEN,
+            useExisting: GanttFlatComponent,
+        },
+    ],
 })
 export class GanttFlatComponent implements OnInit {
+    @Input() sideTitle: string;
+
+    @Input() showSide = true;
+
     constructor() {}
 
     ngOnInit() {}

packages/gantt/src/gantt-ref.ts

@@ -5,7 +5,7 @@ import { GanttOptions } from './gantt.options';
 export interface GanttRef {
     element: HTMLElement;
     view: GanttView;
-    options: GanttOptions;
+    styles: GanttOptions;
 }
 
 export const GANTT_REF_TOKEN = new InjectionToken<GanttRef>('GANTT_REF_TOKEN');

packages/gantt/src/gantt-upper.ts

@@ -1,29 +1,27 @@
 import { Input, TemplateRef, Output, EventEmitter, ContentChild, HostBinding, ElementRef } from '@angular/core';
-import { GanttItemInfo, GanttGroupInfo, GanttViewType, GanttLoadOnScrollEvent, GanttDragEvent } from './class';
+import { GanttItem, GanttGroup, GanttViewType, GanttLoadOnScrollEvent, GanttDragEvent } from './class';
 import { GanttOptions } from './gantt.options';
-import { GanttView } from './views/view';
+import { GanttView, GanttViewOptions } from './views/view';
 import { createViewFactory } from './views/factory';
 import { GanttDate } from './utils/date';
 import { Subject } from 'rxjs';
 
 export abstract class GanttUpper {
-    @Input() items: GanttItemInfo[] = [];
+    @Input() items: GanttItem[] = [];
 
-    @Input() groups: GanttGroupInfo[] = [];
+    @Input() groups: GanttGroup[] = [];
 
     @Input() viewType: GanttViewType = GanttViewType.month;
 
-    @Input() showSide = true;
-
-    @Input() sideTitle: string | TemplateRef<any>;
-
     @Input() start: number;
 
     @Input() end: number;
 
     @Input() draggable: boolean;
 
-    @Input() options: GanttOptions;
+    @Input() styles: GanttOptions;
+
+    @Input() viewOptions: GanttViewOptions;
 
     @Input() disabledLoadOnScroll: boolean;
 
@@ -61,7 +59,7 @@ export abstract class GanttUpper {
 
     private createView() {
         const viewDate = this.getViewDate();
-        this.view = createViewFactory(this.viewType, viewDate.start, viewDate.end, this.options);
+        this.view = createViewFactory(this.viewType, viewDate.start, viewDate.end, this.styles);
     }
 
     private getViewDate() {

packages/gantt/src/gantt.module.ts

@@ -1,22 +1,22 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { GanttComponent } from './gantt.component';
 import { GanttCalendarComponent } from './calendar/calendar.component';
 import { GanttTableComponent } from './table/gantt-table.component';
 import { GanttContainerComponent } from './layout/gantt-container.component';
 import { GanttSideComponent } from './layout/gantt-side.component';
 import { GanttFlatComponent } from './flat/gantt-flat.component';
+import { GanttBarComponent } from './bar/bar.component';
 
 @NgModule({
     imports: [CommonModule],
-    exports: [GanttComponent],
+    exports: [GanttTableComponent, GanttFlatComponent],
     declarations: [
-        GanttComponent,
         GanttTableComponent,
         GanttFlatComponent,
         GanttSideComponent,
         GanttContainerComponent,
         GanttCalendarComponent,
+        GanttBarComponent,
     ],
     providers: [],
 })

packages/gantt/src/mocks.ts

@@ -1,8 +1,8 @@
 import * as moment from 'moment';
-import { GanttGroupInfo } from './class/group';
-import { GanttItemInfo } from './class/item';
+import { GanttGroup } from './class/group';
+import { GanttItem } from './class/item';
 
-export const mockGroups: GanttGroupInfo[] = [
+export const mockGroups: GanttGroup[] = [
     {
         _id: '00001',
         title: 'Project 1'
@@ -25,7 +25,7 @@ export const mockGroups: GanttGroupInfo[] = [
     }
 ];
 
-export const mockItems: GanttItemInfo[] = [
+export const mockItems: GanttItem[] = [
     {
         _id: 'item-0101',
         title: 'VERSION 0101',

packages/gantt/src/public-api.ts

@@ -3,4 +3,5 @@
  */
 
 export * from './gantt.module';
-export * from './gantt.component';
+export * from './table/gantt-table.component';
+export * from './flat/gantt-flat.component';

packages/gantt/src/table/gantt-table.component.html

@@ -1,4 +1,9 @@
 <gantt-side></gantt-side>
 <gantt-container>
   <gantt-calendar-overlay *ngIf="view"></gantt-calendar-overlay>
+  <div class="gantt-items-container">
+    <div class="gantt-item">
+      <gantt-bar></gantt-bar>
+    </div>
+  </div>
 </gantt-container>

packages/gantt/src/table/gantt-table.component.ts

@@ -13,7 +13,7 @@ import { GanttRef, GANTT_REF_TOKEN } from '../gantt-ref';
 import { GanttDependencyDragEvent, GanttDependencyEvent } from '../class';
 
 @Component({
-    selector: 'gantt-table',
+    selector: 'ngx-gantt',
     templateUrl: './gantt-table.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
@@ -24,15 +24,17 @@ import { GanttDependencyDragEvent, GanttDependencyEvent } from '../class';
     ],
 })
 export class GanttTableComponent extends GanttUpper implements GanttRef, OnInit {
-    @Input() dependable: boolean;
+    @Input() linkable: boolean;
 
-    @Output() dependencyDragStarted = new EventEmitter<GanttDependencyDragEvent>();
+    @Output() linkDragStarted = new EventEmitter<GanttDependencyDragEvent>();
 
-    @Output() dependencyDragEnded = new EventEmitter<GanttDependencyDragEvent>();
+    @Output() linkDragEnded = new EventEmitter<GanttDependencyDragEvent>();
 
     @Output() dependencyClick = new EventEmitter<GanttDependencyEvent>();
 
-    @HostBinding('class.gantt-table') className = true;
+    @HostBinding('class.gantt') ganttClass = true;
+
+    @HostBinding('class.gantt-table') ganttTableClass = true;
 
     constructor(elementRef: ElementRef) {
         super(elementRef);