Merge filter-sort

package.json

@@ -8,7 +8,7 @@
     "build": "ng build",
     "build:stage": "ng build -c staging",
     "build:prod": "ng build -c production",
-    "test": "ng test",
+    "test": "ng test --browsers=ChromeHeadless",
     "test:codecov": "ng test --watch=false --browsers=ChromeHeadless --code-coverage",
     "lint": "ng lint",
     "lint:fix": "ng lint --fix",

src/app/components/resource/resource.component.html

@@ -1,7 +1,8 @@
 <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">

src/app/components/resources/resources.component.html

@@ -1,9 +1,9 @@
 <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 Resource
+        <i class="fa fa-plus"></i> Add New Tool
       </button>
       <button
         type="button"
@@ -14,8 +14,8 @@
       </button>
     </div>
   </div>
-  <div class="card-body" [ngbCollapse]="!showFilters && !showInstructions">
-    <div [ngbCollapse]="!showInstructions">
+  <div class="card-body" [ngbCollapse]="!showInstructions">
+    <div>
       <h5>Instructions</h5>
       <ul>
         <li>
@@ -70,12 +70,18 @@ <h5>Instructions</h5>
     </div>
   </div>
 </div>
-<div class="nav mb-2 flex-row-reverse">
-  <div class="float-right" ngbDropdown>
-    <div class="btn-group btn-group-sm" role="group">
+<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 btn-outline-secondary dropdown-toggle"
+          class="btn dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-toggle="dropdown"
@@ -85,26 +91,17 @@ <h5>Instructions</h5>
         >
           Filter
           <span
+            *ngIf="totalFilters"
             id="filterBadge"
             class="position-absolute rounded-pill bg-warning p-1 badge start-100 translate-middle text-dark"
-            >{{ totalFilters ? totalFilters : null }}</span
+            >{{ totalFilters }}</span
           >
         </button>
         <div
           class="dropdown-menu"
           aria-labelledby="dropdownMenuButton"
           ngbDropdownMenu
         >
-          <span *ngIf="!totalFilters">Showing All</span>
-          <span *ngIf="totalFilters">
-            <a
-              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 class="dropdown-divider"></div>
           <h6 class="dropdown-header">TYPE</h6>
           <button
             *ngFor="let type of resourceTypes"
@@ -153,7 +150,7 @@ <h6 class="dropdown-header">OTHER</h6>
       </div>
       <div class="btn-group btn-group-sm" ngbDropdown role="group">
         <button
-          class="btn btn-outline-secondary dropdown-toggle"
+          class="btn dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-toggle="dropdown"
@@ -178,15 +175,24 @@ <h6 class="dropdown-header">OTHER</h6>
             Alphabetical
           </button>
           <button
-            (click)="updateSort('default')"
+            (click)="updateSort('tool')"
             class="filter-dropdown-button"
-            [ngClass]="sortOrder == 'default' ? 'bg-secondary text-light' : ''"
+            [ngClass]="sortOrder == 'tool' ? 'bg-secondary text-light' : ''"
           >
-            Default Order
+            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

src/app/components/resources/resources.component.spec.ts

@@ -28,6 +28,71 @@ describe('ResourcesComponent', () => {
   } as unknown) as Language;
 
   const resource: Resource = new Resource();
+  const unfilteredResources = [
+    {
+      name: 'GodTools CYOA Tool - Hidden',
+      abbreviation: 'emojitool2',
+      description: 'Emoji survey for the holiday season',
+      id: 123,
+      system: { id: 1, name: 'GodTools' },
+      manifest: '',
+      showTranslations: false,
+      oneskyProjectId: 78097,
+      resourceType: { id: 2, name: 'cyoa' },
+      variants: [],
+      'latest-drafts-translations': [],
+      attachments: [],
+      pages: [],
+      tips: [],
+      latest: [],
+      data: { id: 22 },
+      customManifests: [],
+      'attr-default-order': 2,
+      'attr-hidden': true,
+      'resource-type': 'cyoa',
+    },
+    {
+      name: 'GodTools Tract Tool - Not Hidden',
+      abbreviation: 'emojitool2',
+      description: 'Tract for all purposes',
+      id: 123,
+      system: { id: 1, name: 'GodTools' },
+      manifest: '',
+      showTranslations: false,
+      oneskyProjectId: 385532,
+      resourceType: { id: 1, name: 'tract' },
+      variants: [],
+      'latest-drafts-translations': [],
+      attachments: [],
+      pages: [],
+      tips: [],
+      latest: [],
+      data: { id: 13 },
+      customManifests: [],
+      'attr-default-order': 1,
+      'resource-type': 'tract',
+    },
+    {
+      name: 'Test System Lesson Tool - Not Hidden',
+      abbreviation: 'lesson2',
+      description: 'Lesson for the holiday season',
+      id: 123,
+      system: { id: 99, name: 'Test' },
+      manifest: '',
+      showTranslations: false,
+      oneskyProjectId: 456858656,
+      resourceType: { id: 3, name: 'lesson' },
+      variants: [],
+      'latest-drafts-translations': [],
+      attachments: [],
+      pages: [],
+      tips: [],
+      latest: [],
+      data: { id: 77 },
+      customManifests: [],
+      'resource-type': 'lesson',
+    },
+  ];
 
   beforeEach(async(() => {
     spyOn(resourceServiceStub, 'getResources').and.returnValue(
@@ -56,9 +121,25 @@ describe('ResourcesComponent', () => {
     }).compileComponents();
   }));
 
+  let localStore;
+
   beforeEach(() => {
     fixture = TestBed.createComponent(ResourcesComponent);
     comp = fixture.componentInstance;
+
+    localStore = {};
+
+    spyOn(window.localStorage, 'getItem').and.callFake((key) =>
+      key in localStore ? localStore[key] : null,
+    );
+    spyOn(window.localStorage, 'setItem').and.callFake(
+      (key, value) => (localStore[key] = value + ''),
+    );
+    spyOn(window.localStorage, 'clear').and.callFake(() => (localStore = {}));
+  });
+
+  afterEach(() => {
+    comp.clearFilters();
   });
 
   it('should include pages when loading resources', (done) => {
@@ -68,7 +149,90 @@ describe('ResourcesComponent', () => {
       expect(resourceServiceStub.getResources).toHaveBeenCalledWith(
         'latest-drafts-translations,pages,custom-manifests,tips,attachments,variants',
       );
+      done();
+    });
+  });
+
+  it('should filter resources by hidden', (done) => {
+    comp.unfilteredResources = unfilteredResources;
+    comp.filterAndSort();
+    setTimeout(() => {
+      comp.toggleResources('other', 'hidden');
+    });
+
+    setTimeout(() => {
+      expect(
+        comp.resources.find(
+          (r) => r.name === 'GodTools Tract Tool - Not Hidden',
+        ),
+      ).toEqual(undefined);
+      expect(
+        comp.resources.find((r) => r.name === 'GodTools CYOA Tool - Hidden'),
+      ).toBeTruthy();
+      done();
+    });
+  });
+
+  it('should filter resources by type', (done) => {
+    comp.unfilteredResources = unfilteredResources;
+    comp.filterAndSort();
+    comp.toggleResources('type', 'tract');
+
+    setTimeout(() => {
+      expect(
+        comp.resources.find(
+          (r) => r.name === 'GodTools Tract Tool - Not Hidden',
+        ),
+      ).toBeTruthy();
+      expect(
+        comp.resources.find((r) => r.name === 'GodTools CYOA Tool - Hidden'),
+      ).toEqual(undefined);
+      done();
+    });
+  });
+
+  it('should filter resources by system', (done) => {
+    comp.unfilteredResources = unfilteredResources;
+    comp.filterAndSort();
+    comp.toggleResources('system', 99);
+
+    setTimeout(() => {
+      expect(
+        comp.resources.find(
+          (r) => r.name === 'Test System Lesson Tool - Not Hidden',
+        ),
+      ).toBeTruthy();
+      expect(
+        comp.resources.find((r) => r.name === 'GodTools CYOA Tool - Hidden'),
+      ).toEqual(undefined);
+      done();
+    });
+  });
+  it('should set local storage', (done) => {
+    comp.unfilteredResources = unfilteredResources;
+    comp.filterAndSort();
+    comp.toggleResources('system', 99);
+    const expectedData = {
+      type: [],
+      system: [99],
+      other: [],
+    };
+
+    setTimeout(() => {
+      expect(localStorage.getItem('filters')).toEqual(
+        JSON.stringify(expectedData),
+      );
+      done();
+    });
+  });
+  it('should sort by tool order', (done) => {
+    comp.unfilteredResources = unfilteredResources;
+    comp.updateSort('tool');
 
+    setTimeout(() => {
+      expect(comp.resources[0].name).toEqual(
+        'GodTools Tract Tool - Not Hidden',
+      );
       done();
     });
   });