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

Group / datasets => done

parent 884c08e8
......@@ -7,18 +7,18 @@
<div class="form-row h-100">
<div class="col-4">
<label for="datasets">Available datasets</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option *ngFor="let dataset of datasetList" [value]="dataset.name">{{dataset.name}}</option>
<select multiple class="form-control" name="availableDatasets" #selectAvailableDatasets>
<option *ngFor="let dataset of getAvailableDatasets()" [value]="dataset.name">{{dataset.name}}</option>
</select>
</div>
<div class="col-2 text-center my-auto">
<button type="button" class="btn btn-dark mb-1">>>></button><br>
<button type="button" class="btn btn-dark"><<<</button>
<button (click)="addDatasets(selectAvailableDatasets)" type="button" class="btn btn-dark mb-1">>>></button><br>
<button (click)="removeDatasets(selectGroupDatasets)" type="button" class="btn btn-dark"><<<</button>
</div>
<div class="col-4">
<label for="datasets">Group's datasets</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option *ngFor="let dataset of model.datasets" [value]="dataset">{{dataset}}</option>
<select multiple class="form-control" name="datasets" #selectGroupDatasets>
<option *ngFor="let dataset of groupDatasets" [value]="dataset">{{dataset}}</option>
</select>
</div>
</div>
......
import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { Component, Input, Output, EventEmitter, ViewChild, SimpleChanges, OnChanges } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Group, Dataset } from '../../store/model';
......@@ -7,13 +7,54 @@ import { Group, Dataset } from '../../store/model';
selector: 'app-form-group',
templateUrl: 'form-group.component.html'
})
export class FormGroupComponent {
@ViewChild(NgForm, {static: true}) ngForm: NgForm;
export class FormGroupComponent implements OnChanges {
@ViewChild(NgForm, { static: true }) ngForm: NgForm;
@Input() model: Group = new Group();
@Input() datasetList: Dataset[];
@Output() submitted: EventEmitter<Group> = new EventEmitter();
public availableDatasets: string[];
public groupDatasets: string[] = [];
ngOnChanges(changes: SimpleChanges) {
if (changes.model && changes.model.currentValue) {
this.groupDatasets = [...this.model.datasets];
}
}
emit(group: Group) {
this.submitted.emit({id: this.model.id, ...group});
this.submitted.emit({
id: this.model.id,
label: group.label,
instance_name: this.model.instance_name,
datasets: this.groupDatasets
});
}
getAvailableDatasets() {
return this.datasetList.filter(d => !this.groupDatasets.includes(d.name));
}
addDatasets(selectElement) {
let availableDatasetsSelected = [];
for (var i = 0; i < selectElement.options.length; i++) {
const optionElement = selectElement.options[i];
if (optionElement.selected == true) {
availableDatasetsSelected.push(optionElement.value);
}
}
this.groupDatasets.push(...availableDatasetsSelected);
this.ngForm.control.markAsDirty();
}
removeDatasets(selectElement) {
let groupDatasetsSelected = [];
for (var i = 0; i < selectElement.options.length; i++) {
const optionElement = selectElement.options[i];
if (optionElement.selected == true) {
groupDatasetsSelected.push(optionElement.value);
}
}
this.groupDatasets = [...this.groupDatasets.filter(d => !groupDatasetsSelected.includes(d))]
this.ngForm.control.markAsDirty();
}
}
......@@ -16,7 +16,7 @@
Groups
</a>
</li>
<li class="breadcrumb-item active" aria-current="page">Edit group {{ (group | async).label }}</li>
<li *ngIf="groupListIsLoaded | async" class="breadcrumb-item active" aria-current="page">Edit group {{ (group | async).label }}</li>
</ol>
</nav>
</div>
......
......@@ -59,8 +59,10 @@ export class GroupEffects {
@Effect({dispatch: false})
addNewGroupSuccessAction$ = this.actions$.pipe(
ofType(groupActions.ADD_NEW_GROUP_SUCCESS),
map(_ => {
this.router.navigate(['/project/group-list']);
withLatestFrom(this.store$),
map(([action, state]) => {
const instanceName = state.router.state.params.iname;
this.router.navigateByUrl('/configure-instance/' + instanceName + '/group');
this.toastr.success('Add group success!', 'The new group has been created!');
})
);
......@@ -86,8 +88,10 @@ export class GroupEffects {
@Effect({dispatch: false})
editGroupSuccessAction$ = this.actions$.pipe(
ofType(groupActions.EDIT_GROUP_SUCCESS),
map(_ => {
this.router.navigate(['/project/group-list']);
withLatestFrom(this.store$),
map(([action, state]) => {
const instanceName = state.router.state.params.iname;
this.router.navigateByUrl('/configure-instance/' + instanceName + '/group');
this.toastr.success('Edit group success!', 'The existing entity has been edited into the database')
})
);
......
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