@live-change/db-admin 0.5.10 → 0.5.13

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

@@ -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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/db-admin",
-  "version": "0.5.10",
+  "version": "0.5.13",
   "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.3",
-    "@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.4",
-    "@live-change/message-authentication-service": "0.2.29",
-    "@live-change/secret-code-service": "0.2.29",
-    "@live-change/secret-link-service": "0.2.29",
-    "@live-change/vue3-components": "0.2.8",
-    "@live-change/vue3-ssr": "0.2.9",
+    "@live-change/cli": "0.6.5",
+    "@live-change/dao": "0.4.13",
+    "@live-change/dao-vue3": "0.4.13",
+    "@live-change/dao-websocket": "0.4.13",
+    "@live-change/framework": "0.6.5",
+    "@live-change/message-authentication-service": "0.2.37",
+    "@live-change/secret-code-service": "0.2.39",
+    "@live-change/secret-link-service": "0.2.39",
+    "@live-change/vue3-components": "0.2.12",
+    "@live-change/vue3-ssr": "0.2.14",
     "@vitejs/plugin-vue": "^2.3.1",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/compiler-sfc": "^3.2.33",
@@ -36,9 +36,9 @@
     "cross-env": "^7.0.3",
     "find-free-ports": "^3.0.0",
     "javascript-stringify": "^2.1.0",
-    "primeflex": "^3.1.3",
+    "primeflex": "^3.2.1",
     "primeicons": "^5.0.0",
-    "primevue": "^3.12.6",
+    "primevue": "^3.15.0",
     "prism-es6": "^1.2.0",
     "prismjs": "^1.28.0",
     "rollup-plugin-node-builtins": "^2.1.2",
@@ -56,7 +56,7 @@
     "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.1",
     "generate-password": "1.7.0",
@@ -68,5 +68,5 @@
   "author": "",
   "license": "ISC",
   "description": "",
-  "gitHead": "6236c001558f60998b0e5bce5e97e7ebb1f50e45"
+  "gitHead": "e75a92ac01b8422076b660cf0dd5d8f4a80fe13c"
 }