refactor(resource): clean up code and refactoring (DSP-1816)

projects/dsp-ui/package.json

@@ -24,7 +24,7 @@
     "@angular/core": "~11.2.6",
     "@angular/material": "^11.2.5",
     "@angular/cdk": "^11.2.5",
-    "@dasch-swiss/dsp-js": "^2.2.0",
+    "@dasch-swiss/dsp-js": "^2.7.0",
     "jdnconvertiblecalendar": "^0.0.7",
     "jdnconvertiblecalendardateadapter": "^0.0.17",
     "ngx-color-picker": "^11.0.0",

projects/dsp-ui/src/lib/viewer/views/list-view/list-view.component.html

@@ -21,28 +21,9 @@
 <!-- container with search results -->
 <div class="list-view-container">
     <dsp-progress-indicator *ngIf="loading"></dsp-progress-indicator>
-    <!-- When single resources is selected to view -->
-    <div class="list-view" *ngIf="!loading && numberOfAllResults > 0 && resources && withMultipleSelection === false">
-        <div [ngSwitch]="view">
-            <dsp-resource-list
-                *ngSwitchCase="'list'"
-                [resources]="resources"
-                [selectedResourceIdx]="selectedResourceIdx"
-                (resourcesSelected)="emitSelectedResources($event)">
-            </dsp-resource-list>
-            <dsp-resource-grid
-                *ngSwitchCase="'grid'"
-                [resources]="resources"
-                [selectedResourceIdx]="selectedResourceIdx"
-                (resourcesSelected)="emitSelectedResources($event)">
-            </dsp-resource-grid>
-            <!-- TODO: implement table view -->
-            <!-- <kui-table-view *ngSwitchCase="'table'" [resources]="resources"></kui-table-view> -->
-        </div>
-    </div>
 
     <!-- When multiple resources are selected for comparision -->
-    <div class="list-view" *ngIf="!loading && numberOfAllResults > 0 && resources && withMultipleSelection">
+    <div class="list-view" *ngIf="!loading && numberOfAllResults > 0 && resources">
         <div [ngSwitch]="view">
             <dsp-resource-list
                 *ngSwitchCase="'list'"

projects/dsp-ui/src/lib/viewer/views/list-view/list-view.component.ts

@@ -39,7 +39,7 @@ export interface FilteredResouces {
  * checked: checkbox value
  * resIndex: resource index from the list
  */
-export interface checkboxUpdate {
+export interface CheckboxUpdate {
     checked: boolean,
     resListIndex: number,
     resId: string,
@@ -60,8 +60,8 @@ export class ListViewComponent implements OnChanges {
     @Input() displayViewSwitch?: boolean = true;
 
     /**
-      * Set to true if multiple resources can be selected for comparison
-      */
+     * Set to true if multiple resources can be selected for comparison
+     */
     @Input() withMultipleSelection?: boolean = false;
 
     /**
@@ -72,22 +72,25 @@ export class ListViewComponent implements OnChanges {
     @Output() multipleResourcesSelected?: EventEmitter<FilteredResouces> = new EventEmitter<FilteredResouces>();
 
     /**
-     * @deprecated Use singleResourceSelected instead.
      * Click on an item will emit the resource iri
+     *
+     * @param {EventEmitter<string>} singleResourceSelected
      */
-    @Output() resourceSelected: EventEmitter<string> = new EventEmitter<string>();
+    @Output() singleResourceSelected?: EventEmitter<string> = new EventEmitter<string>();
 
     /**
+     * @deprecated Use singleResourceSelected instead.
      * Click on an item will emit the resource iri
-     *
-     * @param {EventEmitter<string>} singleResourceSelected
      */
-    @Output() singleResourceSelected?: EventEmitter<string> = new EventEmitter<string>();
+    @Output() resourceSelected: EventEmitter<string> = new EventEmitter<string>();
+
 
     resources: ReadResourceSequence;
 
     selectedResourceIdx: number[] = [];
 
+    resetCheckBoxes = false;
+
     // MatPaginator Output
     pageEvent: PageEvent;
 
@@ -99,8 +102,8 @@ export class ListViewComponent implements OnChanges {
 
     constructor(
         @Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
-        private _notification: NotificationService,
         private _advancedSearchParamsService: AdvancedSearchParamsService,
+        private _notification: NotificationService
     ) { }
 
     ngOnChanges(): void {
@@ -161,7 +164,7 @@ export class ListViewComponent implements OnChanges {
                 (response: ReadResourceSequence) => {
                     this.resources = response;
                     this.loading = false;
-                    this.emitSelectedResources({count: 1, resListIndex: [0], resIds: [this.resources.resources[0].id], selectionType: "single"});
+                    this.emitSelectedResources({ count: 1, resListIndex: [0], resIds: [this.resources.resources[0].id], selectionType: "single" });
                 },
                 (error: ApiResponseError) => {
                     this._notification.openSnackBar(error);
@@ -193,7 +196,7 @@ export class ListViewComponent implements OnChanges {
                     (response: ReadResourceSequence) => {
                         this.resources = response;
                         this.loading = false;
-                        this.emitSelectedResources({count: 1, resListIndex: [0], resIds: [this.resources.resources[0].id], selectionType: "single"});
+                        this.emitSelectedResources({ count: 1, resListIndex: [0], resIds: [this.resources.resources[0].id], selectionType: "single" });
                     },
                     (error: ApiResponseError) => {
                         this._notification.openSnackBar(error);

projects/dsp-ui/src/lib/viewer/views/list-view/list-view.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed } from '@angular/core/testing';
+import { ListViewService } from './list-view.service';
+
+describe('ListViewService', () => {
+    let service: ListViewService;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({});
+        service = TestBed.inject(ListViewService);
+    });
+
+    it('should be created', () => {
+        expect(service).toBeTruthy();
+    });
+});

projects/dsp-ui/src/lib/viewer/views/list-view/list-view.service.ts

@@ -0,0 +1,69 @@
+import { Injectable } from '@angular/core';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { CheckboxUpdate, FilteredResouces } from './list-view.component';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ListViewService {
+
+    // for keeping track of multiple selection
+    selectedResourcesCount = 0;
+    selectedResourcesList = [];
+    selectedResourceIdxMultiple = [];
+
+    constructor() { }
+
+    viewResource(status: CheckboxUpdate, withMultipleSelection: boolean, selectedResourceIdx: number [], resChecks: MatCheckbox[]): FilteredResouces {
+
+        // when multiple selection and checkbox is used to select more
+        // than one resources
+        if (withMultipleSelection && status.isCheckbox) {
+
+            if (status.checked) {
+                if (selectedResourceIdx.indexOf(status.resListIndex) <= 0) {
+                    // add resource in to the selected resources list
+                    this.selectedResourcesList.push(status.resId);
+
+                    // increase the count of selected resources
+                    this.selectedResourcesCount += 1;
+
+                    // add resource list index to apply selected class style
+                    this.selectedResourceIdxMultiple.push(status.resListIndex);
+                }
+            } else {
+                // remove resource from the selected resources list
+                let index = this.selectedResourcesList.findIndex(d => d === status.resId);
+                this.selectedResourcesList.splice(index, 1);
+
+                // decrease the count of selected resources
+                this.selectedResourcesCount -= 1;
+
+                // remove resource list index from the selected index list
+                index = this.selectedResourceIdxMultiple.findIndex(d => d === status.resListIndex);
+                this.selectedResourceIdxMultiple.splice(index, 1);
+            }
+            // selectedResourceIdx = selectedResourceIdxMultiple;
+            return { count: this.selectedResourcesCount, resListIndex: this.selectedResourceIdxMultiple, resIds: this.selectedResourcesList, selectionType: "multiple" };
+
+        } else {
+            // else condition when single resource is clicked for viewing
+
+            // unselect checkboxes if any
+            resChecks.forEach(function (ckb) {
+                if (ckb.checked) {
+                    ckb.checked = false;
+                }
+            });
+
+            // reset all the variables for multiple selection
+            this.selectedResourceIdxMultiple = [];
+            this.selectedResourcesCount = 0;
+            this.selectedResourcesList = [];
+
+            // add resource list index to apply selected class style
+            // selectedResourceIdx = [status.resListIndex];
+            return { count: 1, resListIndex: [status.resListIndex], resIds: [status.resId], selectionType: "single" };
+        }
+    }
+}

projects/dsp-ui/src/lib/viewer/views/list-view/resource-grid/resource-grid.component.html

@@ -1,12 +1,11 @@
 <!-- When withMultipleSelection is false and user can select only one resource at a time to view -->
 <div class="resource-grid">
-    <div
-        class="grid-card link"
+    <div class="grid-card link"
         *ngFor="let resource of resources.resources; let i = index;">
         <mat-card [class.selected-resource]="selectedResourceIdx.indexOf(i) > -1">
             <!-- TODO: add the representation preview here, mat-card-image can be used for images -->
             <mat-card-header class="grid-card-header">
-                <mat-card-title-group class="res-class-header-text" (click)="viewResource({ checked: true, resListIndex: i, resId: resource.id, isCheckbox: false})">
+                <mat-card-title-group class="res-class-header-text" (click)="selectResource({ checked: true, resListIndex: i, resId: resource.id, isCheckbox: false})">
                     <mat-card-subtitle class="res-class-label">{{ resource.entityInfo.classes[resource.type].label }}</mat-card-subtitle>
                     <mat-card-title class="res-class-value">{{ resource.label }}</mat-card-title>
                 </mat-card-title-group>
@@ -15,13 +14,13 @@
                 <mat-card-title-group *ngIf="withMultipleSelection" class="res-class-header-actions">
                     <mat-checkbox #gridCkbox
                         id="{{ i }}"
-                        (change)="viewResource({ checked: $event.checked, resListIndex: i, resId: resource.id, isCheckbox: true})"
+                        (change)="selectResource({ checked: $event.checked, resListIndex: i, resId: resource.id, isCheckbox: true})"
                         class="res-checkbox">
                     </mat-checkbox>
                 </mat-card-title-group>
 
             </mat-card-header>
-            <div (click)="viewResource({ checked: true, resListIndex: i, resId: resource.id, isCheckbox: false})">
+            <div (click)="selectResource({ checked: true, resListIndex: i, resId: resource.id, isCheckbox: false})">
                 <mat-card-content class="grid-card-content" *ngFor="let prop of resource.properties | keyvalue">
                     <div *ngFor="let val of prop.value">
                         <span class="res-prop-label">

projects/dsp-ui/src/lib/viewer/views/list-view/resource-grid/resource-grid.component.ts

@@ -1,7 +1,8 @@
 import { Component, EventEmitter, Input, Output, ViewChildren } from '@angular/core';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { ReadResourceSequence } from '@dasch-swiss/dsp-js';
-import { FilteredResouces, checkboxUpdate } from '../list-view.component';
+import { CheckboxUpdate, FilteredResouces } from '../list-view.component';
+import { ListViewService } from '../list-view.service';
 
 @Component({
     selector: 'dsp-resource-grid',
@@ -41,69 +42,17 @@ export class ResourceGridComponent {
       */
     @Output() resourcesSelected?: EventEmitter<FilteredResouces> = new EventEmitter<FilteredResouces>();
 
-    // for keeping track of multiple selection
-    selectedResourcesCount = 0;
-    selectedResourcesList = [];
-    selectedResourceIdxMultiple = [];
+    constructor(
+        private _listView: ListViewService
+    ) { }
 
-    constructor() { }
+    selectResource(status: CheckboxUpdate) {
+        const selection = this._listView.viewResource(status, this.withMultipleSelection, this.selectedResourceIdx, this.resChecks);
 
-    /**
-     * Maintain the list and count of selected resources
-     *
-     * @param {checkboxUpdate} checkbox value and resource index
-     */
-     viewResource(status: checkboxUpdate) {
-      // when multiple selection and checkbox is used to select more
-      // than one resources
-      if (this.withMultipleSelection && status.isCheckbox) {
-        if (status.checked) {
-          if(this.selectedResourceIdx.indexOf(status.resListIndex) < 0) {
-            // add resource in to the selected resources list
-            this.selectedResourcesList.push(status.resId);
-
-            // increase the count of selected resources
-            this.selectedResourcesCount += 1;
-
-            // add resource list index to apply selected class style
-            this.selectedResourceIdxMultiple.push(status.resListIndex);
-          }
-        }
-        else {
-          // remove resource from the selected resources list
-          let index = this.selectedResourcesList.findIndex(d => d === status.resId);
-          this.selectedResourcesList.splice(index, 1);
-
-          // decrease the count of selected resources
-          this.selectedResourcesCount -= 1;
-
-          // remove resource list index from the selected index list
-          index = this.selectedResourceIdxMultiple.findIndex(d => d === status.resListIndex);
-          this.selectedResourceIdxMultiple.splice(index, 1);
-        }
-
-        this.selectedResourceIdx = this.selectedResourceIdxMultiple;
-        this.resourcesSelected.emit({count: this.selectedResourcesCount, resListIndex: this.selectedResourceIdx, resIds: this.selectedResourcesList, selectionType: "multiple"});
-
-      } else {
-        // else condition when single resource is clicked for viewing
-
-        // unselect checkboxes if any
-        this.resChecks.forEach(function(ckb){
-          if(ckb.checked) {
-            ckb.checked = false;
-          }
-        });
+        this.selectedResourceIdx = selection.resListIndex;
 
-        // reset all the variables for multiple selection
-        this.selectedResourceIdxMultiple = [];
-        this.selectedResourcesCount = 0;
-        this.selectedResourcesList = [];
+        this.resourcesSelected.emit(selection);
 
-        // add resource list index to apply selected class style
-        this.selectedResourceIdx = [status.resListIndex];
-        this.resourcesSelected.emit({count: 1, resListIndex: this.selectedResourceIdx, resIds: [status.resId], selectionType: "single"});
-      }
     }
 
 }

projects/dsp-ui/src/lib/viewer/views/list-view/resource-list/resource-list.component.html

@@ -1,13 +1,12 @@
 <!-- When withMultipleSelection is false and user can select only one resource at a time to view -->
 <mat-list class="resource-list">
-    <div
-        class="link"
+    <div class="link"
         [class.selected-resource]="selectedResourceIdx.indexOf(i) > -1"
         [class.border-bottom]="!last"
         *ngFor="let resource of resources.resources; let i = index; let last = last">
         <mat-list-item>
             <mat-icon matListIcon>image_search</mat-icon>
-            <div matLine (click)="viewResource({ checked: true, resListIndex: i, resId: resource.id, isCheckbox: false})">
+            <div matLine (click)="selectResource({ checked: true, resListIndex: i, resId: resource.id, isCheckbox: false})">
                 <p matLine class="res-class-label">
                     {{ resource.entityInfo.classes[resource.type].label }}
                 </p>
@@ -28,7 +27,7 @@ <h3 matLine class="res-class-value">{{ resource.label }}</h3>
             <mat-checkbox #ckbox
                 *ngIf="withMultipleSelection"
                 id="{{ i }}"
-                (change)="viewResource({ checked: $event.checked, resListIndex: i, resId: resource.id, isCheckbox: true})"
+                (change)="selectResource({ checked: $event.checked, resListIndex: i, resId: resource.id, isCheckbox: true})"
                 class="res-checkbox">
             </mat-checkbox>
         </mat-list-item>