put all mode changes in buttons

assets/js/app-demo.ts

@@ -29,14 +29,14 @@ const store_prefix = 'api.storage'
 async function sendMsg(basemsg: string[], data: any) {
 	const [ domain, action, class_, item ] = basemsg
 	switch (action) {
-		case 'data':
-			handle(this, store(domain, class_, item, data))
+		case 'query':
+			handle(this, query(domain, class_, item))
 			break
 		case 'delete':
 			handle(this, remove(domain, class_, item))
 			break
-		case 'query':
-			handle(this, query(domain, class_, item))
+		default:
+			handle(this, store(domain, class_, item, data))
 	}
 }
 

assets/js/comp-data.ts

@@ -17,6 +17,7 @@ export function Data(name: string, conf: any): object {
 		exec,		// default function to execute upon button click
 		initField,	// initialize field (= @mounted), collect metadata
 		chmode,
+		hasmode,
 		copynew
 	}
 	//this.components[name] = comp
@@ -26,9 +27,7 @@ export function Data(name: string, conf: any): object {
 // Data methods
 
 function initialize() {
-	if (this.state.id) {
-		this.sendMsg([this.domain, 'query', this.name, this.state.id], {})
-	}
+	loadData(this)
 }
 
 function handle(domain, action, class_, item, payload: string) {
@@ -45,7 +44,15 @@ function handle(domain, action, class_, item, payload: string) {
 	}
 }
 
-function exec(action: string) {
+function initField(name: string, meta: any): void {
+	if (meta.defexpr) {
+		meta.default = eval(meta.defexpr)
+	}
+	this.data[name] = meta.default || ""
+	this.meta[name] = meta
+}
+
+function exec(action: string): void {
 	action = action || this.action
 	const data = this.data
 	let value = ''
@@ -60,19 +67,15 @@ function exec(action: string) {
 	this.sendMsg(msgbase, data)
 }
 
-function initField(name: string, meta: any) {
-	if (meta.defexpr) {
-		meta.default = eval(meta.defexpr)
-	}
-	this.data[name] = meta.default || ""
-	this.meta[name] = meta
-}
-
-function chmode(action: string) {
+function chmode(action: string): void {
 	if (this.state.mode == action) {
 		return
 	}
 	switch(action) {
+		case 'view':
+		case 'edit':
+			loadData(this)
+			break
 		case 'query':
 			setQuery(this)
 			break
@@ -83,12 +86,27 @@ function chmode(action: string) {
 	this.state.mode = action
 }
 
-function copynew(action: string) {
+function hasmode(mode: string): boolean {
+	for (const m of mode.split(' ')) {
+		if (this.state.mode === m) {
+			return true
+		}
+	}
+	return false
+}
+
+function copynew(action: string): void {
 	this.state.mode = 'new'
 }
 
 // helper functions for data manipulation (used by Data component)
 
+function loadData(obj) {
+	if (obj.state.id) {
+		obj.sendMsg([obj.domain, 'query', obj.name, obj.state.id], {})
+	}
+}
+
 function setQuery(obj) {
 	for (const key in obj.data) {
 		obj.data[key] = ''

exampleSite/config.yaml

@@ -28,6 +28,7 @@ params:
   api:
     domain: demo
     module: main-demo.ts
+    #module: main-ig.ts
 
 taxonomies:
   domain: domains

exampleSite/content/app/person.md

@@ -20,6 +20,9 @@ cyberscopes example site - view / edit person (user) data.
   Last Name: {{< pv/data-field-line name="lastname" >}}
   Email: {{< pv/data-field-line name="email" default="hm@cy55.de" >}}
 
+  {{< pv/button mode="view" exec="chmode" action="edit" label="Edit" >}}
+  {{< pv/button mode="view" exec="chmode" action="new" label="New" >}}
+  {{< pv/button mode="edit new" exec="chmode" action="view" label="Cancel" >}}
   {{< 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" >}}
@@ -38,4 +41,3 @@ cyberscopes example site - view / edit person (user) data.
 
 {{< pv/debug >}}
 
-[click here](?id=10127-180017)

layouts/shortcodes/pv/button.html

@@ -5,6 +5,6 @@
 {{- $action := .Get "action" | default "" -}}
 {{- $mode := .Get "mode" -}}
 <button type="{{ $type }}" name="{{ $name }}" 
-		{{- with $mode }}v-show="state.mode == '{{ . }}'"{{ end -}}
+		{{- with $mode }}v-show="hasmode('{{ . }}')"{{ end -}}
 	    @click="{{ $exec }}('{{ $action }}')">{{$label}}</button>