feat(admin-ui): Allow reset of data table columns, style fixes

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

@@ -36,6 +36,10 @@ export class DataTable2ColumnComponent<T> implements OnInit {
         this.#onColumnChangeFns.forEach(fn => fn());
     }
 
+    resetVisibility() {
+        this.setVisibility(!this.hiddenByDefault);
+    }
+
     onColumnChange(callback: () => void) {
         this.#onColumnChangeFns.push(callback);
     }

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

@@ -39,6 +39,7 @@
                             [uiLanguage]="uiLanguage$ | async"
                             [columns]="sortedColumns"
                             (reorder)="onColumnReorder($event)"
+                            (resetColumns)="onColumnsReset()"
                         ></vdr-data-table-colum-picker>
                     </div>
                 </th>

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

@@ -243,6 +243,13 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnIn
         this.localStorageService.set('dataTableConfig', dataTableConfig);
     }
 
+    onColumnsReset() {
+        const dataTableConfig = this.getDataTableConfig();
+        dataTableConfig[this.id].order = {};
+        dataTableConfig[this.id].visibility = [];
+        this.localStorageService.set('dataTableConfig', dataTableConfig);
+    }
+
     toggleSearchFilterRow() {
         this.showSearchFilterRow = !this.showSearchFilterRow;
         const dataTableConfig = this.getDataTableConfig();

packages/admin-ui/src/lib/core/src/shared/components/data-table-column-picker/data-table-column-picker.component.html

@@ -26,5 +26,11 @@
                 </label>
             </div>
         </div>
+        <div class="mt-1 mx-1 flex center">
+            <button class="button-small" (click)="reset()">
+                <span>{{ 'common.reset-columns' | translate }}</span>
+                <clr-icon shape="history"></clr-icon>
+            </button>
+        </div>
     </vdr-dropdown-menu>
 </vdr-dropdown>

packages/admin-ui/src/lib/core/src/shared/components/data-table-column-picker/data-table-column-picker.component.scss

@@ -1,10 +1,3 @@
-button {
-    opacity: 0.7;
-    transition: opacity 0.2s;
-    &:hover, &:focus, &:active {
-        opacity: 1;
-    }
-}
 .column-list {
     display: flex;
     align-items: center;
@@ -12,6 +5,7 @@ button {
 
 .drag-handle {
     cursor: grab;
+    margin-top: -4px;
 }
 
 .cdk-drop-list-dragging .cdk-drag {

packages/admin-ui/src/lib/core/src/shared/components/data-table-column-picker/data-table-column-picker.component.ts

@@ -13,6 +13,7 @@ export class DataTableColumnPickerComponent {
     @Input() columns: Array<DataTable2ColumnComponent<any>>;
     @Input() uiLanguage: LanguageCode;
     @Output() reorder = new EventEmitter<{ column: DataTable2ColumnComponent<any>; newIndex: number }>();
+    @Output() resetColumns = new EventEmitter<void>();
 
     toggleColumn(column: DataTable2ColumnComponent<any>) {
         column.setVisibility(!column.visible);
@@ -24,4 +25,9 @@ export class DataTableColumnPickerComponent {
             newIndex: event.currentIndex,
         });
     }
+
+    reset() {
+        this.columns.forEach(c => c.resetVisibility());
+        this.resetColumns.emit();
+    }
 }

packages/admin-ui/src/lib/core/src/shared/components/page-header-tabs/page-header-tabs.component.html

@@ -4,7 +4,7 @@
         class="tab"
         *ngFor="let tab of tabs"
         routerLinkActive="active"
-        [routerLinkActiveOptions]="{ exact: true }"
+        [routerLinkActiveOptions]="routerLinkActiveOptions"
     >
         {{ tab.label | translate }}
     </a>

packages/admin-ui/src/lib/core/src/shared/components/page-header-tabs/page-header-tabs.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { IsActiveMatchOptions } from '@angular/router';
 
 export interface HeaderTab {
     id: string;
@@ -15,4 +16,11 @@ export interface HeaderTab {
 })
 export class PageHeaderTabsComponent {
     @Input() tabs: HeaderTab[] = [];
+
+    readonly routerLinkActiveOptions: IsActiveMatchOptions = {
+        matrixParams: 'ignored',
+        queryParams: 'ignored',
+        fragment: 'ignored',
+        paths: 'exact',
+    };
 }