@live-change/db-admin 0.5.8 → 0.5.11

package/front/src/CodeEditor.vue

@@ -49,6 +49,11 @@
 
   const code = ref(props.initialCode !== undefined ? props.initialCode : stringify(props.initialData, null, "  "))
 
+  watch(() => props.initialCode, () => {
+    if(props.initialCode == code.value) return
+    code.value = props.initialCode !== undefined ? props.initialCode : stringify(props.initialData, null, "  ")
+  })
+
   function highlight(code) {
     return Prism.highlight(code, Prism.languages.js, "js")
   }

package/front/src/Data.vue

@@ -1,27 +1,35 @@
 <template>
 
   <PathEditor v-model="path"
-              @update:read="v => read = v"
+              @update:read="v => { read = v; version++ }"
               @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" />
+    <DataRangeView v-if="read && write && remove" :key="'rangeView' + version"
+                   :dbApi="dbApi" :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" />
+    <DataView v-if="read && write && remove" :key="'view' + version"
+              :dbApi="dbApi" :read="read.result" :write="write.result" :remove="remove.result" />
   </template>
 
 </template>
 
 <script setup>
+  import { computed } from 'vue'
+
   import PathEditor from "./PathEditor.vue"
   import DataRangeView from "./DataRangeView.vue"
   import DataView from "./DataView.vue"
 
   const props = defineProps({
+    dbApi: {
+      type: String,
+      default: 'serverDatabase'
+    },
     position: {
       type: String,
       required: true
@@ -44,19 +52,27 @@
     }
   })
 
-  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 })
+  function computePath() {
+    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]]
+    return { read: props.read, write: props.write, remove: props.remove, params: pathParams }
+  }
+
+  const propsPath = computed(() => computePath())
+
+  const path = ref(propsPath.value)
+  watch(() => propsPath.value, () => path.value = propsPath.value)
 
   const router = useRouter()
   const route = useRoute()
 
   watch(() => path.value, value => {
-    console.log("PATH VALUE UPDATED", value)
+    console.log("PATH VALUE UPDATED", JSON.stringify(value, null, '  '))
     const paramsArray = value.params.flat()
     router.replace({ name: route.name, params: {
       read: value.read,
@@ -67,6 +83,7 @@
     /// TODO: update URL
   })
 
+  const version = ref(0)
   const read = ref()
   const write = ref()
   const remove = ref()

package/front/src/DataRangeView.vue

@@ -9,7 +9,7 @@
            class="surface-0 shadow-1 w-full">
 <!--        {{ JSON.stringify(row) }}-->
         <object-editor :currentData="JSON.stringify(row)"
-                       :write="write" :remove="remove"
+                       :write="props.write" :remove="props.remove"
                        :dbApi="dbApi" />
       </div>
     </div>
@@ -27,7 +27,7 @@
 
   import { dbViewSugar } from "./dbSugar.js"
 
-  const { dbApi, read, write, remove } = defineProps({
+  const props = defineProps({
     dbApi: {
       type: String,
       default: 'serverDatabase'
@@ -46,6 +46,7 @@
     }
   })
 
+  const { dbApi, read } = props
 
   const [ dataBuckets ] = await Promise.all([
     rangeBuckets((range, p) => [dbApi, ...JSON.parse(JSON.stringify(read({ range }, dbViewSugar)))])

package/front/src/DataView.vue

@@ -4,7 +4,7 @@
          class="surface-0 shadow-1 w-full">
       <!--        {{ JSON.stringify(row) }}-->
       <object-editor :currentData="JSON.stringify(row)"
-                     :write="write" :remove="remove"
+                     :write="props.write" :remove="props.remove"
                      :dbApi="dbApi" />
     </div>
   </div>
@@ -18,7 +18,7 @@
 
   import { dbViewSugar } from "./dbSugar.js"
 
-  const { dbApi, read, write, remove } = defineProps({
+  const props = defineProps({
     dbApi: {
       type: String,
       default: 'serverDatabase'
@@ -37,6 +37,7 @@
     }
   })
 
+  const { dbApi, read } = props
 
   const [ dataRows ] = await Promise.all([
     live({

package/front/src/Database.vue

@@ -1,7 +1,7 @@
 <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 class="text-900 text-3xl font-medium mb-3">Database "{{ dbName }}" @ {{ dbApi }}</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>
@@ -16,7 +16,7 @@
           <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)">
+          <router-link v-else :to="tableLink(dbName, slotProps.data.id)">
             {{ slotProps.data.id  }}
           </router-link>
         </template>
@@ -55,7 +55,7 @@
           <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)">
+          <router-link v-else :to="logLink(dbName, slotProps.data.id)">
             {{ slotProps.data.id  }}
           </router-link>
         </template>
@@ -94,7 +94,7 @@
           <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)">
+          <router-link v-else :to="indexLink(dbName, slotProps.data.id)">
             {{ slotProps.data.id  }}
           </router-link>
         </template>
@@ -126,6 +126,8 @@
   import ConfirmPopup from 'primevue/confirmpopup'
   import Toast from 'primevue/toast'
 
+  import { tableLink, logLink, indexLink } from "./links.js"
+
   const { dbApi, dbName } = defineProps({
     dbApi: {
       type: String,
@@ -307,45 +309,6 @@
     })())
   }
 
-  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],

package/front/src/DatabaseAdmin.vue

@@ -21,8 +21,8 @@
               </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"
+                  <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>
@@ -32,48 +32,54 @@
                   <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
+                      <router-link
+                          :to="tableLink(database.id, table)"
+                          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>
+                      </router-link>
                     </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"
+                  <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-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="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 v-for="log in database?.logs">
+                      <router-link
+                          :to="logLink(database.id, log)"
+                          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>
+                      </router-link>
                     </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"
+                  <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-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="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 v-for="index in database?.indexes">
+                      <router-link
+                          :to="indexLink(database.id, index)"
+                          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>
+                      </router-link>
                     </li>
                   </ul>
                 </li>
@@ -104,6 +110,7 @@
 </template>
 
 <script setup>
+  import { tableLink, logLink, indexLink } from "./links.js"
 
   const { dbApi } = defineProps({
     dbApi: {

package/front/src/Databases.vue

@@ -4,7 +4,7 @@
     <Toast v-if="isMounted"></Toast>
 
     <div class="text-center mb-5">
-      <div class="text-900 text-3xl font-medium mb-3">Databases</div>
+      <div class="text-900 text-3xl font-medium mb-3">Databases @ {{ dbApi }}</div>
     </div>
 
     <DataTable :value="databases" responsiveLayout="scroll">

package/front/src/PathEditor.vue

@@ -63,8 +63,9 @@
   import { dbRequestSugar, dbViewSugar } from "./dbSugar.js";
 
   import { ref, reactive, computed, watch } from "vue"
+  import { toRefs } from "@vueuse/core"
 
-  const { modelValue } = defineProps({
+  const props = defineProps({
     modelValue: {
       type: Object,
       required: true
@@ -73,7 +74,16 @@
 
   const emit = defineEmits(['update:modelValue', 'update:read', 'update:write', 'update:remove'])
 
-  const path = reactive(modelValue)
+  const path = reactive(JSON.parse(JSON.stringify(props.modelValue)))
+
+  watch(() => props.modelValue, value => {
+    if(JSON.stringify(path) != JSON.stringify(value)) {
+      path.read = value.read
+      path.write = value.write
+      path.remove = value.remove
+      path.params = JSON.parse(JSON.stringify(value.params))
+    }
+  })
 
 
   function handleReadChange(result) {
@@ -112,10 +122,9 @@
     allParams.push(...extractParams(path.write))
     allParams.push(...extractParams(path.remove))
     for(const field of path.params) {
-      console.log("FD", field, "=>", extractParams(field[1]))
+      //console.log("FD", field, "=>", extractParams(field[1]))
       allParams.push(...extractParams(field[1]))
     }
-
     const paramsSet = new Set(allParams)
     paramsSet.delete('range')
     paramsSet.delete('object')
@@ -149,8 +158,12 @@
   })
 
   watch(() => output.value, value => {
-    console.log("EMIT OUTPUT!")
-    emit('update:modelValue', output.value)
+    if(JSON.stringify(props.modelValue) != JSON.stringify(value)) {
+      console.log("EMIT OUTPUT!", JSON.stringify(props.modelValue), JSON.stringify(value))
+      emit('update:modelValue', output.value)
+    } else {
+      console.log("DROP OUTPUT CHANGE", JSON.stringify(props.modelValue), JSON.stringify(value))
+    }
   })
 
   const readCompiled = computed(() => {

package/front/src/links.js

@@ -0,0 +1,39 @@
+
+export function tableLink(dbName, 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)
+      ]
+    } }
+}
+
+export function logLink(dbName, 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)
+      ]
+    } }
+}
+
+export function indexLink(dbName, 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)
+      ]
+    } }
+}

package/front/src/main.js

@@ -17,16 +17,10 @@ import App from './App.vue'
 import Page from './Page.vue'
 import { createRouter } from './router'
 
-import emailValidator from "@live-change/email-service/clientEmailValidator.js"
-import passwordValidator from "@live-change/password-authentication-service/clientPasswordValidator.js"
-
 // SSR requires a fresh app instance per request, therefore we export a function
 // that creates a fresh app instance. If using Vuex, we'd also be creating a
 // fresh store here.
 export function createApp(api) {
-  api.validators.email = emailValidator
-  api.validators.password = passwordValidator
-
   const app = createSSRApp(App)
   app.config.devtools = true
 

package/front/src/routes.js

@@ -2,19 +2,21 @@
 export function routes(config = {}) {
   const { prefix = '/', route = (r) => r } = config
 
-  return [
+  const { dbApi = 'serverDatabase' } = config
 
+  return [
     route({
       path: prefix,
       name: 'db:databases',
-      component: () => import("./Databases.vue")
+      component: () => import("./Databases.vue"),
+      props: (route) => ({ ...route.params, dbApi })
     }),
 
     route({
       path: prefix+'db/:dbName',
       name: 'db:database',
       component: () => import("./Database.vue"),
-      props: true
+      props: (route) => ({ ...route.params, dbApi })
     }),
 
     route({
@@ -22,7 +24,7 @@ export function routes(config = {}) {
       name: 'db:data',
       meta: { pageType: 'wide' },
       component: () => import("./Data.vue"),
-      props: true
+      props: (route) => ({ ...route.params, dbApi })
     }),
 
   ]

package/index.js

@@ -0,0 +1,3 @@
+import { routes as dbAdminRoutes } from "./front/src/router.js"
+
+export { dbAdminRoutes }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/db-admin",
-  "version": "0.5.8",
+  "version": "0.5.11",
   "scripts": {
     "memDev": "lcli memDev --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --initScript ./init.js --dbAccess",
@@ -17,16 +17,16 @@
     "debug": "node --inspect-brk server"
   },
   "dependencies": {
-    "@live-change/cli": "0.6.1",
-    "@live-change/dao": "0.4.6",
-    "@live-change/dao-vue3": "0.4.6",
-    "@live-change/dao-websocket": "0.4.6",
-    "@live-change/framework": "0.6.1",
-    "@live-change/message-authentication-service": "0.2.28",
-    "@live-change/secret-code-service": "0.2.28",
-    "@live-change/secret-link-service": "0.2.28",
-    "@live-change/vue3-components": "0.2.8",
-    "@live-change/vue3-ssr": "0.2.7",
+    "@live-change/cli": "0.6.5",
+    "@live-change/dao": "0.4.10",
+    "@live-change/dao-vue3": "0.4.11",
+    "@live-change/dao-websocket": "0.4.10",
+    "@live-change/framework": "0.6.5",
+    "@live-change/message-authentication-service": "0.2.33",
+    "@live-change/secret-code-service": "0.2.33",
+    "@live-change/secret-link-service": "0.2.33",
+    "@live-change/vue3-components": "0.2.10",
+    "@live-change/vue3-ssr": "0.2.10",
     "@vitejs/plugin-vue": "^2.3.1",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/compiler-sfc": "^3.2.33",
@@ -38,7 +38,7 @@
     "javascript-stringify": "^2.1.0",
     "primeflex": "^3.1.3",
     "primeicons": "^5.0.0",
-    "primevue": "^3.12.5",
+    "primevue": "^3.12.6",
     "prism-es6": "^1.2.0",
     "prismjs": "^1.28.0",
     "rollup-plugin-node-builtins": "^2.1.2",
@@ -46,7 +46,7 @@
     "serialize-javascript": "^6.0.0",
     "serve-static": "^1.15.0",
     "v-shared-element": "3.1.0",
-    "vite": "^2.9.5",
+    "vite": "^2.9.6",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-vue-images": "^0.6.1",
     "vue": "^3.2.33",
@@ -56,9 +56,9 @@
     "vue3-scroll-border": "0.1.2"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "0.6.0",
+    "@live-change/codeceptjs-helper": "0.6.5",
     "@wdio/selenium-standalone-service": "^7.19.5",
-    "codeceptjs": "^3.3.0",
+    "codeceptjs": "^3.3.1",
     "generate-password": "1.7.0",
     "playwright": "^1.21.1",
     "random-profile-generator": "^2.3.0",
@@ -68,5 +68,5 @@
   "author": "",
   "license": "ISC",
   "description": "",
-  "gitHead": "06dfdb198ff53926fd0ec069ebcea42fa04acb1d"
+  "gitHead": "459aba0a8b3096f664d4820df8cac99a7ea0d26e"
 }