-
Notifications
You must be signed in to change notification settings - Fork 97
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2282 from spryker/feature/cc-31652-fe-new-service…
…s-documentation CC-31652 Introduced `datasource.dependable` and `datasource.trigger` services.
- Loading branch information
Showing
19 changed files
with
988 additions
and
109 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
114 changes: 114 additions & 0 deletions
114
...202307.0/marketplace/ui-components-library/datasources/datasource-dependable.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| --- | ||
| title: Datasource Dependable | ||
| description: Details about the Datasource Dependable service in the components library. | ||
| template: concept-topic-template | ||
| related: | ||
| - title: Datasource Trigger | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.html | ||
| - title: Datasource Http | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html | ||
| - title: Datasource Inline Table | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline-table.html | ||
| - title: Datasource Inline | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline.html | ||
| --- | ||
|
|
||
|
|
||
| Datasource Dependable is an Angular service in the components library that resolves datasources for a component based on the value of a specific element. | ||
|
|
||
| ## Usage | ||
|
|
||
| Service configuration: | ||
|
|
||
| | ATTRIBUTE | DESCRIPTION | | ||
| | - | - | | ||
| | type | A datasource type. | | ||
| | id | An ID of the dependent element. | | ||
| | datasource | The next datasource that runs based on the depended element value, like [http](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-http.html). | | ||
|
|
||
| Usage example: | ||
|
|
||
| ```html | ||
| <spy-datasource-dependable id="dependable-select"> | ||
| <spy-select | ||
| [options]="{ ... }" | ||
| > | ||
| </spy-select> | ||
| </spy-datasource-dependable> | ||
|
|
||
| <spy-select | ||
| [datasource]="{ | ||
| type: 'dependable-element', | ||
| id: 'dependable-select', | ||
| datasource: { | ||
| type: 'http', | ||
| url: '/request-url', | ||
| }, | ||
| }" | ||
| > | ||
| </spy-select> | ||
| ``` | ||
|
|
||
| The dependent element, being `SelectComponent` in the example, must implement a `DatasourceDependableElement` abstract class (token) and return a component value using the `getValueChanges()` abstract method: | ||
|
|
||
| ```ts | ||
| @Component({ | ||
| ..., | ||
| providers: [ | ||
| { | ||
| provide: DatasourceDependableElement, | ||
| useExisting: SelectComponent, | ||
| }, | ||
| ], | ||
| }) | ||
| export class SelectComponent implements DatasourceDependableElement { | ||
| ... | ||
| getValueChanges(): Observable<SelectValueSelected> { | ||
| // This method must return an Observable of the component value. | ||
| } | ||
| ... | ||
| } | ||
| ``` | ||
|
|
||
| ## Service registration | ||
|
|
||
| Register the service: | ||
|
|
||
| ```ts | ||
| declare module '@spryker/datasource' { | ||
| interface DatasourceRegistry { | ||
| 'dependable-element': DatasourceDependableService; | ||
| } | ||
| } | ||
|
|
||
| @NgModule({ | ||
| imports: [ | ||
| DatasourceModule.withDatasources({ | ||
| 'dependable-element': DatasourceDependableService, | ||
| }), | ||
| ], | ||
| }) | ||
| export class RootModule {} | ||
| ``` | ||
|
|
||
| ## Datasource Dependable interfaces | ||
|
|
||
| Datasource Dependable interfaces: | ||
|
|
||
| ```ts | ||
| import { DatasourceConfig } from '@spryker/datasource'; | ||
| import { Observable } from 'rxjs'; | ||
|
|
||
| export interface DatasourceDependableConfig extends DatasourceConfig { | ||
| id: string; | ||
| datasource: DatasourceConfig; | ||
| } | ||
|
|
||
| export interface DatasourceDependableElementsConfig { | ||
| [id: string]: DatasourceDependableElement; | ||
| } | ||
|
|
||
| export abstract class DatasourceDependableElement { | ||
| abstract getValueChanges(): Observable<unknown>; | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
86 changes: 86 additions & 0 deletions
86
...-components-library/datasources/datasource-trigger/datasource-trigger-change.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| --- | ||
| title: Datasource Trigger Change | ||
| description: This document provides details about the Datasource Trigger Change service in the Components Library. | ||
| template: concept-topic-template | ||
| related: | ||
| - title: Datasource Dependable | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-dependable.html | ||
| - title: Datasource Http | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html | ||
| - title: Datasource Inline Table | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline-table.html | ||
| - title: Datasource Inline | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline.html | ||
| --- | ||
|
|
||
| Datasource Trigger Change is an Angular service in the components library that extracts the value from an event trigger element and checks if it meets a certain criteria. If the value is valid, it emits an object containing the value. | ||
|
|
||
| ## Usage | ||
|
|
||
| Service configuration: | ||
|
|
||
| | ATTRIBUTE | DESCRIPTION | | ||
| | - | - | | ||
| |type | A datasource type. | | ||
| |event | An event type triggered by element. | | ||
| |debounce | Delays the emission of values of the next datasource; by default, delays by `300ms`. | | ||
| |minCharacters | Emits the trigger element value if the length is greater than or equal to the `minCharacters` property. The default value is `2`. | | ||
| |datasource | the next datasource that runs based on the dependent element value, like [http](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-http.html). | | ||
|
|
||
|
|
||
| Usage example: | ||
|
|
||
|
|
||
| ```html | ||
| <spy-select | ||
| [datasource]="{ | ||
| type: 'trigger', | ||
| event: 'change', | ||
| debounce: 400, | ||
| minCharacters: 3, | ||
| datasource: { | ||
| type: 'http', | ||
| url: '/request-url', | ||
| }, | ||
| }" | ||
| > | ||
| </spy-select> | ||
| ``` | ||
|
|
||
| ## Service registration | ||
|
|
||
| Register the service | ||
|
|
||
| ```ts | ||
| declare module '@spryker/datasource' { | ||
| interface DatasourceRegistry { | ||
| trigger: DatasourceTriggerService; | ||
| } | ||
| } | ||
|
|
||
| @NgModule({ | ||
| imports: [ | ||
| DatasourceModule.withDatasources({ | ||
| trigger: DatasourceTriggerService, | ||
| }), | ||
| DatasourceTriggerModule.withEvents({ | ||
| change: ChangeDatasourceTriggerService, | ||
| }), | ||
| ], | ||
| }) | ||
| export class RootModule {} | ||
| ``` | ||
|
|
||
| ## Interfaces | ||
|
|
||
| Datasource Trigger Change interfaces: | ||
|
|
||
| ```ts | ||
| import { DatasourceTriggerConfig } from '@spryker/datasource.trigger'; | ||
|
|
||
| export interface ChangeDatasourceTriggerConfig extends DatasourceTriggerConfig { | ||
| minCharacters?: number; | ||
| } | ||
|
|
||
| export type ChangeDatasourceTriggerHTMLElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement; | ||
| ``` |
Oops, something went wrong.