How to make an update form of one to many relationship when the child item cannot be simply deleted?

Question

I have a table called EntryPass, which has multiple items stored in one to many relationship. Those EntryPass items may then each generate a new slip later on.

EntryPass:
          -> EntryPassItem ->slip
          -> EntryPassItem ->slip
          -> EntryPassItem ->slip
          -> EntryPassItem 

My problem lies while editing the EntryPass.

EntryPassItem has following structure: id, description, color, quantity

Now while editing EntryPass, I intend to give the ability to add missing items too.

How should I approach it? This is the snippet of create form of EntryPass

<form >
    ...
    <tr>
        <td>
            <select name="description[]" id="description">               
                <option value="value1" selected>value 1</option>
                <option value="value2 ">value 2</option>
            </select>
        </td>
        <td>
            <select name="color[]" id="color" >
                <option value="blue" selected>Blue</option>
                <option value="red">Red</option>
            <option value="green">Green</option>
            </select>
        </td>
        <td>
            <input type="number" id="quantity" name="quantity[]" value="" min="1" required>
        </td>
        <td>
            <button type="button" onclick="add_new_row();"></button>
        </td>
    </tr>
    ...
</form>

The edit form for EntryPass should allow me to edit existing EntryPassItems and add missing ones. Or should I separate those functions? Please advise since EntryPassItems will be used to change the other slip later on and cannot be deleted and replaced by new items.

Answer 1

You are in the good way, I solved this before like you tried. Use arrays in the input fields, and write that js function add_row() So you can add more input fields dinamically. In the controller you just need to iterate over the input arrays and create each EntryPassItem .

For example on the view:

function add_row() {
            $('#entry_pass_item_holder').append("
     <td>
        <select name="description[]" id="description">               
            <option value="value1" selected>value 1</option>
            <option value="value2 ">value 2</option>
        </select>
      </td>
      <td>
        <select name="color[]" id="color" >
            <option value="blue" selected>Blue</option>
            <option value="red">Red</option>
        <option value="green">Green</option>
        </select>
      </td>
      <td>
        <input type="number" id="quantity" name="quantity[]" value="" min="1" required>
      </td>");
        }

On the controller something like this:

  if($request->description && $request->color && $request->quantity)
        {
            $entryPass->items->delete();
            foreach ($request->description as $key => $description)
            {
                EntryPassItem::create([
                    'entry_pass_id' => $entryPass->id,
                    'description'=> $description,
                    'color' => $request->color[$key],
                    'quantity' => $request->quantity[$key],
                    ]);
            }
        }