Commit 14d37123 authored by François Agneray's avatar François Agneray
Browse files

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

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

Closes #35

See merge request !52
parents 87ac3b7c abcee6f7
Pipeline #1509 passed with stages
in 10 minutes and 14 seconds
......@@ -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
......
......@@ -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,
......
......@@ -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
})
......
......@@ -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
];
......@@ -5,10 +5,6 @@
border-radius: .25rem;
}
.anis-color {
color: #7AC29A;
}
.letter-spacing {
letter-spacing: 2px;
}
......
......@@ -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
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;
}
}
.modal-fit {
width: fit-content;
max-width: 95%;
}
\ No newline at end of file
<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
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();
}
}
<a [href]="href" target="_blank" class="btn btn-outline-primary btn-sm">
{{ data }}
</a>
\ No newline at end of file
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;
}
<a routerLink="/detail/{{ datasetName }}/{{ data }}" class="btn btn-outline-primary btn-sm">
{{ data }}
</a>
\ No newline at end of file
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;
}
<a routerLink="/detail/{{ datasetName }}/{{ data }}">
{{ data }}
</a>
\ No newline at end of file
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;
}
<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
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-download',
templateUrl: 'download.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DownloadComponent {
@Input() href: string;
}
<img [src]="src">
\ No newline at end of file
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-img',
templateUrl: 'img.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ImgComponent {
@Input() src: string;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment