Commit 0ecc16cd authored by François Agneray's avatar François Agneray
Browse files

#56 => done

parent e6543ce9
Pipeline #4918 passed with stages
in 10 minutes and 31 seconds
......@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changed
- #52: Update dependencies (Angular v11, ngrx v11, ...)
- #56: Cone-search configuration improvement
## [3.5.0]
### Added
......
<form name="form" (ngSubmit)="f.form.valid && emit(f.form.value)" #f="ngForm" novalidate>
<div class="form-group">
<label for="name">Name</label>
<input id="name" type="text" class="form-control" name="name" [ngModel]="model.name" [disabled]="model.name" required>
</div>
<div class="form-group">
<label for="label">Label</label>
<input id="label" type="text" class="form-control" name="label" [ngModel]="model.label" required>
</div>
<div class="form-group">
<label for="project_name">Project</label>
<select id="project_name" class="form-control" name="project_name" [ngModel]="model.project_name" [disabled]="model.project_name" required (change)="onChange($event.target.value)">
<option>{{ model.project_name }}</option>
<option *ngFor="let project of projectList" [value]="project.name" [selected]="project.name === model.project_name">{{ project.label }}</option>
</select>
</div>
<div class="form-group">
<label for="table_ref">Table Ref</label>
<select id="table_ref" class="form-control" name="table_ref" [ngModel]="model.table_ref" [disabled]="model.table_ref" required>
<option>{{ model.table_ref }}</option>
<option *ngFor="let table of tableList" [value]="table" [selected]="table === model.table_ref">{{ table }}</option>
</select>
</div>
<div class="form-group">
<label for="id_dataset_family">Family</label>
<input id="id_dataset_family" *ngIf="idDatasetFamilyQueryParam > 0" type="text" class="form-control" name="datasetFamilySelected" value="{{ getDatasetFamilyByIdQueryParam().label }}" disabled required>
<select *ngIf="idDatasetFamilyQueryParam === 0" class="form-control" name="id_dataset_family" [ngModel]="model.id_dataset_family" required>
<option></option>
<option *ngFor="let family of datasetFamilyList" [value]="family.id" [selected]="family.id === model.id_dataset_family">{{ family.label }}</option>
</select>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea id="description" class="form-control" rows="5" name="description" [ngModel]="model.description" required></textarea>
</div>
<div class="form-group">
<label for="data_path">Data path</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button (click)="openModal(template); $event.stopPropagation()" class="btn btn-outline-secondary" type="button">
<i class="fas fa-folder-open"></i>
</button>
</div>
<input id="data_path" type="text" class="form-control" name="data_path" [ngModel]="model.data_path">
</div>
</div>
<div class="form-group">
<div class="form-row">
<div class="col-auto">
<accordion [isAnimated]="true">
<accordion-group heading="General information" [isOpen]="'true'">
<div class="form-group">
<label for="name">Name</label>
<input id="name" type="text" class="form-control" name="name" [ngModel]="model.name" [disabled]="model.name" required>
</div>
<div class="form-group">
<label for="label">Label</label>
<input id="label" type="text" class="form-control" name="label" [ngModel]="model.label" required>
</div>
<div class="form-group">
<label for="project_name">Project</label>
<select id="project_name" class="form-control" name="project_name" [ngModel]="model.project_name" [disabled]="model.project_name" required (change)="onChange($event.target.value)">
<option>{{ model.project_name }}</option>
<option *ngFor="let project of projectList" [value]="project.name" [selected]="project.name === model.project_name">{{ project.label }}</option>
</select>
</div>
<div class="form-group">
<label for="table_ref">Table Ref</label>
<select id="table_ref" class="form-control" name="table_ref" [ngModel]="model.table_ref" [disabled]="model.table_ref" required>
<option>{{ model.table_ref }}</option>
<option *ngFor="let table of tableList" [value]="table" [selected]="table === model.table_ref">{{ table }}</option>
</select>
</div>
<div class="form-group">
<label for="id_dataset_family">Family</label>
<input id="id_dataset_family" *ngIf="idDatasetFamilyQueryParam > 0" type="text" class="form-control" name="datasetFamilySelected" value="{{ getDatasetFamilyByIdQueryParam().label }}" disabled required>
<select *ngIf="idDatasetFamilyQueryParam === 0" class="form-control" name="id_dataset_family" [ngModel]="model.id_dataset_family" required>
<option></option>
<option *ngFor="let family of datasetFamilyList" [value]="family.id" [selected]="family.id === model.id_dataset_family">{{ family.label }}</option>
</select>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea id="description" class="form-control" rows="5" name="description" [ngModel]="model.description" required></textarea>
</div>
<div class="form-group">
<label for="data_path">Data path</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button (click)="openModal(template); $event.stopPropagation()" class="btn btn-outline-secondary" type="button">
<i class="fas fa-folder-open"></i>
</button>
</div>
<input id="data_path" type="text" class="form-control" name="data_path" [ngModel]="model.data_path">
</div>
</div>
<div class="form-group">
<label for="display">Display</label>
<input id="display" type="number" class="form-control" name="display" [ngModel]="model.display" required>
</div>
<div class="col-auto">
<div class="form-group">
<label for="count">Count</label>
<input id="count" type="number" class="form-control" name="count" [ngModel]="model.count">
</div>
<div class="col-auto">
<label for="vo">VO format</label>
<input id="vo" type="checkbox" class="form-control" name="vo" [ngModel]="model.vo">
</div><div class="col-auto">
<label for="public">Public</label>
<input id="public" type="checkbox" class="form-control" name="public" [ngModel]="model.public">
<div class="form-check mb-2">
<input class="form-check-input" id="vo" type="checkbox" name="vo" [ngModel]="model.vo">
<label class="form-check-label" for="vo">VO format</label>
</div>
</div>
</div>
<hr>
<h4>Cone-Search: </h4>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="cone_search" name="cone_search" [ngModel]="getConfigConeSearchEnabled()">
<label class="form-check-label" for="cone_search">Enabled</label>
</div>
<!-- <div *ngIf="ngForm.form.value.cone_search" class="form-group">-->
<div class="form-group">
<div class="form-row">
<div class="col-6">
<label for="column_ra">Column RA</label>
<input id="column_ra"
type="number"
class="form-control"
name="column_ra"
[disabled]="!ngForm.form.value.cone_search"
[ngModel]="getConfigConeSearchCol('column_ra')">
</div>
<div class="col-6">
<label for="column_dec">Column DEC</label>
<input id="column_dec"
type="number"
class="form-control"
name="column_dec"
[disabled]="!ngForm.form.value.cone_search"
[ngModel]="getConfigConeSearchCol('column_dec')">
<div class="form-check mb-2">
<input class="form-check-input" id="public" type="checkbox" name="public" [ngModel]="model.public">
<label class="form-check-label" for="public">Public</label>
</div>
</div>
</div>
<hr>
<h4>Config: </h4>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="results_server_link" name="results_server_link" [ngModel]="getConfig('results_server_link')">
<label class="form-check-label" for="results_server_link">Display server link to the results</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="opened_datatable" name="opened_datatable" [ngModel]="getConfig('opened_datatable')">
<label class="form-check-label" for="opened_datatable">Open the results datatable accordion</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="selectable_row" name="selectable_row" [ngModel]="getConfig('selectable_row')">
<label class="form-check-label" for="selectable_row">Datatable rows selectable</label>
</div>
<div class="form-check pt-3">
<input class="form-check-input" type="checkbox" id="download_result_csv" name="download_result_csv" [ngModel]="getConfigDownloadResultFormat('csv')">
<label class="form-check-label" for="download_result_csv">Display download results button in CSV format</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="download_result_ascii" name="download_result_ascii" [ngModel]="getConfigDownloadResultFormat('ascii')">
<label class="form-check-label" for="download_result_ascii">Display download results button in ASCII format</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="download_result_spectra" name="download_result_spectra" [ngModel]="getConfigDownloadResultFormat('spectra')">
<label class="form-check-label" for="download_result_spectra">Display download results button in Spectra format</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="download_result_stamp" name="download_result_stamp" [ngModel]="getConfigDownloadResultFormat('stamp')">
<label class="form-check-label" for="download_result_stamp">Display download results button in Stamp format</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="download_result_vo" name="download_result_vo" [ngModel]="getConfigDownloadResultFormat('vo')">
<label class="form-check-label" for="download_result_vo">Display download results button in VO format</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="download_result_fits" name="download_result_fits" [ngModel]="getConfigDownloadResultFormat('fits')">
<label class="form-check-label" for="download_result_fits">Display download results button in FITS format</label>
</div>
</accordion-group>
<accordion-group heading="Cone-search configuration" [isDisabled]="isConeSearchDisabled()">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="cone_search" name="cone_search" [ngModel]="getConfigConeSearchEnabled()">
<label class="form-check-label" for="cone_search">Enabled</label>
</div>
<div class="form-group">
<div class="form-row">
<div class="col-md-6">
<label for="column_ra">Column RA</label>
<select id="column_ra" class="form-control" name="column_ra" [ngModel]="getConfigConeSearchCol('column_ra')" [disabled]="!ngForm.form.value.cone_search">
<option *ngFor="let attribute of attributeList" [value]="attribute.id">{{ attribute.form_label }}</option>
</select>
</div>
<div class="col-md-6">
<label for="column_dec">Column DEC</label>
<select id="column_dec" class="form-control" name="column_dec" [ngModel]="getConfigConeSearchCol('column_dec')" [disabled]="!ngForm.form.value.cone_search">
<option *ngFor="let attribute of attributeList" [value]="attribute.id">{{ attribute.form_label }}</option>
</select>
</div>
</div>
</div>
</accordion-group>
<accordion-group heading="Page result configuration">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="results_server_link" name="results_server_link" [ngModel]="getConfig('results_server_link')">
<label class="form-check-label" for="results_server_link">Display server link to the results</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="opened_datatable" name="opened_datatable" [ngModel]="getConfig('opened_datatable')">
<label class="form-check-label" for="opened_datatable">Open the results datatable accordion</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="selectable_row" name="selectable_row" [ngModel]="getConfig('selectable_row')">
<label class="form-check-label" for="selectable_row">Datatable rows selectable</label>
</div>
</accordion-group>
<accordion-group heading="Search and data download">
<div class="form-check pt-3">
<input class="form-check-input" type="checkbox" id="download_result_csv" name="download_result_csv" [ngModel]="getConfigDownloadResultFormat('csv')">
<label class="form-check-label" for="download_result_csv">Display download results button in CSV format</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="download_result_ascii" name="download_result_ascii" [ngModel]="getConfigDownloadResultFormat('ascii')">
<label class="form-check-label" for="download_result_ascii">Display download results button in ASCII format</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="download_result_spectra" name="download_result_spectra" [ngModel]="getConfigDownloadResultFormat('spectra')">
<label class="form-check-label" for="download_result_spectra">Display download results button in Spectra format</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="download_result_stamp" name="download_result_stamp" [ngModel]="getConfigDownloadResultFormat('stamp')">
<label class="form-check-label" for="download_result_stamp">Display download results button in Stamp format</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="download_result_vo" name="download_result_vo" [ngModel]="getConfigDownloadResultFormat('vo')">
<label class="form-check-label" for="download_result_vo">Display download results button in VO format</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="download_result_fits" name="download_result_fits" [ngModel]="getConfigDownloadResultFormat('fits')">
<label class="form-check-label" for="download_result_fits">Display download results button in FITS format</label>
</div>
</accordion-group>
</accordion>
<div class="form-group mt-3">
<ng-content></ng-content>
</div>
......
......@@ -4,7 +4,7 @@ import { NgForm } from '@angular/forms';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { Dataset, Project, DatasetFamily, FileInfo } from '../../store/model';
import { Dataset, Project, Attribute, DatasetFamily, FileInfo } from '../../store/model';
@Component({
selector: 'app-form-dataset',
......@@ -14,6 +14,7 @@ export class FormDatasetComponent {
@ViewChild(NgForm, {static: true}) ngForm: NgForm;
@Input() model: Dataset = new Dataset();
@Input() projectList: Project[];
@Input() attributeList: Attribute[];
@Input() tableList: string[];
@Input() datasetFamilyList: DatasetFamily[];
@Input() idDatasetFamilyQueryParam: number = 0;
......@@ -60,6 +61,10 @@ export class FormDatasetComponent {
this.modalRef.hide();
}
isConeSearchDisabled() {
return (!this.model.name) ? true : false;
}
getDatasetFamilyByIdQueryParam(): DatasetFamily {
return this.datasetFamilyList.find(datasetFamily => datasetFamily.id === this.idDatasetFamilyQueryParam);
}
......
......@@ -14,19 +14,19 @@
</div>
<div class="container">
<div *ngIf="(datasetFamilyListIsLoading | async) || (datasetListIsLoading | async)"
<div *ngIf="(datasetFamilyListIsLoading | async) || (datasetListIsLoading | async) || (attributeListIsLoading | async)"
class="row justify-content-center mt-5">
<span class="fas fa-circle-notch fa-spin fa-3x"></span>
<span class="sr-only">Loading...</span>
</div>
<div *ngIf="(datasetFamilyListIsLoaded | async) && (datasetListIsLoaded | async)">
<div *ngIf="(datasetFamilyListIsLoaded | async) && (datasetListIsLoaded | async) && (attributeListIsLoaded | async)">
<div class="row">
<div class="col">
<app-form-dataset [model]="dataset | async" [datasetFamilyList]="datasetFamilyList | async"
[directoryInfo]="directoryInfo | async" [directoryInfoIsLoading]="directoryInfoIsLoading | async"
[directoryInfoIsLoaded]="directoryInfoIsLoaded | async" (loadDirectoryInfo)="loadDirectoryInfo($event)"
(submitted)="editDataset($event)" #formDataset>
[directoryInfoIsLoaded]="directoryInfoIsLoaded | async" [attributeList]="attributeList | async"
(loadDirectoryInfo)="loadDirectoryInfo($event)" (submitted)="editDataset($event)" #formDataset>
<button [disabled]="!formDataset.ngForm.form.valid || formDataset.ngForm.form.pristine"
type="submit" class="btn btn-primary">
<i class="fa fa-database"></i> Update dataset information
......
......@@ -2,13 +2,15 @@ import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Store } from '@ngrx/store';
import { DatasetFamily, Dataset, FileInfo } from '../../store/model';
import { DatasetFamily, Dataset, Attribute, FileInfo } from '../../store/model';
import * as datasetFamilyActions from '../../store/action/dataset-family.action';
import * as datasetFamilySelector from '../../store/selector/dataset-family.selector';
import * as datasetActions from '../../store/action/dataset.action';
import * as datasetSelector from '../../store/selector/dataset.selector';
import * as fileExplorerAction from '../../store/action/file-explorer.action';
import * as fileExplorerSelector from '../../store/selector/file-explorer.selector';
import * as attributeActions from '../../store/action/attribute.action';
import * as attributeSelector from '../../store/selector/attribute.selector';
import * as instanceSelector from '../../store/selector/instance.selector';
import * as metamodelReducer from '../../store/reducer';
......@@ -28,6 +30,9 @@ export class EditDatasetComponent implements OnInit {
public directoryInfo: Observable<FileInfo[]>;
public directoryInfoIsLoading: Observable<boolean>;
public directoryInfoIsLoaded: Observable<boolean>;
public attributeList: Observable<Attribute[]>;
public attributeListIsLoading: Observable<boolean>;
public attributeListIsLoaded: Observable<boolean>;
constructor(private store: Store<metamodelReducer.State>) {
this.instanceSelected = store.select(instanceSelector.getInstanceSelected);
......@@ -41,11 +46,15 @@ export class EditDatasetComponent implements OnInit {
this.directoryInfo = store.select(fileExplorerSelector.getDirectoryInfo);
this.directoryInfoIsLoading = store.select(fileExplorerSelector.getDirectoryInfoIsLoading);
this.directoryInfoIsLoaded = store.select(fileExplorerSelector.getDirectoryInfoIsLoaded);
this.attributeList = store.select(attributeSelector.getAttributeList);
this.attributeListIsLoading = store.select(attributeSelector.getAttributeListIsLoading);
this.attributeListIsLoaded = store.select(attributeSelector.getAttributeListIsLoaded);
}
ngOnInit() {
this.store.dispatch(new datasetFamilyActions.LoadDatasetFamilyListAction());
this.store.dispatch(new datasetActions.LoadDatasetListAction());
this.store.dispatch(new attributeActions.LoadAttributeListAction());
}
loadDirectoryInfo(path: string) {
......
......@@ -6,6 +6,7 @@ import { RouterModule } from '@angular/router';
import { ToastrModule } from 'ngx-toastr';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AccordionModule } from 'ngx-bootstrap/accordion';
@NgModule({
imports: [
......@@ -15,6 +16,7 @@ import { ModalModule } from 'ngx-bootstrap/modal';
ToastrModule.forRoot(),
BsDropdownModule.forRoot(),
ModalModule.forRoot(),
AccordionModule.forRoot(),
RouterModule
],
exports: [
......@@ -23,6 +25,7 @@ import { ModalModule } from 'ngx-bootstrap/modal';
ReactiveFormsModule,
ToastrModule,
BsDropdownModule,
AccordionModule,
ModalModule
]
})
......
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