Skip to content

Commit fe29033

Browse files
habarthierry-huehabarthierry-hue
committed
Ticket #103 : Refactor UI of the TaskList website
1 parent 5ff67d8 commit fe29033

21 files changed

Lines changed: 469 additions & 618 deletions

File tree

‎src/CaseManagement.Tasklist.Website/angularApp/app/app.component.html‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,43 @@
1-
<ng-container>
2-
<mat-toolbar class="header-toolbar">
3-
<a class="no-style" [routerLink]="['/home']">
4-
<img src={{url}} />
5-
</a>
6-
<button mat-icon-button (click)="sidenav.toggle()">
1+
<mat-drawer-container fxFlexFill>
2+
<mat-drawer #drawer class="drawer" mode="side">
3+
<mat-list>
4+
<mat-list-item>TaskList <button (click)="drawer.close()" mat-icon-button><mat-icon>close</mat-icon></button></mat-list-item>
5+
<a *ngIf="isConnected" [routerLink]="['/tasks']" mat-list-item href="#">{{ "MENU.TASKS" | translate }}</a>
6+
<a *ngIf="isConnected" [routerLink]="['/notifications']" mat-list-item href="#">{{ "MENU.NOTIFICATIONS" | translate }}</a>
7+
<a href="#" *ngIf="!isConnected" (click)="login($event)" mat-button>{{ "MENU.AUTHENTICATE" | translate }}</a>
8+
<a href="#" *ngIf="!isConnected" (click)="chooseSession($event)" mat-button>{{ "MENU.CHOOSE_SESSION" | translate }}</a>
9+
</mat-list>
10+
</mat-drawer>
11+
<mat-toolbar class="app-header">
12+
<button mat-icon-button (click)="drawer.toggle()" fxShow="true" fxHide.gt-sm>
713
<mat-icon>menu</mat-icon>
814
</button>
15+
<a class="no-style" [routerLink]="['/home']">
16+
<b style="color: rgb(123,31,162);">Task</b><span style="color: rgb(206,147,216);">List</span>
17+
</a>
18+
<div fxShow="true" fxHide.lt-md="true">
19+
<a *ngIf="isConnected" [routerLink]="['/tasks']" mat-button href="#">{{ "MENU.TASKS" | translate }}</a>
20+
<a *ngIf="isConnected" [routerLink]="['/notifications']" mat-button href="#">{{ "MENU.NOTIFICATIONS" | translate }}</a>
21+
</div>
922
<span class="navigation-spacer"></span>
10-
<div *ngIf="isConnected">
11-
<button mat-button [matMenuTriggerFor]="welcomeMenu">
12-
{{ "WELCOME" | translate:{name:name} }}
13-
</button>
23+
<div fxShow="true" fxHide.lt-md="true">
24+
<a href="#" *ngIf="isConnected" mat-button [matMenuTriggerFor]="welcomeMenu" [innerHtml]="'MENU.WELCOME' | translate:{name:name}"></a>
1425
<mat-menu #welcomeMenu="matMenu">
15-
<button mat-menu-item (click)="disconnect()">{{ "DISCONNECT" | translate }}</button>
26+
<a href="#" mat-menu-item (click)="disconnect($event)">{{ "MENU.DISCONNECT" | translate }}</a>
27+
</mat-menu>
28+
<a href="#" *ngIf="!isConnected" (click)="login($event)" mat-button>{{ "MENU.AUTHENTICATE" | translate }}</a>
29+
<a href="#" *ngIf="!isConnected" (click)="chooseSession($event)" mat-button>{{ "MENU.CHOOSE_SESSION" | translate }}</a>
30+
<a mat-button [matMenuTriggerFor]="languages">{{ "MENU.LANGUAGES" | translate }}</a>
31+
<mat-menu #languages="matMenu">
32+
<a href="#" mat-menu-item (click)="chooseLanguage($event, 'fr')">{{ "LANGUAGES.FRENCH" | translate }}</a>
33+
<a href="#" mat-menu-item (click)="chooseLanguage($event, 'en')">{{ "LANGUAGES.ENGLISH" | translate }}</a>
1634
</mat-menu>
1735
</div>
18-
<div *ngIf="!isConnected">
19-
<button mat-raised-button color="primary" (click)="login()">{{ "AUTHENTICATE" | translate }}</button>
20-
<button mat-raised-button color="primary" (click)="chooseSession()">{{ "CHOOSE_SESSION" | translate }}</button>
21-
</div>
22-
<button mat-button [matMenuTriggerFor]="languages">{{ "LANGUAGES" | translate }}</button>
23-
<mat-menu #languages="matMenu">
24-
<button mat-menu-item (click)="chooseLanguage('fr')">{{ "FRENCH" | translate }}</button>
25-
<button mat-menu-item (click)="chooseLanguage('en')">{{ "ENGLISH" | translate }}</button>
26-
</mat-menu>
2736
</mat-toolbar>
28-
<mat-sidenav-container class="sidenav-container">
29-
<mat-sidenav class="sidenav" #sidenav mode="side" opened [fixedInViewport]="false" [fixedTopGap]="0" [fixedBottomGap]="0">
30-
<mat-nav-list *ngIf="isConnected">
31-
<a mat-list-item [routerLink]="['/tasks']">
32-
<mat-icon>assignment</mat-icon> {{ "MENU.TASKS" | translate }}
33-
</a>
34-
<a mat-list-item [routerLink]="['/notifications']">
35-
<mat-icon>notifications</mat-icon> {{ "MENU.NOTIFICATIONS" | translate }}
36-
</a>
37-
</mat-nav-list>
38-
</mat-sidenav>
39-
<mat-sidenav-content>
40-
<router-outlet></router-outlet>
41-
</mat-sidenav-content>
42-
</mat-sidenav-container>
43-
</ng-container>
37+
<div class="app-content">
38+
<router-outlet></router-outlet>
39+
</div>
40+
<div class="app-footer">
41+
@Copyright SimpleIdServer
42+
</div>
43+
</mat-drawer-container>

‎src/CaseManagement.Tasklist.Website/angularApp/app/home/components/home.component.html‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
<div fxLayout="row" class="breadcrumb">
2-
<div fxFlex="80%" fxFlexOffset="10%">
3-
<div class="mat-h1">{{ "HOME" | translate }}</div>
4-
</div>
5-
</div>
1+
<ul class="breadcrumb">
2+
<li>{{ 'BREADCRUMB.DASHBOARD' | translate }}</li>
3+
</ul>

‎src/CaseManagement.Tasklist.Website/angularApp/app/notifications/list/list.component.html‎

Lines changed: 45 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,46 @@
1-
<div fxLayout="row" class="breadcrumb">
2-
<div fxFlex="80%" fxFlexOffset="10%">
3-
<div class="mat-h1">{{ baseTranslationKey + ".TITLE" | translate }}</div>
4-
</div>
5-
</div>
6-
<div fxLayout="row">
7-
<div fxFlex="80%" fxFlexOffset="10%">
8-
<mat-card>
9-
<mat-card-content>
10-
<table mat-table class="full-width" matSortActive="createdTime" matSortDirection="desc" [dataSource]="notifications$" matSort>
11-
<!-- Priority -->
12-
<ng-container matColumnDef="priority">
13-
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ baseTranslationKey + ".PRIORITY" | translate }}</th>
14-
<td mat-cell *matCellDef="let notification">{{notification.priority}}</td>
15-
</ng-container>
16-
<!-- Name -->
17-
<ng-container matColumnDef="presentationName">
18-
<th mat-header-cell *matHeaderCellDef>{{ baseTranslationKey + ".NAME" | translate }}</th>
19-
<td mat-cell *matCellDef="let notification">{{notification.presentationName}}</td>
20-
</ng-container>
21-
<!-- Presentation subject -->
22-
<ng-container matColumnDef="presentationSubject">
23-
<th mat-header-cell *matHeaderCellDef>{{ baseTranslationKey + ".SUBJECT" | translate }}</th>
24-
<td mat-cell *matCellDef="let notification">{{notification.presentationSubject}}</td>
25-
</ng-container>
26-
<!-- Status -->
27-
<ng-container matColumnDef="status">
28-
<th mat-header-cell *matHeaderCellDef>{{ baseTranslationKey + ".STATUS" | translate }}</th>
29-
<td mat-cell *matCellDef="let notification">
30-
<mat-chip-list>
31-
<mat-chip>
32-
{{ baseTranslationKey + '.STATUSENUM.' + notification.status | translate }}
33-
</mat-chip>
34-
</mat-chip-list>
35-
</td>
36-
</ng-container>
37-
<!-- Created datetime -->
38-
<ng-container matColumnDef="createdTime">
39-
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ baseTranslationKey + ".CREATED_DATETIME" | translate }}</th>
40-
<td mat-cell *matCellDef="let notification">{{notification.createdTime | date:'medium'}}</td>
41-
</ng-container>
42-
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
43-
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
44-
</table>
45-
<mat-paginator [length]="length" [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
46-
</mat-card-content>
47-
</mat-card>
48-
</div>
1+
<div fxLayout="column" fxFlexFill>
2+
<ul class="breadcrumb">
3+
<li><a href="#" [routerLink]="['/']">{{ 'BREADCRUMB.DASHBOARD' | translate }}</a></li>
4+
<li>{{ 'BREADCRUMB.NOTIFICATIONS' | translate }}</li>
5+
</ul>
6+
<mat-card class="m-10">
7+
<mat-card-content>
8+
<table mat-table class="full-width" matSortActive="createdTime" matSortDirection="desc" [dataSource]="notifications$" matSort>
9+
<!-- Priority -->
10+
<ng-container matColumnDef="priority">
11+
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "SHARED.PRIORITY" | translate }}</th>
12+
<td mat-cell *matCellDef="let notification">{{notification.priority}}</td>
13+
</ng-container>
14+
<!-- Name -->
15+
<ng-container matColumnDef="presentationName">
16+
<th mat-header-cell *matHeaderCellDef>{{ "SHARED.NAME" | translate }}</th>
17+
<td mat-cell *matCellDef="let notification">{{notification.presentationName}}</td>
18+
</ng-container>
19+
<!-- Presentation subject -->
20+
<ng-container matColumnDef="presentationSubject">
21+
<th mat-header-cell *matHeaderCellDef>{{ "SHARED.SUBJECT" | translate }}</th>
22+
<td mat-cell *matCellDef="let notification">{{notification.presentationSubject}}</td>
23+
</ng-container>
24+
<!-- Status -->
25+
<ng-container matColumnDef="status">
26+
<th mat-header-cell *matHeaderCellDef>{{ "SHARED.STATUS" | translate }}</th>
27+
<td mat-cell *matCellDef="let notification">
28+
<mat-chip-list>
29+
<mat-chip>
30+
{{ 'NOTIFICATIONS.STATUS.' + notification.status | translate }}
31+
</mat-chip>
32+
</mat-chip-list>
33+
</td>
34+
</ng-container>
35+
<!-- Created datetime -->
36+
<ng-container matColumnDef="createdTime">
37+
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "SHARED.CREATED_DATETIME" | translate }}</th>
38+
<td mat-cell *matCellDef="let notification">{{notification.createdTime | date:'medium'}}</td>
39+
</ng-container>
40+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
41+
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
42+
</table>
43+
<mat-paginator [length]="length" [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
44+
</mat-card-content>
45+
</mat-card>
4946
</div>

‎src/CaseManagement.Tasklist.Website/angularApp/app/notifications/list/list.component.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ export class ListNotificationsComponent implements OnInit {
1818
displayedColumns: string[] = ['priority', 'presentationName', 'presentationSubject', 'status', 'createdTime'];
1919
@ViewChild(MatPaginator) paginator: MatPaginator;
2020
@ViewChild(MatSort) sort: MatSort;
21-
baseTranslationKey: string = "NOTIFICATIONS.LIST";
2221
length: number;
2322
notifications$: Notification[] = [];
2423

0 commit comments

Comments
 (0)