Skip to content

Commit e710501

Browse files
lievenvglievenvg
authored
Merge pull request #84 from digipolisantwerp/feature/forms-docs
Feature/forms docs
2 parents ffbf7b5 + 83f8e65 commit e710501

File tree

8 files changed

+123
-47
lines changed

8 files changed

+123
-47
lines changed

‎packages/forms/README.md

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# @acpaas-ui/ngx-components/forms
2+
3+
The forms module is a collection of several forms-related modules, like an autocomplete, a datepicker, a mask, a range slider, a timepicker, etc.
4+
You can find an overview in the [Modules](#modules) section below.
5+
6+
## Documentation
7+
8+
Visit our [documentation site](https://acpaas-ui.digipolis.be/) for full how-to docs and guidelines
9+
10+
## <a name="modules"></a>Modules
11+
12+
| Name | Description | Documentation |
13+
| ----------- | ------ | -------------------------- |
14+
| `AutoCompleteModule` | This module creates an input field with autocomplete functionality. | [Documentation](./src/lib/auto-complete/README.md) |
15+
| `DatepickerModule` | This package allows the user to select a date either by input or by picking one in the calendar flyout. | [Documentation](./src/lib/datepicker/README.md) |
16+
| `MaskModule` | With this module you can make input fields that only accept a specific format. | [Documentation](./src/lib/mask/README.md) |
17+
| `RangeSliderModule` | This module provides a range slider. | [Documentation](./src/lib/range-slider/README.md) |
18+
| `TimepickerModule` | This package allows the user set the time either by choosing a slot in the dropdown or by typing in the autocomplete field. | [Documentation](./src/lib/timepicker/README.md) |
19+
| `UploadModule` | This module provides a couple of upload components and a specific `Uploader` class. | [Documentation](./src/lib/upload/README.md) |
20+
| `WysiwygModule` | This module provides a wysiwyg that can be used on a page or a form. | [Documentation](./src/lib/wysiwyg/README.md) |
21+
22+
## Contributing
23+
24+
Visit our [Contribution Guidelines](../../CONTRIBUTING.md) for more information on how to contribute.

‎packages/forms/examples/forms/pages/autocomplete/autocomplete.page.html

+9-3
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,14 @@ <h3 class="h5 u-margin-bottom">Local search</h3>
2626
clearInvalid="true"
2727
showAllByDefault="true"
2828
[data]="heroList"
29-
(select)="setSelectedHero($event)">
29+
(select)="setSelectedItem1($event)">
3030
</aui-auto-complete>
3131
</div>
3232
</div>
33+
<p class="u-margin-top"><strong>Selected hero</strong>: {{ selectedItem1 }}</p>
3334
</div>
3435

35-
<h3 class="h5 u-margin-bottom">Remote search</h3>
36+
<h3 class="h5 u-margin-bottom">Remote search with template</h3>
3637

3738
<div class="u-margin-bottom">
3839
<aui-code-snippet [codeSnippet]="autocompleteExampleJS2"></aui-code-snippet>
@@ -55,8 +56,13 @@ <h3 class="h5 u-margin-bottom">Remote search</h3>
5556
loadingText = "Loading…"
5657
noResultsText="No results found"
5758
searchIncentiveText="Type one or more keywords to start searching"
58-
(search)="searchItems($event)">
59+
(search)="searchItems($event)"
60+
(select)="setSelectedItem2($event)">
61+
<ng-template let-item>
62+
<div class="has-icon-left" [innerHTML]="formatLabel(item)"></div>
63+
</ng-template>
5964
</aui-auto-complete>
6065
</div>
6166
</div>
67+
<p class="u-margin-top"><strong>Selected hero</strong>: {{ selectedItem2 }}</p>
6268
</div>

‎packages/forms/examples/forms/pages/autocomplete/autocomplete.page.ts

+56-10
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export class AppModule {};`;
2626
];
2727
2828
public setSelectedUser(hero): void {
29-
// do something
29+
// Do something
3030
}`;
3131

3232
public autocompleteExampleHTML1 = `<aui-auto-complete
@@ -38,7 +38,7 @@ public setSelectedUser(hero): void {
3838
clearInvalid="true"
3939
showAllByDefault="true"
4040
[data]="heroList"
41-
(select)="setSelectedHero($event)">
41+
(select)="setSelectedItem($event)">
4242
</aui-auto-complete>`;
4343

4444
public autocompleteExampleJS2 = `public results = [];
@@ -49,9 +49,30 @@ public heroList = [
4949
{name: 'Iron Man'},
5050
{name: 'Deadpool'},
5151
];
52+
public searchValue = '';
53+
public selectedItem = '';
5254
5355
public searchItems(search: string): void {
54-
// do search
56+
this.searchValue = search;
57+
// Do search
58+
this.debouncer.next(search);
59+
}
60+
61+
public setSelectedItem(hero: {name}): void {
62+
this.selectedItem = hero;
63+
}
64+
65+
public formatLabel(input: any) {
66+
const inputString = input.name;
67+
68+
if (!this.searchValue) {
69+
return inputString;
70+
}
71+
72+
// Highlight searchValue in result
73+
const regEx = new RegExp(this.searchValue, 'ig');
74+
const inputStringHighlighted = (inputString.replace(regEx, '<b>' + this.searchValue + '</b>'));
75+
return \`<i class="fa fa-user u-text-light u-margin-right-xs"></i>\${inputStringHighlighted}\`;
5576
}`;
5677

5778
public autocompleteExampleHTML2 = `<aui-auto-complete
@@ -64,7 +85,11 @@ public searchItems(search: string): void {
6485
loadingText = "Loading…"
6586
noResultsText="No results found"
6687
searchIncentiveText="Type one or more keywords to start searching"
67-
(search)="searchItems($event)">
88+
(search)="searchItems($event)"
89+
(select)="setSelectedItem($event)">
90+
<ng-template let-item >
91+
<div class="has-icon-left" [innerHTML]="formatLabel(item)"></div>
92+
</ng-template>
6893
</aui-auto-complete>`;
6994

7095
public results = [];
@@ -75,6 +100,9 @@ public searchItems(search: string): void {
75100
{name: 'Iron Man'},
76101
{name: 'Deadpool'},
77102
];
103+
public searchValue = '';
104+
public selectedItem1 = '';
105+
public selectedItem2 = '';
78106
private debouncer: Subject<string> = new Subject();
79107
private componentDestroyed$: Subject<boolean> = new Subject<boolean>();
80108

@@ -87,7 +115,7 @@ public searchItems(search: string): void {
87115
this.results = [];
88116
} else {
89117
this.results = this.heroList.filter((hero) => {
90-
return hero.name.indexOf(value) !== -1;
118+
return hero.name.localeCompare(value, 'en', {sensitivity: 'base'});
91119
});
92120
}
93121
});
@@ -98,12 +126,30 @@ public searchItems(search: string): void {
98126
this.componentDestroyed$.complete();
99127
}
100128

101-
public setSelectedHero(hero: string): void {
102-
// do something
103-
}
104-
105129
public searchItems(search: string): void {
106-
// do search
130+
this.searchValue = search;
131+
// Do search
107132
this.debouncer.next(search);
108133
}
134+
135+
public setSelectedItem1(hero: {name}): void {
136+
this.selectedItem1 = hero.name;
137+
}
138+
139+
public setSelectedItem2(hero: {name}): void {
140+
this.selectedItem2 = hero.name;
141+
}
142+
143+
public formatLabel(input: any) {
144+
const inputString = input.name;
145+
146+
if (!this.searchValue) {
147+
return inputString;
148+
}
149+
150+
// Highlight searchValue in result
151+
const regEx = new RegExp(this.searchValue, 'ig');
152+
const inputStringHighlighted = (inputString.replace(regEx, '<b>' + this.searchValue + '</b>'));
153+
return `<i class="fa fa-user u-text-light u-margin-right-xs"></i>${inputStringHighlighted}`;
154+
}
109155
}

‎packages/forms/src/lib/auto-complete/README.md

+32-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# @acpaas-ui/ngx-components/forms
22

3-
This module creates an input field with auto complete functionality.
3+
This module creates an input field with autocomplete functionality.
44

55
## Usage
66

@@ -62,8 +62,8 @@ public heroList = [
6262
{name: 'Iron Man'},
6363
{name: 'Deadpool'},
6464
];
65-
public setSelectedHero(hero: string): void {
66-
// do something
65+
public setSelectedItem(hero: string): void {
66+
// Do something
6767
}
6868
```
6969

@@ -77,11 +77,11 @@ public setSelectedHero(hero: string): void {
7777
clearInvalid="true"
7878
showAllByDefault="true"
7979
[data]="heroList"
80-
(select)="setSelectedHero($event)">
80+
(select)="setSelectedItem($event)">
8181
</aui-auto-complete>
8282
```
8383

84-
#### Remote search
84+
#### Remote search with template
8585

8686
```typescript
8787
public results = [];
@@ -92,9 +92,30 @@ public heroList = [
9292
{name: 'Iron Man'},
9393
{name: 'Deadpool'},
9494
];
95+
public searchValue = '';
96+
public selectedItem = '';
9597
9698
public searchItems(search: string): void {
97-
// do search
99+
this.searchValue = search;
100+
// Do search
101+
this.debouncer.next(search);
102+
}
103+
104+
public setSelectedItem(hero: {name}): void {
105+
this.selectedItem = hero;
106+
}
107+
108+
public formatLabel(input: any) {
109+
const inputString = input.name;
110+
111+
if (!this.searchValue) {
112+
return inputString;
113+
}
114+
115+
// Highlight searchValue in result
116+
const regEx = new RegExp(this.searchValue, 'ig');
117+
const inputStringHighlighted = (inputString.replace(regEx, '<b>' + this.searchValue + '</b>'));
118+
return \`<i class="fa fa-user u-text-light u-margin-right-xs"></i>\${inputStringHighlighted}\`;
98119
}
99120
```
100121

@@ -109,7 +130,11 @@ public searchItems(search: string): void {
109130
loadingText = "Loading…"
110131
noResultsText="No results found"
111132
searchIncentiveText="Type one or more keywords to start searching"
112-
(search)="searchItems($event)">
133+
(search)="searchItems($event)"
134+
(select)="setSelectedItem($event)">
135+
<ng-template let-item >
136+
<div class="has-icon-left" [innerHTML]="formatLabel(item)"></div>
137+
</ng-template>
113138
</aui-auto-complete>
114139
```
115140

‎packages/layout/README.md

+2-15
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,13 @@
11
# @acpaas-ui/ngx-components/layout
22

33
The layout module is a collection of several layout-related modules, like a header, a footer, a modal, a pane, etc.
4-
5-
## Usage
6-
7-
```typescript
8-
import {
9-
CookieconsentModule,
10-
FooterModule,
11-
HeaderModule,
12-
HeroModule,
13-
ModalModule,
14-
PaneModule,
15-
SidebarModule
16-
} from '@acpaas-ui/ngx-components/layout'`;
17-
```
4+
You can find an overview in the [Modules](#modules) section below.
185

196
## Documentation
207

218
Visit our [documentation site](https://acpaas-ui.digipolis.be/) for full how-to docs and guidelines
229

23-
## Modules
10+
## <a name="modules"></a>Modules
2411

2512
| Name | Description | Documentation |
2613
| ----------- | ------ | -------------------------- |

‎packages/map/README.md

-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import { LeafletMap } from '@acpaas-ui/ngx-components/map'`;
1616
Add the leaflet CSS styles to the `src/angular.json` file.
1717
```typescript
1818
"styles": [
19-
"styleguide/styles.scss",
2019
"node_modules/leaflet/dist/leaflet.css",
2120
"node_modules/leaflet-draw/dist/leaflet.draw.css"
2221
]

‎packages/map/examples/map/pages/demo/demo.page.ts

-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ export class AppModule {};`;
1717

1818
public codeExampleJS1 =
1919
`"styles": [
20-
"styleguide/styles.scss",
2120
"node_modules/leaflet/dist/leaflet.css",
2221
"node_modules/leaflet-draw/dist/leaflet.draw.css"
2322
]`;

‎packages/utils/README.md

-10
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,6 @@
33
The utils module is a collection of some frequently used utility modules like a filter, labels or window module. So you don't need to reinvent the wheel every time.
44
You can find an overview in the [Modules](#modules) section below.
55

6-
## Usage
7-
8-
```typescript
9-
import {
10-
FilterModule,
11-
LabelsModule,
12-
WindowModule
13-
} from '@acpaas-ui/ngx-components/utils'`;
14-
```
15-
166
## Documentation
177

188
Visit our [documentation site](https://acpaas-ui.digipolis.be/) for full how-to docs and guidelines

0 commit comments

Comments
 (0)