Skip to content

Commit 1eaefff

Browse files
aminnausinaminnausin
committed
fix: #211 Editor information does not show
1 parent 22ee833 commit 1eaefff

6 files changed

Lines changed: 68 additions & 34 deletions

File tree

‎resources/js/components/headers/EditItemHeader.vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script setup lang="ts">
2+
import { useUserProfileById } from '@/service/users/useUsers';
3+
import { toFormattedDate } from '@/service/util';
4+
5+
const props = defineProps<{ editor_id: number; updated_at: string }>();
6+
7+
const { data: editor, isLoading } = useUserProfileById(props.editor_id);
8+
</script>
9+
<template>
10+
<div v-if="isLoading" class="suspense-rounded bg-surface-2 h-5 w-32"></div>
11+
<template v-else>
12+
Last edited by
13+
<a title="Editor profile" target="_blank" :href="`/profile/${editor?.name ?? editor_id}`" class="hover:text-primary dark:hover:text-primary-muted">
14+
@{{ editor?.name ?? editor_id }}
15+
</a>
16+
at
17+
{{ toFormattedDate(new Date(updated_at)) }}
18+
</template>
19+
</template>

‎resources/js/components/modals/EditFolderModal.vue‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
import type { SeriesResource } from '@/types/resources';
33
44
import { useContentStore } from '@/stores/ContentStore';
5-
import { toFormattedDate } from '@/service/util';
65
import { useQueryClient } from '@tanstack/vue-query';
76
import { useModalStore } from '@/stores/ModalStore';
87
import { BaseModal } from '@/components/cedar-ui/modal';
98
9+
import EditItemHeader from '@/components/headers/EditItemHeader.vue';
1010
import EditFolder from '@/components/forms/EditFolder.vue';
1111
1212
const { updateFolderData } = useContentStore();
@@ -42,13 +42,8 @@ const invalidateQueries = async () => {
4242
<template>
4343
<BaseModal>
4444
<template #title>Edit Folder</template>
45-
<template #description v-if="modal.props.cachedFolder && modal.props.cachedFolder.series?.editor_id && modal.props.cachedFolder.series.date_updated">
46-
Last edited by
47-
<a title="Editor profile" target="_blank" :href="`/profile/${modal.props.cachedFolder.series.editor_id}`" class="hover:text-primary dark:hover:text-primary-muted">
48-
@{{ modal.props.cachedFolder.series.editor_id }}
49-
</a>
50-
at
51-
{{ toFormattedDate(new Date(modal.props.cachedFolder.series.date_updated)) }}
45+
<template #description v-if="modal.props.cachedFolder.series.date_updated && modal.props.cachedFolder.series.editor_id">
46+
<EditItemHeader :updated_at="modal.props.cachedFolder.series.date_updated" :editor_id="modal.props.cachedFolder.series.editor_id" />
5247
</template>
5348
<EditFolder v-if="modal.props.cachedFolder" :folder="modal.props.cachedFolder" @handleFinish="handleSeriesUpdate" />
5449
</BaseModal>

‎resources/js/components/modals/EditMediaModal.vue‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { toFormattedDate } from '@/service/util';
66
import { useModalStore } from '@/stores/ModalStore';
77
import { BaseModal } from '@/components/cedar-ui/modal';
88
9+
import EditItemHeader from '@/components/headers/EditItemHeader.vue';
910
import EditVideo from '@/components/forms/EditVideo.vue';
1011
1112
const { updateVideoData } = useContentStore();
@@ -20,13 +21,8 @@ const handleVideoDetailsUpdate = (res: any) => {
2021
<template>
2122
<BaseModal>
2223
<template #title>{{ modal.props.title ?? 'Edit Track/Video' }}</template>
23-
<template #description v-if="modal.props.mediaResource && modal.props.mediaResource.series?.editor_id && modal.props.mediaResource.series.date_updated">
24-
Last edited by
25-
<a title="Editor profile" target="_blank" :href="`/profile/${modal.props.mediaResource.series.editor_id}`" class="hover:text-primary dark:hover:text-primary-muted">
26-
@{{ modal.props.mediaResource.series.editor_id }}
27-
</a>
28-
at
29-
{{ toFormattedDate(new Date(modal.props.mediaResource.series.date_updated)) }}
24+
<template #description v-if="modal.props.mediaResource.date_updated && modal.props.mediaResource.metadata?.editor_id">
25+
<EditItemHeader :updated_at="modal.props.mediaResource.date_updated" :editor_id="modal.props.mediaResource.metadata.editor_id" />
3026
</template>
3127
<EditVideo v-if="modal.props.mediaResource" :video="modal.props.mediaResource" @handleFinish="handleVideoDetailsUpdate" />
3228
</BaseModal>

‎resources/js/components/profile/ProfileHeader.vue‎

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,13 @@
11
<script setup lang="ts">
2-
import type { ProfileResource } from '@/types/resources';
3-
4-
import { getProfileByName } from '@/service/profileService';
5-
import { onMounted, ref } from 'vue';
2+
import { useUserProfile } from '@/service/users/useUsers';
63
import { toTimeSpan } from '@/service/util';
74
import { useRoute } from 'vue-router';
5+
import { computed } from 'vue';
86
9-
const router = useRoute();
10-
const userProfile = ref<ProfileResource>();
11-
12-
onMounted(async () => {
13-
const userIdentifier = router.params.username.toString();
14-
15-
try {
16-
const { data } = await getProfileByName(userIdentifier);
7+
const route = useRoute();
8+
const username = computed(() => route.params.username.toString());
179
18-
if (data) {
19-
userProfile.value = data;
20-
}
21-
} catch (error) {
22-
console.log(error);
23-
}
24-
});
10+
const { data: userProfile } = useUserProfile(username);
2511
</script>
2612
<template>
2713
<section

resources/js/service/profileService.ts renamed to resources/js/service/users/api.ts

File renamed without changes.

‎resources/js/service/users/useUsers.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import type { MaybeRefOrGetter } from 'vue';
2+
import type { ProfileResource } from '@/types/resources';
3+
4+
import { getProfileById, getProfileByName } from '@/service/users/api';
5+
import { computed, toValue } from 'vue';
6+
import { useQuery } from '@tanstack/vue-query';
7+
8+
export function useUserProfile(username: MaybeRefOrGetter<string>) {
9+
return useQuery<ProfileResource>({
10+
queryKey: ['profileByName', toValue(username)],
11+
queryFn: async () => {
12+
const { data } = await getProfileByName(toValue(username));
13+
if (!data) {
14+
throw new Error('Profile not found');
15+
}
16+
return data;
17+
},
18+
enabled: computed(() => !!toValue(username)),
19+
staleTime: 60 * 1000,
20+
retry: 1,
21+
});
22+
}
23+
24+
export function useUserProfileById(id: MaybeRefOrGetter<number>) {
25+
return useQuery<ProfileResource>({
26+
queryKey: ['ProfileById', () => toValue(id)],
27+
queryFn: async () => {
28+
const { data } = await getProfileById(toValue(id));
29+
if (!data) {
30+
throw new Error('Profile not found');
31+
}
32+
return data;
33+
},
34+
enabled: computed(() => !!toValue(id)),
35+
staleTime: 60 * 1000,
36+
retry: 1,
37+
});
38+
}

0 commit comments

Comments
 (0)