Skip to content

Commit cbf1e2c

Browse files
N1XUSN1XUS
authored
fix(platform): update items on new event (#8650)
* fix(platform): update items on new event * fix(platform): pr comments
1 parent d8c77fe commit cbf1e2c

File tree

10 files changed

+66
-42
lines changed

10 files changed

+66
-42
lines changed

‎apps/docs/src/app/platform/component-docs/platform-display-list-item/platform-display-list-item-examples/platform-display-list-item-example.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<fdp-list [navigated]="true">
2-
<fdp-list-group-header grpheaderTitle="Vegetables Group"></fdp-list-group-header>
2+
<fdp-list-group-header groupHeaderTitle="Vegetables Group"></fdp-list-group-header>
33
<fdp-display-list-item title="Green Vegetables"> </fdp-display-list-item>
44
<fdp-display-list-item title="Dry Vegetables"> </fdp-display-list-item>
55
<fdp-list-footer>List footer</fdp-list-footer>

‎apps/docs/src/app/platform/component-docs/platform-list/platform-list-examples/platform-list-example.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<fdp-list [navigated]="true">
2-
<fdp-list-group-header grpheaderTitle="Group header 1"></fdp-list-group-header>
2+
<fdp-list-group-header groupHeaderTitle="Group header 1"></fdp-list-group-header>
33
<fdp-standard-list-item title="List item 1"> </fdp-standard-list-item>
44
<fdp-standard-list-item title="List item 2"> </fdp-standard-list-item>
55
<fdp-list-footer>List footer</fdp-list-footer>

‎apps/docs/src/app/platform/component-docs/platform-list/platform-list-examples/platform-list-with-group-header-example.component.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<h5>Cozy</h5>
22
<fdp-list>
3-
<fdp-list-group-header grpheaderTitle="Group header 1"></fdp-list-group-header>
3+
<fdp-list-group-header groupHeaderTitle="Group header 1"></fdp-list-group-header>
44
<fdp-standard-list-item title="Title1"></fdp-standard-list-item>
55
<fdp-standard-list-item title="Title2"></fdp-standard-list-item>
66
<fdp-standard-list-item title="Title3"></fdp-standard-list-item>
7-
<fdp-list-group-header grpheaderTitle="Group header 2"></fdp-list-group-header>
7+
<fdp-list-group-header groupHeaderTitle="Group header 2"></fdp-list-group-header>
88
<fdp-standard-list-item title="Title1"></fdp-standard-list-item>
99
<fdp-standard-list-item title="Title2"></fdp-standard-list-item>
1010
<fdp-standard-list-item title="Title3"></fdp-standard-list-item>
@@ -14,11 +14,11 @@ <h5>Cozy</h5>
1414

1515
<h5>Compact</h5>
1616
<fdp-list fdCompact>
17-
<fdp-list-group-header grpheaderTitle="Group header 1"></fdp-list-group-header>
17+
<fdp-list-group-header groupHeaderTitle="Group header 1"></fdp-list-group-header>
1818
<fdp-standard-list-item title="Title1"></fdp-standard-list-item>
1919
<fdp-standard-list-item title="Title2"></fdp-standard-list-item>
2020
<fdp-standard-list-item title="Title3"></fdp-standard-list-item>
21-
<fdp-list-group-header grpheaderTitle="Group header 2"></fdp-list-group-header>
21+
<fdp-list-group-header groupHeaderTitle="Group header 2"></fdp-list-group-header>
2222
<fdp-standard-list-item title="Title1"></fdp-standard-list-item>
2323
<fdp-standard-list-item title="Title2"></fdp-standard-list-item>
2424
<fdp-standard-list-item title="Title3"></fdp-standard-list-item>

‎apps/docs/src/app/platform/component-docs/platform-standard-list-item/platform-standard-list-item-examples/platform-standard-list-item-example.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<h3>Cozy Mode</h3>
22
<fdp-list [hasByLine]="true" [navigated]="true">
3-
<fdp-list-group-header grpheaderTitle="Group header 1"></fdp-list-group-header>
3+
<fdp-list-group-header groupHeaderTitle="Group header 1"></fdp-list-group-header>
44
<fdp-standard-list-item
55
[title]="'List item 1'"
66
avatarSrc="https://placeimg.com/400/400/nature"
@@ -19,7 +19,7 @@ <h3>Cozy Mode</h3>
1919
</fdp-list>
2020
<h3>Compact Mode</h3>
2121
<fdp-list fdCompact [noBorder]="true" [hasByLine]="true" [navigated]="true">
22-
<fdp-list-group-header grpheaderTitle="Group header 1"></fdp-list-group-header>
22+
<fdp-list-group-header groupHeaderTitle="Group header 1"></fdp-list-group-header>
2323
<fdp-standard-list-item
2424
[title]="'List item 1'"
2525
avatarSrc="https://placeimg.com/400/400/nature"

‎apps/docs/src/app/platform/component-docs/platform-standard-list-item/platform-standard-list-item-examples/platform-standard-list-item-with-group-header-example.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<h5>Declarative Approach</h5>
22
<fdp-list [hasByLine]="true">
3-
<fdp-list-group-header grpheaderTitle="Group header 1"></fdp-list-group-header>
3+
<fdp-list-group-header groupHeaderTitle="Group header 1"></fdp-list-group-header>
44
<fdp-standard-list-item
55
[title]="'Title 1'"
66
avatarSrc="https://placeimg.com/400/400/nature"
@@ -22,7 +22,7 @@ <h5>Declarative Approach</h5>
2222
description="Third text item in Byline (Standard text item)"
2323
>
2424
</fdp-standard-list-item>
25-
<fdp-list-group-header grpheaderTitle="Group header 2"></fdp-list-group-header>
25+
<fdp-list-group-header groupHeaderTitle="Group header 2"></fdp-list-group-header>
2626
<fdp-standard-list-item
2727
[title]="'Title 6'"
2828
avatarSrc="https://placeimg.com/400/400/nature"

‎libs/platform/src/lib/form/multi-input/multi-input.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@
117117
<ng-container *ngIf="isGroup">
118118
<ng-container *ngFor="let group of _suggestions">
119119
<ng-container *ngIf="!groupItemTemplate">
120-
<fdp-list-group-header [grpheaderTitle]="group.label"></fdp-list-group-header>
120+
<fdp-list-group-header [groupHeaderTitle]="group.label"></fdp-list-group-header>
121121
</ng-container>
122122

123123
<ng-container *ngIf="groupItemTemplate">

‎libs/platform/src/lib/list/list.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
*ngIf="loadMore && !loadOnScroll"
4646
(click)="_getMoreData()"
4747
fd-list-item
48-
(keydown)="_loadOnkeyPress($event)"
48+
(keydown)="_loadOnKeyPress($event)"
4949
class="fd-list__item fd-list__item--growing fd-list__item--action"
5050
[tabindex]="0"
5151
role="button"

‎libs/platform/src/lib/list/list.component.ts

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -383,16 +383,10 @@ export class ListComponent<T> extends CollectionBaseInput implements OnInit, Aft
383383

384384
/**
385385
* @hidden
386-
* Instailization of list with selection mode
386+
* Initialization of the lis component with selection mode
387387
*/
388388
ngOnInit(): void {
389-
if (this._dsItems.length !== null && this.itemSize !== 0) {
390-
this._startIndex = 0;
391-
this._lastIndex = this.itemSize;
392-
this._items = this._dsItems.slice(this._startIndex, this._lastIndex);
393-
} else {
394-
this._items = this._dsItems;
395-
}
389+
this._setItems();
396390

397391
this.stateChanges.next(this._items);
398392
this.id = `fdp-list-${nextListId++}`;
@@ -487,7 +481,7 @@ export class ListComponent<T> extends CollectionBaseInput implements OnInit, Aft
487481
* @hidden
488482
* load more on enter or space press
489483
*/
490-
_loadOnkeyPress(event: KeyboardEvent): void {
484+
_loadOnKeyPress(event: KeyboardEvent): void {
491485
if (KeyUtil.isKeyCode(event, [ENTER, SPACE])) {
492486
this._getMoreData();
493487
}
@@ -503,15 +497,15 @@ export class ListComponent<T> extends CollectionBaseInput implements OnInit, Aft
503497
this._loading = true;
504498
of(this._loadNewItems())
505499
.pipe(
506-
tap((data) => {
500+
tap(async (data) => {
507501
if (isBlank(data)) {
508502
console.error('===Invalid Response recived===');
509503
}
510504
this.loadingLabel = this._translationResolver.resolve(
511505
this._language,
512506
'platformList.loadingAriaLabel'
513507
);
514-
this._liveAnnouncer.announce(this.loadingLabel, 'assertive');
508+
await this._liveAnnouncer.announce(this.loadingLabel, 'assertive');
515509
}),
516510
delay(this.delayTime),
517511
takeUntil(this._destroyed)
@@ -588,6 +582,19 @@ export class ListComponent<T> extends CollectionBaseInput implements OnInit, Aft
588582
this.stateChanges.next(item);
589583
}
590584

585+
/** @hidden */
586+
private _setItems(): void {
587+
if (this._dsItems.length !== null && this.itemSize !== 0) {
588+
this._startIndex = 0;
589+
this._lastIndex = this.itemSize;
590+
this._items = this._dsItems.slice(this._startIndex, this._lastIndex);
591+
} else {
592+
this._items = this._dsItems;
593+
}
594+
595+
this.stateChanges.next(this._items);
596+
}
597+
591598
/** @hidden */
592599
private _initializeDS(ds: FdpListDataSource<T>): void {
593600
this._dsItems = [];
@@ -638,6 +645,7 @@ export class ListComponent<T> extends CollectionBaseInput implements OnInit, Aft
638645
.subscribe((data) => {
639646
this._dsItems = data || [];
640647
this.stateChanges.next(this._dsItems);
648+
this._setItems();
641649
this._cd.markForCheck();
642650
});
643651

@@ -814,30 +822,34 @@ export class ListComponent<T> extends CollectionBaseInput implements OnInit, Aft
814822

815823
@Component({
816824
selector: 'fdp-list-footer',
817-
template: ` <li #listfooter class="fd-list__footer" [attr.id]="id" role="option">
825+
template: ` <li #listFooter class="fd-list__footer" [attr.id]="id" role="option">
818826
<ng-content></ng-content>
819827
</li>`
820828
})
821-
// eslint-disable-next-line @angular-eslint/component-class-suffix
822-
export class ListFooter extends BaseComponent {}
829+
export class ListFooterComponent extends BaseComponent {}
823830

824831
@Component({
825832
selector: 'fdp-list-group-header',
826833
template: ` <li #listItem fd-list-group-header [attr.id]="id" role="option" [tabindex]="0">
827-
<span fd-list-title>{{ grpheaderTitle }}</span>
834+
<span fd-list-title>{{ groupHeaderTitle }}</span>
828835
<ng-content></ng-content>
829836
</li>`,
830-
providers: [{ provide: BaseListItem, useExisting: forwardRef(() => ListGroupHeader) }]
837+
providers: [{ provide: BaseListItem, useExisting: forwardRef(() => ListGroupHeaderComponent) }]
831838
})
832-
// eslint-disable-next-line @angular-eslint/component-class-suffix
833-
export class ListGroupHeader extends BaseListItem implements OnInit {
839+
export class ListGroupHeaderComponent extends BaseListItem implements OnInit {
834840
/** Displays list goup header title */
835841
@Input()
836-
grpheaderTitle?: string;
842+
groupHeaderTitle?: string;
843+
844+
/** @deprecated Use `groupHeaderTitle` instead */
845+
@Input()
846+
set grpheaderTitle(value: string) {
847+
this.groupHeaderTitle = value;
848+
}
837849

838850
/**
839851
* @hidden
840-
* Instailization of list header
852+
* Initialization of the list header component
841853
*/
842854
ngOnInit(): void {
843855
this.id = `fdp-list-${nextListGrpHeaderId++}`;

‎libs/platform/src/lib/list/list.module.ts

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,16 @@ import { BusyIndicatorModule } from '@fundamental-ngx/core/busy-indicator';
1010
import { InfiniteScrollModule } from '@fundamental-ngx/core/infinite-scroll';
1111
import { ContentDensityModule } from '@fundamental-ngx/core/content-density';
1212
import { PlatformContentDensityDeprecationsModule } from '@fundamental-ngx/platform/shared';
13-
import { ListComponent, ListFooter, ListGroupHeader } from './list.component';
14-
import { ListItemDef } from './base-list-item';
1513
import { I18nModule } from '@fundamental-ngx/i18n';
14+
import { ActionListItemModule } from './action-list-item/action-list-item.module';
15+
import { DisplayListItemModule } from './display-list-item/display-list-item.module';
16+
import { ListComponent, ListFooterComponent, ListGroupHeaderComponent } from './list.component';
17+
import { ListItemDef } from './base-list-item';
18+
import { ObjectListItemModule } from './object-list-item/object-list-item.module';
19+
import { StandardListItemModule } from './standard-list-item/standard-list-item.module';
1620

1721
@NgModule({
18-
declarations: [ListComponent, ListFooter, ListGroupHeader, ListItemDef],
22+
declarations: [ListComponent, ListFooterComponent, ListGroupHeaderComponent, ListItemDef],
1923
imports: [
2024
CommonModule,
2125
FormsModule,
@@ -27,15 +31,23 @@ import { I18nModule } from '@fundamental-ngx/i18n';
2731
BusyIndicatorModule,
2832
InfiniteScrollModule,
2933
PlatformContentDensityDeprecationsModule,
30-
ContentDensityModule
34+
ContentDensityModule,
35+
StandardListItemModule,
36+
ObjectListItemModule,
37+
DisplayListItemModule,
38+
ActionListItemModule
3139
],
3240
exports: [
3341
ListComponent,
34-
ListFooter,
35-
ListGroupHeader,
42+
ListFooterComponent,
43+
ListGroupHeaderComponent,
3644
ListItemDef,
3745
PlatformContentDensityDeprecationsModule,
38-
ContentDensityModule
46+
ContentDensityModule,
47+
StandardListItemModule,
48+
ObjectListItemModule,
49+
DisplayListItemModule,
50+
ActionListItemModule
3951
]
4052
})
4153
export class PlatformListModule {}

‎libs/platform/src/lib/shared/domain/data-source.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ export abstract class DataProvider<T> {
113113
protected _matchingStrategy: MatchingStrategy = MatchingStrategy.STARTS_WITH;
114114
protected _matchingBy: MatchingBy | null = null;
115115

116-
abstract fetch(params: ProviderParams): Observable<T[]>;
116+
abstract fetch(params: ProviderParams, start?: number, end?: number): Observable<T[]>;
117117

118118
/**
119119
* Tells if this DataProvider supports INSERT, REMOVE
@@ -173,7 +173,7 @@ export class ComboBoxDataSource<T> implements DataSource<T> {
173173

174174
constructor(public dataProvider: DataProvider<any>) {}
175175

176-
match(predicate: string | Map<string, string> = new Map<string, string>()): void {
176+
match(predicate: string | Map<string, string> = new Map<string, string>(), start = 0, end = Infinity): void {
177177
this._onDataRequested$.next();
178178
this._dataLoading = true;
179179
const searchParam = new Map();
@@ -191,7 +191,7 @@ export class ComboBoxDataSource<T> implements DataSource<T> {
191191
}
192192

193193
this.dataProvider
194-
.fetch(searchParam)
194+
.fetch(searchParam, start, end)
195195
.pipe(takeUntil(this._onDestroy$))
196196
.subscribe(
197197
(result: T[]) => {

0 commit comments

Comments
 (0)