Implementing user interface updates for the Project Dashboard filter …

…feature set
pulibrary · Dec 18, 2024 · cb53bab · cb53bab
1 parent 39305c1
commit cb53bab
Show file tree

Hide file tree

Showing 4 changed files with 152 additions and 61 deletions.
diff --git a/app/assets/stylesheets/_dashboard.scss b/app/assets/stylesheets/_dashboard.scss
@@ -36,24 +36,60 @@
     }
 }
 
+.projects {
+
+  &-tabs {
+    align-content: center;
+  }
+
+  &-filter {
+    text-align: center;
+
+    &-btn {
+      height: 100%;
+    }
+  }
+}
+
 #projects-listing,  #projects-listing-pending, #projects-listing-approved {
-    table-layout: fixed;
-    border: 1px solid $gray-20;
-    border-radius: 3px;
-    padding: 5px 0px;
+
+  table-layout: fixed;
+  border: 1px solid $gray-20;
+  border-radius: 3px;
+  padding: 5px 0px;
+  align-items: center;
+  gap: 16px;
+  color: $gray-60;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  width: 100%;
+
+  a {
+    text-decoration: none !important;
+  }
+
+  thead .project th, tbody .project td {
+    border: none;
+  }
+
+  .project {
+    display: flex;
+    flex-wrap: wrap;
+    font-family: $libre-franklin;
+    border-bottom: 1px solid $gray-20;
+    background: $white;
+    padding: 12px;
     align-items: center;
-    gap: 16px;
-    color: $gray-60;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 18px;
-    width: 100%;
-    a {
-        text-decoration: none !important;
-    }
+    gap: 8px;
+    align-self: stretch;
+
+    td:first-child {
+        width: 100%;
+    } 
 
-    thead .project th, tbody .project td {
+    td: {
         border: none;
     }
 
@@ -71,39 +107,37 @@
         td:first-child {
             width: 100%;
         }
+    }
 
-        td: {
-            border: none;
-        }
+    h2 {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: $black;
+      font-family: $libre-franklin;
+      font-size: 16px !important;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 24px;
+      text-decoration: none;
+    }
 
-        h2 {
-          display: block;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          color: $black;
-          font-family: $libre-franklin;
-          font-size: 16px !important;
-          font-style: normal;
-          font-weight: 600;
-          line-height: 24px;
-          text-decoration: none;
-        }
-        .details {
-            display: flex;
-            padding: 5px 0px;
-            align-items: center;
-            gap: 16px;
-            color: $gray-60;
-            font-size: 12px;
-            font-style: normal;
-            font-weight: 400;
-            line-height: 18px;
-            li {
-                float: left;
-                list-style: none;
-                padding: 0em .2em 0em 2em;
-            }
-        }
+    .details {
+      display: flex;
+      padding: 5px 0px;
+      align-items: center;
+      gap: 16px;
+      color: $gray-60;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 18px;
+
+      li {
+        float: left;
+        list-style: none;
+        padding: 0em .2em 0em 2em;
+      }
     }
 
     .last {
@@ -181,7 +215,7 @@
         height: 20px;
         vertical-align: top;
     }
-
+  }
 }
 
 #admin-listing {

diff --git a/app/assets/stylesheets/_projects.scss b/app/assets/stylesheets/_projects.scss
@@ -51,7 +51,7 @@
         padding-left: 20px;
         color: $red-darker;
     }
-    
+
     #project-description {
         color: $black;
         font-family: "Libre Franklin";

diff --git a/app/javascript/entrypoints/pulDataTables.js b/app/javascript/entrypoints/pulDataTables.js
@@ -19,7 +19,9 @@ export function setupTable(tableId) {
 
   // If we have a table initialize it with DataTables
   if (table) {
-    table.dataTable(datasetOptions);
+    if (table.dataTable) {
+      table.dataTable(datasetOptions);
+    }
   }
 }
 

diff --git a/app/views/welcome/_projects_listing.html.erb b/app/views/welcome/_projects_listing.html.erb
@@ -1,18 +1,73 @@
 <div class="table">
-   <table id="<%= table_id %>" >
-   <thead>
+
+  <div class="container-fluid">
+
+    <div class="row">
+
+      <div class="col-12 col-lg-3 projects-tabs">
+        <ul class="nav nav-pills nav-fill">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page">All</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="<%= root_path %>">Active</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="<%= root_path %>">Pending</a>
+          </li>
+        </ul>
+      </div>
+
+      <div class="col-12 col-lg-9 projects-filter">
+        <form class="container-fluid">
+          <div class="row">
+
+            <div class="col-12 col-lg-9 my-2">
+              <div class="input-group">
+                <div class="form-floating">
+                  <input type="text" class="form-control" id="filter-input-text" placeholder="Search by project titles, roles, project types">
+                  <label for="filter-input-text">Search by project titles, roles, project types</label>
+                </div>
+                <span class="input-group-text">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg>
+                </span>
+              </div>
+            </div>
+
+            <div class="col-12 col-lg-2 my-2">
+              <button class="btn btn-primary projects-filter-btn" type="submit">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-up" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5m-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5"/></svg>
+              Sort</button>
+            </div>
+
+            <div class="col-12 col-lg-1 my-2 ">
+              <div class="container-fluid" style="height:100%; align-content: center;">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1"/></svg>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+
+    </div>
+  </div>
+
+  <table id="<%= table_id %>">
+
+    <thead>
       <tr class="project heading">
-         <th>title</th>
-         <th>status</th>
-         <th>type</td>
-         <th>role</th>
-         <th>download</th>
-         <th>activity</th>
-         <th>quota_usage</th>
+          <th>title</th>
+          <th>status</th>
+          <th>type</td>
+          <th>role</th>
+          <th>download</th>
+          <th>activity</th>
+          <th>quota_usage</th>
       </tr>
-   </thead>
-   <tbody>
+    </thead>
+
+    <tbody>
       <%= render :partial => "project_list_view", :collection => projects, :as => :project %>
-   </tbody>
+    </tbody>
    </table>
 </div>