diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index 4548a5ddf1..112114bb91 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -1230,6 +1230,10 @@ { "text": "Angular", "items": [ + { + "text": "Overview", + "path": "framework/ui/angular/overview.md" + }, { "text": "Quick Start", "path": "framework/ui/angular/quick-start.md" @@ -1442,6 +1446,10 @@ "text": "Modifying the Menu", "path": "framework/ui/angular/modifying-the-menu.md" }, + { + "text": "Manage Profile Page Tabs", + "path": "framework/ui/angular/manage-profile-page-tabs.md" + }, { "text": "Sorting Navigation Elements", "path": "framework/ui/angular/sorting-navigation-elements.md" @@ -1495,6 +1503,18 @@ { "text": "Card", "path": "framework/ui/angular/card-component.md" + }, + { + "text": "Password Complexity Indicator", + "path": "framework/ui/angular/password-complexity-indicator-component.md" + }, + { + "text": "Lookup Components(Pro)", + "path": "framework/ui/angular/lookup-components.md" + }, + { + "text": "Entity Filters(Pro)", + "path": "framework/ui/angular/entity-filters.md" } ] } diff --git a/docs/en/framework/ui/angular/entity-filters.md b/docs/en/framework/ui/angular/entity-filters.md new file mode 100644 index 0000000000..75a197b81b --- /dev/null +++ b/docs/en/framework/ui/angular/entity-filters.md @@ -0,0 +1,143 @@ +# Entity Filters + +Every CRUD page includes some sort of inputs to filter the listed data. Some of the inputs are common among all of the entities like the `Search` box. In addition, every entity has its own advanced filters depending on its fields. To reduce the amount of code written on every CRUD page, the Angular UI of ABP Commercial introduces a new type of component called `abp-advanced-entity-filters` + +## Setup + +The components are in the _@volo/abp.commercial.ng.ui_ package, which is included in the ABP templates. So, as long as your project is a product of these templates and unless you delete the package, you have access to the entity filter components. +You can either import the `CommercialUiModule` which contains other components as well as `AdvancedEntityFilters` or you can directly import the `AdvancedEntityFiltersModule` if you do not need other components. Here is how you import them in your Angular module: + +```javascript +import { + CommercialUiModule, + AdvancedEntityFiltersModule, +} from "@volo/abp.commercial.ng.ui"; + +@NgModule({ + imports: [ + // other imports + CommercialUiModule, + + // OR + + AdvancedEntityFiltersModule, + ], + // rest of the module metadata +}) +export class YourModule {} +``` + +## Usage + +Let's take a look at the `Users` page from the `Identity` module. + +![ABP Angular UI Users Page with Advanced Entity Filters](./images/angular-advanced-entity-filters.png) + +As shown in the screenshot, `abp-advanced-entity-filters` usually contain two parts, an entity filter (common among entities), i.e. `abp-entity-filter`, and entity-specific filters which are encapsulated within the `abp-advanced-entity-filters-form` component. + +`users.component.html` + +```html + + +
+
+ + +
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +The `abp-advanced-entity-filters` already contains the `abp-entity-filter` component so you do not need to pass it. However, the `abp-entity-filter` component needs an instance of `ListService` which is usually stored in the `list` field of the page. You can also change the placeholder of the component via `entityFilterPlaceholder` input which is passed into the `abpLocalization` pipe so that it uses the translated text. Default is `'AbpUi::PagerSearch'` + +E.g + +```html + + + +``` + +### Inputs + +- `list`: an instance of `ListService` +- `entityFilterPlaceholder`: the placeholder of `abp-entity-filter` component. Default: `'AbpUi::PagerSearch'` +- `localizationSourceName`: the localization source of the current page. E.g: `AbpIdentity` + +### Inner components + +Some entities are simple and do not require any filter other than the `abp-entity-filter`. In this case, you can simply use the `abp-advanced-entity-filters` without anything in between. + +E.g. + +Let's remove `form` from the `Users` page + +```html + + +``` + +![ABP Angular UI Users Page with Advanced Entity Filters without form](./images/angular-advanced-entity-filters-without-form.png) + +If your component needs other filters, you can pass your own `form` within the `abp-advanced-entity-filters-form` component. This will render your form as well as a toggle (`abp-advanced-entity-filters-toggle`) to show and hide the form + +E.g. + +```html + + +
+ +
+ + +``` + +![ABP Angular UI Users Page with Advanced Entity Filters with form](./images/angular-advanced-entity-filters-with-form.png) + +Last but not least, if you need to render some content above the `abp-entity-filter` component, you can use the `abp-advanced-entity-filters-above-search`. + +E.g. + +```html + + +

Custom Content above entity-filter

+ + + +
+ +
+ + +``` + +![ABP Angular UI Users Page with Advanced Entity Filters with custom content above filter](./images/angular-advanced-entity-filters-with-custom-content-above-filter.png) diff --git a/docs/en/framework/ui/angular/environment.md b/docs/en/framework/ui/angular/environment.md index 33f53b7836..7fd1b1273a 100644 --- a/docs/en/framework/ui/angular/environment.md +++ b/docs/en/framework/ui/angular/environment.md @@ -101,6 +101,22 @@ export interface RemoteEnv { - `method`: HTTP method to be used when retrieving environment config. Default: `GET` - `headers`: If extra headers are needed for the request, it can be set through this field. +## Provide Environment Variable to Core Module + +`environment` variable comes from angular host application. + +```js +import { environment } from '../environments/environment'; + +@NgModule({ + imports: [ + //...other imports + CoreModule.forRoot({ + environment + }), + ] +}) +``` ## EnvironmentService ` EnvironmentService` is a singleton service, i.e. provided in root level of your application, and keeps the environment in the internal store. diff --git a/docs/en/framework/ui/angular/images/angular-advanced-entity-filters-with-custom-content-above-filter.png b/docs/en/framework/ui/angular/images/angular-advanced-entity-filters-with-custom-content-above-filter.png new file mode 100644 index 0000000000..0feab57342 Binary files /dev/null and b/docs/en/framework/ui/angular/images/angular-advanced-entity-filters-with-custom-content-above-filter.png differ diff --git a/docs/en/framework/ui/angular/images/angular-advanced-entity-filters-with-form.png b/docs/en/framework/ui/angular/images/angular-advanced-entity-filters-with-form.png new file mode 100644 index 0000000000..ef469a3d9d Binary files /dev/null and b/docs/en/framework/ui/angular/images/angular-advanced-entity-filters-with-form.png differ diff --git a/docs/en/framework/ui/angular/images/angular-advanced-entity-filters-without-form.png b/docs/en/framework/ui/angular/images/angular-advanced-entity-filters-without-form.png new file mode 100644 index 0000000000..18b7780008 Binary files /dev/null and b/docs/en/framework/ui/angular/images/angular-advanced-entity-filters-without-form.png differ diff --git a/docs/en/framework/ui/angular/images/angular-advanced-entity-filters.png b/docs/en/framework/ui/angular/images/angular-advanced-entity-filters.png new file mode 100644 index 0000000000..3f381a1cc6 Binary files /dev/null and b/docs/en/framework/ui/angular/images/angular-advanced-entity-filters.png differ diff --git a/docs/en/framework/ui/angular/images/angular-lookup-select.gif b/docs/en/framework/ui/angular/images/angular-lookup-select.gif new file mode 100644 index 0000000000..4194d362f5 Binary files /dev/null and b/docs/en/framework/ui/angular/images/angular-lookup-select.gif differ diff --git a/docs/en/framework/ui/angular/images/angular-lookup-typeahead.gif b/docs/en/framework/ui/angular/images/angular-lookup-typeahead.gif new file mode 100644 index 0000000000..6f75cc536d Binary files /dev/null and b/docs/en/framework/ui/angular/images/angular-lookup-typeahead.gif differ diff --git a/docs/en/framework/ui/angular/images/grouped-menu-mobile.png b/docs/en/framework/ui/angular/images/grouped-menu-mobile.png new file mode 100644 index 0000000000..9c2e176437 Binary files /dev/null and b/docs/en/framework/ui/angular/images/grouped-menu-mobile.png differ diff --git a/docs/en/framework/ui/angular/images/grouped-menu.png b/docs/en/framework/ui/angular/images/grouped-menu.png new file mode 100644 index 0000000000..f5b079796a Binary files /dev/null and b/docs/en/framework/ui/angular/images/grouped-menu.png differ diff --git a/docs/en/framework/ui/angular/images/manage-profile-page-new-tab.png b/docs/en/framework/ui/angular/images/manage-profile-page-new-tab.png new file mode 100644 index 0000000000..2700ccbe90 Binary files /dev/null and b/docs/en/framework/ui/angular/images/manage-profile-page-new-tab.png differ diff --git a/docs/en/framework/ui/angular/images/manage-profile-page.png b/docs/en/framework/ui/angular/images/manage-profile-page.png new file mode 100644 index 0000000000..3df5c0f395 Binary files /dev/null and b/docs/en/framework/ui/angular/images/manage-profile-page.png differ diff --git a/docs/en/framework/ui/angular/lookup-components.md b/docs/en/framework/ui/angular/lookup-components.md new file mode 100644 index 0000000000..ce1e32eefd --- /dev/null +++ b/docs/en/framework/ui/angular/lookup-components.md @@ -0,0 +1,98 @@ +# Lookup Components + +The Angular UI of ABP Commercial introduces some components with `abp-lookup-...` selector prefix. These components are used for retrieving relational entity data. + +## Setup + +The components are in the _@volo/abp.commercial.ng.ui_ package, which is included in the ABP templates. So, as long as your project is a product of these templates and unless you delete the package, you have access to the lookup components. Here is how you import them in your Angular module: + +```javascript +import { CommercialUiModule } from '@volo/abp.commercial.ng.ui'; + +@NgModule({ + imports: [ + // other imports + CommercialUiModule, + ], + // rest of the module metadata +}) +export class YourModule {} +``` + +Now you can use the lookup components in your components declared by this module. + +## Lookup HTTP Requests + +The lookup requests are used by all lookup components to get the related entity records. Because of lexical this, _they must be arrow functions_. + +```javascript +@Injectable({ + providedIn: 'root' +}) +export class AuthorService { + getCountryLookup = (input: LookupRequestDto) => + this.restService.request>>({ + method: 'GET', + url: '/api/app/authors/country-lookup', + params: { filter: input.filter, skipCount: input.skipCount, maxResultCount: input.maxResultCount }, + }, + { apiName: this.apiName }); + + // rest of the service is removed for brevity +} +``` + +## Lookup Typeahead Component + +Typeahead is a good choice when you have an unknown number of records for the related entity or you want to improve the UX with a search ability. Although not the best scenario, the country picker below shows how the lookup typeahead works: + +![ABP Angular UI Typeahead Lookup](./images/angular-lookup-typeahead.gif) + +Here is how it is used in the template. + +```html + +``` + +The available properties are as follows: + +- **cid:** The id of the form control (e.g. an input or a select element) inside the lookup component. Lets form controls respond to `