Skip to content

Commit 31665fc

Browse files
renemadsenrenemadsen
committed
Merge branch 'master' of github.com:masudul-tikweb/eform-angular-frontend
2 parents 7abca54 + c32e09e commit 31665fc

File tree

10 files changed

+435
-67
lines changed

10 files changed

+435
-67
lines changed

‎eform-client/src/app/common/modules/eform-shared/components/eform-tree-select/folder-tree-select.component.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<mat-form-field class="w-100">
2+
<mat-label> {{ selectedNodeName || ('Folder not selected' | translate) }}</mat-label>
3+
<mat-select
4+
[disabled]="disabled"
5+
[value]="selectedNodeId"
6+
[compareWith]="compareById"
7+
panelClass="folder-tree-select-panel"
8+
(openedChange)="onPanelOpened($event)"
9+
[multiple]="false"
10+
>
11+
<mat-select-trigger>
12+
{{ selectedNodeName || ('Folder not selected' | translate) }}
13+
</mat-select-trigger>
14+
15+
<mat-option>
16+
<div class="tree-container" (click)="$event.stopPropagation()">
17+
18+
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
19+
20+
<mat-tree-node
21+
*matTreeNodeDef="let node; when: hasChild"
22+
matTreeNodePadding
23+
class="node-row d-flex flex-row justify-content-between align-items-center gap-12"
24+
[class.selected]="node.id === selectedNodeId"
25+
>
26+
27+
<div (click)="treeControl.toggle(node)"
28+
class="node-label d-flex flex-row align-items-center gap-12"
29+
>
30+
<mat-icon>{{ node.id === selectedNodeId ? 'folder' : 'folder_open' }}</mat-icon>
31+
<span>{{ node.name }}</span>
32+
</div>
33+
<button mat-icon-button matTreeNodeToggle>
34+
<mat-icon>
35+
{{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
36+
</mat-icon>
37+
</button>
38+
</mat-tree-node>
39+
40+
<mat-tree-node
41+
*matTreeNodeDef="let node"
42+
matTreeNodePadding
43+
class="node-row leaf"
44+
[class.selected]="node.id === selectedNodeId"
45+
>
46+
<div
47+
(click)="selectNode(node)"
48+
class="node-label d-flex flex-row align-items-center gap-12"
49+
50+
>
51+
<mat-icon>{{ node.id === selectedNodeId ? 'folder' : 'folder_open' }}</mat-icon>
52+
<span>{{ node.name }}</span>
53+
</div>
54+
55+
</mat-tree-node>
56+
57+
</mat-tree>
58+
59+
</div>
60+
</mat-option>
61+
</mat-select>
62+
</mat-form-field>

‎eform-client/src/app/common/modules/eform-shared/components/eform-tree-select/folder-tree-select.component.scss‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
.tree-container {
2+
max-height: 260px;
3+
overflow-y: auto;
4+
padding: 4px 0;
5+
}
6+
7+
.node-row {
8+
display: flex;
9+
align-items: center;
10+
padding-right: 8px!important;
11+
}
12+
13+
.leaf {
14+
padding-left: 40px !important;
15+
}
16+
17+
.node-label {
18+
cursor: pointer;
19+
width: calc(100% - 16px)!important;
20+
display: flex;
21+
height: 40px;
22+
//padding: var(--28-px, 8px) var(--28-px, 8px) var(--28-px, 8px) var(--832-px, 32px) !important;
23+
padding: var(--28-px, 8px)!important;
24+
align-items: center;
25+
gap: var(--156-px, 6px);
26+
align-self: stretch;
27+
background: transparent !important;
28+
}
29+
30+
.leaf {
31+
.node-label {
32+
padding: var(--28-px, 8px) var(--28-px, 8px) var(--28-px, 8px) var(--832-px, 32px) !important;
33+
}
34+
}
35+
36+
.node-row{
37+
&:hover, &:active {
38+
color: var(--primary);
39+
background: var(--primary-light, #F5FCFC) !important;
40+
transition: color .5s;
41+
}
42+
}
43+
44+
.node-row.selected {
45+
color: var(--primary);
46+
background: var(--primary-light, #F5FCFC) !important;
47+
}
48+
49+
50+
.mdc-menu-surface {
51+
&--open {
52+
display: flex;
53+
width: 130px;
54+
padding: var(--28-px, 8px);
55+
flex-direction: column;
56+
align-items: flex-start;
57+
gap: var(--14-px, 4px);
58+
border-radius: var(--rounded-8, 8px);
59+
border: 1px solid var(--border, #EBEFF2);
60+
background: var(--bg, #FFF);
61+
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10);
62+
}
63+
}
64+
65+
.mat-mdc-option:focus.mdc-list-item, .mat-mdc-option.mat-mdc-option-active.mdc-list-item {
66+
background-color: var(--bg, #FFF);
67+
width: calc(100% - var(--28-px));
68+
}
69+
70+
mat-tree-node.children {
71+
padding-left: 56px !important;
72+
}
73+
74+
.tree-container{
75+
overflow: hidden;
76+
}
77+
78+
mat-tree-node.selected {
79+
color: var(--primary);
80+
background: var(--primary-light, #F5FCFC) !important;
81+
}
82+
83+
84+
85+
::ng-deep .folder-tree-select-panel .mdc-list-item__primary-text {
86+
width: 100% !important;
87+
display: block !important;
88+
padding: 0 !important;
89+
}
90+

‎eform-client/src/app/common/modules/eform-shared/components/eform-tree-select/folder-tree-select.component.ts‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import {Component, Input, Output, EventEmitter, OnChanges, ViewChild} from '@angular/core';
2+
import { FlatTreeControl } from '@angular/cdk/tree';
3+
import { MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule } from '@angular/material/tree';
4+
import { MatFormFieldModule } from '@angular/material/form-field';
5+
import {MatSelect, MatSelectModule} from '@angular/material/select';
6+
import { MatIconModule } from '@angular/material/icon';
7+
import { MatButtonModule } from '@angular/material/button';
8+
import { FolderDto } from 'src/app/common/models';
9+
import {TranslateModule} from '@ngx-translate/core';
10+
import {MtxSelect} from '@ng-matero/extensions/select';
11+
import {ReactiveFormsModule} from '@angular/forms';
12+
13+
interface FlatNode {
14+
expandable: boolean;
15+
name: string;
16+
level: number;
17+
id: number;
18+
microtingUId: number;
19+
parentId?: number;
20+
}
21+
22+
@Component({
23+
selector: 'app-folder-tree-select',
24+
standalone: true,
25+
imports: [
26+
MatFormFieldModule,
27+
MatSelectModule,
28+
MatTreeModule,
29+
MatIconModule,
30+
MatButtonModule,
31+
TranslateModule,
32+
ReactiveFormsModule
33+
],
34+
templateUrl: './folder-tree-select.component.html',
35+
styleUrls: ['./folder-tree-select.component.scss']
36+
})
37+
export class FolderTreeSelectComponent implements OnChanges {
38+
@Input() nodes: FolderDto[] = [];
39+
@Input() selectedNodeId: number | null = null;
40+
@Input() disabled = false;
41+
42+
@Output() nodeSelected = new EventEmitter<FolderDto>();
43+
44+
@ViewChild(MatSelect) matSelect: MatSelect;
45+
46+
selectedNodeName: string = '';
47+
compareById = (a: number, b: number) => a === b;
48+
49+
private transformer = (node: FolderDto, level: number): FlatNode => ({
50+
expandable: !!node.children?.length,
51+
name: node.name,
52+
id: node.id,
53+
microtingUId: node.microtingUId,
54+
parentId: node.parentId,
55+
level
56+
});
57+
58+
treeControl = new FlatTreeControl<FlatNode>(
59+
node => node.level,
60+
node => node.expandable
61+
);
62+
63+
treeFlattener = new MatTreeFlattener(
64+
this.transformer,
65+
node => node.level,
66+
node => node.expandable,
67+
node => node.children
68+
);
69+
70+
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
71+
72+
ngOnChanges() {
73+
this.dataSource.data = this.nodes;
74+
75+
if (this.selectedNodeId != null) {
76+
const flat = this.flatten(this.nodes);
77+
const selected = flat.find(x => x.id === this.selectedNodeId);
78+
this.selectedNodeId = selected.id;
79+
this.selectedNodeName = selected?.name || '';
80+
}
81+
}
82+
83+
hasChild = (_: number, node: FlatNode) => node.expandable;
84+
85+
selectNode(node: FlatNode) {
86+
const folder = this.flatten(this.nodes).find(x => x.id === node.id);
87+
if (!folder) {return;}
88+
89+
this.selectedNodeId = node.id;
90+
this.selectedNodeName = folder.name;
91+
this.nodeSelected.emit(folder);
92+
this.matSelect.close();
93+
}
94+
95+
96+
onPanelOpened(open: boolean) {
97+
if (open) {
98+
this.treeControl.expandAll();
99+
}
100+
}
101+
102+
flatten(array: FolderDto[]): FolderDto[] {
103+
let result: FolderDto[] = [...array];
104+
array.forEach(x => {
105+
if (x.children) {result = [...result, ...this.flatten(x.children)];}
106+
});
107+
return result;
108+
}
109+
}

‎eform-client/src/app/common/modules/eform-shared/components/eform-tree-view-picker/eform-tree-view-picker.component.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@
2626
matTreeNodePadding=""
2727
[ngClass]="{'children': getLevel(node) > 0}">
2828
<div
29-
style="padding-left: 2px;"
3029
[ngClass]="{'folder': !lockSelectedNode, 'no-drop': lockSelectedNode,
3130
'selected-folder': selectedFolderIds.includes(node.id)}"
3231
(click)="selected(node.id)"

‎eform-client/src/app/common/modules/eform-shared/components/eform-tree-view-picker/eform-tree-view-picker.component.scss‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,30 @@ mat-mdc-tree-node.mat-mdc-tree-node {
4242
margin-left: .5rem;
4343
}
4444

45-
.folder:hover {
46-
color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 300);
47-
transition: color .5s;
48-
}
49-
5045
.cursor {
5146
cursor: pointer;
5247
&.no-drop{
5348
cursor: no-drop;
5449
}
5550
}
51+
52+
53+
mat-tree-node.children {
54+
padding-left: 56px !important;
55+
}
56+
mat-tree-node{
57+
display: flex;
58+
height: 40px;
59+
padding: var(--28-px, 8px) var(--28-px, 8px) var(--28-px, 8px) var(--832-px, 32px)!important;
60+
align-items: center;
61+
gap: var(--156-px, 6px);
62+
align-self: stretch;
63+
background: var(--bg)!important;
64+
&:hover, &:active{
65+
color: var(--primary);
66+
background: var(--primary-light, #F5FCFC)!important;
67+
transition: color .5s;
68+
}
69+
//&[aria-expanded="true"]
70+
71+
}

‎eform-client/src/app/common/modules/eform-shared/components/entity-edit-create/entity-edit-create.component.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<eform-new-subheader [title]="title | translate" [forceStaticTitle]="true">
2+
<div class="d-flex flex-row align-items-center gap-12">
23
<button
34
*ngIf="edit"
45
class="btn-primary btn-primary--icon-left"
@@ -24,6 +25,7 @@
2425
>
2526
{{ 'Cancel' | translate }}
2627
</button>
28+
</div>
2729
</eform-new-subheader>
2830

2931
<mat-card>
@@ -48,18 +50,18 @@
4850
type="text">
4951
</mat-form-field>
5052

51-
<div class="d-flex justify-content-end">
53+
<div class="d-flex justify-content-end align-items-center gap-12 mb-4">
5254
<button
5355
id="editEntitySearchImportBtn"
54-
mat-icon-button
56+
class="btn-secondary btn-secondary--icon-rounded-border"
5557
[disabled]="entityGroupEditModel.isLocked && !entityGroupEditModel.isEditable"
5658
(click)="openImportEntityGroup()"
5759
>
5860
<mat-icon>format_list_bulleted</mat-icon>
5961
</button>
6062
<button
6163
id="addSingleEntitySelectableItem"
62-
mat-icon-button
64+
class="btn-secondary btn-secondary--icon-rounded-border"
6365
(click)="addNewEntityItem()"
6466
[disabled]="entityGroupEditModel.isLocked && !entityGroupEditModel.isEditable"
6567
>

0 commit comments

Comments
 (0)