feat(admin-ui): Make data table filter area toggleable

packages/admin-ui/src/lib/catalog/src/components/collection-data-table/collection-data-table.component.html

@@ -39,24 +39,38 @@
                 </th>
             </tr>
             <tr *ngIf="searchComponent || customSearchTemplate || filters?.length">
-                <th [attr.colspan]="visibleColumns.length + (selectionManager ? 1 : 0)" class="filter-row">
-                    <ng-container *ngTemplateOutlet="searchComponent?.template"></ng-container>
-                    <ng-container *ngTemplateOutlet="customSearchTemplate"></ng-container>
-                    <ng-container *ngIf="filters">
-                        <div class="filters">
-                            <vdr-data-table-filters
-                                *ngFor="let activeFilter of filters.activeFilters"
-                                [filterWithValue]="activeFilter"
-                                [filters]="filters"
-                                class="mt-1"
-                            ></vdr-data-table-filters>
-                            <vdr-data-table-filters
-                                *ngIf="filters.length"
-                                [filters]="filters"
-                                class="mt-1"
-                            ></vdr-data-table-filters>
-                        </div>
-                    </ng-container>
+                <th
+                    [attr.colspan]="visibleColumns.length + (selectionManager ? 1 : 0)"
+                    class="filter-row"
+                    [class.active]="showSearchFilterRow"
+                >
+                    <button
+                        class="button-ghost toggle-search-filter-row"
+                        [class.active]="showSearchFilterRow"
+                        (click)="toggleSearchFilterRow()"
+                        [title]="'common.search-and-filter-list' | translate"
+                    >
+                        <clr-icon shape="search"></clr-icon>
+                    </button>
+                    <div class="filter-row-wrapper" [class.hidden]="!showSearchFilterRow">
+                        <ng-container *ngTemplateOutlet="searchComponent?.template"></ng-container>
+                        <ng-container *ngTemplateOutlet="customSearchTemplate"></ng-container>
+                        <ng-container *ngIf="filters">
+                            <div class="filters">
+                                <vdr-data-table-filters
+                                    *ngFor="let activeFilter of filters.activeFilters"
+                                    [filterWithValue]="activeFilter"
+                                    [filters]="filters"
+                                    class="mt-1"
+                                ></vdr-data-table-filters>
+                                <vdr-data-table-filters
+                                    *ngIf="filters.length"
+                                    [filters]="filters"
+                                    class="mt-1"
+                                ></vdr-data-table-filters>
+                            </div>
+                        </ng-container>
+                    </div>
                 </th>
             </tr>
         </thead>

packages/admin-ui/src/lib/core/src/data/definitions/settings-definitions.ts

@@ -27,6 +27,8 @@ export const GET_COUNTRY_LIST = gql`
         countries(options: $options) {
             items {
                 id
+                createdAt
+                updatedAt
                 code
                 name
                 enabled

packages/admin-ui/src/lib/core/src/providers/local-storage/local-storage.service.ts

@@ -8,6 +8,7 @@ import { WidgetLayoutDefinition } from '../dashboard-widget/dashboard-widget-typ
 export type DataTableConfig = {
     [id: string]: {
         visibility: string[];
+        showSearchFilterRow: boolean;
     };
 };
 

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

@@ -38,24 +38,38 @@
                 </th>
             </tr>
             <tr *ngIf="searchComponent || customSearchTemplate || filters?.length">
-                <th [attr.colspan]="visibleColumns.length + (selectionManager ? 1 : 0)" class="filter-row">
-                    <ng-container *ngTemplateOutlet="searchComponent?.template"></ng-container>
-                    <ng-container *ngTemplateOutlet="customSearchTemplate"></ng-container>
-                    <ng-container *ngIf="filters">
-                        <div class="filters">
-                            <vdr-data-table-filters
-                                *ngFor="let activeFilter of filters.activeFilters"
-                                [filterWithValue]="activeFilter"
-                                [filters]="filters"
-                                class="mt-1"
-                            ></vdr-data-table-filters>
-                            <vdr-data-table-filters
-                                *ngIf="filters.length"
-                                [filters]="filters"
-                                class="mt-1"
-                            ></vdr-data-table-filters>
-                        </div>
-                    </ng-container>
+                <th
+                    [attr.colspan]="visibleColumns.length + (selectionManager ? 1 : 0)"
+                    class="filter-row"
+                    [class.active]="showSearchFilterRow"
+                >
+                    <button
+                        class="button-ghost toggle-search-filter-row"
+                        [class.active]="showSearchFilterRow"
+                        (click)="toggleSearchFilterRow()"
+                        [title]="'common.search-and-filter-list' | translate"
+                    >
+                        <clr-icon shape="search"></clr-icon>
+                    </button>
+                    <div class="filter-row-wrapper" [class.hidden]="!showSearchFilterRow">
+                        <ng-container *ngTemplateOutlet="searchComponent?.template"></ng-container>
+                        <ng-container *ngTemplateOutlet="customSearchTemplate"></ng-container>
+                        <ng-container *ngIf="filters">
+                            <div class="filters">
+                                <vdr-data-table-filters
+                                    *ngFor="let activeFilter of filters.activeFilters"
+                                    [filterWithValue]="activeFilter"
+                                    [filters]="filters"
+                                    class="mt-1"
+                                ></vdr-data-table-filters>
+                                <vdr-data-table-filters
+                                    *ngIf="filters.length"
+                                    [filters]="filters"
+                                    class="mt-1"
+                                ></vdr-data-table-filters>
+                            </div>
+                        </ng-container>
+                    </div>
                 </th>
             </tr>
         </thead>

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

@@ -30,7 +30,7 @@ table.no-select {
 .column-picker {
     position: absolute;
     right: 2px;
-    top: 7px;
+    top: 12px;
 }
 
 .heading-row th {
@@ -64,20 +64,36 @@ table.no-select {
         font-weight: 400;
     }
 }
-
-.filter-row {
+.toggle-search-filter-row {
+    position: absolute;
+    top: -12px;
+    left: 4px;
+    &.active {
+        background-color: var(--color-primary-700);
+        color: var(--color-primary-100);
+        border-color: var(--color-primary-700);
+    }
+}
+th.filter-row {
+    position: relative;
     font-size: var(--font-size-base);
     font-weight: 400;
     background-color: var(--color-weight-100);
-    padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 4);
     box-shadow: inset -1px 6px 5px 0px rgb(165 165 165 / 8%);
-    border-bottom: 1px solid var(--color-weight-200);
+
     border-left-width: 0;
     border-right-width: 0;
     text-align: initial;
+    padding: 0;
+
     input {
         width: 100%;
     }
+
+    &.active {
+        border-bottom: 1px solid var(--color-weight-200);
+    }
+
     .filters {
         margin-top: calc(var(--space-unit) * 1);
         display: flex;
@@ -85,6 +101,19 @@ table.no-select {
         gap: calc(var(--space-unit) * 0.5);
     }
 }
+.filter-row-wrapper {
+    padding: calc(var(--space-unit) * 4);
+    padding-left: 0;
+    max-height: 150px;
+    transition: max-height 0.2s, padding 0.2s, opacity 0.2s;
+    &.hidden {
+        max-height: 0px;
+        padding-top: 0;
+        padding-bottom: 0;
+        overflow: hidden;
+        opacity: 0;
+    }
+}
 
 th,
 td {

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

@@ -114,6 +114,7 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnIn
     // This is used to apply a `user-select: none` CSS rule to the table,
     // which allows shift-click multi-row selection
     disableSelect = false;
+    showSearchFilterRow = false;
     private subscription: Subscription | undefined;
 
     constructor(
@@ -174,7 +175,7 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnIn
         }
         const updateColumnVisibility = () => {
             if (!dataTableConfig[this.id]) {
-                dataTableConfig[this.id] = { visibility: [] };
+                dataTableConfig[this.id] = { visibility: [], showSearchFilterRow: false };
             }
             dataTableConfig[this.id].visibility = this.columns
                 .filter(c => (c.visible && c.hiddenByDefault) || (!c.visible && !c.hiddenByDefault))
@@ -196,6 +197,17 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnIn
                 this.changeDetectorRef.markForCheck();
             });
         }
+        this.showSearchFilterRow = dataTableConfig?.[this.id].showSearchFilterRow ?? false;
+    }
+
+    toggleSearchFilterRow() {
+        this.showSearchFilterRow = !this.showSearchFilterRow;
+        const dataTableConfig = this.localStorageService.get('dataTableConfig') ?? {};
+        if (!dataTableConfig[this.id]) {
+            dataTableConfig[this.id] = { visibility: [], showSearchFilterRow: false };
+        }
+        dataTableConfig[this.id].showSearchFilterRow = this.showSearchFilterRow;
+        this.localStorageService.set('dataTableConfig', dataTableConfig);
     }
 
     trackByFn(index: number, item: any) {

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

@@ -0,0 +1,7 @@
+button {
+    opacity: 0.7;
+    transition: opacity 0.2s;
+    &:hover, &:focus, &:active {
+        opacity: 1;
+    }
+}

packages/admin-ui/src/lib/settings/src/components/country-list/country-list.component.html

@@ -52,15 +52,6 @@
                 {{ country.createdAt | localeDate : 'short' }}
             </ng-template>
         </vdr-dt2-column>
-        <vdr-dt2-column
-            [heading]="'common.created-at' | translate"
-            [hiddenByDefault]="true"
-            [sort]="sorts.get('createdAt')"
-        >
-            <ng-template let-country="item">
-                {{ country.createdAt | localeDate : 'short' }}
-            </ng-template>
-        </vdr-dt2-column>
         <vdr-dt2-column
             [heading]="'common.updated-at' | translate"
             [hiddenByDefault]="true"