Skip to content

Commit 001b2cf

Browse files
dvcoldvcol
committed
feat(history): split components to make them reusable
1 parent e6e8c41 commit 001b2cf

File tree

6 files changed

+144
-76
lines changed

6 files changed

+144
-76
lines changed

‎src/components/AppComponent.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const { isAuthenticated } = useAuthSettingsStoreRefs();
4848
@include transition.scale;
4949
5050
header {
51-
position: fixed;
51+
position: absolute;
5252
top: 0;
5353
z-index: layers.$layer-ui;
5454
display: flex;

‎src/components/views/history/HistoryComponent.vue

+11-71
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,14 @@
11
<script lang="ts" setup>
2-
import {
3-
NEmpty,
4-
NFlex,
5-
NSkeleton,
6-
NTimeline,
7-
NTimelineItem,
8-
NVirtualList,
9-
} from 'naive-ui';
2+
import { NTimeline, NVirtualList } from 'naive-ui';
103
114
import { onActivated, onMounted, ref, Transition, watch } from 'vue';
125
136
import type { VirtualListInst } from 'naive-ui';
14-
157
import type { TraktHistory } from '~/models/trakt/trakt-history.model';
168
9+
import HistoryEmpty from '~/components/views/history/HistoryEmpty.vue';
10+
import HistoryItem from '~/components/views/history/HistoryItem.vue';
11+
1712
import { useHistoryStore, useHistoryStoreRefs } from '~/stores/data/history.store';
1813
import { useUserSettingsStoreRefs } from '~/stores/settings/user.store';
1914
@@ -95,54 +90,15 @@ const getTitle = (media: TraktHistory) => {
9590
@vue:updated="onUpdated"
9691
>
9792
<template #default="{ item, index }">
98-
<template v-if="item.id >= 0">
99-
<NTimelineItem
100-
:key="item.id"
101-
class="timeline-item"
102-
:data-key="item.id"
103-
:data-index="index"
104-
type="success"
105-
:title="getTitle(item)"
106-
:content="item.show?.title"
107-
:time="new Date(item.watched_at).toLocaleString()"
108-
/>
109-
</template>
110-
<template v-else>
111-
<NTimelineItem
112-
:key="item.id"
113-
class="timeline-item"
114-
:data-key="item.id"
115-
:data-index="index"
116-
line-type="dashed"
117-
>
118-
<template #default>
119-
<NFlex vertical>
120-
<NSkeleton text style="width: 70%" />
121-
<NSkeleton text style="width: 60%" />
122-
<NSkeleton text style="width: 20%" />
123-
</NFlex>
124-
</template>
125-
</NTimelineItem>
126-
</template>
93+
<HistoryItem :item="item" :index="index" />
12794
</template>
12895
</NVirtualList>
129-
<NEmpty v-else size="large" :show-description="false">
130-
<template #extra>
131-
<span class="empty">No data found.</span>
132-
<div v-if="pagination?.page && pagination?.pageCount">
133-
<div class="empty">
134-
Pages searched <span class="page"> {{ pagination?.page }} </span> out of
135-
<span class="page"> {{ pagination?.pageCount }} </span>.
136-
</div>
137-
<template v-if="pagination.page < pagination.pageCount">
138-
<div class="empty">Increase the page size to search more.</div>
139-
<div class="empty">
140-
Current page size is <span class="page"> {{ pageSize }} </span>.
141-
</div>
142-
</template>
143-
</div>
144-
</template>
145-
</NEmpty>
96+
<HistoryEmpty
97+
v-else
98+
:page="pagination?.page"
99+
:page-count="pagination?.pageCount"
100+
:page-size="pageSize"
101+
/>
146102
</Transition>
147103
</template>
148104

@@ -155,21 +111,5 @@ const getTitle = (media: TraktHistory) => {
155111
height: calc(100dvh - 8px);
156112
margin-top: -#{layout.$header-navbar-height};
157113
margin-bottom: 8px;
158-
159-
.timeline-item {
160-
font-variant-numeric: tabular-nums;
161-
margin: 0 1rem;
162-
}
163-
}
164-
165-
.empty {
166-
margin-top: 0.5rem;
167-
color: var(--n-text-color);
168-
transition: color 0.3s var(--n-bezier);
169-
170-
.page {
171-
color: var(--primary-color-disabled);
172-
font-weight: bold;
173-
}
174114
}
175115
</style>

‎src/components/views/history/HistoryEmpty.vue

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<script setup lang="ts">
2+
import { NEmpty } from 'naive-ui';
3+
4+
defineProps({
5+
page: {
6+
type: Number,
7+
required: false,
8+
default: 0,
9+
},
10+
pageCount: {
11+
type: Number,
12+
required: false,
13+
default: 0,
14+
},
15+
pageSize: {
16+
type: Number,
17+
required: false,
18+
default: 0,
19+
},
20+
});
21+
</script>
22+
23+
<template>
24+
<NEmpty size="large" :show-description="false">
25+
<template #extra>
26+
<span class="empty">No data found.</span>
27+
<div v-if="page && pageCount">
28+
<div class="empty">
29+
Pages searched <span class="page"> {{ page }} </span> out of
30+
<span class="page"> {{ pageCount }} </span>.
31+
</div>
32+
<template v-if="page < pageCount">
33+
<div class="empty">Increase the page size to search more.</div>
34+
<div class="empty">
35+
Current page size is <span class="page"> {{ pageSize }} </span>.
36+
</div>
37+
</template>
38+
</div>
39+
</template>
40+
</NEmpty>
41+
</template>
42+
43+
<style scoped lang="scss">
44+
.empty {
45+
margin-top: 0.5rem;
46+
color: var(--n-text-color);
47+
transition: color 0.3s var(--n-bezier);
48+
49+
.page {
50+
color: var(--primary-color-disabled);
51+
font-weight: bold;
52+
}
53+
}
54+
</style>

‎src/components/views/history/HistoryItem.vue

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<script setup lang="ts">
2+
import { NFlex, NSkeleton, NTimelineItem } from 'naive-ui';
3+
4+
import type { PropType } from 'vue';
5+
import type { TraktHistory } from '~/models/trakt/trakt-history.model';
6+
7+
defineProps({
8+
item: {
9+
type: Object as PropType<TraktHistory>,
10+
required: true,
11+
},
12+
index: {
13+
type: Number,
14+
required: true,
15+
},
16+
});
17+
18+
const getTitle = (media: TraktHistory) => {
19+
if ('movie' in media) return media.movie.title;
20+
const number = media.episode?.number?.toString().padStart(2, '0');
21+
return `${media.episode?.season}x${number} - ${media?.episode?.title}`;
22+
};
23+
24+
const getContent = (media: TraktHistory) => {
25+
if ('movie' in media) return media.movie.title;
26+
return media.show?.title;
27+
};
28+
29+
const getDate = (media: TraktHistory) =>
30+
media.watched_at ? new Date(media.watched_at).toLocaleString() : media.watched_at;
31+
</script>
32+
33+
<template>
34+
<template v-if="item.id >= 0">
35+
<NTimelineItem
36+
v-if="item.id >= 0"
37+
:key="item.id"
38+
class="timeline-item"
39+
:data-key="item.id"
40+
:data-index="index"
41+
type="success"
42+
:title="getTitle(item)"
43+
:content="getContent(item)"
44+
:time="getDate(item)"
45+
/>
46+
</template>
47+
<template v-else>
48+
<NTimelineItem
49+
:key="item.id"
50+
class="timeline-item"
51+
:data-key="item.id"
52+
:data-index="index"
53+
line-type="dashed"
54+
>
55+
<template #default>
56+
<NFlex vertical>
57+
<NSkeleton text style="width: 70%" />
58+
<NSkeleton text style="width: 60%" />
59+
<NSkeleton text style="width: 20%" />
60+
</NFlex>
61+
</template>
62+
</NTimelineItem>
63+
</template>
64+
</template>
65+
66+
<style lang="scss" scoped>
67+
.timeline-item {
68+
font-variant-numeric: tabular-nums;
69+
margin: 0 1rem;
70+
}
71+
</style>

‎src/stores/data/history.store.ts

+7-3
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,11 @@ export const useHistoryStore = defineStore('data.history', () => {
2020
pagination.value.page !== pagination.value.pageCount &&
2121
pagination.value.page < threshold.value,
2222
);
23-
const loadingPlaceholder = computed(() => Array(pageSize.value).fill({ id: -1 }));
23+
const loadingPlaceholder = computed<TraktHistory[]>(() =>
24+
Array(pageSize.value)
25+
.fill({ id: -1 })
26+
.map((_, i) => ({ id: -1 * (i + 1) }) as TraktHistory),
27+
);
2428

2529
const searchHistory = ref('');
2630
const filteredHistory = computed<TraktHistory[]>(() => {
@@ -53,8 +57,8 @@ export const useHistoryStore = defineStore('data.history', () => {
5357
console.info('Fetching History', { page, limit, start, end });
5458
loading.value = true;
5559
const timeout = setTimeout(() => {
56-
if (page) history.value.push(...loadingPlaceholder.value);
57-
else history.value = loadingPlaceholder.value;
60+
if (page) history.value = [...history.value, ...loadingPlaceholder.value];
61+
else history.value = [...loadingPlaceholder.value];
5862
}, 100);
5963
try {
6064
const response = await TraktService.traktClient.sync.history.get.cached({

‎src/stores/router.store.ts

-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ export const useRouterStore = defineStore('router', () => {
3333
const restoreLastRoute = async () => {
3434
const _route = await storage.local.get<RouteLocationNormalized>('app.state.last-route');
3535
if (_route) lastRoute.value = _route;
36-
console.info('router-store', 'restored last route', JSON.parse(JSON.stringify(lastRoute.value)));
3736
return _route;
3837
};
3938

0 commit comments

Comments
 (0)