From bcc81aaefac681e295493e9bf20180c53f1fa78e Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Wed, 26 Sep 2018 20:13:47 +0200
Subject: [PATCH] Sorting for assets.

---
 .../shared/assets-editor.component.html       | 35 +++++++++++++------
 .../shared/assets-editor.component.scss       |  9 ++---
 .../content/shared/assets-editor.component.ts |  8 +++++
 .../shared/references-editor.component.html   |  8 ++---
 4 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/src/Squidex/app/features/content/shared/assets-editor.component.html b/src/Squidex/app/features/content/shared/assets-editor.component.html
index b931da3c0..0e2ce62ca 100644
--- a/src/Squidex/app/features/content/shared/assets-editor.component.html
+++ b/src/Squidex/app/features/content/shared/assets-editor.component.html
@@ -19,16 +19,31 @@
         </div>
     </div>
 
-    <div class="row no-gutters" [class.unrow]="isListView">
-        <sqx-asset *ngFor="let file of newAssets" [initFile]="file"
-            [isListView]="isListView"
-            (failed)="onAssetFailed(file)" 
-            (loaded)="onAssetLoaded(file, $event)">
-        </sqx-asset>
-        <sqx-asset *ngFor="let asset of oldAssets" [asset]="asset" removeMode="true" isDisabled="true"
-            [isListView]="isListView"
-            (removing)="onAssetRemoving($event)">
-        </sqx-asset>
+    <div class="body">
+        <ng-container *ngIf="!isListView; else listTemplate">
+            <div class="row no-gutters">
+                <sqx-asset *ngFor="let file of newAssets" [initFile]="file" 
+                    (failed)="onAssetFailed(file)" (loaded)="onAssetLoaded(file, $event)">
+                </sqx-asset>
+                <sqx-asset *ngFor="let asset of oldAssets" [asset]="asset" removeMode="true" isDisabled="true"
+                    (removing)="onAssetRemoving($event)">
+                </sqx-asset>
+            </div>
+        </ng-container>
+    
+        <ng-template #listTemplate>
+            <sqx-asset *ngFor="let file of newAssets" [initFile]="file"
+                [isListView]="true" (failed)="onAssetFailed(file)" (loaded)="onAssetLoaded(file, $event)">
+            </sqx-asset>
+            
+            <div [sqxSortModel]="oldAssets.values" (sqxSorted)="sort($event)">
+                <div *ngFor="let asset of oldAssets">
+                    <sqx-asset [asset]="asset" removeMode="true" isDisabled="true"
+                        [isListView]="true" (removing)="onAssetRemoving($event)">
+                    </sqx-asset>
+                </div>
+            </div>
+        </ng-template>
     </div>
 </div>
 
diff --git a/src/Squidex/app/features/content/shared/assets-editor.component.scss b/src/Squidex/app/features/content/shared/assets-editor.component.scss
index 5f32e9ff6..8ee466d94 100644
--- a/src/Squidex/app/features/content/shared/assets-editor.component.scss
+++ b/src/Squidex/app/features/content/shared/assets-editor.component.scss
@@ -18,15 +18,16 @@
     }
 }
 
-.header {
-    margin-bottom: .5rem;
-}
-
 .list {
     margin-left: 8px;
     margin-right: 8px;
 }
 
+.body {
+    margin-bottom: -.25rem;
+    margin-top: 1rem;
+}
+
 .unrow {
     display: block;
     padding-left: 8px;
diff --git a/src/Squidex/app/features/content/shared/assets-editor.component.ts b/src/Squidex/app/features/content/shared/assets-editor.component.ts
index 4665593f4..bcfeaa2e7 100644
--- a/src/Squidex/app/features/content/shared/assets-editor.component.ts
+++ b/src/Squidex/app/features/content/shared/assets-editor.component.ts
@@ -133,6 +133,14 @@ export class AssetsEditorComponent implements ControlValueAccessor {
         this.callChange(ids);
     }
 
+    public sort(assets: AssetDto[]) {
+        if (assets) {
+            this.oldAssets = ImmutableArray.of(assets);
+
+            this.updateValue();
+        }
+    }
+
     public changeView(isListView: boolean) {
         this.localStore.set('assetView', isListView ? 'List' : 'Grid');
 
diff --git a/src/Squidex/app/features/content/shared/references-editor.component.html b/src/Squidex/app/features/content/shared/references-editor.component.html
index cefec023c..7fbb63a25 100644
--- a/src/Squidex/app/features/content/shared/references-editor.component.html
+++ b/src/Squidex/app/features/content/shared/references-editor.component.html
@@ -2,7 +2,7 @@
     <ng-container *ngIf="schema">
         <div class="drop-area-container">
             <div class="drop-area" (click)="selectorDialog.show()">
-                Click here to link a content.
+                Click here to link content items.
             </div>
         </div>
         
@@ -12,10 +12,10 @@
             <tbody *ngFor="let content of contentItems">
                 <tr [sqxContent]="content"
                     [language]="language"
+                    [isReadOnly]="true"
+                    [isReference]="true"
                     [schema]="schema"
-                    (deleting)="remove(content)"
-                    isReadOnly="true"
-                    isReference="true"></tr>
+                    (deleting)="remove(content)"></tr>
                 <tr class="spacer"></tr>
             </tbody>
         </table>