Merge pull request #2368 from rommapp/use-template-ref

Use modern useTemplateRef hook

Author: gantoine

frontend/src/components/Details/RetroAchievements.vue

@@ -2,18 +2,18 @@
 import { ref, onMounted, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDisplay } from "vuetify";
+import type { EarnedAchievement } from "@/__generated__/models/EarnedAchievement";
 import type { RAGameRomAchievement } from "@/__generated__/models/RAGameRomAchievement";
+import type { RAUserGameProgression } from "@/__generated__/models/RAUserGameProgression";
 import storeAuth from "@/stores/auth";
 import type { DetailedRom } from "@/stores/roms";
 
 const { smAndDown } = useDisplay();
 const props = defineProps<{ rom: DetailedRom }>();
 const { t } = useI18n();
 const auth = storeAuth();
-const targetRom = ref();
-const earnedAchievements = ref<
-  { id: string; date: string; hardcore: boolean }[]
->([]);
+const raUserAchivement = ref<RAUserGameProgression | undefined>();
+const earnedAchievements = ref<EarnedAchievement[]>([]);
 const achievementsPercentage = ref(0);
 const achievementsPercentageHardcore = ref(0);
 const showEarned = ref(false);
@@ -45,10 +45,11 @@ const isAchievementEarned = computed(
 
 const isAchievementEarnedHarcore = computed(
   () => (achievement: RAGameRomAchievement) => {
-    return (
-      earnedAchievements.value.find(
-        (earned) => earned.id === (achievement.badge_id ?? ""),
-      )?.hardcore ?? false
+    return earnedAchievements.value.some(
+      (earned) =>
+        achievement.badge_id &&
+        earned.id === achievement.badge_id &&
+        earned.date_hardcore,
     );
   },
 );
@@ -66,29 +67,24 @@ onMounted(() => {
     props.rom.merged_ra_metadata?.achievements ?? []
   ).sort((a, b) => (a.display_order ?? 0) - (b.display_order ?? 0));
   if (auth.user?.ra_progression?.results) {
-    targetRom.value = auth.user.ra_progression.results.find(
+    raUserAchivement.value = auth.user.ra_progression.results.find(
       (result) => result.rom_ra_id === props.rom.ra_id,
     );
-    if (targetRom.value) {
-      earnedAchievements.value = targetRom.value.earned_achievements.map(
-        (achievement: {
-          id: string;
-          date: string;
-          date_hardcore?: string | null;
-        }) => ({
-          id: achievement.id,
+    if (raUserAchivement.value) {
+      earnedAchievements.value = raUserAchivement.value.earned_achievements.map(
+        (achievement) => ({
+          ...achievement,
           date: achievement.date_hardcore || achievement.date,
-          hardcore: !!achievement.date_hardcore,
         }),
       );
       if (props.rom.merged_ra_metadata?.achievements) {
         achievementsPercentage.value = Math.round(
-          (targetRom.value.earned_achievements.length /
+          (raUserAchivement.value.earned_achievements.length /
             props.rom.merged_ra_metadata?.achievements.length) *
             100,
         );
         achievementsPercentageHardcore.value = Math.round(
-          (targetRom.value.earned_achievements.filter(
+          (raUserAchivement.value.earned_achievements.filter(
             (achievement: { date_hardcore?: string }) =>
               achievement.date_hardcore,
           ).length /
@@ -105,7 +101,7 @@ onMounted(() => {
     <template #prepend>
       <v-chip v-if="rom.merged_ra_metadata?.achievements" label rounded="0"
         ><v-icon class="mr-2">mdi-trophy</v-icon
-        >{{ targetRom?.earned_achievements.length ?? 0 }} /
+        >{{ raUserAchivement?.earned_achievements.length ?? 0 }} /
         {{ rom.merged_ra_metadata?.achievements.length }}</v-chip
       >
     </template>

frontend/src/components/Home/Collections.vue

@@ -19,7 +19,7 @@ const gridCollections = useLocalStorage(`settings.${props.setting}`, false);
 const enable3DEffect = useLocalStorage("settings.enable3DEffect", false);
 const visibleCollections = ref(72);
 const isHovering = ref(false);
-const hoveringCollectionId = ref();
+const hoveringCollectionId = ref<number>();
 
 function toggleGridCollections() {
   gridCollections.value = !gridCollections.value;

frontend/src/components/Home/ContinuePlaying.vue

@@ -17,9 +17,9 @@ const gridContinuePlayingRoms = useLocalStorage(
 );
 const enable3DEffect = useLocalStorage("settings.enable3DEffect", false);
 const isHovering = ref(false);
-const hoveringRomId = ref();
+const hoveringRomId = ref<number>();
 const openedMenu = ref(false);
-const openedMenuRomId = ref();
+const openedMenuRomId = ref<number>();
 
 function toggleGridContinuePlaying() {
   gridContinuePlayingRoms.value = !gridContinuePlayingRoms.value;
@@ -37,7 +37,7 @@ function onOpenedMenu(emitData: { openedMenu: boolean; id: number }) {
 
 function onClosedMenu() {
   openedMenu.value = false;
-  openedMenuRomId.value = null;
+  openedMenuRomId.value = undefined;
 }
 </script>
 <template>

frontend/src/components/Home/Platforms.vue

@@ -14,7 +14,7 @@ const { filledPlatforms } = storeToRefs(platformsStore);
 const gridPlatforms = useLocalStorage("settings.gridPlatforms", false);
 const enable3DEffect = useLocalStorage("settings.enable3DEffect", false);
 const isHovering = ref(false);
-const hoveringPlatformId = ref();
+const hoveringPlatformId = ref<number>();
 
 function toggleGridPlatforms() {
   gridPlatforms.value = !gridPlatforms.value;

frontend/src/components/Home/RecentAdded.vue

@@ -14,9 +14,9 @@ const { recentRoms } = storeToRefs(romsStore);
 const gridRecentRoms = useLocalStorage("settings.gridRecentRoms", false);
 const enable3DEffect = useLocalStorage("settings.enable3DEffect", false);
 const isHovering = ref(false);
-const hoveringRomId = ref();
+const hoveringRomId = ref<number>();
 const openedMenu = ref(false);
-const openedMenuRomId = ref();
+const openedMenuRomId = ref<number>();
 
 function toggleGridRecentRoms() {
   gridRecentRoms.value = !gridRecentRoms.value;
@@ -34,7 +34,7 @@ function onOpenedMenu(emitData: { openedMenu: boolean; id: number }) {
 
 function onClosedMenu() {
   openedMenu.value = false;
-  openedMenuRomId.value = null;
+  openedMenuRomId.value = undefined;
 }
 </script>
 <template>

frontend/src/components/Settings/LibraryManagement/Config/Dialog/DeletePlatformBinding.vue

@@ -12,8 +12,8 @@ const { lgAndUp } = useDisplay();
 const show = ref(false);
 const emitter = inject<Emitter<Events>>("emitter");
 const configStore = storeConfig();
-const platformBindingFSSlugToDelete = ref();
-const platformBindingSlugToDelete = ref();
+const platformBindingFSSlugToDelete = ref("");
+const platformBindingSlugToDelete = ref("");
 emitter?.on("showDeletePlatformBindingDialog", ({ fsSlug, slug }) => {
   platformBindingFSSlugToDelete.value = fsSlug;
   platformBindingSlugToDelete.value = slug;

frontend/src/components/Settings/LibraryManagement/Config/Dialog/DeletePlatformVersion.vue

@@ -12,8 +12,8 @@ const { lgAndUp } = useDisplay();
 const show = ref(false);
 const emitter = inject<Emitter<Events>>("emitter");
 const configStore = storeConfig();
-const fsSlugToDelete = ref();
-const slugToDelete = ref();
+const fsSlugToDelete = ref("");
+const slugToDelete = ref("");
 emitter?.on("showDeletePlatformVersionDialog", ({ fsSlug, slug }) => {
   fsSlugToDelete.value = fsSlug;
   slugToDelete.value = slug;

frontend/src/components/Settings/LibraryManagement/Config/PlatformBindCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import PlatformIcon from "@/components/common/Platform/Icon.vue";
 
-const emit = defineEmits(["clickEdit", "clickDelete"]);
+const emit = defineEmits(["click-edit", "click-delete"]);
 defineProps<{
   slug: string;
   fsSlug: string;
@@ -26,7 +26,7 @@ defineProps<{
                 size="x-small"
                 icon="mdi-pencil"
                 class="ml-0"
-                @click="$emit('clickEdit')"
+                @click="$emit('click-edit')"
               />
             </v-slide-x-reverse-transition>
             <v-slide-x-reverse-transition>
@@ -37,7 +37,7 @@ defineProps<{
                 size="x-small"
                 icon="mdi-delete"
                 class="text-romm-red"
-                @click="$emit('clickDelete')"
+                @click="$emit('click-delete')"
               />
             </v-slide-x-reverse-transition>
           </template>

frontend/src/components/common/Collection/Card.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import VanillaTilt from "vanilla-tilt";
-import { computed, ref, watchEffect, onMounted, onBeforeUnmount } from "vue";
+import {
+  computed,
+  ref,
+  watchEffect,
+  onMounted,
+  onBeforeUnmount,
+  useTemplateRef,
+} from "vue";
 import { useDisplay } from "vuetify";
 import Skeleton from "@/components/common/Game/Card/Skeleton.vue";
 import { ROUTES } from "@/plugins/router";
@@ -108,7 +115,7 @@ interface TiltHTMLElement extends HTMLElement {
 }
 const emit = defineEmits(["hover"]);
 
-const tiltCard = ref<TiltHTMLElement | null>(null);
+const tiltCardRef = useTemplateRef<TiltHTMLElement>("tilt-card-ref");
 
 // Determine the correct route for this collection type
 const collectionRoute = computed(() => {
@@ -138,8 +145,8 @@ const collectionRoute = computed(() => {
 });
 
 onMounted(() => {
-  if (tiltCard.value && !smAndDown.value && props.enable3DTilt) {
-    VanillaTilt.init(tiltCard.value, {
+  if (tiltCardRef.value && !smAndDown.value && props.enable3DTilt) {
+    VanillaTilt.init(tiltCardRef.value, {
       max: 20,
       speed: 400,
       scale: 1.1,
@@ -150,15 +157,15 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-  if (tiltCard.value?.vanillaTilt && props.enable3DTilt) {
-    tiltCard.value.vanillaTilt.destroy();
+  if (tiltCardRef.value?.vanillaTilt && props.enable3DTilt) {
+    tiltCardRef.value.vanillaTilt.destroy();
   }
 });
 </script>
 
 <template>
   <v-hover v-slot="{ isHovering, props: hoverProps }">
-    <div data-tilt ref="tiltCard">
+    <div data-tilt ref="tilt-card-ref">
       <v-card
         v-bind="{
           ...hoverProps,

frontend/src/components/common/Game/Card/Base.vue

@@ -2,7 +2,14 @@
 import { useLocalStorage } from "@vueuse/core";
 import type { Emitter } from "mitt";
 import VanillaTilt from "vanilla-tilt";
-import { computed, ref, onMounted, onBeforeUnmount, inject } from "vue";
+import {
+  computed,
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  inject,
+  useTemplateRef,
+} from "vue";
 import { useDisplay } from "vuetify";
 import type { SearchRomSchema } from "@/__generated__";
 import ActionBar from "@/components/common/Game/Card/ActionBar.vue";
@@ -128,7 +135,7 @@ interface TiltHTMLElement extends HTMLElement {
   };
 }
 
-const tiltCard = ref<TiltHTMLElement | null>(null);
+const tiltCardRef = useTemplateRef<TiltHTMLElement>("tilt-card-ref");
 
 const isWebpEnabled = computed(
   () => heartbeatStore.value.TASKS?.ENABLE_SCHEDULED_CONVERT_IMAGES_TO_WEBP,
@@ -163,8 +170,8 @@ const showNoteDialog = (event: MouseEvent | KeyboardEvent) => {
 };
 
 onMounted(() => {
-  if (tiltCard.value && !smAndDown.value && props.enable3DTilt) {
-    VanillaTilt.init(tiltCard.value, {
+  if (tiltCardRef.value && !smAndDown.value && props.enable3DTilt) {
+    VanillaTilt.init(tiltCardRef.value, {
       max: 20,
       speed: 400,
       scale: 1.1,
@@ -175,15 +182,15 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-  if (tiltCard.value?.vanillaTilt && props.enable3DTilt) {
-    tiltCard.value.vanillaTilt.destroy();
+  if (tiltCardRef.value?.vanillaTilt && props.enable3DTilt) {
+    tiltCardRef.value.vanillaTilt.destroy();
   }
 });
 </script>
 
 <template>
   <v-hover v-slot="{ isHovering: isOuterHovering, props: hoverProps }">
-    <div data-tilt ref="tiltCard">
+    <div data-tilt ref="tilt-card-ref">
       <v-card
         :style="{
           ...(disableViewTransition