Group / datasets => done

src/app/metamodel/components/group/form-group.component.html

@@ -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>

src/app/metamodel/components/group/form-group.component.ts

-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();
     }
 }

src/app/metamodel/containers/group/edit-group.component.html

@@ -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>

src/app/metamodel/store/effects/group.effects.ts

@@ -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')
         })
     );