- integrated & fixed BBB API

frontend/src/graphql/mutations/createMyTableMutation.ts

@@ -2,7 +2,7 @@ import { gql } from 'graphql-tag'
 
 export const createMyTableMutation = gql`
   mutation ($name: String!, $isPublic: Boolean!, $userIds: [Int]) {
-    createMyRoom(name: $name, isPublic: $isPublic, userIds: $userIds) {
+    createMyTable(name: $name, isPublic: $isPublic, userIds: $userIds) {
       id
       name
       public

frontend/src/panels/dreammall/TableSetup.vue

@@ -12,15 +12,18 @@
     v-if="steps && currentStep < steps.length"
     :my-table-settings="tableSettings"
     @next="onNext"
+    @submit="onSubmit"
     @table-name:updated="updateTableName"
     @is-public:updated="updateIsPublic"
     @users:updated="updateUsers"
   />
 </template>
 
 <script setup lang="ts">
+import { navigate } from 'vike/client/router'
 import { onMounted, onUnmounted, ref } from 'vue'
 
+import GlobalErrorHandler from '#plugins/globalErrorHandler'
 import MyTableSettings from '#src/panels/dreammall/interfaces/MyTableSettings'
 import TableSetupStepA from '#src/panels/dreammall/TableSetupStepA.vue'
 import TableSetupStepB from '#src/panels/dreammall/TableSetupStepB.vue'
@@ -132,14 +135,44 @@ const findStepById = (id: string): number => steps.findIndex((step) => step.id =
 const onNext = transitToNext
 const onBack = transitToPrevious
 
+const onSubmit = async () => {
+  try {
+    const name = tableSettings.value.name
+    const isPublic = tableSettings.value.isPublic
+    const users = tableSettings.value.users
+
+    const table = await tablesStore.createMyTable(
+      tableSettings.value.name,
+      tableSettings.value.isPublic,
+      tableSettings.value.users,
+    )
+    console.log(table)
+    if (!table) {
+      GlobalErrorHandler.error('Could not create MyTable')
+      return
+    }
+
+    emit('close')
+
+    const tableId = await tablesStore.joinMyTable()
+    if (!tableId) {
+      GlobalErrorHandler.error('Could not join myTable')
+      return
+    }
+
+    await navigate(`/table/${tableId}`)
+  } catch (error) {
+    GlobalErrorHandler.error('Error opening table', error)
+  }
+}
+
 const onClose = () => emit('close')
 
 const reset = () => {
   currentStep.value = 0
   updateHistory(currentStep.value)
 }
 reset()
-
 defineExpose({ reset })
 
 const handlePopState = (event: PopStateEvent) => {

frontend/src/panels/dreammall/TableSetupProps.ts

@@ -6,6 +6,7 @@ export type TableSetupProps = {
 
 export type TableSetupEmits = {
   (e: 'next'): void
+  (e: 'submit'): void
   (e: 'tableName:updated', value: string): void
   (e: 'isPublic:updated', value: boolean): void
   (e: 'users:updated', value: number[]): void

frontend/src/panels/dreammall/TableSetupStepC.vue

@@ -11,7 +11,10 @@
     />
 
     <div class="user-list-container w-100">
-      <v-list class="bg-transparent w-100 user-list">
+      <v-list
+        class="bg-transparent w-100 user-list"
+        :class="{ loading: searchUsersStore.isLoading }"
+      >
         <UserInvitationItem
           v-for="user in displayedUsers"
           :key="user.id"
@@ -21,10 +24,6 @@
       </v-list>
     </div>
 
-    <div v-if="searchUsersStore.isLoading" class="text-center">
-      <v-progress-circular indeterminate color="primary"></v-progress-circular>
-    </div>
-
     <div v-if="searchUsersStore.error" class="text-center text-error">
       An error occurred while searching for users.
     </div>
@@ -81,18 +80,9 @@ const updateInvitationStatus = (userId: number, invited: boolean) => {
   invitedUserIdsModel.value = currentUsers
 }
 
-const onNext = async () => {
-  await createMyTable()
+const onNext = () => {
   emit('next')
 }
-
-const createMyTable = async () => {
-  // try {
-  //
-  // } catch (error) {
-  //   GlobalErrorHandler.error('Error opening table', error)
-  // }
-}
 </script>
 
 <style lang="scss">
@@ -106,5 +96,9 @@ const createMyTable = async () => {
 }
 .user-list {
   height: 100%;
+
+  &.loading {
+    opacity: 50%;
+  }
 }
 </style>

frontend/src/panels/dreammall/TableSetupStepD.vue

@@ -7,41 +7,19 @@
       </p>
     </div>
 
-    <SimpleButton class="mt-12 mx-auto" label="Los geht's" @click="onNext" />
+    <SimpleButton class="mt-12 mx-auto" label="Los geht's" @click="onSubmit" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { navigate } from 'vike/client/router'
-
 import SimpleButton from '#components/buttons/SimpleButton.vue'
-import GlobalErrorHandler from '#plugins/globalErrorHandler'
-import { useTablesStore } from '#stores/tablesStore'
 
-import { TableSetupEmits, TableSetupProps } from './TableSetupProps'
+import { TableSetupEmits } from './TableSetupProps'
 
-const props = defineProps<TableSetupProps>()
 const emit = defineEmits<TableSetupEmits>()
 
-const tablesStore = useTablesStore()
-
-const onNext = async () => {
-  await enterTable()
-  emit('next')
-}
-
-const enterTable = async () => {
-  try {
-    const tableId = await tablesStore.joinMyTable()
-
-    if (tableId) {
-      await navigate(`/table/${tableId}`)
-    } else {
-      GlobalErrorHandler.error('No table found')
-    }
-  } catch (error) {
-    GlobalErrorHandler.error('Error opening table', error)
-  }
+const onSubmit = async () => {
+  emit('submit')
 }
 </script>
 

frontend/src/stores/tablesStore.ts

@@ -36,12 +36,12 @@ export type MyTable = {
   users: UserInTable[]
 }
 
-type CreateMyRoomResult = {
-  createMyRoom: MyTable
+type CreateMyTableResult = {
+  createMyTable: MyTable
 }
 
-type UpdateMyRoomResult = {
-  updateMyRoom: MyTable
+type UpdateMyTableResult = {
+  updateMyTable: MyTable
 }
 
 type JoinMyTableResult = {
@@ -89,24 +89,24 @@ export const useTablesStore = defineStore(
       tables.value = newTables
     }
 
-    const { mutate: createMyTableMutate } = useMutation<CreateMyRoomResult>(createMyTableMutation)
-    const { mutate: updateMyTableMutate } = useMutation<UpdateMyRoomResult>(updateMyTableMutation)
+    const { mutate: createMyTableMutate } = useMutation<CreateMyTableResult>(createMyTableMutation)
+    const { mutate: updateMyTableMutate } = useMutation<UpdateMyTableResult>(updateMyTableMutation)
     const { mutate: joinMyTableMutate } = useMutation<JoinMyTableResult>(joinMyTableMutation)
 
-    const createMyTable = async (name: string, isPublic: boolean) => {
-      const result = await createMyTableMutate({ name, isPublic })
-      if (result?.data?.createMyRoom) {
-        myTable.value = result.data.createMyRoom
+    const createMyTable = async (name: string, isPublic: boolean, userIds: number[]) => {
+      const result = await createMyTableMutate({ name, isPublic, users: userIds })
+      if (result?.data?.createMyTable) {
+        myTable.value = result.data.createMyTable
       }
-      return result?.data?.createMyRoom
+      return result?.data?.createMyTable
     }
 
     const updateMyTable = async (name: string, isPublic: boolean) => {
       const result = await updateMyTableMutate({ name, isPublic })
-      if (result?.data?.updateMyRoom) {
-        myTable.value = result.data.updateMyRoom
+      if (result?.data?.updateMyTable) {
+        myTable.value = result.data.updateMyTable
       }
-      return result?.data?.updateMyRoom
+      return result?.data?.updateMyTable
     }
 
     const updateMyTableUsers = async (userIds: number[]) => {
@@ -116,10 +116,10 @@ export const useTablesStore = defineStore(
         isPublic: myTable.value.public,
         userIds,
       })
-      if (result?.data?.updateMyRoom) {
-        myTable.value = result.data.updateMyRoom
+      if (result?.data?.updateMyTable) {
+        myTable.value = result.data.updateMyTable
       }
-      return result?.data?.updateMyRoom
+      return result?.data?.updateMyTable
     }
 
     const joinMyTable = async (): Promise<number | undefined> => {