refactor(ProjectOpenModal): align with community design (#1009)

Fixes #972

Signed-off-by: Aofei Sheng <[email protected]>

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>