Adding client dropdown at the top of table

This tutorial is part of this mini project on Laravel vue spa. To see all the sections of this project click here

Step 01: artisan commands to create Client controller and resource

php artisan make:controller ClientController
php artisan make:resource ClientResource

Step 02: Modifying following changes inside ClientResource.php

public function toArray(Request $request): array
{
    return [
        'id' => $this->id,
        'name' => $this->name,
    ];
}

Step 03: Adding index() method inside ClientController.php

// at the top 
use App\Http\Resources\ClientResource;
use App\Models\Client;

public function index()
{
    return ClientResource::collection(Client::all());
}

Step 04: Modifying routes/api.php for fetching client api endpoint

Route::get('clients', [\App\Http\Controllers\Api\ClientController::class, 'index']);

Step 05: Creating client composable clients.js inside resourcse/js/composables for fetching endpoint data and send it to vuejs component

import { ref } from 'vue'

export default function useClients() {
    const clients = ref({})

    const getClients = async () => {
        axios.get('/api/clients')
            .then(response => {
                clients.value = response.data.data;
            })
    }

    return { clients, getClients }
}

Step 06: Modifying Index.vue at the top before table element adding select dropdown with client data inside resources/js/components/issues to filter table with this data

<div class="row mb-3">
    <div class="col-md-3">
        <select v-model="selectedclient" placeholder="Filter By Client" class="form-control">
                <option value="" selected>-- Filter by client --</option>
                <option v-for="client in clients" :value="client.id">
                    {{ client.name }}
                </option>
            </select>            
    </div>    
</div>

Also modifying javascript to get and pass from composible client api endpoint data to vue model

<script>

import { ref, onMounted } from "vue";
import useIssues from "../../composables/issues";
import useClients from "../../composables/clients";

export default {
    setup() {
        const selectedClient = ref('')
        const { issues, getIssues} = useIssues()        
        const { clients, getClients } = useClients()
        onMounted(() => {
            getIssues()
            getClients()
        })        
        return { issues, clients }
    }
}

</script>