Merge branch '35-checkbox-result-action' into 'develop'

Resolve "Checkbox pour telecharger une archive des objets selectionnés"

Closes #35

See merge request !52

src/app/search/components/criteria/criteria-by-family.component.html

@@ -64,9 +64,9 @@
             </app-datetime>
         </div>
         <div *ngSwitchCase="'json'">
-            <app-json class="criteria" [id]="attribute.id" [label]="attribute.form_label"
+            <app-json-criteria class="criteria" [id]="attribute.id" [label]="attribute.form_label"
                 [criterion]="getCriterion(attribute.id)" (add)="add($event)" (delete)="delete($event)">
-            </app-json>
+            </app-json-criteria>
         </div>
         <div *ngSwitchDefault>
             {{ attribute.search_type }} search type not supported

src/app/search/components/criteria/search-type/index.ts

@@ -11,7 +11,7 @@ import { TimeComponent } from './time.component';
 import { DatetimeComponent } from './datetime.component';
 import { JsonComponent } from './json.component';
 
-export const criteriaComponents = [
+export const SearchTypeComponents = [
     FieldComponent,
     BetweenComponent,
     SelectComponent,

src/app/search/components/criteria/search-type/json.component.ts

@@ -4,7 +4,7 @@ import { FormControl, FormGroup } from '@angular/forms';
 import { JsonCriterion, Criterion } from '../../../store/model';
 
 @Component({
-    selector: 'app-json',
+    selector: 'app-json-criteria',
     templateUrl: 'json.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })

src/app/search/components/index.ts

@@ -7,10 +7,10 @@ import { OutputTabsComponent } from './output/output-tabs.component';
 import { OutputByFamilyComponent } from './output/output-by-family.component';
 import { OutputByCategoryComponent } from './output/output-by-category.component';
 import { SummaryComponent } from './summary.component';
-import { criteriaComponents } from './criteria/search-type';
+import { SearchTypeComponents } from './criteria/search-type';
 import { UrlDisplayComponent } from './result/url-display.component';
 import { DatatableComponent } from './result/datatable.component';
-import { ModalComponent } from './result/modal.component';
+import { RendererComponents } from './result/renderer';
 
 export const dummiesComponents = [
     ProgressComponent,
@@ -21,9 +21,9 @@ export const dummiesComponents = [
     OutputTabsComponent,
     OutputByFamilyComponent,
     OutputByCategoryComponent,
-    criteriaComponents,
+    SearchTypeComponents,
     SummaryComponent,
     UrlDisplayComponent,
     DatatableComponent,
-    ModalComponent
+    RendererComponents
 ];

src/app/search/components/output/output-by-category.component.css

@@ -5,10 +5,6 @@
     border-radius: .25rem;
 }
 
-.anis-color {
-    color: #7AC29A;
-}
-
 .letter-spacing {
     letter-spacing: 2px;
 }

src/app/search/components/result/datatable.component.html

@@ -17,56 +17,55 @@
                 <table class="table table-striped table-bordered">
                     <thead>
                         <tr>
+                            <th></th>
                             <th *ngFor="let attribute of searchMeta.attributes_selected" scope="col">
                                 {{ attribute.label }}</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr *ngFor="let datum of searchData">
+                            <td>
+                                <button class="btn btn-block text-left py-0 m-0"
+                                    (click)="toggleSelection(datum.id)">
+                                    <div *ngIf="isSelected(datum.id); then selected else unselected"></div>
+                                </button>
+                            </td>
                             <td *ngFor="let attribute of searchMeta.attributes_selected">
                                 <div *ngIf="datum[attribute.label]" [ngSwitch]="getAttributeRenderer(attribute.name)">
                                     <div *ngSwitchCase="'img'">
-                                        <img [src]="getAttributeUriAction(attribute.name, datum[attribute.label])">
+                                        <app-img [src]="getAttributeUriAction(attribute.name, datum[attribute.label])">
+                                        </app-img>
                                     </div>
                                     <div *ngSwitchCase="'thumbnail'">
-                                        <button class="btn btn-link"
-                                            (click)="openModal('thumbnail', attribute.name, datum[attribute.label])">
-                                            <img [src]="getAttributeUriAction(attribute.name, datum[attribute.label])"
-                                                class="img-fluid">
-                                        </button>
+                                        <app-thumbnail [attributeName]="attribute.name"
+                                            [src]="getAttributeUriAction(attribute.name, datum[attribute.label])">
+                                        </app-thumbnail>
                                     </div>
                                     <div *ngSwitchCase="'link'">
-                                        <a [href]="getAttributeUriAction(attribute.name, datum[attribute.label])"
-                                            target="_blank">
-                                            {{ datum[attribute.name] }}</a>
+                                        <app-link [href]="getAttributeUriAction(attribute.name, datum[attribute.label])"
+                                            [data]="datum[attribute.name]"></app-link>
                                     </div>
                                     <div *ngSwitchCase="'btn'">
-                                        <a [href]="getAttributeUriAction(attribute.name, datum[attribute.label])"
-                                            target="_blank" class="btn btn-outline-primary btn-sm">
-                                            {{ datum[attribute.label] }}</a>
+                                        <app-btn [href]="getAttributeUriAction(attribute.name, datum[attribute.label])"
+                                            [data]="datum[attribute.name]"></app-btn>
                                     </div>
                                     <div *ngSwitchCase="'detail-link'">
-                                        <a routerLink="/detail/{{ datasetName }}/{{ datum[attribute.label] }}">
-                                            {{ datum[attribute.label] }}
-                                        </a>
+                                        <app-detail-link [datasetName]="datasetName" [data]="datum[attribute.label]">
+                                        </app-detail-link>
                                     </div>
                                     <div *ngSwitchCase="'detail-btn'">
-                                        <a routerLink="/detail/{{ datasetName }}/{{ datum[attribute.label] }}"
-                                            class="btn btn-outline-primary btn-sm">
-                                            {{ datum[attribute.label] }}
-                                        </a>
+                                        <app-detail-btn [datasetName]="datasetName" [data]="datum[attribute.label]">
+                                        </app-detail-btn>
                                     </div>
                                     <div *ngSwitchCase="'download'">
-                                        <a [href]="getAttributeUriAction(attribute.name, datum[attribute.label])"
-                                            target="_blank" class="btn btn-outline-primary btn-sm">
-                                            <i class="fa fa-download" aria-hidden="true"></i>
-                                        </a>
+                                        <app-download
+                                            [href]="getAttributeUriAction(attribute.name, datum[attribute.label])">
+                                        </app-download>
                                     </div>
                                     <div *ngSwitchCase="'json'" class="text-center">
-                                        <button class="btn btn-outline-primary btn-sm"
-                                            (click)="openModal('json', attribute.name, datum[attribute.label])">
-                                            JSON
-                                        </button>
+                                        <app-json-renderer [attributeName]="attribute.name"
+                                            [json]="datum[attribute.label]">
+                                        </app-json-renderer>
                                     </div>
                                     <div *ngSwitchDefault>
                                         {{ datum[attribute.label] }}
@@ -88,6 +87,14 @@
     </accordion-group>
 </accordion>
 
-<app-modal *ngIf="modalData.isOpen" [bsModalRef]="bsModalRef" [type]="modalData.type" [data]="modalData.data"
-    (closeEvent)="closeModal($event)">
-</app-modal>
\ No newline at end of file
+<ng-template #selected>
+    <span class="fa-stack fa-1x">
+        <i class="far fa-square fa-stack-1x text-secondary"></i>
+        <i class="fas fa-check fa-stack-1x theme-color"></i>
+    </span>
+</ng-template>
+<ng-template #unselected>
+    <span class="fa-stack fa-1x">
+        <i class="far fa-square fa-stack-1x text-secondary"></i>
+    </span>
+</ng-template>
\ No newline at end of file

src/app/search/components/result/datatable.component.ts

 import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
-import { BsModalRef } from 'ngx-bootstrap/modal';
 
 import { SearchMeta, SearchQueryParams } from '../../store/model';
 import { Attribute } from 'src/app/metamodel/model';
 
-interface ModalData {
-    isOpen: boolean;
-    type: string;
-    data: object;
-}
-
 @Component({
     selector: 'app-datatable',
     templateUrl: 'datatable.component.html',
@@ -25,13 +18,7 @@ export class DatatableComponent {
     @Output() initSearchMeta: EventEmitter<{}> = new EventEmitter();
     @Output() getSearchData: EventEmitter<number> = new EventEmitter();
 
-    bsModalRef: BsModalRef;
-
-    modalData: ModalData = {
-        isOpen: false,
-        type: null,
-        data: null
-    };
+    public selection: number[] = [];
 
     initDatatable() {
         this.initSearchMeta.emit();
@@ -57,33 +44,19 @@ export class DatatableComponent {
         }
     }
 
-    openModal(type: string, attributeName: string, value: string) {
-        this.modalData.type = type;
-        if (type === 'thumbnail') {
-            this.modalData.data = {
-                title: value,
-                srcImage: this.getAttributeUriAction(attributeName, value)
-            };
-        } else if (type === 'fancybox') {
-            this.modalData.data = {
-                title: value,
-                datasetName: this.datasetName,
-                objectSelected: value,
-                searchMeta: this.searchMeta,
-                searchData: this.searchData
-            };
-        } else if (type === 'json') {
-            this.modalData.data = {
-                title: attributeName,
-                json: value
-            };
+    toggleSelection(attributeId: number): void {
+        const index = this.selection.indexOf(attributeId);
+        if (index > -1) {
+            this.selection.splice(index, 1);
+        } else {
+            this.selection.push(attributeId);
         }
-        this.modalData.isOpen = true;
     }
 
-    closeModal(event: null) {
-        this.modalData.isOpen = false;
-        this.modalData.type = null;
-        this.modalData.data = null;
+    isSelected(attributeId: number): boolean {
+        if (this.selection.indexOf(attributeId) > -1) {
+            return true;
+        }
+        return false;
     }
 }

src/app/search/components/result/modal.component.css

-.modal-fit {
-    width: fit-content;
-    max-width: 95%;
-}
\ No newline at end of file

src/app/search/components/result/modal.component.html

-<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="dialog-sizes-name1"
-    [config]="config">
-    <div class="modal-dialog modal-fit">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h4 id="dialog-sizes-name1" class="modal-title pull-left">{{ data['title'] }}</h4>
-                <button type="button" class="close pull-right" (click)="closeModal(lgModal)" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div [ngSwitch]="type">
-                <div *ngSwitchCase="'thumbnail'">
-                    <div class="modal-body text-center">
-                        <img [src]="data.srcImage" class="img-fluid">
-                    </div>
-                </div>
-                <div *ngSwitchCase="'json'">
-                    <div class="modal-body">
-                        <ngx-json-viewer [json]="data.json"></ngx-json-viewer>
-                    </div>
-                </div>
-                <div *ngSwitchDefault>
-                    {{ type }} type not supported
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
\ No newline at end of file

src/app/search/components/result/modal.component.ts

-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { BsModalRef } from 'ngx-bootstrap/modal';
-
-@Component({
-    selector: 'app-modal',
-    templateUrl: 'modal.component.html',
-    styleUrls: ['modal.component.css'],
-})
-export class ModalComponent {
-    @Input() bsModalRef: BsModalRef;
-    @Input() type: string;
-    @Input() data: object;
-    @Output() closeEvent: EventEmitter<null> = new EventEmitter();
-
-    config = {
-        show: true,
-        ignoreBackdropClick: true
-    };
-
-    closeModal(modal) {
-        modal.hide();
-        this.closeEvent.emit();
-    }
-}

src/app/search/components/result/renderer/btn.component.html

+<a [href]="href" target="_blank" class="btn btn-outline-primary btn-sm">
+    {{ data }}
+</a>
\ No newline at end of file

src/app/search/components/result/renderer/btn.component.ts

+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+    selector: 'app-btn',
+    templateUrl: 'btn.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BtnComponent {
+    @Input() href: string;
+    @Input() data: string|number;
+}

src/app/search/components/result/renderer/detail-btn.component.html

+<a routerLink="/detail/{{ datasetName }}/{{ data }}" class="btn btn-outline-primary btn-sm">
+    {{ data }}
+</a>
\ No newline at end of file

src/app/search/components/result/renderer/detail-btn.component.ts

+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+    selector: 'app-detail-btn',
+    templateUrl: 'detail-btn.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DetailBtnComponent {
+    @Input() datasetName: string;
+    @Input() data: string|number;
+}

src/app/search/components/result/renderer/detail-link.component.html

+<a routerLink="/detail/{{ datasetName }}/{{ data }}">
+    {{ data }}
+</a>
\ No newline at end of file

src/app/search/components/result/renderer/detail-link.component.ts

+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+    selector: 'app-detail-link',
+    templateUrl: 'detail-link.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DetailLinkComponent {
+    @Input() datasetName: string;
+    @Input() data: string|number;
+}

src/app/search/components/result/renderer/download.component.html

+<a [href]="href" target="_blank"
+    class="btn btn-outline-primary btn-sm">
+    <i class="fa fa-download" aria-hidden="true"></i>
+</a>
\ No newline at end of file

src/app/search/components/result/renderer/download.component.ts

+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+    selector: 'app-download',
+    templateUrl: 'download.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DownloadComponent {
+    @Input() href: string;
+}

src/app/search/components/result/renderer/img.component.html

+<img [src]="src">
\ No newline at end of file

src/app/search/components/result/renderer/img.component.ts

+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+    selector: 'app-img',
+    templateUrl: 'img.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ImgComponent {
+    @Input() src: string;
+}