Test implementation of my account page

js/src/App.vue

@@ -79,6 +79,7 @@ export default class App extends Vue {
   @import "~bulma/sass/elements/tag.sass";
   @import "~bulma/sass/components/navbar.sass";
   @import "~bulma/sass/components/modal.sass";
+  @import "~bulma/sass/components/media.sass";
   @import "~bulma/sass/grid/_all.sass";
   @import "~bulma/sass/layout/section.sass";
   @import "~bulma/sass/layout/footer.sass";

js/src/components/Account/CreateIdentity.vue

@@ -0,0 +1,44 @@
+<template>
+  <!-- TODO -->
+</template>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+  import { CREATE_PERSON, LOGGED_PERSON } from '../../graphql/actor';
+  import { IPerson } from '@/types/actor';
+
+  @Component({
+    apollo: {
+      loggedPerson: {
+        query: LOGGED_PERSON,
+      },
+    },
+  })
+  export default class Identities extends Vue {
+    loggedPerson!: IPerson;
+    errors: string[] = [];
+    newPerson!: IPerson;
+
+    async createProfile(e) {
+      e.preventDefault();
+
+      try {
+        await this.$apollo.mutate({
+          mutation: CREATE_PERSON,
+          variables: this.newPerson,
+        });
+
+        this.$apollo.queries.identities.refresh();
+      } catch (err) {
+        console.error(err);
+        err.graphQLErrors.forEach(({ message }) => {
+          this.errors.push(message);
+        });
+      }
+    }
+
+    host() {
+      return `@${window.location.host}`;
+    }
+  }
+</script>

js/src/components/Account/Identities.vue

@@ -0,0 +1,82 @@
+<template>
+  <section>
+    <h1 class="title">
+      <translate>My identities</translate>
+    </h1>
+
+    <ul class="identities">
+      <li v-for="identity in identities" :key="identity.id">
+        <div class="media identity" v-bind:class="{ 'is-current-identity': isCurrentIdentity(identity) }">
+          <div class="media-left">
+            <figure class="image is-48x48">
+              <img class="is-rounded" :src="identity.avatarUrl">
+            </figure>
+          </div>
+
+          <div class="media-content">
+            {{ identity.displayName() }}
+          </div>
+        </div>
+      </li>
+    </ul>
+
+    <a class="button create-identity is-primary">
+      <translate>Create a new identity</translate>
+    </a>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+  .identities {
+    border-right: 1px solid grey;
+
+    padding: 15px 0;
+  }
+
+  .media.identity {
+    align-items: center;
+    font-size: 1.3rem;
+    padding-bottom: 0;
+    margin-bottom: 15px;
+
+    &.is-current-identity {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  .title {
+    margin-bottom: 30px;
+  }
+</style>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+  import { IDENTITIES, LOGGED_PERSON } from '@/graphql/actor';
+  import { IPerson, Person } from '@/types/actor';
+
+  @Component({
+    apollo: {
+      loggedPerson: {
+        query: LOGGED_PERSON,
+      },
+    },
+  })
+  export default class Identities extends Vue {
+    identities: Person[] = [];
+    loggedPerson!: IPerson;
+    errors: string[] = [];
+
+    async mounted() {
+      const result = await this.$apollo.query({
+        query: IDENTITIES,
+      });
+
+      this.identities = result.data.identities
+                              .map(i => new Person(i));
+    }
+
+    isCurrentIdentity(identity: IPerson) {
+      return identity.preferredUsername === this.loggedPerson.preferredUsername;
+    }
+  }
+</script>

js/src/components/Event/EventCard.vue

@@ -47,7 +47,7 @@
 import { IEvent, ParticipantRole } from '@/types/event.model';
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue';
-import { IActor, IPerson, Person } from '@/types/actor.model';
+import { IActor, IPerson, Person } from '@/types/actor';
 const lineClamp = require('line-clamp');
 
 export interface IEventCardOptions {

js/src/components/Group/GroupCard.vue

@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { Group } from '@/types/actor.model';
+import { Group } from '@/types/actor';
 import { RouteName } from '@/router';
 
 @Component

js/src/components/NavBar.vue

@@ -36,9 +36,9 @@
           </div>
           <div class="navbar-item has-dropdown is-hoverable" v-else>
               <router-link
-                      class="navbar-link"
-                      v-if="currentUser.isLoggedIn && loggedPerson"
-                      :to="{ name: 'Profile', params: { name: loggedPerson.preferredUsername} }"
+                class="navbar-link"
+                v-if="currentUser.isLoggedIn && loggedPerson"
+                :to="{ name: 'MyAccount' }"
               >
                 <figure class="image is-24x24">
                   <img :src="loggedPerson.avatarUrl">
@@ -47,8 +47,13 @@
               </router-link>
 
             <div class="navbar-dropdown">
-              <a class="navbar-item"><translate>My account</translate></a>
-              <a class="navbar-item" v-on:click="logout()"><translate>Log out</translate></a>
+              <router-link :to="{ name: 'MyAccount' }" class="navbar-item">
+                <translate>My account</translate>
+              </router-link>
+
+              <a class="navbar-item" v-on:click="logout()">
+                <translate>Log out</translate>
+              </a>
             </div>
           </div>
         </div>
@@ -63,7 +68,7 @@ import { CURRENT_USER_CLIENT, UPDATE_CURRENT_USER_CLIENT } from '@/graphql/user'
 import { onLogout } from '@/vue-apollo';
 import { deleteUserData } from '@/utils/auth';
 import { LOGGED_PERSON } from '@/graphql/actor';
-import { IPerson } from '@/types/actor.model';
+import { IPerson } from '@/types/actor';
 import { CONFIG } from '@/graphql/config';
 import { IConfig } from '@/types/config.model';
 import { ICurrentUser } from '@/types/current-user.model';

js/src/router/actor.ts

@@ -1,25 +1,19 @@
 import Profile from '@/views/Account/Profile.vue';
+import MyAccount from '@/views/Account/MyAccount.vue';
 import CreateGroup from '@/views/Group/Create.vue';
 import Group from '@/views/Group/Group.vue';
 import GroupList from '@/views/Group/GroupList.vue';
-import Identities from '@/views/Account/Identities.vue';
 import { RouteConfig } from 'vue-router';
 
 export enum ActorRouteName {
-  IDENTITIES = 'Identities',
   GROUP_LIST = 'GroupList',
   GROUP = 'Group',
   CREATE_GROUP = 'CreateGroup',
   PROFILE = 'Profile',
+  MY_ACCOUNT = 'MyAccount',
 }
 
 export const actorRoutes: RouteConfig[] = [
-  {
-    path: '/identities',
-    name: ActorRouteName.IDENTITIES,
-    component: Identities,
-    meta: { requiredAuth: true },
-  },
   {
     path: '/groups',
     name: ActorRouteName.GROUP_LIST,
@@ -46,4 +40,11 @@ export const actorRoutes: RouteConfig[] = [
     props: true,
     meta: { requiredAuth: false },
   },
+  {
+    path: '/my-account',
+    name: ActorRouteName.MY_ACCOUNT,
+    component: MyAccount,
+    props: true,
+    meta: { requiredAuth: true },
+  },
 ];

js/src/types/actor.model.ts

@@ -1,75 +0,0 @@
-import { ICurrentUser } from '@/types/current-user.model';
-import { IEvent } from '@/types/event.model';
-
-export interface IActor {
-  id?: string;
-  url: string;
-  name: string;
-  domain: string|null;
-  summary: string;
-  preferredUsername: string;
-  suspended: boolean;
-  avatarUrl: string;
-  bannerUrl: string;
-}
-
-export class Actor implements IActor {
-  avatarUrl: string = '';
-  bannerUrl: string = '';
-  domain: string | null = null;
-  name: string = '';
-  preferredUsername: string = '';
-  summary: string = '';
-  suspended: boolean = false;
-  url: string = '';
-
-  get displayNameAndUsername(): string {
-    return `${this.name} (${this.usernameWithDomain})`;
-  }
-
-  public usernameWithDomain(): string {
-    const domain = this.domain ? `@${this.domain}` : '';
-    return `@${this.preferredUsername}${domain}`;
-  }
-
-  public displayName(): string {
-    return this.name != null && this.name !== '' ? this.name : this.usernameWithDomain();
-  }
-}
-
-export interface IPerson extends IActor {
-  feedTokens: IFeedToken[];
-  goingToEvents: IEvent[];
-}
-
-export interface IGroup extends IActor {
-  members: IMember[];
-}
-
-export class Person extends Actor implements IPerson {
-  feedTokens: IFeedToken[] = [];
-  goingToEvents: IEvent[] = [];
-}
-
-export class Group extends Actor implements IGroup {
-  members: IMember[] = [];
-}
-
-export interface IFeedToken {
-  token: string;
-  actor?: IPerson;
-  user: ICurrentUser;
-}
-
-export enum MemberRole {
-  PENDING,
-  MEMBER,
-  MODERATOR,
-  ADMIN,
-}
-
-export interface IMember {
-  role: MemberRole;
-  parent: IGroup;
-  actor: IActor;
-}

js/src/types/actor/actor.model.ts

@@ -0,0 +1,39 @@
+export interface IActor {
+  id?: string;
+  url: string;
+  name: string;
+  domain: string|null;
+  summary: string;
+  preferredUsername: string;
+  suspended: boolean;
+  avatarUrl: string;
+  bannerUrl: string;
+}
+
+export class Actor implements IActor {
+  avatarUrl: string = '';
+  bannerUrl: string = '';
+  domain: string | null = null;
+  name: string = '';
+  preferredUsername: string = '';
+  summary: string = '';
+  suspended: boolean = false;
+  url: string = '';
+
+  constructor (hash: IActor | {} = {}) {
+    Object.assign(this, hash);
+  }
+
+  get displayNameAndUsername(): string {
+    return `${this.name} (${this.usernameWithDomain})`;
+  }
+
+  usernameWithDomain(): string {
+    const domain = this.domain ? `@${this.domain}` : '';
+    return `@${this.preferredUsername}${domain}`;
+  }
+
+  displayName(): string {
+    return this.name != null && this.name !== '' ? this.name : this.usernameWithDomain();
+  }
+}

js/src/types/actor/group.model.ts

@@ -0,0 +1,22 @@
+import { Actor, IActor } from '@/types/actor/actor.model';
+
+export enum MemberRole {
+  PENDING,
+  MEMBER,
+  MODERATOR,
+  ADMIN,
+}
+
+export interface IGroup extends IActor {
+  members: IMember[];
+}
+
+export interface IMember {
+  role: MemberRole;
+  parent: IGroup;
+  actor: IActor;
+}
+
+export class Group extends Actor implements IGroup {
+  members: IMember[] = [];
+}

js/src/types/actor/index.ts

@@ -0,0 +1,3 @@
+export * from './actor.model';
+export * from './group.model';
+export * from './person.model';

js/src/types/actor/person.model.ts

@@ -0,0 +1,25 @@
+import { ICurrentUser } from '@/types/current-user.model';
+import { IEvent } from '@/types/event.model';
+import { Actor, IActor } from '@/types/actor/actor.model';
+
+export interface IFeedToken {
+  token: string;
+  actor?: IPerson;
+  user: ICurrentUser;
+}
+
+export interface IPerson extends IActor {
+  feedTokens: IFeedToken[];
+  goingToEvents: IEvent[];
+}
+
+export class Person extends Actor implements IPerson {
+  feedTokens: IFeedToken[] = [];
+  goingToEvents: IEvent[] = [];
+
+  constructor(hash: IPerson | {} = {}) {
+    super(hash);
+
+    Object.assign(this, hash);
+  }
+}

js/src/types/event.model.ts

@@ -1,6 +1,5 @@
-import { Actor, IActor } from './actor.model';
+import { Actor, IActor } from './actor';
 import { IAddress } from '@/types/address.model';
-import { ITag } from '@/types/tag.model';
 
 export enum EventStatus {
   TENTATIVE,

js/src/types/search.model.ts

@@ -1,4 +1,4 @@
-import { IGroup } from '@/types/actor.model';
+import { IGroup } from '@/types/actor';
 import { IEvent } from '@/types/event.model';
 
 export interface SearchEvent {

js/src/utils/html.ts

@@ -0,0 +1,3 @@
+export function nl2br(text: string) {
+  return text.replace(/(?:\r\n|\r|\n)/g, '<br>');
+}

js/src/views/Account/Identities.vue

@@ -1,92 +0,0 @@
-<template>
-  <section>
-    <b-loading :active.sync="$apollo.loading"></b-loading>
-    <h1 class="title">
-      <translate>Identities</translate>
-    </h1>
-    <a class="button is-primary" @click="showCreateProfileForm = true">
-      <translate>Add a new profile</translate>
-    </a>
-    <div class="columns" v-if="showCreateProfileForm">
-      <form @submit="createProfile" class="column is-half">
-        <b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
-        <b-field label="Username">
-          <b-input aria-required="true" required v-model="newPerson.preferredUsername"/>
-        </b-field>
-        <button class="button is-primary">
-          <translate>Register</translate>
-        </button>
-      </form>
-    </div>
-    <ul>
-      <li v-for="identity in identities" :key="identity.id">
-        <hr>
-        <div class="media">
-          <div class="media-left">
-            <figure class="image is-48x48">
-              <img :src="identity.avatarUrl">
-            </figure>
-          </div>
-          <div class="media-content">
-            <p class="title is-5">
-              {{ identity.name }}
-              <span
-                v-if="identity.preferredUsername === loggedPerson.preferredUsername"
-                class="tag is-primary"
-              >
-                <translate>Current</translate>
-              </span>
-            </p>
-            <p class="subtitle is-6">@{{ identity.preferredUsername }}</p>
-          </div>
-        </div>
-      </li>
-    </ul>
-  </section>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-import { IDENTITIES, LOGGED_PERSON, CREATE_PERSON } from '../../graphql/actor';
-import { IPerson } from '@/types/actor.model';
-
-@Component({
-  apollo: {
-    identities: {
-      query: IDENTITIES,
-    },
-    loggedPerson: {
-      query: LOGGED_PERSON,
-    },
-  },
-})
-export default class Identities extends Vue {
-  identities: IPerson[] = [];
-  loggedPerson!: IPerson;
-  newPerson!: IPerson;
-  showCreateProfileForm: boolean = false;
-  errors: string[] = [];
-
-  async createProfile(e) {
-    e.preventDefault();
-
-    try {
-      await this.$apollo.mutate({
-        mutation: CREATE_PERSON,
-        variables: this.newPerson,
-      });
-      this.showCreateProfileForm = false;
-      this.$apollo.queries.identities.refresh();
-    } catch (err) {
-      console.error(err);
-      err.graphQLErrors.forEach(({ message }) => {
-        this.errors.push(message);
-      });
-    }
-  }
-
-  host() {
-    return `@${window.location.host}`;
-  }
-}
-</script>

js/src/views/Account/MyAccount.vue

@@ -0,0 +1,68 @@
+<template>
+  <section class="container">
+    <div v-if="person">
+      <div class="header">
+        <figure v-if="person.bannerUrl" class="image is-3by1">
+          <img :src="person.bannerUrl" alt="banner">
+        </figure>
+      </div>
+
+      <div class="columns">
+        <div class="identities column is-4">
+          <identities></identities>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style lang="scss">
+  .header {
+    padding-bottom: 30px;
+  }
+
+  .identities {
+    padding-right: 45px;
+    margin-right: 45px;
+  }
+</style>
+
+<script lang="ts">
+import { LOGGED_PERSON } from '@/graphql/actor';
+import { Component, Vue } from 'vue-property-decorator';
+import EventCard from '@/components/Event/EventCard.vue';
+import { IPerson } from '@/types/actor';
+import { CURRENT_USER_CLIENT } from '@/graphql/user';
+import Identities from '@/components/Account/Identities.vue';
+
+@Component({
+  apollo: {
+    currentUser: {
+      query: CURRENT_USER_CLIENT,
+    },
+    loggedPerson: {
+      query: LOGGED_PERSON,
+    },
+  },
+  components: {
+    EventCard,
+    Identities,
+  },
+})
+export default class MyAccount extends Vue {
+  person: IPerson | null = null;
+
+  async mounted () {
+    const result = await this.$apollo.query({
+      query: LOGGED_PERSON,
+    });
+
+    this.person = result.data.loggedPerson;
+  }
+}
+</script>
+<style lang="scss">
+  @import "../../variables";
+  @import "~bulma/sass/utilities/_all";
+  @import "~bulma/sass/components/dropdown.sass";
+</style>

js/src/views/Account/Profile.vue

@@ -1,103 +1,102 @@
 <template>
-    <section class="container">
-        <div v-if="person">
-            <div class="card-image" v-if="person.bannerUrl">
-                <figure class="image">
-                    <img :src="person.bannerUrl">
-                </figure>
-            </div>
-            <div class="card-content">
-                <div class="media">
-                    <div class="media-left">
-                        <figure class="image is-48x48">
-                            <img :src="person.avatarUrl">
-                        </figure>
-                    </div>
-                    <div class="media-content">
-                        <p class="title">{{ person.name }}</p>
-                        <p class="subtitle">@{{ person.preferredUsername }}</p>
-                    </div>
-                </div>
-
-                <div class="content">
-                    <vue-simple-markdown :source="person.summary"></vue-simple-markdown>
-                </div>
-
-                <b-dropdown hoverable has-link aria-role="list">
-                    <button class="button is-primary" slot="trigger">
-                        <translate>Public feeds</translate>
-                        <b-icon icon="menu-down"></b-icon>
-                    </button>
-
-                    <b-dropdown-item aria-role="listitem">
-                        <a :href="feedUrls('atom', true)">
-                            <translate>Public RSS/Atom Feed</translate>
-                        </a>
-                    </b-dropdown-item>
-                    <b-dropdown-item aria-role="listitem">
-                        <a :href="feedUrls('ics', true)">
-                            <translate>Public iCal Feed</translate>
-                        </a>
-                    </b-dropdown-item>
-                </b-dropdown>
-
-                <b-dropdown hoverable has-link aria-role="list" v-if="person.feedTokens.length > 0">
-                    <button class="button is-info" slot="trigger">
-                        <translate>Private feeds</translate>
-                        <b-icon icon="menu-down"></b-icon>
-                    </button>
-
-                    <b-dropdown-item aria-role="listitem">
-                        <a :href="feedUrls('atom', false)">
-                            <translate>RSS/Atom Feed</translate>
-                        </a>
-                    </b-dropdown-item>
-                    <b-dropdown-item aria-role="listitem">
-                        <a :href="feedUrls('ics', false)">
-                            <translate>iCal Feed</translate>
-                        </a>
-                    </b-dropdown-item>
-                </b-dropdown>
-                <a class="button" v-else-if="loggedPerson" @click="createToken">
-                    <translate>Create token</translate>
-                </a>
-            </div>
-            <section v-if="person.organizedEvents.length > 0">
-                <h2 class="subtitle">
-                    <translate>Organized</translate>
-                </h2>
-                <div class="columns">
-                    <EventCard
-                            v-for="event in person.organizedEvents"
-                            :event="event"
-                            :options="{ hideDetails: true, organizerActor: person }"
-                            :key="event.uuid"
-                            class="column is-one-third"
-                    />
-                </div>
-                <div class="field is-grouped">
-                    <p class="control">
-                        <a
-                                class="button"
-                                @click="deleteProfile()"
-                                v-if="loggedPerson && loggedPerson.id === person.id"
-                        >
-                            <translate>Delete</translate>
-                        </a>
-                    </p>
-                </div>
-            </section>
+  <section class="container">
+    <div v-if="person">
+      <div class="card-image" v-if="person.bannerUrl">
+        <figure class="image">
+          <img :src="person.bannerUrl">
+        </figure>
+      </div>
+      <div class="card-content">
+        <div class="media">
+          <div class="media-left">
+            <figure class="image is-48x48">
+              <img :src="person.avatarUrl">
+            </figure>
+          </div>
+          <div class="media-content">
+            <p class="title">{{ person.name }}</p>
+            <p class="subtitle">@{{ person.preferredUsername }}</p>
+          </div>
         </div>
-    </section>
+
+        <div class="content">
+          <vue-simple-markdown :source="person.summary"></vue-simple-markdown>
+        </div>
+
+        <b-dropdown hoverable has-link aria-role="list">
+          <button class="button is-primary" slot="trigger">
+            <translate>Public feeds</translate>
+            <b-icon icon="menu-down"></b-icon>
+          </button>
+
+          <b-dropdown-item aria-role="listitem">
+            <a :href="feedUrls('atom', true)">
+              <translate>Public RSS/Atom Feed</translate>
+            </a>
+          </b-dropdown-item>
+          <b-dropdown-item aria-role="listitem">
+            <a :href="feedUrls('ics', true)">
+              <translate>Public iCal Feed</translate>
+            </a>
+          </b-dropdown-item>
+        </b-dropdown>
+
+        <b-dropdown hoverable has-link aria-role="list" v-if="person.feedTokens.length > 0">
+          <button class="button is-info" slot="trigger">
+            <translate>Private feeds</translate>
+            <b-icon icon="menu-down"></b-icon>
+          </button>
+
+          <b-dropdown-item aria-role="listitem">
+            <a :href="feedUrls('atom', false)">
+              <translate>RSS/Atom Feed</translate>
+            </a>
+          </b-dropdown-item>
+          <b-dropdown-item aria-role="listitem">
+            <a :href="feedUrls('ics', false)">
+              <translate>iCal Feed</translate>
+            </a>
+          </b-dropdown-item>
+        </b-dropdown>
+        <a class="button" v-else-if="loggedPerson" @click="createToken">
+          <translate>Create token</translate>
+        </a>
+      </div>
+      <section v-if="person.organizedEvents.length > 0">
+        <h2 class="subtitle">
+          <translate>Organized</translate>
+        </h2>
+        <div class="columns">
+          <EventCard
+            v-for="event in person.organizedEvents"
+            :event="event"
+            :options="{ hideDetails: true, organizerActor: person }"
+            :key="event.uuid"
+            class="column is-one-third"
+          />
+        </div>
+        <div class="field is-grouped">
+          <p class="control">
+            <a
+              class="button"
+              @click="deleteProfile()"
+              v-if="loggedPerson && loggedPerson.id === person.id"
+            >
+              <translate>Delete</translate>
+            </a>
+          </p>
+        </div>
+      </section>
+    </div>
+  </section>
 </template>
 
 <script lang="ts">
 import { FETCH_PERSON, LOGGED_PERSON } from '@/graphql/actor';
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import EventCard from '@/components/Event/EventCard.vue';
-import { RouteName } from '@/router';
 import { MOBILIZON_INSTANCE_HOST } from '@/api/_entrypoint';
-import { IPerson } from '@/types/actor.model';
+import { IPerson } from '@/types/actor';
 import { CREATE_FEED_TOKEN_ACTOR } from '@/graphql/feed_tokens';
 
 @Component({
@@ -118,19 +117,15 @@ import { CREATE_FEED_TOKEN_ACTOR } from '@/graphql/feed_tokens';
     EventCard,
   },
 })
-export default class Profile extends Vue {
+export default class MyAccount extends Vue {
   @Prop({ type: String, required: true }) name!: string;
 
   person!: IPerson;
 
-    // call again the method if the route changes
+  // call again the method if the route changes
   @Watch('$route')
-    onRouteChange() {
-        // this.fetchData()
-  }
-
-  nl2br(text) {
-    return text.replace(/(?:\r\n|\r|\n)/g, '<br>');
+  onRouteChange() {
+    // this.fetchData()
   }
 
   feedUrls(format, isPublic = true): string {
@@ -155,7 +150,7 @@ export default class Profile extends Vue {
 }
 </script>
 <style lang="scss">
-@import "../../variables";
-@import "~bulma/sass/utilities/_all";
-@import "~bulma/sass/components/dropdown.sass";
+  @import "../../variables";
+  @import "~bulma/sass/utilities/_all";
+  @import "~bulma/sass/components/dropdown.sass";
 </style>

js/src/views/Account/Register.vue

@@ -71,7 +71,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { IPerson } from '@/types/actor.model';
+import { IPerson } from '@/types/actor';
 import { REGISTER_PERSON } from '@/graphql/actor';
 import { MOBILIZON_INSTANCE_HOST } from '@/api/_entrypoint';
 import { RouteName } from '@/router';

js/src/views/Event/Create.vue

@@ -40,7 +40,7 @@ import {
       EventModel,
     } from '@/types/event.model';
 import { LOGGED_PERSON } from '@/graphql/actor';
-import { IPerson, Person } from '@/types/actor.model';
+import { IPerson, Person } from '@/types/actor';
 
 @Component({
   apollo: {

js/src/views/Event/Event.vue

@@ -233,7 +233,7 @@ import { DELETE_EVENT, FETCH_EVENT, JOIN_EVENT, LEAVE_EVENT } from '@/graphql/ev
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import { LOGGED_PERSON } from '@/graphql/actor';
 import { EventVisibility, IEvent, IParticipant } from '@/types/event.model';
-import { IPerson } from '@/types/actor.model';
+import { IPerson } from '@/types/actor';
 import { RouteName } from '@/router';
 import 'vue-simple-markdown/dist/vue-simple-markdown.css';
 import { GRAPHQL_API_ENDPOINT } from '@/api/_entrypoint';

js/src/views/Group/Group.vue

@@ -59,7 +59,7 @@
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import EventCard from '@/components/Event/EventCard.vue';
 import { FETCH_GROUP, LOGGED_PERSON } from '@/graphql/actor';
-import { IGroup } from '@/types/actor.model';
+import { IGroup } from '@/types/actor';
 
 @Component({
   apollo: {

js/src/views/Home.vue

@@ -88,7 +88,7 @@ import { FETCH_EVENTS } from '@/graphql/event';
 import { Component, Vue } from 'vue-property-decorator';
 import EventCard from '@/components/Event/EventCard.vue';
 import { LOGGED_PERSON_WITH_GOING_TO_EVENTS } from '@/graphql/actor';
-import { IPerson, Person } from '@/types/actor.model';
+import { IPerson, Person } from '@/types/actor';
 import { ICurrentUser } from '@/types/current-user.model';
 import { CURRENT_USER_CLIENT } from '@/graphql/user';
 import { RouteName } from '@/router';

js/src/views/Search.vue

@@ -48,7 +48,7 @@ import { SEARCH_EVENTS, SEARCH_GROUPS } from '@/graphql/search';
 import { RouteName } from '@/router';
 import EventCard from '@/components/Event/EventCard.vue';
 import GroupCard from '@/components/Group/GroupCard.vue';
-import { Group, IGroup } from '@/types/actor.model';
+import { Group, IGroup } from '@/types/actor';
 import { SearchEvent, SearchGroup } from '@/types/search.model';
 
 enum SearchTabs {