From 096c3a435a44547fd3564d10727919c4e3aab3f5 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Sat, 6 Nov 2021 10:08:20 +0100
Subject: [PATCH] Improve some components

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Event/EventCard.vue         |   2 +-
 .../Event/FullAddressAutoComplete.vue         |  64 +---------
 js/src/components/Event/MultiCard.vue         |   9 +-
 js/src/components/Group/GroupCard.vue         | 117 ++++++++++++++----
 js/src/components/Group/MultiGroupCard.vue    |  39 ++++++
 js/src/graphql/event.ts                       |  38 ------
 js/src/graphql/group.ts                       |  16 +++
 js/src/graphql/home.ts                        |  48 +++++++
 js/src/graphql/search.ts                      |  41 +++---
 js/src/i18n/en_US.json                        |   4 +-
 js/src/i18n/fr_FR.json                        |   4 +-
 js/src/mixins/AddressAutoCompleteMixin.ts     |  26 +++-
 js/src/views/Group/GroupSettings.vue          |  36 +++---
 js/src/views/Home.vue                         |  12 +-
 js/src/views/Search.vue                       |  68 +++-------
 15 files changed, 299 insertions(+), 225 deletions(-)
 create mode 100644 js/src/components/Group/MultiGroupCard.vue

diff --git a/js/src/components/Event/EventCard.vue b/js/src/components/Event/EventCard.vue
index d9010d580..269e41b13 100644
--- a/js/src/components/Event/EventCard.vue
+++ b/js/src/components/Event/EventCard.vue
@@ -1,7 +1,7 @@
 <template>
   <router-link
     class="card"
-    :to="{ name: 'Event', params: { uuid: event.uuid } }"
+    :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
   >
     <div class="card-image">
       <figure class="image is-16by9">
diff --git a/js/src/components/Event/FullAddressAutoComplete.vue b/js/src/components/Event/FullAddressAutoComplete.vue
index c1322a28c..7518aa2f3 100644
--- a/js/src/components/Event/FullAddressAutoComplete.vue
+++ b/js/src/components/Event/FullAddressAutoComplete.vue
@@ -42,7 +42,7 @@
             ><br />
             <small>{{ option.poiInfos.alternativeName }}</small>
           </template>
-          <template slot="empty">
+          <template #empty>
             <span v-if="isFetching">{{ $t("Searching…") }}</span>
             <div v-else-if="queryText.length >= 3" class="is-enabled">
               <span>{{
@@ -83,7 +83,7 @@
     </div>
     <div
       class="map column"
-      v-if="selected && selected.geom && selected.poiInfos"
+      v-if="!hideMap && selected && selected.geom && selected.poiInfos"
     >
       <map-leaflet
         :coords="selected.geom"
@@ -96,47 +96,6 @@
         :readOnly="false"
       />
     </div>
-    <!--        <b-modal v-if="selected" :active.sync="addressModalActive" :width="640" has-modal-card scroll="keep">-->
-    <!--            <div class="modal-card" style="width: auto">-->
-    <!--                <header class="modal-card-head">-->
-    <!--                    <p class="modal-card-title">{{ $t('Add an address') }}</p>-->
-    <!--                </header>-->
-    <!--                <section class="modal-card-body">-->
-    <!--                    <form>-->
-    <!--                        <b-field :label="$t('Name')">-->
-    <!--                            <b-input aria-required="true" required v-model="selected.description" />-->
-    <!--                        </b-field>-->
-
-    <!--                        <b-field :label="$t('Street')">-->
-    <!--                            <b-input v-model="selected.street" />-->
-    <!--                        </b-field>-->
-
-    <!--                        <b-field grouped>-->
-    <!--                            <b-field :label="$t('Postal Code')">-->
-    <!--                                <b-input v-model="selected.postalCode" />-->
-    <!--                            </b-field>-->
-
-    <!--                            <b-field :label="$t('Locality')">-->
-    <!--                                <b-input v-model="selected.locality" />-->
-    <!--                            </b-field>-->
-    <!--                        </b-field>-->
-
-    <!--                        <b-field grouped>-->
-    <!--                            <b-field :label="$t('Region')">-->
-    <!--                                <b-input v-model="selected.region" />-->
-    <!--                            </b-field>-->
-
-    <!--                            <b-field :label="$t('Country')">-->
-    <!--                                <b-input v-model="selected.country" />-->
-    <!--                            </b-field>-->
-    <!--                        </b-field>-->
-    <!--                    </form>-->
-    <!--                </section>-->
-    <!--                <footer class="modal-card-foot">-->
-    <!--                    <button class="button" type="button" @click="resetPopup()">{{ $t('Clear') }}</button>-->
-    <!--                </footer>-->
-    <!--            </div>-->
-    <!--        </b-modal>-->
   </div>
 </template>
 <script lang="ts">
@@ -158,6 +117,7 @@ export default class FullAddressAutoComplete extends Mixins(
   @Prop({ required: false, default: "" }) label!: string;
   @Prop({ required: false }) userTimezone!: string;
   @Prop({ required: false, default: false, type: Boolean }) disabled!: boolean;
+  @Prop({ required: false, default: false, type: Boolean }) hideMap!: boolean;
 
   addressModalActive = false;
 
@@ -175,10 +135,6 @@ export default class FullAddressAutoComplete extends Mixins(
   updateEditing(): void {
     if (!(this.value && this.value.id)) return;
     this.selected = this.value;
-    const address = new Address(this.selected);
-    if (address.poiInfos) {
-      this.queryText = `${address.poiInfos.name} ${address.poiInfos.alternativeName}`;
-    }
   }
 
   updateSelected(option: IAddress): void {
@@ -212,20 +168,6 @@ export default class FullAddressAutoComplete extends Mixins(
   get canShowLocateMeButton(): boolean {
     return window.isSecureContext;
   }
-
-  @Watch("queryText")
-  resetAddressOnEmptyField(queryText: string): void {
-    if (queryText === "" && this.selected?.id) {
-      console.log("doing reset");
-      this.resetAddress();
-    }
-  }
-
-  resetAddress(): void {
-    this.$emit("input", null);
-    this.queryText = "";
-    this.selected = new Address();
-  }
 }
 </script>
 <style lang="scss">
diff --git a/js/src/components/Event/MultiCard.vue b/js/src/components/Event/MultiCard.vue
index da4669ee2..3eca7f19c 100644
--- a/js/src/components/Event/MultiCard.vue
+++ b/js/src/components/Event/MultiCard.vue
@@ -29,14 +29,7 @@ export default class MultiCard extends Vue {
   grid-auto-rows: 1fr;
   grid-column-gap: 30px;
   grid-row-gap: 30px;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  // @media (min-width: 400px) {
-  //   grid-template-columns: repeat(2, 1fr);
-  // }
-  // @media (min-width: 800px) {
-  //   grid-template-columns: repeat(4, 1fr);
-  // }
-
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   .event-card {
     height: 100%;
     display: flex;
diff --git a/js/src/components/Group/GroupCard.vue b/js/src/components/Group/GroupCard.vue
index cf8d40bb8..a436df397 100644
--- a/js/src/components/Group/GroupCard.vue
+++ b/js/src/components/Group/GroupCard.vue
@@ -1,7 +1,21 @@
 <template>
-  <div class="card">
+  <router-link
+    :to="{
+      name: RouteName.GROUP,
+      params: { preferredUsername: usernameWithDomain(group) },
+    }"
+    class="card"
+  >
+    <div class="card-image">
+      <figure class="image is-16by9">
+        <lazy-image-wrapper
+          :picture="group.banner"
+          style="height: 100%; position: absolute; top: 0; left: 0; width: 100%"
+        />
+      </figure>
+    </div>
     <div class="card-content">
-      <div class="media">
+      <div class="media mb-3">
         <div class="media-left">
           <figure class="image is-48x48" v-if="group.avatar">
             <img class="is-rounded" :src="group.avatar.url" alt="" />
@@ -9,40 +23,101 @@
           <b-icon v-else size="is-large" icon="account-group" />
         </div>
         <div class="media-content">
-          <router-link
-            :to="{
-              name: RouteName.GROUP,
-              params: { preferredUsername: usernameWithDomain(group) },
-            }"
-          >
-            <h3>{{ group.name }}</h3>
-            <p class="is-6 has-text-grey">
-              <span v-if="group.domain">{{
-                `@${group.preferredUsername}@${group.domain}`
-              }}</span>
-              <span v-else>{{ `@${group.preferredUsername}` }}</span>
-            </p>
-          </router-link>
+          <h3 class="is-size-5 group-title">{{ displayName(group) }}</h3>
+          <span class="is-6 has-text-grey-dark">
+            {{ `@${usernameWithDomain(group)}` }}
+          </span>
         </div>
       </div>
-      <div class="content">
-        <p>{{ group.summary }}</p>
+      <div class="content" v-html="group.summary" />
+      <div class="card-custom-footer">
+        <span class="has-text-grey-dark">
+          {{
+            $tc(
+              "{count} members or followers",
+              group.members.total + group.followers.total,
+              {
+                count: group.members.total + group.followers.total,
+              }
+            )
+          }}
+        </span>
       </div>
     </div>
-  </div>
+  </router-link>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { IGroup, usernameWithDomain } from "@/types/actor";
+import { displayName, IGroup, usernameWithDomain } from "@/types/actor";
+import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
 import RouteName from "../../router/name";
 
-@Component
+@Component({
+  components: {
+    LazyImageWrapper,
+  },
+})
 export default class GroupCard extends Vue {
   @Prop({ required: true }) group!: IGroup;
 
   RouteName = RouteName;
 
   usernameWithDomain = usernameWithDomain;
+
+  displayName = displayName;
 }
 </script>
+<style lang="scss" scoped>
+.card {
+  .card-content {
+    padding: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .content {
+      flex: 1;
+    }
+
+    ::v-deep .content {
+      & > *:first-child {
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        margin-bottom: 0;
+
+        * {
+          font-weight: normal;
+          text-transform: none;
+          font-style: normal;
+          text-decoration: none;
+        }
+      }
+      & > *:not(:first-child) {
+        display: none;
+      }
+    }
+
+    .media-left {
+      margin-right: inherit;
+      margin-inline-end: 0.5rem;
+    }
+
+    .media-content {
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      .group-title {
+        line-height: 1.75rem;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        font-weight: bold;
+      }
+    }
+  }
+}
+</style>
diff --git a/js/src/components/Group/MultiGroupCard.vue b/js/src/components/Group/MultiGroupCard.vue
new file mode 100644
index 000000000..392581c5f
--- /dev/null
+++ b/js/src/components/Group/MultiGroupCard.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="multi-card-group">
+    <group-card
+      class="group-card"
+      v-for="group in groups"
+      :group="group"
+      :key="group.id"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { IGroup } from "@/types/actor";
+import { PropType } from "vue";
+import { Component, Prop, Vue } from "vue-property-decorator";
+import GroupCard from "./GroupCard.vue";
+@Component({
+  components: {
+    GroupCard,
+  },
+})
+export default class MultiGroupCard extends Vue {
+  @Prop({ type: Array as PropType<IGroup[]>, required: true })
+  groups!: IGroup[];
+}
+</script>
+<style lang="scss" scoped>
+.multi-card-group {
+  display: grid;
+  grid-auto-rows: 1fr;
+  grid-column-gap: 30px;
+  grid-row-gap: 30px;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  .group-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/js/src/graphql/event.ts b/js/src/graphql/event.ts
index 2385e0db9..63cfd8967 100644
--- a/js/src/graphql/event.ts
+++ b/js/src/graphql/event.ts
@@ -466,44 +466,6 @@ export const FETCH_GROUP_EVENTS = gql`
   ${ADDRESS_FRAGMENT}
 `;
 
-export const CLOSE_EVENTS = gql`
-  query CloseEvents($location: String, $radius: Float) {
-    searchEvents(location: $location, radius: $radius, page: 1, limit: 10) {
-      total
-      elements {
-        id
-        title
-        uuid
-        beginsOn
-        picture {
-          id
-          url
-        }
-        tags {
-          ...TagFragment
-        }
-        options {
-          ...EventOptions
-        }
-        physicalAddress {
-          ...AdressFragment
-        }
-        attributedTo {
-          ...ActorFragment
-        }
-        organizerActor {
-          ...ActorFragment
-        }
-        __typename
-      }
-    }
-  }
-  ${ADDRESS_FRAGMENT}
-  ${TAG_FRAGMENT}
-  ${EVENT_OPTIONS_FRAGMENT}
-  ${ACTOR_FRAGMENT}
-`;
-
 export const EXPORT_EVENT_PARTICIPATIONS = gql`
   mutation ExportEventParticipants(
     $eventId: ID!
diff --git a/js/src/graphql/group.ts b/js/src/graphql/group.ts
index 481f15286..6ff9ac71e 100644
--- a/js/src/graphql/group.ts
+++ b/js/src/graphql/group.ts
@@ -408,3 +408,19 @@ export const GROUP_TIMELINE = gql`
   }
   ${ACTOR_FRAGMENT}
 `;
+
+export const CLOSE_GROUPS = gql`
+  query CloseGroups($location: String, $radius: Float) {
+    searchGroups(location: $location, radius: $radius, page: 1, limit: 10) {
+      total
+      elements {
+        ...ActorFragment
+        physicalAddress {
+          ...AdressFragment
+        }
+      }
+    }
+  }
+  ${ACTOR_FRAGMENT}
+  ${ADDRESS_FRAGMENT}
+`;
diff --git a/js/src/graphql/home.ts b/js/src/graphql/home.ts
index 0b6ff5c11..ae2b6cfc0 100644
--- a/js/src/graphql/home.ts
+++ b/js/src/graphql/home.ts
@@ -105,3 +105,51 @@ export const HOME_USER_QUERIES = gql`
   ${EVENT_OPTIONS_FRAGMENT}
   ${ACTOR_FRAGMENT}
 `;
+
+export const CLOSE_CONTENT = gql`
+  query CloseContent(
+    $location: String!
+    $radius: Float
+    $page: Int
+    $limit: Int
+  ) {
+    searchEvents(
+      location: $location
+      radius: $radius
+      page: $page
+      limit: $limit
+    ) {
+      total
+      elements {
+        id
+        title
+        uuid
+        beginsOn
+        picture {
+          id
+          url
+        }
+        tags {
+          ...TagFragment
+        }
+        options {
+          ...EventOptions
+        }
+        physicalAddress {
+          ...AdressFragment
+        }
+        attributedTo {
+          ...ActorFragment
+        }
+        organizerActor {
+          ...ActorFragment
+        }
+        __typename
+      }
+    }
+  }
+  ${ADDRESS_FRAGMENT}
+  ${TAG_FRAGMENT}
+  ${EVENT_OPTIONS_FRAGMENT}
+  ${ACTOR_FRAGMENT}
+`;
diff --git a/js/src/graphql/search.ts b/js/src/graphql/search.ts
index b2f18ec6c..abb85fc21 100644
--- a/js/src/graphql/search.ts
+++ b/js/src/graphql/search.ts
@@ -1,8 +1,10 @@
 import gql from "graphql-tag";
 import { ACTOR_FRAGMENT } from "./actor";
+import { ADDRESS_FRAGMENT } from "./address";
+import { TAG_FRAGMENT } from "./tags";
 
-export const SEARCH_EVENTS = gql`
-  query SearchEvents(
+export const SEARCH_EVENTS_AND_GROUPS = gql`
+  query SearchEventsAndGroups(
     $location: String
     $radius: Float
     $tags: String
@@ -33,23 +35,20 @@ export const SEARCH_EVENTS = gql`
           url
         }
         tags {
-          slug
-          title
+          ...TagFragment
+        }
+        physicalAddress {
+          ...AdressFragment
+        }
+        organizerActor {
+          ...ActorFragment
+        }
+        attributedTo {
+          ...ActorFragment
         }
         __typename
       }
     }
-  }
-`;
-
-export const SEARCH_GROUPS = gql`
-  query SearchGroups(
-    $term: String
-    $location: String
-    $radius: Float
-    $page: Int
-    $limit: Int
-  ) {
     searchGroups(
       term: $term
       location: $location
@@ -60,9 +59,21 @@ export const SEARCH_GROUPS = gql`
       total
       elements {
         ...ActorFragment
+        banner {
+          id
+          url
+        }
+        members(roles: "member,moderator,administrator,creator") {
+          total
+        }
+        followers(approved: true) {
+          total
+        }
       }
     }
   }
+  ${TAG_FRAGMENT}
+  ${ADDRESS_FRAGMENT}
   ${ACTOR_FRAGMENT}
 `;
 
diff --git a/js/src/i18n/en_US.json b/js/src/i18n/en_US.json
index 2fff97df0..fdabf1d94 100644
--- a/js/src/i18n/en_US.json
+++ b/js/src/i18n/en_US.json
@@ -1226,5 +1226,7 @@
   "Post {eventTitle} reported": "Post {eventTitle} reported",
   "You have attended {count} events in the past.": "You have not attended any events in the past.|You have attended one event in the past.|You have attended {count} events in the past.",
   "Showing events starting on": "Showing events starting on",
-  "Showing events before": "Showing events before"
+  "Showing events before": "Showing events before",
+  "Clear date filter field": "Clear date filter field",
+  "{count} members or followers": "No members or followers|One member or follower|{count} members or followers"
 }
diff --git a/js/src/i18n/fr_FR.json b/js/src/i18n/fr_FR.json
index 960689693..1ab624ec1 100644
--- a/js/src/i18n/fr_FR.json
+++ b/js/src/i18n/fr_FR.json
@@ -1330,5 +1330,7 @@
   "Post {eventTitle} reported": "Billet {eventTitle} signalé",
   "You have attended {count} events in the past.": "Vous n'avez participé à aucun événement par le passé.|Vous avez participé à un événement par le passé.|Vous avez participé à {count} événements par le passé.",
   "Showing events starting on": "Afficher les événements à partir de",
-  "Showing events before": "Afficher les événements avant"
+  "Showing events before": "Afficher les événements avant",
+  "Clear date filter field": "Vider le champ de filtre de la date",
+  "{count} members or followers": "Aucun⋅e membre ou abonné⋅e|Un⋅e membre ou abonné⋅e|{count} membres ou abonné⋅es"
 }
diff --git a/js/src/mixins/AddressAutoCompleteMixin.ts b/js/src/mixins/AddressAutoCompleteMixin.ts
index 67797a280..7616a3de0 100644
--- a/js/src/mixins/AddressAutoCompleteMixin.ts
+++ b/js/src/mixins/AddressAutoCompleteMixin.ts
@@ -1,4 +1,3 @@
-import { mixins } from "vue-class-component";
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 import { LatLng } from "leaflet";
 import { Address, IAddress } from "../types/address.model";
@@ -7,6 +6,7 @@ import { CONFIG } from "../graphql/config";
 import { IConfig } from "../types/config.model";
 import debounce from "lodash/debounce";
 import { DebouncedFunc } from "lodash";
+import { PropType } from "vue";
 
 @Component({
   components: {
@@ -17,8 +17,9 @@ import { DebouncedFunc } from "lodash";
     config: CONFIG,
   },
 })
-export default class AddressAutoCompleteMixin extends mixins(Vue) {
-  @Prop({ required: true }) value!: IAddress;
+export default class AddressAutoCompleteMixin extends Vue {
+  @Prop({ required: true, type: Object as PropType<IAddress> })
+  value!: IAddress;
   gettingLocationError: string | null = null;
 
   gettingLocation = false;
@@ -29,8 +30,6 @@ export default class AddressAutoCompleteMixin extends mixins(Vue) {
 
   selected: IAddress = new Address();
 
-  queryText: string = (this.value && new Address(this.value).fullName) || "";
-
   config!: IConfig;
 
   isFetching = false;
@@ -85,6 +84,22 @@ export default class AddressAutoCompleteMixin extends mixins(Vue) {
     this.isFetching = false;
   }
 
+  get queryText(): string {
+    return (this.value && new Address(this.value).fullName) || "";
+  }
+
+  set queryText(text: string) {
+    if (text === "" && this.selected?.id) {
+      console.log("doing reset");
+      this.resetAddress();
+    }
+  }
+
+  resetAddress(): void {
+    this.$emit("input", null);
+    this.selected = new Address();
+  }
+
   async locateMe(): Promise<void> {
     this.gettingLocation = true;
     this.gettingLocationError = null;
@@ -124,7 +139,6 @@ export default class AddressAutoCompleteMixin extends mixins(Vue) {
       const defaultAddress = new Address(this.addressData[0]);
       this.selected = defaultAddress;
       this.$emit("input", this.selected);
-      this.queryText = `${defaultAddress.poiInfos.name} ${defaultAddress.poiInfos.alternativeName}`;
     }
   }
 
diff --git a/js/src/views/Group/GroupSettings.vue b/js/src/views/Group/GroupSettings.vue
index 883b35fd3..e49dfccf4 100644
--- a/js/src/views/Group/GroupSettings.vue
+++ b/js/src/views/Group/GroupSettings.vue
@@ -153,8 +153,8 @@
 
         <full-address-auto-complete
           :label="$t('Group address')"
-          v-model="editableGroup.physicalAddress"
-          :value="currentAddress"
+          v-model="currentAddress"
+          :hideMap="true"
         />
 
         <div class="buttons">
@@ -184,7 +184,7 @@ import { mixins } from "vue-class-component";
 import GroupMixin from "@/mixins/group";
 import { GroupVisibility, Openness } from "@/types/enums";
 import { UPDATE_GROUP } from "../../graphql/group";
-import { IGroup, usernameWithDomain } from "../../types/actor";
+import { Group, IGroup, usernameWithDomain } from "../../types/actor";
 import { Address, IAddress } from "../../types/address.model";
 import { CONFIG } from "@/graphql/config";
 import { IConfig } from "@/types/config.model";
@@ -209,14 +209,10 @@ import { buildFileFromIMedia } from "@/utils/image";
   },
 })
 export default class GroupSettings extends mixins(GroupMixin) {
-  loading = true;
-
   RouteName = RouteName;
 
   config!: IConfig;
 
-  newMemberUsername = "";
-
   errors: string[] = [];
 
   avatarFile: File | null = null;
@@ -231,12 +227,11 @@ export default class GroupSettings extends mixins(GroupMixin) {
 
   showCopiedTooltip = false;
 
-  editableGroup!: IGroup;
+  editableGroup: IGroup = new Group();
 
   async updateGroup(): Promise<void> {
     try {
       const variables = this.buildVariables();
-      console.log(variables);
       await this.$apollo.mutate<{ updateGroup: IGroup }>({
         mutation: UPDATE_GROUP,
         variables,
@@ -275,14 +270,23 @@ export default class GroupSettings extends mixins(GroupMixin) {
     let avatarObj = {};
     let bannerObj = {};
     const variables = { ...this.editableGroup };
-    const physicalAddress = {
-      ...variables.physicalAddress,
-    };
+    let physicalAddress;
+    if (variables.physicalAddress) {
+      physicalAddress = { ...variables.physicalAddress };
+    } else {
+      physicalAddress = variables.physicalAddress;
+    }
 
     // eslint-disable-next-line
     // @ts-ignore
-    delete variables.__typename;
-    if (physicalAddress) {
+    if (variables.__typename) {
+      // eslint-disable-next-line
+      // @ts-ignore
+      delete variables.__typename;
+    }
+    // eslint-disable-next-line
+    // @ts-ignore
+    if (physicalAddress && physicalAddress.__typename) {
       // eslint-disable-next-line
       // @ts-ignore
       delete physicalAddress.__typename;
@@ -335,6 +339,10 @@ export default class GroupSettings extends mixins(GroupMixin) {
     return new Address(this.editableGroup.physicalAddress);
   }
 
+  set currentAddress(address: IAddress) {
+    this.editableGroup.physicalAddress = address;
+  }
+
   get avatarMaxSize(): number | undefined {
     return this?.config?.uploadLimits?.avatar;
   }
diff --git a/js/src/views/Home.vue b/js/src/views/Home.vue
index 751f94b7e..ebb45a25f 100644
--- a/js/src/views/Home.vue
+++ b/js/src/views/Home.vue
@@ -328,7 +328,7 @@ import { EventSortField, ParticipantRole, SortDirection } from "@/types/enums";
 import { Paginate } from "@/types/paginate";
 import { supportsWebPFormat } from "@/utils/support";
 import { IParticipant, Participant } from "../types/participant.model";
-import { CLOSE_EVENTS, FETCH_EVENTS } from "../graphql/event";
+import { FETCH_EVENTS } from "../graphql/event";
 import EventParticipationCard from "../components/Event/EventParticipationCard.vue";
 import MultiCard from "../components/Event/MultiCard.vue";
 import { CURRENT_ACTOR_CLIENT } from "../graphql/actor";
@@ -339,7 +339,7 @@ import {
   IUserSettings,
 } from "../types/current-user.model";
 import { CURRENT_USER_CLIENT } from "../graphql/user";
-import { HOME_USER_QUERIES } from "../graphql/home";
+import { CLOSE_CONTENT, HOME_USER_QUERIES } from "../graphql/home";
 import RouteName from "../router/name";
 import { IEvent } from "../types/event.model";
 import DateComponent from "../components/Event/DateCalendarIcon.vue";
@@ -363,15 +363,17 @@ import Subtitle from "../components/Utils/Subtitle.vue";
     },
     currentUser: CURRENT_USER_CLIENT,
     config: CONFIG,
-    closeEvents: {
-      query: CLOSE_EVENTS,
+    closeContent: {
+      query: CLOSE_CONTENT,
       variables() {
         return {
           location: this.loggedUser?.settings?.location?.geohash,
           radius: this.loggedUser?.settings?.location?.range,
         };
       },
-      update: (data) => data.searchEvents,
+      update(data) {
+        this.closeEvents = data.searchEvents;
+      },
       skip() {
         return (
           !this.currentUser?.isLoggedIn ||
diff --git a/js/src/views/Search.vue b/js/src/views/Search.vue
index f935df5a5..e51e26a7b 100644
--- a/js/src/views/Search.vue
+++ b/js/src/views/Search.vue
@@ -70,15 +70,7 @@
       <b-loading :active.sync="$apollo.loading"></b-loading>
       <h2 class="title">{{ $t("Featured events") }}</h2>
       <div v-if="events.elements.length > 0">
-        <div class="columns is-multiline">
-          <div
-            class="column is-one-third-desktop"
-            v-for="event in events.elements"
-            :key="event.uuid"
-          >
-            <EventCard :event="event" />
-          </div>
-        </div>
+        <multi-card :events="events.elements" />
         <div class="pagination" v-if="events.total > EVENT_PAGE_LIMIT">
           <b-pagination
             :total="events.total"
@@ -98,7 +90,7 @@
         >{{ $t("No events found") }}</b-message
       >
     </section>
-    <b-tabs v-else v-model="activeTab" type="is-boxed" class="searchTabs">
+    <b-tabs v-else v-model="activeTab" type="is-boxed" class="mt-3 searchTabs">
       <b-loading :active.sync="$apollo.loading"></b-loading>
       <b-tab-item>
         <template slot="header">
@@ -109,15 +101,7 @@
           </span>
         </template>
         <div v-if="searchEvents.total > 0">
-          <div class="columns is-multiline">
-            <div
-              class="column is-one-third-desktop"
-              v-for="event in searchEvents.elements"
-              :key="event.uuid"
-            >
-              <EventCard :event="event" />
-            </div>
-          </div>
+          <multi-card class="my-4" :events="searchEvents.elements" />
           <div class="pagination" v-if="searchEvents.total > EVENT_PAGE_LIMIT">
             <b-pagination
               :total="searchEvents.total"
@@ -146,15 +130,7 @@
           {{ $t("Groups are not enabled on this instance.") }}
         </b-message>
         <div v-else-if="searchGroups.total > 0">
-          <div class="columns is-multiline">
-            <div
-              class="column is-one-third-desktop"
-              v-for="group in searchGroups.elements"
-              :key="group.uuid"
-            >
-              <group-card :group="group" />
-            </div>
-          </div>
+          <multi-group-card class="my-4" :groups="searchGroups.elements" />
           <div class="pagination">
             <b-pagination
               :total="searchGroups.total"
@@ -193,16 +169,16 @@ import {
   eachWeekendOfInterval,
 } from "date-fns";
 import { SearchTabs } from "@/types/enums";
-import EventCard from "../components/Event/EventCard.vue";
+import MultiCard from "../components/Event/MultiCard.vue";
 import { FETCH_EVENTS } from "../graphql/event";
 import { IEvent } from "../types/event.model";
 import RouteName from "../router/name";
 import { IAddress, Address } from "../types/address.model";
 import AddressAutoComplete from "../components/Event/AddressAutoComplete.vue";
-import { SEARCH_EVENTS, SEARCH_GROUPS } from "../graphql/search";
+import { SEARCH_EVENTS_AND_GROUPS } from "../graphql/search";
 import { Paginate } from "../types/paginate";
 import { IGroup } from "../types/actor";
-import GroupCard from "../components/Group/GroupCard.vue";
+import MultiGroupCard from "../components/Group/MultiGroupCard.vue";
 import { CONFIG } from "../graphql/config";
 import { REVERSE_GEOCODE } from "../graphql/address";
 
@@ -226,9 +202,9 @@ const THROTTLE = 2000; // minimum interval in ms between two requests
 
 @Component({
   components: {
-    EventCard,
+    MultiCard,
     AddressAutoComplete,
-    GroupCard,
+    MultiGroupCard,
   },
   apollo: {
     config: CONFIG,
@@ -241,8 +217,8 @@ const THROTTLE = 2000; // minimum interval in ms between two requests
         };
       },
     },
-    searchEvents: {
-      query: SEARCH_EVENTS,
+    search: {
+      query: SEARCH_EVENTS_AND_GROUPS,
       fetchPolicy: "cache-and-network",
       variables() {
         return {
@@ -256,27 +232,11 @@ const THROTTLE = 2000; // minimum interval in ms between two requests
           limit: EVENT_PAGE_LIMIT,
         };
       },
-      throttle: THROTTLE,
-      skip() {
-        return !this.canSearchEvents;
-      },
-    },
-    searchGroups: {
-      query: SEARCH_GROUPS,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          term: this.search,
-          location: this.geohash,
-          radius: this.radius,
-          page: this.groupPage,
-          limit: GROUP_PAGE_LIMIT,
-        };
+      update(data) {
+        this.searchEvents = data.searchEvents;
+        this.searchGroups = data.searchGroups;
       },
       throttle: THROTTLE,
-      skip() {
-        return !this.canSearchGroups;
-      },
     },
   },
   metaInfo() {