Getting meta errors on a custom fieldtype based on GroupFieldtype

[patrickhoehn]

I'm trying to build a custom fieldtype that is basically a row containing multiple columns to reflect the distribution of the content on the site in the entry. Each column has a "clone" of the GroupFieldtype. It is already working with simpler fields like text, textarea but if there is any kind of meta (like Replicator, Bard, Select etc.) it is not working and throwing errors. To keep it simple, I use the select fieldtype in this example:

display: Content
fields:
  -
    handle: row_field
    field:
      type: row
      display: 'Row Field'
      fields:
        -
          handle: select_field
          field:
            type: select
            display: 'Select Field'

And I get TypeError: null is not an object (evaluating 'props2.meta.options')

This is my Row.vue:

<template>
    <div>
        <!-- Grid UI -->
        <div
            class="rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-800 bg-gray-50 border w-full shadow-ui-sm p-3"
        >
            <div class="w-full">
                <transition-group
                    name="column-move"
                    tag="div"
                    class="flex"
                    :class="columns.length > 1 ? 'space-x-3' : ''"
                    @after-leave="handleAfterLeave"
                >
                    <button
                        v-for="(col, n) in columns"
                        @click="setActiveColumn(n)"
                        :key="col.id"
                        :style="{
                            width:
                                columns.length === 2 || columns.length === 3
                                    ? columnWidths[n] + '%'
                                    : 100 / columns.length + '%',
                            minWidth: '80px',
                        }"
                        :class="[
                            'column cursor-pointer rounded-md border border-gray-300 flex items-center justify-center text-xs p-2 relative',
                            activeColumn === n
                                ? 'active bg-linear-to-b from-gray-100 to-gray-100 text-gray-900 border border-gray-300 inset-shadow-sm/10 dark:from-gray-950 dark:to-gray-950 dark:text-white dark:border-white/10'
                                : 'bg-linear-to-b from-white to-gray-50 hover:to-gray-100 hover:bg-gray-50 text-gray-900 shadow-ui-sm dark:from-gray-850 dark:to-gray-900 dark:hover:to-gray-850 dark:hover:bg-gray-900 dark:border-gray-700 dark:text-gray-300',
                        ]"
                    >
                        <button
                            type="button"
                            @click.stop="moveColumnLeft(n)"
                            :disabled="n === 0"
                            :class="[
                                'move-left  border border-gray-300 dark:border-gray-700 mr-1 flex items-center p-1 rounded-sm',
                                n === 0
                                    ? 'opacity-25 cursor-not-allowed'
                                    : 'hover:bg-gray-200 dark:hover:bg-gray-800 cursor-pointer',
                            ]"
                            style="outline: none"
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                fill="none"
                                stroke="currentColor"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                aria-hidden="true"
                                viewBox="0 0 24 24"
                                class="size-4 shrink-0"
                            >
                                <path d="M15 18l-6-6 6-6" />
                            </svg>
                        </button>
                        <button
                            type="button"
                            @click.stop="handleColumnClick(n)"
                            :disabled="
                                !canGrowLeft(n) ||
                                (columns.length === 2 || columns.length === 3
                                    ? maxedColumn === n
                                    : true)
                            "
                            :class="[
                                'size-left border border-gray-300 flex items-center p-1 rounded-sm dark:border-gray-700',
                                !canGrowLeft(n) ||
                                (columns.length === 2 || columns.length === 3
                                    ? maxedColumn === n
                                    : true)
                                    ? 'opacity-25 cursor-not-allowed'
                                    : 'hover:bg-gray-200 cursor-pointer dark:hover:bg-gray-800',
                            ]"
                            style="outline: none"
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                fill="none"
                                stroke="currentColor"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                aria-hidden="true"
                                viewBox="0 0 24 24"
                                class="size-4 shrink-0"
                            >
                                <path d="M5 12h14M12 5v14"></path>
                            </svg>
                        </button>
                        <div
                            class="w-full flex flex-col items-center justify-center space-y-1"
                        >
                            <div>Column #{{ col.id }}</div>
                            <div v-if="fields && col">
                                <template v-for="field in fields">
                                    <div
                                        v-if="col[field.handle] !== undefined"
                                        class="text-xs text-gray-500"
                                    >
                                        <span class="font-semibold"
                                            >{{ field.handle }}:</span
                                        >
                                        <span>{{ col[field.handle] }}</span>
                                    </div>
                                </template>
                            </div>
                        </div>
                        <button
                            v-if="columns.length > 1"
                            type="button"
                            @click.stop="confirmDeleteColumn(n)"
                            class="border border-gray-300 mr-1 flex items-center p-1 rounded-sm hover:bg-gray-200 cursor-pointer dark:border-gray-700 dark:hover:bg-gray-800"
                            style="outline: none"
                        >
                            <Icon
                                :name="'trash'"
                                class="cursor-pointer"
                                :style="{
                                    margin: 0,
                                }"
                            />
                        </button>
                        <button
                            type="button"
                            @click.stop="handleColumnClick(n)"
                            :disabled="
                                !canGrowRight(n) ||
                                (columns.length === 2 || columns.length === 3
                                    ? maxedColumn === n
                                    : true)
                            "
                            :class="[
                                'size-right  border border-gray-300 flex items-center p-1 rounded-sm dark:border-gray-700',
                                !canGrowRight(n) ||
                                (columns.length === 2 || columns.length === 3
                                    ? maxedColumn === n
                                    : true)
                                    ? 'opacity-25 cursor-not-allowed'
                                    : 'hover:bg-gray-200 cursor-pointer dark:hover:bg-gray-800',
                            ]"
                            style="outline: none"
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                fill="none"
                                stroke="currentColor"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                aria-hidden="true"
                                viewBox="0 0 24 24"
                                class="size-4 shrink-0"
                            >
                                <path d="M5 12h14M12 5v14"></path>
                            </svg>
                        </button>
                        <button
                            type="button"
                            @click.stop="moveColumnRight(n)"
                            :disabled="n === columns.length - 1"
                            :class="[
                                'move-right  ml-1 border border-gray-300 flex items-center p-1 rounded-sm dark:border-gray-700',
                                n === columns.length - 1
                                    ? 'opacity-25 cursor-not-allowed'
                                    : 'hover:bg-gray-200 cursor-pointer dark:hover:bg-gray-800',
                            ]"
                            style="outline: none"
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                fill="none"
                                stroke="currentColor"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                aria-hidden="true"
                                viewBox="0 0 24 24"
                                class="size-4 shrink-0"
                            >
                                <path d="M9 6l6 6-6 6" />
                            </svg>
                        </button>
                    </button>
                </transition-group>
            </div>
        </div>
        <div class="flex items-center mt-3">
            <button
                type="button"
                @click="addColumn"
                :disabled="columns.length >= grid"
                class="inline-flex items-center justify-center whitespace-nowrap shrink-0 font-medium antialiased cursor-pointer no-underline disabled:text-gray-400 dark:disabled:text-gray-600 disabled:cursor-not-allowed bg-linear-to-b from-white to-gray-50 hover:to-gray-100 hover:bg-gray-50 text-gray-900 border border-gray-300 shadow-ui-sm dark:from-gray-850 dark:to-gray-900 dark:hover:to-gray-850 dark:hover:bg-gray-900 dark:border-gray-700 dark:text-gray-300 dark:shadow-ui-md px-3 h-8 text-[0.8125rem] leading-tight gap-2 rounded-lg"
            >
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    aria-hidden="true"
                    viewBox="0 0 24 24"
                    class="size-4 shrink-0"
                >
                    <path d="M5 12h14M12 5v14"></path>
                </svg>
                <div class="flex content-center">Add Column</div>
            </button>
        </div>
        <!-- Statamic confirmation modal -->
        <confirmation-modal
            v-if="confirmingDelete"
            title="Delete Column"
            body-text="Are you sure you want to delete this column?"
            button-text="Delete"
            danger
            @confirm="deleteColumn(deleteIndex)"
            @cancel="confirmingDelete = false"
        />
        <div class="mt-3">
            <!-- Fields for active column only -->
            <FieldsProvider
                :fields="fields"
                :values="columns[activeColumn]"
                :field-path-prefix="
                    fieldPathPrefix
                        ? `${fieldPathPrefix}.${handle}.${activeColumn}`
                        : `${handle}.${activeColumn}`
                "
                :meta-path-prefix="
                    metaPathPrefix
                        ? `${metaPathPrefix}.${handle}.${activeColumn}`
                        : `${handle}.${activeColumn}`
                "
                @updated="updatedColumnField"
            >
                <Fields class="py-4" />
            </FieldsProvider>
        </div>
    </div>
</template>

<script>
import { FieldtypeMixin as Fieldtype } from "@statamic/cms";
import {
    PublishFields as Fields,
    PublishFieldsProvider as FieldsProvider,
} from "@statamic/cms/ui";
import { Icon } from "@statamic/cms/ui";

export default {
    mixins: [Fieldtype],
    components: { Fields, FieldsProvider, Icon },
    props: {
        grid: {
            type: Number,
            default: 4,
        },
    },
    data() {
        let initialColumns = [];
        if (Array.isArray(this.value) && this.value.length > 0) {
            initialColumns = this.value.map((col, i) => ({
                ...col,
                id: col.id !== undefined ? col.id : i + 1,
            }));
        } else if (
            typeof this.value?.columns === "number" &&
            this.value.columns > 0
        ) {
            for (let i = 0; i < this.value.columns; i++) {
                initialColumns.push({ width: 1, id: i + 1 });
            }
        } else {
            // Always start with one column by default
            initialColumns = [{ width: 1, id: 1 }];
        }
        let columnWidths = [];
        let maxedColumn = null;
        if (initialColumns.length === 2) {
            columnWidths = initialColumns.map((col) =>
                col.width === 2 ? 60 : 40
            );
            if (initialColumns.every((col) => col.width === 1)) {
                columnWidths = [50, 50];
            } else {
                maxedColumn = initialColumns.findIndex(
                    (col) => col.width === 2
                );
            }
        } else if (initialColumns.length === 3) {
            const wideIdx = initialColumns.findIndex((col) => col.width === 2);
            if (wideIdx !== -1) {
                columnWidths = [25, 25, 25];
                columnWidths[wideIdx] = 50;
                maxedColumn = wideIdx;
            } else {
                columnWidths = [33.33, 33.33, 33.33];
            }
        } else {
            columnWidths = initialColumns.map(
                () => 100 / (initialColumns.length || 1)
            );
        }
        return {
            columns: initialColumns,
            containerWidth: null,
            isFocused: false,
            fullScreenMode: false,
            columnWidths,
            maxedColumn,
            confirmingDelete: false,
            deleteIndex: null,
            activeColumn: 0,
            provide: {
                group: this.makeGroupProvide(),
            },
        };
    },
    computed: {
        values() {
            return this.value;
        },
        extraValues() {
            return {};
        },
        fields() {
            return this.config.fields;
        },
        previews() {
            return (
                data_get(
                    this.publishContainer.previews,
                    this.fieldPathPrefix
                        ? `${this.fieldPathPrefix}.${this.handle}`
                        : this.handle
                ) || {}
            );
        },
        replicatorPreview() {
            const count = this.columns.length;
            return `${count} Column${count === 1 ? "" : "s"}`;
        },
        internalFieldActions() {
            return [
                {
                    title: __("Toggle Fullscreen Mode"),
                    icon: ({ vm }) =>
                        vm.fullScreenMode ? "collapse-all" : "expand-all",
                    quick: true,
                    run: this.toggleFullscreen,
                    visible: this.config.fullscreen,
                    visibleWhenReadOnly: true,
                },
            ];
        },
        numDividers() {
            return this.grid - 1;
        },
    },
    methods: {
        setActiveColumn(idx) {
            this.activeColumn = idx;
        },
        moveColumnLeft(idx) {
            if (idx > 0) {
                const tempCol = this.columns[idx];
                this.columns.splice(idx, 1);
                this.columns.splice(idx - 1, 0, tempCol);
                const tempWidth = this.columnWidths[idx];
                this.columnWidths.splice(idx, 1);
                this.columnWidths.splice(idx - 1, 0, tempWidth);
                if (this.maxedColumn === idx) {
                    this.maxedColumn = idx - 1;
                } else if (this.maxedColumn === idx - 1) {
                    this.maxedColumn = idx;
                }
                if (this.activeColumn === idx) {
                    this.activeColumn = idx - 1;
                } else if (this.activeColumn === idx - 1) {
                    this.activeColumn = idx;
                }
                this.update(this.columns);
            }
        },
        moveColumnRight(idx) {
            if (idx < this.columns.length - 1) {
                const tempCol = this.columns[idx];
                this.columns.splice(idx, 1);
                this.columns.splice(idx + 1, 0, tempCol);
                const tempWidth = this.columnWidths[idx];
                this.columnWidths.splice(idx, 1);
                this.columnWidths.splice(idx + 1, 0, tempWidth);
                if (this.maxedColumn === idx) {
                    this.maxedColumn = idx + 1;
                } else if (this.maxedColumn === idx + 1) {
                    this.maxedColumn = idx;
                }
                if (this.activeColumn === idx) {
                    this.activeColumn = idx + 1;
                } else if (this.activeColumn === idx + 1) {
                    this.activeColumn = idx;
                }
                this.update(this.columns);
            }
        },
        addColumn() {
            if (this.columns.length < this.grid) {
                const maxId =
                    this.columns.length > 0
                        ? Math.max(...this.columns.map((c) => c.id || 0))
                        : 0;
                this.columns.push({ width: 1, id: maxId + 1 });
                for (let i = 0; i < this.columns.length; i++) {
                    this.columns[i].width = 1;
                }
                if (this.columns.length === 2) {
                    this.columnWidths = [50, 50];
                    this.maxedColumn = null;
                } else if (this.columns.length === 3) {
                    this.columnWidths = [33.33, 33.33, 33.33];
                    this.maxedColumn = null;
                } else {
                    this.columnWidths = this.columns.map(
                        () => 100 / this.columns.length
                    );
                }
                this.update(this.columns);
            }
        },
        handleColumnClick(idx) {
            if (this.columns.length === 2) {
                if (this.maxedColumn === idx) return;
                if (this.maxedColumn === null) {
                    this.columnWidths = idx === 0 ? [60, 40] : [40, 60];
                    this.maxedColumn = idx;
                } else {
                    this.columnWidths = [50, 50];
                    this.maxedColumn = null;
                }
            } else if (this.columns.length === 3) {
                if (this.maxedColumn === idx) return;
                if (this.maxedColumn === null) {
                    this.columnWidths = [25, 25, 25];
                    this.columnWidths[idx] = 50;
                    this.maxedColumn = idx;
                } else {
                    this.columnWidths = [33.33, 33.33, 33.33];
                    this.maxedColumn = null;
                }
            }
            for (let i = 0; i < this.columns.length; i++) {
                this.columns[i].width =
                    (this.columns.length === 2 && this.columnWidths[i] > 50) ||
                    (this.columns.length === 3 && this.columnWidths[i] > 33.33)
                        ? 2
                        : 1;
            }
            this.update(this.columns);
        },
        canGrowLeft(idx) {
            if (this.columns.length === 2)
                return idx === 1 && this.maxedColumn !== idx;
            if (this.columns.length === 3)
                return idx > 0 && this.maxedColumn !== idx;
            return false;
        },
        canGrowRight(idx) {
            if (this.columns.length === 2)
                return idx === 0 && this.maxedColumn !== idx;
            if (this.columns.length === 3)
                return idx < 2 && this.maxedColumn !== idx;
            return false;
        },
        shouldLeftOpacity(n) {
            if (this.columns === 1) return true;
            if (this.columns === 2 && n === 1) return true;
            if (this.columns === 3 && n === 1) return true;
            if (this.columns >= 4) return true;
            return false;
        },
        shouldRightOpacity(n) {
            if (this.columns === 1) return true;
            if (this.columns === 2 && n === 2) return true;
            if (this.columns === 3 && n === 3) return true;
            if (this.columns >= 4) return true;
            return false;
        },
        confirmDeleteColumn(idx) {
            this.deleteIndex = idx;
            this.confirmingDelete = true;
        },
        deleteColumn(idx) {
            this.confirmingDelete = false;
            if (this.columns.length > 1) {
                this.columns.splice(idx, 1);
                this.update(this.columns);
                if (this.activeColumn === idx) {
                    this.activeColumn = this.columns.length > 0 ? 0 : null;
                } else if (this.activeColumn > idx) {
                    this.activeColumn -= 1;
                }
            }
            this.deleteIndex = null;
        },
        handleAfterLeave() {
            if (this.columns.length === 1) {
                this.columnWidths = [100];
                this.maxedColumn = null;
                this.activeColumn = 0;
            } else if (this.columns.length === 2) {
                this.columnWidths = [50, 50];
                this.maxedColumn = null;
            } else if (this.columns.length === 3) {
                this.columnWidths = [33.33, 33.33, 33.33];
                this.maxedColumn = null;
            } else {
                this.columnWidths = this.columns.map(
                    () => 100 / this.columns.length
                );
                this.maxedColumn = null;
            }
        },
        blurred() {
            setTimeout(() => {
                if (!this.$el.contains(document.activeElement)) {
                    this.isFocused = false;
                }
            }, 1);
        },
        toggleFullScreen() {
            this.fullScreenMode = !this.fullScreenMode;
        },
        makeGroupProvide() {
            const group = {};
            Object.defineProperties(group, {
                config: { get: () => this.config },
                isReadOnly: { get: () => this.isReadOnly },
                handle: { get: () => this.handle },
                fieldPathPrefix: {
                    get: () => this.fieldPathPrefix || this.handle,
                },
                fullScreenMode: { get: () => this.fullScreenMode },
                toggleFullScreen: { get: () => this.toggleFullScreen },
            });
            return group;
        },
        focused(focused, oldFocused) {
            if (focused === oldFocused) return;
            if (focused) return this.$emit("focus");
            setTimeout(() => {
                if (!this.$el.contains(document.activeElement)) {
                    this.$emit("blur");
                }
            }, 1);
        },
        updated(handle, value) {
            const newColumns = [...this.columns];
            newColumns[this.activeColumn] = {
                ...newColumns[this.activeColumn],
                [handle]: value,
            };
            this.update(newColumns);
        },
        updatedColumnField(handle, value) {
            const newColumns = [...this.columns];
            newColumns[this.activeColumn] = {
                ...newColumns[this.activeColumn],
                [handle]: value,
            };
            this.update(newColumns);
        },
        updateMeta(handle, value) {
            this.$emit("meta-updated", { ...this.meta, [handle]: value });
        },
        fieldPath(handle) {
            return (this.fieldPathPrefix || this.handle) + "." + handle;
        },
        toggleFullscreen() {
            this.fullScreenMode = !this.fullScreenMode;
        },
    },
    watch: {
        columns(newVal) {
            if (newVal.length === 2) {
                this.columnWidths = newVal.map((col) =>
                    col.width === 2 ? 60 : 40
                );
                if (newVal.every((col) => col.width === 1)) {
                    this.columnWidths = [50, 50];
                    this.maxedColumn = null;
                } else {
                    this.maxedColumn = newVal.findIndex(
                        (col) => col.width === 2
                    );
                }
            } else if (newVal.length === 3) {
                const wideIdx = newVal.findIndex((col) => col.width === 2);
                if (wideIdx !== -1) {
                    this.columnWidths = [25, 25, 25];
                    this.columnWidths[wideIdx] = 50;
                    this.maxedColumn = wideIdx;
                } else {
                    this.columnWidths = [33.33, 33.33, 33.33];
                    this.maxedColumn = null;
                }
            } else {
                this.columnWidths = newVal.map(
                    () => 100 / (newVal.length || 1)
                );
                this.maxedColumn = null;
            }
            for (let i = 0; i < newVal.length; i++) {
                newVal[i].width =
                    (newVal.length === 2 && this.columnWidths[i] > 50) ||
                    (newVal.length === 3 && this.columnWidths[i] > 33.33)
                        ? 2
                        : 1;
            }
            this.update(newVal);
        },
        data() {
     
        },
    },
};
</script>

<style>
.column {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: width, transform;
}

.column-move-move {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.column-move-enter-active,
.column-move-leave-active {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
</style>

And my Row.php:

<?php

namespace App\Fieldtypes;

use Statamic\Fields\Fieldtype;

class Row extends Fieldtype
{
    protected $categories = ['structured'];
    protected $icon = 'layout-four-columns';
    protected $defaultable = false;
    protected $selectableInForms = true;

    protected function configFieldItems(): array
    {
        return [
            [
                'display' => __('Fields'),
                'fields' => [
                    'fields' => [
                        'display' => __('Fields'),
                        'instructions' => __('statamic::fieldtypes.group.config.fields'),
                        'type' => 'fields',
                        'full_width_setting' => true,
                    ],
                ],
            ],
        ];
    }

    public function preProcess($data)
    {
        return $data ?? [];
    }

    public function process($data)
    {
        return $data ?? [];
    }
}

[duncanmcclean]

You probably need to copy the preload method from the Group fieldtype. It's where the fieldtype's "meta" comes from:

cms/src/Fieldtypes/Group.php

Lines 100 to 103 in a378764

	public function preload()
	{
	return $this->fields()->addValues($this->field->value() ?? $this->defaultGroupData())->meta()->toArray();
	}

[patrickhoehn]

Awesome! This was the hint I needed. It now works with the select fieldtype but when I use a Replicator, I get TypeError: null is not an object (evaluating '_ctx.value.length') and Grid TypeError: null is not an object (evaluating 'this.value.length'). Can this be solved in a similar way?

[duncanmcclean]

Oh, you probably need to implement the preProcess and process methods too.

They are responsible for preparing data for the publish form (giving you the right value) and transforming the value from your component into what gets saved on the entry.

[patrickhoehn]

Thank you, I make steady progress! Now, when I add my fieldtype which has the first column by default, everything works fine even when I add other fields to it. But when I add another column, the changes for the first column are gone and I get all the errors again for the second column. A workaround is to save and refresh after adding a column. It seems like my fieldtype does not know it has to deal with a new column before it is saved the first time :/

Also, when I add an asset, it is saved like:

 mp4:
    - 'assets::videos/testx.mp4'

instead of mp4: videos/testx.mp4 even if I select 1 as max. Is this also related to the meta and my fieldtype not getting the information of the max assets?