list page basically working

assets/js/common.ts

@@ -30,8 +30,11 @@ export function config (api, polling): Config {
 }
 
 export const pvapp = {
-	run(conf: Config) {
+	run(conf: Config, components: any[]) {
 		appdata.conf = conf
+		for (const comp of components) {
+			appdata[comp.name] = comp
+		}
 		if (appdata.conf.pollurl && !appdata.conf.nopoll) {
 			appdata.poll()
 		}
@@ -52,15 +55,13 @@ const appdata = {
 // App (appdata) methods
 
 function handle(msg) {
-	const data = JSON.parse(msg.payload)
 	const [ domain, action, class_, item ] = msg.path.split('/')
-	// TODO: check action => select handler fct
 	const comp = this.components[class_ || 'data']
 	if (domain && domain != comp.domain) {
 		return
 	}
 	if (comp) {
-		comp.handle(domain, action, class_, item, data)
+		comp.handle(domain, action, class_, item, msg.payload)
 	}
 }
 

assets/js/comp-data.ts

@@ -30,8 +30,9 @@ export function Data(name, action, domain: string): object {
 
 // Data methods
 
-function handle(domain, action, class_, item: string, data: Object) {
+function handle(domain, action, class_, item, payload: string) {
 	if (action == 'data') {
+		const data = JSON.parse(payload)
 		Object.assign(this.data, data)
 	}
 }

assets/js/comp-list.ts

@@ -0,0 +1,44 @@
+// list-data.ts - definition and methods of the List component
+
+import { sendMsg } from './common'
+
+// List component
+
+export function List(name, action, domain: string): object {
+	domain = domain || this.conf.domain
+	const comp = {
+		id: this.conf.itemid,
+		name: name, // also used as class of incoming/outgoing message
+		action: action, // (default) action of outgoing message
+		domain: domain, // domain of incoming/outgoing message
+		data: [], 	// model = list of rows
+		meta: {},	// metadata (params) for each field (table column)
+		handle,		// handle incoming messages
+		initField	// initialize field (= @mounted)
+	}
+	this.components[name] = comp
+	sendMsg(this.conf, [domain, 'query', name], {})
+	return comp
+}
+
+// Data methods
+
+function handle(domain, action, class_, item: string, payload) {
+	if (action == 'list') {
+		const rows = payload.split('\n')
+		//this.data = []
+		for (const row of rows) {
+			this.data.push(JSON.parse(row))
+		}
+		console.log('data: ', this.data)
+	}
+}
+
+function initField(name: string, meta: any) {
+	if (meta.defexpr) {
+		meta.default = eval(meta.defexpr)
+	}
+	this.data[name] = meta.default || ""
+	this.meta[name] = meta
+}
+

assets/js/main-xp-bootstrap.ts

@@ -3,5 +3,5 @@ export { bootstrap }
 import { api, polling } from './settings'
 import { config, pvapp } from './common'
 
-pvapp.run(config(api, polling))
+pvapp.run(config(api, polling), [])
 

assets/js/main-xp-mermaid.ts

@@ -3,5 +3,5 @@ import { api, polling } from './settings'
 import { config, pvapp } from './common'
 
 mermaid.initialize({ startOnLoad: true })
-pvapp.run(config(api, polling))
+pvapp.run(config(api, polling), [])
 

assets/js/main.ts

@@ -1,5 +1,6 @@
 import { api, polling } from './settings'
 import { config, pvapp } from './common'
+import { List } from './comp-list'
 
-pvapp.run(config(api, polling))
+pvapp.run(config(api, polling), [List])
 

exampleSite/content/app/person-list.md

@@ -0,0 +1,21 @@
+---
+title: Person Overview
+summary: List of Persons
+img:
+pageid: app_list_person
+domains: [App]
+topics: [Examples]
+date:   2023-03-22
+author: helmutm
+draft:  false
+weight: 100
+---
+
+cyberscopes example site - list person (user) data.
+
+{{< pv/list name="person" >}}
+
+  {{< pv/list-column name="firstname" label="First Name" >}}
+  {{< pv/list-column name="lastname" label="Last Name" >}}
+
+{{< /pv/list >}}

layouts/shortcodes/pv/list-column.html

@@ -0,0 +1,4 @@
+{{- $name := .Get "name" | default "column" -}}
+{{- $label := .Get "label" | default "Column" -}}
+{{- $meta := $.Params | jsonify -}}
+<td @vue:mounted="initField('{{ $name }}', {{ $meta }})">{{ $label }}</td>

layouts/shortcodes/pv/list.html

@@ -0,0 +1,12 @@
+{{- $name := .Get "name" | default "data" -}}
+{{- $action := .Get "action" | default "query" -}}
+{{- $domain := .Get "domain" | default $.Page.Params.api.domain -}}
+{{- $comp := .Get "component" | default "List" -}}
+<table v-scope="{{ $comp }}('{{ $name }}', '{{ $action }}', '{{ $domain }}')">
+  <tr>{{- .Inner -}}</tr>
+  <tr v-for="item in data" :key="item._item">
+	<td v-for="col in meta">
+		<a :href="`../${name}/?id=${item._item}`">{| item[col.name] |}</p>
+	</td>
+  </tr>
+</table>