#1636: add number of elements for each buttons

src/components/Home/SearchFields.vue

@@ -54,7 +54,7 @@
       native-type="submit"
       icon-left="calendar"
     >
-      {{ t("Events") }}
+      {{ t("Events") + number_result("EVENTS") }}
     </o-button>
     <o-button
       :class="
@@ -65,7 +65,7 @@
       icon-left="calendar-star"
       v-if="isLongEvents"
     >
-      {{ t("Activities") }}
+      {{ t("Activities") + number_result("LONGEVENTS") }}
     </o-button>
     <o-button
       :class="
@@ -74,7 +74,7 @@
       native-type="submit"
       icon-left="account-multiple"
     >
-      {{ t("Groups") }}
+      {{ t("Groups") + number_result("GROUPS") }}
     </o-button>
   </form>
 </template>
@@ -103,6 +103,7 @@ const props = defineProps<{
   search: string | null;
   distance: number | null;
   fromLocalStorage?: boolean | false;
+  numberOfSearch: object | null;
 }>();
 
 const router = useRouter();
@@ -184,6 +185,18 @@ const select_button_class = (current_content_type: string) => {
   }
 };
 
+const number_result = (current_content_type: string) => {
+  console.log(">> number_result", props.numberOfSearch);
+  if (props.numberOfSearch == undefined) {
+    return "";
+  }
+  const nb_value = props.numberOfSearch[current_content_type];
+  if (nb_value == undefined) {
+    return "";
+  }
+  return " (" + nb_value.toString() + ")";
+};
+
 console.debug("initial", distance.value, search.value, address.value);
 
 const modelValueUpdate = (newaddress: IAddress | null) => {

src/views/SearchView.vue

@@ -5,6 +5,7 @@
       v-model:search="search"
       v-model:address="address"
       v-model:distance="radius"
+      :numberOfSearch="numberOfSearch"
       :addressDefaultText="addressName"
       :fromLocalStorage="true"
     />
@@ -571,7 +572,7 @@ import {
 import { ContentType, EventStatus, SearchTargets } from "@/types/enums";
 import EventCard from "@/components/Event/EventCard.vue";
 import { IEvent } from "@/types/event.model";
-import { SEARCH_EVENTS_AND_GROUPS } from "@/graphql/search";
+import { SEARCH_EVENTS_AND_GROUPS, SEARCH_EVENTS } from "@/graphql/search";
 import { Paginate } from "@/types/paginate";
 import { IGroup } from "@/types/actor";
 import GroupCard from "@/components/Group/GroupCard.vue";
@@ -723,8 +724,22 @@ const orderedCategories = computed(() => {
 });
 
 const searchEvents = computed(() => searchElementsResult.value?.searchEvents);
+const searchShortEvents = computed(
+  () => searchShortElementsResult.value?.searchEvents
+);
+const searchLongEvents = computed(
+  () => searchLongElementsResult.value?.searchEvents
+);
 const searchGroups = computed(() => searchElementsResult.value?.searchGroups);
 
+const numberOfSearch = computed(() => {
+  return {
+    EVENTS: searchShortEvents.value?.total,
+    LONGEVENTS: searchLongEvents.value?.total,
+    GROUPS: searchGroups.value?.total,
+  };
+});
+
 const { result: currentUserResult } = useQuery<{ currentUser: ICurrentUser }>(
   CURRENT_USER_CLIENT
 );
@@ -1065,4 +1080,46 @@ const { result: searchElementsResult, loading: searchLoading } = useQuery<{
   sortByGroups: sortByGroups.value,
   boostLanguages: boostLanguagesQuery.value,
 }));
+
+const { result: searchShortElementsResult } = useQuery<{
+  searchEvents: Paginate<TypeNamed<IEvent>>;
+}>(SEARCH_EVENTS, () => ({
+  term: searchDebounced.value,
+  tags: tag.value,
+  location: geoHashLocation.value,
+  beginsOn: start.value,
+  endsOn: end.value,
+  longEvents: false,
+  radius: geoHashLocation.value ? radius.value : undefined,
+  limit: 0,
+  type: isOnline.value ? "ONLINE" : undefined,
+  categoryOneOf: categoryOneOf.value,
+  statusOneOf: statusOneOf.value,
+  languageOneOf: languageOneOf.value,
+  searchTarget: searchTarget.value,
+  bbox: mode.value === ViewMode.MAP ? bbox.value : undefined,
+  zoom: zoom.value,
+  boostLanguages: boostLanguagesQuery.value,
+}));
+
+const { result: searchLongElementsResult } = useQuery<{
+  searchEvents: Paginate<TypeNamed<IEvent>>;
+}>(SEARCH_EVENTS, () => ({
+  term: searchDebounced.value,
+  tags: tag.value,
+  location: geoHashLocation.value,
+  beginsOn: start.value,
+  endsOn: end.value,
+  longEvents: true,
+  radius: geoHashLocation.value ? radius.value : undefined,
+  limit: 0,
+  type: isOnline.value ? "ONLINE" : undefined,
+  categoryOneOf: categoryOneOf.value,
+  statusOneOf: statusOneOf.value,
+  languageOneOf: languageOneOf.value,
+  searchTarget: searchTarget.value,
+  bbox: mode.value === ViewMode.MAP ? bbox.value : undefined,
+  zoom: zoom.value,
+  boostLanguages: boostLanguagesQuery.value,
+}));
 </script>