Migration to CDK drag drop.

src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html

@@ -26,11 +26,13 @@
     </ng-container>
 
     <ng-container content>
-        <sqx-schema-category *ngFor="let category of schemasState.categories | async; trackBy: trackByCategory"
-            [schemaCategory]="category"
-            [schemasFilter]="schemasFilter.valueChanges | async"
-            (remove)="removeCategory(category.name)">
-        </sqx-schema-category>
+        <div cdkDropListGroup>
+            <sqx-schema-category *ngFor="let category of schemasState.categories | async; trackBy: trackByCategory"
+                [schemaCategory]="category"
+                [schemasFilter]="schemasFilter.valueChanges | async"
+                (remove)="removeCategory(category.name)">
+            </sqx-schema-category>
+        </div>
 
         <form [formGroup]="addCategoryForm.form" (ngSubmit)="addCategory()">
             <input class="form-control form-control-dark new-category-input" formControlName="name" placeholder="Create new category..." />

src/Squidex/app/framework/angular/drag-helper.ts

@@ -7,10 +7,27 @@
 
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 
+import { Types } from './../utils/types';
+
 export function sorted<T>(event: CdkDragDrop<ReadonlyArray<T>>): ReadonlyArray<T> {
     const items = <T[]>event.container.data;
 
     moveItemInArray(items, event.previousIndex, event.currentIndex);
 
     return items;
+}
+
+export function getFiles(files: FileList | ReadonlyArray<File>) {
+    if (Types.isArray(files)) {
+        return files;
+    }
+
+    const result: File[] = [];
+
+    // tslint:disable-next-line: prefer-for-of
+    for (let i = 0; i < files.length; i++) {
+        result.push(files[i]);
+    }
+
+    return result;
 }

src/Squidex/app/framework/angular/sorted.directive.ts

@@ -1,72 +0,0 @@
-/*
- * Squidex Headless CMS
- *
- * @license
- * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
- */
-
-// tslint:disable: readonly-array
-
-import { Directive, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output } from '@angular/core';
-import Sortable from 'sortablejs';
-
-const DEFAULT_PROPS = { sort: true, animation: 150 };
-
-@Directive({
-    selector: '[sqxSortModel]'
-})
-export class SortedDirective implements OnChanges, OnDestroy, OnInit {
-    private sortable: Sortable.Ref;
-
-    @Input()
-    public dragHandle = '.drag-handle';
-
-    @Input('sqxSortModel')
-    public sortModel: any[];
-
-    @Output('sqxSort')
-    public sort = new EventEmitter<any[]>();
-
-    @Input('sqxSortDisabled')
-    public isDisabled = false;
-
-    constructor(
-        private readonly elementRef: ElementRef
-    ) {
-    }
-
-    public ngOnChanges() {
-        if (this.sortable) {
-            this.sortable.option('disabled', this.isDisabled);
-        }
-    }
-
-    public ngOnDestroy() {
-        if (this.sortable) {
-            this.sortable.destroy();
-        }
-    }
-
-    public ngOnInit() {
-        this.sortable = Sortable.create(this.elementRef.nativeElement, {
-            ...DEFAULT_PROPS,
-
-            onSort: (event: { oldIndex: number, newIndex: number }) => {
-                if (this.sortModel && event.newIndex !== event.oldIndex) {
-                    const newModel = [...this.sortModel];
-
-                    const item = this.sortModel[event.oldIndex];
-
-                    newModel.splice(event.oldIndex, 1);
-                    newModel.splice(event.newIndex, 0, item);
-
-                    this.sort.emit(newModel);
-                }
-            },
-
-            handle: this.dragHandle
-        });
-
-        this.sortable.option('disabled', this.isDisabled);
-    }
-}

src/Squidex/app/framework/declarations.ts

@@ -67,7 +67,6 @@ export * from './angular/popup-link.directive';
 export * from './angular/safe-html.pipe';
 export * from './angular/scroll-active.directive';
 export * from './angular/shortcut.component';
-export * from './angular/sorted.directive';
 export * from './angular/status-icon.component';
 export * from './angular/stop-click.directive';
 export * from './angular/sync-scrolling.directive';

src/Squidex/app/framework/module.ts

@@ -82,7 +82,6 @@ import {
     ShortcutService,
     ShortDatePipe,
     ShortTimePipe,
-    SortedDirective,
     StarsComponent,
     StatusIconComponent,
     StopClickDirective,
@@ -162,7 +161,6 @@ import {
         ShortcutComponent,
         ShortDatePipe,
         ShortTimePipe,
-        SortedDirective,
         StarsComponent,
         StatusIconComponent,
         StopClickDirective,
@@ -236,7 +234,6 @@ import {
         ShortcutComponent,
         ShortDatePipe,
         ShortTimePipe,
-        SortedDirective,
         StarsComponent,
         StatusIconComponent,
         StopClickDirective,

src/Squidex/app/shared/components/asset.component.scss

@@ -107,7 +107,8 @@ $list-height: 2.375rem;
         background: $color-dark-black;
     }
 
-    &-name, &-info {
+    &-name,
+    &-info {
         @include truncate;
     }
 

src/Squidex/app/shared/components/assets-list.component.ts

@@ -8,7 +8,11 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
 import { onErrorResumeNext } from 'rxjs/operators';
 
-import { AssetDto, AssetsState } from '@app/shared/internal';
+import {
+    AssetDto,
+    AssetsState,
+    getFiles
+} from '@app/shared/internal';
 
 @Component({
     selector: 'sqx-assets-list',
@@ -86,7 +90,7 @@ export class AssetsListComponent {
     }
 
     public addFiles(files: ReadonlyArray<File>) {
-        this.newFiles = [...files, ...this.newFiles];
+        this.newFiles = [...getFiles(files), ...this.newFiles];
 
         return true;
     }

src/Squidex/package-lock.json

@@ -12647,11 +12647,6 @@
         "is-plain-obj": "^1.0.0"
       }
     },
-    "sortablejs": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.1.tgz",
-      "integrity": "sha512-N6r7GrVmO8RW1rn0cTdvK3JR0BcqecAJ0PmYMCL3ZuqTH3pY+9QyqkmJSkkLyyDvd+AJnwaxTP22Ybr/83V9hQ=="
-    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",

src/Squidex/package.json

@@ -43,7 +43,6 @@
     "react-dom": "16.10.2",
     "rxjs": "6.5.3",
     "slugify": "1.3.5",
-    "sortablejs": "^1.10.1",
     "tslib": "1.10.0",
     "zone.js": "0.10.2"
   },