add bucket load support for infinite-for-of directive.

projects/deneb-ui-demo/src/app/app.module.ts

@@ -17,6 +17,7 @@ import { TimelineMeterExample } from './timeline-meter/timeline-meter.component'
 import { ToastDemo } from './toast/toast.component';
 import { ToggleDemo } from './toggle/toggle.component';
 import { ResponsiveImageComponent } from './responsive-image/responsive-image.component';
+import { InfiniteService } from './infinite-list/infinite.service';
 
 @NgModule({
     declarations: [
@@ -78,6 +79,9 @@ import { ResponsiveImageComponent } from './responsive-image/responsive-image.co
             }
         ], {enableTracing: false})
     ],
+    providers: [
+        InfiniteService
+    ],
     bootstrap: [App]
 })
 export class AppModule {

projects/deneb-ui-demo/src/app/infinite-list/infinite-list.component.ts

@@ -1,6 +1,12 @@
 import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import { InfiniteService } from './infinite.service';
+import {
+    InfiniteDataBucket,
+    InfiniteDataBucketsStub
+} from '../../../../irohalab/deneb-ui/src/infinite-list/infinite-data-collection';
+import { lastValueFrom } from 'rxjs';
 
-const MOCK_DATA = require('../../MOCK_DATA.json');
+// const MOCK_DATA = require('../../MOCK_DATA.json');
 
 @Component({
     selector: 'infinite-list-demo',
@@ -11,40 +17,40 @@ const MOCK_DATA = require('../../MOCK_DATA.json');
             height: 100%;
             position: relative;
             background-color: #f0f0f0;
+            display: flex;
+            flex-direction: row;
         }
         infinite-list {
             width: 600px;
             height: 100%;
             display: block;
         }
-    `]
+    `],
+    providers: [InfiniteService]
 })
 export class InfiniteListDemo implements OnInit {
 
     collection: {id: number, image: string, content: string}[];
 
     newPosition = 0;
 
+    bucketsStub: InfiniteDataBucketsStub;
+    scrollPosition: number = 0;
+
+    constructor(private infiniteService: InfiniteService) {
+    }
+
     onScrollPositionChange(p: number) {
-        console.log(p);
+        this.scrollPosition = p;
     }
 
     ngOnInit(): void {
+        this.bucketsStub = new InfiniteDataBucketsStub(this.infiniteService.buckets, this, this.onLoadBucket);
+        // this.onLoadBucket(0);
+        this.collection = [];
+    }
 
-        this.newPosition = 5000;
-
-        setTimeout(() => {
-            this.collection = MOCK_DATA;
-        }, 3000);
-
-        // setTimeout(() => {
-        //     this.collection = MOCK_DATA.filter(item => item.id % 2 === 0);
-        //     // console.log('current collection', this.collection);
-        // }, 5000);
-        //
-        // setTimeout(() => {
-        //     this.collection = MOCK_DATA.filter(item => true);
-        //     // console.log('current collection', this.collection);
-        // }, 7000);
+    onLoadBucket(bucketIndex: number): Promise<Iterable<any>> {
+        return this.infiniteService.getBucketData(bucketIndex);
     }
 }

projects/deneb-ui-demo/src/app/infinite-list/infinite-list.html

@@ -1,7 +1,13 @@
 <div class="demo-container" *ngIf="collection">
     <infinite-list [rowHeight]="140" [newScrollPosition]="newPosition" (scrollPosition)="onScrollPositionChange($event)">
-        <list-item-example *infiniteFor="let row of collection; let i = index" [item]="row" [index]="i">
+        <list-item-example *infiniteFor="let row of collection; let isInit = isInitialized; let i = index; withBucket: bucketsStub"
+                           [item]="row"
+                           [index]="i"
+                           [isInit]="isInit">
 
         </list-item-example>
     </infinite-list>
+    <div class="information-container">
+        <p><strong>scroll position: </strong><span>{{scrollPosition}}</span></p>
+    </div>
 </div>

projects/deneb-ui-demo/src/app/infinite-list/infinite.service.ts

@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+import { InfiniteDataBucket } from '../../../../irohalab/deneb-ui/src/infinite-list/infinite-data-collection';
+import { Observable, of } from 'rxjs';
+const MOCK_DATA = require('../../MOCK_DATA.json');
+const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+
+@Injectable()
+export class InfiniteService {
+    public buckets!: InfiniteDataBucket[];
+    constructor() {
+        const length = MOCK_DATA.length;
+        const bucketCount = Math.ceil(length / 20);
+        this.buckets = [];
+        for (let i = 0; i < bucketCount; i++) {
+            const start = i * 20;
+            let end = start + 20;
+            if (end >= length) {
+                end = length - 1;
+            }
+            this.buckets.push({
+                start,
+                end,
+                filled: false
+            });
+        }
+    }
+
+    async getBucketData(bucketIndex: number): Promise<any[]> {
+        await sleep(3000);
+        console.log('bucket data filled');
+        const bucket = this.buckets[bucketIndex];
+        if (bucket) {
+            return await Promise.resolve(MOCK_DATA.slice(bucket.start, bucket.end + 1));
+        }
+        return Promise.reject(new Error('bucket index out of range'));
+    }
+}

projects/deneb-ui-demo/src/app/infinite-list/list-item/list-item.component.ts

@@ -43,18 +43,29 @@ import { InfiniteList, SCROLL_STATE } from '../../../../../irohalab/deneb-ui/src
             padding: 0.5rem;
             background-color: #eaeaea;
         }
+        .state-label {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            padding: 0.5rem;
+            background-color: #eaeaea;
+        }
     `]
 })
 export class ListItemExample implements OnDestroy {
     @Input() item: any;
 
     @Input() index: number;
 
+    @Input() isInit: boolean;
+
+    state: string;
+
     private _subscription = new Subscription();
 
     constructor(private _infiniteList: InfiniteList) {
         this._subscription.add(this._infiniteList.scrollStateChange.subscribe((state: SCROLL_STATE) => {
-            console.log('state changed: ', state);
+            this.state = SCROLL_STATE[state];
         }));
     }
 

projects/deneb-ui-demo/src/app/infinite-list/list-item/list-item.html

@@ -1,11 +1,23 @@
 <div class="list-item-example">
-    <div class="list-item-wrapper">
+    <div class="list-item-wrapper" *ngIf="isInit">
         <div class="image">
             <img [src]="item.image" alt="image">
         </div>
         <div class="content">
             {{item.content}}
         </div>
+        <div class="state-label">{{state}}</div>
+        <div class="index-label">{{index}}</div>
+    </div>
+    <div class="list-item-wrapper" *ngIf="!isInit">
+        <div class="ui placeholder">
+            <div class="paragraph">
+                <div class="line"></div>
+                <div class="line"></div>
+                <div class="line"></div>
+            </div>
+        </div>
+        <div class="state-label">{{state}}</div>
         <div class="index-label">{{index}}</div>
     </div>
 </div>

projects/deneb-ui-demo/src/app/timeline-meter/timeline-meter.service.ts

@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class TimelineMeterService {
+    // getTimeline(): {}[] {
+    //
+    // }
+    getBuckets(): any[] {
+        return [];
+    }
+}

projects/irohalab/deneb-ui/src/infinite-list/index.ts

@@ -19,3 +19,4 @@ export class UIInfiniteListModule {
 
 export * from './infinite-for-of';
 export * from './infinite-list';
+export * from './infinite-data-collection';

projects/irohalab/deneb-ui/src/infinite-list/infinite-data-collection.ts

@@ -0,0 +1,17 @@
+export type InfiniteDataBucket = {
+    start: number;
+    end: number;
+    filled?: boolean;
+    fetching?: boolean;
+}
+
+export class InfiniteDataBucketsStub {
+    constructor(public buckets: InfiniteDataBucket[],
+                public context: any,
+                public onLoadBucket: (bucketIndex: number) => Promise<Iterable<any>>) {
+    }
+
+    loadBucket(bucketIndex: number): Promise<Iterable<any>> {
+        return this.onLoadBucket.call(this.context, bucketIndex);
+    }
+}