mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-5219] Refactor Document list Filters (#6092)
* First commit * Second commit * Commit 4 * Add unit tests * Fix unit tests * Add documentation for breaking change * Fix rebase * Fix unit test
This commit is contained in:
davidcanonieto
GitHub
@@ -32,6 +32,7 @@ Displays the documents from a repository.
|
||||
- [Location Column](#location-column)
|
||||
- [Actions](#actions)
|
||||
- [Navigation mode](#navigation-mode)
|
||||
- [Header filters](#header-filters)
|
||||
- [Advanced usage and customization](#advanced-usage-and-customization)
|
||||
- [Image Resolver and Row Filter functions](#image-resolver-and-row-filter-functions)
|
||||
- [Custom 'empty folder' template](#custom-empty-folder-template)
|
||||
@@ -56,7 +57,7 @@ Displays the documents from a repository.
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| additionalSorting | `string[]` | ['isFolder DESC'] | Defines default sorting. The format is an array of strings `[key direction, otherKey otherDirection]` i.e. `['name desc', 'nodeType asc']` or `['name asc']`. Set this value if you want a base rule to be added to the sorting apart from the one driven by the header. |
|
||||
| additionalSorting | [`DataSorting`](../../../lib/core/datatable/data/data-sorting.model.ts) | Defines default sorting. The format is an array of strings `[key direction, otherKey otherDirection]` i.e. `['name desc', 'nodeType asc']` or `['name asc']`. Set this value if you want a base rule to be added to the sorting apart from the one driven by the header. |
|
||||
| allowDropFiles | `boolean` | false | When true, this enables you to drop files directly into subfolders shown as items in the list or into another file to trigger updating it's version. When false, the dropped file will be added to the current folder (ie, the one containing all the items shown in the list). See the [Upload directive](../../core/directives/upload.directive.md) for further details about how the file drop is handled. |
|
||||
| contentActions | `boolean` | false | Toggles content actions for each row |
|
||||
| contentActionsPosition | `string` | "right" | Position of the content actions dropdown menu. Can be set to "left" or "right". |
|
||||
@@ -78,13 +79,15 @@ Displays the documents from a repository.
|
||||
| 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 | `string` | | Toggles the header |
|
||||
| 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. |
|
||||
| sorting | `string[]` \| [`DataSorting`](../../../lib/core/datatable/data/data-sorting.model.ts) | ['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` | "server" | 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. |
|
||||
| thumbnails | `boolean` | false | Show document thumbnails rather than icons |
|
||||
| where | `string` | | Filters the [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/Node.md) list using the _where_ condition of the REST API (for example, isFolder=true). See the REST API documentation for more information. |
|
||||
| currentFolderId | `string` | | The ID of the folder node to display or a reserved string alias for special sources |
|
||||
| currentFolderId | `string` | null | The ID of the folder node to display or a reserved string alias for special sources |
|
||||
| rowFilter | [`RowFilter`](../../../lib/content-services/src/lib/document-list/data/row-filter.model.ts) | | Custom function to choose whether to show or hide rows. See the [Row Filter Model](row-filter.model.md) page for more information. |
|
||||
| headerFilters | `boolean` | false | Toggles the header filters mode. |
|
||||
| filterValue | any | | Initial value for filter. |
|
||||
|
||||
### Events
|
||||
|
||||
@@ -96,7 +99,8 @@ Displays the documents from a repository.
|
||||
| nodeDblClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>` | Emitted when the user double-clicks a list node |
|
||||
| nodeSelected | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeEntry.md)`[]>` | Emitted when the node selection change |
|
||||
| preview | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>` | Emitted when the user acts upon files with either single or double click (depends on `navigation-mode`). Useful for integration with the [Viewer component](../../core/components/viewer.component.md). |
|
||||
| ready | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodePaging`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/NodePaging.md)`>` | Emitted when the Document List has loaded all items and is ready for use |
|
||||
| ready | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodePaging`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/NodePaging.md)`>` | Emitted when the Document List has loaded all items and is ready for use. |
|
||||
| filterSelection | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FilterSearch[]`](../../../lib/content-services/src/lib/search/filter-search.interface.ts)`>` | Emitted when a filter value is selected. |
|
||||
|
||||
## Details
|
||||
|
||||
@@ -687,6 +691,18 @@ The following example switches navigation to single clicks:
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
### Header filters
|
||||
|
||||
You can enable Header filters in your document list simply setting to true its `headerFilters` input.
|
||||
|
||||
```html
|
||||
<adf-document-list
|
||||
currentFolderId="-my-"
|
||||
[headerFilters]="true">
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
|
||||
## Advanced usage and customization
|
||||
|
||||
### Image Resolver and Row Filter functions
|
||||
|
||||
@@ -1,71 +0,0 @@
|
||||
---
|
||||
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.
|
||||
|
||||
|
||||
|
||||
## 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](../../content-services/components/document-list.component.md). 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`](../../../lib/core/datatable/data/data-column.model.ts) | | The column the filter will be applied on. |
|
||||
| currentFolderNodeId | `string` | | The id of the current folder of the document list. |
|
||||
| maxItems | `number` | | Maximum number of search results to show in a page. |
|
||||
| skipCount | `number` | | The offset of the start of the page within the results list. |
|
||||
| sorting | `string` | null | The sorting to apply to the the filter. |
|
||||
| value | `any` | | (optional) Initial filter value to sort . |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| clear | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the last of all the filters is cleared. |
|
||||
| selection | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Map<string, string>>` | Emitted when a filter value is selected |
|
||||
| update | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodePaging`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/NodePaging.md)`>` | Emitted when the result of the filter is received from the API. |
|
||||
|
||||
## 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)
|
||||
BIN
docs/docassets/images/header-filters.png
Normal file
BIN
docs/docassets/images/header-filters.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
62
docs/upgrade-guide/upgrade40-41.md
Normal file
62
docs/upgrade-guide/upgrade40-41.md
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
Title: Upgrading from ADF v4.0 to v4.1
|
||||
---
|
||||
|
||||
# Upgrading from ADF v4.0 to v4.1
|
||||
|
||||
This guide explains how to upgrade your ADF v4.0 project to work with v4.1.
|
||||
|
||||
Do not skip this task, if you want your application to be updated to a most recent version of ADF.
|
||||
Upgrades of multiple versions of ADF cannot be done in one step only, but should follow the chain of sequential updates.
|
||||
|
||||
**Note:** the steps described below might involve making changes
|
||||
to your code. If you are working with a versioning system then you should
|
||||
commit any changes you are currently working on. If you aren't using versioning
|
||||
then be sure to make a backup copy of your project before going ahead with the
|
||||
upgrade.
|
||||
|
||||
## Header Filters for Document List Components
|
||||
|
||||
We released a new feature called Header Filters in ADF 4.0. It would allow users to filter the content of a folder by its columns properties. While this feature was working we noticed it was hard to implement. That is way we came up with a new way of enabling this feature.
|
||||
|
||||
You will need to update your code to overcome this breaking change.
|
||||
|
||||
ADF 4.0 implementation
|
||||
```html
|
||||
<adf-document-list
|
||||
currentFolderId="-my-">
|
||||
<adf-custom-header-filter-template *ngIf="enableCustomHeaderFilter">
|
||||
<ng-template let-col>
|
||||
<adf-search-header [col]="col"
|
||||
[value]="paramValues"
|
||||
[currentFolderNodeId]="currentFolderId"
|
||||
[sorting]="filterSorting"
|
||||
[maxItems]="pagination.maxItems"
|
||||
[skipCount]="pagination.skipCount"
|
||||
(update)="onFilterUpdate($event)"
|
||||
(clear)="onAllFilterCleared()"
|
||||
(selection)="onFilterSelected($event)">
|
||||
</adf-search-header>
|
||||
</ng-template>
|
||||
</adf-custom-header-filter-template>
|
||||
</adf-document-list>
|
||||
```
|
||||
ADF 4.1 implementation
|
||||
```html
|
||||
<adf-document-list
|
||||
currentFolderId="-my-"
|
||||
[headerFilters]="true">
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
This is all you'll need to set it up in your app. Alternatively, you can also pass an initial value to the filters and listen to filter selection changes.
|
||||
|
||||
```html
|
||||
<adf-document-list
|
||||
currentFolderId="-my-"
|
||||
[headerFilters]="true"
|
||||
[filterValue]="paramValues"
|
||||
(filterSelection)="onFilterSelected($event)">
|
||||
</adf-document-list>
|
||||
```
|
||||
Notice that for this feature in ADF 4.0 to work you also needed to overwrite the `SearchFilterQueryBuilderService` with `SEARCH_QUERY_SERVICE_TOKEN` at an app level to make it work. That is no longer the case with the new version. The component will handle everything for you.
|
||||
Reference in New Issue
Block a user