finish refactor of mj

ZhiShuYun · Dec 30, 2023 · 7bfb646 · 7bfb646
1 parent c03e2f2
commit 7bfb646
Show file tree

Hide file tree

Showing 14 changed files with 232 additions and 196 deletions.
diff --git a/src/components/midjourney/PresetPanel.vue b/src/components/midjourney/PresetPanel.vue
@@ -45,25 +45,14 @@ export default defineComponent({
     TranslationSelector,
     NijiSelector
   },
-  props: {
-    modelValue: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  emits: ['update:modelValue'],
   data() {
     return {
-      preset: this.modelValue
+      preset: this.$store.state.midjourney.preset
     };
   },
   watch: {
-    modelValue(val) {
-      this.preset = val;
-    },
     preset: {
       handler(val) {
-        this.$emit('update:modelValue', val);
         this.$store.dispatch('midjourney/setPreset', {
           ...val
         });

diff --git a/src/components/midjourney/tasks/TaskBriefList.vue b/src/components/midjourney/tasks/TaskBriefList.vue
@@ -23,15 +23,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import TaskPreview from './TaskPreview.vue';
-import { IApplication, IMidjourneyImagineTask, apiUsageOperator, midjourneyOperator } from '@/operators';
 import { ROUTE_MIDJOURNEY_HISTORY } from '@/router';
 import { ElButton, ElCard, ElSkeleton, ElSkeletonItem } from 'element-plus';
-
-interface IData {
-  tasks: IMidjourneyImagineTask[] | undefined;
-  mounted: boolean;
-  loading: boolean;
-}
+import { Status } from '@/store/common/models';
 
 export default defineComponent({
   name: 'TaskBriefList',
@@ -42,66 +36,45 @@ export default defineComponent({
     ElSkeleton,
     ElSkeletonItem
   },
-  props: {
-    applications: {
-      type: Object as () => IApplication[],
-      required: true
-    }
-  },
   emits: ['update:modelValue', 'custom'],
-  data(): IData {
+  data() {
     return {
-      tasks: undefined,
-      mounted: false,
-      loading: false
+      job: 0
     };
   },
-  watch: {
-    applications(val) {
-      if (val) {
-        this.getTasks();
-      }
+  computed: {
+    loading() {
+      return this.$store.state.midjourney.getImagineTasksStatus === Status.Request;
+    },
+    tasks() {
+      return this.$store.state.midjourney.imagineTasks;
+    },
+    applications() {
+      return this.$store.state.midjourney.applications;
     }
   },
-  mounted() {
-    this.mounted = true;
+  async mounted() {
+    await this.$store.dispatch('midjourney/setImagineTasks', undefined);
+    this.job = setInterval(() => {
+      this.getImagineTasks();
+    }, 5000);
+  },
+  unmounted() {
+    clearInterval(this.job);
   },
   methods: {
     async onLoadHistory() {
       this.$router.push({ name: ROUTE_MIDJOURNEY_HISTORY });
     },
-    async getTasks() {
+    async getImagineTasks() {
       // ensure that the previous request has been completed
       if (this.loading) {
         return;
       }
-      this.loading = true;
-      const {
-        data: { items: apiUsages }
-      } = await apiUsageOperator.getAll({
-        user_id: this.$store.state.user.id,
-        application_id: this.applications?.map((application) => application.id),
-        offset: 0,
-        limit: 5,
-        ordering: '-created_at'
+      await this.$store.dispatch('midjourney/getImagineTasks', {
+        limit: 12,
+        offset: 0
       });
-      let tasks = (await midjourneyOperator.tasks(apiUsages.map((apiUsage) => apiUsage?.metadata?.task_id as string)))
-        .data;
-      // filter out null tasks
-      tasks = tasks.filter((task) => task);
-      this.tasks = tasks.map((task) => {
-        const apiUsage = apiUsages.filter((apiUsage) => apiUsage?.metadata?.task_id === task?.id)[0];
-        return {
-          ...task,
-          created_at: apiUsage?.created_at
-        };
-      });
-      this.loading = false;
-      if (this.mounted) {
-        setTimeout(() => {
-          this.getTasks();
-        }, 5000);
-      }
     }
   }
 });

diff --git a/src/components/midjourney/tasks/TaskFullList.vue b/src/components/midjourney/tasks/TaskFullList.vue
@@ -26,18 +26,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import TaskPreview from './TaskPreview.vue';
-import { IApplication, IMidjourneyImagineTask, apiUsageOperator, midjourneyOperator } from '@/operators';
 import Pagination from '@/components/common/Pagination.vue';
 import { ElRow, ElCol, ElCard, ElSkeleton, ElSkeletonItem } from 'element-plus';
-
-interface IData {
-  tasks: IMidjourneyImagineTask[];
-  mounted: boolean;
-  total: number | undefined;
-  limit: number;
-  offset: number;
-  loading: boolean;
-}
+import { Status } from '@/store/common/models';
 
 export default defineComponent({
   name: 'TaskFullList',
@@ -50,42 +41,51 @@ export default defineComponent({
     ElSkeletonItem,
     ElCard
   },
-  props: {
-    applications: {
-      type: Object as () => IApplication[],
-      required: true
-    }
-  },
   emits: ['update:modelValue', 'custom'],
-  data(): IData {
+  data() {
     return {
-      tasks: [],
-      mounted: false,
-      limit: 12,
-      offset: 0,
-      total: undefined,
-      loading: false
+      job: 0
     };
   },
   computed: {
     page() {
       return parseInt(this.$route.query.page?.toString() || '1');
+    },
+    total() {
+      return this.$store.state.midjourney.imagineTasksTotal;
+    },
+    offset() {
+      return (this.page - 1) * this.limit;
+    },
+    limit() {
+      return 12;
+    },
+    loading() {
+      return this.$store.state.midjourney.getImagineTasksStatus === Status.Request;
+    },
+    tasks() {
+      return this.$store.state.midjourney.imagineTasks;
+    },
+    applications() {
+      return this.$store.state.midjourney.applications;
     }
   },
   watch: {
-    applications(val) {
-      if (val) {
-        this.getTasks();
-      }
-    },
     page: {
-      handler() {
-        this.getTasks();
+      async handler() {
+        await this.$store.dispatch('midjourney/setImagineTasks', undefined);
+        this.getImagineTasks();
       }
     }
   },
-  mounted() {
-    this.mounted = true;
+  async mounted() {
+    await this.$store.dispatch('midjourney/setImagineTasks', undefined);
+    this.job = setInterval(() => {
+      this.getImagineTasks();
+    }, 5000);
+  },
+  unmounted() {
+    clearInterval(this.job);
   },
   methods: {
     onPageChange(page: number) {
@@ -107,37 +107,15 @@ export default defineComponent({
         });
       }, 3000);
     },
-    async getTasks() {
+    async getImagineTasks() {
       // ensure that the previous request has been completed
       if (this.loading) {
         return;
       }
-      this.loading = true;
-      const {
-        data: { items: apiUsages, count }
-      } = await apiUsageOperator.getAll({
-        user_id: this.$store.state.user.id,
-        application_id: this.applications?.map((application) => application.id),
-        offset: (this.page - 1) * this.limit,
+      await this.$store.dispatch('midjourney/getImagineTasks', {
         limit: this.limit,
-        ordering: '-created_at'
-      });
-      this.total = count;
-      const tasks = (await midjourneyOperator.tasks(apiUsages.map((apiUsage) => apiUsage.metadata?.task_id as string)))
-        .data;
-      this.tasks = tasks.map((task) => {
-        const apiUsage = apiUsages.filter((apiUsage) => apiUsage.metadata?.task_id === task?.id)[0];
-        return {
-          ...task,
-          created_at: apiUsage.created_at
-        };
+        offset: this.offset
       });
-      this.loading = false;
-      if (this.mounted) {
-        setTimeout(() => {
-          this.getTasks();
-        }, 5000);
-      }
     }
   }
 });

diff --git a/src/layouts/Chat.vue b/src/layouts/Chat.vue
@@ -22,8 +22,16 @@ export default defineComponent({
     Navigator
   },
   async mounted() {
-    await this.$store.dispatch('chat/getApplications');
-    await this.$store.dispatch('chat/getConversations');
+    await this.onGetApplications();
+    await this.onGetConversations();
+  },
+  methods: {
+    async onGetApplications() {
+      await this.$store.dispatch('chat/getApplications');
+    },
+    async onGetConversations() {
+      await this.$store.dispatch('chat/getConversations');
+    }
   }
 });
 </script>

diff --git a/src/operators/instance.ts b/src/operators/instance.ts
@@ -15,7 +15,6 @@ const httpClient: AxiosInstance = axios.create({
 });
 
 httpClient.interceptors.request.use((config) => {
-  console.log('store', store.state);
   const accessToken = store.state.token?.access;
   if (!config.headers) {
     config.headers = {};

diff --git a/src/pages/chat/Conversation.vue b/src/pages/chat/Conversation.vue
@@ -38,14 +38,13 @@ import InputBox from '@/components/chat/InputBox.vue';
 import ModelSelector from '@/components/chat/ModelSelector.vue';
 import { ERROR_CODE_CANCELED, ERROR_CODE_UNKNOWN } from '@/constants/errorCode';
 import ApiStatus from '@/components/common/ApiStatus.vue';
-import { ROUTE_CHAT_CONVERSATION, ROUTE_CHAT_CONVERSATION_NEW } from '@/router';
+import { ROUTE_CHAT_CONVERSATION } from '@/router';
 import { Status } from '@/store/common/models';
 import { v4 as uuid } from 'uuid';
 
 export interface IData {
   model: IChatModel;
   question: '';
-  // messages: IChatMessage[];
 }
 
 export default defineComponent({