-
Notifications
You must be signed in to change notification settings - Fork 130
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
131 changed files
with
6,137 additions
and
237 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
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
89 changes: 89 additions & 0 deletions
89
...rm/component-docs/platform-smart-filter-bar/platform-smart-filter-bar-docs.component.html
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,89 @@ | ||
| <fd-docs-section-title id="basic" componentName="smart-filter-bar">Simple example</fd-docs-section-title> | ||
| <description> | ||
| <p>The <b>Smart Filter Bar</b> component analyzes provided data source with the help of two directives:</p> | ||
| <ul> | ||
| <li> | ||
| <code>fdp-smart-filter-bar-subject</code> is used to define subject component which provides the data | ||
| source; | ||
| </li> | ||
| <li> | ||
| <code>fdp-smart-filter-bar-field-definition</code> is used to provide configuration metadata for the data | ||
| source fields. | ||
| </li> | ||
| </ul> | ||
| <p> | ||
| Default set of selected filters can be defined by using <code>[defaultSelected]="true"</code> input properties | ||
| for each <code>fdp-smart-filter-bar-field-definition</code> directive. | ||
| </p> | ||
| </description> | ||
| <component-example> | ||
| <fdp-platform-smart-filter-bar-basic-example></fdp-platform-smart-filter-bar-basic-example> | ||
| </component-example> | ||
| <code-example [exampleFiles]="sfbBasic"></code-example> | ||
|
|
||
| <separator></separator> | ||
|
|
||
| <fd-docs-section-title id="custom-datasource" componentName="smart-filter-bar" | ||
| >Custom data provider example</fd-docs-section-title | ||
| > | ||
| <description> | ||
| <p> | ||
| Smart Filter Bar supports custom data providers that are based on <code>TableDataProvider</code> or | ||
| <code>ObservableTableDataProvider</code>. | ||
| </p> | ||
| <p> | ||
| These base classes already implement filtering and searching, yet, developers can override those methods to | ||
| achieve desired behaviour. | ||
| </p> | ||
| </description> | ||
| <component-example> | ||
| <fdp-smart-filter-bar-observable-example></fdp-smart-filter-bar-observable-example> | ||
| </component-example> | ||
| <code-example [exampleFiles]="sfbCustomDataSource"></code-example> | ||
|
|
||
| <separator></separator> | ||
|
|
||
| <fd-docs-section-title id="custom-filter" componentName="smart-filter-bar"> | ||
| Custom filters example | ||
| </fd-docs-section-title> | ||
| <description> | ||
| <p>Developers can extend Smart Filter Bar's set of filters by providing their custom components.</p> | ||
| <p> | ||
| Smart filter bar uses Form Generator component for rendering the forms, so the process of creating custom | ||
| filters will be similar to the creation of the custom controls for Form Generator. | ||
| </p> | ||
| <p>Developers can define following custom properties of the filter:</p> | ||
| <ul> | ||
| <li><code>conditionComponent</code>: Used in <code>Define Conditions</code> dialog.</li> | ||
| <li><code>conditionRenderer</code>: Used in <code>Smart filter bar</code> form.</li> | ||
| <li><code>filterStrategies</code>: Used in <code>Define Conditions</code> dialog.</li> | ||
| <li> | ||
| <code>valueTransformer</code>: Used for transforming raw control value into | ||
| <code>SmartFilterBarCondition</code> interface. | ||
| </li> | ||
| <li> | ||
| <code>valueRenderer</code>: Used for transforming raw control value into human-readable string which is | ||
| displayed in Smart Filter Bar. | ||
| </li> | ||
| </ul> | ||
| </description> | ||
| <component-example> | ||
| <fdp-platform-smart-filter-bar-custom-filter-example></fdp-platform-smart-filter-bar-custom-filter-example> | ||
| </component-example> | ||
| <code-example [exampleFiles]="sfbCustomFilters"></code-example> | ||
|
|
||
| <separator></separator> | ||
|
|
||
| <fd-docs-section-title id="custom-labels" componentName="smart-filter-bar"> | ||
| Smart filter bar with custom labels | ||
| </fd-docs-section-title> | ||
| <description> | ||
| <p> | ||
| Developers can easily change Condition operator and Filter Visibility category labels by providing appropriate | ||
| input properties. | ||
| </p> | ||
| </description> | ||
| <component-example> | ||
| <fdp-platform-smart-filter-bar-custom-labels-example></fdp-platform-smart-filter-bar-custom-labels-example> | ||
| </component-example> | ||
| <code-example [exampleFiles]="sfbCustomLabels"></code-example> |
76 changes: 76 additions & 0 deletions
76
...form/component-docs/platform-smart-filter-bar/platform-smart-filter-bar-docs.component.ts
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,76 @@ | ||
| import { Component } from '@angular/core'; | ||
| import { ExampleFile } from '../../../documentation/core-helpers/code-example/example-file'; | ||
|
|
||
| import * as platformBasicSfbSrc from '!raw-loader!./platform-smart-filter-bar-examples/platform-smart-filter-bar-basic-example.component.html'; | ||
| import * as platformBasicSfbTsCode from '!raw-loader!./platform-smart-filter-bar-examples/platform-smart-filter-bar-basic-example.component.ts'; | ||
|
|
||
| import * as platformSfbCustomDataSourceSrc from '!raw-loader!./platform-smart-filter-bar-examples/platform-smart-filter-bar-observable-example.component.html'; | ||
| import * as platformSfbCustomDataSourceTsCode from '!raw-loader!./platform-smart-filter-bar-examples/platform-smart-filter-bar-observable-example.component.ts'; | ||
|
|
||
| import * as platformSfbCustomFiltersSrc from '!raw-loader!./platform-smart-filter-bar-examples/platform-smart-filter-bar-custom-filter-example.component.html'; | ||
| import * as platformSfbCustomFiltersTsCode from '!raw-loader!./platform-smart-filter-bar-examples/platform-smart-filter-bar-custom-filter-example.component.ts'; | ||
|
|
||
| import * as platformSfbCustomLabelsSrc from '!raw-loader!./platform-smart-filter-bar-examples/platform-smart-filter-bar-custom-labels-example.component.html'; | ||
| import * as platformSfbCustomLabelsTsCode from '!raw-loader!./platform-smart-filter-bar-examples/platform-smart-filter-bar-custom-labels-example.component.ts'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-smart-filter-bar', | ||
| templateUrl: './platform-smart-filter-bar-docs.component.html' | ||
| }) | ||
| export class PlatformSmartFilterBarDocsComponent { | ||
| sfbBasic: ExampleFile[] = [ | ||
| { | ||
| language: 'html', | ||
| code: platformBasicSfbSrc, | ||
| fileName: 'platform-smart-filter-bar-basic-example' | ||
| }, | ||
| { | ||
| language: 'typescript', | ||
| code: platformBasicSfbTsCode, | ||
| fileName: 'platform-smart-filter-bar-basic-example', | ||
| component: 'PlatformSmartFilterBarBasicExampleComponent' | ||
| } | ||
| ]; | ||
|
|
||
| sfbCustomDataSource: ExampleFile[] = [ | ||
| { | ||
| language: 'html', | ||
| code: platformSfbCustomDataSourceSrc, | ||
| fileName: 'platform-smart-filter-bar-observable-example' | ||
| }, | ||
| { | ||
| language: 'typescript', | ||
| code: platformSfbCustomDataSourceTsCode, | ||
| fileName: 'platform-smart-filter-bar-observable-example', | ||
| component: 'PlatformSmartFilterBarObservableExampleComponent' | ||
| } | ||
| ]; | ||
|
|
||
| sfbCustomFilters: ExampleFile[] = [ | ||
| { | ||
| language: 'html', | ||
| code: platformSfbCustomFiltersSrc, | ||
| fileName: 'platform-smart-filter-bar-custom-filter-example' | ||
| }, | ||
| { | ||
| language: 'typescript', | ||
| code: platformSfbCustomFiltersTsCode, | ||
| fileName: 'platform-smart-filter-bar-custom-filter-example', | ||
| component: 'PlatformSmartFilterBarCustomFilterExampleComponent' | ||
| } | ||
| ]; | ||
|
|
||
| sfbCustomLabels: ExampleFile[] = [ | ||
| { | ||
| language: 'html', | ||
| code: platformSfbCustomLabelsSrc, | ||
| fileName: 'platform-smart-filter-bar-custom-labels-example' | ||
| }, | ||
| { | ||
| language: 'typescript', | ||
| code: platformSfbCustomLabelsTsCode, | ||
| fileName: 'platform-smart-filter-bar-custom-labels-example', | ||
| component: 'PlatformSmartFilterBarCustomLabelsExampleComponent' | ||
| } | ||
| ]; | ||
| } |
83 changes: 83 additions & 0 deletions
83
...platform-smart-filter-bar-examples/platform-smart-filter-bar-basic-example.component.html
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,83 @@ | ||
| <fdp-smart-filter-bar [subject]="subject"></fdp-smart-filter-bar> | ||
|
|
||
| <fdp-table | ||
| fdp-smart-filter-bar-subject | ||
| #subject="fdp-smart-filter-bar-subject" | ||
| [dataSource]="source" | ||
| [trackBy]="trackBy" | ||
| emptyTableMessage="No data found" | ||
| > | ||
| <fdp-column | ||
| fdp-smart-filter-bar-field-definition | ||
| filterable="true" | ||
| name="name" | ||
| key="name" | ||
| label="Name" | ||
| required="true" | ||
| align="start" | ||
| > | ||
| </fdp-column> | ||
|
|
||
| <fdp-column | ||
| fdp-smart-filter-bar-field-definition | ||
| filterable="true" | ||
| name="description" | ||
| key="description" | ||
| required="true" | ||
| label="Description" | ||
| > | ||
| </fdp-column> | ||
|
|
||
| <fdp-column | ||
| fdp-smart-filter-bar-field-definition | ||
| filterable="true" | ||
| dataType="number" | ||
| name="price" | ||
| key="price.value" | ||
| label="Price" | ||
| align="end" | ||
| > | ||
| </fdp-column> | ||
|
|
||
| <fdp-column | ||
| fdp-smart-filter-bar-field-definition | ||
| filterType="multi-select" | ||
| filterable="true" | ||
| name="status" | ||
| key="status" | ||
| label="Status" | ||
| required="true" | ||
| align="center" | ||
| > | ||
| </fdp-column> | ||
|
|
||
| <fdp-column | ||
| fdp-smart-filter-bar-field-definition | ||
| filterType="single-select" | ||
| filterable="true" | ||
| name="statusColor" | ||
| key="statusColor" | ||
| label="Status color" | ||
| align="center" | ||
| > | ||
| </fdp-column> | ||
|
|
||
| <fdp-column | ||
| fdp-smart-filter-bar-field-definition | ||
| filterable="true" | ||
| dataType="date" | ||
| name="date" | ||
| key="date" | ||
| label="Date" | ||
| ></fdp-column> | ||
|
|
||
| <fdp-column | ||
| fdp-smart-filter-bar-field-definition | ||
| filterable="true" | ||
| filterType="single-select" | ||
| dataType="boolean" | ||
| name="verified" | ||
| key="verified" | ||
| label="Verified" | ||
| ></fdp-column> | ||
| </fdp-table> |
Oops, something went wrong.