From ce57ea2bd05196459926959c524452592a182954 Mon Sep 17 00:00:00 2001 From: linch90 Date: Fri, 10 Nov 2023 18:47:09 +0800 Subject: [PATCH 1/4] add description for the usage `ColumnPredicate` of `EntityProp`. --- .../Angular/Data-Table-Column-Extensions.md | 51 ++++++++++++------- 1 file changed, 34 insertions(+), 17 deletions(-) diff --git a/docs/en/UI/Angular/Data-Table-Column-Extensions.md b/docs/en/UI/Angular/Data-Table-Column-Extensions.md index 6f1367d934..31923aba8b 100644 --- a/docs/en/UI/Angular/Data-Table-Column-Extensions.md +++ b/docs/en/UI/Angular/Data-Table-Column-Extensions.md @@ -1,6 +1,5 @@ # Data Table Column (or Entity Prop) Extensions for Angular UI - ## Introduction Entity prop extension system allows you to add a new column to the data table for an entity or change/remove an already existing one. A "Name" column was added to the user management page below: @@ -196,6 +195,16 @@ type PropCallback = (data?: PropData) => R; type PropPredicate = (data?: PropData) => boolean; ``` +### ColumnPredicate + +`ColumnPredicate` is the type of the predicate function that can be passed to an `EntityProp` as `columnVisible` parameter. A column predicate gets a single parameter, the `GetInjected`, you can use the `GetInjected` parameter to reach injected `Service` or `Component`. The return type must be `boolean`. Here is a simplified representation: + +```js +type ColumnPredicate = (getInjected: GetInjected) => boolean; +``` + +```` + ### EntityPropOptions\ `EntityPropOptions` is the type that defines required and optional properties you have to pass in order to create an entity prop. @@ -204,16 +213,17 @@ Its type definition is as follows: ```js type EntityPropOptions = { - type: ePropType; - name: string; - displayName?: string; - valueResolver?: PropCallback>; - sortable?: boolean; - columnWidth?: number; - permission?: string; - visible?: PropPredicate; + type: ePropType, + name: string, + displayName?: string, + valueResolver?: PropCallback>, + sortable?: boolean, + columnWidth?: number, + permission?: string, + visible?: PropPredicate, + columnVisible?: ColumnPredicate, }; -``` +```` As you see, passing `type` and `name` is enough to create an entity prop. Here is what each property is good for: @@ -224,9 +234,12 @@ As you see, passing `type` and `name` is enough to create an entity prop. Here i - **sortable** defines if the table is sortable based on this entity prop. Sort icons are shown based on it. (_default:_ `false`) - **columnWidth** defines a minimum width for the column. Good for horizontal scroll. (_default:_ `undefined`) - **permission** is the permission context which will be used to decide if a column for this entity prop should be displayed to the user or not. (_default:_ `undefined`) -- **visible** is a predicate that will be used to decide if this entity prop should be displayed on the table or not. (_default:_ `() => true`) +- **visible** is a predicate that will be used to decide if the cell content of this entity prop should be displayed on the table or not based on the data record. (_default:_ `() => true`) +- **columnVisible** is a predicate that will be used to decide if the column of this entity prop should be displayed on the table or not. (_default:_ `() => true`) > Important Note: Do not use record in visibility predicates. First of all, the table header checks it too and the record will be `undefined`. Second, if some cells are displayed and others are not, the table will be broken. Use the `valueResolver` and render an empty cell when you need to hide a specific cell. +> +> `visible` predicate only hide the cell content, not the column. Use `columnVisible` to hide the entire column. You may find a full example below. @@ -257,6 +270,10 @@ const options: EntityPropOptions = { return store.selectSnapshot(selectSensitiveDataVisibility).toLowerCase() === 'true'; } + columnVisible: getInjected => { + const sessionStateService = getInjected(SessionStateService); + return !sessionStateService.getTenant()?.isAvailable; // hide this column when the tenant is available. + }, }; const prop = new EntityProp(options); @@ -281,19 +298,19 @@ The items in the list will be displayed according to the linked list order, i.e. ```js export function reorderUserContributors( - propList: EntityPropList, + propList: EntityPropList ) { // drop email node const emailPropNode = propList.dropByValue( - 'AbpIdentity::EmailAddress', - (prop, text) => prop.text === text, + "AbpIdentity::EmailAddress", + (prop, text) => prop.text === text ); // add it back after phoneNumber propList.addAfter( emailPropNode.value, - 'phoneNumber', - (value, name) => value.name === name, + "phoneNumber", + (value, name) => value.name === name ); } ``` @@ -304,7 +321,7 @@ export function reorderUserContributors( ```js export function isLockedOutPropContributor( - propList: EntityPropList, + propList: EntityPropList ) { // add isLockedOutProp as 2nd column propList.add(isLockedOutProp).byIndex(1); From 9439b3615cc77fb103ebc29281347522bfef8c57 Mon Sep 17 00:00:00 2001 From: linch90 Date: Fri, 10 Nov 2023 18:52:41 +0800 Subject: [PATCH 2/4] commit. --- docs/en/UI/Angular/Data-Table-Column-Extensions.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/en/UI/Angular/Data-Table-Column-Extensions.md b/docs/en/UI/Angular/Data-Table-Column-Extensions.md index 31923aba8b..f91621e055 100644 --- a/docs/en/UI/Angular/Data-Table-Column-Extensions.md +++ b/docs/en/UI/Angular/Data-Table-Column-Extensions.md @@ -203,8 +203,6 @@ type PropPredicate = (data?: PropData) => boolean; type ColumnPredicate = (getInjected: GetInjected) => boolean; ``` -```` - ### EntityPropOptions\ `EntityPropOptions` is the type that defines required and optional properties you have to pass in order to create an entity prop. @@ -223,7 +221,7 @@ type EntityPropOptions = { visible?: PropPredicate, columnVisible?: ColumnPredicate, }; -```` +``` As you see, passing `type` and `name` is enough to create an entity prop. Here is what each property is good for: From e99366fe6897e7ebd935d778743c0ba142903e86 Mon Sep 17 00:00:00 2001 From: linch90 Date: Fri, 10 Nov 2023 18:56:47 +0800 Subject: [PATCH 3/4] keep single quote from original doc. --- docs/en/UI/Angular/Data-Table-Column-Extensions.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/en/UI/Angular/Data-Table-Column-Extensions.md b/docs/en/UI/Angular/Data-Table-Column-Extensions.md index f91621e055..5a5b217f73 100644 --- a/docs/en/UI/Angular/Data-Table-Column-Extensions.md +++ b/docs/en/UI/Angular/Data-Table-Column-Extensions.md @@ -300,14 +300,14 @@ export function reorderUserContributors( ) { // drop email node const emailPropNode = propList.dropByValue( - "AbpIdentity::EmailAddress", + 'AbpIdentity::EmailAddress', (prop, text) => prop.text === text ); // add it back after phoneNumber propList.addAfter( emailPropNode.value, - "phoneNumber", + 'phoneNumber', (value, name) => value.name === name ); } From 8ec3225fe1f9263ce9d5e3665a9299e5e305a056 Mon Sep 17 00:00:00 2001 From: Masum ULU <49063256+masumulu28@users.noreply.github.com> Date: Fri, 10 Nov 2023 14:17:20 +0300 Subject: [PATCH 4/4] Update Data-Table-Column-Extensions.md --- .../UI/Angular/Data-Table-Column-Extensions.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/en/UI/Angular/Data-Table-Column-Extensions.md b/docs/en/UI/Angular/Data-Table-Column-Extensions.md index 5a5b217f73..7660ec5550 100644 --- a/docs/en/UI/Angular/Data-Table-Column-Extensions.md +++ b/docs/en/UI/Angular/Data-Table-Column-Extensions.md @@ -211,15 +211,15 @@ Its type definition is as follows: ```js type EntityPropOptions = { - type: ePropType, - name: string, - displayName?: string, - valueResolver?: PropCallback>, - sortable?: boolean, - columnWidth?: number, - permission?: string, - visible?: PropPredicate, - columnVisible?: ColumnPredicate, + type: ePropType; + name: string; + displayName?: string; + valueResolver?: PropCallback>; + sortable?: boolean; + columnWidth?: number; + permission?: string; + visible?: PropPredicate; + columnVisible?: ColumnPredicate; }; ```