Skip to content

refactor: task definition editor refactor #1063

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
b0ink wants to merge 1 commit into
base: 10.0.x
Choose a base branch
from
Draft

refactor: task definition editor refactor #1063

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/app/doubtfire-angular.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ import {UIRouterUpgradeModule} from '@uirouter/angular-hybrid';
import {MatDialogModule as MatDialogModuleNew} from '@angular/material/dialog';
import {AlertService} from 'src/app/common/services/alert.service';
import {AlertComponent} from 'src/app/common/services/alert.service';
import {MatSidenavModule} from '@angular/material/sidenav';

import {setTheme} from 'ngx-bootstrap/utils';

Expand Down Expand Up @@ -613,6 +614,7 @@ const MY_DATE_FORMAT = {
MatDialogModuleNew,
CalendarModule.forRoot({provide: CalendarDateAdapter, useFactory: adapterFactory}),
CodeEditorModule.forRoot(),
MatSidenavModule,
],
})

Expand Down
233 changes: 121 additions & 112 deletions src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,116 +1,129 @@
<div class="flex flex-row gap-8">
<div class="flex-grow flex flex-col gap-8 gap-y-0">
<div class="flex flex-row">
<div>
<h3>Task List</h3>
<p>Plan the list of tasks for students to complete.</p>
</div>
<span class="flex-grow"></span>
<div>
<mat-form-field appearance="outline">
<input
matInput
(keyup)="applyFilter($event.target.value)"
placeholder="Filter"
[(ngModel)]="filter"
/>
</mat-form-field>
</div>
<div class="flex-grow flex flex-col gap-8 gap-y-0">
<div class="flex flex-row">
<div>
<h3>Task List</h3>
<p>Plan the list of tasks for students to complete.</p>
</div>

<table
class="flex-grow f-table selectable"
mat-table
[dataSource]="taskDefinitionSource"
matSort
(matSortChange)="sortData($event)"
>
<ng-container matColumnDef="name" sticky>
<th mat-header-cell *matHeaderCellDef mat-sort-header>Task Name</th>
<td
mat-cell
*matCellDef="let taskDefinition"
(click)="selectTaskDefinition(taskDefinition)"
>
{{ taskDefinition.abbreviation }} {{ taskDefinition.name }}
</td>
</ng-container>
<ng-container matColumnDef="grade" sticky>
<th mat-header-cell *matHeaderCellDef mat-sort-header>Grade</th>
<td
mat-cell
*matCellDef="let taskDefinition"
(click)="selectTaskDefinition(taskDefinition)"
>
{{ taskDefinition.targetGradeText }}
</td>
</ng-container>
<ng-container matColumnDef="startDate" sticky>
<th mat-header-cell *matHeaderCellDef mat-sort-header>Start Date</th>
<td
mat-cell
*matCellDef="let taskDefinition"
(click)="selectTaskDefinition(taskDefinition)"
>
{{ taskDefinition.startDate | date: 'd LLL y' }}
</td>
</ng-container>
<ng-container matColumnDef="targetDate" sticky>
<th mat-header-cell *matHeaderCellDef mat-sort-header>Due Date</th>
<td
mat-cell
*matCellDef="let taskDefinition"
(click)="selectTaskDefinition(taskDefinition)"
>
{{ taskDefinition.targetDate | date: 'd LLL y' }}
</td>
</ng-container>
<ng-container matColumnDef="deadlineDate" sticky>
<th mat-header-cell *matHeaderCellDef mat-sort-header>Deadline</th>
<td
mat-cell
*matCellDef="let taskDefinition"
(click)="selectTaskDefinition(taskDefinition)"
>
{{ taskDefinition.dueDate | date: 'd LLL y' }}
</td>
</ng-container>
<ng-container matColumnDef="taskDefAction" sticky>
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let taskDefinition">
@if (taskDefinitionHasChanges(taskDefinition)) {
<span class="flex-grow"></span>
<div>
<mat-form-field appearance="outline">
<input
matInput
(keyup)="applyFilter($event.target.value)"
placeholder="Filter"
[(ngModel)]="filter"
/>
</mat-form-field>
</div>
</div>
<mat-drawer-container class="h-[1000px]">
<mat-drawer mode="side" opened
><table
class="flex-grow f-table selectable"
mat-table
[dataSource]="taskDefinitionSource"
matSort
(matSortChange)="sortData($event)"
>
<ng-container matColumnDef="name" sticky>
<th mat-header-cell *matHeaderCellDef mat-sort-header>Task Name</th>
<td
mat-cell
*matCellDef="let taskDefinition"
(click)="selectTaskDefinition(taskDefinition)"
>
{{ taskDefinition.abbreviation }} {{ taskDefinition.name }}
</td>
</ng-container>
<ng-container matColumnDef="grade" sticky>
<th mat-header-cell *matHeaderCellDef mat-sort-header>Grade</th>
<td
mat-cell
*matCellDef="let taskDefinition"
(click)="selectTaskDefinition(taskDefinition)"
>
{{ taskDefinition.targetGradeText }}
</td>
</ng-container>
<ng-container matColumnDef="startDate" sticky>
<th mat-header-cell *matHeaderCellDef mat-sort-header>Start Date</th>
<td
mat-cell
*matCellDef="let taskDefinition"
(click)="selectTaskDefinition(taskDefinition)"
>
{{ taskDefinition.startDate | date: 'd LLL y' }}
</td>
</ng-container>
<ng-container matColumnDef="targetDate" sticky>
<th mat-header-cell *matHeaderCellDef mat-sort-header>Due Date</th>
<td
mat-cell
*matCellDef="let taskDefinition"
(click)="selectTaskDefinition(taskDefinition)"
>
{{ taskDefinition.targetDate | date: 'd LLL y' }}
</td>
</ng-container>
<ng-container matColumnDef="deadlineDate" sticky>
<th mat-header-cell *matHeaderCellDef mat-sort-header>Deadline</th>
<td
mat-cell
*matCellDef="let taskDefinition"
(click)="selectTaskDefinition(taskDefinition)"
>
{{ taskDefinition.dueDate | date: 'd LLL y' }}
</td>
</ng-container>
<ng-container matColumnDef="taskDefAction" sticky>
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let taskDefinition">
@if (taskDefinitionHasChanges(taskDefinition)) {
<button
mat-icon-button
aria-label="save task definition"
color="primary"
(click)="saveTaskDefinition(taskDefinition)"
>
<mat-icon>save</mat-icon>
</button>
}
<button
mat-icon-button
aria-label="save task definition"
color="primary"
(click)="saveTaskDefinition(taskDefinition)"
aria-label="delete task definition"
color="warn"
(click)="deleteTaskDefinition(taskDefinition)"
>
<mat-icon>save</mat-icon>
<mat-icon>delete</mat-icon>
</button>
}
<button
mat-icon-button
aria-label="delete task definition"
color="warn"
(click)="deleteTaskDefinition(taskDefinition)"
>
<mat-icon>delete</mat-icon>
</button>
</td>
</ng-container>
</td>
</ng-container>

<ng-container matColumnDef="actions">
<td mat-footer-cell *matFooterCellDef [colSpan]="columns.length"></td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="columns"></tr>
<tr
mat-row
*matRowDef="let row; columns: columns"
[style.background]="selectedTaskDefinition === row ? 'lightblue' : ''"
></tr></table
></mat-drawer>
<mat-drawer-content>
@if (selectedTaskDefinition) {
<f-task-definition-editor
[taskDefinition]="selectedTaskDefinition"
[unit]="unit"
></f-task-definition-editor>
}
</mat-drawer-content>
</mat-drawer-container>

<!-- <div class="flex flex-row gap-8">


<!-- Action footer row -->
<ng-container matColumnDef="actions">
<td mat-footer-cell *matFooterCellDef [colSpan]="columns.length"></td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="columns"></tr>
<tr
mat-row
*matRowDef="let row; columns: columns"
[style.background]="selectedTaskDefinition === row ? 'lightblue' : ''"
></tr>
</table>
<span class="flex items-center">
<mat-paginator class="mat-elevation-z0" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
<span class="flex-grow"></span>
Expand All @@ -132,11 +145,7 @@ <h3>Task List</h3>
<span class="flex-grow"></span>
<button mat-raised-button color="primary" (click)="createTaskDefinition()">Add Task</button>
</span>
@if (selectedTaskDefinition) {
<f-task-definition-editor
[taskDefinition]="selectedTaskDefinition"
[unit]="unit"
></f-task-definition-editor>
}

</div>
</div> -->
</div>
58 changes: 35 additions & 23 deletions src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,41 @@
import { AfterViewInit, Component, Inject, Input, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort, Sort } from '@angular/material/sort';
import { MatTable, MatTableDataSource } from '@angular/material/table';
import { Subscription } from 'rxjs';
import { confirmationModal, csvResultModalService, csvUploadModalService } from 'src/app/ajs-upgraded-providers';
import { TaskDefinition } from 'src/app/api/models/task-definition';
import { Unit } from 'src/app/api/models/unit';
import { TaskDefinitionService } from 'src/app/api/services/task-definition.service';
import { AlertService } from 'src/app/common/services/alert.service';
import { addWeeks } from 'date-fns';
import { FeedbackTemplateService } from 'src/app/api/services/feedback-template.service';
import {AfterViewInit, Component, Inject, Input, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort, Sort} from '@angular/material/sort';
import {MatTable, MatTableDataSource} from '@angular/material/table';
import {Subscription} from 'rxjs';
import {
confirmationModal,
csvResultModalService,
csvUploadModalService,
} from 'src/app/ajs-upgraded-providers';
import {TaskDefinition} from 'src/app/api/models/task-definition';
import {Unit} from 'src/app/api/models/unit';
import {TaskDefinitionService} from 'src/app/api/services/task-definition.service';
import {AlertService} from 'src/app/common/services/alert.service';
import {addWeeks} from 'date-fns';
import {FeedbackTemplateService} from 'src/app/api/services/feedback-template.service';

@Component({
selector: 'f-unit-task-editor',
templateUrl: 'unit-task-editor.component.html',
styleUrls: ['unit-task-editor.component.scss'],
})
export class UnitTaskEditorComponent implements AfterViewInit {
@ViewChild(MatTable, { static: false }) table: MatTable<TaskDefinition>;
@ViewChild(MatSort, { static: false }) sort: MatSort;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
@ViewChild(MatTable, {static: false}) table: MatTable<TaskDefinition>;
@ViewChild(MatSort, {static: false}) sort: MatSort;
@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;

@Input() unit: Unit;

public taskDefinitionSource: MatTableDataSource<TaskDefinition>;
public columns: string[] = ['name', 'grade', 'startDate', 'targetDate', 'deadlineDate', 'taskDefAction'];
public columns: string[] = [
'name',
// 'grade',
// 'startDate',
// 'targetDate',
// 'deadlineDate',
'taskDefAction',
];
public filter: string;
public selectedTaskDefinition: TaskDefinition;

Expand All @@ -34,7 +45,7 @@ export class UnitTaskEditorComponent implements AfterViewInit {
private alerts: AlertService,
@Inject(csvResultModalService) private csvResultModalService: any,
@Inject(csvUploadModalService) private csvUploadModal: any,
@Inject(confirmationModal) private confirmationModal: any
@Inject(confirmationModal) private confirmationModal: any,
) {}

ngAfterViewInit(): void {
Expand All @@ -43,8 +54,9 @@ export class UnitTaskEditorComponent implements AfterViewInit {
this.taskDefinitionSource = new MatTableDataSource<TaskDefinition>(taskDefinitions);
this.taskDefinitionSource.paginator = this.paginator;
this.taskDefinitionSource.sort = this.sort;
this.taskDefinitionSource.filterPredicate = (data: any, filter: string) => data.matches(filter);
})
this.taskDefinitionSource.filterPredicate = (data: any, filter: string) =>
data.matches(filter);
}),
);
}

Expand Down Expand Up @@ -154,31 +166,31 @@ export class UnitTaskEditorComponent implements AfterViewInit {
this.csvUploadModal.show(
'Upload Task Definitions as CSV',
'Test message',
{ file: { name: 'Task Definition CSV Data', type: 'csv' } },
{file: {name: 'Task Definition CSV Data', type: 'csv'}},
this.unit.getTaskDefinitionBatchUploadUrl(),
(response: any) => {
// at least one student?
this.csvResultModalService.show('Task Definition Import Results', response);
if (response.success.length > 0) {
this.unit.refresh();
}
}
},
);
}

public uploadTaskResourcesZip() {
this.csvUploadModal.show(
'Upload Task Sheets and Resources as Zip',
'Test message',
{ file: { name: 'Task Sheets and Resources', type: 'zip' } },
{file: {name: 'Task Sheets and Resources', type: 'zip'}},
this.unit.taskUploadUrl,
(response: any) => {
// at least one student?
this.csvResultModalService.show('Task Sheet and Resources Import Results', response);
if (response.success.length > 0) {
this.unit.refresh();
}
}
},
);
}

Expand Down