Add participant info in event search results

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

js/src/components/Event/EventCard.vue

@@ -26,13 +26,13 @@
             variant="info"
             v-if="event.status === EventStatus.TENTATIVE"
           >
-            {{ $t("Tentative") }}
+            {{ t("Tentative") }}
           </mobilizon-tag>
           <mobilizon-tag
             variant="danger"
             v-if="event.status === EventStatus.CANCELLED"
           >
-            {{ $t("Cancelled") }}
+            {{ t("Cancelled") }}
           </mobilizon-tag>
           <router-link
             :to="{ name: RouteName.TAG, params: { tag: tag.title } }"
@@ -100,24 +100,40 @@
               v-else-if="event.options && event.options.isOnline"
             >
               <Video />
-              <span class="ltr:pl-2 rtl:pr-2">{{ $t("Online") }}</span>
+              <span class="ltr:pl-2 rtl:pr-2">{{ t("Online") }}</span>
             </div>
             <div
               class="mt-1 no-underline gap-1 items-center hidden"
               :class="{ 'sm:flex': mode === 'row' }"
-              v-if="event.tags || event.status !== EventStatus.CONFIRMED"
+              v-if="
+                event.tags ||
+                event.status !== EventStatus.CONFIRMED ||
+                event.participantStats?.participant > 0
+              "
             >
+              <mobilizon-tag
+                variant="info"
+                v-if="event.participantStats?.participant > 0"
+              >
+                {{
+                  t(
+                    "{count} participants",
+                    event.participantStats?.participant,
+                    { count: event.participantStats?.participant }
+                  )
+                }}
+              </mobilizon-tag>
               <mobilizon-tag
                 variant="info"
                 v-if="event.status === EventStatus.TENTATIVE"
               >
-                {{ $t("Tentative") }}
+                {{ t("Tentative") }}
               </mobilizon-tag>
               <mobilizon-tag
                 variant="danger"
                 v-if="event.status === EventStatus.CANCELLED"
               >
-                {{ $t("Cancelled") }}
+                {{ t("Cancelled") }}
               </mobilizon-tag>
               <router-link
                 :to="{ name: RouteName.TAG, params: { tag: tag.title } }"
@@ -156,6 +172,9 @@ import Video from "vue-material-design-icons/Video.vue";
 import { formatDateTimeForEvent } from "@/utils/datetime";
 import type { Locale } from "date-fns";
 import LinkOrRouterLink from "../core/LinkOrRouterLink.vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n({ useScope: "global" });
 
 const props = withDefaults(
   defineProps<{

js/src/components/TagElement.vue

@@ -1,6 +1,6 @@
 <template>
   <span
-    class="rounded-md my-1 truncate text-sm text-violet-title px-2 py-1"
+    class="rounded-md truncate text-sm text-violet-title px-2 py-1"
     :class="[
       typeClasses,
       capitalize,

js/src/graphql/search.ts

@@ -38,6 +38,9 @@ export const SEARCH_EVENTS_AND_GROUPS = gql`
     $eventPage: Int
     $groupPage: Int
     $limit: Int
+    $sortByEvents: SearchEventSortOptions
+    $sortByGroups: SearchGroupSortOptions
+    $boostLanguages: [String]
   ) {
     searchEvents(
       location: $location
@@ -55,6 +58,8 @@ export const SEARCH_EVENTS_AND_GROUPS = gql`
       zoom: $zoom
       page: $eventPage
       limit: $limit
+      sortBy: $sortByEvents
+      boostLanguages: $boostLanguages
     ) {
       total
       elements {
@@ -80,6 +85,9 @@ export const SEARCH_EVENTS_AND_GROUPS = gql`
         attributedTo {
           ...ActorFragment
         }
+        participantStats {
+          participant
+        }
         options {
           isOnline
         }
@@ -96,6 +104,8 @@ export const SEARCH_EVENTS_AND_GROUPS = gql`
       zoom: $zoom
       page: $groupPage
       limit: $limit
+      sortBy: $sortByGroups
+      boostLanguages: $boostLanguages
     ) {
       total
       elements {

js/src/views/SearchView.vue

@@ -2,7 +2,7 @@
   <div class="max-w-4xl mx-auto">
     <SearchFields
       class="md:ml-10 mr-2"
-      v-model:search="searchDebounced"
+      v-model:search="search"
       v-model:location="location"
       :locationDefaultText="locationName"
     />
@@ -736,13 +736,26 @@ enum ViewMode {
   MAP = "map",
 }
 
+enum EventSortValues {
+  MATCH_DESC = "MATCH_DESC",
+  START_TIME_DESC = "START_TIME_DESC",
+  CREATED_AT_DESC = "CREATED_AT_DESC",
+  CREATED_AT_ASC = "CREATED_AT_ASC",
+  PARTICIPANT_COUNT_DESC = "PARTICIPANT_COUNT_DESC",
+}
+
+enum GroupSortValues {
+  MATCH_DESC = "MATCH_DESC",
+  MEMBER_COUNT_DESC = "MEMBER_COUNT_DESC",
+}
+
 enum SortValues {
-  MATCH_DESC = "-match",
-  START_TIME_DESC = "-startTime",
-  CREATED_AT_DESC = "-createdAt",
-  CREATED_AT_ASC = "createdAt",
-  PARTICIPANT_COUNT_DESC = "-participantCount",
-  MEMBER_COUNT_DESC = "-memberCount",
+  MATCH_DESC = "MATCH_DESC",
+  START_TIME_DESC = "START_TIME_DESC",
+  CREATED_AT_DESC = "CREATED_AT_DESC",
+  CREATED_AT_ASC = "CREATED_AT_ASC",
+  PARTICIPANT_COUNT_DESC = "PARTICIPANT_COUNT_DESC",
+  MEMBER_COUNT_DESC = "MEMBER_COUNT_DESC",
 }
 
 const arrayTransformer: RouteQueryTransformer<string[]> = {
@@ -1121,6 +1134,27 @@ watch(isOnline, (newIsOnline) => {
   }
 });
 
+const sortByForType = (
+  value: SortValues,
+  allowed: typeof EventSortValues | typeof GroupSortValues
+): SortValues | undefined => {
+  return Object.values(allowed).includes(value) ? value : undefined;
+};
+
+const boostLanguagesQuery = computed((): string[] => {
+  const languages = new Set<string>();
+
+  for (const completeLanguage of navigator.languages) {
+    const language = completeLanguage.split("-")[0];
+
+    if (Object.keys(langs).find((langKey) => langKey === language)) {
+      languages.add(language);
+    }
+  }
+
+  return Array.from(languages);
+});
+
 const { result: searchElementsResult, loading: searchLoading } = useQuery<{
   searchEvents: Paginate<TypeNamed<IEvent>>;
   searchGroups: Paginate<TypeNamed<IGroup>>;
@@ -1139,7 +1173,10 @@ const { result: searchElementsResult, loading: searchLoading } = useQuery<{
   statusOneOf: statusOneOf.value,
   languageOneOf: languageOneOf.value,
   searchTarget: searchTarget.value,
-  bbox: bbox.value,
+  bbox: mode.value === ViewMode.MAP ? bbox.value : undefined,
   zoom: zoom.value,
+  sortByEvents: sortByForType(sortBy.value, EventSortValues),
+  sortByGroups: sortByForType(sortBy.value, GroupSortValues),
+  boostLanguages: boostLanguagesQuery.value,
 }));
 </script>