modes (view, edit, ...) basically working

assets/js/common.ts

@@ -50,6 +50,7 @@ const appdata = {
 }
 
 // components
+// (move to separate module(s))
 
 function Data(name, action, domain: string): object {
 	domain = domain || this.conf.domain
@@ -58,9 +59,13 @@ function Data(name, action, domain: string): object {
 		action: action, // (default) action of outgoing message
 		domain: domain, // domain of incoming/outgoing message
 		data: {}, 	// model (2-way data store)
+		data_bak: {}, // backup copy when leaving view or edit mode
+		meta: {},	// metadata (params) for each data field
 		mode: 'view',
-		exec,		// default function to execute upon button click
+		mounted,
-		chmode
+		chmode,
+		copynew,
+		exec		// default function to execute upon button click
 	}
 	this.components[name] = comp
 	return comp
@@ -68,10 +73,38 @@ function Data(name, action, domain: string): object {
 
 // appdata and component method definitions
 
+function mounted(name: string, meta: any) {
+	console.log('name: ', name, ', meta: ', meta)
+	this.data[name] = meta.default || eval(meta.defexpr) || ""
+	this.meta[name] = meta
+}
+
 function chmode(action: string) {
+	if (this.mode == action) {
+		return
+	}
+	if (this.mode == 'view') {
+		Object.assign(this.data_bak, this.data)
+	}
+	switch(action) {
+		case 'query':
+			setQuery(this)
+			break
+		case 'new':
+			setNew(this)
+			break
+		default:
+			Object.assign(this.data, this.data_bak)
+	}
 	this.mode = action
 }
 
+function copynew(action: string) {
+	Object.assign(this.data, this.data_bak)
+	this.data.id = ''
+	this.mode = 'new'
+}
+
 function exec(action: string) {
 	action = action || this.action
 	const data = this.data
@@ -102,6 +135,25 @@ function poll() {
 	dopoll(this)
 }
 
+// helper functions for data manipulation
+
+function setQuery(obj) {
+	for (const key in obj.data) {
+		obj.data[key] = ''
+	}
+}
+
+function setNew(obj) {
+	for (const key in obj.data) {
+		obj.data[key] = ''
+		const meta = obj.meta[key]
+		if (meta) {
+			obj.data[key] = meta.default || ''
+		}
+	}
+	obj.data.id = ''
+}
+
 // basic functions - move to api.ts
 
 async function sendMsg(conf: Config, basemsg: string[], data: any) {

exampleSite/content/app/person.md

@@ -17,14 +17,14 @@ cyberscopes example site - view / edit person (user) data.
 
   {{< pv/tabs-mode >}}
 
-  Id: {{< pv/input-textline name="id" defexpr="conf.itemid" >}}
+  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" action="copy" label="Copy Data" >}}
+  {{< 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" >}}
 

layouts/shortcodes/pv/button.html

@@ -3,10 +3,8 @@
 {{- $label := .Get "label" | default (title $name) -}}
 {{- $exec := .Get "exec" | default "exec" -}}
 {{- $action := .Get "action" | default "" -}}
-{{- $mode := .Get "mode" | default "view" -}}
+{{- $mode := .Get "mode" -}}
 <button type="{{ $type }}" name="{{ $name }}" 
-		{{ with $mode -}}
+		{{- with $mode }}v-show="mode == '{{ . }}'"{{ end -}}
-		  :style="{ display: mode == '{{ . }}' ? 'inline' : 'none' }"
-		{{- end }}
 	    @click="{{ $exec }}('{{ $action }}')">{{$label}}</button>
 

layouts/shortcodes/pv/input-textline.html

@@ -2,11 +2,12 @@
 {{- $name := .Get "name" | default "textline" -}}
 {{- $default := .Get "default" | default "" -}}
 {{- $defexpr := .Get "defexpr" | default (printf "'%s'" $default) -}}
+{{- $meta := $.Params | jsonify -}}
 <div>
   <input type="{{ $type }}" name="{{ $name }}" 
 		 {{- with .Get "attrs" }} {{ . }}{{ end }}
 		 :readonly="mode == 'view' ? '' : null"
 		 v-model="data.{{ $name }}"
-		 @vue:mounted="data.{{ $name }} = {{ $defexpr }}"
+		 @vue:mounted="mounted('{{ $name }}', {{ $meta }})"
 		 {{- with .Get "onchange" }} @change="{{ . }}"{{ end }} />
 </div>

layouts/shortcodes/pv/tabs-mode.md

@@ -1,18 +1,18 @@
 <ul class="nav nav-tabs">
   <li class="nav-item">
-    <a class="nav-link" @click="chmode('view')"
+    <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="chmode('query')"
+    <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="chmode('edit')"
+    <a class="nav-link" @click.prevent="chmode('edit')" href="#"
        :class="mode == 'edit' ? 'active' : null">Edit</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" @click="chmode('new')"
+    <a class="nav-link" @click.prevent="chmode('new')" href="#"
        :class="mode == 'new' ? 'active' : null">New</a>
   </li>
 </ul>