From 06942f1bf21d4cd7c7129bc94119260277ac5442 Mon Sep 17 00:00:00 2001
From: Aofei Sheng <aofei@aofeisheng.com>
Date: Tue, 22 Oct 2024 14:38:25 +0800
Subject: [PATCH] refactor(ProjectOpenModal): align with community design
 (#1009)

Fixes #972

Signed-off-by: Aofei Sheng <aofei@aofeisheng.com>
---
 .../src/components/project/MyProjectList.vue  | 142 ------------------
 .../components/project/ProjectOpenModal.vue   |  78 +++++++---
 2 files changed, 60 insertions(+), 160 deletions(-)
 delete mode 100644 spx-gui/src/components/project/MyProjectList.vue

diff --git a/spx-gui/src/components/project/MyProjectList.vue b/spx-gui/src/components/project/MyProjectList.vue
deleted file mode 100644
index f37b1b7e..00000000
--- a/spx-gui/src/components/project/MyProjectList.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<template>
-  <div ref="container" class="project-list">
-    <UIError v-if="isError && error">
-      {{ $t((error as ActionException).userMessage) }}
-    </UIError>
-    <UIEmpty v-if="data?.pages.length === 0 || data?.pages[0].data.length === 0" size="large" />
-    <ul v-if="data" class="list">
-      <template v-for="page in data?.pages">
-        <ProjectItem
-          v-for="project in page.data"
-          :key="project.id"
-          :context="edit ? 'edit' : 'mine'"
-          :project="project"
-          @selected="emit('selected')"
-          @removed="handleProjectRemoved(project)"
-        />
-      </template>
-      <div ref="intersectTrigger" class="intersect-trigger" />
-    </ul>
-    <UILoading v-if="isPending || isFetchingNextPage" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { nextTick, ref, watchEffect } from 'vue'
-import { useInfiniteQuery, useQueryClient } from '@tanstack/vue-query'
-import { ActionException, useAction } from '@/utils/exception'
-import type { ByPage } from '@/apis/common'
-import { listProject, type ProjectData } from '@/apis/project'
-import { UIEmpty, UIError, UILoading } from '@/components/ui'
-import ProjectItem from './ProjectItem.vue'
-
-defineProps<{
-  /** If the list is for editing project */
-  edit?: boolean
-}>()
-
-const emit = defineEmits<{
-  selected: []
-}>()
-
-const intersectTrigger = ref<HTMLDivElement | null>(null)
-const container = ref<HTMLDivElement | null>(null)
-
-const listProjectAction = useAction(listProject, {
-  en: 'Failed to list projects',
-  zh: '获取项目列表失败'
-})
-
-const pageSize = 30
-const { data, error, isError, isPending, isFetchingNextPage, fetchNextPage, hasNextPage } =
-  useInfiniteQuery({
-    queryKey: ['projects'],
-    initialPageParam: 1,
-
-    queryFn: async ({ pageParam }: { pageParam: number }) => {
-      return await listProjectAction.fn({ pageSize, pageIndex: pageParam })
-    },
-    getNextPageParam: (lastPage, pages, lastPageParam) => {
-      return pages.reduce((acc, page) => acc + page.data.length, 0) < lastPage.total
-        ? lastPageParam + 1
-        : undefined
-    }
-  })
-
-const queryClient = useQueryClient()
-
-watchEffect((onCleanup) => {
-  if (!intersectTrigger.value) {
-    return
-  }
-
-  const observer = new IntersectionObserver(
-    async (entries) => {
-      if (entries[0].isIntersecting && hasNextPage.value) {
-        await fetchNextPage({
-          // Will throw if another fetch is already in progress
-          throwOnError: true
-        })
-        await nextTick()
-        // Trigger the observer again to check if the content is enough to fill the viewport
-        observer.unobserve(intersectTrigger.value!)
-        observer.observe(intersectTrigger.value!)
-      }
-    },
-    {
-      root: container.value
-    }
-  )
-
-  observer.observe(intersectTrigger.value)
-
-  onCleanup(() => {
-    observer.disconnect()
-  })
-})
-
-const handleProjectRemoved = (project: ProjectData) => {
-  if (!data.value) return
-  const newPages: ByPage<ProjectData>[] = data.value.pages.map((page) => ({
-    ...page,
-    data: page.data.filter((p) => p.id !== project.id)
-  }))
-  queryClient.setQueryData(['projects'], {
-    pages: newPages,
-    pageParams: data?.value?.pageParams
-  })
-  queryClient.invalidateQueries({
-    queryKey: ['projects']
-  })
-}
-</script>
-
-<style lang="scss" scoped>
-// TODO: styles details here
-.project-list {
-  margin-right: -20px; // negative right margin to allow optional scrollbar
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20px;
-  overflow-y: auto;
-}
-.list {
-  width: 100%;
-  flex: 1 1 0;
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 12px;
-  padding-bottom: 20px;
-  position: relative;
-}
-.intersect-trigger {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 300px;
-  pointer-events: none;
-}
-</style>
diff --git a/spx-gui/src/components/project/ProjectOpenModal.vue b/spx-gui/src/components/project/ProjectOpenModal.vue
index c6d04e50..6cb49cab 100644
--- a/spx-gui/src/components/project/ProjectOpenModal.vue
+++ b/spx-gui/src/components/project/ProjectOpenModal.vue
@@ -1,17 +1,10 @@
-<template>
-  <UIFormModal
-    :title="$t({ en: 'Open project', zh: '打开项目' })"
-    :style="{ width: '1020px' }"
-    :visible="props.visible"
-    @update:visible="handleCancel"
-  >
-    <ProjectList :style="{ maxHeight: '570px' }" edit @selected="$emit('resolved')" />
-  </UIFormModal>
-</template>
-
-<script lang="ts" setup>
-import { UIFormModal } from '@/components/ui'
-import ProjectList from './MyProjectList.vue'
+<script setup lang="ts">
+import { UIFormModal, UIPagination } from '@/components/ui'
+import ListResultWrapper from '@/components/common/ListResultWrapper.vue'
+import ProjectItem from '@/components/project/ProjectItem.vue'
+import { computed, shallowRef } from 'vue'
+import { useQuery } from '@/utils/exception'
+import { listProject } from '@/apis/project'
 
 const props = defineProps<{
   visible: boolean
@@ -22,9 +15,58 @@ const emit = defineEmits<{
   resolved: []
 }>()
 
-function handleCancel() {
-  emit('cancelled')
-}
+const page = shallowRef(1)
+const pageSize = 8
+const pageTotal = computed(() => Math.ceil((queryRet.data.value?.total ?? 0) / pageSize))
+
+const queryRet = useQuery(
+  () =>
+    listProject({
+      orderBy: 'updatedAt',
+      sortOrder: 'desc',
+      pageIndex: page.value,
+      pageSize: pageSize
+    }),
+  {
+    en: 'Failed to load projects',
+    zh: '加载失败'
+  }
+)
 </script>
 
-<style lang="scss" scoped></style>
+<template>
+  <UIFormModal
+    :title="$t({ en: 'Open project', zh: '打开项目' })"
+    :style="{ width: '1024px' }"
+    :visible="props.visible"
+    @update:visible="emit('cancelled')"
+  >
+    <ListResultWrapper v-slot="slotProps" :query-ret="queryRet" :height="546">
+      <ul class="project-list">
+        <ProjectItem
+          v-for="project in slotProps.data.data"
+          :key="project.id"
+          :project="project"
+          context="edit"
+          @selected="emit('resolved')"
+        />
+      </ul>
+    </ListResultWrapper>
+    <UIPagination
+      v-show="pageTotal > 1"
+      v-model:current="page"
+      :total="pageTotal"
+      style="justify-content: center"
+    />
+  </UIFormModal>
+</template>
+
+<style scoped lang="scss">
+.project-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: var(--ui-gap-middle);
+  margin-bottom: 20px;
+}
+</style>