Constellations list page

front/components/Content/TitleImageHero.vue

@@ -20,6 +20,7 @@ const imageHeight = computed(() => (isMobile) ? '300': '450')
     <v-img
       :src="urlImage"
       :height="imageHeight"
+      alt=""
     >
       <v-row
         v-if="title"

front/components/Home/RandomDsoHomepage.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
 import { defineAsyncComponent } from "vue";
 
-const { locale } = useI18n();
-
+const { t, locale } = useI18n();
 const Message = defineAsyncComponent(() => import('~/components/Layout/Message.vue'))
 const DsoCard = defineAsyncComponent(() => import('~/components/Items/DsoCard.vue'))
 
 const store = useMessageStore();
 const { type, message } = storeToRefs(store);
 type.value = 'warning';
-message.value = 'Load data in progress';
+message.value = t('dso.load_list');
 
 const {
   data,

front/components/Home/SearchAutocomplete.vue

@@ -2,6 +2,7 @@
 import {defineAsyncComponent, ref, watch} from "vue";
 
 const inputSearchItems = ref<string>('');
+
 const dsoList = ref<SearchDsoItem[]>([]);
 const constellationsList = ref<SearchConstellationItem[]>([]);
 

front/components/Items/ConstellationCard.vue

@@ -7,17 +7,16 @@
       :elevation="isHovering ? 18 : 1"
       v-bind="props"
     >
-      <router-link
-        :to="{name: 'constellation', params: { constellationId: item.id.toLowerCase(), urlName: item.urlName } }"
+      <NuxtLink
+        :to="{name: 'constellation-constellationId', params: { constellationId: constellation.id.toLowerCase(), urlName: constellation.urlName } }"
       >
         <v-img
-          :src="cover"
-          :lazy-src="lazyCover"
+          :src="`../assets/images/constellations/cover/${constellation.cover}`"
           class="bg-grey-lighten-2"
           height="300"
           cover
-          :alt="item.alt.toLowerCase()"
-          :aria-label="item.alt.toLowerCase()"
+          :alt="constellation.alt.toLowerCase()"
+          :aria-label="constellation.alt.toLowerCase()"
         >
           <template #placeholder>
             <v-row
@@ -37,41 +36,51 @@
               style="height: 100%;"
             >
               <v-card-title class="text-center text-h5 text-white">
-                <p>{{ item.alt }}</p>
+                <p>{{ constellation.alt }}</p>
                 <p class="text-caption">
-                  {{ item.generic }}
+                  {{ constellation.generic }}
                 </p>
               </v-card-title>
             </div>
           </v-expand-transition>
         </v-img>
-      </router-link>
+      </NuxtLink>
     </v-card>
   </v-hover>
 </template>
 
 <script setup lang="ts">
-import {onMounted, ref } from "vue";
-const cover: Ref<string | Object | undefined> = ref('');
-const lazyCover: Ref<string | undefined> = ref('');
+import { toRefs } from "vue";
+import type { VImg } from 'vuetify/components'
+type srcObject = VImg["$props"]["src"];
 
 const props = defineProps<{
-  item: Constellation
+  constellation: Constellation
 }>()
+const { constellation } = toRefs(props);
 
-onMounted(() => {
+// TEST WITH computed()
+const cover = computed<string | srcObject | undefined>(() => {
   try {
-    getCoverUrl();
+    return require(`~/assets/images/constellations/cover/${constellation.value.cover}`);
   } catch (error) {
-    console.error(`Error loading cover file ${props.item.cover}`, error);
+    console.error(`Error loading cover file "${constellation.value.cover}"`, error);
   }
-});
+})
 
-const getCoverUrl = async () => {
-  cover.value = (await import(`@/assets/images/constellations/cover/${props.item.cover}`)).default;
-  lazyCover.value = cover.value as string;
-}
+// TEST with function
+// async function resolveImage() {
+//   const img = await import(`~/assets/images/constellations/cover/${constellation.value.cover}`);
+//   return img.default;
+// }
+// const cover = await resolveImage();
+
+// TEST with new URL()
+// function getCoverUrl() {
+//   return new URL(`./assets/images/constellations/cover/${constellation.value.cover}`, import.meta.url).href
+// }
 
+// const lazyCover = computed<string | undefined>(() => cover.value as string)
 </script>
 
 <style scoped>

front/components/Items/ItemsList.vue

@@ -4,42 +4,46 @@
     :style="{ gridTemplateColumns: getColumnStyle(), gridGap: getGapStyle() }"
   >
     <slot
-      v-for="item in itemsList"
+      v-for="item in constellationList"
       :item="item"
     />
   </v-row>
 </template>
 
-<script setup>
-import {computed} from "vue";
+<script setup lang="ts">
+const { isMobile } = useDevice();
 
-const isMobile = computed(() => {
-  return screen.width <= 766;
+const props = withDefaults(defineProps<Props>(), {
+  dsoList: () => [],
+  constellationList: () => [],
+  gap: 0,
+  columns: 0
 });
 
+interface Props {
+  dsoList?: Dso[] | null,
+  constellationList?: Constellation[] | null,
+  gap?: number,
+  columns?: number
+}
 
-const props = defineProps({
-  itemsList: {
-    type: Object,
-    default: null
-  },
-  gap: {
-    type: Number,
-    default: 0
-  },
-  columns: {
-    type: Number,
-    default: 0
+const { dsoList, constellationList, gap, columns } = toRefs(props);
+const itemsList = () => {
+  // Directly return listA if not null and has elements
+  if (dsoList && dsoList.value !== null && dsoList.value.length > 0) {
+    return dsoList;
   }
-});
+
+  // Return listB if not null and has elements
+  return constellationList && constellationList.value !== null && constellationList.value.length > 0 ? constellationList : dsoList;
+};
+const validList = computed(() => itemsList());
 
 const getColumnStyle = () => {
-  return (isMobile.value) ? `repeat(auto-fill, minmax(350px, 1fr))` :  `repeat(${props.columns}, 1fr)`;
+  return (isMobile) ? `repeat(auto-fill, minmax(350px, 1fr))` :  `repeat(${columns.value}, 1fr)`;
 }
 
-const getGapStyle = () => {
-  return `${props.gap}em`;
-}
+const getGapStyle = () => `${gap.value}em`;
 </script>
 
 <style scoped>

front/i18n/locales/fr.json

@@ -86,7 +86,7 @@
   },
   "dso": {
     "load": "Veuillez patienter pendant le chargement des données de {uid}…",
-    "load_list": "Chargement des données data…",
+    "load_list": "Veuillez patienter pendant le chargement des données…",
     "link": "Accès à la page de {dso}",
     "image": "Image Astrobin de l'objet {dso}",
     "data": {