@live-change/db-admin 0.5.6

package/front/src/Data.vue

@@ -0,0 +1,74 @@
+<template>
+
+  <PathEditor v-model="path"
+              @update:read="v => read = v"
+              @update:write="v => write = v"
+              @update:remove="v => remove = v" />
+
+<!--  <p>{{ path }}</p>-->
+
+  <template v-if="read?.external?.includes('range')">
+    <DataRangeView v-if="read && write && remove" :read="read.result" :write="write.result" :remove="remove.result" />
+  </template>
+  <template v-else>
+    <DataView v-if="read && write && remove" :read="read.result" :write="write.result" :remove="remove.result" />
+  </template>
+
+</template>
+
+<script setup>
+  import PathEditor from "./PathEditor.vue"
+  import DataRangeView from "./DataRangeView.vue"
+  import DataView from "./DataView.vue"
+
+  const props = defineProps({
+    position: {
+      type: String,
+      required: true
+    },
+    read: {
+      type: String,
+      required: true
+    },
+    write: {
+      type: String,
+      required: true
+    },
+    remove: {
+      type: String,
+      required: true
+    },
+    params: {
+      type: Array,
+      required: true
+    }
+  })
+
+  const pathParams = new Array(props.params.length / 2)
+  for(let i = 0; i < props.params.length/2; i++) pathParams[i] = [props.params[i * 2], props.params[i * 2 + 1]]
+
+  import { ref, watch } from 'vue'
+  import { useRouter, useRoute } from 'vue-router'
+
+  const path = ref({ read: props.read, write: props.write, remove: props.remove, params: pathParams })
+
+  const router = useRouter()
+  const route = useRoute()
+
+  watch(() => path.value, value => {
+    console.log("PATH VALUE UPDATED", value)
+    const paramsArray = value.params.flat()
+    router.replace({ name: route.name, params: {
+      read: value.read,
+      write: value.write, 
+      remove: value.remove,
+      params: paramsArray
+    } })
+    /// TODO: update URL
+  })
+
+  const read = ref()
+  const write = ref()
+  const remove = ref()
+
+</script>

package/front/src/DataRangeView.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="rows w-full mt-2">
+    <scroll-border placement="top"
+                   :load="dataBuckets.loadTop"
+                   :canLoad="dataBuckets.canLoadTop" />
+    <div v-for="(bucket, bucketIndex) in dataBuckets.buckets" :key="bucket.id"
+         class="w-full">
+      <div v-for="(row, index) in bucket.data" :key="row.id" :ref="el => bucket.domElements[index] = el"
+           class="surface-0 shadow-1 w-full">
+<!--        {{ JSON.stringify(row) }}-->
+        <object-editor :currentData="JSON.stringify(row)"
+                       :write="write" :remove="remove"
+                       :dbApi="dbApi" />
+      </div>
+    </div>
+    <scroll-border placement="bottom"
+                   :load="dataBuckets.loadBottom"
+                   :canLoad="dataBuckets.canLoadBottom" />
+  </div>
+</template>
+
+<script setup>
+
+  import { path, live, actions, api, rangeBuckets, reverseRange } from '@live-change/vue3-ssr'
+  import ScrollBorder from 'vue3-scroll-border'
+  import ObjectEditor from "./ObjectEditor.vue"
+
+  import { dbViewSugar } from "./dbSugar.js"
+
+  const { dbApi, read, write, remove } = defineProps({
+    dbApi: {
+      type: String,
+      default: 'serverDatabase'
+    },
+    read: {
+      type: Function,
+      required: true
+    },
+    write: {
+      type: Function,
+      default: null
+    },
+    remove: {
+      type: Function,
+      default: null
+    }
+  })
+
+
+  const [ dataBuckets ] = await Promise.all([
+    rangeBuckets((range, p) => [dbApi, ...JSON.parse(JSON.stringify(read({ range }, dbViewSugar)))])
+  ])
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/DataView.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="rows w-full mt-2">
+    <div v-for="(row, index) in dataRows" :key="row.id"
+         class="surface-0 shadow-1 w-full">
+      <!--        {{ JSON.stringify(row) }}-->
+      <object-editor :currentData="JSON.stringify(row)"
+                     :write="write" :remove="remove"
+                     :dbApi="dbApi" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+  import { path, live, actions, api, rangeBuckets, reverseRange } from '@live-change/vue3-ssr'
+  import ScrollBorder from 'vue3-scroll-border'
+  import ObjectEditor from "./ObjectEditor.vue"
+
+  import { dbViewSugar } from "./dbSugar.js"
+
+  const { dbApi, read, write, remove } = defineProps({
+    dbApi: {
+      type: String,
+      default: 'serverDatabase'
+    },
+    read: {
+      type: Function,
+      required: true
+    },
+    write: {
+      type: Function,
+      default: null
+    },
+    remove: {
+      type: Function,
+      default: null
+    }
+  })
+
+
+  const [ dataRows ] = await Promise.all([
+    live({
+      what: [dbApi, ...JSON.parse(JSON.stringify(read({ }, dbViewSugar)))]
+    })
+  ])
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/Database.vue

@@ -0,0 +1,364 @@
+<template>
+  <div class="surface-card p-4 shadow-2 border-round w-full">
+    <div class="text-center mb-3">
+      <div class="text-900 text-3xl font-medium mb-3">Database "{{ dbName }}"</div>
+    </div>
+    <div class="text-center mb-3">
+      <div v-if="tables.length > 0" class="text-900 text-2xl font-medium mb-3">Tables</div>
+      <div v-else class="text-600 text-xl font-medium mb-3">
+        There are no tables. Create first one.
+      </div>
+    </div>
+
+    <DataTable v-if="tables.length > 0" :value="tables" responsiveLayout="scroll">
+      <Column field="id" header="Table">
+        <template #body="slotProps">
+          <form v-if="tableRename == slotProps.data.id" @submit="ev => finishTableRename(ev, slotProps.data.id)">
+            <InputText v-model="tableNewName" />
+          </form>
+          <router-link v-else :to="tableLink(slotProps.data.id)">
+            {{ slotProps.data.id  }}
+          </router-link>
+        </template>
+      </Column>
+      <Column field="rows" header="Rows" :headerStyle="{ 'width': '60px' }"></Column>
+      <Column :headerStyle="{ 'width': '120px' }">
+        <template #body="slotProps">
+          <Button v-if="tableRename == slotProps.data.id"
+                  @click="ev => finishTableRename(ev, slotProps.data.id)" type="button"
+                  icon="pi pi-save" class="p-button-rounded p-button-primary mr-2" />
+          <Button v-else
+                  @click="ev => startTableRename(ev, slotProps.data.id)" type="button"
+                  icon="pi pi-pencil" class="p-button-rounded p-button-warning mr-2" />
+          <Button @click="ev => deleteTable(ev, slotProps.data.id)" type="button"
+                  icon="pi pi-trash" class="p-button-rounded p-button-danger" />
+        </template>
+      </Column>
+    </DataTable>
+
+    <form class="mt-4 flex flex-row justify-content-center" @submit="handleNewTableSubmit">
+      <InputText v-model="newTableName" class="mr-2" placeholder="Table Name" />
+      <Button type="submit" class="p-button-primary" icon="pi pi-plus" label="Create Table" />
+    </form>
+
+
+    <div class="text-center mb-3 mt-5">
+      <div v-if="logs.length > 0" class="text-900 text-2xl font-medium mb-3">Logs</div>
+      <div v-else class="text-600 text-xl font-medium mb-3">
+        There are no logs. Create first one.
+      </div>
+    </div>
+
+    <DataTable v-if="logs.length > 0" :value="logs" responsiveLayout="scroll">
+      <Column field="id" header="Log">
+        <template #body="slotProps">
+          <form v-if="logRename == slotProps.data.id" @submit="ev => finishLogRename(ev, slotProps.data.id)">
+            <InputText v-model="logNewName" />
+          </form>
+          <router-link v-else :to="logLink(slotProps.data.id)">
+            {{ slotProps.data.id  }}
+          </router-link>
+        </template>
+      </Column>
+      <Column field="rows" header="Rows" :headerStyle="{ 'width': '60px' }"></Column>
+      <Column :headerStyle="{ 'width': '120px' }">
+        <template #body="slotProps">
+          <Button v-if="logRename == slotProps.data.id"
+                  @click="ev => finishLogRename(ev, slotProps.data.id)" type="button"
+                  icon="pi pi-save" class="p-button-rounded p-button-primary mr-2" />
+          <Button v-else
+                  @click="ev => startLogRename(ev, slotProps.data.id)" type="button"
+                  icon="pi pi-pencil" class="p-button-rounded p-button-warning mr-2" />
+          <Button @click="ev => deleteLog(ev, slotProps.data.id)" type="button"
+                  icon="pi pi-trash" class="p-button-rounded p-button-danger" />
+        </template>
+      </Column>
+    </DataTable>
+
+    <form class="mt-4 flex flex-row justify-content-center" @submit="handleNewLogSubmit">
+      <InputText v-model="newLogName" class="mr-2" placeholder="Log Name" />
+      <Button type="submit" class="p-button-primary" icon="pi pi-plus" label="Create Log" />
+    </form>
+
+
+    <div class="text-center mb-3 mt-5">
+      <div v-if="indexes.length > 0" class="text-900 text-2xl font-medium mb-3">Indexes</div>
+      <div v-else class="text-600 text-xl font-medium mb-3">
+        There are no indexes.
+      </div>
+    </div>
+
+    <DataTable v-if="indexes.length > 0" :value="indexes" responsiveLayout="scroll">
+      <Column field="id" header="Index">
+        <template #body="slotProps">
+          <form v-if="indexRename == slotProps.data.id" @submit="ev => finishIndexRename(ev, slotProps.data.id)">
+            <InputText v-model="indexNewName" />
+          </form>
+          <router-link v-else :to="indexLink(slotProps.data.id)">
+            {{ slotProps.data.id  }}
+          </router-link>
+        </template>
+      </Column>
+      <Column field="rows" header="Rows" :headerStyle="{ 'width': '60px' }"></Column>
+      <Column :headerStyle="{ 'width': '120px' }">
+        <template #body="slotProps">
+          <Button v-if="indexRename == slotProps.data.id"
+                  @click="ev => finishIndexRename(ev, slotProps.data.id)" type="button"
+                  icon="pi pi-save" class="p-button-rounded p-button-primary mr-2" />
+          <Button v-else
+                  @click="ev => startIndexRename(ev, slotProps.data.id)" type="button"
+                  icon="pi pi-pencil" class="p-button-rounded p-button-warning mr-2" />
+          <Button @click="ev => deleteIndex(ev, slotProps.data.id)" type="button"
+                  icon="pi pi-trash" class="p-button-rounded p-button-danger" />
+        </template>
+      </Column>
+    </DataTable>
+
+  </div>
+</template>
+
+<script setup>
+  import DataTable from "primevue/datatable"
+  import Column from "primevue/column"
+  import Button from "primevue/button"
+  import InputText from "primevue/inputtext"
+
+  import ConfirmPopup from 'primevue/confirmpopup'
+  import Toast from 'primevue/toast'
+
+  const { dbApi, dbName } = defineProps({
+    dbApi: {
+      type: String,
+      default: 'serverDatabase'
+    },
+    dbName: {
+      type: String,
+      required: true
+    }
+  })
+
+  import { ref, onMounted, onUnmounted, inject } from "vue"
+  let isMounted = ref(false)
+  onMounted(() => isMounted.value = true)
+  onUnmounted(() => isMounted.value = false)
+
+  import { api } from "@live-change/vue3-ssr"
+  const dao = api().source
+  import { live, RangeBuckets } from "@live-change/dao-vue3"
+
+  import { useToast } from 'primevue/usetoast'
+  const toast = useToast()
+  import { useConfirm } from 'primevue/useconfirm'
+  const confirm = useConfirm()
+
+  const workingZone = inject('workingZone')
+
+  function deleteTable(event, id) {
+    confirm.require({
+      target: event.currentTarget,
+      message: `Do you really want to delete table ${id}?`,
+      icon: 'pi pi-info-circle',
+      acceptClass: 'p-button-danger',
+      accept: async () => {
+        workingZone.addPromise('deleteTable', (async () => {
+          await dao.request([dbApi, 'deleteTable'], dbName, id)
+          toast.add({ severity:'info', summary: `Table ${id} deleted`, life: 1500 })
+        })())
+      },
+      reject: () => {
+        toast.add({ severity:'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
+      }
+    })
+  }
+
+  const tableRename = ref("")
+  const tableNewName = ref("")
+  function startTableRename(event, id) {
+    tableNewName.value = id
+    tableRename.value = id
+  }
+  function finishTableRename(event, id) {
+    event.preventDefault()
+    const oldTableName = tableRename.value
+    const tableName = tableNewName.value
+    tableRename.value = null
+    if(oldTableName == tableName) return
+    workingZone.addPromise('renameTable', (async () => {
+      try {
+        await dao.request([dbApi, 'renameTable'], dbName, oldTableName, tableName)
+        toast.add({severity: 'info', summary: `Table ${oldTableName} renamed to ${tableName}`, life: 1500})
+      } catch(error) {
+        toast.add({ severity: 'error', summary: `Table ${tableName} not renamed`, detail: error.message, life: 3000 })
+      }
+    })())
+  }
+
+
+  const newTableName = ref("")
+  function handleNewTableSubmit(event) {
+    event.preventDefault()
+    const tableName = newTableName.value
+    if(tableName.length == 0) return
+    newTableName.value = ""
+    workingZone.addPromise('createTable', (async () => {
+      try {
+        await dao.request([dbApi, 'createTable'], dbName, tableName)
+        toast.add({ severity: 'info', summary: `Table ${tableName} created`, life: 1500 })
+      } catch(error) {
+        toast.add({ severity: 'error', summary: `Table ${tableName} not created`, detail: error.message, life: 3000 })
+      }
+    })())
+  }
+
+
+  function deleteLog(event, id) {
+    confirm.require({
+      target: event.currentTarget,
+      message: `Do you really want to delete log ${id}?`,
+      icon: 'pi pi-info-circle',
+      acceptClass: 'p-button-danger',
+      accept: async () => {
+        workingZone.addPromise('deleteLog', (async () => {
+          await dao.request([dbApi, 'deleteLog'], dbName, id)
+          toast.add({ severity:'info', summary: `Log ${id} deleted`, life: 1500 })
+        })())
+      },
+      reject: () => {
+        toast.add({ severity:'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
+      }
+    })
+  }
+
+  const logRename = ref("")
+  const logNewName = ref("")
+  function startLogRename(event, id) {
+    logNewName.value = id
+    logRename.value = id
+  }
+  function finishLogRename(event, id) {
+    event.preventDefault()
+    const oldLogName = logRename.value
+    const logName = logNewName.value
+    logRename.value = null
+    if(oldLogName == logName) return
+    workingZone.addPromise('renameLog', (async () => {
+      try {
+        await dao.request([dbApi, 'renameLog'], dbName, oldLogName, logName)
+        toast.add({severity: 'info', summary: `Log ${oldLogName} renamed to ${logName}`, life: 1500})
+      } catch(error) {
+        toast.add({ severity: 'error', summary: `Log ${logName} not renamed`, detail: error.message, life: 3000 })
+      }
+    })())
+  }
+
+  const newLogName = ref("")
+  function handleNewLogSubmit(event) {
+    event.preventDefault()
+    const logName = newLogName.value
+    newLogName.value = ""
+    workingZone.addPromise('createLog', (async () => {
+      try {
+        await dao.request([dbApi, 'createLog'], dbName, logName)
+        toast.add({severity: 'info', summary: `Log ${logName} created`, life: 1500})
+      } catch(error) {
+        toast.add({ severity: 'error', summary: `Log ${logName} not created`, detail: error.message, life: 3000 })
+      }
+    })())
+  }
+
+
+  function deleteIndex(event, id) {
+    confirm.require({
+      target: event.currentTarget,
+      message: `Do you really want to delete index ${id}?`,
+      icon: 'pi pi-info-circle',
+      acceptClass: 'p-button-danger',
+      accept: async () => {
+        workingZone.addPromise('deleteIndex', (async () => {
+          await dao.request([dbApi, 'deleteIndex'], dbName, id)
+          toast.add({ severity:'info', summary: `Index ${id} deleted`, life: 1500 })
+        })())
+      },
+      reject: () => {
+        toast.add({ severity:'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
+      }
+    })
+  }
+
+  const indexRename = ref("")
+  const indexNewName = ref("")
+  function startIndexRename(event, id) {
+    indexNewName.value = id
+    indexRename.value = id
+  }
+  function finishIndexRename(event, id) {
+    event.preventDefault()
+    const oldIndexName = indexRename.value
+    const indexName = indexNewName.value
+    indexRename.value = null
+    if(oldIndexName == indexName) return
+    workingZone.addPromise('renameIndex', (async () => {
+      try {
+        await dao.request([dbApi, 'renameIndex'], dbName, oldIndexName, indexName)
+        toast.add({severity: 'info', summary: `Index ${oldIndexName} renamed to ${indexName}`, life: 1500})
+      } catch(error) {
+        toast.add({ severity: 'error', summary: `Index ${indexName} not renamed`, detail: error.message, life: 3000 })
+      }
+    })())
+  }
+
+  function tableLink(table) {
+    return { name: 'db:data', params: {
+        position: " ",
+        read: `db.tableRange($.db,$.table,$.range)`,
+        write: `db.put($.db,$.table,$.object)`,
+        remove: `db.delete($.db,$.table,$.object.id)`,
+        params: [
+          'db', JSON.stringify(dbName),
+          'table', JSON.stringify(table)
+        ]
+    } }
+  }
+
+  function logLink(table) {
+    return { name: 'db:data', params: {
+        position: " ",
+        read: `db.logRange($.db,$.table,$.range)`,
+        write: false,
+        remove: false,
+        params: [
+          'db', JSON.stringify(dbName),
+          'table', JSON.stringify(table)
+        ]
+      } }
+  }
+
+  function indexLink(table) {
+    return { name: 'db:data', params: {
+        position: " ",
+        read: `db.indexRange($.db,$.table,$.range)`,
+        write: false,
+        remove: false,
+        params: [
+          'db', JSON.stringify(dbName),
+          'table', JSON.stringify(table)
+        ]
+      } }
+  }
+
+  const [ tables, indexes, logs ] = await Promise.all([
+    live(dao, {
+      what: [dbApi, 'tables', dbName],
+      more: [{ to: 'rows', schema: [[dbApi, 'tableCount', dbName, { property: 'id' }, { static: { limit: 999 }} ]] }]
+    }),
+    live(dao, {
+      what: [dbApi, 'indexes', dbName],
+      more: [{ to: 'rows', schema: [[dbApi, 'indexCount', dbName, { property: 'id' }, { static: { limit: 999 }} ]] }]
+    }),
+    live(dao, {
+      what: [dbApi, 'logs', dbName],
+      more: [{ to: 'rows', schema: [[dbApi, 'logCount', dbName, { property: 'id' }, { static: { limit: 999 }} ]] }]
+    })
+  ])
+
+</script>

package/front/src/DatabaseAdmin.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="min-h-screen flex relative lg:static surface-ground w-full">
+    <div id="app-sidebar-1" class="surface-section h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0
+                                     top-0 z-1 border-right-1 surface-border select-none" style="width:280px">
+      <div class="flex flex-column h-full">
+        <div class="flex align-items-center px-5 flex-shrink-0" style="height:60px">
+          <img src="/images/logo.svg" alt="Image" height="30">
+        </div>
+        <div class="overflow-y-auto">
+          <ul class="list-none p-2 m-0">
+            <li v-for="database in databases">
+              <div  class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer p-ripple">
+                <router-link :to="{ name: 'db:database', params: { dbName: database.id } }"
+                             class="font-medium no-underline text-600">
+                  {{ database.id }}
+                </router-link>
+                <i class="pi pi-chevron-down"
+                   v-styleclass="{ selector: `#db-menu-${database.id}`, enterClass: 'hidden',
+                                   enterActiveClass: 'slidedown', leaveToClass: 'hidden',
+                                   leaveActiveClass: 'slideup' }" v-ripple/>
+              </div>
+              <ul class="list-none p-0 m-0 ml-3 overflow-hidden hidden" :id="`db-menu-${database.id}`">
+                <li>
+                  <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100
+                                       transition-duration-150 transition-colors p-ripple"
+                     v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'slidedown',
+                                     leaveToClass: 'hidden', leaveActiveClass: 'slideup' }">
+                    <i class="pi pi-table mr-2"></i>
+                    <span class="font-medium">{{ database?.tables?.length }} TABLES</span>
+                    <i class="pi pi-chevron-down ml-auto"></i>
+                  </a>
+                  <ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all
+                               transition-duration-400 transition-ease-in-out">
+                    <li v-for="table in database?.tables">
+                      <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700
+                                           hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                        <span class="font-medium">{{ table }}</span>
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li>
+                  <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100
+                                       transition-duration-150 transition-colors p-ripple"
+                     v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'slidedown',
+                                     leaveToClass: 'hidden', leaveActiveClass: 'slideup' }">
+                    <i class="pi pi-external-link mr-2"></i>
+                    <span class="font-medium">{{ database?.indexes?.length }} INDEXES</span>
+                    <i class="pi pi-chevron-down ml-auto"></i>
+                  </a>
+                  <ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all
+                               transition-duration-400 transition-ease-in-out">
+                    <li v-for="index in database?.indexes">
+                      <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700
+                                           hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                        <span class="font-medium">{{ index }}</span>
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li>
+                  <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100
+                                       transition-duration-150 transition-colors p-ripple"
+                     v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'slidedown',
+                                     leaveToClass: 'hidden', leaveActiveClass: 'slideup' }">
+                    <i class="pi pi-list mr-2"></i>
+                    <span class="font-medium">{{ database?.logs?.length }} LOGS</span>
+                    <i class="pi pi-chevron-down ml-auto"></i>
+                  </a>
+                  <ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all
+                               transition-duration-400 transition-ease-in-out">
+                    <li v-for="log in database?.logs">
+                      <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700
+                                           hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                        <span class="font-medium">{{ log }}</span>
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="min-h-screen flex flex-column relative flex-auto">
+      <div class="flex justify-content-between align-items-center px-5 surface-0 border-bottom-1 surface-border
+                    relative lg:hidden" style="height:60px">
+        <div class="flex">
+          <a v-ripple class="cursor-pointer block text-700 mr-3 p-ripple"
+             v-styleclass="{ selector: '#app-sidebar-1', enterClass: 'hidden', enterActiveClass: 'fadeinleft', leaveToClass: 'hidden', leaveActiveClass: 'fadeoutleft', hideOnOutsideClick: true }">
+            <i class="pi pi-bars text-4xl"></i>
+          </a>
+        </div>
+      </div>
+      <div v-if="viewType == 'simple'" class="p-5 flex flex-column flex-auto align-items-center">
+        <router-view></router-view>
+      </div>
+      <template v-if="viewType == 'wide'">
+        <router-view></router-view>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+  const { dbApi } = defineProps({
+    dbApi: {
+      type: String,
+      default: 'serverDatabase'
+    }
+  })
+
+  import { computed } from 'vue'
+
+  import { useRoute } from 'vue-router'
+  const route = useRoute()
+
+  const viewType = computed(() => route.meta.viewType ?? 'simple' )
+
+  import { api } from "@live-change/vue3-ssr"
+  const dao = api().source
+  import { live, RangeBuckets } from "@live-change/dao-vue3"
+
+  const databases = await live(dao, {
+    what: [ dbApi, 'databases' ],
+    more: [
+      { to: 'tables', schema: [[ dbApi, 'tablesList', { property: 'id' } ]] },
+      { to: 'indexes', schema: [[ dbApi, 'indexesList', { property: 'id' } ]] },
+      { to: 'logs', schema: [[ dbApi, 'logsList', { property: 'id' } ]] }
+    ]
+  })
+
+</script>