mirror of https://github.com/abpframework/abp.git
Halil İbrahim Kalkan
6 years ago
13 changed files with 504 additions and 73 deletions
@ -0,0 +1,161 @@ |
|||
# Data Table Column Extensions for ASP.NET Core UI |
|||
|
|||
## Introduction |
|||
|
|||
Data table column extension system allows you to add a **new table column** on the user interface. The example below adds a new column with the "Social security no" title: |
|||
|
|||
 |
|||
|
|||
You can use the standard column options to fine control the table column. |
|||
|
|||
> Note that this is a low level API to find control the table column. If you want to show an extension property on the table, see the [module entity extension](../../Module-Entity-Extensions.md) document. |
|||
|
|||
## How to Set Up |
|||
|
|||
### Create a JavaScript File |
|||
|
|||
First, add a new JavaScript file to your solution. We added inside the `/Pages/Identity/Users` folder of the `.Web` project: |
|||
|
|||
 |
|||
|
|||
Here, the content of this JavaScript file: |
|||
|
|||
```js |
|||
abp.ui.extensions.tableColumns |
|||
.get('identity.user') |
|||
.addContributor(function (columnList) { |
|||
columnList.addTail({ //add as the last column |
|||
title: 'Social security no', |
|||
data: 'extraProperties.SocialSecurityNumber', |
|||
orderable: false, |
|||
render: function (data, type, row) { |
|||
if (row.extraProperties.SocialSecurityNumber) { |
|||
return '<strong>' + |
|||
row.extraProperties.SocialSecurityNumber + |
|||
'<strong>'; |
|||
} else { |
|||
return '<i class="text-muted">undefined</i>'; |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
``` |
|||
|
|||
This example defines a custom `render` function to return a custom HTML to render in the column. |
|||
|
|||
### Add the File to the User Management Page |
|||
|
|||
Then you need to add this JavaScript file to the user management page. You can take the power of the [Bundling & Minification system](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Bundling-Minification). |
|||
|
|||
Write the following code inside the `ConfigureServices` of your module class: |
|||
|
|||
```csharp |
|||
Configure<AbpBundlingOptions>(options => |
|||
{ |
|||
options.ScriptBundles.Configure( |
|||
typeof(Volo.Abp.Identity.Web.Pages.Identity.Users.IndexModel).FullName, |
|||
bundleConfiguration => |
|||
{ |
|||
bundleConfiguration.AddFiles( |
|||
"/Pages/Identity/Users/my-user-extensions.js" |
|||
); |
|||
}); |
|||
}); |
|||
``` |
|||
|
|||
This configuration adds `my-user-extensions.js` to the user management page of the Identity Module. `typeof(Volo.Abp.Identity.Web.Pages.Identity.Users.IndexModel).FullName` is the name of the bundle in the user management page. This is a common convention used for all the ABP Commercial modules. |
|||
|
|||
### Rendering the Column |
|||
|
|||
This example assumes that you've defined a `SocialSecurityNumber` extra property using the [module entity extension](../../Module-Entity-Extensions.md) system. However; |
|||
|
|||
* You can add a new column that is related to an existing property of the user (that was not added to the table by default). Example: |
|||
|
|||
````js |
|||
abp.ui.extensions.tableColumns |
|||
.get('identity.user') |
|||
.addContributor(function (columnList) { |
|||
columnList.addTail({ |
|||
title: 'Phone confirmed?', |
|||
data: 'phoneNumberConfirmed', |
|||
render: function (data, type, row) { |
|||
if (row.phoneNumberConfirmed) { |
|||
return '<strong style="color: green">YES<strong>'; |
|||
} else { |
|||
return '<i class="text-muted">NO</i>'; |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
```` |
|||
|
|||
* You can add a new custom column that is not related to any entity property, but a completely custom information. Example: |
|||
|
|||
````js |
|||
abp.ui.extensions.tableColumns |
|||
.get('identity.user') |
|||
.addContributor(function (columnList) { |
|||
columnList.addTail({ |
|||
title: 'Custom column', |
|||
data: {}, |
|||
orderable: false, |
|||
render: function (data) { |
|||
if (data.phoneNumber) { |
|||
return "call: " + data.phoneNumber; |
|||
} else { |
|||
return ''; |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
```` |
|||
|
|||
## API |
|||
|
|||
This section explains details of the `abp.ui.extensions.tableColumns` JavaScript API. |
|||
|
|||
### abp.ui.extensions.tableColumns.get(entityName) |
|||
|
|||
This method is used to access the table columns for an entity of a specific module. It takes one parameter: |
|||
|
|||
* **entityName**: The name of the entity defined by the related module. |
|||
|
|||
### abp.ui.extensions.tableColumns.get(entityName).columns |
|||
|
|||
The `columns` property is used to retrieve a [doubly linked list](../Common/Utils/Linked-List.md) of previously defined columns for a table. All contributors are executed in order to prepare the final column list. This is normally called by the modules to show the columns in the table. However, you can use it if you are building your own extensible UIs. |
|||
|
|||
### abp.ui.extensions.tableColumns.get(entityName).addContributor(contributeCallback [, order]) |
|||
|
|||
The `addContributor` method covers all scenarios, e.g. you want to add your column in a different position in the list, change or remove an existing column. `addContributor` has the following parameters: |
|||
|
|||
* **contributeCallback**: A callback function that is called whenever the column list should be created. You can freely modify the column list inside this callback method. |
|||
* **order** (optional): The order of the callback in the callback list. Your callback is added to the end of the list (so, you have opportunity to modify columns added by the previous contributors). You can set it `0` to add your contributor as the first item. |
|||
|
|||
#### Example |
|||
|
|||
```js |
|||
var myColumnDefinition = { |
|||
title: 'Custom column', |
|||
data: {}, |
|||
orderable: false, |
|||
render: function(data) { |
|||
if (data.phoneNumber) { |
|||
return "call: " + data.phoneNumber; |
|||
} else { |
|||
return ''; |
|||
} |
|||
} |
|||
}; |
|||
|
|||
abp.ui.extensions.tableColumns |
|||
.get('identity.user') |
|||
.addContributor(function (columnList) { |
|||
// Remove an item from actionList |
|||
columnList.dropHead(); |
|||
|
|||
// Add a new item to the actionList |
|||
columnList.addHead(myColumnDefinition); |
|||
}); |
|||
``` |
|||
|
|||
> `columnList` is [linked list](../Common/Utils/Linked-List.md). You can use its methods to build a list of columns however you need. |
|||
@ -0,0 +1,108 @@ |
|||
# Entity Action Extensions for ASP.NET Core UI |
|||
|
|||
## Introduction |
|||
|
|||
Entity action extension system allows you to add a **new action** to the action menu for an entity. A **Click Me** action was added to the *User Management* page below: |
|||
|
|||
 |
|||
|
|||
You can take any action (open a modal, make an HTTP API call, redirect to another page... etc) by writing your custom code. You can access to the current entity in your code. |
|||
|
|||
## How to Set Up |
|||
|
|||
In this example, we will add a "Click Me!" action and execute a JavaScript code for the user management page of the [Identity Module](../../Modules/Identity.md). |
|||
|
|||
### Create a JavaScript File |
|||
|
|||
First, add a new JavaScript file to your solution. We added inside the `/Pages/Identity/Users` folder of the `.Web` project: |
|||
|
|||
 |
|||
|
|||
Here, the content of this JavaScript file: |
|||
|
|||
```js |
|||
var clickMeAction = { |
|||
text: 'Click Me!', |
|||
action: function(data) { |
|||
//TODO: Write your custom code |
|||
alert(data.record.userName); |
|||
} |
|||
}; |
|||
|
|||
abp.ui.extensions.entityActions |
|||
.get('identity.user') |
|||
.addContributor(function(actionList) { |
|||
actionList.addTail(clickMeAction); |
|||
}); |
|||
``` |
|||
|
|||
In the `action` function, you can do anything you need. See the API section for a detailed usage. |
|||
|
|||
### Add the File to the User Management Page |
|||
|
|||
Then you need to add this JavaScript file to the user management page. You can take the power of the [Bundling & Minification System](Bundling-Minification.md). |
|||
|
|||
Write the following code inside the `ConfigureServices` of your module class: |
|||
|
|||
```csharp |
|||
Configure<AbpBundlingOptions>(options => |
|||
{ |
|||
options.ScriptBundles.Configure( |
|||
typeof(Volo.Abp.Identity.Web.Pages.Identity.Users.IndexModel).FullName, |
|||
bundleConfiguration => |
|||
{ |
|||
bundleConfiguration.AddFiles( |
|||
"/Pages/Identity/Users/my-user-extensions.js" |
|||
); |
|||
}); |
|||
}); |
|||
``` |
|||
|
|||
This configuration adds `my-user-extensions.js` to the user management page of the Identity Module. `typeof(Volo.Abp.Identity.Web.Pages.Identity.Users.IndexModel).FullName` is the name of the bundle in the user management page. This is a common convention used for all the ABP Commercial modules. |
|||
|
|||
That's all. Run your application to see the result. |
|||
|
|||
## API |
|||
|
|||
This section explains details of the `abp.ui.extensions.entityActions` JavaScript API. |
|||
|
|||
### abp.ui.extensions.entityActions.get(entityName) |
|||
|
|||
This method is used to access the entity actions of a specific module. It takes one parameter: |
|||
|
|||
* **entityName**: The name of the entity defined by the related module. |
|||
|
|||
### abp.ui.extensions.entityActions.get(entityName).actions |
|||
|
|||
The `actions` property is used to retrieve a [doubly linked list](../Common/Utils/Linked-List.md) of previously defined actions for an entity. All contributors are executed in order to prepare the final actions list. This is normally called by the modules to show the actions in the grid. However, you can use it if you are building your own extensible UIs. |
|||
|
|||
### abp.ui.extensions.entityActions.get(entityName).addContributor(contributeCallback) |
|||
|
|||
The `addContributor` method covers all scenarios, e.g. you want to add your action in a different position in the list, change or remove an existing action item. `addContributor` with the following parameter: |
|||
|
|||
* **contributeCallback**: A callback function that is called whenever the action list should be created. You can freely modify the action list inside this callback method. |
|||
|
|||
#### Example |
|||
|
|||
```js |
|||
var clickMe2Action = { |
|||
text: 'Click Me 2!', |
|||
icon: 'fas fa-hand-point-right', |
|||
action: function(data) { |
|||
//TODO: Write your custom code |
|||
alert(data.record.userName); |
|||
} |
|||
}; |
|||
|
|||
abp.ui.extensions.entityActions |
|||
.get('identity.user') |
|||
.addContributor(function(actionList) { |
|||
// Remove an item from actionList |
|||
actionList.dropHead(); |
|||
|
|||
// Add the new item to the actionList |
|||
actionList.addHead(clickMe2Action); |
|||
}); |
|||
``` |
|||
|
|||
> `actionList` is [linked list](../Common/Utils/Linked-List.md). You can use its methods to build a list of columns however you need. |
|||
|
After Width: | Height: | Size: 53 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 29 KiB |
@ -1,43 +1,97 @@ |
|||
import { Import } from './import'; |
|||
import { Omissible } from './util'; |
|||
import { Options } from './util'; |
|||
|
|||
export class Model { |
|||
imports: Import[] = []; |
|||
interfaces: Interface[] = []; |
|||
namespace: string; |
|||
path: string; |
|||
readonly imports: Import[] = []; |
|||
readonly interfaces: Interface[] = []; |
|||
readonly namespace: string; |
|||
readonly path: string; |
|||
|
|||
constructor(options: ModelOptions) { |
|||
Object.assign(this, options); |
|||
} |
|||
} |
|||
|
|||
export type ModelOptions = Omissible<Model, 'imports' | 'interfaces'>; |
|||
export type ModelOptions = Options<Model, 'imports' | 'interfaces'>; |
|||
|
|||
export class Interface { |
|||
base: string | null; |
|||
identifier: string; |
|||
namespace: string; |
|||
properties: Property[] = []; |
|||
ref: string; |
|||
readonly base: string | null; |
|||
readonly identifier: string; |
|||
readonly namespace: string; |
|||
readonly generics: Generic[] = []; |
|||
readonly properties: Property[] = []; |
|||
readonly ref: string; |
|||
|
|||
constructor(options: InterfaceOptions) { |
|||
Object.assign(this, options); |
|||
} |
|||
} |
|||
|
|||
export type InterfaceOptions = Omissible<Interface, 'properties'>; |
|||
export type InterfaceOptions = Options<Interface, 'generics' | 'properties'>; |
|||
|
|||
export class Property { |
|||
name: string; |
|||
type: string; |
|||
default = ''; |
|||
optional: '' | '?' = ''; |
|||
refs: string[] = []; |
|||
abstract class TypeRef { |
|||
readonly refs: string[] = []; |
|||
|
|||
constructor(options: PropertyOptions) { |
|||
protected _type = ''; |
|||
get type() { |
|||
return this._type; |
|||
} |
|||
set type(value: string) { |
|||
if (!value) return; |
|||
this._type = value; |
|||
} |
|||
|
|||
protected _default = ''; |
|||
get default() { |
|||
return this._default; |
|||
} |
|||
set default(value: string) { |
|||
if (!value) return; |
|||
this._default = ` = ${value}`; |
|||
} |
|||
|
|||
constructor(options: TypeRefOptions) { |
|||
Object.assign(this, options); |
|||
} |
|||
|
|||
setDefault(value: string) { |
|||
this.default = value; |
|||
} |
|||
|
|||
setType(value: string) { |
|||
this.type = value; |
|||
} |
|||
} |
|||
|
|||
type TypeRefOptionalKeys = 'default' | 'refs'; |
|||
type TypeRefOptions = Options<TypeRef, TypeRefOptionalKeys>; |
|||
|
|||
export class Generic extends TypeRef { |
|||
constructor(options: GenericOptions) { |
|||
super(options); |
|||
} |
|||
} |
|||
|
|||
export type GenericOptions = Options<Generic, TypeRefOptionalKeys>; |
|||
|
|||
export class Property extends TypeRef { |
|||
readonly name: string; |
|||
private _optional: '' | '?' = ''; |
|||
get optional() { |
|||
return this.default ? '' : this._optional; |
|||
} |
|||
|
|||
set optional(value: '' | '?') { |
|||
this._optional = value; |
|||
} |
|||
|
|||
constructor(options: PropertyOptions) { |
|||
super(options); |
|||
} |
|||
|
|||
setOptional(isOptional: boolean) { |
|||
this.optional = isOptional ? '?' : ''; |
|||
} |
|||
} |
|||
|
|||
export type PropertyOptions = Omissible<Property, 'default' | 'optional' | 'refs'>; |
|||
export type PropertyOptions = Options<Property, TypeRefOptionalKeys | 'optional'>; |
|||
|
|||
@ -1,2 +1,16 @@ |
|||
// Omissible (given keys will become optional)
|
|||
export type Omissible<T, K extends keyof T> = Partial<Pick<T, K>> & Omit<T, K>; |
|||
|
|||
// ExcludeKeys (keys will be excluded based on their type)
|
|||
type ExcludeKeys<Type, Excluded> = Exclude< |
|||
{ |
|||
[Key in keyof Type]: Type[Key] extends Excluded ? never : Key; |
|||
}[keyof Type], |
|||
never |
|||
>; |
|||
|
|||
// tslint:disable-next-line: ban-types
|
|||
type ExcludeMethods<Type> = Pick<Type, ExcludeKeys<Type, Function>>; |
|||
|
|||
// Options (methods will be omitted, given keys will become optional)
|
|||
export type Options<T, K extends keyof ExcludeMethods<T>> = Omissible<ExcludeMethods<T>, K>; |
|||
|
|||
@ -0,0 +1,100 @@ |
|||
import { Generic } from '../models'; |
|||
|
|||
export class GenericsCollector { |
|||
private _generics: Generic[] = []; |
|||
get generics() { |
|||
return this._generics; |
|||
} |
|||
|
|||
apply = (value: string, index: number) => { |
|||
const generic = this.get(index); |
|||
if (generic) { |
|||
if (!generic.type) generic.setType(value); |
|||
return value + generic.default; |
|||
} |
|||
|
|||
return value; |
|||
}; |
|||
|
|||
constructor(private getTypeIdentifier = (type: string) => type) {} |
|||
|
|||
private createGeneric(type: string, ref: string, defaultValue: string) { |
|||
const _default = this.getTypeIdentifier(defaultValue); |
|||
const refs = [generateRefWithPlaceholders(ref)]; |
|||
const generic = new Generic({ type, default: _default, refs }); |
|||
return generic; |
|||
} |
|||
|
|||
private register(index: number, generic: Generic) { |
|||
const existing = this.get(index); |
|||
if (existing) { |
|||
existing.setDefault(generic.default); |
|||
existing.setType(generic.type); |
|||
} else this.set(index, generic); |
|||
} |
|||
|
|||
collect(generics: string[], genericArguments: string[]) { |
|||
generics.forEach((ref, i) => { |
|||
const generic = this.createGeneric( |
|||
genericArguments[i], |
|||
ref, |
|||
genericArguments.includes(ref) ? '' : ref, |
|||
); |
|||
this.register(i, generic); |
|||
}); |
|||
} |
|||
|
|||
get(index: number) { |
|||
return this.generics[index]; |
|||
} |
|||
|
|||
set(index: number, value: Generic) { |
|||
this.generics[index] = value; |
|||
} |
|||
|
|||
reset() { |
|||
this._generics = []; |
|||
} |
|||
} |
|||
|
|||
export function generateRefWithPlaceholders(sourceType: string) { |
|||
let { identifier, generics } = extractGenerics(sourceType); |
|||
|
|||
identifier = identifier; |
|||
generics = generics.map((_, i) => `T${i}`); |
|||
|
|||
return generics.length ? `${identifier}<${generics}>` : identifier; |
|||
} |
|||
|
|||
export function extractSimpleGenerics(sourceType: string) { |
|||
const { identifier, generics } = extractGenerics(sourceType); |
|||
|
|||
return { |
|||
identifier: getLastSegment(identifier), |
|||
generics: generics.map(getLastSegment), |
|||
}; |
|||
} |
|||
|
|||
export function extractGenerics(sourceType: string) { |
|||
const regex = /(?<identifier>[^<]+)(<(?<generics>.+)>)?/g; |
|||
const { identifier = '', generics = '' } = regex.exec(sourceType)?.groups ?? {}; |
|||
|
|||
return { |
|||
identifier, |
|||
generics: generics.split(/,\s*/).filter(Boolean), |
|||
}; |
|||
} |
|||
|
|||
function getLastSegment(str: string) { |
|||
return str.split('.').pop()!; |
|||
} |
|||
|
|||
export function replacePlaceholdersWithGenerics( |
|||
type: string, |
|||
generics: string[], |
|||
genericsCollector: GenericsCollector, |
|||
) { |
|||
return generics |
|||
.map(genericsCollector.apply) |
|||
.reduce((acc, v, i) => acc.replace(new RegExp(`([<, ])T${i}([,>])`, 'g'), `$1${v}$2`), type); |
|||
} |
|||
Loading…
Reference in new issue