diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 45a0686..aa96684 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,4 +1,4 @@ -import { LOCATION_INITIALIZED, registerLocaleData } from "@angular/common"; +import { DatePipe, LOCATION_INITIALIZED, registerLocaleData } from "@angular/common"; import { HttpClient, HttpClientModule } from "@angular/common/http"; import localeFr from "@angular/common/locales/fr"; import { APP_INITIALIZER, Injector, LOCALE_ID, NgModule } from "@angular/core"; @@ -157,6 +157,7 @@ export function appInitializerFactory( AuthService, AuthGuard, CommitsService, + DatePipe, JsonManagerService, DataService, ToastService, diff --git a/src/app/components/home/assignment-chooser/assignment-chooser.component.html b/src/app/components/home/assignment-chooser/assignment-chooser.component.html index 4ba0594..f21b03c 100644 --- a/src/app/components/home/assignment-chooser/assignment-chooser.component.html +++ b/src/app/components/home/assignment-chooser/assignment-chooser.component.html @@ -1,75 +1,254 @@ -
- - - - - - - - - - - < - {{ row.lastModificationDate | date: 'short' }} - - - - - -
- - - - -
- - - -
- - - -
- - - +
+ {{ 'HOME.ASSIGNMENT-LIST.TITLE' | translate }} + +
+ +
+ +
+ +
+ + {{ 'ASSIGNMENT-CHOOSER.EXPAND-ALL-ROWS' | translate }} + | + {{ 'ASSIGNMENT-CHOOSER.COLLAPSE-ALL-ROWS' | translate }} + + + + + + +

+

+ + + + + + + + + + + + + {{ row.lastModificationDate | date: 'short' }} + + + + + +
+
+
+ {{ getNumberOfRespository(row) }} +
+
+ {{ questionsChecker(row) }} +
+
+
+
+ {{ startDateChecker(row) }} +
+
+ {{ endDateChecker(row) }} +
+
+
+ + + + + +
+ + + + +
+ + + +
+ + + +
+ + + +
+ + -
-

{{ "IMPORT-CONFIRMATION-TITLE" | translate }}

- -
-
- {{ "IMPORT-CONFIRMATION-MESSAGE" | translate }} -
-
- - -
+
+

{{ "IMPORT-CONFIRMATION-TITLE" | translate }}

+ +
+
+ {{ "IMPORT-CONFIRMATION-MESSAGE" | translate }} +
+
+ + +
+{{ 'ASSIGNMENT-CHOOSER.EXPAND-ALL-ROWS' | translate }}/{{ 'ASSIGNMENT-CHOOSER.COLLAPSE-ALL-ROWS' | translate }} {{ 'HOME.CREATE-ASSIGNMENT-TOOLTIP' | translate }} {{ 'HOME.SELECT-ASSIGNMENT-TOOLTIP' | translate }} {{ 'HOME.EDIT-ASSIGNMENT-TOOLTIP' | translate }} diff --git a/src/app/components/home/assignment-chooser/assignment-chooser.component.scss b/src/app/components/home/assignment-chooser/assignment-chooser.component.scss index 9320359..3ba8c00 100644 --- a/src/app/components/home/assignment-chooser/assignment-chooser.component.scss +++ b/src/app/components/home/assignment-chooser/assignment-chooser.component.scss @@ -11,6 +11,10 @@ cubic-bezier(0.57, 0.81, 0.75, 0.74); } +#invisibleColumn { + width: 0; +} + @keyframes move-left-to-right { 0% { transform: translateX(0%); diff --git a/src/app/components/home/assignment-chooser/assignment-chooser.component.ts b/src/app/components/home/assignment-chooser/assignment-chooser.component.ts index e095770..7f7ec4e 100644 --- a/src/app/components/home/assignment-chooser/assignment-chooser.component.ts +++ b/src/app/components/home/assignment-chooser/assignment-chooser.component.ts @@ -13,6 +13,7 @@ import { ConfigurationService } from "@services/configuration.service"; import { DataService } from "@services/data.service"; import { DatabaseService } from "@services/database.service"; import { ToastService } from "@services/toast.service"; +import { DatePipe } from "@angular/common"; @Component({ selector: "assignment-chooser", @@ -20,11 +21,15 @@ import { ToastService } from "@services/toast.service"; styleUrls: ["./assignment-chooser.component.scss"], // changeDetection: ChangeDetectionStrategy.OnPush }) + export class AssignmentChooserComponent implements OnInit { + @ViewChild("assignmentsTable") table: any; @ViewChild("importConfirmation") private importConfirmation: TemplateRef; assignments: Assignment[]; modalRef: NgbModalRef; + private _modeView: String; + constructor( private databaseService: DatabaseService, @@ -36,14 +41,28 @@ export class AssignmentChooserComponent implements OnInit { private toastService: ToastService, public activeModalService: NgbActiveModal, private assignmentsService: AssignmentsService, - private configurationService: ConfigurationService + private configurationService: ConfigurationService, + private datePipe: DatePipe, ) {} ngOnInit(): void { + this.modeView = "detailsMode"; + this.initContentTable(); + } + + ngAfterViewInit(): void { + this.openFirstGroup(); + } + + initContentTable() { this.assignments = []; this.loadAssignments(); } + openFirstGroup() { + setTimeout(() => this.table.groupHeader.toggleExpandGroup(this.table.groupedRows[0]), 100); + } + async loadAssignments() { await this.databaseService .getAllAssignments() @@ -120,4 +139,103 @@ export class AssignmentChooserComponent implements OnInit { this.modalRef = this.modalService.open(this.importConfirmation); return this.modalRef.result; } + + toggleExpandRow(row) { + this.table.rowDetail.toggleExpandRow(row); + } + + + toggleExpandGroup(group) { + this.table.groupHeader.toggleExpandGroup(group); + } + + /** + * Concatenate questionsChecker(), startDateChecker(), endDateChecker() and getNumberOfRespository() be displayed in the template + * @param row + * @returns String + */ + detailDisplayer(row) : String { + let nbRepos = this.getNumberOfRespository(row); + let questions = this.questionsChecker(row); + let startDate = this.startDateChecker(row); + let endDate = this.endDateChecker(row); + var resultAsString = `${nbRepos} ${questions}\n${startDate} ${endDate}`; + return resultAsString; + } + + /** + * Check if there is any questions. If yes, question are convert into a string. If no, display the fact that there is no question. + * @param row + * @returns String + */ + private questionsChecker(row) : String { + let resultAsString = (row.metadata.questions.length !== 0 )? "Question : " + row.metadata.questions.join(", "): ""; + return resultAsString; + } + + /** + * Check if there is a start date and format it. Return a string with dd/mm/yyyy format + * @param row + * @returns String + */ + private startDateChecker(row) : String { + let startDateTranslate = this.translateService.instant("ASSIGNMENT-CHOOSER.ASSIGNMENT-DETAILS.START-DATE"); + let formatDate = this.datePipe.transform(row.metadata.startDate, this.translateService.instant("ASSIGNMENT-CHOOSER.ASSIGNMENT-DETAILS.FORMAT-DATE")); + let resultAsString = (row.metadata.startDate)? startDateTranslate + " : " + formatDate : startDateTranslate + " : " + formatDate; + return resultAsString; + } + + /** + * Check if there is a end date and format it. Return a string with dd/mm/yyyy format + * @param row + * @returns String + */ + private endDateChecker(row) : String { + let endDateTranslate = this.translateService.instant("ASSIGNMENT-CHOOSER.ASSIGNMENT-DETAILS.END-DATE"); + let formatDate = this.datePipe.transform(row.metadata.endDate, this.translateService.instant("ASSIGNMENT-CHOOSER.ASSIGNMENT-DETAILS.FORMAT-DATE")); + let resultAsString = (row.metadata.endDate)? endDateTranslate + " : " + formatDate: endDateTranslate + " : " + formatDate; + return resultAsString; + } + + /** + * Return a String with the number of respository. + * @param row + * @returns String + */ + private getNumberOfRespository(row) : String { + let NumberOfRespositoryTranslate = this.translateService.instant("ASSIGNMENT-CHOOSER.ASSIGNMENT-DETAILS.NUMBER-OF-RESPOSITORY"); + let resultAsString = (row.repositories.length > 0 || row.repositories.length)? NumberOfRespositoryTranslate + " : " + row.repositories.length: ""; + return resultAsString; + } + + get modeView () { + return this._modeView; + } + + set modeView (modeView: String) { + this._modeView = modeView; + } + + switchModeView() { + switch(this.modeView) { + case "groupMode" : + this.modeView = "detailsMode"; + this.initContentTable(); + break; + case "detailsMode" : + this.modeView = "groupMode"; + this.initContentTable(); + this.openFirstGroup(); + break; + case "defaultMode" : + this.modeView = "groupMode"; + this.initContentTable(); + + break; + default : + this.modeView = "groupMode"; + } + } + } + diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html index 0165eda..393b096 100644 --- a/src/app/components/home/home.component.html +++ b/src/app/components/home/home.component.html @@ -1,9 +1,5 @@
-
- {{ 'HOME.ASSIGNMENT-LIST.TITLE' | translate }} -
-
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index e830441..4fbf8fc 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -244,7 +244,17 @@ "COURSE": "Course", "PROGRAM": "Program", "YEAR": "Year", - "LAST-MODIFICATION-DATE": "Last modification date" + "YEAR-NOT-SPECIFIED": "Year not specified", + "LAST-MODIFICATION-DATE": "Last modification date", + "EXPAND-ALL-ROWS": "Expand all", + "COLLAPSE-ALL-ROWS": "Collapse all", + "ASSIGNMENT-DETAILS": { + "START-DATE": "Start date", + "END-DATE": "End date", + "FORMAT-DATE": "MM-dd-YYYY", + "NOT-SPECIFIED": "Not specified", + "NUMBER-OF-RESPOSITORY": "Number of respository" + } }, "EDIT-METADATA": { "QUESTIONS-ERROR-MESSAGE": "Please, provide questions" diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json index 46da9b3..a809fc5 100644 --- a/src/assets/i18n/fr.json +++ b/src/assets/i18n/fr.json @@ -244,7 +244,17 @@ "COURSE": "Cours", "PROGRAM": "Programme", "YEAR": "Année", - "LAST-MODIFICATION-DATE": "Date de la dernière modification" + "LAST-MODIFICATION-DATE": "Date de la dernière modification", + "EXPAND-ALL-ROWS": "Tout afficher", + "COLLAPSE-ALL-ROWS": "Tout cacher", + "ASSIGNMENT-DETAILS": { + "START-DATE": "Date de début", + "END-DATE": "Date de fin", + "FORMAT-DATE": "dd-MM-YYYY", + "NOT-SPECIFIED": "Non spécifié", + "NUMBER-OF-RESPOSITORY": "Nombre de dépôts" + }, + "YEAR-NOT-SPECIFIED": "Année non spécifié" }, "EDIT-METADATA": { "QUESTIONS-ERROR-MESSAGE": "Veuillez indiquer des questions " diff --git a/src/styles.scss b/src/styles.scss index 6dfc2c0..4db867e 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -121,6 +121,10 @@ $sizes: ( margin-left: 4px; } +.hoverable { + cursor: pointer; +} + .sortable-column:hover { cursor: pointer; }