Merge filter-sort

package.json

@@ -34,7 +34,7 @@
     "angular2-uuid": "1.1.1",
     "components-font-awesome": "4.7.0",
     "core-js": "2.6.12",
-    "countries-list": "^3.0.5",
+    "countries-list": "3.0.5",
     "jsonapi-datastore": "0.4.0-beta",
     "lodash": "^4.17.21",
     "ng2-ace-editor": "0.3.9",

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

@@ -5,9 +5,12 @@
     (click)="showDetails = !showDetails"
   >
     <span class="h4 mb-0">
-      {{ resource.name }}
+      {{ resource.name }}<i class="fa fa-chevron-down"></i>
     </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"

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', () => {

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

@@ -1,17 +1,20 @@
-<div class="card mb-3">
+<div class="card mb-2">
   <div class="card-header">
     <span class="h3">Translations</span>
     <div class="float-right">
+      <button (click)="openCreateModal()" class="btn btn-secondary mx-1">
+        <i class="fa fa-plus"></i> Add New Resource
+      </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 class="card-body" [ngbCollapse]="!showFilters && !showInstructions">
     <div [ngbCollapse]="!showInstructions">
       <h5>Instructions</h5>
       <ul>
@@ -64,11 +67,126 @@ <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="nav mb-2 flex-row-reverse">
+  <div class="float-right" ngbDropdown>
+    <div class="btn-group btn-group-sm" role="group">
+      <div class="btn-group btn-group-sm" ngbDropdown role="group">
+        <button
+          class="btn btn-outline-secondary dropdown-toggle"
+          type="button"
+          id="dropdownMenuButton"
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+          ngbDropdownToggle
+        >
+          Filter
+          <span
+            id="filterBadge"
+            class="position-absolute rounded-pill bg-warning p-1 badge start-100 translate-middle text-dark"
+            >{{ totalFilters ? totalFilters : null }}</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"
+            (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>
+      <div class="btn-group btn-group-sm" ngbDropdown role="group">
+        <button
+          class="btn btn-outline-secondary dropdown-toggle"
+          type="button"
+          id="dropdownMenuButton"
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+          ngbDropdownToggle
+        >
+          Sort
+        </button>
+        <div
+          class="dropdown-menu"
+          aria-labelledby="dropdownMenuButton"
+          ngbDropdownMenu
+        >
+          <button
+            (click)="updateSort('alphabetical')"
+            class="filter-dropdown-button btn-sm"
+            [ngClass]="
+              sortOrder == 'alphabetical' ? 'bg-secondary text-light' : ''
+            "
+          >
+            Alphabetical
+          </button>
+          <button
+            (click)="updateSort('default')"
+            class="filter-dropdown-button"
+            [ngClass]="sortOrder == 'default' ? 'bg-secondary text-light' : ''"
+          >
+            Default Order
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 <ngb-alert

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

@@ -10,6 +10,8 @@ import { DraftService } from '../../service/draft.service';
 import { ResourceComponent } from '../resource/resource.component';
 import { Language } from '../../models/language';
 import { TranslationVersionBadgeComponent } from '../translation/translation-version-badge/translation-version-badge.component';
+import { ResourceTypeService } from '../../service/resource-type.service';
+import { SystemService } from '../../service/system.service';
 
 describe('ResourcesComponent', () => {
   let comp: ResourcesComponent;
@@ -48,6 +50,8 @@ describe('ResourcesComponent', () => {
         { provide: LanguageService, useValue: languageServiceStub },
         { provide: NgbModal },
         { provide: DraftService },
+        { provide: ResourceTypeService },
+        { provide: SystemService },
       ],
     }).compileComponents();
   }));

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

@@ -5,6 +5,11 @@ import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { CreateResourceComponent } from '../edit-resource/create-resource/create-resource.component';
 import { Language } from '../../models/language';
 import { LanguageService } from '../../service/language.service';
+import { ResourceType } from '../../../../src/app/models/resource-type';
+import { System } from '../../../../src/app/models/system';
+import { Filters } from '../../../../src/app/models/filters';
+import { SystemService } from '../../../../src/app/service/system.service';
+import { ResourceTypeService } from '../../../../src/app/service/resource-type.service';
 
 @Component({
   selector: 'admin-resources',
@@ -13,36 +18,100 @@ import { LanguageService } from '../../service/language.service';
 export class ResourcesComponent implements OnInit {
   resources: Resource[];
   languages: Language[];
+  resourceTypes: ResourceType[];
+  systems: System[];
 
   showInstructions = false;
+  showFilters = false;
   loadingResources = false;
   loadingLanguages = false;
   errorMessage: string;
+  filters: Filters;
+  totalFilters: number;
+  sortOrder: string;
 
   constructor(
     private resourceService: ResourceService,
     private languageService: LanguageService,
     private modalService: NgbModal,
+    protected systemService: SystemService,
+    protected resourceTypeService: ResourceTypeService,
   ) {}
 
   ngOnInit(): void {
     this.loadResources();
     this.loadLanguages();
+    this.loadFilters();
   }
 
-  loadResources(): void {
-    this.loadingResources = true;
+  blankFilters(): Filters {
+    return {
+      type: [],
+      system: [],
+      other: [],
+    };
+  }
 
+  loadResources(): void {
     this.resourceService
       .getResources(
         'latest-drafts-translations,pages,custom-manifests,tips,attachments,variants',
       )
       .then((resources) => {
-        this.resources = resources;
+        const localFilters = localStorage.getItem('filters');
+        this.sortOrder = localStorage.getItem('sortOrder');
+        this.filters = localFilters
+          ? JSON.parse(localFilters)
+          : this.blankFilters();
+        this.totalFilters = Object.keys(this.filters).reduce(
+          (acc, item) => acc + this.filters[item].length,
+          0,
+        );
+
+        this.resources = this.filters
+          ? resources.filter((r) => {
+              let visible = true;
+              if (this.filters['type'].length) {
+                if (!this.filters['type'].includes(r['resource-type'])) {
+                  visible = false;
+                }
+              }
+              if (this.filters['system'].length) {
+                if (!this.filters['system'].includes(r['system']['id'])) {
+                  visible = false;
+                }
+              }
+              if (this.filters['other'].length) {
+                if (
+                  !r['attr-hidden'] ||
+                  (r['attr-hidden'] &&
+                    !this.filters['other'].includes('hidden'))
+                ) {
+                  visible = false;
+                }
+              }
+              return visible;
+            })
+          : resources;
+        if (this.sortOrder === 'default') {
+          this.resources.sort(
+            (a, b) =>
+              (a['attr-default-order'] || 100) -
+              (b['attr-default-order'] || 100),
+          );
+        }
       })
       .catch(this.handleError.bind(this))
       .then(() => (this.loadingResources = false));
   }
+  loadFilters(): void {
+    this.resourceTypeService.getResourceTypes().then((types) => {
+      this.resourceTypes = types;
+    });
+    this.systemService.getSystems().then((systems) => {
+      this.systems = systems;
+    });
+  }
 
   openCreateModal(): void {
     const modalRef: NgbModalRef = this.modalService.open(
@@ -51,6 +120,38 @@ export class ResourcesComponent implements OnInit {
     modalRef.result.then(() => this.loadResources(), console.log);
   }
 
+  toggleResources = function (
+    category: string,
+    optionId: string | number,
+  ): void {
+    const updatedFilters =
+      this.filters[category] && this.filters[category].includes(optionId)
+        ? {
+            ...this.filters,
+            [category]: this.filters[category].filter((e) => e !== optionId),
+          }
+        : this.filters[category]
+        ? {
+            ...this.filters,
+            [category]: [...this.filters[category], optionId],
+          }
+        : {
+            ...this.filters,
+            [category]: [optionId],
+          };
+    localStorage.setItem('filters', JSON.stringify(updatedFilters));
+    this.loadResources();
+  };
+
+  clearFilters = function (): void {
+    localStorage.setItem('filters', JSON.stringify(this.blankFilters()));
+    this.loadResources();
+  };
+  updateSort = function (order: string): void {
+    localStorage.setItem('sortOrder', order);
+    this.loadResources();
+  };
+
   trackByFunction(pIx: number, pItem: Resource) {
     if (!pItem || pIx < 0) {
       return null;

src/app/models/filters.ts

@@ -0,0 +1,5 @@
+export class Filters {
+  type: string[] | null;
+  system: number[] | null;
+  other: string[] | null;
+}