Fix message store, test autocomplete search + random dso component

Astro-Otter-Space · Mar 19, 2024 · 51f2b74 · 51f2b74
1 parent 88c5995
commit 51f2b74
Show file tree

Hide file tree

Showing 17 changed files with 183 additions and 141 deletions.
diff --git a/front/components/Home/RandomDsoHomepage.vue b/front/components/Home/RandomDsoHomepage.vue
@@ -1,3 +1,48 @@
+<script setup lang="ts">
+import {defineAsyncComponent} from "vue";
+
+const Message = defineAsyncComponent(() => import('~/components/Layout/Message.vue'))
+const DsoCard = defineAsyncComponent(() => import('~/components/Items/DsoCard.vue'))
+
+const { locale } = useI18n();
+
+const store = useMessageStore();
+store.$patch({
+  type: 'info',
+  loading: true,
+  message: 'Load data in progress'
+})
+
+const {
+  data: randomItems,
+  pending,
+  error,
+  status,
+  refresh
+} = await useAsyncData(
+  'randomItems',
+  () => useCustomFetch<[]>('/dso/random', {
+    method: 'GET',
+    query: {
+      limit: 3
+    }
+  })
+);
+
+console.log(randomItems.value);
+if ('success' === status.value) {
+  store.$patch({
+    loading: false,
+  })
+} else {
+  store.$patch({
+    message: 'An error occured.',
+    type: 'error',
+    loading: false,
+  })
+}
+watch(locale, () => refresh());
+</script>
 <template>
   <v-sheet
     elevation="0"
@@ -13,45 +58,29 @@
     >
       <v-container>
         <v-row align="center">
-          <v-col
-            v-for="item in state.items.value"
-            :key="item.id"
-            cols="12"
-            md="4"
-          >
-            <DsoCard :dso="item" />
-          </v-col>
+
+          <div v-if="pending">
+            <Message />
+          </div>
+          <div v-else-if="error">
+            <Message />
+          </div>
+
+<!--          <div v-else>-->
+<!--            {{ JSON.stringify(randomItems) }}-->
+<!--          </div>-->
+
+<!--          <v-col-->
+<!--            v-for="item in randomItems"-->
+<!--            v-else-->
+<!--            :key="item.id"-->
+<!--            cols="12"-->
+<!--            md="4"-->
+<!--          >-->
+<!--            <DsoCard :dso="item" />-->
+<!--          </v-col>-->
         </v-row>
       </v-container>
     </v-sheet>
   </v-sheet>
 </template>
-
-<script setup>
-import DsoCard from "@/components/Items/DsoCard.vue";
-import {DsoWs} from "@/repositories/api/dso";
-import {onMounted, reactive, watch} from "vue";
-import Trans from "@/services/translation";
-const state = reactive({ items: {}});
-
-onMounted(() => {
-  getRandomDso();
-});
-
-watch(() => Trans.currentLocale, () => {
-  getRandomDso();
-});
-
-const getRandomDso = async () => {
-  try {
-    state.items.value = await DsoWs.GET_RANDOM(0, 3);
-  } catch (err) {
-    console.error(err.message);
-  }
-}
-
-</script>
-
-<style scoped>
-
-</style>
diff --git a/front/components/Home/SearchAutocomplete.vue b/front/components/Home/SearchAutocomplete.vue
@@ -2,19 +2,19 @@
 import {defineAsyncComponent, ref, watch} from "vue";
 
 const inputSearchItems = ref('');
+const pending = ref(false);
 const results = ref([]);
 const REGEX = new RegExp('/^[a-zA-Z0-9&\\-_;: ]+$/gm');
 
 watch(inputSearchItems, (newSearch: string) => {
   setTimeout(async () => {
     if (2 <= newSearch.length && !REGEX.test(newSearch)) {
-      const { data, pending, error, refresh } = await useSearchRequest(newSearch);
-      console.log(data, pending, error);
+      const { data } = await useSearchRequest(newSearch);
+      console.log(data);
     }
   }, 200);
 });
 
-
 const SearchListCard = defineAsyncComponent(() => import("@/components/Items/SearchListCard.vue"));
 </script>
 

diff --git a/front/components/Items/DsoCard.vue b/front/components/Items/DsoCard.vue
@@ -7,8 +7,8 @@
       :elevation="isHovering ? 18 : 1"
       v-bind="props"
     >
-      <router-link
-        :to="{ name: 'dso', params: { id: dso.id, urlName: dso.urlName } }"
+      <NuxtLink
+        :to="{ name: 'dso-id', params: { id: dso.id, urlName: dso.urlName } }"
         :title="t('dso.link', {'dso': title})"
       >
         <v-img
@@ -34,7 +34,7 @@
           </template>
           <v-expand-transition>
             <div
-              :class="getCardsCssClass(isDefaultImage, isHovering)"
+              :class="getCardsCssClass(isDefaultImage, isHovering as boolean)"
               style="height: 100%;"
             >
               <v-card-title
@@ -52,7 +52,7 @@
             </div>
           </v-expand-transition>
         </v-img>
-      </router-link>
+      </NuxtLink>
 
       <v-card-actions color="background">
         <v-container :style="{margin: 'auto'}">
@@ -79,9 +79,9 @@
               >
                 <!-- v-icon class="mr-2" color="grey"><slot name="custom-icon" iconName="constellation"></slot> </v-icon-->
                 <span class="subheading me-2">
-                  <router-link
+                  <NuxtLink
                     :to="{
-                      name: 'constellation',
+                      name: 'constellation-constellationId',
                       params: {
                         constellationId: dso.constellation.id.toLowerCase(),
                         urlName: dso.constellation.alt.toLowerCase()
@@ -90,7 +90,7 @@
                     :title="t('layout.btnConstellationTo', {'constellation': dso.constellation.alt })"
                   >
                     {{ dso.constellation.alt }}
-                  </router-link>
+                  </NuxtLink>
                 </span>
               </v-btn>
             </v-col>
@@ -101,40 +101,36 @@
   </v-hover>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {computed, toRefs} from "vue";
-import { useI18n } from 'vue-i18n'
 
-
-const defaultImage = require('@/assets/images/default.png');
+import defaultImage from '@/assets/images/default.png';
 const { t } = useI18n();
 
 const props = defineProps({
   dso: {
-    type: Object
+    type: Object,
+    default: null
   }
 })
 const { dso } = toRefs(props);
-
-const { isMobile } = computed(() => {
-  return screen.width <= 760;
-});
+const { isMobile } = useDevice();
 
 const imageCover = computed(() => (dso.value.astrobinUser) ? dso.value.astrobin.url_regular: defaultImage );
 const isDefaultImage = computed(() => (!dso.value.astrobinUser) );
 const imageLazyCover = computed(() => (dso.value.astrobinUser) ? dso.value.astrobin.url_gallery: defaultImage );
 const title = computed(() => dso.value.fullNameAlt );
-const otherDesigs = computed(() => dso.value.desigs.filter(v => v !== dso.value.name).join(' - '));
+const otherDesigs = computed(() => dso.value.desigs.filter((v: string) => v !== dso.value.name).join(' - '));
 
-const getCardsCssClass = (isDefaultImage, isHovering) => {
-  if (true === isMobile.value) {
+const getCardsCssClass = (isDefaultImage: boolean, isHovering: boolean) => {
+  if (isMobile) {
     return 'd-flex text-white v-card--reveal display-3 white--text';
   }
 
-  if (true === isDefaultImage) {
+  if (isDefaultImage) {
       return 'd-flex text-white v-card--reveal display-3 white--text'
   } else {
-    if (isHovering && false === isDefaultImage) {
+    if (isHovering && !isDefaultImage) {
       return 'd-flex transition-fast-in-fast-out text-white v-card--reveal display-3 white--text'
     }
   }

diff --git a/front/components/Layout/HeaderBar.vue b/front/components/Layout/HeaderBar.vue
@@ -5,8 +5,8 @@
     :density="!isMobile ? 'default' : 'compact'"
   >
     <v-toolbar color="secondary">
-      <router-link
-        :to="{ name: 'home'}"
+      <NuxtLink
+        :to="{ name: 'index'}"
         :title="t('layout.homeAccess')"
       >
         <v-avatar class="mx-2">
@@ -15,7 +15,7 @@
             :alt="t('layout.logo')"
           />
         </v-avatar>
-      </router-link>
+      </NuxtLink>
       <v-divider
         vertical
         thickness="2"
@@ -24,12 +24,12 @@
       />
       <div v-if="!isMobile">
         <v-btn
-          v-for="(menuItem, index) in processedMenu(menu, props.allRoutes)"
+          v-for="(menuItem, index) in headerMenu"
           :key="index"
           class="text-none"
         >
           <router-link :to="menuItem.path">
-            <span class="text-grey">{{ menuItem.text }}</span>
+            <span class="text-grey">{{ $t(menuItem.text) }}</span>
           </router-link>
         </v-btn>
       </div>
@@ -67,7 +67,7 @@
         <LanguageSwitcher bg-color="primary" />
         <MenuMobile
           v-if="isMobile"
-          :items-menu="processedMenu(menu, props.allRoutes)"
+          :items-menu="headerMenu"
           bg-color="primary"
         />
       </div>
@@ -102,7 +102,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {computed, defineAsyncComponent, ref, watch} from "vue";
 import { useI18n } from "vue-i18n";
 
@@ -113,12 +113,10 @@ const LanguageSwitcher = defineAsyncComponent(() => import('@/components/Layout/
 const MenuMobile = defineAsyncComponent(() => import('@/components/Layout/MenuMobile.vue'));
 
 import astroOtterLogo from '@/assets/images/logos/astro_otter_200-200.png'
-import configs from "@/configs";
-import {searchItems} from "@/services/autocompleteSearch";
+import {useHeaderMenu} from "~/composables/menu/useHeaderMenu";
 
 // Data
 const logo = ref(astroOtterLogo)
-const menu = ref(configs.headerMenu);
 const showSearch = ref(false);
 const iconSearch = ref('mdi-magnify');
 
@@ -129,35 +127,13 @@ const inputSearchItems = ref('');
 const results = ref([]);
 const loading = ref(false);
 
+const { headerMenu } = useHeaderMenu();
 const { isMobile } = useDevice();
 
-// Props
-const props = defineProps({
-  // eslint-disable-next-line vue/require-default-prop
-  allRoutes: {
-    type: Array
-  }
-});
-
 // Computed
-const processedMenu = computed(() => buildMenu);
-
-const top = computed(() => true === isMobile.value ? '48px' : '64px')
-
-// Methods
-const buildMenu = (items, allRoutes) => {
-  return items.map(route => {
-    const routeName = route.routeName;
-    const routeItem = allRoutes.filter(route => route.name === routeName)[0];
-    return {
-      key: routeItem.meta.key,
-      icon: routeItem.meta.icon ?? 'mdi-tooltip-text-outline',
-      path: routeItem.path,
-      text: t(`${routeName}.title`),
-      description: t(`${routeName}.title`)
-    };
-  })
-};
+// const processedMenu = computed(() => buildMenu);
+const top = computed(() => isMobile ? '48px' : '64px')
+
 const toggleInputSearch = () => {
   showSearch.value = !showSearch.value;
   iconSearch.value = (false === showSearch.value) ? 'mdi-magnify': 'mdi-close';
@@ -176,7 +152,7 @@ const toggleInputSearch = () => {
  */
 watch(inputSearchItems, (newSearch) => {
   setTimeout(async () => {
-    results.value = await searchItems(newSearch);
+    // results.value = await searchItems(newSearch);
   }, 200);
 });
 

diff --git a/front/components/Layout/MenuMobile.vue b/front/components/Layout/MenuMobile.vue
@@ -48,14 +48,14 @@
         nav
         :bg-color="bgColor"
       >
-        <v-list-item
+        <NuxtLink
           link
           :to="item.path"
         >
           <v-list-item-title class="mt-2">
-            {{ item.text }}
+            {{ $t(item.text) }}
           </v-list-item-title>
-        </v-list-item>
+        </NuxtLink>
       </v-list>
     </v-card>
   </v-menu>