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