From: Bastian Dehn <hhaalo@arcor.de>
Date: Fri, 1 Jul 2022 22:52:35 +0000 (+0200)
Subject: add: drag and drop over many subtitles
X-Git-Tag: v1.0.5^2
X-Git-Url: https://gitweb.hhaalo.de/?a=commitdiff_plain;h=0703f8059f5fc93ffa393e9aaada82f69fa065f9;p=speisekarten-editor.git

add: drag and drop over many subtitles
---

diff --git a/src/app/subtitle/subtitle.component.html b/src/app/subtitle/subtitle.component.html
index e38ebf3..5a84a23 100644
--- a/src/app/subtitle/subtitle.component.html
+++ b/src/app/subtitle/subtitle.component.html
@@ -1,4 +1,8 @@
-<div class="subtitle" [class.active]="formSubtitleVisible">
+<div cdkDropList
+     [cdkDropListData]="subtitle.Foods"
+     (cdkDropListDropped)="reorderList($event)"
+	class="subtitle"
+	[class.active]="formSubtitleVisible">
 	<h2>{{subtitle.Subtitle}}</h2>
 	<button class="button"
 		type="button"
@@ -21,15 +25,13 @@
 			(click)="saveSubtitle()">Speichern</button>
 	</form>
 
-	<div cdkDropList (cdkDropListDropped)="reorderList($event)">
-		<div *ngFor="let food of subtitle.Foods; let i = index" cdkDrag>
-			<app-food [food]="food"></app-food>
-			<button class="button"
-				type="button"
-				(click)="insertNewFood(i)">Einfügen</button>
-			<button class="button"
-				type="button"
-				(click)="removeFood(i)">Löschen</button>
-		</div>
+	<div *ngFor="let food of subtitle.Foods; let i = index" cdkDrag>
+		<app-food [food]="food"></app-food>
+		<button class="button"
+			type="button"
+			(click)="insertNewFood(i)">Einfügen</button>
+		<button class="button"
+			type="button"
+			(click)="removeFood(i)">Löschen</button>
 	</div>
 </div>
diff --git a/src/app/subtitle/subtitle.component.ts b/src/app/subtitle/subtitle.component.ts
index e6570b7..6a528db 100644
--- a/src/app/subtitle/subtitle.component.ts
+++ b/src/app/subtitle/subtitle.component.ts
@@ -1,5 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { CdkDragDrop,
+	moveItemInArray,
+	transferArrayItem } from '@angular/cdk/drag-drop';
 import { ISubtitle } from '../isubtitle';
 import { IFood } from '../ifood';
 
@@ -57,8 +59,15 @@ export class SubtitleComponent implements OnInit
 
 	public reorderList(event: CdkDragDrop<IFood[]>)
 	{
-		moveItemInArray(this.subtitle.Foods,
-			event.previousIndex,
-			event.currentIndex);
+		if (event.previousContainer === event.container) {
+			moveItemInArray(event.container.data,
+				event.previousIndex,
+				event.currentIndex);
+		} else {
+			transferArrayItem(event.previousContainer.data,
+				event.container.data,
+				event.previousIndex,
+				event.currentIndex);
+		}
 	}
 }
diff --git a/src/app/title/title.component.html b/src/app/title/title.component.html
index 4b8c3c8..e510ea8 100644
--- a/src/app/title/title.component.html
+++ b/src/app/title/title.component.html
@@ -1,4 +1,4 @@
-<div class="title" [class.active]="formTitleVisible">
+<div cdkDropListGroup class="title" [class.active]="formTitleVisible">
 	<h1>{{title.Title}}</h1>
 	<button class="button"
 		type="button"