Skip to content

Commit

Permalink
refactor(resource): clean up code and refactoring (DSP-1816) (#319)
Browse files Browse the repository at this point in the history
* refactor(resource): clean up code and refactoring

* chore(deps): bump dsp-js to latest version

* refactor(resource): move same method to one service

* refactor(viewer): format code

* fix(viewer): fix grid list
  • Loading branch information
kilchenmann committed Jul 26, 2021
1 parent 2fd0bc1 commit 3b6b32c
Show file tree
Hide file tree
Showing 10 changed files with 18,597 additions and 183 deletions.
18,493 changes: 18,471 additions & 22 deletions package-lock.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion projects/dsp-ui/package.json
Expand Up @@ -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",
Expand Down
Expand Up @@ -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'"
Expand Down
Expand Up @@ -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,
Expand All @@ -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;

/**
Expand All @@ -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;

Expand All @@ -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 {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down
@@ -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();
});
});
@@ -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" };
}
}
}
@@ -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>
Expand All @@ -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">
Expand Down
@@ -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',
Expand Down Expand Up @@ -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"});
}
}

}
@@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit 3b6b32c

Please sign in to comment.