Taskgroup Overview with Action-List

This commit is contained in:
Sebastian 2023-10-28 09:09:00 +02:00
parent 7ee8928849
commit eb197aca52
3 changed files with 99 additions and 8 deletions

View File

@ -140,3 +140,7 @@
border-top-width: 1px; border-top-width: 1px;
border-bottom-width: 1px; border-bottom-width: 1px;
} }
.node-name {
font-style: normal;
}

View File

@ -1,7 +1,21 @@
<mat-action-list> <mat-action-list style="padding: 0">
<button mat-list-item class="lightBlueBtn">Manage Taskgroups</button> <button mat-list-item class="lightBlueBtn">Manage Taskgroups</button>
<button mat-list-item (click)="test()" class="taskgroup-btn">Algorithmen II</button>
<button mat-list-item *ngIf="test_Var" class="taskgroup-btn"><span style="margin-left: 10px">Vorlesungen</span></button>
<button mat-list-item *ngIf="test_Var" class="taskgroup-btn"><span style="margin-left: 10px">Übungen</span></button>
<button mat-list-item class="taskgroup-last-btn" *ngIf="!test_Var">Computer Grafik</button>
</mat-action-list> </mat-action-list>
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" >
<!-- This is the tree node template for leaf nodes -->
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding class="taskgroup-btn">
<!-- use a disabled button to provide padding for tree leaf -->
<button mat-icon-button disabled></button>
<button mat-button>{{node.name}}</button>
</mat-tree-node>
<!-- This is the tree node template for expandable nodes -->
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding class="taskgroup-btn">
<button mat-icon-button matTreeNodeToggle
[attr.aria-label]="'Toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
<button mat-button>{{node.name}}</button>
</mat-tree-node>
</mat-tree>

View File

@ -1,5 +1,55 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import {MatIconModule} from "@angular/material/icon";
import {MatButtonModule} from "@angular/material/button";
import {MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule} from "@angular/material/tree";
import {FlatTreeControl} from "@angular/cdk/tree";
interface TreeNode {
name: string
children?: TreeNode[]
}
const TREE_DATA: TreeNode[] = [
{
name: "KIT",
children: [
{
name: "WS23",
children: [
{
name: "Computergrafik",
children: [{name: "Vorlesungen"}, {name: "Globalübungen"}]
},
{
name: "Softwaretechnik II",
children: [{name: "Vorlesungen"}, {name: "Globalübungen"}]
},
{
name: "Algorithmen II",
children: [{name: "Vorlesungen"}, {name: "Globalübungen"}]
}
]
},
{
name: "SS24",
children: [
{
name: "Interaktive Computergrafik",
children: [{name: "Vorlesungen"}, {name: "Globalübungen"}]
}
]
}
]
}
]
/** Flat node with expandable and level information */
interface ExampleFlatNode {
expandable: boolean;
name: string;
level: number;
}
@Component({ @Component({
selector: 'app-taskgroup-overview', selector: 'app-taskgroup-overview',
templateUrl: './taskgroup-overview.component.html', templateUrl: './taskgroup-overview.component.html',
@ -7,8 +57,31 @@ import { Component } from '@angular/core';
}) })
export class TaskgroupOverviewComponent { export class TaskgroupOverviewComponent {
test_Var: boolean = false; private _transformer = (node: TreeNode, level: number) => {
test() { return {
this.test_Var = !this.test_Var; expandable: !!node.children && node.children.length > 0,
name: node.name,
level: level,
};
};
treeControl = new FlatTreeControl<ExampleFlatNode>(
node => node.level,
node => node.expandable,
);
treeFlattener = new MatTreeFlattener(
this._transformer,
node => node.level,
node => node.expandable,
node => node.children,
);
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
constructor() {
this.dataSource.data = TREE_DATA;
} }
hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
} }