Merge branch 'main' into crowdin-translations

bcc-code · Nov 29, 2024 · 0279a80 · 0279a80
2 parents 0b62481 + aee82a7
commit 0279a80
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 38 deletions.
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -23,7 +23,7 @@ export default defineNuxtConfig({
   modules,
   runtimeConfig: {
     public: {
-      apiUrl: "https://bmm-api.brunstad.org",
+      apiUrl: "https://int-bmm-api.brunstad.org",
       authUrl: "https://login.bcc.no",
       clientId: "L9891KdcqtoKmHg4r65lT7zbSjv55dNN",
       applicationInsights: "",

diff --git a/package.json b/package.json
@@ -88,5 +88,6 @@
     "vite-plugin-electron-renderer": "^0.14.5",
     "vitest": "^1.2.2",
     "vue-tsc": "^1.8.27"
-  }
+  },
+  "packageManager": "[email protected]+sha512.88c9c3864450350e65a33587ab801acf946d7c814ed1134da4a924f6df5a2120fd36b46aab68f7cd1d413149112d53c7db3a4136624cfd00ff1846a0c6cef48a"
 }
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"));
@@ -24,19 +25,22 @@ const loading = ref(false);
 async function createLyrics() {
   loading.value = true;
 
-  await new LyricsApi().lyricsPost({
-    lyrics: {
-      songTitle: createForm.title,
-      source: "Manual",
-    },
-  });
-
-  items.value = await new LyricsApi().lyricsGet();
-
-  resetForm();
-
-  loading.value = false;
-  showCreateDialog.value = false;
+  try {
+    await new LyricsApi().lyricsPost({
+      lyrics: {
+        songTitle: createForm.title,
+        source: "Manual",
+        longCopyright: DEFAULT_LONG_COPYRIGHT,
+      },
+    });
+    resetForm();
+  } catch (err) {
+    showErrorToUser("CreateLyricsFailed", "Failed to create lyrics");
+  } finally {
+    items.value = await new LyricsApi().lyricsGet();
+    loading.value = false;
+    showCreateDialog.value = false;
+  }
 }
 
 const search = useRouteQuery("search", "");
@@ -73,12 +77,23 @@ 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"
         class="col-span-full grid grid-cols-subgrid items-center justify-between gap-4 py-1"
-        :to="{ name: 'lyrics-id', params: { id: item.id } }"
+        :to="{ name: 'lyrics-id', params: { id: item.id! } }"
       >
         <p>
           <span class="type-title-2">{{ item.songTitle }}</span>
@@ -89,7 +104,7 @@ const filteredItems = computed(() => {
           {{ $t("lyrics.edit") }}
         </ButtonStyled>
       </NuxtLink>
-    </div>
+    </TransitionGroup>
 
     <DialogBase
       :show="showCreateDialog"