From 44704fa4e016f5ba63d39fcad133f97890953a34 Mon Sep 17 00:00:00 2001
From: Aleksey Razbakov <aleksey@razbakov.com>
Date: Tue, 1 Feb 2022 10:50:29 +0100
Subject: [PATCH] feat: event: edit list of profiles (#89)

* feat: TInputProfile
* event: org, artists and reservation flow
---
 components/TButton.vue              |   3 +-
 components/TCommentsInline.vue      |   6 +-
 components/TDropdown.vue            |   4 +-
 components/TDropdownSeparator.vue   |  14 +++
 components/TInput/TInputArray.vue   |  51 ++++++++
 components/TInput/TInputProfile.vue | 186 ++++++++++++++++++++++++++++
 components/TItemCreator.vue         |   6 +-
 components/TProfile.vue             |   2 +-
 components/TProfileContacts.vue     |  20 +--
 components/global/WProfile.vue      |  82 +++++++++---
 layouts/default.vue                 |   8 +-
 locales/en.yml                      |  19 ++-
 pages/demo/team.vue                 |  55 ++++++++
 pages/events/_id/edit.vue           |  18 ++-
 pages/events/_id/index.vue          |  38 ++++--
 use/events.js                       |  72 ++++++++---
 use/posts.js                        |  12 --
 17 files changed, 505 insertions(+), 91 deletions(-)
 create mode 100644 components/TDropdownSeparator.vue
 create mode 100644 components/TInput/TInputArray.vue
 create mode 100644 components/TInput/TInputProfile.vue
 create mode 100644 pages/demo/team.vue

diff --git a/components/TButton.vue b/components/TButton.vue
index 8d883c4e..8493bbe8 100644
--- a/components/TButton.vue
+++ b/components/TButton.vue
@@ -127,7 +127,8 @@ export default {
           'bg-transparent text-primary font-semibold py-2 px-4 border border-primary rounded-full no-underline hover:bg-primary hover:text-white hover:border-transparent',
         link: 'underline font-semibold hover:no-underline',
         context:
-          'text-left w-full px-4 py-2 text-gray-800 hover:bg-indigo-500 hover:text-white',
+          'text-left w-full px-4 py-2 hover:bg-indigo-500 hover:text-white',
+        'context-active': 'text-left w-full px-4 py-2 bg-indigo-500 text-white',
         nav:
           'p-2 font-semibold items-center flex rounded-full hover:bg-red-100 hover:text-primary',
         void: '',
diff --git a/components/TCommentsInline.vue b/components/TCommentsInline.vue
index 0894d12f..40b80887 100644
--- a/components/TCommentsInline.vue
+++ b/components/TCommentsInline.vue
@@ -33,11 +33,15 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    autoload: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props) {
     const { username } = useAuth()
     const newReply = ref('')
-    const showComments = ref(false)
+    const showComments = ref(props.autoload)
     const { softUpdate } = useDoc('posts')
     const { create } = useDoc('comments')
 
diff --git a/components/TDropdown.vue b/components/TDropdown.vue
index 4af5194c..d08c4ef1 100644
--- a/components/TDropdown.vue
+++ b/components/TDropdown.vue
@@ -3,9 +3,9 @@
     <template v-slot:button>
       <TButton :icon="icon" :type="type" :label="label" :title="title" />
     </template>
-    <template v-slot:menu>
+    <template v-slot:menu="{ closeMenu }">
       <div class="w-32 py-2 bg-white rounded-lg shadow-xl border">
-        <slot />
+        <slot :closeMenu="closeMenu" />
       </div>
     </template>
   </TMenu>
diff --git a/components/TDropdownSeparator.vue b/components/TDropdownSeparator.vue
new file mode 100644
index 00000000..5a8c9573
--- /dev/null
+++ b/components/TDropdownSeparator.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="font-bold p-2 text-xs text-gray-700 border-b">{{ label }}</div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+  },
+}
+</script>
diff --git a/components/TInput/TInputArray.vue b/components/TInput/TInputArray.vue
new file mode 100644
index 00000000..7ca73e18
--- /dev/null
+++ b/components/TInput/TInputArray.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <component
+      v-for="(item, index) in value"
+      :key="`${children.component}-${index}`"
+      :is="children.component"
+      v-model="internalValue[index]"
+      v-bind="children"
+    />
+    <component
+      :is="children.component"
+      v-model="internalValue[value.length]"
+      v-bind="children"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    internalValue: [],
+  }),
+  props: {
+    value: {
+      type: [Array, String],
+      default: () => [],
+    },
+    children: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  watch: {
+    internalValue: {
+      deep: true,
+      handler(val) {
+        let filtered = []
+
+        if (val) {
+          filtered = val.filter((item) => item && item !== '' && item !== null)
+        }
+
+        this.$emit('input', filtered)
+      },
+    },
+  },
+  mounted() {
+    this.internalValue = this.value || []
+  },
+}
+</script>
diff --git a/components/TInput/TInputProfile.vue b/components/TInput/TInputProfile.vue
new file mode 100644
index 00000000..adb3a7ec
--- /dev/null
+++ b/components/TInput/TInputProfile.vue
@@ -0,0 +1,186 @@
+<template>
+  <div>
+    <WProfile
+      v-if="value && value.username"
+      :username="value.username"
+      :fallback="value"
+    >
+      <template v-slot:right>
+        <TDropdown v-slot="{ closeMenu }">
+          <TDropdownSeparator :label="$t('TInputProfile.changeRole')" />
+          <TButton
+            v-for="role in eventRoleOptions"
+            :key="role.value"
+            allow-guests
+            :type="value.role === role.value ? 'context-active' : 'context'"
+            :label="role.label"
+            class="text-sm"
+            @click="
+              value.role = role.value
+              closeMenu()
+            "
+          />
+          <TDropdownSeparator :label="$t('TInputProfile.actions')" />
+          <TButton
+            allow-guests
+            type="context"
+            :label="$t('TInputProfile.remove')"
+            color="red-500 text-sm"
+            @click="
+              $emit('input', null)
+              closeMenu()
+            "
+          />
+        </TDropdown>
+      </template>
+      <div></div>
+    </WProfile>
+    <TInput
+      v-else
+      v-model="query"
+      :placeholder="placeholder"
+      @input="search"
+      autocomplete="off"
+    />
+    <div v-if="query" class="divide-y border rounded shadow absolute bg-white">
+      <div
+        v-for="item in suggestions"
+        :key="item.id"
+        class="flex px-4 py-2 hover:bg-blue-100 items-center cursor-pointer space-x-1"
+        @click="add(item)"
+      >
+        <TProfilePhoto2 size="sm" :src="item.photo" />
+        <div class="flex-grow">
+          <div class="block text-sm">{{ item.username }}</div>
+        </div>
+      </div>
+      <template v-if="isUsernameAvailable">
+        <div
+          class="flex px-4 py-2 hover:bg-blue-100 items-center cursor-pointer space-x-1"
+          @click="create({ username: query, instagram: query })"
+        >
+          <div class="p-1">
+            <TIcon name="instagram" size="4" class="text-gray-700 " />
+          </div>
+          <div class="text-sm">
+            {{ query }} {{ $t('TInputProfile.addInstagram') }}
+          </div>
+        </div>
+        <div
+          class="flex px-4 py-2 hover:bg-blue-100 items-center cursor-pointer space-x-1"
+          @click="create({ username: query, facebook: query })"
+        >
+          <div class="p-1">
+            <TIcon name="facebook" size="4" class="text-gray-700 " />
+          </div>
+          <div class="text-sm">
+            {{ query }} {{ $t('TInputProfile.addFacebook') }}
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+import { computed, ref } from '@nuxtjs/composition-api'
+import { useAlgolia } from '~/use/algolia'
+import { useEvents } from '~/use/events'
+import { useDoc } from '~/use/doc'
+
+export default {
+  name: 'TInputProfile',
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: [Object, String],
+      default: () => ({}),
+    },
+    placeholder: {
+      type: String,
+      default() {
+        return this.$t('TInputProfile.placeholder')
+      },
+    },
+    excludeUsernames: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup(props, { emit }) {
+    const { search, response } = useAlgolia('profiles')
+    const query = ref('')
+    const selected = ref(props.value)
+    const { eventRoleOptions } = useEvents()
+    const { create: createProfile } = useDoc('profiles')
+
+    if (typeof props.value === 'string') {
+      emit('input', { username: props.value })
+    }
+
+    const add = (data) => {
+      query.value = ''
+
+      emit('input', data)
+    }
+
+    const suggestions = computed(() => {
+      const { hits } = response.value
+      return hits
+        ?.filter(
+          (p) =>
+            !props.excludeUsernames.some((username) => username === p.username)
+        )
+        .map((p) => {
+          return {
+            id: p.id,
+            username: p.username,
+            name: p.name || p.username || '',
+            photo: p.photo || '',
+            bio: p.bio || '',
+            instagram: p.instagram || '',
+            facebook: p.facebook || '',
+            tiktok: p.tiktok || '',
+            youtube: p.youtube || '',
+          }
+        })
+    })
+
+    const isUsernameAvailable = computed(() => {
+      let result = true
+
+      if (
+        suggestions.value &&
+        suggestions.value.some((p) => p.username === query.value)
+      ) {
+        result = false
+      }
+
+      if (props.excludeUsernames.some((username) => username === query.value)) {
+        result = false
+      }
+
+      return result
+    })
+
+    const create = async (data) => {
+      await createProfile({
+        type: 'FanPage',
+        ...data,
+      })
+
+      add(data)
+    }
+
+    return {
+      query,
+      selected,
+      suggestions,
+      add,
+      search,
+      eventRoleOptions,
+      create,
+      isUsernameAvailable,
+    }
+  },
+}
+</script>
diff --git a/components/TItemCreator.vue b/components/TItemCreator.vue
index e40d63bf..4ca6c87b 100644
--- a/components/TItemCreator.vue
+++ b/components/TItemCreator.vue
@@ -9,7 +9,11 @@
       :content="creator.story"
       class="mt-4"
     />
-    <TProfileContacts v-if="full" :profile="creator" class="mt-4 p-2" />
+    <TProfileContacts
+      v-if="full"
+      :profile="creator"
+      class="mt-4 p-2 bg-gray-100"
+    />
   </div>
 </template>
 
diff --git a/components/TProfile.vue b/components/TProfile.vue
index 47be98e8..ef4b6679 100644
--- a/components/TProfile.vue
+++ b/components/TProfile.vue
@@ -134,7 +134,7 @@
       </div>
     </template>
 
-    <TProfileContacts :profile="profile" class="p-2 mb-4" />
+    <TProfileContacts :profile="profile" class="p-2 mb-4 bg-gray-100" />
 
     <div v-if="uid === profile.id" class="flex justify-center space-x-2">
       <TButton label="Edit Profile" to="/settings?tab=profile" />
diff --git a/components/TProfileContacts.vue b/components/TProfileContacts.vue
index cea1a49e..f951bf29 100644
--- a/components/TProfileContacts.vue
+++ b/components/TProfileContacts.vue
@@ -1,25 +1,23 @@
 <template>
-  <div
-    class="md:flex items-center justify-center space-x-2 space-y-2 bg-gray-100"
-  >
+  <div class="md:flex items-center justify-center space-x-2 space-y-2">
     <div v-if="title" class="pl-2 font-bold">{{ title }}</div>
     <div class="p-4 flex flex-wrap gap-2 items-center justify-center">
       <TButton
-        v-if="profile.website"
+        v-if="!short && profile.website"
         :href="profile.website"
         icon="house"
         type="round"
         icon-size="6"
       />
       <TButton
-        v-if="profile.whatsapp"
+        v-if="!short && profile.whatsapp"
         icon="whatsapp"
         type="round"
         icon-size="6"
         :href="`https://chat.whatsapp.com/${profile.whatsapp}`"
       />
       <TButton
-        v-if="profile.telegram"
+        v-if="!short && profile.telegram"
         icon="telegram"
         type="round"
         icon-size="6"
@@ -33,21 +31,21 @@
         :href="`https://instagram.com/${profile.instagram}`"
       />
       <TButton
-        v-if="profile.tiktok"
+        v-if="!short && profile.tiktok"
         icon="tiktok"
         type="round"
         icon-size="6"
         :href="`https://tiktok.com/${profile.tiktok}`"
       />
       <TButton
-        v-if="profile.youtube"
+        v-if="!short && profile.youtube"
         icon="youtube"
         type="round"
         icon-size="6"
         :href="`https://youtube.com/${profile.youtube}`"
       />
       <TButton
-        v-if="profile.twitter"
+        v-if="!short && profile.twitter"
         icon="twitter"
         type="round"
         icon-size="6"
@@ -75,6 +73,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    short: {
+      type: Boolean,
+      default: false,
+    },
   },
 }
 </script>
diff --git a/components/global/WProfile.vue b/components/global/WProfile.vue
index 863739f3..f4a60ee3 100644
--- a/components/global/WProfile.vue
+++ b/components/global/WProfile.vue
@@ -1,39 +1,75 @@
 <template>
-  <div v-if="loading" class="border rounded p-4">
-    Loading profile {{ username }}
-  </div>
-  <div v-else-if="!exists" class="border rounded p-4 text-red-500">
-    Profile {{ username }} not found
-  </div>
-  <NuxtLink
-    v-else
-    :to="`/${profile.username}`"
-    class="rounded border hover:border-black shadow p-4 bg-dark-gradient text-sm flex items-start justify-start flex-grow my-2 no-underline"
+  <div
+    v-if="!fallback && !exists"
+    class="border rounded p-4 text-red-500 flex justify-between"
   >
-    <TProfilePhoto size="xl" :uid="id" />
-    <div class="flex-grow ml-4">
-      <div class="font-bold text-white text-xl leading-none">
-        {{ profile.name }}
+    <div>Profile {{ username }} not found</div>
+    <slot />
+  </div>
+  <div v-else>
+    <div
+      class="flex-row gap-2 flex justify-between items-center py-2 m-1 border-t border-gray-200 px-2 h-full"
+    >
+      <div class="flex-shrink-0 w-12">
+        <TProfilePhoto2 size="lg" :src="profile.photo" />
       </div>
-      <div class="text-gray-300 text-xs">@{{ profile.username }}</div>
-      <div class="mt-2 text-white">{{ profile.bio }}</div>
+      <div class="flex flex-col w-full">
+        <NuxtLink :to="`/${profile.username}`" class="font-bold">
+          {{ profile.name || profile.username }}
+        </NuxtLink>
+        <div v-if="profile.role" class="text-xs">
+          {{ getLabel(eventRoleOptions, profile.role) }}
+        </div>
+        <div v-if="profile.bio" class="text-gray-700 text-xs">
+          {{ profile.bio }}
+        </div>
+      </div>
+      <slot name="right" />
     </div>
-  </NuxtLink>
+    <slot>
+      <TProfileContacts :profile="profile" short />
+    </slot>
+    <TPreview
+      v-if="full && profile.story"
+      :content="profile.story"
+      class="mt-4"
+    />
+  </div>
 </template>
 
 <script>
 import { useDoc } from '~/use/doc'
+import { getLabel } from '~/utils'
+import { useEvents } from '~/use/events'
+import { computed } from 'vue-demi'
 
 export default {
   setup(props) {
-    const { id, doc: profile, loading, exists, find } = useDoc('profiles')
-    find('username', props.username)
+    const { id, doc: loadedProfile, loading, exists, find } = useDoc('profiles')
+    const { eventRoleOptions } = useEvents()
+
+    if (props.username) {
+      find('username', props.username)
+    }
+
+    const profile = computed(() => {
+      if (loadedProfile.value?.username) {
+        return {
+          ...props.fallback,
+          ...loadedProfile.value,
+        }
+      }
+
+      return props.fallback
+    })
 
     return {
       id,
+      eventRoleOptions,
       profile,
       loading,
       exists,
+      getLabel,
     }
   },
   props: {
@@ -41,6 +77,14 @@ export default {
       type: String,
       default: '',
     },
+    fallback: {
+      type: Object,
+      default: () => ({}),
+    },
+    full: {
+      type: Boolean,
+      default: false,
+    },
   },
 }
 </script>
diff --git a/layouts/default.vue b/layouts/default.vue
index 881031bf..a5139df8 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -9,7 +9,13 @@
     >
       <div class="my-4 w-64 flex flex-col justify-center text-center">
         <div class="p-4">Sign in to {{ showAuthPopup }}</div>
-        <TButton class="mt-2" type="primary" to="/signin">Sign in</TButton>
+        <TButton
+          allow-guests
+          class="mt-2"
+          type="primary"
+          :to="`/signin?target=${$route.path}`"
+          >Sign in</TButton
+        >
       </div>
     </TPopup>
 
diff --git a/locales/en.yml b/locales/en.yml
index 04b2389e..78002356 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -65,9 +65,8 @@ eventView:
     share: Share
   online: Online Event
   reservation:
-    going: Going
-    notGoing: Not Going
     guest: Register for event
+    cancel: Cancel reservation
   reservationPopup:
     title: Register
     reserve:
@@ -263,8 +262,24 @@ sort:
   archived: Archived
   yours: Yours
 event:
+  artists: Artists
+  organiser: Organiser
   category:
     meetup: Meetup
     lesson: Lesson
     online: Online
     travel: Travel
+  role:
+    dj: DJ
+    instructor: Instructor
+    taxi: Taxi Dancer
+    photographer: Photographer
+    musician: Musician
+    organiser: Organiser
+TInputProfile:
+  changeRole: Change Role
+  actions: Actions
+  remove: Remove
+  addInstagram: (add from Instagram)
+  addFacebook: (add from Facebook)
+  placeholder: Search on WeDance, Instagram or Facebook
diff --git a/pages/demo/team.vue b/pages/demo/team.vue
new file mode 100644
index 00000000..010e8a94
--- /dev/null
+++ b/pages/demo/team.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="p-4 space-y-4">
+    <TField
+      component="TInputProfile"
+      v-model="single"
+      label="Organiser"
+      label-position="top"
+    />
+
+    <TField
+      component="TInputArray"
+      :children="{
+        component: 'TInputProfile',
+        excludeUsernames: multiple
+          .filter((item) => !!item)
+          .map((item) => item.username),
+      }"
+      v-model="multiple"
+      label="Team"
+      label-position="top"
+    />
+
+    <div class="space-y-2">
+      <WProfile
+        v-for="profile in multiple"
+        :key="profile.username"
+        :username="profile.username"
+        :fallback="profile"
+      />
+    </div>
+
+    <div class="font-bold">single</div>
+    <textarea
+      :value="JSON.stringify(single, null, 2)"
+      :rows="10"
+      class="mt-4 w-full border text-xs font-mono"
+    ></textarea>
+
+    <div class="font-bold">multiple</div>
+    <textarea
+      :value="JSON.stringify(multiple, null, 2)"
+      :rows="30"
+      class="mt-4 w-full border text-xs font-mono"
+    ></textarea>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    multiple: [],
+    single: null,
+  }),
+}
+</script>
diff --git a/pages/events/_id/edit.vue b/pages/events/_id/edit.vue
index 0a63e134..f0aa2d4c 100644
--- a/pages/events/_id/edit.vue
+++ b/pages/events/_id/edit.vue
@@ -81,8 +81,14 @@ export default {
         price: '0 EUR',
         styles: {},
         cover: '',
-        organiser: this.profile?.username || '',
-        promoter: this.profile?.username || '',
+        artists: [],
+        org: {
+          username: this.profile?.username,
+          name: this.profile?.name,
+          photo: this.profile?.photo,
+          role: 'organiser',
+        },
+        username: this.profile?.username,
       }
     }
   },
@@ -105,14 +111,6 @@ export default {
       this.$router.push(`/events/${doc.id}`)
     },
     async saveItem(data) {
-      data.organisedBy = this.uid
-      data.promotedBy = this.uid
-
-      if (data.claimed === 'No') {
-        data.organiser = ''
-        data.organisedBy = ''
-      }
-
       data = pickBy(data, (v) => v !== undefined)
 
       if (data.id) {
diff --git a/pages/events/_id/index.vue b/pages/events/_id/index.vue
index ef2a8148..76e550bd 100644
--- a/pages/events/_id/index.vue
+++ b/pages/events/_id/index.vue
@@ -120,28 +120,31 @@
       class="flex mt-4 space-x-2 justify-center sticky bg-white p-4 border-b z-50 top-0"
     >
       <TButton
-        v-if="!uid"
-        allow-guests
+        v-if="item.response !== 'up'"
         type="primary"
+        :title="$t('eventView.reservation.guest')"
         @click="reservationPopup = 'reserve'"
         >{{ $t('eventView.reservation.guest') }}</TButton
       >
       <TButton
-        v-else
-        :type="uid && item.response === 'up' ? 'success' : 'secondary'"
-        @click="reservationPopup = 'reserve'"
-        >{{ $t('eventView.reservation.going') }}</TButton
-      >
-      <TButton
-        v-if="uid"
-        :type="uid && item.response === 'down' ? 'danger' : 'secondary'"
+        v-if="uid && item.response === 'up'"
+        type="secondary"
         @click="updateRsvp(item.id, 'events', 'down')"
-        >{{ $t('eventView.reservation.notGoing') }}</TButton
+        >{{ $t('eventView.reservation.cancel') }}</TButton
       >
     </div>
 
     <TPreview :content="item.description" class="p-4" />
-    <TCommentsInline :item="item" class="border-t p-4" />
+
+    <div v-if="item.artists" class="space-y-2 p-4">
+      <h3 class="text-xl font-bold">{{ $t('event.artists') }}</h3>
+      <WProfile
+        v-for="profile in item.artists"
+        :key="profile.username"
+        :username="profile.username"
+        :fallback="profile"
+      />
+    </div>
 
     <div v-if="item.venue && item.venue.map" class="p-4 bg-gray-100">
       <div class="font-bold text-sm mb-4 leading-none text-gray-700">
@@ -150,7 +153,10 @@
       <img :src="item.venue.map" alt="Venue Map" class="mt-4" />
     </div>
 
-    <TItemCreator :item="item" full class="mt-4" />
+    <div v-if="item.org" class="space-y-2 p-4">
+      <h4 class="text-xl font-bold">{{ $t('event.organiser') }}</h4>
+      <WProfile :username="item.org.username" :fallback="item.org" full />
+    </div>
 
     <div v-if="item.facebook" class="mt-8 text-right text-sm">
       <a :href="item.facebook" class="hover:underline text-gray-700">{{
@@ -158,6 +164,8 @@
       }}</a>
     </div>
 
+    <TCommentsInline :item="item" autoload class="border-t p-4" />
+
     <TPopup
       v-if="reservationPopup"
       :title="$t('eventView.reservationPopup.title')"
@@ -397,6 +405,10 @@ export default {
       }
 
       reservationPopup.value = 'finish'
+
+      if (item.value.link) {
+        openURL(item.value.link)
+      }
     }
 
     return {
diff --git a/use/events.js b/use/events.js
index b0682929..32a56ce1 100644
--- a/use/events.js
+++ b/use/events.js
@@ -25,6 +25,33 @@ export const useEvents = () => {
   const { postTypeList } = usePosts()
   const { t } = useI18n()
 
+  const eventRoleOptions = [
+    {
+      label: t('event.role.instructor'),
+      value: 'instructor',
+    },
+    {
+      label: t('event.role.dj'),
+      value: 'dj',
+    },
+    {
+      label: t('event.role.musician'),
+      value: 'musician',
+    },
+    {
+      label: t('event.role.taxi'),
+      value: 'taxi',
+    },
+    {
+      label: t('event.role.photographer'),
+      value: 'photographer',
+    },
+    {
+      label: t('event.role.organiser'),
+      value: 'organiser',
+    },
+  ]
+
   const eventTypeList = [
     {
       label: t('events.typelist.party'),
@@ -135,12 +162,12 @@ export const useEvents = () => {
   const eventFields = [
     {
       name: 'name',
-      hideLabel: true,
+      labelPosition: 'top',
       placeholder: 'Event Name',
     },
     {
       name: 'description',
-      hideLabel: true,
+      labelPosition: 'top',
       component: 'TInputTextarea',
       placeholder: 'Details (markdown)',
       tips:
@@ -166,6 +193,7 @@ export const useEvents = () => {
     {
       name: 'duration',
       label: 'How long?',
+      labelPosition: 'top',
       onChange: updateEndDate,
       component: 'TInputSelect',
       options: [
@@ -216,43 +244,45 @@ export const useEvents = () => {
     },
     {
       name: 'styles',
+      labelPosition: 'top',
       label: 'Dance styles',
       component: 'TInputStylesSelect2',
     },
     {
       name: 'eventType',
+      labelPosition: 'top',
       component: 'TInputSelect',
       options: eventTypeList,
     },
     {
       name: 'cover',
       component: 'TInputPhoto',
+      labelPosition: 'top',
       width: 500,
       height: 500,
       circle: false,
-      hideLabel: true,
     },
     {
       name: 'visibility',
+      labelPosition: 'top',
       component: 'TInputButtons',
       options: ['Public', 'Members', 'Unlisted'],
       description: `- Public - searchable in Google.\n- Members - visible only for logged-in users.\n- Unlisted - possible to open with exact link, but they are not listed nor not shown in the search.`,
     },
     {
-      name: 'claimed',
-      label: 'Are you organiser?',
-      component: 'TInputButtons',
-      options: ['Yes', 'No'],
-      description: 'Are you the event organiser?',
+      name: 'artists',
+      component: 'TInputArray',
+      children: {
+        component: 'TInputProfile',
+      },
+      label: t('event.artists'),
+      labelPosition: 'top',
     },
     {
-      name: 'organiser',
+      name: 'org',
+      component: 'TInputProfile',
       label: 'Organiser',
-      description: 'Username on WeDance',
-    },
-    {
-      name: 'username',
-      admin: true,
+      labelPosition: 'top',
     },
     {
       name: 'online',
@@ -261,10 +291,12 @@ export const useEvents = () => {
       options: ['Yes', 'No'],
       onChange: updatePlace,
       description: 'Streaming via Zoom, Google Meet, Instagram Live, etc.?',
+      labelPosition: 'top',
     },
     {
       name: 'international',
       label: 'International?',
+      labelPosition: 'top',
       component: 'TInputButtons',
       options: ['Yes', 'No'],
       onChange: updatePlace,
@@ -274,6 +306,7 @@ export const useEvents = () => {
     {
       name: 'place',
       label: 'Community',
+      labelPosition: 'top',
       component: 'TInputPlace',
       clearable: true,
       when: (answers) => answers.international === 'No',
@@ -283,26 +316,26 @@ export const useEvents = () => {
     {
       name: 'form',
       label: 'External registration?',
+      labelPosition: 'top',
       before: 'Do you use external platform to register for your event?',
       component: 'TInputButtons',
       options: ['Yes', 'No'],
     },
     {
       name: 'link',
+      labelPosition: 'top',
       description:
         'Direct booking link on ticket platform (ti.to, Eventbrite, Google Form, etc.)',
     },
-    {
-      name: 'website',
-      description: 'Link to your event or website',
-    },
     {
       name: 'facebook',
-      description: 'Link to original event (Facebook, Eventbrite, etc.)',
+      labelPosition: 'top',
+      description: 'Facebook event',
     },
     {
       name: 'promo',
       label: 'Do you want free promo?',
+      labelPosition: 'top',
       component: 'TInputButtons',
       options: ['Yes', 'No'],
       description:
@@ -330,5 +363,6 @@ export const useEvents = () => {
     getEventIcon,
     eventFields,
     addLabelIcons,
+    eventRoleOptions,
   }
 }
diff --git a/use/posts.js b/use/posts.js
index d448e400..2ce15c5c 100644
--- a/use/posts.js
+++ b/use/posts.js
@@ -150,18 +150,6 @@ export const usePosts = () => {
       label: 'Dance styles',
       component: 'TInputStylesSelect2',
     },
-    {
-      name: 'hideMeta',
-      admin: true,
-    },
-    {
-      name: 'hideComments',
-      admin: true,
-    },
-    {
-      name: 'hideReactions',
-      admin: true,
-    },
   ]
 
   return {