Edit events fixes and update cache

js/src/components/PictureUpload.vue

@@ -41,8 +41,12 @@ export default class PictureUpload extends Vue {
 
   imageSrc: string | null = null;
 
+  mounted() {
+    this.updatePreview(this.pictureFile);
+  }
+
   @Watch('pictureFile')
-  onPictureFileChanged (val: File) {
+  onPictureFileChanged(val: File) {
     this.updatePreview(val);
   }
 

js/src/graphql/event.ts

@@ -12,6 +12,43 @@ const participantQuery = `
   }
 `;
 
+const physicalAddressQuery = `
+  description,
+  floor,
+  street,
+  locality,
+  postalCode,
+  region,
+  country,
+  geom
+`;
+
+const tagsQuery = `
+  id,
+  slug,
+  title
+`;
+
+const optionsQuery = `
+  maximumAttendeeCapacity,
+  remainingAttendeeCapacity,
+  showRemainingAttendeeCapacity,
+  offers {
+    price,
+    priceCurrency,
+    url
+  },
+  participationConditions {
+    title,
+    content,
+    url
+  },
+  attendees,
+  program,
+  commentModeration,
+  showParticipationPrice
+`;
+
 export const FETCH_EVENT = gql`
   query($uuid:UUID!) {
     event(uuid: $uuid) {
@@ -29,20 +66,14 @@ export const FETCH_EVENT = gql`
       picture {
         id
         url
+        name
       },
       publishAt,
       category,
-      # online_address,
-      # phone_address,
+      online_address,
+      phone_address,
       physicalAddress {
-        description,
-        floor,
-        street,
-        locality,
-        postalCode,
-        region,
-        country,
-        geom
+        ${physicalAddressQuery}
       }
       organizerActor {
         avatar {
@@ -65,9 +96,7 @@ export const FETCH_EVENT = gql`
         ${participantQuery}
       },
       tags {
-        id,
-        slug,
-        title
+        ${tagsQuery}
       },
       relatedEvents {
         uuid,
@@ -86,23 +115,7 @@ export const FETCH_EVENT = gql`
         }
       },
       options {
-        maximumAttendeeCapacity,
-        remainingAttendeeCapacity,
-        showRemainingAttendeeCapacity,
-        offers {
-          price,
-          priceCurrency,
-          url
-        },
-        participationConditions {
-          title,
-          content,
-          url
-        },
-        attendees,
-        program,
-        commentModeration,
-        showParticipationPrice
+        ${optionsQuery}
       }
     }
   }
@@ -159,37 +172,62 @@ export const FETCH_EVENTS = gql`
 `;
 
 export const CREATE_EVENT = gql`
-  mutation CreateEvent(
+  mutation createEvent(
+    $organizerActorId: ID!,
     $title: String!,
     $description: String!,
-    $organizerActorId: ID!,
-    $category: String,
     $beginsOn: DateTime!,
     $endsOn: DateTime,
-    $picture: PictureInput,
-    $tags: [String],
-    $options: EventOptionsInput,
-    $physicalAddress: AddressInput,
+    $status: EventStatus,
     $visibility: EventVisibility
+    $tags: [String],
+    $picture: PictureInput,
+    $onlineAddress: String,
+    $phoneAddress: String,
+    $category: String,
+    $physicalAddress: AddressInput,
+    $options: EventOptionsInput,
   ) {
     createEvent(
+      organizerActorId: $organizerActorId,
       title: $title,
       description: $description,
       beginsOn: $beginsOn,
       endsOn: $endsOn,
-      organizerActorId: $organizerActorId,
-      category: $category,
-      options: $options,
-      picture: $picture,
+      status: $status,
+      visibility: $visibility,
       tags: $tags,
-      physicalAddress: $physicalAddress,
-      visibility: $visibility
+      picture: $picture,
+      onlineAddress: $onlineAddress,
+      phoneAddress: $phoneAddress,
+      category: $category,
+      physicalAddress: $physicalAddress
+      options: $options,
     ) {
       id,
       uuid,
       title,
+      description,
+      beginsOn,
+      endsOn,
+      status,
+      visibility,
       picture {
+        id
         url
+      },
+      publishAt,
+      category,
+      online_address,
+      phone_address,
+      physicalAddress {
+        ${physicalAddressQuery}
+      },
+      tags {
+        ${tagsQuery}
+      },
+      options {
+        ${optionsQuery}
       }
     }
   }
@@ -197,32 +235,62 @@ export const CREATE_EVENT = gql`
 
 export const EDIT_EVENT = gql`
   mutation updateEvent(
-  $id: ID!,
-  $title: String!,
-  $description: String!,
-  $organizerActorId: ID!,
-  $category: String,
-  $beginsOn: DateTime!,
-  $endsOn: DateTime,
-  $picture: PictureInput,
-  $tags: [String],
-  $options: EventOptionsInput,
-  $physicalAddress: AddressInput,
-  $visibility: EventVisibility
+    $id: ID!,
+    $title: String,
+    $description: String,
+    $beginsOn: DateTime,
+    $endsOn: DateTime,
+    $status: Int,
+    $visibility: EventVisibility
+    $tags: [String],
+    $picture: PictureInput,
+    $onlineAddress: String,
+    $phoneAddress: String,
+    $category: String,
+    $physicalAddress: AddressInput,
+    $options: EventOptionsInput,
   ) {
-    updateEvent(eventId: $id,
-        title: $title,
-        description: $description,
-        beginsOn: $beginsOn,
-        endsOn: $endsOn,
-        organizerActorId: $organizerActorId,
-        category: $category,
-        options: $options,
-        picture: $picture,
-        tags: $tags,
-        physicalAddress: $physicalAddress,
-        visibility: $visibility) {
-      uuid
+    updateEvent(
+      eventId: $id,
+      title: $title,
+      description: $description,
+      beginsOn: $beginsOn,
+      endsOn: $endsOn,
+      status: $status,
+      visibility: $visibility,
+      tags: $tags,
+      picture: $picture,
+      onlineAddress: $onlineAddress,
+      phoneAddress: $phoneAddress,
+      category: $category,
+      physicalAddress: $physicalAddress
+      options: $options,
+    ) {
+      id,
+      uuid,
+      title,
+      description,
+      beginsOn,
+      endsOn,
+      status,
+      visibility,
+      picture {
+        id
+        url
+      },
+      publishAt,
+      category,
+      online_address,
+      phone_address,
+      physicalAddress {
+        ${physicalAddressQuery}
+      },
+      tags {
+        ${tagsQuery}
+      },
+      options {
+        ${optionsQuery}
+      }
     }
   }
 `;

js/src/types/event.model.ts

@@ -117,15 +117,15 @@ export interface IEventOptions {
 }
 
 export class EventOptions implements IEventOptions {
-  maximumAttendeeCapacity: number = 0;
-  remainingAttendeeCapacity: number = 0;
-  showRemainingAttendeeCapacity: boolean = false;
+  maximumAttendeeCapacity = 0;
+  remainingAttendeeCapacity = 0;
+  showRemainingAttendeeCapacity = false;
   offers: IOffer[] = [];
   participationConditions: IParticipationCondition[] = [];
   attendees: string[] = [];
-  program: string = '';
-  commentModeration: CommentModeration = CommentModeration.ALLOW_ALL;
-  showParticipationPrice: boolean = false;
+  program = '';
+  commentModeration = CommentModeration.ALLOW_ALL;
+  showParticipationPrice = false;
 }
 
 export class EventModel implements IEvent {
@@ -200,6 +200,25 @@ export class EventModel implements IEvent {
     this.physicalAddress = hash.physicalAddress;
 
     this.tags = hash.tags;
-    this.options = hash.options;
+    if (hash.options) this.options = hash.options;
+  }
+
+  toEditJSON () {
+    return {
+      id: this.id,
+      title: this.title,
+      description: this.description,
+      beginsOn: this.beginsOn.toISOString(),
+      endsOn: this.endsOn ? this.endsOn.toISOString() : null,
+      status: this.status,
+      visibility: this.visibility,
+      tags: this.tags.map(t => t.title),
+      picture: this.picture,
+      onlineAddress: this.onlineAddress,
+      phoneAddress: this.phoneAddress,
+      category: this.category,
+      physicalAddress: this.physicalAddress,
+      options: this.options,
+    };
   }
 }

js/src/views/Event/Edit.vue

@@ -174,10 +174,24 @@
   </section>
 </template>
 
+<style lang="scss">
+  @import "@/variables.scss";
+
+  h2.subtitle {
+    margin: 10px 0;
+
+    span {
+      padding: 5px 7px;
+      display: inline;
+      background: $secondary;
+    }
+  }
+</style>
+
 <script lang="ts">
-import { CREATE_EVENT, EDIT_EVENT, FETCH_EVENT } from '@/graphql/event';
+import { CREATE_EVENT, EDIT_EVENT, FETCH_EVENT, FETCH_EVENTS } from '@/graphql/event';
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
-import { EventModel, EventStatus, EventVisibility, EventVisibilityJoinOptions, CommentModeration } from '@/types/event.model';
+import { EventModel, EventStatus, EventVisibility, EventVisibilityJoinOptions, CommentModeration, IEvent } from '@/types/event.model';
 import { LOGGED_PERSON } from '@/graphql/actor';
 import { IPerson, Person } from '@/types/actor';
 import PictureUpload from '@/components/PictureUpload.vue';
@@ -291,12 +305,7 @@ export default class EditEvent extends Vue {
    * Build variables for Event GraphQL creation query
    */
   private buildVariables() {
-    const obj = {
-      organizerActorId: this.loggedPerson.id,
-      beginsOn: this.event.beginsOn.toISOString(),
-      tags: this.event.tags.map((tag: ITag) => tag.title),
-    };
-    const res = Object.assign({}, this.event, obj);
+    const res = Object.assign(this.event.toEditJSON(), { organizerActorId: this.loggedPerson.id });
 
     delete this.event.options['__typename'];
 
@@ -360,16 +369,4 @@ export default class EditEvent extends Vue {
   // }
 }
 </script>
-<style lang="scss">
-  @import "@/variables.scss";
 
-  h2.subtitle {
-    margin: 10px 0;
-
-    span {
-      padding: 5px 7px;
-      display: inline;
-      background: $secondary;
-    }
-  }
-</style>

js/src/vue-apollo.ts

@@ -99,7 +99,9 @@ const link = authMiddleware
   .concat(errorLink)
   .concat(uploadLink);
 
-const cache = new InMemoryCache({ fragmentMatcher });
+const cache = new InMemoryCache({
+  fragmentMatcher,
+});
 
 const apolloClient = new ApolloClient({
   cache,