Merge pull request #534 from bcc-code/feature/lyrics-page

bcc-code · Nov 29, 2024 · 6660d52 · 6660d52
2 parents 7a456c4 + 7469895
commit 6660d52
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 22 deletions.
diff --git a/pages/lyrics/[id].vue b/pages/lyrics/[id].vue
@@ -1,12 +1,16 @@
+<script lang="ts">
+export const DEFAULT_LONG_COPYRIGHT =
+  "© Stiftelsen Skjulte Skatters Forlag, Norway. All rights reserved.";
+export const EDITOR_PLACEHOLDER =
+  "<h3>Vers 1</h3><p>Herrens veier, Herrens tanker er</p><p>høyere enn dine, mine tanker,</p><p>ja, som himlen over jorden her.</p><p>Kun av kjærlighet hans hjerte banker.</p><h3>Refreng</h3><p>Herrens vei, du og jeg</p><p>kan ei skjønne eller fatte.</p><p>Herrens ord er lyset på vår sti.</p><p>Tro det, og du finner skjulte skatter!</p>";
+</script>
+
 <script setup lang="ts">
+// eslint-disable-next-line import/first
 import { ContributorApi, LyricsApi } from "@bcc-code/bmm-sdk-fetch";
+// eslint-disable-next-line import/first
 import type { ContributorModel, Lyrics } from "@bcc-code/bmm-sdk-fetch";
 
-const DEFAULT_LONG_COPYRIGHT =
-  "© Stiftelsen Skjulte Skatters Forlag, Norway. All rights reserved.";
-const EDITOR_PLACEHOLDER =
-  "<h3>Vers 1</h3><p>Herrens veier, Herrens tanker er</p><p>høyere enn dine, mine tanker,</p><p>ja, som himlen over jorden her.</p><p>Kun av kjærlighet hans hjerte banker.</p><h3>Refreng</h3><p>Herrens vei, du og jeg</p><p>kan ei skjønne eller fatte.</p><p>Herrens ord er lyset på vår sti.</p><p>Tro det, og du finner skjulte skatter!</p>";
-
 const route = useRoute("lyrics-id");
 
 const lyrics = ref<Lyrics>();
@@ -17,16 +21,6 @@ onMounted(async () => {
   });
 });
 
-watch(
-  () => lyrics.value?.longCopyright,
-  (copyright) => {
-    if (!lyrics.value) return;
-    if (copyright === DEFAULT_LONG_COPYRIGHT) {
-      lyrics.value.longCopyright = "";
-    }
-  },
-);
-
 const verses = computed({
   get() {
     if (!lyrics.value?.verses) return "";
@@ -48,7 +42,6 @@ async function saveLyrics() {
   saving.value = true;
 
   // Default values
-  lyrics.value.longCopyright ||= DEFAULT_LONG_COPYRIGHT;
   if (yearPublished.value) {
     lyrics.value.yearPublished = yearPublished.value;
   }
@@ -132,6 +125,11 @@ function deleteLyrics() {
   if (!lyrics.value) return;
   confirmDelete.reveal();
 }
+
+function useDefaultLongCopyright() {
+  if (!lyrics.value) return;
+  lyrics.value.longCopyright = DEFAULT_LONG_COPYRIGHT;
+}
 </script>
 
 <template>
@@ -263,13 +261,21 @@ function deleteLyrics() {
             class="md:col-start-1 md:row-start-1"
           />
           <div class="flex flex-col gap-1">
-            <label for="long-copyright">
-              {{ $t("lyrics.long-copyright") }}
-            </label>
+            <div class="flex items-center justify-between gap-2">
+              <label for="long-copyright">
+                {{ $t("lyrics.long-copyright") }}
+              </label>
+              <button
+                class="type-subtitle-3 flex items-center gap-1 rounded-md border border-label-separator bg-background-2 pl-1 pr-2 text-label-3 hover:border-label-4 hover:text-label-2"
+                @click="useDefaultLongCopyright"
+              >
+                <NuxtIcon name="icon.add" class="opacity-50" />
+                <span>Default SSSF copyright</span>
+              </button>
+            </div>
             <textarea
               id="long-copyright"
               v-model="lyrics.longCopyright"
-              :placeholder="DEFAULT_LONG_COPYRIGHT"
               class="w-full truncate rounded-lg border border-label-separator bg-background-2 px-4 py-2"
               rows="1"
             ></textarea>

diff --git a/pages/lyrics/index.vue b/pages/lyrics/index.vue
@@ -2,6 +2,7 @@
 import { LyricsApi } from "@bcc-code/bmm-sdk-fetch";
 import { useRouteQuery } from "@vueuse/router";
 import type { Lyrics } from "@bcc-code/bmm-sdk-fetch";
+import { DEFAULT_LONG_COPYRIGHT } from "./[id].vue";
 
 const { t } = useI18n();
 setTitle(() => t("nav.lyrics"));
@@ -28,6 +29,7 @@ async function createLyrics() {
     lyrics: {
       songTitle: createForm.title,
       source: "Manual",
+      longCopyright: DEFAULT_LONG_COPYRIGHT,
     },
   });
 
@@ -73,7 +75,18 @@ const filteredItems = computed(() => {
         class="absolute right-4 top-1/2 -translate-y-1/2"
       />
     </div>
-    <div class="grid grid-cols-[1fr_auto] divide-y divide-label-separator">
+
+    <TransitionGroup
+      tag="div"
+      class="grid grid-cols-[1fr_auto] divide-y divide-label-separator"
+      move-class="transition-all duration-500 ease-out"
+      enter-active-class="transition-all duration-500 ease-out"
+      enter-from-class="opacity-0 scale-95"
+      enter-to-class="opacity-100 scale-100"
+      leave-active-class="transition-all duration-500 ease-out absolute"
+      leave-from-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-95"
+    >
       <NuxtLink
         v-for="item in filteredItems"
         :key="item.id"
@@ -89,7 +102,7 @@ const filteredItems = computed(() => {
           {{ $t("lyrics.edit") }}
         </ButtonStyled>
       </NuxtLink>
-    </div>
+    </TransitionGroup>
 
     <DialogBase
       :show="showCreateDialog"