refactor: make list forms files clearer

apps/dsp-app/src/app/app.module.ts

@@ -81,9 +81,13 @@ import { CreateProjectFormPageComponent } from './project/create-project-form-pa
 import { DataModelsComponent } from './project/data-models/data-models.component';
 import { DescriptionComponent } from './project/description/description.component';
 import { EditProjectFormPageComponent } from './project/edit-project-form-page/edit-project-form-page.component';
+import { ActionBubbleComponent } from './project/list/action-bubble/action-bubble.component';
 import { ListItemComponent } from './project/list/list-item/list-item.component';
-import { EditListItemComponent } from './project/list/list-item-form/edit-list-item/edit-list-item.component';
+import { ListItemElementComponent } from './project/list/list-item-element/list-item-element.component';
+import { CreateListItemDialogComponent } from './project/list/list-item-form/edit-list-item/create-list-item-dialog.component';
+import { EditListItemDialogComponent } from './project/list/list-item-form/edit-list-item/edit-list-item-dialog.component';
 import { ListItemFormComponent } from './project/list/list-item-form/list-item-form.component';
+import { ReusableListItemFormComponent } from './project/list/list-item-form/reusable-list-item-form.component';
 import { ListComponent } from './project/list/list.component';
 import { CreateListInfoPageComponent } from './project/list/reusable-list-info-form/create-list-info-page.component';
 import { EditListInfoDialogComponent } from './project/list/reusable-list-info-form/edit-list-info-dialog.component';
@@ -183,6 +187,7 @@ export function httpLoaderFactory(httpClient: HttpClient) {
 @NgModule({
   declarations: [
     AccountComponent,
+    ActionBubbleComponent,
     AddRegionFormComponent,
     AddUserComponent,
     AddValueComponent,
@@ -218,7 +223,6 @@ export function httpLoaderFactory(httpClient: HttpClient) {
     DisplayEditComponent,
     DocumentComponent,
     DragDropDirective,
-    EditListItemComponent,
     EditResourceClassDialogComponent,
     ExpertSearchComponent,
     FooterComponent,
@@ -240,9 +244,12 @@ export function httpLoaderFactory(httpClient: HttpClient) {
     LinkValueComponent,
     ListComponent,
     EditListInfoDialogComponent,
+    EditListItemDialogComponent,
     CreateListInfoPageComponent,
     ReusableListInfoFormComponent,
+    ReusableListItemFormComponent,
     ListItemComponent,
+    ListItemElementComponent,
     ListItemFormComponent,
     ListValueComponent,
     ListViewComponent,
@@ -316,6 +323,7 @@ export function httpLoaderFactory(httpClient: HttpClient) {
     CommentFormComponent,
     DataModelsComponent,
     IsFalsyPipe,
+    CreateListItemDialogComponent,
   ],
   imports: [
     AngularSplitModule,

apps/dsp-app/src/app/main/action/confirm-dialog/confirm-dialog.component.ts

@@ -1,22 +1,29 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
+export interface ConfirmDialogProps {
+  message: string;
+  title: string | null;
+  subtitle: string | null;
+}
 @Component({
   selector: 'app-confirm-dialog',
   template: `
-    <h1 mat-dialog-title>{{ data.title ?? 'Confirmation' }}</h1>
+    <app-dialog-header
+      [title]="data.title ?? 'Confirmation needed'"
+      [subtitle]="data.subtitle ?? ''"></app-dialog-header>
     <div mat-dialog-content>
       <p>{{ data.message }}</p>
     </div>
     <div mat-dialog-actions align="end">
       <button mat-button (click)="dialogRef.close(false)">No</button>
-      <button mat-button (click)="dialogRef.close(true)">Yes</button>
+      <button mat-raised-button color="warn" (click)="dialogRef.close(true)">Yes</button>
     </div>
   `,
 })
 export class ConfirmDialogComponent {
   constructor(
     public dialogRef: MatDialogRef<ConfirmDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: { title: string | undefined; message: string }
+    @Inject(MAT_DIALOG_DATA) public data: ConfirmDialogProps
   ) {}
 }

apps/dsp-app/src/app/main/dialog/dialog.component.html

@@ -33,33 +33,6 @@
     </mat-dialog-actions>
   </div>
 
-  <!-- all about PROJECT -->
-
-  <!-- all about LISTS -->
-
-  <!-- Insert list child node -->
-  <div *ngSwitchCase="'insertListNode'">
-    <app-dialog-header [title]="'Insert new child node'" [subtitle]=""> </app-dialog-header>
-    <app-edit-list-item
-      [iri]="data.id"
-      [projectIri]="data.project"
-      mode="insert"
-      [parentIri]="data.parentIri"
-      [position]="data.position"
-      (closeDialog)="dialogRef.close($event)">
-    </app-edit-list-item>
-  </div>
-
-  <!-- Update list child node -->
-  <div *ngSwitchCase="'editListNode'">
-    <app-dialog-header [title]="data.title" [subtitle]="'Edit child node'"> </app-dialog-header>
-    <app-edit-list-item
-      [iri]="data.id"
-      [projectIri]="data.project"
-      mode="update"
-      (closeDialog)="dialogRef.close($event)"></app-edit-list-item>
-  </div>
-
   <!-- Ontology editor: create new ontology -->
   <div *ngSwitchCase="'createOntology'">
     <app-dialog-header [title]="data.title" [subtitle]="'Create new'"></app-dialog-header>

apps/dsp-app/src/app/main/services/dialog-sizes.constant.ts

@@ -0,0 +1,5 @@
+export const DIALOG_LARGE = {
+  width: '100%',
+  minWidth: 500,
+  maxWidth: 1000,
+};

apps/dsp-app/src/app/main/services/dialog.service.ts

@@ -1,18 +1,19 @@
 import { Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { filter } from 'rxjs/operators';
-import { ConfirmDialogComponent } from '../action/confirm-dialog/confirm-dialog.component';
+import { ConfirmDialogComponent, ConfirmDialogProps } from '../action/confirm-dialog/confirm-dialog.component';
 
 @Injectable({ providedIn: 'root' })
 export class DialogService {
   constructor(private _dialog: MatDialog) {}
 
-  afterConfirmation(message: string, title: string | null = null) {
+  afterConfirmation(message: string, title: string | null = null, subtitle: string | null = null) {
     return this._dialog
-      .open<ConfirmDialogComponent, any, boolean>(ConfirmDialogComponent, {
+      .open<ConfirmDialogComponent, ConfirmDialogProps, boolean>(ConfirmDialogComponent, {
         data: {
-          title,
           message,
+          title,
+          subtitle,
         },
       })
       .afterClosed()

apps/dsp-app/src/app/project/list/list-item-form/list-item-form.component.scss → apps/dsp-app/src/app/project/list/action-bubble/action-bubble.component.scss

@@ -1,3 +1,16 @@
+:host {
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.d-flex {
+  display: flex;
+}
+.node-item ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+  display: none;
+}
+
 .medium-field {
   margin-top: -6px;
 }

apps/dsp-app/src/app/project/list/action-bubble/action-bubble.component.ts

@@ -0,0 +1,134 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { Component, Input } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { ListNode } from '@dasch-swiss/dsp-js';
+import { ListApiService } from '@dasch-swiss/vre/shared/app-api';
+import { MultiLanguages } from '@dasch-swiss/vre/shared/app-string-literal';
+import { filter, switchMap } from 'rxjs/operators';
+import { DIALOG_LARGE } from '../../../main/services/dialog-sizes.constant';
+import { DialogService } from '../../../main/services/dialog.service';
+import { ListItemService } from '../list-item/list-item.service';
+import {
+  CreateListItemDialogComponent,
+  CreateListItemDialogProps,
+} from '../list-item-form/edit-list-item/create-list-item-dialog.component';
+import {
+  EditListItemDialogComponent,
+  EditListItemDialogProps,
+} from '../list-item-form/edit-list-item/edit-list-item-dialog.component';
+
+@Component({
+  selector: 'app-action-bubble',
+  template: ` <div class="action-bubble" [@simpleFadeAnimation]="'in'">
+    <div class="button-container d-flex">
+      <button
+        mat-button
+        *ngIf="position > 0"
+        title="move up"
+        (click)="$event.stopPropagation(); repositionNode('up')"
+        class="reposition up">
+        <mat-icon>arrow_upward</mat-icon>
+      </button>
+      <button
+        mat-button
+        *ngIf="position < length - 1"
+        title="move down"
+        (click)="$event.stopPropagation(); repositionNode('down')"
+        class="reposition down">
+        <mat-icon>arrow_downward</mat-icon>
+      </button>
+      <button
+        mat-button
+        title="insert new child node above"
+        (click)="$event.stopPropagation(); askToInsertNode()"
+        class="insert">
+        <mat-icon>vertical_align_top</mat-icon>
+      </button>
+      <button mat-button class="edit" title="edit" (click)="$event.stopPropagation(); askToEditNode()">
+        <mat-icon>edit</mat-icon>
+      </button>
+      <button mat-button class="delete" title="delete" (click)="$event.stopPropagation(); askToDeleteListNode()">
+        <mat-icon>delete</mat-icon>
+      </button>
+    </div>
+  </div>`,
+  animations: [
+    // https://www.kdechant.com/blog/angular-animations-fade-in-and-fade-out
+    trigger('simpleFadeAnimation', [
+      state('in', style({ opacity: 1 })),
+      transition(':enter', [style({ opacity: 0 }), animate(150)]),
+      transition(':leave', animate(150, style({ opacity: 0 }))),
+    ]),
+  ],
+  styleUrls: ['./action-bubble.component.scss'],
+})
+export class ActionBubbleComponent {
+  @Input() position: number;
+  @Input() length: number;
+  @Input() node: ListNode;
+
+  constructor(
+    private _dialog: DialogService,
+    private _matDialog: MatDialog,
+    private _listItemService: ListItemService,
+    private _listApiService: ListApiService
+  ) {}
+
+  askToDeleteListNode() {
+    this._dialog
+      .afterConfirmation('Do you want to delete this node?', this.node.labels[0].value)
+      .pipe(switchMap(() => this._listApiService.deleteListNode(this.node.id)))
+      .subscribe(() => {
+        this._listItemService.onUpdate$.next();
+      });
+  }
+
+  askToInsertNode() {
+    this._matDialog
+      .open<CreateListItemDialogComponent, CreateListItemDialogProps, boolean>(CreateListItemDialogComponent, {
+        ...DIALOG_LARGE,
+        data: {
+          nodeIri: this.node.id,
+          projectIri: this._listItemService.projectInfos.projectIri,
+          parentIri: this._listItemService.projectInfos.rootNodeIri,
+          position: this.position,
+        },
+      })
+      .afterClosed()
+      .pipe(filter(response => response === true))
+      .subscribe(() => {
+        this._listItemService.onUpdate$.next();
+      });
+  }
+
+  askToEditNode() {
+    this._matDialog
+      .open<EditListItemDialogComponent, EditListItemDialogProps, boolean>(EditListItemDialogComponent, {
+        ...DIALOG_LARGE,
+        data: {
+          nodeIri: this.node.id,
+          projectIri: this._listItemService.projectInfos.projectIri,
+          formData: {
+            labels: this.node.labels as MultiLanguages,
+            comments: this.node.comments as MultiLanguages,
+          },
+        },
+      })
+      .afterClosed()
+      .pipe(filter(response => response === true))
+      .subscribe(() => {
+        this._listItemService.onUpdate$.next();
+      });
+  }
+
+  repositionNode(direction: 'up' | 'down') {
+    this._listApiService
+      .repositionChildNode(this.node.id, {
+        parentNodeIri: this._listItemService.projectInfos.rootNodeIri,
+        position: direction === 'up' ? this.position - 1 : this.position + 1,
+      })
+      .subscribe(() => {
+        this._listItemService.onUpdate$.next();
+      });
+  }
+}

apps/dsp-app/src/app/project/list/list-item-element/list-item-element.component.ts

@@ -0,0 +1,81 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { ListNode } from '@dasch-swiss/dsp-js';
+import { ListItemService } from '../list-item/list-item.service';
+
+@Component({
+  selector: 'app-list-item-element',
+  template: `
+    <div style="display: flex">
+      <button type="button" color="primary" mat-icon-button (click)="showChildren = !showChildren">
+        <mat-icon>{{ showChildren ? 'expand_more' : 'chevron_right' }} </mat-icon>
+      </button>
+
+      <div style="flex: 1">
+        <div (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()" style="position: relative">
+          <dasch-swiss-multi-language-input
+            [placeholder]="node.labels | appStringifyStringLiteral: 'all' | appTruncate: 128"
+            [editable]="false"
+            [formGroup]="readOnlyForm"
+            controlName="labels">
+          </dasch-swiss-multi-language-input>
+
+          <app-action-bubble
+            *ngIf="showActionBubble"
+            [position]="position"
+            [length]="length"
+            [node]="node"></app-action-bubble>
+        </div>
+
+        <app-list-item
+          *ngIf="showChildren"
+          [projectUuid]="listItemService.projectInfos.projectIri"
+          [rootNodeIri]="node.id"
+          [isAdmin]="isAdmin">
+        </app-list-item>
+      </div>
+    </div>
+  `,
+  styles: [':host ::ng-deep dasch-swiss-multi-language-input .mat-mdc-form-field-bottom-align { display: none;}'],
+})
+export class ListItemElementComponent implements OnInit {
+  @Input() node: ListNode;
+  @Input() position: number;
+  @Input() length: number;
+
+  @Output() refreshChildren = new EventEmitter<ListNode[]>();
+  @Output() updateView = new EventEmitter<unknown>();
+
+  @Input() isAdmin = false;
+  showChildren = false;
+  showActionBubble = false;
+
+  readOnlyForm: FormGroup;
+
+  constructor(
+    private _fb: FormBuilder,
+    public listItemService: ListItemService
+  ) {}
+
+  ngOnInit() {
+    this.readOnlyForm = this._fb.group({
+      labels: this._fb.array(
+        this.node.labels.map(({ language, value }) =>
+          this._fb.group({
+            language,
+            value,
+          })
+        )
+      ),
+    });
+  }
+
+  mouseEnter() {
+    if (this.isAdmin) {
+      this.showActionBubble = true;
+    }
+  }
+  mouseLeave() {
+    this.showActionBubble = false;
+  }
+}