Add drawai qrart pagination (#176)

AceDataCloud · Feb 12, 2025 · 094b7cd · 094b7cd
1 parent c59c916
commit 094b7cd
Show file tree

Hide file tree

Showing 14 changed files with 202 additions and 47 deletions.
diff --git a/change/@acedatacloud-nexior-271cfc54-2629-4ae0-adf4-d731adc544ec.json b/change/@acedatacloud-nexior-271cfc54-2629-4ae0-adf4-d731adc544ec.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add drawai qrart pagination",
+  "packageName": "@acedatacloud/nexior",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/src/components/headshots/RecentPanel.vue b/src/components/headshots/RecentPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="panel recent">
+  <div ref="panel" class="panel recent" @scroll="onHandleScroll">
     <div v-if="tasks?.items === undefined" class="tasks">
       <div v-for="_ in 3" :key="_" class="task placeholder">
         <div class="left">
@@ -40,6 +40,7 @@ export default defineComponent({
     ElSkeleton,
     ElSkeletonItem
   },
+  emits: ['reach-top'],
   data() {
     return {
       job: 0
@@ -50,9 +51,18 @@ export default defineComponent({
       // reverse the order of the tasks.items
       return {
         ...this.$store.state.headshots?.tasks,
-        items: this.$store.state.headshots?.tasks?.items?.slice().reverse()
+        items: this.$store.state.headshots?.tasks?.items?.slice()
       };
     }
+  },
+  methods: {
+    onHandleScroll() {
+      const el = this.$refs.panel as HTMLElement;
+      console.log('reach-top reach-top reach-top');
+      if (el.scrollTop === 0) {
+        this.$emit('reach-top');
+      }
+    }
   }
 });
 </script>

diff --git a/src/components/pika/task/Preview.vue b/src/components/pika/task/Preview.vue
@@ -141,19 +141,19 @@ export default defineComponent({
     }
   },
   methods: {
-    onExtend(event: MouseEvent, response: IPikaGenerateResponse) {
-      event.stopPropagation();
-      // extend url here
-      console.debug('set config', response);
-      this.$store.commit('pika/setConfig', {
-        ...this.$store.state.pika?.config,
-        video_id: response.video_id,
-        prompt: response.prompt,
-        action: 'extend',
-        thumbnail_url: response.thumbnail_url,
-        video_url: response.video_url
-      });
-    },
+    // onExtend(event: MouseEvent, response: IPikaGenerateResponse) {
+    //   event.stopPropagation();
+    //   // extend url here
+    //   console.debug('set config', response);
+    //   this.$store.commit('pika/setConfig', {
+    //     ...this.$store.state.pika?.config,
+    //     video_id: response.video_id,
+    //     prompt: response.prompt,
+    //     action: 'extend',
+    //     thumbnail_url: response.thumbnail_url,
+    //     video_url: response.video_url
+    //   });
+    // },
     onDownload(event: MouseEvent, video_url: string) {
       event.stopPropagation();
       console.log('on download');

diff --git a/src/components/qrart/RecentPanel.vue b/src/components/qrart/RecentPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="panel recent">
+  <div ref="panel" class="panel recent" @scroll="onHandleScroll">
     <div v-if="tasks?.items === undefined" class="tasks">
       <div v-for="_ in 3" :key="_" class="task placeholder">
         <div class="left">
@@ -40,6 +40,7 @@ export default defineComponent({
     ElSkeleton,
     ElSkeletonItem
   },
+  emits: ['reach-top'],
   data() {
     return {
       job: 0
@@ -50,9 +51,18 @@ export default defineComponent({
       // reverse the order of the tasks.items
       return {
         ...this.$store.state.qrart?.tasks,
-        items: this.$store.state.qrart?.tasks?.items?.slice().reverse()
+        items: this.$store.state.qrart?.tasks?.items?.slice()
       };
     }
+  },
+  methods: {
+    onHandleScroll() {
+      const el = this.$refs.panel as HTMLElement;
+      console.log('reach-top reach-top reach-top');
+      if (el.scrollTop === 0) {
+        this.$emit('reach-top');
+      }
+    }
   }
 });
 </script>

diff --git a/src/models/headshots.ts b/src/models/headshots.ts
@@ -39,7 +39,7 @@ export interface IHeadshotsTask {
   _id: string;
   api_id?: string;
   application_id?: string;
-  created_at?: string;
+  created_at?: number;
   credential_id?: string;
   trace_id?: string;
   user_id?: string;

diff --git a/src/models/qrart.ts b/src/models/qrart.ts
@@ -58,7 +58,7 @@ export interface IQrartGenerateResponse {
 
 export interface IQrartTask {
   id: string;
-  created_at?: string;
+  created_at?: number;
   request?: IQrartGenerateRequest;
   response?: IQrartGenerateResponse;
 }

diff --git a/src/operators/headshots.ts b/src/operators/headshots.ts
@@ -28,7 +28,15 @@ class HeadshotsOperator {
   }
 
   async tasks(
-    filter: { ids?: string[]; applicationId?: string; userId?: string; limit?: number; offset?: number },
+    filter: {
+      ids?: string[];
+      applicationId?: string;
+      userId?: string;
+      limit?: number;
+      offset?: number;
+      createdAtMax?: number;
+      createdAtMin?: number;
+    },
     options: { token: string }
   ): Promise<AxiosResponse<IHeadshotsTasksResponse>> {
     return await axios.post(
@@ -59,6 +67,16 @@ class HeadshotsOperator {
           ? {
               offset: filter.offset
             }
+          : {}),
+        ...(filter.createdAtMax !== undefined
+          ? {
+              created_at_max: filter.createdAtMax
+            }
+          : {}),
+        ...(filter.createdAtMin !== undefined
+          ? {
+              created_at_min: filter.createdAtMin
+            }
           : {})
       },
       {

diff --git a/src/operators/qrart.ts b/src/operators/qrart.ts
@@ -23,7 +23,15 @@ class QrartOperator {
   }
 
   async tasks(
-    filter: { ids?: string[]; applicationId?: string; userId?: string; limit?: number; offset?: number },
+    filter: {
+      ids?: string[];
+      applicationId?: string;
+      userId?: string;
+      limit?: number;
+      offset?: number;
+      createdAtMax?: number;
+      createdAtMin?: number;
+    },
     options: { token: string }
   ): Promise<AxiosResponse<IQrartTasksResponse>> {
     return await axios.post(
@@ -54,6 +62,16 @@ class QrartOperator {
           ? {
               offset: filter.offset
             }
+          : {}),
+        ...(filter.createdAtMax !== undefined
+          ? {
+              created_at_max: filter.createdAtMax
+            }
+          : {}),
+        ...(filter.createdAtMin !== undefined
+          ? {
+              created_at_min: filter.createdAtMin
+            }
           : {})
       },
       {

diff --git a/src/pages/headshots/Index.vue b/src/pages/headshots/Index.vue
@@ -12,7 +12,7 @@
         class="mb-4"
         @refresh="onGetApplication"
       />
-      <recent-panel class="panel recent" />
+      <recent-panel class="panel recent" @reach-top="onReachTop" />
       <!-- <operation-panel class="panel operation" @generate="onGenerate" /> -->
     </template>
   </layout>
@@ -35,6 +35,7 @@ const CALLBACK_URL = 'https://webhook.acedata.cloud/headshots';
 interface IData {
   task: IHeadshotsTask | undefined;
   job: number;
+  timer: NodeJS.Timer;
 }
 
 export default defineComponent({
@@ -48,7 +49,9 @@ export default defineComponent({
   data(): IData {
     return {
       task: undefined,
-      job: 0
+      job: 0,
+      // @ts-ignore
+      timer: undefined
     };
   },
   computed: {
@@ -72,23 +75,45 @@ export default defineComponent({
     },
     application() {
       return this.$store.state.headshots.application;
+    },
+    tasks() {
+      return this.$store.state.headshots.tasks;
+    }
+  },
+  watch: {
+    tasks: {
+      handler(value, oldValue) {
+        // scroll down if new tasks are added
+        if (value?.items?.length > oldValue?.items?.length) {
+          console.debug('new tasks detected');
+          // this.onScrollDown();
+        }
+      },
+      deep: true
     }
   },
   async mounted() {
     await this.onGetService();
     await this.onGetApplication();
     await this.onScrollDown();
     await this.onGetTasks();
-    await this.onScrollDown();
+    // await this.onScrollDown();
     // @ts-ignore
     this.job = setInterval(() => {
       this.onGetTasks();
     }, 5000);
   },
   async unmounted() {
     clearInterval(this.job);
+    clearInterval(this.timer);
   },
   methods: {
+    async onReachTop() {
+      console.debug('reached top');
+      await this.onGetTasks({
+        createdAtMax: this.tasks?.items?.[0]?.created_at
+      });
+    },
     async onGetService() {
       console.debug('start onGetService');
       await this.$store.dispatch('headshots/getService');
@@ -125,14 +150,18 @@ export default defineComponent({
         }
       }, 500);
     },
-    async onGetTasks() {
+    async onGetTasks(payload?: { limit?: number; createdAtMin?: number; createdAtMax?: number }) {
       if (this.loading) {
         console.debug('loading');
         return;
       }
+      console.debug('start onGetTasks', payload);
+      const { limit = 5, createdAtMin, createdAtMax } = payload || {};
+      console.debug('limit', limit, 'createdAtMin', createdAtMin, 'createdAtMax', createdAtMax);
       await this.$store.dispatch('headshots/getTasks', {
-        limit: 30,
-        offset: 0
+        limit,
+        createdAtMin,
+        createdAtMax
       });
     },
     async onGeneratePicture() {
@@ -165,8 +194,10 @@ export default defineComponent({
           }
         })
         .finally(async () => {
-          await this.onGetTasks();
-          await this.onScrollDown();
+          setTimeout(async () => {
+            await this.onGetTasks();
+            await this.onScrollDown();
+          }, 1000);
         });
     }
   }