Hi there,
I’m trying to build a dynamic table field. Inside of each cell should be a blocks field.
When I try to add a block inside of a cell, I get a “This drawer has no fields” message when I try to edit the added block.
Here is my code so far:
index.php:
<?php
Kirby::plugin('zrm/table', [
'fields' => [
'table' => [
'props' => [
'value' => function ($value = null) {
$values = Yaml::decode($value) ?? [];
return [
];
},
'model' => function () {
return $this->model();
},
'fieldsets' => function () {
return option('zrm.table.fieldsets', []);
},
],
'blueprints' => [
'table/block_copy' => __DIR__ . '/blueprints/blocks/block_copy.yml'
],
'api' => function () {
return [
[
'pattern' => 'fieldsets/(:any)',
'method' => 'GET',
'action' => function ($type) {
return option('zrm.table.fieldsets.' . $type, []);
}
]
];
}
],
],
'options' => [
'fieldsets' => [
'block_copy' => [
'label' => 'Block Copy',
'title' => 'Block Copy',
'icon' => 'text',
'type' => 'block_copy',
'fields' => [
'test' => [
'label' => 'Test',
'type' => 'text'
]
],
'content' => [
'test' => 'Test'
]
],
]
]
]);
?>
TableField.vue (in src/components/fields):
<template>
<div class="cf-table">
<k-draggable class="cf-table__table" element="k-grid" :style="gridStyle">
<k-box
v-for="(cell, index) in cellsArray"
:key="index"
:text="cell"
theme="white"
>
<k-blocks-field label="Blocks" :value="blocks[index] || []" @input="updateBlock($event, index)" :endpoints="endpoints" :fieldsets="fieldsets"/>
</k-box>
</k-draggable>
{{ fieldsets }}
<br>
{{ endpoints }}
<br>
{{ blocks }}
<br>
{{ numRows }}
<br>
{{ numColumns }}
<div class="cf-table__button-group cf-table__button-group--column">
<k-button variant="filled" icon="add" @click="addColumn">Add Column</k-button>
<k-button variant="filled" icon="remove" @click="removeColumn" :disabled="numColumns <= 1">Remove Column
</k-button>
</div>
<div class="cf-table__button-group cf-table__button-group--row">
<div style="margin-top: 10px;">
<k-button variant="filled" icon="add" @click="addRow">Add Row</k-button>
<k-button variant="filled" icon="remove" @click="removeRow" :disabled="numRows <= 1">Remove Row</k-button>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
rows: {
type: Number,
default: 1
},
columns: {
type: Number,
default: 1
},
fieldsets: {
type: Array,
default: () => []
},
endpoints: {
type: Array,
default: () => []
},
value: {
type: Array,
default: () => []
}
},
data() {
return {
numRows: this.rows,
numColumns: this.columns,
blocks: this.value,
fieldsets: this.fieldsets,
}
},
computed: {
cellsArray() {
return Array.from({length: this.numRows * this.numColumns}, (_, i) => i + 1);
},
gridStyle() {
return `--columns: ${this.numColumns}; gap: 2px`;
}
}
,
watch: {
rows(newVal) {
this.numRows = newVal;
},
columns(newVal) {
this.numColumns = newVal;
},
numRows(newVal) {
this.$emit('update:rows', newVal);
},
numColumns(newVal) {
this.$emit('update:columns', newVal);
}
},
methods: {
addRow() {
this.numRows += 1;
},
removeRow() {
if (this.numRows > 1) {
this.numRows -= 1;
}
},
addColumn() {
this.numColumns += 1;
},
removeColumn() {
if (this.numColumns > 1) {
this.numColumns -= 1;
}
},
updateBlock(value, index) {
this.$set(this.blocks, index, value);
this.$emit('input', this.blocks);
},
}
}
</script>
Except that I can’t edit any blocks, everything works fine.
Has anyone any idea why this is happening? Or how I have to add fieldsets correctly in my Plugin?
Thanks in advance for your help!