diff --git a/projects/dsp-ui/src/lib/action/action.module.ts b/projects/dsp-ui/src/lib/action/action.module.ts
index 17b1f35e2..a65c34e44 100644
--- a/projects/dsp-ui/src/lib/action/action.module.ts
+++ b/projects/dsp-ui/src/lib/action/action.module.ts
@@ -30,6 +30,7 @@ import { KnoraDatePipe } from './pipes/formatting/knoradate.pipe';
import { StringifyStringLiteralPipe } from './pipes/string-transformation/stringify-string-literal.pipe';
import { TruncatePipe } from './pipes/string-transformation/truncate.pipe';
import { SelectProjectComponent } from './components/select-project/select-project.component';
+import { SelectedResourcesComponent } from './components/selected-resources/selected-resources.component';
@NgModule({
declarations: [
@@ -49,7 +50,8 @@ import { SelectProjectComponent } from './components/select-project/select-proje
StringifyStringLiteralPipe,
StringLiteralInputComponent,
SelectProjectComponent,
- TruncatePipe
+ TruncatePipe,
+ SelectedResourcesComponent
],
imports: [
BrowserAnimationsModule,
@@ -85,7 +87,8 @@ import { SelectProjectComponent } from './components/select-project/select-proje
StringifyStringLiteralPipe,
StringLiteralInputComponent,
SelectProjectComponent,
- TruncatePipe
+ TruncatePipe,
+ SelectedResourcesComponent
]
})
diff --git a/projects/dsp-ui/src/lib/action/components/selected-resources/selected-resources.component.html b/projects/dsp-ui/src/lib/action/components/selected-resources/selected-resources.component.html
new file mode 100644
index 000000000..f681553a1
--- /dev/null
+++ b/projects/dsp-ui/src/lib/action/components/selected-resources/selected-resources.component.html
@@ -0,0 +1,20 @@
+
+
+
Number of resources selected: {{ resCount }}
+
+
Ids of the Selected resources are:
+
+
+ description
+ {{ id }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/projects/dsp-ui/src/lib/action/components/selected-resources/selected-resources.component.scss b/projects/dsp-ui/src/lib/action/components/selected-resources/selected-resources.component.scss
new file mode 100644
index 000000000..91a167eb8
--- /dev/null
+++ b/projects/dsp-ui/src/lib/action/components/selected-resources/selected-resources.component.scss
@@ -0,0 +1,37 @@
+
+.selected-resources {
+ margin-top: 10px;
+
+ .mat-list-item {
+ height: auto;
+
+ .mat-icon {
+ font-size: 20px;
+ color: #673ab7;
+ }
+
+ .mat-line {
+ white-space: normal !important;
+ }
+
+ .mat-list-item {
+ margin-left: 0px;
+ }
+ }
+}
+
+.res-ids-container {
+ margin: 8px;
+}
+
+.res-value {
+ color: #673ab7;
+}
+
+.action-buttons {
+ margin-top: 20px;
+
+ .res-action {
+ margin: 4px;
+ }
+}
\ No newline at end of file
diff --git a/projects/dsp-ui/src/lib/action/components/selected-resources/selected-resources.component.spec.ts b/projects/dsp-ui/src/lib/action/components/selected-resources/selected-resources.component.spec.ts
new file mode 100644
index 000000000..740646f50
--- /dev/null
+++ b/projects/dsp-ui/src/lib/action/components/selected-resources/selected-resources.component.spec.ts
@@ -0,0 +1,62 @@
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { Component, ViewChild } from '@angular/core';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatListModule } from '@angular/material/list';
+
+import { SelectedResourcesComponent } from './selected-resources.component';
+
+/**
+ * Test host component to simulate parent component.
+ */
+ @Component({
+ selector: `dsp-selected-resources-host-component`,
+ template: `
+
+ `
+})
+class TestHostSelectedResourcesComponent {
+
+ @ViewChild('selectedResources') selectedResources: SelectedResourcesComponent;
+
+ selectedResCount = 2;
+ selectedRes = ['http://rdfh.ch/0001/H6gBWUuJSuuO-CilHV8kQw', 'http://rdfh.ch/0010/H6gBWUuJSuuO-CilddsgfdQw'];
+
+ getActionType(action: string) {
+ console.log(action);
+ }
+}
+
+describe('SelectedResourcesComponent', () => {
+ let testHostComponent: TestHostSelectedResourcesComponent
+ let testHostFixture: ComponentFixture;
+ let loader: HarnessLoader;
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ declarations: [
+ SelectedResourcesComponent,
+ TestHostSelectedResourcesComponent
+ ],
+ imports: [
+ MatListModule,
+ MatButtonModule,
+ MatIconModule
+ ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ testHostFixture = TestBed.createComponent(TestHostSelectedResourcesComponent);
+ testHostComponent = testHostFixture.componentInstance;
+ loader = TestbedHarnessEnvironment.loader(testHostFixture);
+ testHostFixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(testHostComponent.selectedResources).toBeTruthy();
+ });
+});
diff --git a/projects/dsp-ui/src/lib/action/components/selected-resources/selected-resources.component.ts b/projects/dsp-ui/src/lib/action/components/selected-resources/selected-resources.component.ts
new file mode 100644
index 000000000..a61d7d7de
--- /dev/null
+++ b/projects/dsp-ui/src/lib/action/components/selected-resources/selected-resources.component.ts
@@ -0,0 +1,36 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+ selector: 'dsp-selected-resources',
+ templateUrl: './selected-resources.component.html',
+ styleUrls: ['./selected-resources.component.scss']
+})
+export class SelectedResourcesComponent {
+
+ // actions which can be applied on selected resources
+ resourceAction: 'compare' | 'edit' | 'delete' | 'starred' | 'cancel';
+
+ // total number of resources selected
+ @Input() resCount: number;
+
+ // list of selected resources ids
+ @Input() resIds: string[];
+
+ // return selected actions and other info if any
+ @Output() actionType: EventEmitter = new EventEmitter();
+
+ constructor() { }
+
+ // return compare action
+ compareResources() {
+ this.resourceAction = 'compare';
+ this.actionType.emit(this.resourceAction);
+ }
+
+ // cancel action
+ cancelSelection() {
+ this.resourceAction = 'cancel';
+ this.actionType.emit(this.resourceAction);
+ }
+
+}
diff --git a/projects/dsp-ui/src/lib/action/index.ts b/projects/dsp-ui/src/lib/action/index.ts
index df3e33893..b7ebae74a 100644
--- a/projects/dsp-ui/src/lib/action/index.ts
+++ b/projects/dsp-ui/src/lib/action/index.ts
@@ -21,6 +21,7 @@ export * from './components/string-literal-input/string-literal-input.component'
export * from './components/confirmation-dialog/confirmation-dialog.component';
export * from './components/confirmation-dialog/confirmation-message/confirmation-message.component';
export * from './components/select-project/select-project.component';
+export * from './components/selected-resources/selected-resources.component';
// directives
export * from './directives/admin-image/admin-image.directive';
diff --git a/src/app/action-playground/action-playground.component.html b/src/app/action-playground/action-playground.component.html
index bce89f053..97ff9ec09 100644
--- a/src/app/action-playground/action-playground.component.html
+++ b/src/app/action-playground/action-playground.component.html
@@ -10,6 +10,9 @@
-->
+Selected resources Component
+
+
Select project component
diff --git a/src/app/action-playground/action-playground.component.ts b/src/app/action-playground/action-playground.component.ts
index 91fab3f12..f83e926d2 100644
--- a/src/app/action-playground/action-playground.component.ts
+++ b/src/app/action-playground/action-playground.component.ts
@@ -134,6 +134,10 @@ export class ActionPlaygroundComponent implements OnInit {
confirmationDialogResponse: string;
showTimedMessage: boolean;
+ // selected resources action
+ selectedResCount = 4;
+ selectedRes = ['http://rdfh.ch/0001/H6gBWUuJSuuO-CilHV8kQw', 'http://rdfh.ch/0010/H6gBWUuJSuuO-CilddsgfdQw', 'http://rdfh.ch/0004/H6gBWdvdSuuO-dgdsg', 'http://rdfh.ch/0009/H6ddgdfgfuJSuuO-gdfsg'];
+
constructor(
private _sortingService: SortingService,
private _dialog: MatDialog
@@ -202,7 +206,13 @@ export class ActionPlaygroundComponent implements OnInit {
setTimeout(() => { this.showTimedMessage = false; }, 2100);
}
+ // selected-project
getSelectedProject(selectedProject: ReadProject) {
console.log(selectedProject);
}
+
+ // selected-reources - get action type
+ getActionType(action: string) {
+ console.log(action);
+ }
}