cco/hugo-theme-cyberscopes
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

minor improvements; component init: provide $.Params as conf

Browse source
This commit is contained in:
Helmut Merz 2023-03-22 17:19:08 +01:00
parent c186f908b7
commit 0d244d8bcb
6 changed files with 20 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
assets/js/comp-data.ts
View file

@ -4,12 +4,13 @@ import { sendMsg } from './common'
// Data component // Data component
export function Data(name, action, domain: string): object { //export function Data(name, action, domain: string): object {
domain = domain || this.conf.domain export function Data(name: string, conf: any): object {
const domain = conf.domain || this.conf.domain
const comp = { const comp = {
id: this.conf.itemid, id: this.conf.itemid,
name: name, // also used as class of incoming/outgoing message name: name, // also used as class of incoming/outgoing message
action: action, // (default) action of outgoing message action: conf.action, // (default) action of outgoing message
domain: domain, // domain of incoming/outgoing message domain: domain, // domain of incoming/outgoing message
data: {}, // model (2-way data store) data: {}, // model (2-way data store)
data_bak: {}, // backup copy when leaving view or edit mode data_bak: {}, // backup copy when leaving view or edit mode

9
assets/js/comp-list.ts
View file

@ -4,12 +4,13 @@ import { sendMsg } from './common'
// List component // List component
export function List(name, action, domain: string): object { //export function List(name, action, domain: string): object {
domain = domain || this.conf.domain export function List(name: string, conf: any): object {
const domain = conf.domain || this.conf.domain
const comp = { const comp = {
id: this.conf.itemid, id: this.conf.itemid,
name: name, // also used as class of incoming/outgoing message name: name, // also used as class of incoming/outgoing message
action: action, // (default) action of outgoing message action: conf.action, // (default) action of outgoing message
domain: domain, // domain of incoming/outgoing message domain: domain, // domain of incoming/outgoing message
data: [], // model = list of rows data: [], // model = list of rows
meta: {}, // metadata (params) for each field (table column) meta: {}, // metadata (params) for each field (table column)
@ -26,7 +27,7 @@ export function List(name, action, domain: string): object {
function handle(domain, action, class_, item: string, payload) { function handle(domain, action, class_, item: string, payload) {
if (action == 'list') { if (action == 'list') {
const rows = payload.split('\n') const rows = payload.split('\n')
//this.data = [] this.data.length = 0
for (const row of rows) { for (const row of rows) {
this.data.push(JSON.parse(row)) this.data.push(JSON.parse(row))
} }

1
exampleSite/content/app/person-list.md
View file

@ -17,5 +17,6 @@ cyberscopes example site - list person (user) data.
{{< pv/list-column name="firstname" label="First Name" >}} {{< pv/list-column name="firstname" label="First Name" >}}
{{< pv/list-column name="lastname" label="Last Name" >}} {{< pv/list-column name="lastname" label="Last Name" >}}
{{< pv/list-column name="email" label="Email Address" >}}
{{< /pv/list >}} {{< /pv/list >}}

4
layouts/shortcodes/pv/fieldset.html
View file

@ -2,6 +2,8 @@
{{- $action := .Get "action" | default "data" -}} {{- $action := .Get "action" | default "data" -}}
{{- $domain := .Get "domain" | default $.Page.Params.api.domain -}} {{- $domain := .Get "domain" | default $.Page.Params.api.domain -}}
{{- $comp := .Get "component" | default "Data" -}} {{- $comp := .Get "component" | default "Data" -}}
<div v-scope="{{ $comp }}('{{ $name }}', '{{ $action }}', '{{ $domain }}')"> {{- $conf := merge $.Params (dict "domain" $domain "action" $action)
| jsonify -}}
<div v-scope="{{ $comp }}('{{ $name }}', {{ $conf }})">
{{ .Inner }} {{ .Inner }}
</div> </div>

2
layouts/shortcodes/pv/list-column.html
View file

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

9
layouts/shortcodes/pv/list.html
View file

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