Creating issue create form with client dropdown

Step 01: We need to create issue create form first inside Create.vue of resources\js\components\Issues folder

<template>    
    <h1>Create Client Issue </h1>
    <div class="card mt-3">
        <div class="card-body">
                <form >
                    <div class="mb-3">
                    <label for="email">Title:</label>
                    <input type="text" class="form-control" id="text" placeholder="Enter title" name="title">                               
                    </div>
                    <div class="mb-3">
                    <label for="email">Description:</label>
                    <textarea  class="form-control" rows="5" id="description" name="description"></textarea>                              
                    </div>                                
                    <div class="mb-3">
                        <label for="pwd">Client:</label>
                        <select id="client_id" class="form-control">
                            <option value="" selected>-- Choose client --</option>
                        </select>                               
                    </div>
                    <div class="mb-3">
                        <label for="formFile" class="form-label">File Upload</label>
                        <input class="form-control" type="file" id="formFile">                                                                     
                    </div>
                    <button type="submit" class="btn btn-primary cursor-not-allowed">
                        <span>Save</span>                                    
                    </button>
                </form>
        </div>
    </div>    
</template>

In code above, one thing here to note is there is a dropdown of client_id only which is loaded as empty. Later we will be populating it shortly.

Step 02: Similar to IssueResource we will be creating ClientResource.php inside App\Http\Resource folder to transform client resource data for api method

class ClientResource extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @return array<string, mixed>
     */
    public function toArray(Request $request): array
    {
        return [
            'id' => $this->id,
            'name' => $this->name,
            'created_at' => $this->created_at->toDateString()
        ];
    }
}

Step 03: Now creating api index() method inside App\Http\Controller\Api\ClientController.php using ClientResource

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

class ClientController extends Controller
{
    //
    public function index() {
        return ClientResource::collection(Client::orderBy('id', 'desc')->get());
    }
}

Step 04: setup route inside routes\api.php for ClientController api method

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

Step 05: creating clients.js composable inside resources\js\composables folder with following code similar to issues.js composable

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: Now in order to populate that client dropdown we need to add following two sets of code inside of resources\js\components\Create.vue

// inside script tag  ( this code is identical that we have used inside Index.vue to show client names for different issues while populating  )
<script setup>
import { onMounted } from 'vue';
import useClients from "../../composables/clients";

const { clients, getClients } = useClients()

onMounted(() => {
    getClients()
})

</script>

// inside template tag for client_id dropdown element 
// adding v-for directive for looping and populating clients for the dropdown 
<select id="client_id" class="form-control">
    <option value="" selected>-- Choose client --</option>
    <option v-for="client in clients" :value="client.id"> 
        {{ client.name }} 
    </option> 
</select>  

Now we will have the issue create form setup with client drop-down populating with data fetched from api.