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: [
@@ -56,37 +57,38 @@ import {PanelModule} from "primeng/panel";
     FileGalleryComponent,
     FileGalleryEntryComponent,
   ],
-  imports: [
+    imports: [
-    BrowserModule,
+        BrowserModule,
-    AppRoutingModule,
+        AppRoutingModule,
-    BrowserAnimationsModule,
+        BrowserAnimationsModule,
-    MatCardModule,
+        MatCardModule,
-    MatListModule,
+        MatListModule,
-    MatButtonModule,
+        MatButtonModule,
-    MatToolbarModule,
+        MatToolbarModule,
-    MatSnackBarModule,
+        MatSnackBarModule,
-    MatFormFieldModule,
+        MatFormFieldModule,
-    MatInputModule,
+        MatInputModule,
-    ReactiveFormsModule,
+        ReactiveFormsModule,
-    MatSidenavModule,
+        MatSidenavModule,
-    MatGridListModule,
+        MatGridListModule,
-    MatProgressBarModule,
+        MatProgressBarModule,
-    MatPaginatorModule,
+        MatPaginatorModule,
-    ScrollingModule,
+        ScrollingModule,
-    LightboxModule,
+        LightboxModule,
-    MatChipsModule,
+        MatChipsModule,
-    MatIconModule,
+        MatIconModule,
-    MatAutocompleteModule,
+        MatAutocompleteModule,
-    MatTabsModule,
+        MatTabsModule,
-    FlexModule,
+        FlexModule,
-    GridModule,
+        GridModule,
-    MatRippleModule,
+        MatRippleModule,
-    MatDialogModule,
+        MatDialogModule,
-    MatSelectModule,
+        MatSelectModule,
-    MatProgressSpinnerModule,
+        MatProgressSpinnerModule,
-    BlockUIModule,
+        BlockUIModule,
-    PanelModule,
+        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);
+  }
 }