maciejpedzich/spotifyplaylistarchive.com
1
0
Fork 0
mirror of https://github.com/maciejpedzich/spotifyplaylistarchive.com.git synced 2024-09-19 18:16:19 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Toggle scroll and pagination depending on mode

Browse Source
This commit is contained in:
Maciej Pędzich 2022-07-20 21:40:54 +02:00
parent ba6aa44ee2
commit 64b5d7c7a4
1 changed files with 46 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
components/snapshot/TrackEntries.vue
View File

@ -37,19 +37,34 @@ const formatRetentionText = (retention: number) => {
return formattedText; return formattedText;
}; };
const datatablePropsToEnable = computed(() =>
props.page === 'snapshot'
? { scrollable: true, scrollHeight: '500px' }
: {
paginator: true,
paginatorTemplate:
'CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
currentPageReportTemplate:
'Showing {first} to {last} of {totalRecords}',
rows: 10,
rowsPerPageOptions: [10, 20, 50, 100]
}
);
const firstCellMarginTop = computed(() =>
props.page === 'stats' ? '3.5rem' : '0'
);
</script> </script>
<template> <template>
<DataTable <DataTable
class="mx-5 mt-3 mb-5" class="h-full mt-3 mb-5"
:class="[props.page === 'snapshot' ? 'w-12' : 'w-10']"
:loading="props.loading" :loading="props.loading"
:value="props.tracks" :value="props.tracks"
:rows="10" show-gridlines
:rows-per-page-options="[10, 20, 50, 100]" v-bind="datatablePropsToEnable"
paginator
paginator-template="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
current-page-report-template="Showing {first} to {last} of {totalRecords}"
responsive-layout="stack"
> >
<Column field="name" header="Title"> <Column field="name" header="Title">
<template #body="{ data: track }"> <template #body="{ data: track }">
@ -60,14 +75,16 @@ const formatRetentionText = (retention: number) => {
</Column> </Column>
<Column field="artists" header="Artist(s)"> <Column field="artists" header="Artist(s)">
<template #body="{ data: track }"> <template #body="{ data: track }">
<span v-for="(artist, index) of track.artists" :key="artist.url"> <div>
<NuxtLink :to="artist.url" target="_blank"> <span v-for="(artist, index) of track.artists" :key="artist.url">
{{ artist.name }} <NuxtLink :to="artist.url" target="_blank">
</NuxtLink> {{ artist.name }}
<span v-if="index !== track.artists.length - 1" class="md:mr-1" </NuxtLink>
>,</span <span v-if="index !== track.artists.length - 1" class="md:mr-1"
> >,</span
</span> >
</span>
</div>
</template> </template>
</Column> </Column>
<Column field="album.name" header="Album"> <Column field="album.name" header="Album">
@ -78,12 +95,12 @@ const formatRetentionText = (retention: number) => {
</template> </template>
</Column> </Column>
<template v-if="props.page === 'snapshot'"> <template v-if="props.page === 'snapshot'">
<Column field="added_at" header="Date added" sortable> <Column field="added_at" header="Date added">
<template #body="{ data: track }"> <template #body="{ data: track }">
{{ formatDate(track.added_at) }} {{ formatDate(track.added_at) }}
</template> </template>
</Column> </Column>
<Column field="duration_ms" header="Duration" sortable> <Column field="duration_ms" header="Duration">
<template #body="{ data: track }"> <template #body="{ data: track }">
{{ formatDuration(track.duration_ms) }} {{ formatDuration(track.duration_ms) }}
</template> </template>
@ -108,3 +125,15 @@ const formatRetentionText = (retention: number) => {
</template> </template>
</DataTable> </DataTable>
</template> </template>
<style scoped>
:deep(tbody.p-datatable-tbody > tr:first-of-type > td) {
margin-top: 0;
}
@media only screen and (min-width: 768px) {
:deep(tbody.p-datatable-tbody > tr:first-of-type > td) {
margin-top: v-bind(firstCellMarginTop);
}
}
</style>