dropdown for 2 cascaded tables

[mquevedob]

Hi !

here I am with another question

I have created 3 models

Office, Location and Storage

Office is a list of all offices
Location is a place in the office where something is stored
Storage is a more specific space inside a Location where to find the stored item

Schema::create('offices', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('phone')->nullable();
            $table->string('address')->nullable();
            $table->timestamps();
        });

      Schema::create('stock_locations', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->unsignedBigInteger('office_id');
            $table->text('description')->nullable();
            $table->timestamps();

            $table->index('office_id');
            $table->foreign('office_id')->references('id')->on('offices')->restrictOnDelete();
        });

        Schema::create('stock_storages', function (Blueprint $table) {
            $table->id();
            $table->unsignedBigInteger('count');
            $table->unsignedBigInteger('location_id');
            $table->timestamps();

            $table->index('location_id');
            $table->foreign('location_id')->references('id')->on('stock_locations')->restrictOnDelete();
        });

is there a way to make the generated controller and/or model to create a form for Storage so that I will see a form with

1. dropdown with offices
2. dropdown with locations from the office previously selected

I appreciate the support

Regards,
Martin

[coolsam726]

I think I have implemented this exact scenario before. I will share my code here so that you see if it can help you.

[coolsam726]

@mquevedob follow this guide and see if it will shed light on your path:

1. Add this relationship in the Office model:

public function locations() {
        return $this->hasMany(Location::class,"location_id","id");
    }

2. In app/Http/Controllers/API/OfficeController add the following method:

public function locations(Request $request, Office $office) {
        return $this->api->success()->payload($office->locations)->send();
    }

3. Create the following route to fetch a single office's locations in the api.php route file under the offices group:

// routes/api.php
Route::get('{office}/locations',[\App\Http\Controllers\API\OfficeController::class,'locations'])->name('locations');

4. Use InfiniteSelect and JigSelect in the frontend to achieve what you intend: See the Vue3 Typescript code below and see if it will give you insight on what you need to do.

<template>
    <form @submit.prevent="submit">
        <div class="my-2 md:grid grid-flow-row grid-cols-3 items-center gap-2">
                <label class="font-semibold">Office</label>
                <InfiniteSelect @update:modelValue="fetchOfficeLocations" class="block p-dropdown md:col-span-2" v-model="form.office" :api-url="route('api.offices.index')" label="name"/>
            </div>
            <div class="md:grid grid-flow-row md:grid-cols-3 items-center gap-2 my-2">
                <label class="font-semibold">Office Location</label>
                <Dropdown :options="officeLocations" placeholder="Select Unit" class="block md:col-span-2" v-model="form.office_location" option-label="name" :filter="true"/>
            </div>
        <input type="submit" style="display:none">
    </form>
</template>

<script lang="ts">
import {defineComponent, reactive, ref, toRef} from "vue";
import Dialog from "primevue/dialog";
import InertiaButton from "@/JigComponents/InertiaButton.vue";
import InfiniteSelect from "@/JigComponents/InfiniteSelect.vue";
import axios, {AxiosError} from "axios";
import route from "ziggy-js";
import {useRouter} from "vue-router";
import {useToast} from "primevue/usetoast";
import JigDatepicker from "@/JigComponents/JigDatepicker.vue";
import InputNumber from "primevue/inputnumber";
import JigSelect from "@/JigComponents/JigSelect.vue";
import Dropdown from "primevue/dropdown";

export default defineComponent({
    name: "YoutComponentName",
    components: {
        JigSelect,
        InfiniteSelect,
        InertiaButton,
        Dialog,
        InputNumber,
        Dropdown,
    },
    emits: ['success'],
    setup(props,{emit}) {
        const form = reactive({
            quantity: null,
            office_location: null,
            office: null,
        });
        const officeLocations = ref([]);
        const toast = useToast();
        const submit = async  () => {
           // TODO: Implement form submission logic here
        }
        const fetchOfficeLocations = async (office) => {
            try {
                form.office_location = null; // Reset whenever an office selection changes.
                const res = await axios.get(route('api.offices.locations',{id: office.id}));
                officeLocations.value = res.data.payload; // populate options
            } catch (e: AxiosError|any) {
                console.log(e);
                // reset office_location and officeLocations
                form.office_location = null;
                officeLocations.value = [];
            }
        }
        return {
            submit,
            form,
            fetchOfficeLocations,
            officeLocations,
        }
    }
})
</script>

I hope this helps you.