Field Repeater, for invoice generation

[syedahnb]

https://filamentphp.com/docs/2.x/forms/fields#repeater

By using Spade Form, can something like this be achieved in Splade?
Dynamically add or remove fields, means some time hasMany relation need to for CRUD purpose.

[pascalbaljet]

I've implemented this myself with a custom Vue component, but I'll investigate if this is something we can bring into Splade.

[bdsumon4u]

investigate

Have you investigated?

[bdsumon4u]

Can you please give me a hint?

<div v-for="i in Array(form.count)" ...>
    <div ...>
        <button type="button" @click.prevent="...">&times;</button>
    </div>
    <div>
         <x-splade-input name="`name[${i}]`" label="Name" />
    </div>
</div>
<div ...>
    <button type="button" @click.prevent="form.count++" ...>Add New</button>
</div>

How can I repeat this with a variable i from javascript?

<x-splade-input name="`name[${i}]`" label="Name" />

[ejoi8]

I manage to do field repeater using Custom Form components (https://splade.dev/docs/custom-form-components). Here is the sample

in Repeater.vue

<template>
    <div>
        <div v-for="(field, index) in fields" :key="index">
            <input v-model="fields[index]" class="input w-full max-w-xs" />
            <button class="btn btn-secondary" @click.prevent="removeField(index)">Remove</button>
        </div>
        <button @click.prevent="addField" class="btn btn-primary">Add Field</button>
        
    </div>
</template>

<script setup>
    import { ref  } from "vue"

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

    const fields = ref([''])

    const addField = (event) => {
        fields.value.push("")
        emit('update:modelValue', fields.value)
    }

    const removeField = (index) => {
        fields.value.splice(index, 1)
    }
    
</script>

then add the component in blade template (ex: create.blade.php)

<x-layout>
    <x-slot name="header">
        <h1>Add Rental</h1>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
            <div class="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
                <div class="max-w-xl">
                    <x-splade-form confirm method="post" :action="route('rental.store')">
                        <x-splade-input name="customer_name" label="Customer_name"  />
                        <x-splade-input name="location" label="Location"  />
                       <!--  Custom component -->
                       <Repeater v-model="form.repeat" />
                        <div class="pt-6">
                             <div class="flex space-x-2">
                                <x-splade-submit />
                                <Link class="btn btn-sm btn-secondary" 
                                href="{{ route('rental.index') }}">Back</Link>
                            </div>
                        </div>
                    </x-splade-form>
                </div>
            </div>
        </div>
    </div>
</x-layout>

The value will be store in array and you can get the input value in the controller by call $request->repeat

public function store(Request$request)
{
    ...
    dd($request->repeat);
    ...
}

[stuartcusackie]

I manage to do field repeater using Custom Form components (https://splade.dev/docs/custom-form-components). Here is the sample...

This approach works very well! I'm surprised how flexible Splade is here. You can even pass the errors to your custom component, and merge all fields from a Splade Form Class:

<x-splade-form :for="$form">
   {{-- Form class fields will be output as normal --}}
   
   {{-- Custom repeater with errors --}}
  <x-splade-errors>
    <CustomRepeater
      v-model="form.items" 
      :errors="errors.all" 
    />
  </x-splade-errors>
   
   {{-- And can even add another form field afterwards --}}
  <x-splade-submit label="Proceed..." class="mt-8" />
</x-splade-form>

The only downside is that I can't see a way to use existing Splade components (input, buttons) within my customrepeater, but it didn't take long to copy the styles from those and make my own vue inputs.

[kahfieidn]

I've implemented this myself with a custom Vue component, but I'll investigate if this is something we can bring into Splade.

Hope splade can add this feature

[ritwikBiswas007]

But how to add default data in the vue repeater component?

[ritwikBiswas007]

If I wrap the vue component in x-splade-data it works but then it doesn't pass the data back to controller

[ritwikBiswas007]

I got it I just have to pass unguarded on the form

[syedahnb]

Renderless Custom Vue Component: Repeater.vue

This component is a renderless custom Vue component designed to dynamically add and remove rows with input fields for name and URL.

Usage: .blade.php

    <Repeater :form="form" />

<template>
    <div>
        <div class="col-span-12">
            <div class="flex justify-between mb-4">
                <input
                    v-model="newEntry.name"
                    type="text"
                    placeholder="Name"
                    class="w-1/3 p-2 border border-gray-300 rounded"
                />
                <input
                    v-model="newEntry.url"
                    type="text"
                    placeholder="URL"
                    class="w-1/3 p-2 border border-gray-300 rounded"
                />
                <button
                    @click="addRow"
                    type="button"
                    class="p-2 bg-blue-500 text-white rounded"
                >
                    Add
                </button>
            </div>
            <table class="w-full mb-4">
                <thead>
                    <tr>
                        <th class="px-4 py-2">Name</th>
                        <th class="px-4 py-2">URL</th>
                        <th class="px-4 py-2">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(row, index) in rows" :key="index">
                        <td class="border px-4 py-2">
                            <input
                                v-model="row.name"
                                type="text"
                                :name="`name_${index}`"
                                placeholder="Name"
                                class="w-full p-2 border border-gray-300 rounded"
                            />
                        </td>
                        <td class="border px-4 py-2">
                            <input
                                v-model="row.url"
                                type="text"
                                :name="`url_${index}`"
                                placeholder="URL"
                                class="w-full p-2 border border-gray-300 rounded"
                            />
                        </td>
                        <td class="border px-4 py-2">
                            <button
                                @click="removeRow(index)"
                                type="button"
                                class="px-2 py-1 bg-red-500 text-white rounded"
                            >
                                Remove
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        form: Object,
    },
    data() {
        return {
            rows: [],
            newEntry: { name: "", url: "" },
        };
    },
    methods: {
        addRow() {
            if (this.newEntry.name && this.newEntry.url) {
                this.rows.push({ ...this.newEntry });
                console.log(this.rows);
                this.form.items = this.rows;
                this.newEntry.name = "";
                this.newEntry.url = "";
            }
        },
        removeRow(index) {
            this.rows.splice(index, 1);
        },
    },
};
</script>

[MotionPhix]

You can actually do this all with Splade without writing Vue components. Plus you can actually do it inside the Splade form. Here is an example of an invoice form with items on it. I have done it in an application I am working on. The trick is to utilize the x-splade-data for this. And, yes, you can use x-splade-data inside an x-splade-form:

 <x-splade-form
        action="{{ $invoice->iid ? route('invoices.update', $invoice) : route('invoices.store') }}"
        class="flex flex-col gap-6"
        default="{
          ...{{ $invoice }},
        }"
        method="{{ $invoice->iid ? 'patch': 'post' }}">

        <x-splade-input
          name="invoice_date"
          label="Invoice Date"
          required
          date />

        <x-splade-select
          name="currency"
          label="Currency"
          choices="{ searchEnabled: false }">

          <option value="" disabled>Pick a currency...</option>

          @foreach(\App\Models\Settings::CURRENCIES as $invoice_currency)

            <option value="{{ $invoice_currency }}">

              {{ $invoice_currency }}

            </option>

          @endforeach

        </x-splade-select>

        <x-splade-textarea
          name="description"
          label="Description" />

        <x-splade-data default="{ items: form.items }">

          <section class="flex items-center gap-6 mb-1">

            <h2 class="text-xl">Invoice Items</h2>

            <button
              type="button"
              @click="data.items.push({ description: '', quantity: 1, unit_price: 0 })"
              class="size-8 bg-blue-500 text-white rounded-md flex items-center justify-center">
              <x-tabler-plus class="size-5" stroke-width="3" />
            </button>

          </section>

          <div v-for="(item, index) in data.items" :key="index" class="item mb-2 flex items-center">

            <input
              type="text"
              v-model="item.description"
              :name="`items[${index}][description]`"
              placeholder="Description"
              class="w-full border-none rounded-s-md shadow-sm"
              required />

            <input
              type="number"
              v-model="item.quantity"
              :name="`items[${index}][quantity]`"
              placeholder="Quantity"
              class="border-none shadow-sm"
              required />

            <input
              type="number"
              v-model="item.unit_price"
              :name="`items[${index}][unit_price]`"
              placeholder="Unit Price"
              class="border-none rounded-e-md shadow-sm"
              required />

            <article>
              <button
                type="button"
                @click="data.items.splice(index, 1)"
                class="ml-2 size-8 bg-red-500 text-white rounded-md flex items-center justify-center">
                <x-tabler-x class="size-5" stroke-width="3" />
              </button>
            </article>

          </div>

        </x-splade-data>

        <x-splade-submit>
          {{ $invoice->iid ? 'Update' : 'Create' }} Invoice
        </x-splade-submit>

      </x-splade-form>

Hope that will help someone.