diff --git a/packages/admin-ui/i18n-coverage.json b/packages/admin-ui/i18n-coverage.json index 2e63e3ac66..de83ddcf06 100644 --- a/packages/admin-ui/i18n-coverage.json +++ b/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 } } } \ No newline at end of file diff --git a/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-filter-presets.component.html b/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-filter-presets.component.html index 3e59229a5f..fb573286b5 100644 --- a/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-filter-presets.component.html +++ b/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-filter-presets.component.html @@ -1,10 +1,22 @@ -
+
+
+ +
diff --git a/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-filter-presets.component.scss b/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-filter-presets.component.scss index 07d628a1f7..d631f53e79 100644 --- a/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-filter-presets.component.scss +++ b/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); +} diff --git a/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-filter-presets.component.ts b/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-filter-presets.component.ts index d3a4609ea9..577b59537c 100644 --- a/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-filter-presets.component.ts +++ b/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) { + this.filterPresetService.reorderPresets(this.dataTableId, event.previousIndex, event.currentIndex); + } } diff --git a/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/filter-preset.service.ts b/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/filter-preset.service.ts index 72665bf7a9..8a8b499cd3 100644 --- a/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/filter-preset.service.ts +++ b/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); + } }