From f56de04009218976aa525dae00f5a41a97543970 Mon Sep 17 00:00:00 2001
From: Maximilian Harz <maxharz@gmail.com>
Date: Wed, 18 Sep 2024 15:37:50 +0200
Subject: [PATCH] POC: Navigate while staying in meeting

---
 frontend/renderer/app.ts                      |  5 +-
 .../components/embedded-table/AppWrapper.vue  |  8 +++
 .../embedded-table/FloatingTable.vue          | 32 +++++++++
 .../src/components/embedded-table/useTable.ts | 65 +++++++++++++++++++
 .../src/components/tablesDrawer/TableList.vue |  8 ++-
 5 files changed, 114 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/embedded-table/AppWrapper.vue
 create mode 100644 frontend/src/components/embedded-table/FloatingTable.vue
 create mode 100644 frontend/src/components/embedded-table/useTable.ts

diff --git a/frontend/renderer/app.ts b/frontend/renderer/app.ts
index 589bbd0ec6..5acd9113ef 100644
--- a/frontend/renderer/app.ts
+++ b/frontend/renderer/app.ts
@@ -6,6 +6,7 @@ import Vue3Toasity from 'vue3-toastify'
 // eslint-disable-next-line import/no-unassigned-import
 import 'vue3-toastify/dist/index.css'
 
+import AppWrapper from '#components/embedded-table/AppWrapper.vue'
 import PageShell from '#components/PageShell.vue'
 import { setPageContext } from '#context/usePageContext'
 import { createApolloClient } from '#plugins/apollo'
@@ -47,7 +48,9 @@ function createApp(pageContext: PageContext, isClient = true) {
         {},
         {
           default: () => {
-            return h(this.Page, this.pageProps)
+            return h(AppWrapper, null, {
+              default: () => h(this.Page, this.pageProps),
+            })
           },
         },
       )
diff --git a/frontend/src/components/embedded-table/AppWrapper.vue b/frontend/src/components/embedded-table/AppWrapper.vue
new file mode 100644
index 0000000000..f7b8fb9f2b
--- /dev/null
+++ b/frontend/src/components/embedded-table/AppWrapper.vue
@@ -0,0 +1,8 @@
+<template>
+  <FloatingTable />
+  <slot></slot>
+</template>
+
+<script lang="ts" setup>
+import FloatingTable from '#components/embedded-table/FloatingTable.vue'
+</script>
diff --git a/frontend/src/components/embedded-table/FloatingTable.vue b/frontend/src/components/embedded-table/FloatingTable.vue
new file mode 100644
index 0000000000..e1522f92ab
--- /dev/null
+++ b/frontend/src/components/embedded-table/FloatingTable.vue
@@ -0,0 +1,32 @@
+<template>
+  <div v-show="isActive" class="container">
+    <EmbeddedTable v-if="errorMessage === null" :url="tableUrl" @table-closed="onTableClosed" />
+    <div v-else class="test-not-found">
+      {{ $t('table.notFound') }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import EmbeddedTable from '#components/embedded-table/EmbeddedTable.vue'
+
+import { useTable } from './useTable'
+
+const { errorMessage, tableUrl, isActive, leaveTable } = useTable()
+
+const onTableClosed = () => {
+  leaveTable()
+}
+</script>
+
+<style scoped lang="scss">
+@use 'sass:map';
+@import 'vuetify/lib/styles/settings/_variables';
+
+.container {
+  width: 400px;
+  height: 400px;
+  display: flex;
+  z-index: 1000;
+}
+</style>
diff --git a/frontend/src/components/embedded-table/useTable.ts b/frontend/src/components/embedded-table/useTable.ts
new file mode 100644
index 0000000000..8db2d83d69
--- /dev/null
+++ b/frontend/src/components/embedded-table/useTable.ts
@@ -0,0 +1,65 @@
+import { useLazyQuery } from '@vue/apollo-composable'
+import { ref, watch, computed } from 'vue'
+
+import GlobalErrorHandler from '#plugins/globalErrorHandler'
+import { joinTableQuery } from '#queries/joinTableQuery'
+
+const tableUrl = ref<string | null>(null)
+
+const tableId = ref<number | null>(null)
+
+const errorMessage = ref<string | null>(null)
+
+export const useTable = () => {
+  const getTableId = computed(() => tableId.value)
+
+  const {
+    load,
+    result: joinTableQueryResult,
+    error: joinTableQueryError,
+  } = useLazyQuery(
+    joinTableQuery,
+    () => ({
+      tableId: tableId.value,
+    }),
+    {
+      prefetch: false,
+      fetchPolicy: 'no-cache',
+    },
+  )
+
+  watch(joinTableQueryResult, (data: { joinTable: string }) => {
+    if (!data.joinTable) return
+    tableUrl.value = data.joinTable
+    errorMessage.value = null
+  })
+
+  // eslint-disable-next-line promise/prefer-await-to-callbacks
+  watch(joinTableQueryError, (error) => {
+    if (!error) return
+    GlobalErrorHandler.error('Error opening table', error)
+    errorMessage.value = error.message
+    tableUrl.value = null
+  })
+
+  const setTableId = async (id: number) => {
+    tableId.value = id
+    await load()
+  }
+
+  const isActive = computed(() => tableId.value !== null)
+
+  const leaveTable = () => {
+    tableId.value = null
+  }
+
+  return {
+    loadTable: load,
+    getTableId,
+    setTableId,
+    tableUrl,
+    isActive,
+    leaveTable,
+    errorMessage,
+  }
+}
diff --git a/frontend/src/components/tablesDrawer/TableList.vue b/frontend/src/components/tablesDrawer/TableList.vue
index 2038685e89..e4dec6ca04 100644
--- a/frontend/src/components/tablesDrawer/TableList.vue
+++ b/frontend/src/components/tablesDrawer/TableList.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-import { navigate } from 'vike/client/router'
+import { useTable } from '#components/embedded-table/useTable'
 
 import type { OpenTable } from '#stores/tablesStore'
 
@@ -25,9 +25,11 @@ defineProps<{
 
 const emit = defineEmits(['openTable'])
 
-const openTable = (id: number) => {
+const { setTableId } = useTable()
+
+const openTable = async (id: number) => {
   emit('openTable')
-  navigate(`/table/${id}`)
+  await setTableId(id)
 }
 </script>