isArray on a column doesn't support key/value JSON

[osseonews]

We use JSONB columns alot in our database. For example, for variants on products, we have:

[
{ key: "color", value: "red" },
{ key: "size", value: "L" }
]

The isArray feature for Array Columns, though, treats it like an array of values, instead of like an Array of key/values. So when you edit it, you can just add a value, and not the key. So it's not useful for most applications, where the JSONB will be storing a key/value. In our React admin panel, we currently solve this with something called Nested Arrays from Mantine. You can see a demo here: https://mantine.dev/form/nested/#nested-arrays

Can you implement this for AdminForth also? It is really critical for JSONB fields, to be able to enter the Key/Value in this manner, otherwise, users are editing JSON, which is not very user friendly and prone to alot of errors.

Thanks.

[osseonews]

I used AI to code a quick demo of Vue component for this for a simple key/value pair. I tried it and it works. so maybe you can implement something similar out of the box and improve the code (I just did this quickly - not sure it's 100% good).

<template>
  <div class="flex flex-col gap-2">
    <div
      v-for="row in rows"
      :key="row.id"
      class="flex gap-4 items-center"
    >
      <!-- key input: bind to draft, commit only on blur -->
      <input
        class="border p-1 w-40"
        :value="row.draftKey"
        @input="row.draftKey = ($event.target as HTMLInputElement).value"
        @blur="commitKey(row)"
      />

      <!-- value input: unchanged -->
      <input
        class="border p-1 flex-1"
        :value="row.value"
        @input="onValueChange(row, $event)"
      />

      <button @click="removeRow(row)">✕</button>
    </div>

    <button class="mt-2 border px-2 py-1" @click="addRow">+ Add field</button>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const props = defineProps<{
  record: any
  column: any
}>()

const emit = defineEmits(['update:value'])

interface Row {
  id: number
  committedKey: string
  draftKey: string
  value: any
}

let nextId = 0

const rows = reactive<Row[]>([])

// Initialize from JSON string
function load() {
  try {
    const raw = props.record[props.column.name]
    const parsed = typeof raw === 'string' ? JSON.parse(raw) : raw || {}

    for (const [k, v] of Object.entries(parsed)) {
      rows.push({ id: nextId++, committedKey: k, draftKey: k, value: v })
    }
  } catch {
    // leave empty
  }
}

load()

// Emit current rows as a JSON string
function sync() {
  const obj: Record<string, any> = {}
  for (const row of rows) {
    obj[row.committedKey] = row.value
  }
  emit('update:value', JSON.stringify(obj))
}

// Commit the draft key only when the user leaves the field
function commitKey(row: Row) {
  const trimmed = row.draftKey.trim()
  if (!trimmed || trimmed === row.committedKey) return
  row.committedKey = trimmed
  sync()
}

function onValueChange(row: Row, event: Event) {
  row.value = (event.target as HTMLInputElement).value
  sync()
}

function addRow() {
  const key = `key_${Date.now()}`
  rows.push({ id: nextId++, committedKey: key, draftKey: key, value: '' })
  sync()
}

function removeRow(row: Row) {
  const idx = rows.indexOf(row)
  if (idx !== -1) rows.splice(idx, 1)
  sync()
}
</script>