Event edit and participant fixes

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

js/src/views/Event/Edit.vue

@@ -486,6 +486,7 @@ import "intersection-observer";
 import { CONFIG } from "../../graphql/config";
 import { IConfig } from "../../types/config.model";
 import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
+import { cloneDeep } from "@apollo/client/utilities";
 
 const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
 
@@ -512,7 +513,7 @@ const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
         };
       },
       update(data) {
-        return new EventModel(data.event);
+        return new EventModel(cloneDeep(data.event));
       },
       skip() {
         return !this.eventId;
@@ -547,8 +548,6 @@ export default class EditEvent extends Vue {
 
   config!: IConfig;
 
-  unmodifiedEvent!: IEvent;
-
   pictureFile: File | null = null;
 
   EventStatus = EventStatus;
@@ -646,7 +645,11 @@ export default class EditEvent extends Vue {
     if (!(this.isUpdate || this.isDuplicate)) {
       this.initializeEvent();
     } else {
-      this.event.description = this.event.description || "";
+      this.event = {
+        ...this.event,
+        options: this.event.options,
+        description: this.event.description || "",
+      };
     }
   }
 
@@ -669,27 +672,6 @@ export default class EditEvent extends Vue {
     }
   }
 
-  @Watch("event")
-  setInitialData(): void {
-    if (
-      this.isUpdate &&
-      this.unmodifiedEvent === undefined &&
-      this.event &&
-      this.event.uuid
-    ) {
-      this.unmodifiedEvent = JSON.parse(
-        JSON.stringify(this.event.toEditJSON())
-      );
-    }
-  }
-
-  // @Watch('event.attributedTo', { deep: true })
-  // updateHideOrganizerWhenGroupEventOption(attributedTo) {
-  //   if (!attributedTo.preferredUsername) {
-  //     this.event.options.hideOrganizerWhenGroupEvent = false;
-  //   }
-  // }
-
   private validateForm() {
     const form = this.$refs.form as HTMLFormElement;
     if (form.checkValidity()) {
@@ -777,8 +759,8 @@ export default class EditEvent extends Vue {
   }
 
   get updateEventMessage(): string {
-    if (this.unmodifiedEvent.draft && !this.event.draft)
-      return this.$i18n.t("The event has been updated and published") as string;
+    // if (this.unmodifiedEvent.draft && !this.event.draft)
+    //   return this.$i18n.t("The event has been updated and published") as string;
     return (
       this.event.draft
         ? this.$i18n.t("The draft event has been updated")
@@ -884,24 +866,12 @@ export default class EditEvent extends Vue {
       ? this.event.organizerActor
       : this.organizerActor;
     if (organizerActor) {
-      res = Object.assign(res, {
-        organizerActorId: organizerActor.id,
-      });
+      res = { ...res, organizerActorId: organizerActor?.id };
     }
     const attributedToId = this.event.attributedTo?.id
       ? this.event.attributedTo.id
       : null;
-    res = Object.assign(res, { attributedToId });
-
-    // eslint-disable-next-line
-    // @ts-ignore
-    delete this.event.options.__typename;
-
-    if (this.event.physicalAddress) {
-      // eslint-disable-next-line
-      // @ts-ignore
-      delete this.event.physicalAddress.__typename;
-    }
+    res = { ...res, attributedToId };
 
     if (this.endsOnNull) {
       res.endsOn = null;
@@ -931,25 +901,6 @@ export default class EditEvent extends Vue {
     return res;
   }
 
-  private async getEvent() {
-    const result = await this.$apollo.query({
-      query: FETCH_EVENT,
-      variables: {
-        uuid: this.eventId,
-      },
-    });
-
-    if (result.data.event.endsOn === null) {
-      this.endsOnNull = true;
-    }
-    // as stated here : https://github.com/elixir-ecto/ecto/issues/1684
-    // "Ecto currently silently transforms empty strings into nil"
-    if (result.data.event.description === null) {
-      result.data.event.description = "";
-    }
-    return new EventModel(result.data.event);
-  }
-
   @Watch("limitedPlaces")
   updatedEventCapacityOptions(limitedPlaces: boolean): void {
     if (!limitedPlaces) {
@@ -1023,10 +974,11 @@ export default class EditEvent extends Vue {
   }
 
   get isEventModified(): boolean {
-    return (
-      JSON.stringify(this.event.toEditJSON()) !==
-      JSON.stringify(this.unmodifiedEvent)
-    );
+    // return (
+    //   JSON.stringify(this.event.toEditJSON()) !==
+    //   JSON.stringify(this.unmodifiedEvent)
+    // );
+    return false;
   }
 
   get beginsOn(): Date {

js/src/views/Event/Participants.vue

@@ -30,8 +30,8 @@
       </nav>
       <h2 class="title">{{ $t("Participants") }}</h2>
       <b-field :label="$t('Status')" horizontal>
-        <b-select v-model="roles">
-          <option value="">
+        <b-select v-model="role">
+          <option :value="null">
             {{ $t("Everything") }}
           </option>
           <option :value="ParticipantRole.CREATOR">
@@ -230,6 +230,8 @@ import { IConfig } from "../../types/config.model";
 import { nl2br } from "../../utils/html";
 import { asyncForEach } from "../../utils/asyncForEach";
 import RouteName from "../../router/name";
+import VueRouter from "vue-router";
+const { isNavigationFailure, NavigationFailureType } = VueRouter;
 
 const PARTICIPANTS_PER_PAGE = 10;
 const MESSAGE_ELLIPSIS_LENGTH = 130;
@@ -242,13 +244,12 @@ const MESSAGE_ELLIPSIS_LENGTH = 130;
     config: CONFIG,
     event: {
       query: PARTICIPANTS,
-      fetchPolicy: "cache-and-network",
       variables() {
         return {
           uuid: this.eventId,
-          page: 1,
+          page: this.page,
           limit: PARTICIPANTS_PER_PAGE,
-          roles: this.roles,
+          roles: this.role,
         };
       },
       skip() {
@@ -264,7 +265,32 @@ const MESSAGE_ELLIPSIS_LENGTH = 130;
 export default class Participants extends Vue {
   @Prop({ required: true }) eventId!: string;
 
-  page = 1;
+  get page(): number {
+    return parseInt((this.$route.query.page as string) || "1", 10);
+  }
+
+  set page(page: number) {
+    this.pushRouter(RouteName.RELAY_FOLLOWINGS, {
+      page: page.toString(),
+    });
+  }
+
+  get role(): ParticipantRole | null {
+    if (
+      Object.values(ParticipantRole).includes(
+        this.$route.query.role as ParticipantRole
+      )
+    ) {
+      return this.$route.query.role as ParticipantRole;
+    }
+    return null;
+  }
+
+  set role(role: ParticipantRole | null) {
+    this.pushRouter(RouteName.PARTICIPATIONS, {
+      role: role || "",
+    });
+  }
 
   limit = PARTICIPANTS_PER_PAGE;
 
@@ -280,21 +306,12 @@ export default class Participants extends Vue {
 
   checkedRows: IParticipant[] = [];
 
-  roles: ParticipantRole = ParticipantRole.PARTICIPANT;
-
   RouteName = RouteName;
 
   usernameWithDomain = usernameWithDomain;
 
   @Ref("queueTable") readonly queueTable!: any;
 
-  mounted(): void {
-    const roleQuery = this.$route.query.role as string;
-    if (Object.values(ParticipantRole).includes(roleQuery as ParticipantRole)) {
-      this.roles = roleQuery as ParticipantRole;
-    }
-  }
-
   get participantStats(): IEventParticipantStats | null {
     if (!this.event) return null;
     return this.event.participantStats;
@@ -386,6 +403,22 @@ export default class Participants extends Vue {
       return;
     this.queueTable.toggleDetails(row);
   }
+
+  async pushRouter(
+    routeName: string,
+    args: Record<string, string>
+  ): Promise<void> {
+    try {
+      await this.$router.push({
+        name: routeName,
+        query: { ...this.$route.query, ...args },
+      });
+    } catch (e) {
+      if (isNavigationFailure(e, NavigationFailureType.redirected)) {
+        throw Error(e.toString());
+      }
+    }
+  }
 }
 </script>