Add identity pickers on event creation & join

Also it now saves current actor in localStorage and initalizes it in
Apollo Cache (just like user stuff). This allows not relying on
loggedPerson query anymore.

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

js/src/components/Account/Identities.vue

@@ -55,7 +55,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { IDENTITIES, LOGGED_PERSON } from '@/graphql/actor';
+import { IDENTITIES } from '@/graphql/actor';
 import { IPerson, Person } from '@/types/actor';
 
 @Component({

js/src/components/Editor.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-    <div class="editor" id="tiptab-editor" :data-actor-id="loggedPerson && loggedPerson.id">
+    <div class="editor" id="tiptab-editor" :data-actor-id="currentActor && currentActor.id">
         <editor-menu-bar :editor="editor" v-slot="{ commands, isActive, focused }">
             <div class="menubar bar-is-hidden" :class="{ 'is-focused': focused }">
 
@@ -176,20 +176,20 @@ import { IActor, IPerson } from '@/types/actor';
 import Image from '@/components/Editor/Image';
 import { UPLOAD_PICTURE } from '@/graphql/upload';
 import { listenFileUpload } from '@/utils/upload';
-import { LOGGED_PERSON } from '@/graphql/actor';
+import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
 
 @Component({
   components: { EditorContent, EditorMenuBar, EditorMenuBubble },
   apollo: {
-    loggedPerson: {
-      query: LOGGED_PERSON,
+    currentActor: {
+      query: CURRENT_ACTOR_CLIENT,
     },
   },
 })
 export default class CreateEvent extends Vue {
   @Prop({ required: true }) value!: String;
 
-  loggedPerson!: IPerson;
+  currentActor!: IPerson;
 
   editor: Editor = null;
 
@@ -438,7 +438,7 @@ export default class CreateEvent extends Vue {
       variables: {
         file: image,
         name: image.name,
-        actorId: this.loggedPerson.id,
+        actorId: this.currentActor.id,
       },
     });
     if (data.uploadPicture && data.uploadPicture.url) {

js/src/components/Event/ParticipationModal.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="modal-card">
+        <header class="modal-card-head">
+            <p class="modal-card-title">Join event {{ event.title }}</p>
+        </header>
+
+        <section class="modal-card-body is-flex">
+            <div class="media">
+                <div
+                        class="media-left">
+                    <b-icon
+                            icon="alert"
+                            type="is-warning"
+                            size="is-large"/>
+                </div>
+                <div class="media-content">
+                    <p>Do you want to participate in {{ event.title }}?</p>
+
+                    <b-field :label="$gettext('Identity')">
+                        <identity-picker v-model="identity"></identity-picker>
+                    </b-field>
+
+                    <p v-if="!event.local">
+                        The event came from another instance. Your participation will be confirmed after we confirm it with the other instance.
+                    </p>
+                </div>
+            </div>
+        </section>
+
+        <footer class="modal-card-foot">
+            <button
+                    class="button"
+                    ref="cancelButton"
+                    @click="close">
+                Cancel
+            </button>
+            <button
+                    class="button is-primary"
+                    ref="confirmButton"
+                    @click="confirm">
+                Confirm my particpation
+            </button>
+        </footer>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { IEvent } from '@/types/event.model';
+import IdentityPicker from '@/views/Account/IdentityPicker.vue';
+import { IPerson } from '@/types/actor';
+
+@Component({
+  components: {
+    IdentityPicker,
+  },
+  mounted() {
+    this.$data.isActive = true;
+  },
+})
+export default class ReportModal extends Vue {
+  @Prop({ type: Function, default: () => {} }) onConfirm;
+  @Prop({ type: Object }) event! : IEvent;
+  @Prop({ type: Object }) defaultIdentity!: IPerson;
+
+  isActive: boolean = false;
+  identity: IPerson = this.defaultIdentity;
+
+  confirm() {
+    this.onConfirm(this.identity);
+  }
+
+    /**
+     * Close the Dialog.
+     */
+  close() {
+    this.isActive = false;
+    this.$emit('close');
+  }
+}
+</script>
+<style lang="scss">
+    .modal-card .modal-card-foot {
+        justify-content: flex-end;
+    }
+</style>

js/src/components/NavBar.vue

@@ -27,26 +27,42 @@
           <div class="navbar-item has-dropdown is-hoverable" v-if="currentUser.isLoggedIn">
             <a
               class="navbar-link"
-              v-if="loggedPerson"
+              v-if="currentActor"
             >
-              <figure class="image is-24x24" v-if="loggedPerson.avatar">
-                <img alt="avatarUrl" :src="loggedPerson.avatar.url">
+              <figure class="image is-24x24" v-if="currentActor.avatar">
+                <img alt="avatarUrl" :src="currentActor.avatar.url">
               </figure>
-              <span>{{ loggedPerson.preferredUsername }}</span>
+              <span>{{ currentActor.preferredUsername }}</span>
             </a>
 
-            <div class="navbar-dropdown">
-              <span class="navbar-item">
+            <div class="navbar-dropdown is-boxed">
+              <div v-for="identity in identities" v-if="identities.length > 0">
+                <a class="navbar-item" @click="setIdentity(identity)" :class="{ 'is-active': identity.id === currentActor.id }">
+                   <div class="media-left">
+                      <figure class="image is-24x24" v-if="identity.avatar">
+                        <img class="is-rounded" :src="identity.avatar.url">
+                      </figure>
+                    </div>
+
+                    <div class="media-content">
+                      <h3>{{ identity.displayName() }}</h3>
+                    </div>
+                </a>
+
+                <hr class="navbar-divider">
+              </div>
+
+              <a class="navbar-item">
                 <router-link :to="{ name: 'UpdateIdentity' }" v-translate>My account</router-link>
-              </span>
+              </a>
 
-              <span class="navbar-item">
+              <a class="navbar-item">
                 <router-link :to="{ name: ActorRouteName.CREATE_GROUP }" v-translate>Create group</router-link>
-              </span>
+              </a>
 
-              <span class="navbar-item" v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR">
+              <a class="navbar-item" v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR">
                 <router-link :to="{ name: AdminRouteName.DASHBOARD }" v-translate>Administration</router-link>
-              </span>
+              </a>
 
               <a v-translate class="navbar-item" v-on:click="logout()">Log out</a>
             </div>
@@ -70,9 +86,9 @@
 <script lang="ts">
 import { Component, Vue, Watch } from 'vue-property-decorator';
 import { CURRENT_USER_CLIENT } from '@/graphql/user';
-import { logout } from '@/utils/auth';
-import { LOGGED_PERSON } from '@/graphql/actor';
-import { IPerson } from '@/types/actor';
+import { changeIdentity, logout } from '@/utils/auth';
+import { CURRENT_ACTOR_CLIENT, IDENTITIES, UPDATE_CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
+import { IPerson, Person } from '@/types/actor';
 import { CONFIG } from '@/graphql/config';
 import { IConfig } from '@/types/config.model';
 import { ICurrentUser, ICurrentUserRole } from '@/types/current-user.model';
@@ -87,6 +103,13 @@ import { RouteName } from '@/router';
     currentUser: {
       query: CURRENT_USER_CLIENT,
     },
+    currentActor: {
+      query: CURRENT_ACTOR_CLIENT,
+    },
+    identities: {
+      query: IDENTITIES,
+      update: ({ identities }) => identities.map(identity => new Person(identity)),
+    },
     config: {
       query: CONFIG,
     },
@@ -101,28 +124,30 @@ export default class NavBar extends Vue {
     { header: 'Coucou' },
     { title: 'T\'as une notification', subtitle: 'Et elle est cool' },
   ];
-  loggedPerson: IPerson | null = null;
+  currentActor!: IPerson;
   config!: IConfig;
   currentUser!: ICurrentUser;
   ICurrentUserRole = ICurrentUserRole;
+  identities!: IPerson[];
   showNavbar: boolean = false;
 
   ActorRouteName = ActorRouteName;
   AdminRouteName = AdminRouteName;
 
-  @Watch('currentUser')
-  async onCurrentUserChanged() {
-    // Refresh logged person object
-    if (this.currentUser.isLoggedIn) {
-      const result = await this.$apollo.query({
-        query: LOGGED_PERSON,
-      });
-
-      this.loggedPerson = result.data.loggedPerson;
-    } else {
-      this.loggedPerson = null;
-    }
-  }
+  // @Watch('currentUser')
+  // async onCurrentUserChanged() {
+  //   // Refresh logged person object
+  //   if (this.currentUser.isLoggedIn) {
+  //     const result = await this.$apollo.query({
+  //       query: CURRENT_ACTOR_CLIENT,
+  //     });
+  //     console.log(result);
+  //
+  //     this.loggedPerson = result.data.currentActor;
+  //   } else {
+  //     this.loggedPerson = null;
+  //   }
+  // }
 
   async logout() {
     await logout(this.$apollo.provider.defaultClient);
@@ -130,6 +155,10 @@ export default class NavBar extends Vue {
     if (this.$route.name === RouteName.HOME) return;
     return this.$router.push({ name: RouteName.HOME });
   }
+
+  async setIdentity(identity: IPerson) {
+    return await changeIdentity(this.$apollo.provider.defaultClient, identity);
+  }
 }
 </script>
 <style lang="scss" scoped>

js/src/components/Report/ReportModal.vue

@@ -43,7 +43,7 @@
                 <button
                         class="button"
                         ref="cancelButton"
-                        @click="cancel('button')">
+                        @click="close">
                     {{ cancelText }}
                 </button>
                 <button
@@ -86,11 +86,7 @@ export default class ReportModal extends Vue {
      */
   close() {
     this.isActive = false;
-        // Timeout for the animation complete before destroying
-    setTimeout(() => {
-      this.$destroy();
-      removeElement(this.$el);
-    },         150);
+    this.$emit('close');
   }
 }
 </script>