From 5d126c2cbaa34ad73ced3f2c57e1d4e9c06b2219 Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Thu, 13 Jun 2024 16:46:13 +0200
Subject: [PATCH] feat(podcast): sort podcasts

---
 app/Http/Resources/PodcastResource.php        |  1 +
 app/Models/PodcastUserPivot.php               |  1 +
 app/Repositories/PodcastRepository.php        |  2 +-
 app/Repositories/SongRepository.php           |  2 +-
 .../js/__tests__/factory/podcastFactory.ts    |  1 +
 .../js/components/podcast/PodcastItem.vue     | 16 +++-
 .../components/podcast/PodcastListSorter.vue  | 77 +++++++++++++++++++
 .../components/screens/PodcastListScreen.vue  | 24 ++++--
 .../assets/js/components/song/SongList.vue    | 18 ++---
 .../js/components/song/SongListSorter.vue     | 11 ++-
 resources/assets/js/types.d.ts                |  3 +
 11 files changed, 132 insertions(+), 24 deletions(-)
 create mode 100644 resources/assets/js/components/podcast/PodcastListSorter.vue

diff --git a/app/Http/Resources/PodcastResource.php b/app/Http/Resources/PodcastResource.php
index 2bf90463..b3b11e2d 100644
--- a/app/Http/Resources/PodcastResource.php
+++ b/app/Http/Resources/PodcastResource.php
@@ -52,6 +52,7 @@ class PodcastResource extends JsonResource
             /** @var PodcastUserPivot $pivot */
             $pivot = $this->podcast->subscribers->sole('id', $user->id)->pivot;
             $data['subscribed_at'] = $pivot->created_at;
+            $data['last_played_at'] = $pivot->updated_at;
             $data['state'] = $pivot->state->toArray();
         }
 
diff --git a/app/Models/PodcastUserPivot.php b/app/Models/PodcastUserPivot.php
index d31e032c..de79d379 100644
--- a/app/Models/PodcastUserPivot.php
+++ b/app/Models/PodcastUserPivot.php
@@ -9,6 +9,7 @@ use Illuminate\Database\Eloquent\Relations\Pivot;
 
 /**
  * @property Carbon $created_at
+ * @property Carbon $updated_at
  * @property PodcastState $state
  */
 class PodcastUserPivot extends Pivot
diff --git a/app/Repositories/PodcastRepository.php b/app/Repositories/PodcastRepository.php
index 2b9eb9b5..857ad60f 100644
--- a/app/Repositories/PodcastRepository.php
+++ b/app/Repositories/PodcastRepository.php
@@ -17,7 +17,7 @@ class PodcastRepository extends Repository
     /** @return Collection<Podcast> */
     public function getAllByUser(User $user): Collection
     {
-        return $user->podcasts;
+        return $user->podcasts()->orderByPivot('updated_at', 'desc')->get();
     }
 
     /** @return Collection<Podcast> */
diff --git a/app/Repositories/SongRepository.php b/app/Repositories/SongRepository.php
index 915a95d2..9c0dca8a 100644
--- a/app/Repositories/SongRepository.php
+++ b/app/Repositories/SongRepository.php
@@ -37,7 +37,7 @@ class SongRepository extends Repository
         return Song::query(type: PlayableType::SONG, user: $scopedUser ?? $this->auth->user())
             ->accessible()
             ->withMeta()
-            ->latest('songs.created_at')
+            ->latest()
             ->limit($count)
             ->get();
     }
diff --git a/resources/assets/js/__tests__/factory/podcastFactory.ts b/resources/assets/js/__tests__/factory/podcastFactory.ts
index eb1f3ec1..5a017c63 100644
--- a/resources/assets/js/__tests__/factory/podcastFactory.ts
+++ b/resources/assets/js/__tests__/factory/podcastFactory.ts
@@ -11,6 +11,7 @@ export default (faker: Faker): Podcast => {
     description: faker.lorem.paragraph(),
     author: faker.name.findName(),
     subscribed_at: faker.date.past().toISOString(),
+    created_at: faker.date.past().toISOString(),
     state: {
       current_episode: null,
       progresses: {}
diff --git a/resources/assets/js/components/podcast/PodcastItem.vue b/resources/assets/js/components/podcast/PodcastItem.vue
index 1e9e2764..9696996a 100644
--- a/resources/assets/js/components/podcast/PodcastItem.vue
+++ b/resources/assets/js/components/podcast/PodcastItem.vue
@@ -10,7 +10,15 @@
     <main class="flex-1">
       <header>
         <h3 class="text-3xl font-bold">{{ podcast.title }}</h3>
-        <p class="mt-2">{{ podcast.author }}</p>
+        <p class="mt-2">
+          {{ podcast.author }}
+          <template v-if="lastPlayedAt"> •
+            <span class="opacity-70">
+              Last played
+              <time :datetime="podcast.last_played_at" :title="podcast.last_played_at">{{ lastPlayedAt }}</time>
+            </span>
+          </template>
+        </p>
       </header>
       <div class="description text-k-text-secondary mt-3 line-clamp-3" v-html="description" v-koel-new-tab />
     </main>
@@ -20,10 +28,16 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import DOMPurify from 'dompurify'
+import { formatTimeAgo } from '@vueuse/core'
 
 const { podcast } = defineProps<{ podcast: Podcast }>()
 
 const description = computed(() => DOMPurify.sanitize(podcast.description))
+
+const lastPlayedAt = computed(() => podcast.state.current_episode
+  ? formatTimeAgo(new Date(podcast.last_played_at))
+  : null
+)
 </script>
 
 <style scoped lang="postcss">
diff --git a/resources/assets/js/components/podcast/PodcastListSorter.vue b/resources/assets/js/components/podcast/PodcastListSorter.vue
new file mode 100644
index 00000000..5a3b0d51
--- /dev/null
+++ b/resources/assets/js/components/podcast/PodcastListSorter.vue
@@ -0,0 +1,77 @@
+<template>
+  <article>
+    <button
+      ref="button"
+      class="border px-3 rounded-md h-full border-white/10 w-full focus:text-k-highlight text-k-text-secondary active:text-white focus:text-white"
+      title="Sort"
+      @click.stop="trigger"
+    >
+      <span class="mr-2">{{ currentFieldLabel }}</span>
+      <Icon :icon="order === 'asc' ? faArrowUp : faArrowDown" />
+    </button>
+    <OnClickOutside @trigger="hide">
+      <menu ref="menu" class="context-menu normal-case tracking-normal">
+        <li
+          v-for="item in items"
+          :key="item.label"
+          :class="currentlySortedBy(item.field) && 'active'"
+          class="cursor-pointer flex justify-between"
+          @click="sort(item.field)"
+        >
+          <span>{{ item.label }}</span>
+          <span v-if="currentlySortedBy(item.field)" class="opacity-80">
+            <Icon class="" v-if="order === 'asc'" :icon="faArrowUp" />
+            <Icon v-else :icon="faArrowDown" />
+          </span>
+        </li>
+      </menu>
+    </OnClickOutside>
+  </article>
+</template>
+
+<script setup lang="ts">
+import { faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons'
+import { OnClickOutside } from '@vueuse/components'
+import { useFloatingUi } from '@/composables'
+import { computed, onBeforeUnmount, onMounted, ref, toRefs } from 'vue'
+
+const props = withDefaults(defineProps<{
+  field?: PodcastListSortField
+  order?: SortOrder
+}>(), {
+  field: 'last_played_at',
+  order: 'asc',
+})
+
+const { field: activeField, order } = toRefs(props)
+
+const emit = defineEmits<{ (e: 'sort', field: MaybeArray<PodcastListSortField>): void }>()
+
+const button = ref<HTMLButtonElement>()
+const menu = ref<HTMLDivElement>()
+
+const { setup, teardown, trigger, hide } = useFloatingUi(button, menu, {
+  placement: 'bottom-end',
+  useArrow: false,
+  autoTrigger: false
+})
+
+const items: { label: string, field: PodcastListSortField }[] = [
+  { label: 'Last played', field: 'last_played_at' },
+  { label: 'Subscribed', field: 'subscribed_at' },
+  { label: 'Title', field: 'title' },
+  { label: 'Author', field: 'author' }
+]
+
+const currentFieldLabel = computed(() => items.find(item => item.field === activeField.value).label)
+
+const sort = (field: MaybeArray<PodcastListSortField>) => {
+  emit('sort', field)
+  hide()
+}
+
+const currentlySortedBy = (field: PodcastListSortField) => field === activeField.value
+
+onMounted(() => menu.value && setup())
+onBeforeUnmount(() => teardown())
+</script>
diff --git a/resources/assets/js/components/screens/PodcastListScreen.vue b/resources/assets/js/components/screens/PodcastListScreen.vue
index 2d1eaae3..bd4ec85d 100644
--- a/resources/assets/js/components/screens/PodcastListScreen.vue
+++ b/resources/assets/js/components/screens/PodcastListScreen.vue
@@ -6,6 +6,7 @@
 
         <template #controls>
           <div class="flex gap-2" v-if="!loading">
+            <PodcastListSorter :field="sortParams.field" :order="sortParams.order" @sort="sort" />
             <ListFilter @change="onFilterChanged" />
             <BtnGroup uppercase>
               <Btn @click.prevent="requestAddPodcastForm" highlight>
@@ -40,19 +41,20 @@
 import Fuse from 'fuse.js'
 import { faAdd, faPodcast } from '@fortawesome/free-solid-svg-icons'
 import { orderBy } from 'lodash'
-import { computed, ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import { eventBus } from '@/utils'
 import { useErrorHandler, useRouter } from '@/composables'
 import { podcastStore } from '@/stores'
 
-import ScreenHeader from '@/components/ui/ScreenHeader.vue'
-import ScreenEmptyState from '@/components/ui/ScreenEmptyState.vue'
-import ScreenBase from '@/components/screens/ScreenBase.vue'
 import Btn from '@/components/ui/form/Btn.vue'
 import BtnGroup from '@/components/ui/form/BtnGroup.vue'
-import PodcastItem from '@/components/podcast/PodcastItem.vue'
 import ListFilter from '@/components/song/SongListFilter.vue'
+import PodcastItem from '@/components/podcast/PodcastItem.vue'
 import PodcastItemSkeleton from '@/components/ui/skeletons/PodcastItemSkeleton.vue'
+import PodcastListSorter from '@/components/podcast/PodcastListSorter.vue'
+import ScreenBase from '@/components/screens/ScreenBase.vue'
+import ScreenEmptyState from '@/components/ui/ScreenEmptyState.vue'
+import ScreenHeader from '@/components/ui/ScreenHeader.vue'
 
 const { onScreenActivated } = useRouter()
 
@@ -60,6 +62,11 @@ let initialized = false
 const loading = ref(false)
 const keywords = ref('')
 
+const sortParams = reactive<{ field: PodcastListSortField, order: SortOrder }>({
+  field: 'last_played_at',
+  order: 'desc'
+})
+
 let fuse: Fuse<Podcast> | null = null
 
 const noPodcasts = computed(() => !loading.value && podcasts.value.length === 0)
@@ -87,13 +94,18 @@ const podcasts = computed(() => {
     list = fuse?.search(keywords.value).map(result => result.item) || []
   }
 
-  return orderBy(list, 'subscribed_at', 'desc')
+  return orderBy(list, sortParams.field, sortParams.order)
 })
 
 const onFilterChanged = (q: string) => (keywords.value = q)
 
 const requestAddPodcastForm = () => eventBus.emit('MODAL_SHOW_ADD_PODCAST_FORM')
 
+const sort = (field: SortField) => {
+  sortParams.field = field
+  sortParams.order = sortParams.order === 'asc' ? 'desc' : 'asc'
+}
+
 onScreenActivated('Podcasts', async () => {
   if (!initialized) {
     initialized = true
diff --git a/resources/assets/js/components/song/SongList.vue b/resources/assets/js/components/song/SongList.vue
index 1d8ed5d5..03d9f9cb 100644
--- a/resources/assets/js/components/song/SongList.vue
+++ b/resources/assets/js/components/song/SongList.vue
@@ -21,8 +21,8 @@
       >
         #
         <template v-if="config.sortable">
-          <Icon v-if="sortField === 'track' && sortOrder === 'asc'" :icon="faCaretDown" class="text-k-highlight" />
-          <Icon v-if="sortField === 'track' && sortOrder === 'desc'" :icon="faCaretUp" class="text-k-highlight" />
+          <Icon v-if="sortField === 'track' && sortOrder === 'asc'" :icon="faCaretUp" class="text-k-highlight" />
+          <Icon v-if="sortField === 'track' && sortOrder === 'desc'" :icon="faCaretDown" class="text-k-highlight" />
         </template>
       </span>
       <span
@@ -34,8 +34,8 @@
       >
         Title
         <template v-if="config.sortable">
-          <Icon v-if="sortField === 'title' && sortOrder === 'asc'" :icon="faCaretDown" class="text-k-highlight" />
-          <Icon v-if="sortField === 'title' && sortOrder === 'desc'" :icon="faCaretUp" class="text-k-highlight" />
+          <Icon v-if="sortField === 'title' && sortOrder === 'asc'" :icon="faCaretUp" class="text-k-highlight" />
+          <Icon v-if="sortField === 'title' && sortOrder === 'desc'" :icon="faCaretDown" class="text-k-highlight" />
         </template>
       </span>
       <span
@@ -50,8 +50,8 @@
         <template v-else>Album <span class="opacity-50">/</span> Podcast</template>
 
         <span v-if="config.sortable" class="ml-2">
-          <Icon v-if="sortingByAlbumOrPodcast && sortOrder === 'asc'" :icon="faCaretDown" class="text-k-highlight" />
-          <Icon v-if="sortingByAlbumOrPodcast && sortOrder === 'desc'" :icon="faCaretUp" class="text-k-highlight" />
+          <Icon v-if="sortingByAlbumOrPodcast && sortOrder === 'asc'" :icon="faCaretUp" class="text-k-highlight" />
+          <Icon v-if="sortingByAlbumOrPodcast && sortOrder === 'desc'" :icon="faCaretDown" class="text-k-highlight" />
         </span>
       </span>
       <template v-if="config.collaborative">
@@ -67,8 +67,8 @@
       >
         Time
         <template v-if="config.sortable">
-          <Icon v-if="sortField === 'length' && sortOrder === 'asc'" :icon="faCaretDown" class="text-k-highlight" />
-          <Icon v-if="sortField === 'length' && sortOrder === 'desc'" :icon="faCaretUp" class="text-k-highlight" />
+          <Icon v-if="sortField === 'length' && sortOrder === 'asc'" :icon="faCaretUp" class="text-k-highlight" />
+          <Icon v-if="sortField === 'length' && sortOrder === 'desc'" :icon="faCaretDown" class="text-k-highlight" />
         </template>
       </span>
       <span class="extra">
@@ -127,9 +127,9 @@ import {
   SongListSortOrderKey
 } from '@/symbols'
 
-import VirtualScroller from '@/components/ui/VirtualScroller.vue'
 import SongListItem from '@/components/song/SongListItem.vue'
 import SongListSorter from '@/components/song/SongListSorter.vue'
+import VirtualScroller from '@/components/ui/VirtualScroller.vue'
 
 const { startDragging } = useDraggable('playables')
 const { getDroppedData, acceptsDrop } = useDroppable(['playables'])
diff --git a/resources/assets/js/components/song/SongListSorter.vue b/resources/assets/js/components/song/SongListSorter.vue
index f7bba21f..ed212516 100644
--- a/resources/assets/js/components/song/SongListSorter.vue
+++ b/resources/assets/js/components/song/SongListSorter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <article>
     <button ref="button" class="w-full focus:text-k-highlight" title="Sort" @click.stop="trigger">
       <Icon :icon="faSort" />
     </button>
@@ -15,13 +15,13 @@
           <span>{{ item.label }}</span>
           <span class="icon hidden ml-3">
           <Icon v-if="field === 'position'" :icon="faCheck" />
-          <Icon v-else-if="order === 'asc'" :icon="faArrowDown" />
-          <Icon v-else :icon="faArrowUp" />
+          <Icon v-else-if="order === 'asc'" :icon="faArrowUp" />
+          <Icon v-else :icon="faArrowDown" />
         </span>
         </li>
       </menu>
     </OnClickOutside>
-  </div>
+  </article>
 </template>
 
 <script lang="ts" setup>
@@ -52,8 +52,7 @@ const button = ref<HTMLButtonElement>()
 const menu = ref<HTMLDivElement>()
 
 const menuItems = computed(() => {
-  type MenuItems = { label: string, field: MaybeArray<PlayableListSortField> }
-
+type MenuItems = { label: string, field: MaybeArray<PlayableListSortField> }
   const title: MenuItems = { label: 'Title', field: 'title' }
   const artist: MenuItems = { label: 'Artist', field: 'artist_name' }
   const author: MenuItems = { label: 'Author', field: 'podcast_author' }
diff --git a/resources/assets/js/types.d.ts b/resources/assets/js/types.d.ts
index ccb0f48c..186fd6f6 100644
--- a/resources/assets/js/types.d.ts
+++ b/resources/assets/js/types.d.ts
@@ -288,6 +288,7 @@ interface Podcast {
   readonly description: string
   readonly author: string
   readonly subscribed_at: string
+  readonly last_played_at: string
   readonly state: {
     current_episode: Playable['id'] | null
     progresses: Record<Playable['id'], number>
@@ -470,6 +471,8 @@ type PlayableListSortField =
   | keyof Pick<Episode, 'podcast_author' | 'podcast_title'>
   | 'position'
 
+type PodcastListSortField =  keyof Pick<Podcast, 'title' | 'last_played_at' | 'subscribed_at' | 'author'>
+
 type SortOrder = 'asc' | 'desc'
 type MoveType = 'before' | 'after'