work in progress: handling of response after new; ?id= replaced by #

assets/js/common.ts

@@ -17,12 +17,13 @@ type Config = {
 
 export function config (api, polling): Config {
 	const pu = polling ? `${api.path}/${polling.msgbase.join('/')}` : ''
-	const urlparams = new URL(location.href).searchParams
+	//const urlparams = new URL(location.href).searchParams
 	return { 
 		apiurl: api.path, 
 		pollurl: pu, 
 		domain: domain,
-		itemid: urlparams.get('id'),
+		//itemid: urlparams.get('id'),
+		itemid: location.hash.substring(1),
 		sid: getSid(),
 		iid: createRandString(1),
 		nopoll: nopoll
@@ -61,7 +62,7 @@ function handle(msg) {
 		return
 	}
 	if (comp) {
-		comp.handle(domain, action, class_, item, msg.payload)
+		comp.handle(this, domain, action, class_, item, msg.payload)
 	}
 }
 

assets/js/comp-data.ts

@@ -31,10 +31,19 @@ export function Data(name: string, conf: any): object {
 
 // Data methods
 
-function handle(domain, action, class_, item, payload: string) {
+function handle(parent: any, domain, action, class_, item, payload: string) {
 	if (action == 'data') {
 		const data = JSON.parse(payload)
 		Object.assign(this.data, data)
+		this.id = item
+		this.mode = 'view'
+		this.data_bak = {}
+	} else if (action == 'response') {
+		this.id = item
+		this.mode = 'view'
+		this.data_bak = {}
+		window.location.hash = item
+		sendMsg(parent.conf, [this.domain, 'query', this.name, item], {})
 	}
 }
 
@@ -48,7 +57,11 @@ function exec(action: string) {
 	}
 	this.output += '\n' + value
 	console.log('exec:', value)
-	sendMsg(conf, [this.domain, action, this.name, data.id], data)
+	const msgbase = [this.domain, action, this.name]
+	if (this.mode != 'new') {
+		msgbase.push(this.id)
+	}
+	sendMsg(conf, msgbase, data)
 }
 
 function initField(name: string, meta: any) {
@@ -81,7 +94,6 @@ function chmode(action: string) {
 
 function copynew(action: string) {
 	Object.assign(this.data, this.data_bak)
-	this.data.id = ''
 	this.mode = 'new'
 }
 
@@ -101,6 +113,5 @@ function setNew(obj) {
 			obj.data[key] = meta.default || ''
 		}
 	}
-	obj.data.id = ''
 }
 

assets/js/comp-list.ts

@@ -24,7 +24,7 @@ export function List(name: string, conf: any): object {
 
 // Data methods
 
-function handle(domain, action, class_, item: string, payload) {
+function handle(parent: any, domain, action, class_, item: string, payload) {
 	if (action == 'list') {
 		const rows = payload.split('\n')
 		this.data.length = 0

exampleSite/content/app/person.md

@@ -17,19 +17,17 @@ cyberscopes example site - view / edit person (user) data.
 
   {{< pv/tabs-mode >}}
 
-  Id: {{< pv/input-textline name="id" defexpr="this.conf.itemid" >}}
   First Name: {{< pv/input-textline name="firstname" attrs="autofocus" >}}
   Last Name: {{< pv/input-textline name="lastname" >}}
   Email: {{< pv/input-textline name="email" default="hm@cy55.de" >}}
 
-  {{< pv/button mode="query" action="query" label="Execute Query" >}}
   {{< pv/button mode="edit" label="Save Changes" >}}
   {{< pv/button mode="edit" exec="copynew" label="Copy Data" >}}
   {{< pv/button mode="edit" action="delete" label="Delete Item" >}}
   {{< pv/button mode="new" label="Create Item" >}}
 
 <br>
-  {{< pv/display linkto="data.id"
+  {{< pv/display linkto="id"
         expr="`${data.firstname} ${data.lastname}`.trim() || '???'" >}}
 <br>
   {{< pv/link >}}

layouts/shortcodes/pv/display.html

@@ -1,6 +1,6 @@
 {{- $name := .Get "name" | default "textline" -}}
 {{- $expr := .Get "expr" | default (printf "data.%s" $name) -}}
 {{- $linkto := .Get "linkto" -}}
-{{- if $linkto }}<a :href="'?id=' + {{ $linkto }}">{{ end -}}
+{{- if $linkto }}<a :href="'#' + {{ $linkto }}">{{ end -}}
 <span v-text="{{ $expr }}"></span>
 {{- if $linkto }}</a>{{ end -}}

layouts/shortcodes/pv/input-textline.html

@@ -4,7 +4,7 @@
 <div>
   <input type="{{ $type }}" name="{{ $name }}" 
 		 {{- with .Get "attrs" }} {{ . }}{{ end }}
-		 :readonly="mode == 'view' ? '' : null"
+		:readonly="mode == 'view' || meta['{{ $name }}'].readonly ? '' : null"
 		 v-model="data.{{ $name }}"
 		 @vue:mounted="initField('{{ $name }}', {{ $meta }})"
 		 {{- with .Get "onchange" }} @change="{{ . }}"{{ end }} />

layouts/shortcodes/pv/link.html

@@ -1,3 +1,6 @@
-{{- $target := .Get "target" | default "data.id" -}}
-{{- $prefix := .Get "prefix" | default "?id=" -}}
+{{- $target := .Get "target" | default "id" -}}
+{{- $prefix := .Get "prefix" | default "#" -}}
+		this.id = item
+		this.mode = 'view'
+		this.data_bak = {}
 <a :href="'{{ $prefix }}' + {{ $target }}">{{ .Inner }}</a>

layouts/shortcodes/pv/list.html

@@ -9,7 +9,7 @@
   <tr>{{- .Inner -}}</tr>
   <tr v-for="item in data" :key="item._item">
 	<td v-for="(col, fname) in meta">
-		<a :href="`../${name}/?id=${item._item}`">{| item[fname] |}</a>
+		<a :href="`../${name}/#${item._item}`">{| item[fname] |}</a>
 	</td>
   </tr>
 </table>

layouts/shortcodes/pv/table.html

@@ -1,11 +0,0 @@
-{{- $name := .Get "name" | default "table" -}}
-{{- $tcells := true -}}
-<table>
-  <template id="{{ $name }}">
-	{{ .Inner }}
-  </template>
-  <tr v-for="row in data[{{ $name }}]">
-	<div v-scope="Row({{ $name }}, row)"/>
-  </tr>
-</table>
-

layouts/shortcodes/pv/tabs-mode.md

@@ -3,10 +3,6 @@
     <a class="nav-link" @click.prevent="chmode('view')" href="#"
        :class="mode == 'view' ? 'active' : null">View</a>
   </li>
-  <li class="nav-item">
-    <a class="nav-link" @click.prevent="chmode('query')" href="#"
-       :class="mode == 'query' ? 'active' : null">Query</a>
-  </li>
   <li class="nav-item">
     <a class="nav-link" @click.prevent="chmode('edit')" href="#"
        :class="mode == 'edit' ? 'active' : null">Edit</a>