feat(admin-ui): Implement drag-and-drop reorder of filter presets

packages/admin-ui/i18n-coverage.json

@@ -1,81 +1,81 @@
 {
-  "generatedOn": "2023-08-11T07:58:32.415Z",
-  "lastCommit": "6d726a81a5a9f13af8d6607678da8c72d5cf5e00",
+  "generatedOn": "2023-08-25T13:17:19.387Z",
+  "lastCommit": "8deb17927b4fc69c2602c82ed722a0980026e698",
   "translationStatus": {
     "ar": {
-      "tokenCount": 743,
-      "translatedCount": 740,
+      "tokenCount": 745,
+      "translatedCount": 743,
       "percentage": 100
     },
     "cs": {
-      "tokenCount": 743,
-      "translatedCount": 545,
-      "percentage": 73
+      "tokenCount": 745,
+      "translatedCount": 548,
+      "percentage": 74
     },
     "de": {
-      "tokenCount": 743,
-      "translatedCount": 739,
-      "percentage": 99
+      "tokenCount": 745,
+      "translatedCount": 743,
+      "percentage": 100
     },
     "en": {
-      "tokenCount": 743,
-      "translatedCount": 740,
+      "tokenCount": 745,
+      "translatedCount": 743,
       "percentage": 100
     },
     "es": {
-      "tokenCount": 743,
-      "translatedCount": 739,
-      "percentage": 99
+      "tokenCount": 745,
+      "translatedCount": 743,
+      "percentage": 100
     },
     "fr": {
-      "tokenCount": 743,
-      "translatedCount": 735,
+      "tokenCount": 745,
+      "translatedCount": 739,
       "percentage": 99
     },
     "he": {
-      "tokenCount": 743,
-      "translatedCount": 740,
+      "tokenCount": 745,
+      "translatedCount": 743,
       "percentage": 100
     },
     "it": {
-      "tokenCount": 743,
-      "translatedCount": 570,
+      "tokenCount": 745,
+      "translatedCount": 573,
       "percentage": 77
     },
     "pl": {
-      "tokenCount": 743,
-      "translatedCount": 380,
+      "tokenCount": 745,
+      "translatedCount": 383,
       "percentage": 51
     },
     "pt_BR": {
-      "tokenCount": 743,
-      "translatedCount": 739,
-      "percentage": 99
+      "tokenCount": 745,
+      "translatedCount": 742,
+      "percentage": 100
     },
     "pt_PT": {
-      "tokenCount": 743,
-      "translatedCount": 579,
+      "tokenCount": 745,
+      "translatedCount": 582,
       "percentage": 78
     },
     "ru": {
-      "tokenCount": 743,
-      "translatedCount": 740,
+      "tokenCount": 745,
+      "translatedCount": 743,
       "percentage": 100
     },
     "uk": {
-      "tokenCount": 743,
-      "translatedCount": 569,
+      "tokenCount": 745,
+      "translatedCount": 572,
       "percentage": 77
     },
     "zh_Hans": {
-      "tokenCount": 743,
-      "translatedCount": 515,
-      "percentage": 69
+      "tokenCount": 745,
+      "translatedCount": 518,
+      "percentage": 70
     },
     "zh_Hant": {
-      "tokenCount": 743,
-      "translatedCount": 360,
-      "percentage": 48
+      "tokenCount": 745,
+      "translatedCount": 363,
+      "percentage": 49
     }
   }
 }

packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-filter-presets.component.html

@@ -1,10 +1,22 @@
 <ng-container *ngIf="filterPresets$ | async as filterPresets">
-    <div class="preset-tabs" *ngIf="filters && filterPresets.length">
+    <div
+        class="preset-tabs"
+        *ngIf="filters && filterPresets.length"
+        cdkDropList
+        cdkDropListOrientation="horizontal"
+        (cdkDropListDropped)="drop($event)"
+    >
         <div
             *ngFor="let preset of filterPresets"
             class="preset-tab"
             [class.active]="preset.value === serializedActiveFilters"
+            cdkDrag
+            cdkDragBoundary=".preset-tabs"
+            cdkDragLockAxis="x"
         >
+            <div class="drag-handle" cdkDragHandle>
+                <clr-icon shape="drag-handle"></clr-icon>
+            </div>
             <a
                 [routerLink]="['./']"
                 [queryParams]="preset.value === serializedActiveFilters ? {} : { filters: preset.value }"
@@ -13,11 +25,12 @@
             </a>
             <vdr-dropdown>
                 <button class="icon-button" vdrDropdownTrigger>
-                    <clr-icon shape="ellipsis-vertical" size="12" />
+                    <clr-icon shape="ellipsis-vertical" size="12"/>
                 </button>
                 <vdr-dropdown-menu vdrPosition="bottom-left">
                     <button vdrDropdownItem (click)="deleteFilterPreset(preset.name)">
-                        <clr-icon shape="trash" class="is-danger"></clr-icon>{{ 'common.delete' | translate }}
+                        <clr-icon shape="trash" class="is-danger"></clr-icon>
+                        {{ 'common.delete' | translate }}
                     </button>
                 </vdr-dropdown-menu>
             </vdr-dropdown>

packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-filter-presets.component.scss

@@ -1,4 +1,3 @@
-
 .preset-tabs {
     padding-inline-start: var(--surface-margin-left);
     margin: var(--space-unit) 0;
@@ -16,12 +15,12 @@
     cursor: pointer;
     white-space: nowrap;
     text-transform: none;
-    padding-inline-end: calc(var(--space-unit) * 1);
+    padding: 0 calc(var(--space-unit) * 1);
     border-bottom: 1px solid var(--color-weight-300);
     cursor: pointer;
 
     > a {
-        padding: calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);
+        padding: calc(var(--space-unit) * 1) 0;
         padding-inline-end: 0;
         color: var(--color-weight-600);
     }
@@ -40,3 +39,27 @@
     align-items: center;
     gap: calc(var(--space-unit) * 0.5);
 }
+
+.drag-handle {
+    cursor: move;
+}
+
+.cdk-drag-preview {
+    box-sizing: border-box;
+    opacity: 0.8;
+    background: var(--color-weight-100);
+    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);
+}
+
+.cdk-drag-placeholder {
+    opacity: 0;
+}
+
+.cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.preset-tabs.cdk-drop-list-dragging .preset-tab:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-filter-presets.component.ts

@@ -1,3 +1,4 @@
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Observable, Subject } from 'rxjs';
@@ -49,4 +50,8 @@ export class DataTableFilterPresetsComponent implements OnInit, OnDestroy {
         });
         this.serializedActiveFilters = this.filters.serialize();
     }
+
+    drop(event: CdkDragDrop<any>) {
+        this.filterPresetService.reorderPresets(this.dataTableId, event.previousIndex, event.currentIndex);
+    }
 }

packages/admin-ui/src/lib/core/src/shared/components/data-table-2/filter-preset.service.ts

@@ -1,3 +1,4 @@
+import { moveItemInArray } from '@angular/cdk/drag-drop';
 import { Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { DataTableConfig, LocalStorageService } from '../../../providers/local-storage/local-storage.service';
@@ -56,4 +57,13 @@ export class FilterPresetService {
         this.localStorageService.set('dataTableConfig', dataTableConfig);
         this._presetChanges.next(dataTableConfig[config.dataTableId].filterPresets);
     }
+
+    reorderPresets(dataTableId: string, fromIndex: number, toIndex: number) {
+        const presets = this.getFilterPresets(dataTableId);
+        moveItemInArray(presets, fromIndex, toIndex);
+        const dataTableConfig = this.getDataTableConfig(dataTableId);
+        dataTableConfig[dataTableId].filterPresets = presets;
+        this.localStorageService.set('dataTableConfig', dataTableConfig);
+        this._presetChanges.next(presets);
+    }
 }