Julian/assigmnent details and grouping

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,

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%);

src/app/components/home/assignment-chooser/assignment-chooser.component.ts

@@ -13,18 +13,23 @@ 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",
   templateUrl: "./assignment-chooser.component.html",
   styleUrls: ["./assignment-chooser.component.scss"],
   // changeDetection: ChangeDetectionStrategy.OnPush
 })
+
 export class AssignmentChooserComponent implements OnInit {
+  @ViewChild("assignmentsTable") table: any;
   @ViewChild("importConfirmation")
   private importConfirmation: TemplateRef<any>;
   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";
+    }
+  }
+
 }
+

src/app/components/home/home.component.html

@@ -1,9 +1,5 @@
 <div class="page-container d-flex flex-column">
   <div class="m-3 content-wrap" *ngIf="authService.isSignedIn()">
-    <h5 class="mb-3">
-      {{ 'HOME.ASSIGNMENT-LIST.TITLE' | translate }}
-    </h5>
-
     <assignment-chooser></assignment-chooser>
   </div>
   <div *ngIf="!authService.isSignedIn()">

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"

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 "

src/styles.scss

@@ -121,6 +121,10 @@ $sizes: (
   margin-left: 4px;
 }
 
+.hoverable {
+  cursor: pointer;
+}
+
 .sortable-column:hover {
   cursor: pointer;
 }