fix(platform): update items on new event (#8650)

* fix(platform): update items on new event * fix(platform): pr comments
SAP · Sep 15, 2022 · cbf1e2c · cbf1e2c
1 parent d8c77fe
commit cbf1e2c
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 42 deletions.
diff --git a/...tem/platform-display-list-item-examples/platform-display-list-item-example.component.html b/...tem/platform-display-list-item-examples/platform-display-list-item-example.component.html
@@ -1,5 +1,5 @@
 <fdp-list [navigated]="true">
-    <fdp-list-group-header grpheaderTitle="Vegetables Group"></fdp-list-group-header>
+    <fdp-list-group-header groupHeaderTitle="Vegetables Group"></fdp-list-group-header>
     <fdp-display-list-item title="Green Vegetables"> </fdp-display-list-item>
     <fdp-display-list-item title="Dry Vegetables"> </fdp-display-list-item>
     <fdp-list-footer>List footer</fdp-list-footer>

diff --git a/.../component-docs/platform-list/platform-list-examples/platform-list-example.component.html b/.../component-docs/platform-list/platform-list-examples/platform-list-example.component.html
@@ -1,5 +1,5 @@
 <fdp-list [navigated]="true">
-    <fdp-list-group-header grpheaderTitle="Group header 1"></fdp-list-group-header>
+    <fdp-list-group-header groupHeaderTitle="Group header 1"></fdp-list-group-header>
     <fdp-standard-list-item title="List item 1"> </fdp-standard-list-item>
     <fdp-standard-list-item title="List item 2"> </fdp-standard-list-item>
     <fdp-list-footer>List footer</fdp-list-footer>

diff --git a/...atform-list/platform-list-examples/platform-list-with-group-header-example.component.html b/...atform-list/platform-list-examples/platform-list-with-group-header-example.component.html
@@ -1,10 +1,10 @@
 <h5>Cozy</h5>
 <fdp-list>
-    <fdp-list-group-header grpheaderTitle="Group header 1"></fdp-list-group-header>
+    <fdp-list-group-header groupHeaderTitle="Group header 1"></fdp-list-group-header>
     <fdp-standard-list-item title="Title1"></fdp-standard-list-item>
     <fdp-standard-list-item title="Title2"></fdp-standard-list-item>
     <fdp-standard-list-item title="Title3"></fdp-standard-list-item>
-    <fdp-list-group-header grpheaderTitle="Group header 2"></fdp-list-group-header>
+    <fdp-list-group-header groupHeaderTitle="Group header 2"></fdp-list-group-header>
     <fdp-standard-list-item title="Title1"></fdp-standard-list-item>
     <fdp-standard-list-item title="Title2"></fdp-standard-list-item>
     <fdp-standard-list-item title="Title3"></fdp-standard-list-item>
@@ -14,11 +14,11 @@ <h5>Cozy</h5>
 
 <h5>Compact</h5>
 <fdp-list fdCompact>
-    <fdp-list-group-header grpheaderTitle="Group header 1"></fdp-list-group-header>
+    <fdp-list-group-header groupHeaderTitle="Group header 1"></fdp-list-group-header>
     <fdp-standard-list-item title="Title1"></fdp-standard-list-item>
     <fdp-standard-list-item title="Title2"></fdp-standard-list-item>
     <fdp-standard-list-item title="Title3"></fdp-standard-list-item>
-    <fdp-list-group-header grpheaderTitle="Group header 2"></fdp-list-group-header>
+    <fdp-list-group-header groupHeaderTitle="Group header 2"></fdp-list-group-header>
     <fdp-standard-list-item title="Title1"></fdp-standard-list-item>
     <fdp-standard-list-item title="Title2"></fdp-standard-list-item>
     <fdp-standard-list-item title="Title3"></fdp-standard-list-item>

diff --git a/...m/platform-standard-list-item-examples/platform-standard-list-item-example.component.html b/...m/platform-standard-list-item-examples/platform-standard-list-item-example.component.html
@@ -1,6 +1,6 @@
 <h3>Cozy Mode</h3>
 <fdp-list [hasByLine]="true" [navigated]="true">
-    <fdp-list-group-header grpheaderTitle="Group header 1"></fdp-list-group-header>
+    <fdp-list-group-header groupHeaderTitle="Group header 1"></fdp-list-group-header>
     <fdp-standard-list-item
         [title]="'List item 1'"
         avatarSrc="https://placeimg.com/400/400/nature"
@@ -19,7 +19,7 @@ <h3>Cozy Mode</h3>
 </fdp-list>
 <h3>Compact Mode</h3>
 <fdp-list fdCompact [noBorder]="true" [hasByLine]="true" [navigated]="true">
-    <fdp-list-group-header grpheaderTitle="Group header 1"></fdp-list-group-header>
+    <fdp-list-group-header groupHeaderTitle="Group header 1"></fdp-list-group-header>
     <fdp-standard-list-item
         [title]="'List item 1'"
         avatarSrc="https://placeimg.com/400/400/nature"

diff --git a/...d-list-item-examples/platform-standard-list-item-with-group-header-example.component.html b/...d-list-item-examples/platform-standard-list-item-with-group-header-example.component.html
@@ -1,6 +1,6 @@
 <h5>Declarative Approach</h5>
 <fdp-list [hasByLine]="true">
-    <fdp-list-group-header grpheaderTitle="Group header 1"></fdp-list-group-header>
+    <fdp-list-group-header groupHeaderTitle="Group header 1"></fdp-list-group-header>
     <fdp-standard-list-item
         [title]="'Title 1'"
         avatarSrc="https://placeimg.com/400/400/nature"
@@ -22,7 +22,7 @@ <h5>Declarative Approach</h5>
         description="Third text item in Byline (Standard text item)"
     >
     </fdp-standard-list-item>
-    <fdp-list-group-header grpheaderTitle="Group header 2"></fdp-list-group-header>
+    <fdp-list-group-header groupHeaderTitle="Group header 2"></fdp-list-group-header>
     <fdp-standard-list-item
         [title]="'Title 6'"
         avatarSrc="https://placeimg.com/400/400/nature"

diff --git a/libs/platform/src/lib/form/multi-input/multi-input.component.html b/libs/platform/src/lib/form/multi-input/multi-input.component.html
@@ -117,7 +117,7 @@
         <ng-container *ngIf="isGroup">
             <ng-container *ngFor="let group of _suggestions">
                 <ng-container *ngIf="!groupItemTemplate">
-                    <fdp-list-group-header [grpheaderTitle]="group.label"></fdp-list-group-header>
+                    <fdp-list-group-header [groupHeaderTitle]="group.label"></fdp-list-group-header>
                 </ng-container>
 
                 <ng-container *ngIf="groupItemTemplate">

diff --git a/libs/platform/src/lib/list/list.component.html b/libs/platform/src/lib/list/list.component.html
@@ -45,7 +45,7 @@
             *ngIf="loadMore && !loadOnScroll"
             (click)="_getMoreData()"
             fd-list-item
-            (keydown)="_loadOnkeyPress($event)"
+            (keydown)="_loadOnKeyPress($event)"
             class="fd-list__item fd-list__item--growing fd-list__item--action"
             [tabindex]="0"
             role="button"

diff --git a/libs/platform/src/lib/list/list.component.ts b/libs/platform/src/lib/list/list.component.ts
@@ -383,16 +383,10 @@ export class ListComponent<T> extends CollectionBaseInput implements OnInit, Aft
 
     /**
      * @hidden
-     * Instailization of list with selection mode
+     * Initialization of the lis component with selection mode
      */
     ngOnInit(): void {
-        if (this._dsItems.length !== null && this.itemSize !== 0) {
-            this._startIndex = 0;
-            this._lastIndex = this.itemSize;
-            this._items = this._dsItems.slice(this._startIndex, this._lastIndex);
-        } else {
-            this._items = this._dsItems;
-        }
+        this._setItems();
 
         this.stateChanges.next(this._items);
         this.id = `fdp-list-${nextListId++}`;
@@ -487,7 +481,7 @@ export class ListComponent<T> extends CollectionBaseInput implements OnInit, Aft
      * @hidden
      * load more on enter or space press
      */
-    _loadOnkeyPress(event: KeyboardEvent): void {
+    _loadOnKeyPress(event: KeyboardEvent): void {
         if (KeyUtil.isKeyCode(event, [ENTER, SPACE])) {
             this._getMoreData();
         }
@@ -503,15 +497,15 @@ export class ListComponent<T> extends CollectionBaseInput implements OnInit, Aft
         this._loading = true;
         of(this._loadNewItems())
             .pipe(
-                tap((data) => {
+                tap(async (data) => {
                     if (isBlank(data)) {
                         console.error('===Invalid Response recived===');
                     }
                     this.loadingLabel = this._translationResolver.resolve(
                         this._language,
                         'platformList.loadingAriaLabel'
                     );
-                    this._liveAnnouncer.announce(this.loadingLabel, 'assertive');
+                    await this._liveAnnouncer.announce(this.loadingLabel, 'assertive');
                 }),
                 delay(this.delayTime),
                 takeUntil(this._destroyed)
@@ -588,6 +582,19 @@ export class ListComponent<T> extends CollectionBaseInput implements OnInit, Aft
         this.stateChanges.next(item);
     }
 
+    /** @hidden */
+    private _setItems(): void {
+        if (this._dsItems.length !== null && this.itemSize !== 0) {
+            this._startIndex = 0;
+            this._lastIndex = this.itemSize;
+            this._items = this._dsItems.slice(this._startIndex, this._lastIndex);
+        } else {
+            this._items = this._dsItems;
+        }
+
+        this.stateChanges.next(this._items);
+    }
+
     /** @hidden */
     private _initializeDS(ds: FdpListDataSource<T>): void {
         this._dsItems = [];
@@ -638,6 +645,7 @@ export class ListComponent<T> extends CollectionBaseInput implements OnInit, Aft
             .subscribe((data) => {
                 this._dsItems = data || [];
                 this.stateChanges.next(this._dsItems);
+                this._setItems();
                 this._cd.markForCheck();
             });
 
@@ -814,30 +822,34 @@ export class ListComponent<T> extends CollectionBaseInput implements OnInit, Aft
 
 @Component({
     selector: 'fdp-list-footer',
-    template: ` <li #listfooter class="fd-list__footer" [attr.id]="id" role="option">
+    template: ` <li #listFooter class="fd-list__footer" [attr.id]="id" role="option">
         <ng-content></ng-content>
     </li>`
 })
-// eslint-disable-next-line @angular-eslint/component-class-suffix
-export class ListFooter extends BaseComponent {}
+export class ListFooterComponent extends BaseComponent {}
 
 @Component({
     selector: 'fdp-list-group-header',
     template: ` <li #listItem fd-list-group-header [attr.id]="id" role="option" [tabindex]="0">
-        <span fd-list-title>{{ grpheaderTitle }}</span>
+        <span fd-list-title>{{ groupHeaderTitle }}</span>
         <ng-content></ng-content>
     </li>`,
-    providers: [{ provide: BaseListItem, useExisting: forwardRef(() => ListGroupHeader) }]
+    providers: [{ provide: BaseListItem, useExisting: forwardRef(() => ListGroupHeaderComponent) }]
 })
-// eslint-disable-next-line @angular-eslint/component-class-suffix
-export class ListGroupHeader extends BaseListItem implements OnInit {
+export class ListGroupHeaderComponent extends BaseListItem implements OnInit {
     /** Displays list goup header title */
     @Input()
-    grpheaderTitle?: string;
+    groupHeaderTitle?: string;
+
+    /** @deprecated Use `groupHeaderTitle` instead */
+    @Input()
+    set grpheaderTitle(value: string) {
+        this.groupHeaderTitle = value;
+    }
 
     /**
      * @hidden
-     * Instailization of list header
+     * Initialization of the list header component
      */
     ngOnInit(): void {
         this.id = `fdp-list-${nextListGrpHeaderId++}`;

diff --git a/libs/platform/src/lib/list/list.module.ts b/libs/platform/src/lib/list/list.module.ts
@@ -10,12 +10,16 @@ import { BusyIndicatorModule } from '@fundamental-ngx/core/busy-indicator';
 import { InfiniteScrollModule } from '@fundamental-ngx/core/infinite-scroll';
 import { ContentDensityModule } from '@fundamental-ngx/core/content-density';
 import { PlatformContentDensityDeprecationsModule } from '@fundamental-ngx/platform/shared';
-import { ListComponent, ListFooter, ListGroupHeader } from './list.component';
-import { ListItemDef } from './base-list-item';
 import { I18nModule } from '@fundamental-ngx/i18n';
+import { ActionListItemModule } from './action-list-item/action-list-item.module';
+import { DisplayListItemModule } from './display-list-item/display-list-item.module';
+import { ListComponent, ListFooterComponent, ListGroupHeaderComponent } from './list.component';
+import { ListItemDef } from './base-list-item';
+import { ObjectListItemModule } from './object-list-item/object-list-item.module';
+import { StandardListItemModule } from './standard-list-item/standard-list-item.module';
 
 @NgModule({
-    declarations: [ListComponent, ListFooter, ListGroupHeader, ListItemDef],
+    declarations: [ListComponent, ListFooterComponent, ListGroupHeaderComponent, ListItemDef],
     imports: [
         CommonModule,
         FormsModule,
@@ -27,15 +31,23 @@ import { I18nModule } from '@fundamental-ngx/i18n';
         BusyIndicatorModule,
         InfiniteScrollModule,
         PlatformContentDensityDeprecationsModule,
-        ContentDensityModule
+        ContentDensityModule,
+        StandardListItemModule,
+        ObjectListItemModule,
+        DisplayListItemModule,
+        ActionListItemModule
     ],
     exports: [
         ListComponent,
-        ListFooter,
-        ListGroupHeader,
+        ListFooterComponent,
+        ListGroupHeaderComponent,
         ListItemDef,
         PlatformContentDensityDeprecationsModule,
-        ContentDensityModule
+        ContentDensityModule,
+        StandardListItemModule,
+        ObjectListItemModule,
+        DisplayListItemModule,
+        ActionListItemModule
     ]
 })
 export class PlatformListModule {}
diff --git a/libs/platform/src/lib/shared/domain/data-source.ts b/libs/platform/src/lib/shared/domain/data-source.ts
@@ -113,7 +113,7 @@ export abstract class DataProvider<T> {
     protected _matchingStrategy: MatchingStrategy = MatchingStrategy.STARTS_WITH;
     protected _matchingBy: MatchingBy | null = null;
 
-    abstract fetch(params: ProviderParams): Observable<T[]>;
+    abstract fetch(params: ProviderParams, start?: number, end?: number): Observable<T[]>;
 
     /**
      * Tells if this DataProvider supports INSERT, REMOVE
@@ -173,7 +173,7 @@ export class ComboBoxDataSource<T> implements DataSource<T> {
 
     constructor(public dataProvider: DataProvider<any>) {}
 
-    match(predicate: string | Map<string, string> = new Map<string, string>()): void {
+    match(predicate: string | Map<string, string> = new Map<string, string>(), start = 0, end = Infinity): void {
         this._onDataRequested$.next();
         this._dataLoading = true;
         const searchParam = new Map();
@@ -191,7 +191,7 @@ export class ComboBoxDataSource<T> implements DataSource<T> {
         }
 
         this.dataProvider
-            .fetch(searchParam)
+            .fetch(searchParam, start, end)
             .pipe(takeUntil(this._onDestroy$))
             .subscribe(
                 (result: T[]) => {