Correctly handle event update

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

js/src/components/Event/AddressAutoComplete.vue

@@ -81,11 +81,12 @@ import { Modal } from 'buefy/dist/components/dialog';
 export default class AddressAutoComplete extends Vue {
 
   @Prop({ required: false, default: () => [] }) initialData!: IAddress[];
+  @Prop({ required: false }) value!: IAddress;
 
   data: IAddress[] = this.initialData;
   selected: IAddress|null = new Address();
   isFetching: boolean = false;
-  queryText: string = '';
+  queryText: string = this.value && this.value.description || '';
   addressModalActive: boolean = false;
 
   async getAsyncData(query) {

js/src/components/Event/TagInput.vue

@@ -1,33 +1,51 @@
 <template>
     <b-field label="Enter some tags">
         <b-taginput
-                v-model="tags"
+                v-model="tagsStrings"
                 :data="filteredTags"
                 autocomplete
                 :allow-new="true"
                 :field="path"
                 icon="label"
                 placeholder="Add a tag"
-                @typing="getFilteredTags">
+                @typing="getFilteredTags"
+        >
         </b-taginput>
     </b-field>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
-import { get } from 'lodash';
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { get, differenceBy } from 'lodash';
 import { ITag } from '@/types/tag.model';
-@Component
+
+@Component({
+  computed: {
+    tagsStrings: {
+      get() {
+        return this.$props.data.map((tag: ITag) => tag.title);
+      },
+      set(tagStrings) {
+        const tagEntities = tagStrings.map((tag) => {
+          if (TagInput.isTag(tag)) {
+            return tag;
+          }
+          return { title: tag, slug: tag } as ITag;
+        });
+        this.$emit('input', tagEntities);
+      },
+    },
+  },
+})
 export default class TagInput extends Vue {
 
-  @Prop({ required: false, default: () => [] }) data!: object[];
+  @Prop({ required: false, default: () => [] }) data!: ITag[];
   @Prop({ required: true, default: 'value' }) path!: string;
-  @Prop({ required: true }) value!: string;
+  @Prop({ required: true }) value!: ITag[];
 
-  filteredTags: object[] = [];
-  tags: object[] = [];
+  filteredTags: ITag[] = [];
 
   getFilteredTags(text) {
-    this.filteredTags = this.data.filter((option) => {
+    this.filteredTags = differenceBy(this.data, this.value, 'id').filter((option) => {
       return get(option, this.path)
                 .toString()
                 .toLowerCase()
@@ -35,18 +53,6 @@ export default class TagInput extends Vue {
     });
   }
 
-  @Watch('tags')
-  onTagsChanged (tags) {
-    const tagEntities = tags.map((tag) => {
-      if (TagInput.isTag(tag)) {
-        return tag;
-      }
-      return { title: tag, slug: tag } as ITag;
-    });
-    console.log('tags changed', tagEntities);
-    this.$emit('input', tagEntities);
-  }
-
   static isTag(x: any): x is ITag {
     return x.slug !== undefined;
   }

js/src/graphql/event.ts

@@ -52,6 +52,7 @@ export const FETCH_EVENT = gql`
         domain,
         name,
         url,
+        id,
       },
       # attributedTo {
       #     avatar {
@@ -64,6 +65,7 @@ export const FETCH_EVENT = gql`
         ${participantQuery}
       },
       tags {
+        id,
         slug,
         title
       },
@@ -82,6 +84,25 @@ export const FETCH_EVENT = gql`
           domain,
           name,
         }
+      },
+      options {
+        maximumAttendeeCapacity,
+        remainingAttendeeCapacity,
+        showRemainingAttendeeCapacity,
+        offers {
+          price,
+          priceCurrency,
+          url
+        },
+        participationConditions {
+          title,
+          content,
+          url
+        },
+        attendees,
+        program,
+        commentModeration,
+        showParticipationPrice
       }
     }
   }
@@ -144,6 +165,7 @@ export const CREATE_EVENT = gql`
     $organizerActorId: ID!,
     $category: String,
     $beginsOn: DateTime!,
+    $endsOn: DateTime,
     $picture: PictureInput,
     $tags: [String],
     $options: EventOptionsInput,
@@ -154,6 +176,7 @@ export const CREATE_EVENT = gql`
       title: $title,
       description: $description,
       beginsOn: $beginsOn,
+      endsOn: $endsOn,
       organizerActorId: $organizerActorId,
       category: $category,
       options: $options,
@@ -173,13 +196,32 @@ export const CREATE_EVENT = gql`
 `;
 
 export const EDIT_EVENT = gql`
-  mutation EditEvent(
+  mutation updateEvent(
+  $id: ID!,
   $title: String!,
   $description: String!,
-  $organizerActorId: Int!,
-  $category: String
+  $organizerActorId: ID!,
+  $category: String,
+  $beginsOn: DateTime!,
+  $endsOn: DateTime,
+  $picture: PictureInput,
+  $tags: [String],
+  $options: EventOptionsInput,
+  $physicalAddress: AddressInput,
+  $visibility: EventVisibility
   ) {
-    EditEvent(title: $title, description: $description, organizerActorId: $organizerActorId, category: $category) {
+    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
     }
   }

js/src/types/event.model.ts

@@ -4,9 +4,9 @@ import { ITag } from '@/types/tag.model';
 import { IPicture } from '@/types/picture.model';
 
 export enum EventStatus {
-  TENTATIVE,
-  CONFIRMED,
-  CANCELLED,
+  TENTATIVE = 'TENTATIVE',
+  CONFIRMED = 'CONFIRMED',
+  CANCELLED = 'CANCELLED',
 }
 
 export enum EventVisibility {
@@ -17,9 +17,9 @@ export enum EventVisibility {
 }
 
 export enum EventJoinOptions {
-  FREE,
-  RESTRICTED,
-  INVITE,
+  FREE = 'FREE',
+  RESTRICTED = 'RESTRICTED',
+  INVITE = 'INVITE',
 }
 
 export enum EventVisibilityJoinOptions {

js/src/views/Event/Edit.vue

@@ -177,7 +177,7 @@
 <script lang="ts">
 import { CREATE_EVENT, EDIT_EVENT, FETCH_EVENT } from '@/graphql/event';
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
-import { EventModel, EventStatus, EventVisibility, EventVisibilityJoinOptions, IEvent, CommentModeration } from '@/types/event.model';
+import { EventModel, EventStatus, EventVisibility, EventVisibilityJoinOptions, CommentModeration } from '@/types/event.model';
 import { LOGGED_PERSON } from '@/graphql/actor';
 import { IPerson, Person } from '@/types/actor';
 import PictureUpload from '@/components/PictureUpload.vue';
@@ -207,6 +207,7 @@ export default class EditEvent extends Vue {
   eventId!: string | undefined;
 
   loggedPerson = new Person();
+  tags: ITag[] = [];
   event = new EventModel();
   pictureFile: File | null = null;
 
@@ -223,7 +224,7 @@ export default class EditEvent extends Vue {
 
   @Watch('$route.params.eventId', { immediate: true })
   async onEventIdParamChanged (val: string) {
-    if (this.isUpdate !== true) return;
+    if (!this.isUpdate) return;
 
     this.eventId = val;
 
@@ -231,6 +232,7 @@ export default class EditEvent extends Vue {
       this.event = await this.getEvent();
 
       this.pictureFile = await buildFileFromIPicture(this.event.picture);
+      this.limitedPlaces = this.event.options.maximumAttendeeCapacity != null;
     }
   }
 
@@ -241,7 +243,6 @@ export default class EditEvent extends Vue {
 
     this.event.beginsOn = now;
     this.event.endsOn = end;
-    console.log('eventvisibilityjoinoptions', this.eventVisibilityJoinOptions);
   }
 
   createOrUpdate(e: Event) {
@@ -261,7 +262,7 @@ export default class EditEvent extends Vue {
 
       console.log('Event created', data);
 
-      this.$router.push({
+      await this.$router.push({
         name: 'Event',
         params: { uuid: data.createEvent.uuid },
       });
@@ -277,7 +278,7 @@ export default class EditEvent extends Vue {
         variables: this.buildVariables(),
       });
 
-      this.$router.push({
+      await this.$router.push({
         name: 'Event',
         params: { uuid: this.eventId as string },
       });
@@ -297,6 +298,8 @@ export default class EditEvent extends Vue {
     };
     const res = Object.assign({}, this.event, obj);
 
+    delete this.event.options['__typename'];
+
     if (this.event.physicalAddress) {
       delete this.event.physicalAddress['__typename'];
     }

js/src/views/Event/Event.vue

@@ -57,7 +57,7 @@
                 <p class="control">
                   <router-link
                           class="button"
-                          :to="{ name: 'EditEvent', params: {uuid: event.uuid}}"
+                          :to="{ name: 'EditEvent', params: {eventId: event.uuid}}"
                   >
                     <translate>Edit</translate>
                   </router-link>