wip: ui done

package.json

@@ -5,6 +5,7 @@
     "ng": "ng",
     "postinstall": "patch-package --patch-dir ./node_modules/arlas-web-core/patches && patch-package --patch-dir node_modules/arlas-d3/patches",
     "start": "ng serve",
+    "start:iam": "ng serve --ssl --ssl-cert=$EXPLO_SSL_CERT --ssl-key=$EXPLO_SSL_KEY",
     "build": "ng build --configuration production --aot --base-href='$ARLAS_BUILDER_BASE_HREF/'",
     "build:stats": "ng build --stats-json",
     "test": "ng test",

src/app/modules/analytics-config/components/edit-resultlist-visualisation/edit-resultlist-visualisation.component.html

@@ -0,0 +1,55 @@
+<button mat-stroked-button color="primary" (click)="addVisualisation()">
+    <mat-icon>add</mat-icon>
+    {{'Add a visualization' | translate}}
+</button>
+<div cdkDropList [cdkDropListData]="visualisation" (cdkDropListDropped)="dropVisualisation($event)"
+     [cdkDropListLockAxis]="'y'">
+    @for (visu of visualisation; track visu.value; let visualisationIndex = $index) {
+        <div   class="result-list-visualisation mat-elevation-z1" cdkDrag>
+            <div class="result-list-visualisation_main-meta">
+                <div class="main-meta">
+                    <arlas-config-form-control  [showLabel]="true" [control]="visu.controls.name"></arlas-config-form-control>
+                    <arlas-config-form-control class="main-meta_input-desc" [showLabel]="true" [control]="visu.controls.description"></arlas-config-form-control>
+                </div>
+                <div>
+                    <mat-icon class="drag">drag_indicator</mat-icon>
+                    <button mat-icon-button (click)="removeVisualisation(0)" [matTooltip]="'Delete visualisation' | translate">
+                        <mat-icon>delete</mat-icon>
+                    </button>
+                </div>
+            </div>
+
+            <div class="result-list-visualisation_item-family" cdkDropList
+                 [cdkDropListData]="(visu | castVisualisationItemFamily).controls"
+                 (cdkDropListDropped)="dropItemFamily($event, visualisationIndex)"
+                 [cdkDropListLockAxis]="'y'">
+                @for (itemFamily of (visu | castVisualisationItemFamily).controls; track itemFamily; let itemIndex = $index) {
+                    <div cdkDrag class="item-family">
+                        <div class="item-family_header">
+                            <mat-icon class="drag">drag_indicator</mat-icon>
+                            <button mat-icon-button (click)="removeItemFamily(visualisationIndex, itemIndex)" [matTooltip]="'Delete condition' | translate">
+                                <mat-icon>delete</mat-icon>
+                            </button>
+                        </div>
+                        <div class="item-family_section">
+                            <arlas-config-form-control class="item-family_input" [showLabel]="true" [control]="itemFamily.controls.itemsFamily"></arlas-config-form-control>
+                        </div>
+                        <div class="item-family_section">
+                            <arlas-config-form-control class="item-family_input" [showLabel]="true" [control]="(itemFamily.controls.filter | castToConfigFormGroup).controls.field"></arlas-config-form-control>
+                            <arlas-config-form-control class="item-family_input" [showLabel]="true" [control]="(itemFamily.controls.filter | castToConfigFormGroup).controls.values"></arlas-config-form-control>
+                        </div>
+
+                        <div class="item-family_section">
+                            <arlas-config-form-control class="item-family_input" [showLabel]="true" [control]="itemFamily.controls.protocol"></arlas-config-form-control>
+                            <arlas-config-form-control class="item-family_input" [showLabel]="true" [control]="itemFamily.controls.visualisationUrl"></arlas-config-form-control>
+                        </div>
+                    </div>
+
+                }
+                <div class="item-family_action" >
+                    <button mat-stroked-button (click)="addItemFamily(visualisationIndex)"> {{'Add a condition' | translate}}</button>
+                </div>
+            </div>
+        </div>
+    }
+</div>

src/app/modules/analytics-config/components/edit-resultlist-visualisation/edit-resultlist-visualisation.component.scss

@@ -0,0 +1,103 @@
+/*
+ * Licensed to Gisaïa under one or more contributor
+ * license agreements. See the NOTICE.txt file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Gisaïa licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+
+.result-list-visualisation {
+  display: flex;
+  flex-direction: column;
+  background: white;
+  padding: 12px 6px;
+  border-radius: 6px;
+  margin-top: 12px;
+
+  &_main-meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &_item-family {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+}
+
+:host ::ng-deep {
+  .item-family arlas-config-form-control mat-form-field,
+   arlas-config-form-control.main-meta_input-desc mat-form-field {
+    width: 100%!important;
+  }
+}
+
+.item-family {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1 1 auto;
+  background: white;
+  padding: 0 12px;
+  margin-left: 12px;
+
+  &_header {
+    flex: 1 1 auto;
+    display: flex;
+    background: #fafafa;
+    align-items: center;
+  }
+
+  &_section {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+  }
+
+  &_action {
+    display: flex;
+    justify-content: center;
+  }
+
+  &_inputs {
+    display: flex;
+    gap: 12px;
+    flex: 1 1 auto;
+    max-width: 70%;
+  }
+
+  &_input {
+    flex: 1 1 200px;
+    max-width: 400px;
+  }
+}
+.drag {
+  &:hover {
+    cursor: grab;
+  }
+}
+
+.main-meta {
+display: flex;
+  gap: 12px;
+  flex: 1 1 auto;
+  max-width: 840px;
+  padding-left: 6px;
+  &_input-desc {
+    flex: 1 1 400px;
+  }
+}

src/app/modules/analytics-config/components/edit-resultlist-visualisation/edit-resultlist-visualisation.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditResultlistVisualisationComponent } from './edit-resultlist-visualisation.component';
+
+describe('EditResultlistVisualisationComponent', () => {
+  let component: EditResultlistVisualisationComponent;
+  let fixture: ComponentFixture<EditResultlistVisualisationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EditResultlistVisualisationComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(EditResultlistVisualisationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/analytics-config/components/edit-resultlist-visualisation/edit-resultlist-visualisation.component.ts

@@ -0,0 +1,78 @@
+import { Component, inject, Input, OnInit } from '@angular/core';
+import { ConfigFormControl, SelectFormControl } from '@shared-models/config-form';
+import { FormArray } from '@angular/forms';
+import {
+  ResultlistFormBuilderService,
+  ResultListVisualisationsFormGroup
+} from '@analytics-config/services/resultlist-form-builder/resultlist-form-builder.service';
+import { CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatButton, MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import { SharedModule } from '@shared/shared.module';
+import {
+  CastToConfigFormGroupPipe,
+  CastVisualisationItemFamilyPipe
+} from "@shared/pipes/cast-visualisation-item-family.pipe";
+
+@Component({
+  selector: 'arlas-edit-resultlist-visualisation',
+  standalone: true,
+  imports: [
+    TranslateModule,
+    CdkDropList,
+    MatButton,
+    MatIcon,
+    MatIconButton,
+    MatTooltip,
+    SharedModule,
+    CastVisualisationItemFamilyPipe,
+    CastVisualisationItemFamilyPipe,
+    CastToConfigFormGroupPipe
+  ],
+  templateUrl: './edit-resultlist-visualisation.component.html',
+  styleUrl: './edit-resultlist-visualisation.component.scss'
+})
+export class EditResultlistVisualisationComponent {
+
+  @Input() public collectionControl: SelectFormControl;
+  @Input() public control: FormArray<ResultListVisualisationsFormGroup>;
+  private resultlistFormBuilder = inject(ResultlistFormBuilderService);
+
+
+  public get visualisation(): ResultListVisualisationsFormGroup[] {
+    return this.control? this.control.controls as Array<ResultListVisualisationsFormGroup> : [];
+  }
+
+  public constructor() { }
+
+  public removeVisualisation(quicklookIndex: number) {
+    this.control.removeAt(quicklookIndex);
+  }
+
+  public dropVisualisation(event: CdkDragDrop<any[]>) {
+    const previousIndex = this.control.controls.findIndex(row => row === event.item.data);
+    moveItemInArray(this.control.controls, previousIndex, event.currentIndex);
+  }
+
+  public dropItemFamily(event: CdkDragDrop<any[]>, index: number){
+    const previousIndex = (this.control.controls[index].get('itemsFamilies') as FormArray).controls.findIndex(row => row === event.item.data);
+    moveItemInArray(this.control.controls, previousIndex, event.currentIndex);
+  }
+
+  public removeItemFamily(index: number, itemIndex: number) {
+    (this.control.controls[index].get('itemsFamilies') as FormArray).removeAt(itemIndex);
+  }
+
+  public addVisualisation() {
+    this.control.push(this.resultlistFormBuilder.buildVisualisation());
+  }
+
+  public addItemFamily(index: number) {
+    console.error(this.resultlistFormBuilder.buildVisualisationsItemFamily(this.collectionControl.value));
+    (this.control.controls[index].get('itemsFamilies') as FormArray).push(
+      this.resultlistFormBuilder.buildVisualisationsItemFamily(this.collectionControl.value)
+    );
+  }
+}