Migrate schedule list to material.

src/scheduler/schedule.module.ts

@@ -3,6 +3,14 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
+import {
+  MdButtonModule,
+  MdDialogModule,
+  MdIconModule,
+  MdInputModule,
+  MdListModule,
+  MdTableModule,
+} from '@angular/material';
 import { HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
 
@@ -16,7 +24,6 @@ import { ScheduleDataSource } from './schedule.dataSource';
 import { ScheduleDeleteModalComponent } from './scheduleDeleteModal.component';
 import { ScheduleEditModalComponent } from './scheduleEditModal.component';
 import { ScheduleFormComponent } from './scheduleForm.component';
-import { ScheduleRowComponent } from './scheduleRow.component';
 import { ScheduleListComponent } from './scheduleList.component';
 import { ScheduleListState } from './schedule.states';
 
@@ -28,6 +35,12 @@ import { ScheduleListState } from './schedule.states';
     RouterModule.forChild([
       ScheduleListState
     ]),
+    MdButtonModule,
+    MdDialogModule,
+    MdIconModule,
+    MdInputModule,
+    MdListModule,
+    MdTableModule,
     NgLoggerModule,
     ToastrModule,
     NgbModule,
@@ -42,7 +55,6 @@ import { ScheduleListState } from './schedule.states';
     ScheduleEditModalComponent,
     ScheduleFormComponent,
     ScheduleListComponent,
-    ScheduleRowComponent
   ],
   entryComponents: [
     ScheduleDeleteModalComponent,

src/scheduler/scheduleList.component.ts

@@ -8,6 +8,8 @@ import { Logger } from '@nsalaun/ng-logger';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
 
+import { ScheduleDataSource } from './schedule.dataSource';
+import { ScheduleDeleteModalComponent } from './scheduleDeleteModal.component';
 import { ScheduleEditModalComponent } from './scheduleEditModal.component';
 import { ScheduleService } from './schedule.service';
 import { Schedule } from './schedule';
@@ -15,41 +17,95 @@ import { Schedule } from './schedule';
 @Component({
   selector: 'schedule-list',
   template: `
-<div class="row">
-  <table class="table table-sm table-striped table-condensed table-hover">
-    <thead>
-      <tr>
-        <th>Date de d&eacute;but</th>
-        <th>Date de fin</th>
-        <th>Jour</th>
-        <th>Fr&eacute;q.</th>
-        <th>Libell&eacute; de l'op&eacute;ration</th>
-        <th>Montant</th>
-        <th>Cat&eacute;gorie</th>
-        <th>Actions</th>
-      </tr>
-    </thead>
-
-    <tbody>
-      <tr>
-        <td colspan="8">
-          <button class="btn btn-success" (click)="add()">
-            Ajouter
+<div class="containerX">
+  <div class="container">
+    <button md-fab color="primary" (click)="add()">
+      <md-icon>add</md-icon>
     </button>
-        </td>
-      </tr>
+  </div>
 
-      <tr *ngFor="let schedule of schedules"
-          [schedule-row]="schedule" (needsReload)="load()">
-      </tr>
-    </tbody>
-  </table>
+  <div class="container">
+    <md-table #table [dataSource]="schedules">
+      <ng-container mdColumnDef="start_date">
+        <md-header-cell *mdHeaderCellDef>Date de d&eacute;but</md-header-cell>
+        <md-cell *mdCellDef="let schedule">
+          {{ schedule.start_date | date: "yyyy-MM-dd" }}
+        </md-cell>
+      </ng-container>
+
+      <ng-container mdColumnDef="stop_date">
+        <md-header-cell *mdHeaderCellDef>Date de fin</md-header-cell>
+        <md-cell *mdCellDef="let schedule">
+          {{ schedule.stop_date | date: "yyyy-MM-dd" }}
+        </md-cell>
+      </ng-container>
+
+      <ng-container mdColumnDef="day">
+        <md-header-cell *mdHeaderCellDef>Jour</md-header-cell>
+        <md-cell *mdCellDef="let schedule">
+          {{ schedule.day }}
+        </md-cell>
+      </ng-container>
+
+      <ng-container mdColumnDef="frequency">
+        <md-header-cell *mdHeaderCellDef>Fr&eacute;q.</md-header-cell>
+        <md-cell *mdCellDef="let schedule">
+          {{ schedule.frequency }}
+        </md-cell>
+      </ng-container>
+
+      <ng-container mdColumnDef="label">
+        <md-header-cell *mdHeaderCellDef>Libell&eacute; de l'op&eacute;ration</md-header-cell>
+        <md-cell *mdCellDef="let schedule">
+          {{ schedule.label }}
+        </md-cell>
+      </ng-container>
+
+      <ng-container mdColumnDef="value">
+        <md-header-cell *mdHeaderCellDef>Montant</md-header-cell>
+        <md-cell *mdCellDef="let schedule">
+          {{ schedule.value | currency: "EUR":true }}
+        </md-cell>
+      </ng-container>
+
+      <ng-container mdColumnDef="category">
+        <md-header-cell *mdHeaderCellDef>Cat&eacute;gorie</md-header-cell>
+        <md-cell *mdCellDef="let schedule">
+          {{ schedule.category }}
+        </md-cell>
+      </ng-container>
+
+      <ng-container mdColumnDef="actions">
+        <md-header-cell *mdHeaderCellDef>Actions</md-header-cell>
+        <md-cell *mdCellDef="let schedule">
+          <!-- Edit operation. -->
+          <button md-mini-fab color="primary" (click)="modify(schedule)">
+            <md-icon>mode_edit</md-icon>
+          </button>
+
+          <!-- Remove operation. -->
+          <button md-mini-fab color="warn" [hidden]="!schedule.id"
+            (click)="confirmDelete(schedule)">
+            <md-icon>delete_forever</md-icon>
+          </button>
+        </md-cell>
+      </ng-container>
+
+      <md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
+      <md-row *mdRowDef="let row; columns: displayedColumns;">
+      </md-row>
+    </md-table>
+  </div>
 </div>
     `
 })
 export class ScheduleListComponent implements OnInit {
-  accountId: number;
-  schedules = [];
+  private accountId: number;
+
+  private displayedColumns: String[] = [
+    'start_date', 'stop_date', 'day', 'frequency',
+    'label', 'value', 'category', 'actions'
+  ];
 
   constructor(
     private toastrService: ToastrService,
@@ -57,6 +113,7 @@ export class ScheduleListComponent implements OnInit {
     private logger: Logger,
     private ngbModal: NgbModal,
     private route: ActivatedRoute,
+    private schedules: ScheduleDataSource,
   ) {}
 
   ngOnInit() {
@@ -66,13 +123,23 @@ export class ScheduleListComponent implements OnInit {
     this.load();
   }
 
+  load() {
+    this.logger.log("Loading schedules for accountId", this.accountId);
+    if(!this.accountId) {
+      return;
+    }
+
+    this.schedules.load(this.accountId);
+  }
+
   /*
    * Add a new operation at the beginning of th array.
    */
   add() {
-    var schedule = new Schedule();
-    schedule.account_id = this.accountId;
+    this.modify(new Schedule());
+  };
 
+  modify(schedule: Schedule) {
     const modal = this.ngbModal.open(ScheduleEditModalComponent, {
       size: 'lg'
     });
@@ -83,24 +150,8 @@ export class ScheduleListComponent implements OnInit {
       this.save(schedule);
     }, (reason) => function(reason) {
     });
-  };
-
-  load() {
-    this.logger.log("Loading schedules for accountId", this.accountId);
-    if(!this.accountId) {
-      return;
   }
 
-    this.scheduleService.query(this.accountId)
-      .subscribe((schedules: Schedule[]) => {
-        this.logger.log("Schedules loaded.", schedules);
-        this.schedules = schedules;
-      }, (reason) => {
-        this.logger.log("Got error", reason);
-      }
-    );
-  };
-
   save(schedule: Schedule) {
     return this.scheduleService.create(schedule).subscribe((schedule: Schedule) => {
       this.toastrService.success('Schedule #' + schedule.id + ' saved.');
@@ -112,4 +163,30 @@ export class ScheduleListComponent implements OnInit {
       );
     });
   };
+
+  confirmDelete(schedule: Schedule) {
+    const modal = this.ngbModal.open(ScheduleDeleteModalComponent);
+
+    modal.componentInstance.schedule = schedule;
+
+    modal.result.then((schedule: Schedule) => {
+      this.delete(schedule);
+    }, (reason) => function(reason) {
+    });
+  }
+
+  delete(schedule: Schedule) {
+    var id = schedule.id;
+
+    return this.scheduleService.delete(schedule).subscribe(() => {
+      this.toastrService.success('Schedule #' + id + ' deleted.');
+
+      this.load();
+    }, result => {
+      this.toastrService.error(
+        'An error occurred while trying to delete schedule #' + id + ':<br />'
+        + result.message
+      );
+    });
+  }
 };