Improve some components

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

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;
   }

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 ||

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() {