Invitations + fix for members

locales/en.yml

@@ -31,13 +31,19 @@ add-your-app-to-your: Add your app to your account
 add-your-first-app-t: Add your first app to your account and let's push updates !
 admin: Admin
 afternoon: afternoon
+alert-accept-inviation: Do you accept the invitation to %ORG%?
 alert-add-new-key: Select new API key type
 alert-confirm-delete: Confirm Delete
+alert-confirm-invite: Confirm invitation
 alert-confirm-regenerate: Confirm regenerating API key
 alert-delete-message: Are you sure you want to delete this
+alert-denied-invite: Invitation denied
 alert-generate-new-key: Please select the type of API key that you want to generate.
+alert-no-invite: This invitation does no longer exist
+alert-not-invited: Invalid invitation, cannot accept
 alert-not-reverse-message: This action is not reversible
 alert-regenerate-key: Are you sure you want to regenerate this key
+alert-unknown-error: Unknown error, see dev console
 allow-develoment-bui: Allow develoment build
 allow-device-to-self: Allow devices to self associate
 allow-emulator: Allow Emulators
@@ -70,9 +76,11 @@ button-browse: Browse
 button-camera: Camera
 button-cancel: Cancel
 button-delete: Delete
+button-deny-invite: Deny
 button-go: GO
 button-home: Home
 button-invite: Invite
+button-join: Accept
 button-options: Options
 button-regenerate: Regenerate
 button-remove: Remove

src/components/dashboard/DropdownOrganization.vue

@@ -2,10 +2,21 @@
 import { Dropdown, initDropdowns } from 'flowbite'
 import { storeToRefs } from 'pinia'
 import { onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { toast } from 'vue-sonner'
+import type { Organization } from '~/stores/organization'
 import { useOrganizationStore } from '~/stores/organization'
+import { useDisplayStore } from '~/stores/display'
+import { useSupabase } from '~/services/supabase'
+import { useMainStore } from '~/stores/main'
 
 const organizationStore = useOrganizationStore()
 const { currentOrganization, organizations } = storeToRefs(organizationStore)
+const displayStore = useDisplayStore()
+const { t } = useI18n()
+const supabase = useSupabase()
+const main = useMainStore()
+
 let dropdown: Dropdown
 
 onMounted(async () => {
@@ -20,8 +31,84 @@ onMounted(async () => {
   )
 })
 
-function onOrganizationClick(org: string) {
-  organizationStore.setCurrentOrganization(org)
+async function handleOrganizationInvitation(org: Organization) {
+  const newName = t('alert-accept-inviation').replace('%ORG%', org.name)
+  console.log(newName)
+  displayStore.dialogOption = {
+    header: t('alert-confirm-invite'),
+    message: `${newName}`,
+    buttons: [
+      {
+        text: t('button-join'),
+        id: 'confirm-button',
+        handler: async () => {
+          const { data, error } = await supabase.rpc('accept_invitation_to_org', {
+            org_id: org.gid,
+          })
+
+          if (!data || error) {
+            console.log('Error accept: ', error)
+            return
+          }
+
+          console.log('Data accept:', data)
+          switch (data) {
+            case 'OK':
+              organizationStore.setCurrentOrganization(org.gid)
+              organizationStore.fetchOrganizations()
+              break
+            case 'NO_INVITE':
+              toast.error(t('alert-no-invite'))
+              break
+            case 'INVALID_ROLE':
+              toast.error(t('alert-not-invited'))
+              break
+            default:
+              toast.error(t('alert-unknown-error'))
+              break
+          }
+        },
+      },
+      {
+        text: t('button-deny-invite'),
+        id: 'deny-button',
+        handler: async () => {
+          const userId = main.user?.id
+          if (userId === undefined)
+            return
+
+          const { error } = await supabase
+            .from('org_users')
+            .delete()
+            .eq('user_id', userId)
+
+          if (error)
+            console.log('Error delete: ', error)
+
+          organizationStore.fetchOrganizations()
+          toast.success(t('alert-denied-invite'))
+        },
+      },
+      {
+        text: t('button-cancel'),
+        role: 'cancel',
+      },
+    ],
+  }
+  displayStore.showDialog = true
+}
+
+function onOrganizationClick(org: Organization) {
+  console.log(org)
+  console.log('Role: ', org.role)
+
+  // Check if the user is invited to the organization
+  if (org.role.startsWith('invite')) {
+    handleOrganizationInvitation(org)
+    return
+  }
+
+  organizationStore.setCurrentOrganization(org.gid)
 
   if (dropdown)
     dropdown.hide()
@@ -37,8 +124,8 @@ function onOrganizationClick(org: string) {
   </button>
   <div id="dropdown-org" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
     <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
-      <li v-for="org in organizations" :key="org.id">
-        <a class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" @click="onOrganizationClick(org.id)">{{ org.name }}</a>
+      <li v-for="org in organizations" :key="org.gid">
+        <a class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" @click="onOrganizationClick(org)">{{ org.name }}</a>
       </li>
     </ul>
   </div>

src/pages/dashboard/settings/organization/General.vue

@@ -85,7 +85,7 @@ async function saveChanges() {
 <template>
   <div class="h-full p-8 max-h-fit grow md:pb-0 overflow-hidden" style="min-height: 100%;">
     <!-- TODO Classes are not working -->
-    <FormKit id="update-account" type="form" :actions="false" class="min-h-[100%] flex flex-col justify-between" style="min-height: 100%; display: flex; flex-direction: column;" @submit="submit">
+    <FormKit id="update-account" type="form" :actions="false" class="min-h-[100%] flex flex-col justify-between" style="min-height: 100%; display: flex; flex-direction: column;">
       <div>
         <section>
           <div class="flex items-center">
@@ -115,7 +115,7 @@ async function saveChanges() {
       <footer style="margin-top: auto">
         <div class="flex flex-col px-6 py-5 border-t border-slate-200">
           <div class="flex self-end">
-            <button type="button" class="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700" @click="deleteAccount()">
+            <button type="button" class="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700">
               {{ t('cancel') }}
             </button>
             <button

src/pages/dashboard/settings/organization/Members.vue

@@ -7,6 +7,7 @@ import Trash from '~icons/heroicons/trash'
 import Wrench from '~icons/heroicons/Wrench'
 
 import { useOrganizationStore } from '~/stores/organization'
+import type { ExtendedOrganizationMembers } from '~/stores/organization'
 import Plus from '~icons/heroicons/plus'
 import type { Database } from '~/types/supabase.types'
 import { useDisplayStore } from '~/stores/display'
@@ -19,7 +20,7 @@ const organizationStore = useOrganizationStore()
 const { currentOrganization } = storeToRefs(organizationStore)
 const supabase = useSupabase()
 
-const members = ref([] as Database['public']['Functions']['get_org_members']['Returns'])
+const members = ref([] as ExtendedOrganizationMembers)
 
 watch(currentOrganization, async () => {
   members.value = await organizationStore.getMembers()
@@ -113,7 +114,7 @@ async function showInviteModal() {
 async function sendInvitation(email: string, type: Database['public']['Enums']['user_min_right']) {
   console.log(`Invite ${email} with perm ${type}`)
 
-  const orgId = currentOrganization.value?.id
+  const orgId = currentOrganization.value?.gid
   if (!orgId)
     return
 

src/services/types.ts

@@ -0,0 +1,78 @@
+type Primitive = string | number | boolean | bigint | symbol | null | undefined
+type Expand<T> = T extends Primitive ? T : { [K in keyof T]: T[K] }
+
+type OptionalKeys<T> = {
+  [K in keyof T]-?: T extends Record<K, T[K]> ? never : K;
+}[keyof T]
+
+type RequiredKeys<T> = {
+  [K in keyof T]-?: T extends Record<K, T[K]> ? K : never;
+}[keyof T] &
+keyof T
+
+type RequiredMergeKeys<T, U> = RequiredKeys<T> & RequiredKeys<U>
+
+type OptionalMergeKeys<T, U> =
+    | OptionalKeys<T>
+    | OptionalKeys<U>
+    | Exclude<RequiredKeys<T>, RequiredKeys<U>>
+    | Exclude<RequiredKeys<U>, RequiredKeys<T>>
+
+type MergeNonUnionObjects<T, U> = Expand<
+    {
+      [K in RequiredMergeKeys<T, U>]: Expand<Merge<T[K], U[K]>>;
+    } & {
+      [K in OptionalMergeKeys<T, U>]?: K extends keyof T
+        ? K extends keyof U
+          ? Expand<Merge<
+                    Exclude<T[K], undefined>,
+                    Exclude<U[K], undefined>
+                >>
+          : T[K]
+        : K extends keyof U
+          ? U[K]
+          : never;
+    }
+>
+
+type MergeNonUnionArrays<T extends readonly any[], U extends readonly any[]> = Array<Expand<Merge<T[number], U[number]>>>
+
+type MergeArrays<T extends readonly any[], U extends readonly any[]> = [T] extends [never]
+  ? U extends any
+    ? MergeNonUnionArrays<T, U>
+    : never
+  : [U] extends [never]
+      ? T extends any
+        ? MergeNonUnionArrays<T, U>
+        : never
+      : T extends any
+        ? U extends any
+          ? MergeNonUnionArrays<T, U>
+          : never
+        : never
+
+type MergeObjects<T, U> = [T] extends [never]
+  ? U extends any
+    ? MergeNonUnionObjects<T, U>
+    : never
+  : [U] extends [never]
+      ? T extends any
+        ? MergeNonUnionObjects<T, U>
+        : never
+      : T extends any
+        ? U extends any
+          ? MergeNonUnionObjects<T, U>
+          : never
+        : never
+
+export type Merge<T, U> =
+    | Extract<T | U, Primitive>
+    | MergeArrays<Extract<T, readonly any[]>, Extract<U, readonly any[]>>
+    | MergeObjects<Exclude<T, Primitive | readonly any[]>, Exclude<U, Primitive | readonly any[]>>
+
+export type ArrayElement<ArrayType extends readonly unknown[]> =
+  ArrayType extends readonly (infer ElementType)[] ? ElementType : never
+
+export type Concrete<Type> = {
+  [Property in keyof Type]-?: Type[Property];
+}

src/stores/organization.ts

@@ -4,10 +4,12 @@ import type { ComputedRef, Ref } from 'vue'
 import { useMainStore } from './main'
 import type { Database } from '~/types/supabase.types'
 import { useSupabase } from '~/services/supabase'
+import type { ArrayElement, Concrete, Merge } from '~/services/types'
 
 type User = Database['public']['Tables']['users']['Row']
-export type Organization = Database['public']['Tables']['orgs']['Row']
-type ExtendedOrganizationMembers = Database['public']['Functions']['get_org_members']['Returns']
+export type Organization = ArrayElement<Database['public']['Functions']['get_orgs_v2']['Returns']>
+type OrganizationRole = Database['public']['Enums']['user_min_right'] | 'owner'
+export type ExtendedOrganizationMembers = Concrete<Merge<ArrayElement<Database['public']['Functions']['get_org_members']['Returns']>, { id: number }>>[]
 // TODO Create user rights in database
 // type Right = Database['public']['Tables']['user_rights']['Row']
 type Right = 'create' | 'read' | 'update' | 'delete'
@@ -28,15 +30,15 @@ export const useOrganizationStore = defineStore('organization', () => {
   const currentOrganization = ref<Organization>()
 
   const setCurrentOrganization = (id: string) => {
-    currentOrganization.value = organizations.value.find(org => org.id === id)
+    currentOrganization.value = organizations.value.find(org => org.gid === id)
   }
 
   const setCurrentOrganizationFromValue = (value: Organization) => {
     currentOrganization.value = value
   }
 
   const getMembers = async (): Promise<ExtendedOrganizationMembers> => {
-    const currentOrgId = currentOrganization.value?.id
+    const currentOrgId = currentOrganization.value?.gid
     if (!currentOrgId)
       return []
 
@@ -56,29 +58,42 @@ export const useOrganizationStore = defineStore('organization', () => {
       return []
     }
 
-    return data
+    return data.map(
+      (item, id) => {
+        return { id, ...item }
+      },
+    )
   }
 
   const fetchOrganizations = async () => {
     const main = useMainStore()
 
     console.log('fetch orgs!')
+    const userId = main.user?.id
+    if (!userId)
+      return
+
     // We have RLS that ensure that we only selct rows where we are member or owner
     const { data, error } = await supabase
-      .from('orgs')
-      .select('*')
+      .rpc('get_orgs_v2', {
+        userid: userId,
+      })
 
     if (error)
       throw error
 
     console.log('fetch or d', data)
-    const organization = <Organization | undefined>data[0]
+    const organization = data.find(org => org.role === 'owner')
     if (!organization) {
       console.log('user has no main organization')
       return
     }
 
-    _organizations.value = new Map(data.map(item => [item.id, item]))
+    const mappedData = data.map((item, id) => {
+      return { id, ...item }
+    })
+
+    _organizations.value = new Map(mappedData.map(item => [item.id.toString(), item]))
     if (!currentOrganization.value)
       currentOrganization.value = organization
   }