Fix link to direct profile on event page when external

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

js/src/components/Account/ActorLink.vue

@@ -0,0 +1,21 @@
+<template>
+    <span>
+        <router-link v-if="actor.domain === null"
+                     :to="{name: 'Profile', params: { name: actor.preferredUsername } }"
+        >
+            <slot></slot>
+        </router-link>
+        <a v-else :href="actor.url">
+            <slot></slot>
+        </a>
+    </span>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { IActor } from '@/types/actor';
+
+@Component
+export default class ActorLink extends Vue {
+  @Prop() actor!: IActor;
+}
+</script>

js/src/graphql/event.ts

@@ -51,6 +51,7 @@ export const FETCH_EVENT = gql`
         preferredUsername,
         domain,
         name,
+        url,
       },
       # attributedTo {
       #     avatar {

js/src/views/Event/Create.vue

@@ -76,6 +76,7 @@ import {
       Category,
       IEvent,
       EventModel,
+      EventVisibility,
     } from '@/types/event.model';
 import { LOGGED_PERSON } from '@/graphql/actor';
 import { IPerson, Person } from '@/types/actor';
@@ -86,7 +87,6 @@ import TagInput from '@/components/Event/TagInput.vue';
 import { TAGS } from '@/graphql/tags';
 import { ITag } from '@/types/tag.model';
 import AddressAutoComplete from '@/components/Event/AddressAutoComplete.vue';
-import { EventVisibility } from '@/types/event.model';
 
 @Component({
   components: { AddressAutoComplete, TagInput, DateTimePicker, PictureUpload, Editor },

js/src/views/Event/Event.vue

@@ -92,19 +92,17 @@
                 </b-modal>
               </div>
               <div class="organizer">
-                <router-link
+                <actor-link :actor="event.organizerActor">
-                        :to="{name: 'Profile', params: { name: event.organizerActor.preferredUsername } }"
+                  <translate
-                >
+                          :translate-params="{name: event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername}"
-                <translate
+                          v-if="event.organizerActor">By %{ name }</translate>
-                        :translate-params="{name: event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername}"
-                        v-if="event.organizerActor">By %{ name }</translate>
                   <figure v-if="event.organizerActor.avatar" class="image is-48x48">
                     <img
                             class="is-rounded"
                             :src="event.organizerActor.avatar.url"
                             :alt="$gettextInterpolate('%{actor}\'s avatar', {actor: event.organizerActor.preferredUsername})" />
                   </figure>
-                </router-link>
+                </actor-link>
               </div>
             </div>
           </div>
@@ -242,9 +240,11 @@ import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue';
 import BIcon from 'buefy/src/components/icon/Icon.vue';
 import EventCard from '@/components/Event/EventCard.vue';
 import EventFullDate from '@/components/Event/EventFullDate.vue';
+import ActorLink from '@/components/Account/ActorLink.vue';
 
 @Component({
   components: {
+    ActorLink,
     EventFullDate,
     EventCard,
     BIcon,