ACA-3426 - Search Headers for Document List (#5800)

* [ACA-3426] Move filter-menu inside search and renamed as search-header * [ACA-3426] adf-search-header removed from document-list and implemented in app-files * [ACA-3426] Allow custom header filters inside document-list * [ACA-3426] Decouple search from the document-list * [ACA-3409] NodePaging ouputed to the DL * [ACA-3426] - fixed injection for service * Dev baptiste aca 3430 (#5773) * [ACA-3430] Add style to filter and hide action buttons from facet widgets * [ACA-3430] Update eventEmitter created in the DL and create unit tests for the search-header Co-authored-by: BaptisteMahe <mahe.baptiste.19@gmail.com> * [ACA-3426] - added parent for service * [ACA-3426] - added parent for service - fixed method * [ACA-3426] Revert update EventEmitter inside DL * [ACA-3436] Use of the node input instead of nodeUpdate mehtod * [ACA-3426] Add clear behaviour to search-header * [ACA-3426] Remove useless update exposition * [ACA-3426] Update filter button styles and padding inside the filter menu * [ACA-3443] Propagate filters states through DL and datatable to avoid hiding the header * [ACA-3426] Refactor showHeader logic and use it for the filters * [ACA-3426] - fixed pagination for filter result * [ACA-3426] - fixed messed files after rebase * [ACA-3426] - added simplified config version * [ACA-3426] - enabling created by filter * [ACA-3426] Fix search-date-range apply method * [ACA-3426] Fix loading style and default showHeaderMode * [ACA-3426] Changed showHedaer default to always * [ACA-3426] - stabilised the feature and added injection token * [ACA-3426] Add unit test for showHeader new behaviour * [ACA-3426] Add documentation to search-header * [ACA-3426] - added parent filtering for special folders * [ACA-3426] - added unit test for search header * [ACA-3426] - fixed search fitler behavour * [ACA-3426] - fixed search result inject service * [ACA-3426] - fixed search result inject service for search sorting * [ACA-3426] - fixed title for matching selector * [ACA-3426] - fixed app config with missing search widget * Update search-header.component.md Co-authored-by: BaptisteMahe <mahe.baptiste.19@gmail.com> Co-authored-by: Eugenio Romano <eromano@users.noreply.github.com>
2025-07-24 17:32:15 +00:00 · 2020-06-22 09:24:57 +01:00
parent 5a0ba6666d
commit 29d953e2d1
54 changed files with 1888 additions and 544 deletions
--- a/docs/content-services/components/document-list.component.md
+++ b/docs/content-services/components/document-list.component.md
@@ -75,7 +75,7 @@ Displays the documents from a repository.
 | rowStyle | `string` |  | The inline style to apply to every row. See the Angular NgStyle docs for more details and usage examples. |
 | rowStyleClass | `string` |  | The CSS class to apply to every row |
 | selectionMode | `string` | "single" | Row selection mode. Can be null, `single` or `multiple`. For `multiple` mode, you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
-| showHeader | `boolean` | true | Toggles the header |
+| showHeader | `ShowHeaderMode` | "data" | Indicate which is the desired behaviour for the header. Can have 3 values `always`, `never` and `data`. `data` won't display the header if the datatable is empty and will display it otherwise. |
 | sorting | `string[]` | ['name', 'asc'] | Defines default sorting. The format is an array of 2 strings `[key, direction]` i.e. `['name', 'desc']` or `['name', 'asc']`. Set this value only if you want to override the default sorting detected by the component based on columns. |
 | sortingMode | `string` | "client" | Defines sorting mode. Can be either `client` (items in the list are sorted client-side) or `server` (the ordering supplied by the server is used without further client-side sorting). Note that the `server` option _does not_ request the server to sort the data before delivering it. |
 | stickyHeader | `boolean` | false | Toggles the sticky header mode. |
--- a/docs/content-services/components/search-header.component.md
+++ b/docs/content-services/components/search-header.component.md
@@ -0,0 +1,81 @@
+---
+Title: SearchHeader component
+Added: v3.9.0
+Status: Active
+Last reviewed: 2020-19-06
+---
+# [SearchHeader component](../../../lib/content-services/src/lib/search/components/search-header/search-header.component.ts "Defined in search-header.component.ts")
+
+Displays a button opening a menu designed to filter a document list.
+
+![SearchHeader demo](../../docassets/images/search-header-demo.png)
+
+## Contents
+
+-   [Basic usage](#basic-usage)
+-   [Class members](#class-members)
+    -   [Properties](#properties)
+    -   [Events](#events)
+-   [Details](#details)
+    -   [example](#example)
+-   [See also](#see-also)
+
+## Basic usage
+
+**app.component.html**
+
+```html
+<adf-document-list
+    ...
+    ...> 
+    <adf-custom-header-filter-template>
+        <ng-template let-col>
+            <adf-search-header [col]="col"
+                                [currentFolderNodeId]="currentFolderId"
+                                [maxItems]="pagination?.maxItems"
+                                [skipCount]="pagination?.skipCount"
+                                (update)="onFilterUpdate($event)"
+                                (clear)="onAllFilterCleared()">
+            </adf-search-header>
+        </ng-template>
+    </adf-custom-header-filter-template>
+</adf-document-list>
+```
+
+**app.config.json**
+
+```json
+```
+
+This component is designed to be used as transcluded inside the document list component. With the good configurations it will allow the user to filter the data displayed by that component.
+
+## Class members
+
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| col | `DataColumn` | | The column the filter will be applied on. |
+| currentFolderNodeId | `string` | | The id of the current folder of the document list. |
+| maxItems | `number` | | Pagination parameter coming from the document list. |
+| skipCount | `number` | | An other pagination parameter coming from the document list. |
+| widgetContainer | `SearchWidgetContainerComponent` | | View of the child facet widget generated inside the menu. Used to control that widget through the apply and clear buttons. |
+| isActive | `boolean` | | A boolean telling if the current data displayed in the document list is affected by that filter. |
+| category | `SearchCategory` | | The category of the filter. It contains the information regarding the way the filter is filtering the data. This is get with the column information and the configuration of the search-header inside the config file |
+| isFilterServiceActive | `boolean` | | Boolean to check if the SearchHeaderQueryBuilderService is active |
+
+### Events
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| update | `EventEmitter<NodePaging>` | Emitted when the result of the filter is received from the API, should be passed to the `node` member of the document list. |
+| clear | `EventEmitter<any>` | Emitted when the last of all the filters is cleared. This should be used to trigger a `reload()` of the document list with no `node` member. |
+
+
+## See also
+
+-   [Document list component](document-list.component.md)
+-   [Search filter component](search-filter.component.md)
+-   [Search component](search.component.md)
+-   [Datatable component](../../core/components/datatable.component.md)
+-   [Search Query Builder service](../services/search-query-builder.service.md)