sebastian/timemanager
Template
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects Releases Wiki Activity

issue-25-manage-taskgroups-tree #26

Merged
sebastian merged 5 commits from issue-25-manage-taskgroups-tree into issue-25 2023-10-28 09:51:48 +02:00
Conversation 0 Commits 5 Files Changed 9 +359 -66
9 changed files with 359 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
backend/.idea/workspace.xml
View File

@ -5,7 +5,10 @@
</component>
<component name="ChangeListManager">
<list default="true" id="3a869f59-290a-4ab2-b036-a878ce801bc4" name="Changes" comment="Remove update spamming in console">
<change beforePath="$PROJECT_DIR$/src/main/java/core/services/TaskScheduleService.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/services/TaskScheduleService.java" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../frontend/src/app/app.module.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/app.module.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../frontend/src/app/dashboard/dashboard.component.css" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/dashboard/dashboard.component.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../frontend/src/app/dashboard/dashboard.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/dashboard/dashboard.component.html" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -41,33 +44,33 @@
<option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" />
</component>
<component name="PropertiesComponent"><![CDATA[{
"keyToString": {
"RequestMappingsPanelOrder0": "0",
"RequestMappingsPanelOrder1": "1",
"RequestMappingsPanelWidth0": "75",
"RequestMappingsPanelWidth1": "75",
"RunOnceActivity.OpenProjectViewOnStart": "true",
"RunOnceActivity.ShowReadmeOnStart": "true",
"WebServerToolWindowFactoryState": "false",
"git-widget-placeholder": "issue-11-angular-update",
"last_directory_selection": "D:/Programmierprojekte/TimeManager/backend/src/main/java/core/api/models/timemanager",
"last_opened_file_path": "D:/Programmierprojekte/Dicewars/client",
"node.js.detected.package.eslint": "true",
"node.js.detected.package.tslint": "true",
"node.js.selected.package.eslint": "(autodetect)",
"node.js.selected.package.tslint": "(autodetect)",
"nodejs_package_manager_path": "npm",
"settings.editor.selected.configurable": "swagger",
"ts.external.directory.path": "/snap/intellij-idea-ultimate/459/plugins/javascript-impl/jsLanguageServicesImpl/external",
"vue.rearranger.settings.migration": "true"
<component name="PropertiesComponent">{
&quot;keyToString&quot;: {
&quot;RequestMappingsPanelOrder0&quot;: &quot;0&quot;,
&quot;RequestMappingsPanelOrder1&quot;: &quot;1&quot;,
&quot;RequestMappingsPanelWidth0&quot;: &quot;75&quot;,
&quot;RequestMappingsPanelWidth1&quot;: &quot;75&quot;,
&quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
&quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
&quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
&quot;git-widget-placeholder&quot;: &quot;issue-11-angular-update&quot;,
&quot;last_directory_selection&quot;: &quot;D:/Programmierprojekte/TimeManager/backend/src/main/java/core/api/models/timemanager&quot;,
&quot;last_opened_file_path&quot;: &quot;D:/Programmierprojekte/Dicewars/client&quot;,
&quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
&quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
&quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
&quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
&quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
&quot;settings.editor.selected.configurable&quot;: &quot;swagger&quot;,
&quot;ts.external.directory.path&quot;: &quot;/snap/intellij-idea-ultimate/459/plugins/javascript-impl/jsLanguageServicesImpl/external&quot;,
&quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
},
"keyToStringList": {
"DatabaseDriversLRU": [
"mariadb"
&quot;keyToStringList&quot;: {
&quot;DatabaseDriversLRU&quot;: [
&quot;mariadb&quot;
]
}
}]]></component>
}</component>
<component name="RunManager">
<configuration name="DemoApplication" type="SpringBootApplicationConfigurationType" factoryName="Spring Boot" nameIsGenerated="true">
<module name="demo" />
@ -100,6 +103,8 @@
<workItem from="1698164397550" duration="2329000" />
<workItem from="1698246651541" duration="5106000" />
<workItem from="1698298897364" duration="4242000" />
<workItem from="1698426430946" duration="665000" />
<workItem from="1698474363766" duration="612000" />
</task>
<task id="LOCAL-00001" summary="Structure Taskgroups in Hierarchies">
<option name="closed" value="true" />

76
frontend/src/app/app.module.ts
View File

@ -64,6 +64,8 @@ import { BasicSchedulerComponent } from './schedules/basic-scheduler/basic-sched
import { ScheduleDashboardComponent } from './schedules/schedule-dashboard/schedule-dashboard.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ActiveScheduleComponent } from './dashboard/active-schedule/active-schedule.component';
import {MatTreeModule} from "@angular/material/tree";
import { TaskgroupOverviewComponent } from './dashboard/taskgroup-overview/taskgroup-overview.component';
@NgModule({
declarations: [
AppComponent,
@ -92,43 +94,45 @@ import { ActiveScheduleComponent } from './dashboard/active-schedule/active-sche
BasicSchedulerComponent,
ScheduleDashboardComponent,
DashboardComponent,
ActiveScheduleComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ApiModule,
HttpClientModule,
BrowserAnimationsModule,
MatToolbarModule,
MatButtonModule,
MatIconModule,
MatDialogModule,
MatFormFieldModule,
MatInputModule,
MatProgressSpinnerModule,
MatSnackBarModule,
MatMenuModule,
MatTabsModule,
MatTableModule,
MatCheckboxModule,
MatCardModule,
ReactiveFormsModule,
MatListModule,
MatDatepickerModule,
MatInputModule,
MatDatepickerModule,
MatMomentDateModule,
FormsModule,
MatSlideToggleModule,
MatSortModule,
MatPaginatorModule,
MatProgressBarModule,
MatExpansionModule,
CalendarModule.forRoot({provide: DateAdapter, useFactory: adapterFactory}),
MatSelectModule
ActiveScheduleComponent,
TaskgroupOverviewComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ApiModule,
HttpClientModule,
BrowserAnimationsModule,
MatToolbarModule,
MatButtonModule,
MatIconModule,
MatDialogModule,
MatFormFieldModule,
MatInputModule,
MatProgressSpinnerModule,
MatSnackBarModule,
MatMenuModule,
MatTabsModule,
MatTableModule,
MatCheckboxModule,
MatCardModule,
ReactiveFormsModule,
MatListModule,
MatDatepickerModule,
MatInputModule,
MatDatepickerModule,
MatMomentDateModule,
FormsModule,
MatSlideToggleModule,
MatSortModule,
MatPaginatorModule,
MatProgressBarModule,
MatExpansionModule,
CalendarModule.forRoot({provide: DateAdapter, useFactory: adapterFactory}),
MatSelectModule,
MatTreeModule
],
providers: [
HttpClientModule,
/*

7
frontend/src/app/dashboard/dashboard.component.css
View File

@ -133,3 +133,10 @@
.right-actions {
float: right;
}
.taskgroup-first-child {
background-color: #f3f3f3;
border: 0 solid #000000;
border-top-width: 1px;
border-bottom-width: 1px;
}

8
frontend/src/app/dashboard/dashboard.component.html
View File

@ -39,12 +39,10 @@
</div>
<span class="spacer"></span>
<div class="taskgroup-overview">
<mat-action-list>
<button mat-list-item class="lightBlueBtn">Manage Taskgroups</button>
<button mat-list-item class="taskgroup-btn">Algorithmen II</button>
<button mat-list-item class="taskgroup-last-btn">Computer Grafik</button>
</mat-action-list>
<app-taskgroup-overview></app-taskgroup-overview>
</div>
</div>

2
frontend/src/app/dashboard/dashboard.component.ts
View File

@ -42,4 +42,6 @@ export class DashboardComponent implements OnInit{
this.workedMinutesToday += stopActiveScheduleInfo.workedMinutes;
this.schedules = this.schedules.filter(schedule => schedule.scheduleID !== stopActiveScheduleInfo.schedule.scheduleID);
}
}

148
frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.css Normal file
View File

@ -0,0 +1,148 @@
.container {
margin: 20px auto;
width: 70%;
display: flex;
}
.spacer {
margin-bottom: 2.5%;
}
@media screen and (max-width: 600px) {
.container {
width: 100%;
margin: 20px 10px;
}
}
.today-worked-info {
margin-left: 20px;
background-color: #e1e1e1;
padding-right: 5px;
padding-left: 5px;
border-radius: 5px;
}
.red-card {
background-color: #e54c3c;
color: white;
}
.green-card {
background-color: #00bc8c;
color: white;
}
.main-container {
width: 45%;
margin-right: 20px;
}
.btn-link {
text-decoration: underline;
color: white;
margin-left: 20px;
}
.dashboard-heading {
margin-top: 20px;
font-size: 2.5em;
}
.today-worked-info {
font-size: .8em;
}
.lightBlueBtn {
background-color: #3498db;
color: white;
}
.grayBtn {
background-color: #444444;
color: white;
border-radius: 0;
}
::ng-deep .mat-mdc-list-base {
--mdc-list-list-item-label-text-color: white
}
::ng-deep .mat-mdc-list-base .taskgroup-btn, ::ng-deep .mat-mdc-list-base .taskgroup-last-btn {
--mdc-list-list-item-label-text-color: black
}
.taskgroup-overview {
width: 25%;
float: right;
}
.spacer {
flex: 1 1 auto;
}
.taskgroup-btn {
background-color: #f3f3f3;
border: 0 solid #000000;
border-bottom-width: 1px;
}
.taskgroup-last-btn {
background-color: #f3f3f3;
}
.link-no-deco {
text-decoration: none;
color: black;
}
.link-no-deco:hover{
text-decoration: underline;
}
.gray-text {
color: #6e6e6e;
}
.yellowBtn {
background-color: #f39c12;
color: white;
border-radius: 0;
}
.primaryBtn {
border-radius: 0;
}
::ng-deep .mat-mdc-card-header-text {
display: block;
width: 100%;
}
.schedule-del-btn {
margin-top: 10px;
}
.left-actions {
float: left;
}
.right-actions {
float: right;
}
.taskgroup-first-child {
background-color: #f3f3f3;
border: 0 solid #000000;
border-top-width: 1px;
border-bottom-width: 1px;
}
.node-name {
font-style: normal;
font-weight: normal;
text-align: left;
}

21
frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.html Normal file
View File

@ -0,0 +1,21 @@
<mat-action-list style="padding: 0">
<button mat-list-item class="lightBlueBtn">Manage Taskgroups</button>
</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" matTreeNodePaddingIndent="10">
<!-- use a disabled button to provide padding for tree leaf -->
<button mat-icon-button disabled></button>
<button mat-button class="node-name">{{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" matTreeNodePaddingIndent="10">
<button mat-icon-button matTreeNodeToggle
[attr.aria-label]="'Toggle ' + node.name" style="padding-left: 10px">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
<button mat-button class="node-name">{{node.name}}</button>
</mat-tree-node>
</mat-tree>

21
frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.spec.ts Normal file
View File

@ -0,0 +1,21 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TaskgroupOverviewComponent } from './taskgroup-overview.component';
describe('TaskgroupOverviewComponent', () => {
let component: TaskgroupOverviewComponent;
let fixture: ComponentFixture<TaskgroupOverviewComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [TaskgroupOverviewComponent]
});
fixture = TestBed.createComponent(TaskgroupOverviewComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

87
frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.ts Normal file
View File

@ -0,0 +1,87 @@
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({
selector: 'app-taskgroup-overview',
templateUrl: './taskgroup-overview.component.html',
styleUrls: ['./taskgroup-overview.component.css']
})
export class TaskgroupOverviewComponent {
private _transformer = (node: TreeNode, level: number) => {
return {
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;
}