From 97b213101b5f3c981dd1763eb1e890bbeba687df Mon Sep 17 00:00:00 2001 From: ddamiron <ddamiron@sii.fr> Date: Tue, 23 Jul 2019 11:34:23 +0200 Subject: [PATCH] add sort icons in table headers for session and slug --- .../logs-sessions.component.html | 51 ++++++++++++++++-- .../logs-slugs/logs-slugs.component.html | 52 ++++++++++++++++--- 2 files changed, 90 insertions(+), 13 deletions(-) diff --git a/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.html b/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.html index e6cc70c..21759f0 100644 --- a/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.html +++ b/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.html @@ -16,16 +16,56 @@ </span> </div> <div class="column is-1 has-text-left"> - <span class="column-title">All ?</span> + <span class="is-sortable"> + <span class="sort-icons"> + <span class="icon"> + <i class="fas fa-sort-up"></i> + </span> + <span class="icon"> + <i class="fas fa-sort-down"></i> + </span> + </span> + <span class="column-title">All?</span> + </span> </div> <div class="column is-2 has-text-left"> - <span class="column-title">Completion Date</span> + <span class="is-sortable"> + <span class="sort-icons"> + <span class="icon"> + <i class="fas fa-sort-up"></i> + </span> + <span class="icon"> + <i class="fas fa-sort-down"></i> + </span> + </span> + <span class="column-title">Completion Date</span> + </span> </div> <div class="column is-2 has-text-left"> - <span class="column-title">Duration</span> + <span class="is-sortable"> + <span class="sort-icons"> + <span class="icon"> + <i class="fas fa-sort-up"></i> + </span> + <span class="icon"> + <i class="fas fa-sort-down"></i> + </span> + </span> + <span class="column-title">Duration</span> + </span> </div> <div class="column is-1 has-text-left"> - <span class="column-title">Errors?</span> + <span class="is-sortable"> + <span class="sort-icons"> + <span class="icon"> + <i class="fas fa-sort-up"></i> + </span> + <span class="icon"> + <i class="fas fa-sort-down"></i> + </span> + </span> + <span class="column-title">Errors?</span> + </span> </div> <div class="column is-1 has-text-left"> <span class="column-title"></span> @@ -33,7 +73,8 @@ </div> <div class="data-list"> <div class="data columns is-multiline is-vcentered is-marginless" - *ngFor="let session of allSessionsIdInfo; let i=index; let odd=odd; let even=even;" [ngClass]="{ odd: odd, even: even }"> + *ngFor="let session of allSessionsIdInfo; let i=index; let odd=odd; let even=even;" + [ngClass]="{ odd: odd, even: even }"> <div class="column is-4 has-text-left"> {{ session._id }} </div> diff --git a/src/app/components/logs-dashboard/logs-slugs/logs-slugs.component.html b/src/app/components/logs-dashboard/logs-slugs/logs-slugs.component.html index d91c8c3..c6f655c 100644 --- a/src/app/components/logs-dashboard/logs-slugs/logs-slugs.component.html +++ b/src/app/components/logs-dashboard/logs-slugs/logs-slugs.component.html @@ -14,22 +14,58 @@ <div class="table entity-list-table"> <div class="header columns is-marginless"> <div class="column is-4 has-text-centered"> - <span (click)="sortBy('name')" class="is-sortable"> - <span class="column-title">Slugs</span> - <p></p> - </span> + <span class="is-sortable"> + <span class="sort-icons"> + <span class="icon"> + <i class="fas fa-sort-up"></i> + </span> + <span class="icon"> + <i class="fas fa-sort-down"></i> + </span> + </span> + <span class="column-title">Slugs</span> + </span> </div> <div class="column is-1 has-text-left"> <span class="column-title">Uuids</span> </div> <div class="column is-2 has-text-left"> - <span class="column-title">Completion Date</span> + <span class="is-sortable"> + <span class="sort-icons"> + <span class="icon"> + <i class="fas fa-sort-up"></i> + </span> + <span class="icon"> + <i class="fas fa-sort-down"></i> + </span> + </span> + <span class="column-title">Completion Date</span> + </span> </div> <div class="column is-2 has-text-left"> - <span class="column-title">Last</span> - </div> + <span class="is-sortable"> + <span class="sort-icons"> + <span class="icon"> + <i class="fas fa-sort-up"></i> + </span> + <span class="icon"> + <i class="fas fa-sort-down"></i> + </span> + </span> + <span class="column-title">Duration</span> + </span> </div> <div class="column is-1 has-text-left"> - <span class="column-title">Errors?</span> + <span class="is-sortable"> + <span class="sort-icons"> + <span class="icon"> + <i class="fas fa-sort-up"></i> + </span> + <span class="icon"> + <i class="fas fa-sort-down"></i> + </span> + </span> + <span class="column-title">Errors?</span> + </span> </div> <div class="column is-1 has-text-left"> <span class="column-title"></span> -- GitLab