Laravel vue js data insert with dropdown select item
//during designation data insert, fetch department data with select dropdown
and search multiple match data with vue js javascript,
without using laravel
code.
//api route
Route::post('designation/store', [DesignationController::class, 'store']);
//controller code,
public function store(Request $request)
{
$validateData = $request->validate([
'name' => 'required|unique:designations|max:255',
'department_id' => 'required|exists:departments,id',
]);
$designation = Designation::create([
'name' => $request->name,
'department_id' => $request->department_id,
]);
return response()->json($designation, 201);
} //end method
//vue js component code
<template>
<div>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<h2 class="text-center mb-4">Designation</h2>
<div class="d-flex justify-content-between mb-2">
<div class="text-left mb-3">
<a href="#" class="btn btn-success" @click="showModal">Add Designation</a>
</div>
<div class="text-right mb-2">
<input type="text" class="form-control" v-model="searchTerm" style="width:200px;" placeholder="Search Here..">
</div>
</div>
<!-- Insert Modal Structure -->
<form @submit.prevent="designationsubmit">
<div class="modal fade" id="addDesignationModal" tabindex="-1" aria-labelledby="addDesignationModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addDesignationModalLabel" >Add Designation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="departmentName">Designation Name</label>
<input type="text" class="form-control" v-model="name" id="departmentName" placeholder="Enter department name">
</div>
<div class="form-group">
<label for="departmentSelect">Select Department</label>
<select v-model="department_id" id="departmentSelect" class="form-control">
<option v-for="department in departments" :key="department.id" :value="department.id">
{{ department.name }}
</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</form>
<!-- Insert Modal Structure End-->
<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">SL</th>
<th scope="col">Department Name</th>
<th scope="col">Designation Name</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="designa in filterSearch" :key="designa.id">
<th scope="row">{{designa.id}}</th>
<td>{{designa.department.name}}</td>
<td>{{designa.name}}</td>
<td>
<a href="#" class="btn btn-info btn-sm">Edit</a>
<a href="#" class="btn btn-danger btn-sm">Delete</a>
</td>
</tr>
<!-- Add more data rows as needed -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
designations: [],
searchTerm: '',
department_id: null,
name: ''
};
},
created(){
this.allDesignation();
this.fetchDepartments();
},
computed:{
filterSearch()
{
const searchTermLower = this.searchTerm.toLowerCase();
return this.designations.filter(designation =>{
// return designation.name.toLowerCase().includes(searchTermLower);
// Check if designation name or department name includes the search term
const designationNameMatch = designation.name.toLowerCase().includes(searchTermLower);
const departmentNameMatch = designation.department ? designation.department.name.toLowerCase().includes(searchTermLower) : false;
return designationNameMatch || departmentNameMatch;
})
}
},
methods:{
allDesignation(){
axios.get('/api/designation')
.then(({data}) => (this.designations = data))
.catch()
},
showModal() {
$('#addDesignationModal').modal('show');
},
fetchDepartments() {
axios.get('/api/departments')
.then(response => {
this.departments = response.data;
})
.catch(error => {
console.error('Error fetching departments:', error);
});
},
designationsubmit() {
axios.post('/api/designation/store', {
name: this.name,
department_id: this.department_id,
})
.then(response => {
console.log('Designation added:', response.data);
$('#addDesignationModal').modal('hide');
this.name = '';
this.department_id = null;
this.allDesignation();
})
.catch(error => {
console.error('Error adding designation:', error);
});
},
},
}
</script>
<style scoped>
</style>
No comments