JIG example of dropdown element

[mquevedob]

could you show an example of how to implement simple dropdown element when doing a CREATE or UPDATE in the case there is an ID pointing to a lookup table?

what I mean is the following

I have a table items

Items
name
description
type_id

and a types table like this
Types
id
name

when editing Item, instead of having an input to change the Id i would like to have a dropdown with the items of the Types table

[coolsam726]

If you had implemented the Foreign Keys correctly in your migration, JIG would have done this for you automatically instead of presenting a text field with type_id.

Option 1: (Recommended)

If it is not too late, you could modify your tables and add a foreign key in items as follows:

// create a migration and add this to the up() method
$table->foreign('type_id')->references('id')->on('types')->restrictOnDelete();

Then run the migration above, and then re-generate the items table as follows:

php artisan jig:generate items --force

This should give you what you want to achieve.

Option 2 (Not recommended)

If it is not possible for you to alter the database, you can manually modify your form and use the InfiniteSelect.vue component to achieve this. However the process is tedious as you have to modify the Form, Request, Repository and Model to achieve this.

Form:

<template>
        <form>
             <infinite-select :per-page="15" :api-url="route('api.types.index')"
                             id="type" name="type"
                             v-model="form.type" label="name"
                             :class="{'border-red-500 sm:focus:border-red-300 sm:focus:ring-red-100': form.errors.customer}"
            ></infinite-select>
            <jet-input-error :message="form.errors.type" class="mt-2"/>
        </form>
</template>
<script>
import InfiniteSelect from '@/JigComponents/InfiniteSelect.vue';
export default {
    components: {
        InfiniteSelect,
    },
    data() {
        return {
            form: useForm({
                type: null,
            }, {remember: false}),
        }
    },

}
</script>

Http/Request
Add the following validation under rules:

'type' => ['required','array'],

Repository
Add the following to the appropriate method (store or update)

$model->type()->associate($data->type->id);

__Model__
Ensure you have the `type` relationship defined:
```php
    public function type() {
        return $this->belongsTo(\App\Models\Type::class,"type_id","id");
    }

Conclusion

• As you can see option 2 is just too much work, and that is why JIG exists to make the work easier
• Just use option 1
• Always ensure you define foreign keys in the database, they are the ones JIG uses to resolve and automatically implement relationships. If you don't your relationship fields (e.g type_id) will just be treated like any other text field.

[mquevedob]

Thanks!

I will correct the model