GT-1646 Provide several filters for the overall list of tools (#702)

Add filter and sort
CruGlobal · Feb 26, 2024 · 5768719 · 5768719
1 parent 2720ff9
commit 5768719
Show file tree

Hide file tree

Showing 8 changed files with 514 additions and 20 deletions.
diff --git a/src/app/components/resource/resource.component.html b/src/app/components/resource/resource.component.html
@@ -1,13 +1,17 @@
 <div class="card mb-3">
   <div
-    class="card-header bg-dark text-white d-flex justify-content-between align-items-center"
-    [ngStyle]="{ cursor: isMetaTool() ? 'default' : 'pointer' }"
+    class="card-header bg-dark text-white d-flex justify-content-between align-items-center {{
+      !isMetaTool() && 'pointer'
+    }}"
     (click)="showDetails = !showDetails"
   >
     <span class="h4 mb-0">
       {{ resource.name }}
     </span>
-    <div class="btn-group justify-content-end flex-wrap" role="group">
+    <div
+      class="btn-group btn-group-sm justify-content-end flex-wrap"
+      role="group"
+    >
       <button
         (click)="openUpdateModal(resource); $event.stopPropagation()"
         class="btn btn-warning mb-2 mb-sm-2 mb-lg-0"

diff --git a/src/app/components/resource/resource.component.spec.ts b/src/app/components/resource/resource.component.spec.ts
@@ -61,7 +61,13 @@ describe('ResourceComponent', () => {
     comp = fixture.componentInstance;
     comp.resource = resource;
 
-    comp.resourcesComponent = new ResourcesComponent(null, null, null);
+    comp.resourcesComponent = new ResourcesComponent(
+      null,
+      null,
+      null,
+      null,
+      null,
+    );
   });
 
   describe('loading languages', () => {

diff --git a/src/app/components/resources/resources.component.html b/src/app/components/resources/resources.component.html
@@ -1,18 +1,21 @@
-<div class="card mb-3">
+<div class="card mb-2">
   <div class="card-header">
-    <span class="h3">Translations</span>
+    <span class="h3">Tools</span>
     <div class="float-right">
+      <button (click)="openCreateModal()" class="btn btn-secondary mx-1">
+        <i class="fa fa-plus"></i> Add New Tool
+      </button>
       <button
         type="button"
-        class="btn btn-default"
+        class="btn btn-secondary mx-1"
         (click)="showInstructions = !showInstructions"
       >
-        Toggle instructions
+        Instructions
       </button>
     </div>
   </div>
-  <div class="card-body">
-    <div [ngbCollapse]="!showInstructions">
+  <div class="card-body" [ngbCollapse]="!showInstructions">
+    <div>
       <h5>Instructions</h5>
       <ul>
         <li>
@@ -64,11 +67,132 @@ <h5>Instructions</h5>
           </p>
         </li>
       </ul>
-      <hr />
     </div>
-    <button (click)="openCreateModal()" class="btn btn-secondary">
-      <i class="fa fa-plus"></i> Add new Resource
-    </button>
+  </div>
+</div>
+<div class="navbar mb-2" id="filterSortBar">
+  <div>
+    <span *ngIf="resources"
+      >Showing {{ resources?.length }} of
+      {{ unfilteredResources?.length }}</span
+    >
+  </div>
+  <div class="nav flex-row-reverse" ngbDropdown>
+    <div>
+      <div class="btn-group btn-group-sm" ngbDropdown role="group">
+        <button
+          class="btn dropdown-toggle"
+          type="button"
+          id="dropdownMenuButton"
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+          ngbDropdownToggle
+        >
+          Filter
+          <span
+            *ngIf="totalFilters"
+            id="filterBadge"
+            class="position-absolute rounded-pill bg-warning p-1 badge start-100 translate-middle text-dark"
+            >{{ totalFilters }}</span
+          >
+        </button>
+        <div
+          class="dropdown-menu"
+          aria-labelledby="dropdownMenuButton"
+          ngbDropdownMenu
+        >
+          <h6 class="dropdown-header">TYPE</h6>
+          <button
+            *ngFor="let type of resourceTypes"
+            (click)="toggleResources('type', type.name)"
+            class="filter-dropdown-button"
+          >
+            <i
+              [ngClass]="
+                !filters?.type?.includes(type.name)
+                  ? 'fa fa-square-o'
+                  : 'fa fa-check-square '
+              "
+            ></i>
+            {{ type.name | titlecase }}
+          </button>
+          <h6 class="dropdown-header">SYSTEM</h6>
+          <button
+            *ngFor="let system of systems"
+            (click)="toggleResources('system', system.id)"
+            class="filter-dropdown-button"
+          >
+            <i
+              [ngClass]="
+                !filters?.system?.includes(system.id)
+                  ? 'fa fa-square-o'
+                  : 'fa fa-check-square '
+              "
+            ></i>
+            {{ system.name | titlecase }}
+          </button>
+          <h6 class="dropdown-header">OTHER</h6>
+          <button
+            (click)="toggleResources('other', 'hidden')"
+            class="filter-dropdown-button"
+          >
+            <i
+              [ngClass]="
+                !filters?.other?.includes('hidden')
+                  ? 'fa fa-square-o'
+                  : 'fa fa-check-square '
+              "
+            ></i>
+            Hidden
+          </button>
+        </div>
+      </div>
+      <span class="sortLabel">Sort by |</span>
+      <div class="btn-group btn-group-sm" ngbDropdown role="group">
+        <button
+          class="btn dropdown-toggle"
+          type="button"
+          id="dropdownMenuButton"
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+          ngbDropdownToggle
+          style="font-style: italic"
+        >
+          {{ sortOrder == 'tool' ? 'Tool Order' : 'Alphabetical' }}
+        </button>
+        <div
+          class="dropdown-menu"
+          aria-labelledby="dropdownMenuButton"
+          ngbDropdownMenu
+        >
+          <button
+            (click)="updateSort('alphabetical')"
+            class="filter-dropdown-button btn-sm"
+            [ngClass]="sortOrder != 'tool' ? 'bg-secondary text-light' : ''"
+          >
+            Alphabetical
+          </button>
+          <button
+            (click)="updateSort('tool')"
+            class="filter-dropdown-button"
+            [ngClass]="sortOrder == 'tool' ? 'bg-secondary text-light' : ''"
+          >
+            Tool Order
+          </button>
+        </div>
+      </div>
+    </div>
+    <span>
+      <a
+        *ngIf="totalFilters"
+        href="javascript:void(0)"
+        class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover"
+        (click)="clearFilters()"
+        >Clear</a
+      >
+    </span>
   </div>
 </div>
 <ngb-alert