Add global search

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Home/CategoriesPreview.vue

@@ -28,8 +28,7 @@ import { CATEGORY_STATISTICS } from "@/graphql/statistics";
 import { useI18n } from "vue-i18n";
 import shuffle from "lodash/shuffle";
 import { categoriesWithPictures } from "../Categories/constants";
-import { IConfig } from "@/types/config.model";
-import { CONFIG } from "@/graphql/config";
+import { useEventCategories } from "@/composition/apollo/config";
 
 const { t } = useI18n({ useScope: "global" });
 
@@ -40,14 +39,10 @@ const categoryStats = computed(
   () => categoryStatsResult.value?.categoryStatistics ?? []
 );
 
-const { result: configResult } = useQuery<{ config: IConfig }>(CONFIG);
-
-const config = computed(() => configResult.value?.config);
-
-const eventCategories = computed(() => config.value?.eventCategories ?? []);
+const { eventCategories } = useEventCategories();
 
 const eventCategoryLabel = (categoryId: string): string | undefined => {
-  return eventCategories.value.find(({ id }) => categoryId == id)?.label;
+  return eventCategories.value?.find(({ id }) => categoryId == id)?.label;
 };
 
 const promotedCategories = computed((): CategoryStatsModel[] => {

js/src/components/Home/SearchFields.vue

@@ -1,14 +1,17 @@
 <template>
   <form
     id="search-anchor"
-    class="container mx-auto my-3 px-2 flex flex-wrap flex-col sm:flex-row items-stretch gap-2 text-center items-center justify-center dark:text-slate-100"
+    class="container mx-auto my-3 flex flex-wrap flex-col sm:flex-row items-stretch gap-2 text-center items-center justify-center dark:text-slate-100"
     role="search"
-    @submit.prevent="emit('submit')"
+    @submit.prevent="submit"
   >
+    <label class="sr-only" for="search_field_input">{{
+      t("Keyword, event title, group name, etc.")
+    }}</label>
     <o-input
-      class="flex-1"
       v-model="search"
       :placeholder="t('Keyword, event title, group name, etc.')"
+      id="search_field_input"
       autofocus
       autocapitalize="off"
       autocomplete="off"
@@ -21,8 +24,10 @@
       v-model="location"
       :hide-map="true"
       :hide-selected="true"
+      :default-text="locationDefaultText"
+      labelClass="sr-only"
     />
-    <o-button type="submit" icon-left="magnify">
+    <o-button native-type="submit" icon-left="magnify">
       <template v-if="search">{{ t("Go!") }}</template>
       <template v-else>{{ t("Explore!") }}</template>
     </o-button>
@@ -35,23 +40,28 @@ import { AddressSearchType } from "@/types/enums";
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.vue";
+import { useRouter } from "vue-router";
+import RouteName from "@/router/name";
 
 const props = defineProps<{
-  location: IAddress;
+  location: IAddress | null;
+  locationDefaultText?: string | null;
   search: string;
 }>();
 
+const router = useRouter();
+
 const emit = defineEmits<{
-  (event: "update:location", location: IAddress): void;
+  (event: "update:location", location: IAddress | null): void;
   (event: "update:search", newSearch: string): void;
   (event: "submit"): void;
 }>();
 
 const location = computed({
-  get(): IAddress {
+  get(): IAddress | null {
     return props.location;
   },
-  set(newLocation: IAddress) {
+  set(newLocation: IAddress | null) {
     emit("update:location", newLocation);
   },
 });
@@ -65,6 +75,25 @@ const search = computed({
   },
 });
 
+const submit = () => {
+  emit("submit");
+  const lat = location.value?.geom
+    ? parseFloat(location.value?.geom?.split(";")?.[1])
+    : undefined;
+  const lon = location.value?.geom
+    ? parseFloat(location.value?.geom?.split(";")?.[0])
+    : undefined;
+  router.push({
+    name: RouteName.SEARCH,
+    query: {
+      locationName: location.value?.locality ?? location.value?.region,
+      lat,
+      lon,
+      search: search.value,
+    },
+  });
+};
+
 const { t } = useI18n({ useScope: "global" });
 </script>
 <style scoped>

js/src/components/Home/UnloggedIntroduction.vue

@@ -26,7 +26,7 @@
         >{{ t("Create an account") }}</o-button
       >
       <!-- We don't invite to find other instances yet -->
-      <!-- <o-button v-else type="is-link" tag="a" href="https://joinmastodon.org">{{ t('Find an instance') }}</o-button> -->
+      <!-- <o-button v-else variant="link" tag="a" href="https://joinmastodon.org">{{ t('Find an instance') }}</o-button> -->
       <router-link
         :to="{ name: RouteName.ABOUT }"
         class="py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-violet-title focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
@@ -41,7 +41,12 @@ import { IConfig } from "@/types/config.model";
 import RouteName from "@/router/name";
 import { useI18n } from "vue-i18n";
 
-defineProps<{ config: IConfig }>();
+defineProps<{
+  config: Pick<
+    IConfig,
+    "name" | "description" | "slogan" | "registrationsOpen"
+  >;
+}>();
 
 const { t } = useI18n({ useScope: "global" });
 </script>