From b9e128683a2a96b804adc00294410d45586fac49 Mon Sep 17 00:00:00 2001
From: Sebastien DUMETZ <s.dumetz@holusion.com>
Date: Tue, 27 Feb 2024 12:13:31 +0100
Subject: [PATCH] basic pagination in scenes list

---
 source/ui/screens/List.ts     | 16 +++++++++++---
 source/ui/state/withScenes.ts | 41 ++++++++++++++++++++++++++++++-----
 2 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/source/ui/screens/List.ts b/source/ui/screens/List.ts
index 2a514487..5d7b97c0 100644
--- a/source/ui/screens/List.ts
+++ b/source/ui/screens/List.ts
@@ -146,7 +146,6 @@ interface Upload{
                     ...(this.list ??[]),
                 ],(i)=>(i as any).key ?? i.name , (scene)=>this.renderScene(mode, scene))
             }
-            ${this.list? null: html`<div style="margin-top:10vh"><spin-loader visible></spin-loader></div>`}
         `;
 
 
@@ -183,12 +182,23 @@ interface Upload{
                     <span>${this.t("ui.sortBy")}</span>
                     <span class="form-item"><select style="width:auto" @change=${this.onSelectOrder}>
                         ${sorts.map(a=>html`<option value="${a}">${this.t(`ui.${a}`)}</option>`)}
-                    </select></span>                        
+                    </select></span>
                 </div>
 
                 <div class="section" style="width:100%">
+                    ${this.error? html`<div class="error">
+                        <h2 class="text-error">Error</h2>
+                        <span class="text-center">${this.error}</span>
+                        <div style="display:flex;justify-content:center">
+                            <button class="btn btn-main" @click=${()=>this.fetchScenes()}>Retry</button>
+                        </div>
+                    </div>`:null}
                     ${listContent}
-                    ${this.dragover ?html`<div class="drag-overlay">Drop item here</div>`:""}                
+                    ${this.loading?html`<div style="margin-top:10vh"><spin-loader visible></spin-loader></div>`:null}
+                    ${this.dragover ?html`<div class="drag-overlay">Drop item here</div>`:""}
+                    ${this.loading?null: html`<div style="display:flex;justify-content:center;padding-top:1rem;">
+                        <button class="btn btn-main" @click=${()=>this.fetchScenes(true)}>Load more</button>
+                    </div>`}
                 </div>
 
             </div>`;
diff --git a/source/ui/state/withScenes.ts b/source/ui/state/withScenes.ts
index c0e7cf7d..a2d5109f 100644
--- a/source/ui/state/withScenes.ts
+++ b/source/ui/state/withScenes.ts
@@ -42,17 +42,32 @@ export type OrderDirection = typeof directions[number];
 
 export declare class SceneView{
   list : Scene[];
+  error : string;
+  loading : number;
   access ?:Array<AccessType>;
   match ?:string;
   orderBy :OrderBy;
   orderDirection :OrderDirection;
-  fetchScenes():Promise<void>;
+  fetchScenes(append?:Boolean):Promise<void>;
 }
 
 export function withScenes<T extends Constructor<LitElement>>(baseClass:T) : T & Constructor<SceneView> {
   class SceneView extends baseClass{
     @property()
     list : Scene[];
+
+    /**
+     * Error related to the last fetch attempt. Cleared on success.
+     */
+    @property({type: String, reflect: false})
+    error :string = "";
+
+    /**
+     * Loadign is a number to prevent race condition when a download is aborted.
+     * It is set to 0 when not loading, and to a positive number when loading.
+     */
+    @property({type: Number})
+    loading :number = 0;
     
     #loading = new AbortController();
 
@@ -83,10 +98,10 @@ export function withScenes<T extends Constructor<LitElement>>(baseClass:T) : T &
       }
 
       super.update(changedProperties);
-  }
+    }
 
 
-    async fetchScenes(){
+    async fetchScenes(append=false){
       this.#loading.abort();
       this.#loading = new AbortController();
 
@@ -97,13 +112,27 @@ export function withScenes<T extends Constructor<LitElement>>(baseClass:T) : T &
       if(this.match) url.searchParams.set("match", this.match);
       if(this.access?.length) this.access.forEach(a=>url.searchParams.append("access", a));
 
-      url.searchParams.set("limit", "100");
+      url.searchParams.set("limit", "20");
+      if(append && this.list?.length){
+        url.searchParams.set("offset", this.list.length.toString());
+      }
+
+      this.loading++;
       fetch(url, {signal: this.#loading.signal}).then(async (r)=>{
           if(!r.ok) throw new Error(`[${r.status}]: ${r.statusText}`);
-          this.list = ((await r.json()) as ApiResult).scenes;
+          const {scenes} = await r.json() as ApiResult;
+          if(append && this.list?.length){
+            this.list = [...this.list, ...scenes];
+          }else{
+            this.list = scenes;
+          }
+          this.error = null;
       }).catch((e)=> {
           if(e.name == "AbortError") return;
-          Notification.show(`Failed to fetch scenes list : ${e.message}`, "error");
+          Notification.show(`Failed to fetch scenes list : ${e.message}`, "error", 4000);
+          this.error = `Failed to fetch scenes list : ${e.message}`;
+      }).finally(()=>{
+          this.loading--;
       });
     }
   }