From 8186eec55bb830ba914ca05f74f1a39ae1a33a41 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Fri, 13 Dec 2019 12:19:15 +0100
Subject: [PATCH] Fix sorting.

---
 .../shared/assets-editor.component.html       | 57 +++++++++++++++----
 1 file changed, 45 insertions(+), 12 deletions(-)

diff --git a/frontend/app/features/content/shared/assets-editor.component.html b/frontend/app/features/content/shared/assets-editor.component.html
index 2a8fe76c6..4e31202d9 100644
--- a/frontend/app/features/content/shared/assets-editor.component.html
+++ b/frontend/app/features/content/shared/assets-editor.component.html
@@ -20,18 +20,51 @@
     </div>
 
     <div class="body">
-        <div class="row no-gutters" [class.unrow]="snapshot.isListView">
-            <sqx-asset *ngFor="let file of snapshot.assetFiles" [assetFile]="file" 
-                (loadError)="removeLoadingAsset(file)"
-                (load)="addAsset(file, $event)">
-            </sqx-asset>
-            <sqx-asset *ngFor="let asset of snapshot.assets; trackBy: trackByAsset" [asset]="asset" 
-                [isCompact]="isCompact" removeMode="true"
-                [isListView]="snapshot.isListView"
-                (update)="notifyOthers(asset)"
-                (remove)="removeLoadedAsset(asset)">
-            </sqx-asset>
-        </div>
+        <ng-container *ngIf="!snapshot.isListView; else listTemplate">
+            <div class="row no-gutters">
+                <sqx-asset *ngFor="let file of snapshot.assetFiles" [assetFile]="file" 
+                    (loadError)="removeLoadingAsset(file)"
+                    (load)="addAsset(file, $event)">
+                </sqx-asset>
+                <sqx-asset *ngFor="let asset of snapshot.assets; trackBy: trackByAsset" 
+                    [asset]="asset"
+                    (update)="notifyOthers(asset)"
+                    [removeMode]="true"
+                    (remove)="removeLoadedAsset(asset)"
+                    [isCompact]="isCompact">
+                </sqx-asset>
+            </div>
+        </ng-container>
+    
+        <ng-template #listTemplate>
+            <div class="list-view">
+                <sqx-asset *ngFor="let file of snapshot.assetFiles" [assetFile]="file"
+                    [isListView]="true" 
+                    (loadError)="removeLoadingAsset(file)"
+                    (load)="addAsset(file, $event)">
+                </sqx-asset>
+                
+                <div
+                    cdkDropList
+                    [cdkDropListDisabled]="snapshot.isDisabled"
+                    [cdkDropListData]="snapshot.assets"
+                    (cdkDropListDropped)="sortAssets($event)">
+                    <div *ngFor="let asset of snapshot.assets; trackBy: trackByAsset"
+                        class="table-drag"
+                        cdkDrag
+                        cdkDragLockAxis="y">
+                        <sqx-asset 
+                            [asset]="asset"
+                            [isListView]="true"
+                            [isCompact]="isCompact"
+                            (update)="notifyOthers(asset)"
+                            [removeMode]="true" 
+                            (remove)="removeLoadedAsset(asset)">
+                        </sqx-asset>
+                    </div>
+                </div>
+            </div>
+        </ng-template>
     </div>
 </div>