From 2cdfc65f1cae47e683309fe6b5067139fcf5e9a1 Mon Sep 17 00:00:00 2001
From: kolaente
Date: Tue, 17 Jan 2023 22:31:08 +0100
Subject: [PATCH] fix: use list card grid
---
.../project/partials/ProjectCardGrid.vue | 77 +++++++++++++++++++
.../project/partials/useProjectBackground.ts | 55 +++++++++++++
src/views/Home.vue | 4 +-
src/views/namespaces/ListNamespaces.vue | 6 +-
src/views/project/ProjectList.vue | 4 +-
5 files changed, 139 insertions(+), 7 deletions(-)
create mode 100644 src/components/project/partials/ProjectCardGrid.vue
create mode 100644 src/components/project/partials/useProjectBackground.ts
diff --git a/src/components/project/partials/ProjectCardGrid.vue b/src/components/project/partials/ProjectCardGrid.vue
new file mode 100644
index 000000000..51ac3cf83
--- /dev/null
+++ b/src/components/project/partials/ProjectCardGrid.vue
@@ -0,0 +1,77 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/project/partials/useProjectBackground.ts b/src/components/project/partials/useProjectBackground.ts
new file mode 100644
index 000000000..ce1539838
--- /dev/null
+++ b/src/components/project/partials/useProjectBackground.ts
@@ -0,0 +1,55 @@
+import {ref, watch, type Ref} from 'vue'
+import ProjectService from '@/services/project'
+import type {IProject} from '@/modelTypes/IProject'
+import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
+
+export function useProjectBackground(project: Ref) {
+ const background = ref(null)
+ const backgroundLoading = ref(false)
+ const blurHashUrl = ref('')
+
+ watch(
+ () => [project.value.id, project.value.backgroundBlurHash] as [IProject['id'], IProject['backgroundBlurHash']],
+ async ([projectId, blurHash], oldValue) => {
+ if (
+ project.value === null ||
+ !project.value.backgroundInformation ||
+ backgroundLoading.value
+ ) {
+ return
+ }
+
+ const [oldProjectId, oldBlurHash] = oldValue || []
+ if (
+ oldValue !== undefined &&
+ projectId === oldProjectId && blurHash === oldBlurHash
+ ) {
+ // project hasn't changed
+ return
+ }
+
+ backgroundLoading.value = true
+
+ try {
+ const blurHashPromise = getBlobFromBlurHash(blurHash).then((blurHash) => {
+ blurHashUrl.value = blurHash ? window.URL.createObjectURL(blurHash) : ''
+ })
+
+ const projectService = new ProjectService()
+ const backgroundPromise = projectService.background(project.value).then((result) => {
+ background.value = result
+ })
+ await Promise.all([blurHashPromise, backgroundPromise])
+ } finally {
+ backgroundLoading.value = false
+ }
+ },
+ {immediate: true},
+ )
+
+ return {
+ background,
+ blurHashUrl,
+ backgroundLoading,
+ }
+}
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 436525c8d..39ea2ae03 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -40,7 +40,7 @@
{{ $t('home.lastViewed') }}
-
+
-
@@ -70,7 +70,7 @@ import {useI18n} from 'vue-i18n'
import BaseButton from '@/components/base/BaseButton.vue'
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
-import ListCardGrid from '@/components/list/partials/ListCardGrid.vue'
+import ProjectCardGrid from '@/components/project/partials/ProjectCardGrid.vue'
import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
import {useTitle} from '@/composables/useTitle'
diff --git a/src/views/project/ProjectList.vue b/src/views/project/ProjectList.vue
index a9fd64758..0fbb6a9be 100644
--- a/src/views/project/ProjectList.vue
+++ b/src/views/project/ProjectList.vue
@@ -133,7 +133,7 @@ import Nothing from '@/components/misc/nothing.vue'
import Pagination from '@/components/misc/pagination.vue'
import {ALPHABETICAL_SORT} from '@/components/project/partials/filters.vue'
-import {useTaskProject} from '@/composables/useTaskProject'
+import {useTaskList} from '@/composables/useTaskList'
import {RIGHTS as Rights} from '@/constants/rights'
import {calculateItemPosition} from '@/helpers/calculateItemPosition'
import type {ITask} from '@/modelTypes/ITask'
@@ -187,7 +187,7 @@ const {
searchTerm,
params,
sortByParam,
-} = useTaskProject(toRef(props, 'projectId'), {position: 'asc' })
+} = useTaskList(toRef(props, 'projectId'), {position: 'asc' })
const isAlphabeticalSorting = computed(() => {