Allow ordering the sort order via drag and drop

Signed-off-by: trivernis <trivernis@protonmail.com>

mediarepo-ui/src/app/app.module.ts

@@ -40,6 +40,7 @@ import { FileGalleryEntryComponent } from './components/file-gallery/file-galler
 import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
 import {BlockUIModule} from "primeng/blockui";
 import {PanelModule} from "primeng/panel";
+import {DragDropModule} from "@angular/cdk/drag-drop";
 
 @NgModule({
   declarations: [
@@ -86,6 +87,7 @@ import {PanelModule} from "primeng/panel";
         MatProgressSpinnerModule,
         BlockUIModule,
         PanelModule,
+        DragDropModule,
     ],
   providers: [],
   bootstrap: [AppComponent]

mediarepo-ui/src/app/components/file-search/filter-dialog/filter-dialog.component.html

@@ -1,7 +1,9 @@
 <h1 mat-dialog-title>Sort Entries</h1>
 <div mat-dialog-content>
-    <div class="sort-input-list">
+    <div cdkDropList class="sort-input-list" (cdkDropListDropped)="this.onSortEntryDrop($event)">
-      <div class="sort-input-row" *ngFor="let sortKey of sortEntries">
+      <div cdkDrag class="sort-input-row" *ngFor="let sortKey of sortEntries">
+        <div class="drag-placeholder" *cdkDragPlaceholder></div>
+        <div class="drag-handle" cdkDragHandle><mat-icon>drag_handle</mat-icon></div>
         <mat-form-field>
           <mat-label>Key</mat-label>
           <mat-select required [(value)]="sortKey.sortType">

mediarepo-ui/src/app/components/file-search/filter-dialog/filter-dialog.component.scss

@@ -12,7 +12,7 @@ mat-dialog-content {
   width: 100%;
 }
 
-mat-form-field, .filler {
+mat-form-field, .filler, .drag-handle {
   display: table-cell;
   padding: 0 1em;
 }
@@ -25,3 +25,34 @@ mat-form-field, .filler {
     margin-left: 1em;
   }
 }
+
+.drag-handle {
+  cursor: grab;
+  height: 100%;
+  width: 2em;
+}
+
+.drag-handle:active {
+  cursor: grabbing;
+}
+
+::ng-deep .cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+  0 8px 10px 1px rgba(0, 0, 0, 0.14),
+  0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  background: rgba(0, 0, 0, 0.5);
+}
+
+::ng-deep .cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.drag-placeholder {
+  display: block;
+  height: 71px;
+  width: 100%;
+  background-color: darken(dimgrey, 20);
+  border-radius: 1em;
+}

mediarepo-ui/src/app/components/file-search/filter-dialog/filter-dialog.component.ts

@@ -1,6 +1,7 @@
 import {Component, Inject} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
 import {SortKey} from "../../../models/SortKey";
+import {CdkDragDrop, moveItemInArray} from "@angular/cdk/drag-drop";
 
 @Component({
   selector: 'app-filter-dialog',
@@ -32,4 +33,8 @@ export class FilterDialogComponent {
   public cancelSort(): void {
     this.dialogRef.close()
   }
+
+  public onSortEntryDrop(event: CdkDragDrop<SortKey[]>): void {
+    moveItemInArray(this.sortEntries, event.previousIndex, event.currentIndex);
+  }
 }