Skip to content

Commit 5101eea

Browse files
HandsomeButterballwalkerkay
HandsomeButterball
authored and
walkerkay
committed
fix(gantt-table): add collapse in gantt table group
1 parent 3b817ba commit 5101eea

File tree

11 files changed

+118
-75
lines changed

11 files changed

+118
-75
lines changed

‎example/src/app/examples/examples.component.html

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,12 @@
44
{{ row.title }}
55
</ng-template>
66
</ngx-gantt-column>
7-
<ng-template #group let-group>
7+
<ngx-gantt-column name="开始时间">
8+
<ng-template #cell let-row>
9+
{{ row.start }}
10+
</ng-template>
11+
</ngx-gantt-column>
12+
<!-- <ng-template #group let-group>
813
{{ group.title }}
9-
</ng-template>
14+
</ng-template> -->
1015
</ngx-gantt>

‎packages/gantt/src/gantt-upper.ts

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@ import {
88
HostBinding,
99
ChangeDetectorRef,
1010
NgZone,
11-
SimpleChanges,
12-
ContentChildren,
13-
QueryList
11+
SimpleChanges
1412
} from '@angular/core';
1513
import {
1614
GanttItem,
@@ -29,7 +27,6 @@ import { GanttDomService, ScrollDirection } from './gantt-dom.service';
2927
import { takeUntil, take } from 'rxjs/operators';
3028
import { GanttDragContainer } from './gantt-drag-container';
3129
import { Subject } from 'rxjs';
32-
import { GanttTableColumnComponent } from './table/column/column.component';
3330

3431
export abstract class GanttUpper {
3532
@Input('items') originItems: GanttItem[] = [];
@@ -58,10 +55,6 @@ export abstract class GanttUpper {
5855

5956
@ContentChild('bar', { static: true }) barTemplate: TemplateRef<any>;
6057

61-
@ContentChild('group', { static: true }) groupTemplate: TemplateRef<any>;
62-
63-
@ContentChildren(GanttTableColumnComponent) columns: QueryList<GanttTableColumnComponent>;
64-
6558
public view: GanttView;
6659

6760
public items: GanttItemInternal[] = [];

‎packages/gantt/src/gantt.scss

Lines changed: 45 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
$gantt-header-height: 50px !default;
1+
$gantt-header-height: 44px !default;
22
$gantt-side-width: 200px !default;
33
$gantt-full-screen-width: 60px !default;
44
$gantt-border-color: #eee !default;
@@ -16,8 +16,11 @@ $gantt-date-secondary-color: #333 !default;
1616
$gantt-date-secondary-font-size: 14px !default;
1717
$gantt-date-secondary-weekend-color: #aaa !default;
1818
$gantt-date-secondary-border-color: #ddd !default;
19-
$gantt-date-week-backdrop-bg: rgba($color: #f3f3f3, $alpha: 0.5) !default;
20-
$gantt-date-today-color: #FF9F73 !default;
19+
$gantt-date-week-backdrop-bg: rgba(
20+
$color: #f3f3f3,
21+
$alpha: 0.5,
22+
) !default;
23+
$gantt-date-today-color: #ff9f73 !default;
2124

2225
// @import './bar/bar.scss';
2326
// @import './dependencies/dependencies.scss';
@@ -27,53 +30,53 @@ $gantt-date-today-color: #FF9F73 !default;
2730
@import './bar/bar.component.scss';
2831

2932
.gantt {
30-
width: 100%;
31-
height: 100%;
32-
background-color: $gantt-bg-color;
33-
position: relative;
34-
overflow: hidden;
35-
display: flex;
36-
37-
.gantt-side {
38-
width: 400px;
39-
border-right: 1px solid #ddd;
40-
}
41-
42-
.gantt-container {
43-
flex: 1;
33+
width: 100%;
34+
height: 100%;
35+
background-color: $gantt-bg-color;
4436
position: relative;
45-
display: flex;
4637
overflow: hidden;
47-
}
38+
display: flex;
4839

49-
.gantt-viewer-container {
50-
width: 100%;
51-
height: calc(100% - 50px);
52-
flex: 1;
53-
position: absolute;
54-
top: 50px;
55-
bottom: 0;
56-
left: 0;
57-
right: 0;
58-
overflow: auto;
59-
60-
.gantt-viewer-groups .gantt-viewer-items {
61-
height: 100%;
40+
.gantt-side {
41+
width: 400px;
42+
border-right: 1px solid #ddd;
6243
}
6344

64-
.gantt-group {
65-
height: 50px;
66-
box-sizing: border-box;
67-
background: #fafafa;
45+
.gantt-container {
46+
flex: 1;
47+
position: relative;
48+
display: flex;
49+
overflow: hidden;
6850
}
6951

70-
.gantt-item {
71-
height: 50px;
72-
border-bottom: 1px solid $gantt-border-color;
73-
box-sizing: border-box;
74-
position: relative;
52+
.gantt-viewer-container {
53+
width: 100%;
54+
height: calc(100% - 44px);
55+
flex: 1;
56+
position: absolute;
57+
top: 44px;
58+
bottom: 0;
59+
left: 0;
60+
right: 0;
61+
overflow: auto;
62+
63+
.gantt-viewer-groups .gantt-viewer-items {
64+
height: 100%;
65+
}
66+
67+
.gantt-group {
68+
height: 44px;
69+
box-sizing: border-box;
70+
background: #fafafa;
71+
}
72+
73+
.gantt-item {
74+
height: 44px;
75+
border-bottom: 1px solid $gantt-border-color;
76+
box-sizing: border-box;
77+
position: relative;
78+
}
7579
}
76-
}
7780
}
7881

7982
// .gantt-container {
@@ -116,7 +119,6 @@ $gantt-date-today-color: #FF9F73 !default;
116119
// }
117120
// }
118121

119-
120122
// .gantt-drag-backdrop {
121123
// position: absolute;
122124
// top: 0;

‎packages/gantt/src/gantt.styles.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export const defaultStyles = {
2-
lineHeight: 50,
2+
lineHeight: 44,
33
barHeight: 25,
44
};
55

‎packages/gantt/src/table/column/column.component.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Component, OnInit, ContentChild, TemplateRef, Input } from '@angular/core';
2+
import { coerceCssPixelValue } from '@angular/cdk/coercion';
23

34
@Component({
45
selector: 'ngx-gantt-column',
@@ -7,6 +8,13 @@ import { Component, OnInit, ContentChild, TemplateRef, Input } from '@angular/co
78
export class GanttTableColumnComponent implements OnInit {
89
@Input() name: string;
910

11+
@Input('width')
12+
set width(width: number | string) {
13+
this.columnWidth = coerceCssPixelValue(width);
14+
}
15+
16+
public columnWidth: string;
17+
1018
@ContentChild('cell', { static: true }) templateRef: TemplateRef<any>;
1119

1220
constructor() {}

‎packages/gantt/src/table/gantt-table.component.scss

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
$gantt-table-color: #333 !default;
2-
$gantt-table-td-height: 50px !default;
3-
$gantt-table-thead-height: 50px !default;
2+
$gantt-table-td-height: 44px !default;
3+
$gantt-table-thead-height: 44px !default;
44
$gantt-table-td-padding: 0 15px !default;
55
$gantt-table-bg: #fff !default;
66
$gantt-table-border-color: #eee !default;
@@ -13,8 +13,7 @@ $gantt-table-border-color: #eee !default;
1313
margin: 0;
1414
padding: 0;
1515
table-layout: fixed;
16-
border-collapse: separate;
17-
border-spacing: 0;
16+
border-collapse: collapse;
1817
color: $gantt-table-color;
1918
background-color: transparent;
2019
thead,

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,18 @@ import {
1111
OnChanges,
1212
OnDestroy,
1313
SimpleChanges,
14-
HostBinding
14+
HostBinding,
15+
ContentChild,
16+
TemplateRef,
17+
ContentChildren,
18+
QueryList
1519
} from '@angular/core';
1620
import { GanttUpper } from '../gantt-upper';
1721
import { GanttRef, GANTT_REF_TOKEN } from '../gantt-ref';
1822
import { GanttLinkDragEvent, GanttDependencyEvent, GanttItemInternal } from '../class';
1923
import { GanttDomService } from '../gantt-dom.service';
2024
import { GanttDragContainer } from '../gantt-drag-container';
25+
import { GanttTableColumnComponent } from './column/column.component';
2126

2227
@Component({
2328
selector: 'ngx-gantt',
@@ -41,6 +46,10 @@ export class GanttTableComponent extends GanttUpper implements GanttRef, OnInit,
4146

4247
@Output() linkClick = new EventEmitter<GanttDependencyEvent>();
4348

49+
@ContentChild('group', { static: true }) groupTemplate: TemplateRef<any>;
50+
51+
@ContentChildren(GanttTableColumnComponent) columns: QueryList<GanttTableColumnComponent>;
52+
4453
@HostBinding('class.gantt-table') ganttTableClass = true;
4554

4655
constructor(

‎packages/gantt/src/table/group/group.component.html

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,26 @@
11
<div class="gantt-table-group-header">
2-
<ng-template
3-
[ngTemplateOutlet]="groupHeader"
4-
[ngTemplateOutletContext]="{ $implicit: group, group: group }"
5-
></ng-template>
2+
<ng-container *ngIf="groupHeader; else default">
3+
<ng-template
4+
[ngTemplateOutlet]="groupHeader"
5+
[ngTemplateOutletContext]="{ $implicit: group, group: group.origin }"
6+
></ng-template>
7+
</ng-container>
8+
<ng-template #default>
9+
<div class="gantt-table-group-header-title" (click)="collapseGroup()">
10+
<!-- todo -->
11+
<span>-></span>
12+
<ng-container *ngIf="groupHeaderTitle; else defaultTitle">
13+
<ng-template
14+
[ngTemplateOutlet]="groupHeaderTitle"
15+
[ngTemplateOutletContext]="{ $implicit: group, group: group.origin }"
16+
></ng-template>
17+
</ng-container>
18+
<ng-template #defaultTitle>
19+
<span class="group-title"> {{ group.title }}</span>
20+
</ng-template>
21+
</div>
22+
</ng-template>
23+
</div>
24+
<div [hidden]="isCollapse">
25+
<ng-content></ng-content>
626
</div>
7-
<ng-content></ng-content>

‎packages/gantt/src/table/group/group.component.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
.gantt-table-group {
22
.gantt-table-group-header {
3-
height: 50px;
3+
height: 44px;
4+
line-height: 44px;
45
background: #fafafa;
56
vertical-align: middle;
67
display: flex;
78
align-items: center;
89
padding: 0 15px;
10+
.gantt-table-group-header-title {
11+
cursor: pointer;
12+
}
913
}
1014
}

‎packages/gantt/src/table/group/group.component.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,17 @@ export class GanttTableGroupComponent implements OnInit {
1010

1111
@Input() groupHeader: TemplateRef<any>;
1212

13+
@Input() groupHeaderTitle: TemplateRef<any>;
14+
1315
@HostBinding('class.gantt-table-group') ganttTableGroupClass = true;
1416

17+
public isCollapse = false;
18+
1519
constructor(public elementRef: ElementRef<HTMLDivElement>) {}
1620

1721
ngOnInit() {}
22+
23+
collapseGroup() {
24+
this.isCollapse = !this.isCollapse;
25+
}
1826
}

0 commit comments

Comments
 (0)