admin: Fix the transition from publish history to a change

ThrRip · Dec 19, 2024 · 388dd3e · 388dd3e
1 parent f932b13
commit 388dd3e
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 17 deletions.
diff --git a/packages/admin/app/components/playlist/ChangesList.vue b/packages/admin/app/components/playlist/ChangesList.vue
@@ -214,10 +214,13 @@
                   `错误：${getPublishingStateById(song.$id)?.error?.message}\n\n` +
                   '请联系您的技术支持人员以获取帮助，或点击此图标以重新选择此项目，并再次尝试发布改动。' :
                   ''"
-              class="group grid portrait:row-span-2 place-items-center pl-2.5 portrait:pl-2.5 portrait:pr-1 py-2.5 h-full"
-              :class="[!getPublishingStateById(song.$id) ? 'cursor-pointer' :
-                getPublishingStateById(song.$id)?.state === 'failed' ? 'grid-areas-stack cursor-pointer' :
-                'grid-areas-stack']"
+              class="group grid grid-areas-stack portrait:row-span-2 place-items-center pl-2.5 portrait:pl-2.5 portrait:pr-1 py-2.5 h-full"
+              :class="{
+                'grid-areas-stack':
+                  getPublishingStateById(song.$id) || furtherChanges.has(song.$id),
+                'cursor-pointer':
+                  !getPublishingStateById(song.$id) || (getPublishingStateById(song.$id)?.state === 'failed')
+              }"
             >
               <input
                 v-if="!getPublishingStateById(song.$id) || getPublishingStateById(song.$id)?.state === 'failed'"
@@ -226,12 +229,20 @@
                 @click="selectedIds.has(song.$id) ? selectedIds.delete(song.$id) : selectedIds.add(song.$id)"
               >
               <ClientOnly>
-                <svg
-                  v-if="!selectedIds.has(song.$id) && !getPublishingStateById(song.$id)"
-                  class="size-5 transition group-active:scale-90"
+                <transition
+                  :css="furtherChanges.has(song.$id)"
+                  enter-from-class="opacity-0"
+                  enter-active-class="duration-200"
+                  leave-active-class="duration-200"
+                  leave-to-class="opacity-0"
                 >
-                  <use href="#far-square" />
-                </svg>
+                  <svg
+                    v-if="!selectedIds.has(song.$id) && !getPublishingStateById(song.$id)"
+                    class="size-5 transition group-active:scale-90"
+                  >
+                    <use href="#far-square" />
+                  </svg>
+                </transition>
                 <transition
                   :css="Boolean(getPublishingStateById(song.$id))"
                   enter-from-class="opacity-0"
@@ -462,6 +473,7 @@ const props = defineProps<{
   // Modifications
   dataChanges: Playlist
   publishingState: PlaylistPublishingState
+  furtherChanges: Set<Song['$id']>
   sortingColumn: null | PlaylistColumn
   sortingOrder?: PlaylistSortingOrder
   countTotal: number

diff --git a/packages/admin/app/pages/playlist.vue b/packages/admin/app/pages/playlist.vue
@@ -29,6 +29,7 @@
       :data="backendPlaylist"
       :data-changes="viewPlaylistChangesData"
       :publishing-state="backendPlaylistPublishChangesState"
+      :further-changes="viewPlaylistFurtherChangesIds"
       :sorting-column="viewPlaylistSortingColumn"
       :sorting-order="viewPlaylistSortingOrder"
       :count-total="viewPlaylistChangesData.length"
@@ -140,6 +141,8 @@ function backendPlaylistPublishChanges (changesIds: Set<Song['$id']>) {
   }
 
   changesIds.forEach(changesId => {
+    viewPlaylistFurtherChangesIds.value.delete(changesId)
+
     const changes = { ...viewPlaylistChangesData.value.find(_ => _.$id === changesId) }
 
     // New song - using a UUID for "$id" locally
@@ -213,7 +216,6 @@ function viewPlaylistToggleSorting (column: PlaylistColumn) {
   viewPlaylistDataUpdate()
 }
 
-const viewPlaylistChangesData = ref<Playlist>([])
 let viewPlaylistDataChangesMerged_: Playlist = []
 function viewPlaylistDataMergeChanges (data: Playlist, changes: Playlist) {
   const playlist = data.slice()
@@ -314,14 +316,8 @@ const viewPlaylistDataInitFinish = watch(backendPlaylistStatus, value => {
   }
 })
 
+const viewPlaylistChangesData = ref<Playlist>([])
 function viewPlaylistStageChanges (changes: Song) {
-  if (backendPlaylistPublishChangesState.value.find(_ => _.$id === changes.$id)) {
-    backendPlaylistPublishChangesState.value.splice(
-      backendPlaylistPublishChangesState.value.findIndex(_ => _.$id === changes.$id),
-      1
-    )
-  }
-
   const songUnmodified = backendPlaylist.value.find(song => song.$id === changes.$id)
   const changesStaged = viewPlaylistChangesData.value.find(song => song.$id === changes.$id)
 
@@ -386,6 +382,7 @@ function viewPlaylistStageChanges (changes: Song) {
       else {
         viewPlaylistChangesData.value.push(changes)
       }
+      viewPlaylistFurtherChangeCheck(changes.$id)
     }
     else
     if (changesStaged) {
@@ -410,10 +407,23 @@ function viewPlaylistStageChanges (changes: Song) {
     else {
       viewPlaylistChangesData.value.push(changes)
     }
+    viewPlaylistFurtherChangeCheck(changes.$id)
   }
 
   viewPlaylistDataUpdate('changes')
 }
+const viewPlaylistFurtherChangesIds = ref<Set<Song['$id']>>(new Set())
+function viewPlaylistFurtherChangeCheck (changesId: Song['$id']) {
+  // If changes were made to a song with publishing history, mark for transition and clear its previous publishing state
+  if (backendPlaylistPublishChangesState.value.find(_ => _.$id === changesId)) {
+    viewPlaylistFurtherChangesIds.value.add(changesId)
+    setTimeout(() => viewPlaylistFurtherChangesIds.value.delete(changesId), 200)
+    backendPlaylistPublishChangesState.value.splice(
+      backendPlaylistPublishChangesState.value.findIndex(_ => _.$id === changesId),
+      1
+    )
+  }
+}
 
 function viewPlaylistUndoChanges (changesIds: Set<Song['$id']>) {
   changesIds.forEach(changesId => {