#1574 - homepage : remove text search + add buttons for each content type

src/components/Home/SearchFields.vue

@@ -9,6 +9,7 @@
       t("Keyword, event title, group name, etc.")
     }}</label>
     <o-input
+      v-if="search != null"
       v-model="search"
       :placeholder="t('Keyword, event title, group name, etc.')"
       id="search_field_input"
@@ -46,16 +47,40 @@
         />
       </o-dropdown>
     </full-address-auto-complete>
-    <o-button native-type="submit" icon-left="magnify">
+    <o-button native-type="submit" icon-left="magnify" v-if="search != null">
       <template v-if="search">{{ t("Go!") }}</template>
       <template v-else>{{ t("Explore!") }}</template>
     </o-button>
+    <o-button
+      class="search-Event min-w-60 mr-1 mb-1"
+      native-type="submit"
+      icon-left="calendar"
+      v-if="search == null"
+    >
+      {{ t("Event filter") }}
+    </o-button>
+    <o-button
+      class="search-Activity min-w-60 mr-1 mb-1"
+      native-type="submit"
+      icon-left="calendar-star"
+      v-if="search == null && islongEvents"
+    >
+      {{ t("Find other activities") }}
+    </o-button>
+    <o-button
+      class="search-Group min-w-60 mr-1 mb-1"
+      native-type="submit"
+      icon-left="account-multiple"
+      v-if="search == null"
+    >
+      {{ t("Find groups") }}
+    </o-button>
   </form>
 </template>
 
 <script lang="ts" setup>
 import { IAddress } from "@/types/address.model";
-import { AddressSearchType } from "@/types/enums";
+import { AddressSearchType, ContentType } from "@/types/enums";
 import {
   addressToLocation,
   getAddressFromLocal,
@@ -65,6 +90,7 @@ import { computed, defineAsyncComponent } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter, useRoute } from "vue-router";
 import RouteName from "@/router/name";
+import { useIsLongEvents } from "@/composition/apollo/config";
 
 const FullAddressAutoComplete = defineAsyncComponent(
   () => import("@/components/Event/FullAddressAutoComplete.vue")
@@ -73,13 +99,14 @@ const FullAddressAutoComplete = defineAsyncComponent(
 const props = defineProps<{
   address: IAddress | null;
   addressDefaultText?: string | null;
-  search: string;
+  search: string | null;
   distance: number | null;
   fromLocalStorage?: boolean | false;
 }>();
 
 const router = useRouter();
 const route = useRoute();
+const { islongEvents } = useIsLongEvents();
 
 const emit = defineEmits<{
   (event: "update:address", address: IAddress | null): void;
@@ -152,14 +179,16 @@ const modelValueUpdate = (newaddress: IAddress | null) => {
   emit("update:address", newaddress);
 };
 
-const submit = () => {
+const submit = (event) => {
   emit("submit");
+  const btn_classes = event.submitter.getAttribute("class").split(" ");
   const search_query = {
     locationName: undefined,
     lat: undefined,
     lon: undefined,
     search: undefined,
     distance: undefined,
+    contentType: undefined,
   };
   if (search.value != "") {
     search_query.search = search.value;
@@ -173,6 +202,15 @@ const submit = () => {
       search_query.distance = distance.value.toString() + "_km";
     }
   }
+  if (btn_classes.includes("search-Event")) {
+    search_query.contentType = ContentType.EVENTS;
+  }
+  if (btn_classes.includes("search-Activity")) {
+    search_query.contentType = ContentType.LONGEVENTS;
+  }
+  if (btn_classes.includes("search-Group")) {
+    search_query.contentType = ContentType.GROUPS;
+  }
   router.push({
     name: RouteName.SEARCH,
     query: {

src/i18n/en_US.json

@@ -1360,6 +1360,9 @@
   "Keyword, event title, group name, etc.": "Keyword, event title, group name, etc.",
   "Go!": "Go!",
   "Explore!": "Explore!",
+  "Event filter": "Event filter",
+  "Find other activities": "Find other activities",
+  "Find groups": "Find groups",
   "Select distance": "Select distance",
   "Join {instance}, a Mobilizon instance": "Join {instance}, a Mobilizon instance",
   "Open user menu": "Open user menu",

src/i18n/fr_FR.json

@@ -422,6 +422,7 @@
   "Event deleted and report resolved": "Événement supprimé et signalement résolu",
   "Event description body": "Corps de la description de l'événement",
   "Event edition": "Modification d'événement",
+  "Event filter": "Filtrer les événements",
   "Event list": "Liste d'événements",
   "Event metadata": "Métadonnées de l'événement",
   "Event page settings": "Paramètres de la page de l'événement",
@@ -459,7 +460,9 @@
   "Find an address": "Trouver une adresse",
   "Find an instance": "Trouver une instance",
   "Find another instance": "Trouver une autre instance",
+  "Find groups": "Trouver des groupes",
   "Find or add an element": "Trouver ou ajouter un élément",
+  "Find other activities": "Trouver d'autres activités",
   "First steps": "Premiers pas",
   "Follow": "Suivre",
   "Follow a new instance": "Suivre une nouvelle instance",

src/views/HomeView.vue

@@ -247,7 +247,7 @@ const currentUserParticipations = computed(
 
 const increated = ref(0);
 const address = ref(null);
-const search = ref("");
+const search = ref(null);
 const noAddress = ref(false);
 const current_distance = ref(null);