Skip to content

Commit 5df3af1

Browse files
dvcoldvcol
committed
feat(panels): adds watched & collection date/time to panels
1 parent 33a1edc commit 5df3af1

12 files changed

+258
-66
lines changed

‎src/components/common/list/ListItemPanel.vue

+3-4
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { type ListScrollItem, type ShowProgress } from '~/models/list-scroll.mod
1818
1919
import { useShowStore } from '~/stores/data/show.store';
2020
import { useLinksStore } from '~/stores/settings/links.store';
21+
import { shortTime } from '~/utils/date.utils';
2122
import { useI18n } from '~/utils/i18n.utils';
2223
2324
const i18n = useI18n('list', 'item', 'panel');
@@ -59,10 +60,8 @@ const content = computed(() => deCapitalise(item.value.content));
5960
6061
const date = computed(() => {
6162
if (hideDate.value) return;
62-
return item.value.date?.current?.toLocaleTimeString(undefined, {
63-
hour: '2-digit',
64-
minute: '2-digit',
65-
});
63+
if (!item.value?.date?.current) return;
64+
return shortTime(item.value.date.current);
6665
});
6766
6867
const tags = computed(

‎src/components/views/panel/MoviePanel.vue

+17-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,9 @@ const {
3939
getMovie,
4040
fetchMovie,
4141
getMovieWatched,
42+
getMovieWatchedDate,
4243
getMovieCollected,
44+
getMovieCollectedDate,
4345
fetchMovieWatched,
4446
fetchMovieCollected,
4547
changeMovieWatched,
@@ -58,11 +60,21 @@ const watched = computed(() => {
5860
return !!getMovieWatched(movieId.value)?.value;
5961
});
6062
63+
const watchedDate = computed(() => {
64+
if (!watched?.value) return;
65+
return getMovieWatchedDate(movieId.value)?.value;
66+
});
67+
6168
const collected = computed(() => {
6269
if (!movieId?.value) return;
6370
return !!getMovieCollected(movieId.value)?.value;
6471
});
6572
73+
const collectedDate = computed(() => {
74+
if (!collected?.value) return;
75+
return getMovieCollectedDate(movieId.value)?.value;
76+
});
77+
6678
onMounted(() => {
6779
watch(
6880
movieId,
@@ -209,7 +221,11 @@ const { openTab } = useLinksStore();
209221

210222
<PanelPoster :tmdb="movie?.ids.tmdb" mode="movie" />
211223

212-
<MoviePanelDetails :movie="movie" />
224+
<MoviePanelDetails
225+
:movie="movie"
226+
:watched-date="watchedDate"
227+
:collection-date="collectedDate"
228+
/>
213229

214230
<MoviePanelButtons
215231
:watched="watched"

‎src/components/views/panel/MoviePanelDetails.vue

+72-23
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,25 @@ import PanelAlias from '~/components/views/panel/PanelAlias.vue';
1010
1111
import PanelLinks from '~/components/views/panel/PanelLinks.vue';
1212
import { useLinksStore } from '~/stores/settings/links.store';
13+
import { shortTime } from '~/utils/date.utils';
1314
import { useI18n } from '~/utils/i18n.utils';
1415
1516
const props = defineProps({
1617
movie: {
1718
type: Object as PropType<TraktMovieExtended>,
1819
required: false,
1920
},
21+
watchedDate: {
22+
type: Date,
23+
required: false,
24+
},
25+
collectionDate: {
26+
type: Date,
27+
required: false,
28+
},
2029
});
2130
22-
const { movie } = toRefs(props);
31+
const { movie, watchedDate, collectionDate } = toRefs(props);
2332
2433
const i18n = useI18n('panel', 'detail');
2534
@@ -38,10 +47,17 @@ const releasedDate = computed(() => {
3847
const releasedTime = computed(() => {
3948
if (!released.value) return;
4049
if (typeof released.value === 'string') return released.value;
41-
return released.value.toLocaleTimeString(undefined, {
42-
hour: '2-digit',
43-
minute: '2-digit',
44-
});
50+
return shortTime(released.value);
51+
});
52+
53+
const watchedTime = computed(() => {
54+
if (!watchedDate?.value) return;
55+
return shortTime(watchedDate.value);
56+
});
57+
58+
const collectionTime = computed(() => {
59+
if (!collectionDate?.value) return;
60+
return shortTime(collectionDate.value);
4561
});
4662
4763
const runtime = computed(() => {
@@ -79,6 +95,30 @@ const movieTitle = computed(() => deCapitalise(movie?.value?.title));
7995

8096
<template>
8197
<NFlex size="large" class="container" vertical>
98+
<NFlex vertical size="large">
99+
<!-- Genres -->
100+
<TextField
101+
:label="i18n('genres')"
102+
:values="genres"
103+
:skeleton="{ width: '3rem' }"
104+
array
105+
/>
106+
107+
<!-- links -->
108+
<PanelLinks
109+
:ids="movie?.ids"
110+
mode="movie"
111+
:title="movieTitle"
112+
:alias="movieAlias"
113+
/>
114+
</NFlex>
115+
116+
<!-- Movie name alias -->
117+
<PanelAlias
118+
:id="movie?.ids?.trakt.toString()"
119+
scope="movie"
120+
:placeholder="movieTitle"
121+
/>
82122
<NFlex class="row" size="large">
83123
<!-- Release date -->
84124
<TextField
@@ -118,28 +158,37 @@ const movieTitle = computed(() => deCapitalise(movie?.value?.title));
118158
/>
119159
</NFlex>
120160

121-
<!-- Movie name alias -->
122-
<PanelAlias
123-
:id="movie?.ids?.trakt.toString()"
124-
scope="movie"
125-
:placeholder="movieTitle"
126-
/>
161+
<NFlex v-if="watchedDate" class="row" size="large">
162+
<!-- Watched Date -->
163+
<TextField
164+
:label="i18n('watched')"
165+
:value="watchedDate.toLocaleDateString()"
166+
:skeleton="{ width: '5.125rem' }"
167+
/>
127168

128-
<NFlex class="lists" vertical size="large">
129-
<!-- Genres -->
169+
<!-- watched time -->
130170
<TextField
131-
:label="i18n('genres')"
132-
:values="genres"
133-
:skeleton="{ width: '3rem' }"
134-
array
171+
v-if="watchedTime"
172+
:label="i18n('watched_time')"
173+
:value="watchedTime"
174+
:skeleton="{ width: '5.125rem' }"
135175
/>
176+
</NFlex>
136177

137-
<!-- links -->
138-
<PanelLinks
139-
:ids="movie?.ids"
140-
mode="movie"
141-
:title="movieTitle"
142-
:alias="movieAlias"
178+
<NFlex v-if="collectionDate" class="row" size="large">
179+
<!-- Collection Date -->
180+
<TextField
181+
:label="i18n('collected')"
182+
:value="collectionDate.toLocaleDateString()"
183+
:skeleton="{ width: '5.125rem' }"
184+
/>
185+
186+
<!-- Collection time -->
187+
<TextField
188+
v-if="collectionTime"
189+
:label="i18n('collected_time')"
190+
:value="collectionTime"
191+
:skeleton="{ width: '5.125rem' }"
143192
/>
144193
</NFlex>
145194
</NFlex>

‎src/components/views/panel/ShowPanel.vue

+2
Original file line numberDiff line numberDiff line change
@@ -336,6 +336,8 @@ const { openTab } = useLinksStore();
336336
:season="season"
337337
:episode="episode"
338338
:mode="panelType"
339+
:watched-progress="watchedProgressEntity"
340+
:collection-progress="collectionProgressEntity"
339341
/>
340342

341343
<ShowPanelButtons

‎src/components/views/panel/ShowPanelButtons.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,7 @@ onMounted(() => {
287287
align-items: center;
288288
justify-content: center;
289289
width: 100%;
290-
margin: 0.75rem 1rem 1.25rem;
290+
margin: 1rem 1rem 1.25rem;
291291
292292
.button-container {
293293
i {

‎src/components/views/panel/ShowPanelDetails.vue

+88-25
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,18 @@ import type {
99
TraktShowExtended,
1010
} from '@dvcol/trakt-http-client/models';
1111
12+
import type {
13+
EpisodeProgress,
14+
SeasonProgress,
15+
ShowProgress,
16+
} from '~/models/list-scroll.model';
17+
1218
import TextField from '~/components/common/typography/TextField.vue';
1319
import PanelAlias from '~/components/views/panel/PanelAlias.vue';
1420
1521
import PanelLinks from '~/components/views/panel/PanelLinks.vue';
1622
import { useLinksStore } from '~/stores/settings/links.store';
23+
import { shortTime } from '~/utils/date.utils';
1724
import { useI18n } from '~/utils/i18n.utils';
1825
1926
const props = defineProps({
@@ -34,9 +41,18 @@ const props = defineProps({
3441
required: false,
3542
default: 'episode',
3643
},
44+
watchedProgress: {
45+
type: Object as PropType<ShowProgress | SeasonProgress | EpisodeProgress>,
46+
required: false,
47+
},
48+
collectionProgress: {
49+
type: Object as PropType<ShowProgress | SeasonProgress | EpisodeProgress>,
50+
required: false,
51+
},
3752
});
3853
39-
const { mode, episode, season, show } = toRefs(props);
54+
const { mode, episode, season, show, watchedProgress, collectionProgress } =
55+
toRefs(props);
4056
4157
const i18n = useI18n('panel', 'detail');
4258
@@ -65,10 +81,7 @@ const airedDate = computed(() => {
6581
const airedTime = computed(() => {
6682
if (!aired.value) return;
6783
if (typeof aired.value === 'string') return '-';
68-
return aired.value.toLocaleTimeString(undefined, {
69-
hour: '2-digit',
70-
minute: '2-digit',
71-
});
84+
return shortTime(aired.value);
7285
});
7386
7487
const runtime = computed(() => {
@@ -82,6 +95,26 @@ const runtime = computed(() => {
8295
return `${show.value.runtime} min`;
8396
});
8497
98+
const watchedDate = computed(() => {
99+
if (!watchedProgress?.value?.date) return;
100+
return watchedProgress.value.date;
101+
});
102+
103+
const watchedTime = computed(() => {
104+
if (!watchedProgress?.value?.date) return;
105+
return shortTime(watchedProgress.value.date);
106+
});
107+
108+
const collectionDate = computed(() => {
109+
if (!collectionProgress?.value?.date) return;
110+
return collectionProgress.value.date;
111+
});
112+
113+
const collectionTime = computed(() => {
114+
if (!collectionProgress?.value?.date) return;
115+
return shortTime(collectionProgress.value.date);
116+
});
117+
85118
const genres = computed(() => {
86119
if (!show?.value) return;
87120
return show.value?.genres?.map(g => ({ label: capitalizeEachWord(g) }));
@@ -150,6 +183,29 @@ const title = computed(() =>
150183

151184
<template>
152185
<NFlex size="large" class="container" vertical>
186+
<NFlex vertical size="large">
187+
<!-- Genres -->
188+
<TextField
189+
:label="i18n('genres')"
190+
:values="genres"
191+
:skeleton="{ width: '3rem' }"
192+
array
193+
/>
194+
195+
<!-- links -->
196+
<PanelLinks
197+
:ids="ids"
198+
:mode="mode"
199+
:season="episode?.season ?? season?.number"
200+
:episode="episode?.number"
201+
:alias="showAlias"
202+
:title="title"
203+
/>
204+
</NFlex>
205+
206+
<!-- Show name alias -->
207+
<PanelAlias :id="showId" scope="show" :placeholder="showTitle" />
208+
153209
<NFlex class="row" size="large">
154210
<!-- Show Year -->
155211
<TextField :label="i18n('year')" :value="year" :skeleton="{ width: '2.25rem' }" />
@@ -216,26 +272,37 @@ const title = computed(() =>
216272
/>
217273
</NFlex>
218274

219-
<!-- Show name alias -->
220-
<PanelAlias :id="showId" scope="show" :placeholder="showTitle" />
275+
<NFlex v-if="watchedDate" class="row" size="large">
276+
<!-- Watched Date -->
277+
<TextField
278+
:label="i18n('watched')"
279+
:value="watchedDate.toLocaleDateString()"
280+
:skeleton="{ width: '5.125rem' }"
281+
/>
221282

222-
<NFlex class="lists" vertical size="large">
223-
<!-- Genres -->
283+
<!-- watched time -->
224284
<TextField
225-
:label="i18n('genres')"
226-
:values="genres"
227-
:skeleton="{ width: '3rem' }"
228-
array
285+
v-if="watchedTime"
286+
:label="i18n('watched_time')"
287+
:value="watchedTime"
288+
:skeleton="{ width: '5.125rem' }"
289+
/>
290+
</NFlex>
291+
292+
<NFlex v-if="collectionDate" class="row" size="large">
293+
<!-- Collection Date -->
294+
<TextField
295+
:label="i18n('collected')"
296+
:value="collectionDate.toLocaleDateString()"
297+
:skeleton="{ width: '5.125rem' }"
229298
/>
230299

231-
<!-- links -->
232-
<PanelLinks
233-
:ids="ids"
234-
:mode="mode"
235-
:season="episode?.season ?? season?.number"
236-
:episode="episode?.number"
237-
:alias="showAlias"
238-
:title="title"
300+
<!-- Collection time -->
301+
<TextField
302+
v-if="collectionTime"
303+
:label="i18n('collected_time')"
304+
:value="collectionTime"
305+
:skeleton="{ width: '5.125rem' }"
239306
/>
240307
</NFlex>
241308
</NFlex>
@@ -248,10 +315,6 @@ const title = computed(() =>
248315
width: 100%;
249316
}
250317
251-
.lists {
252-
margin: 0.25rem 0 0.5rem;
253-
}
254-
255318
@media (width < 700px) {
256319
.row {
257320
gap: 0.75rem 0.5rem !important;

0 commit comments

Comments
 (0)