There are two tables in question - the Nationality table (parent) and the Employee table (child). The requirement is to display a message when a user attempts to delete data from the parent table that is currently being used by the child table. The message should state: "You cannot delete this record because it is being referenced by the employee table." While cascading delete can handle such actions, the intention here is not to delete the data unless it's not in use by the child table. An attempt has been made with the code provided below, however, only one ID from the table can be obtained. Assistance in resolving this issue would truly be appreciated.
An encountered error is as follows:
The issue arises where for the first user nationality ID, if the IF function passes successfully, it proceeds directly to the deletion section instead of displaying the desired warning message. Instead, it prompts the confirmation dialog box for deleting the data.
Code snippet from Nationality.vue file:
<div class="card-body table-responsive p-0">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Nationality</th>
<th>Modify</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3" align="center">
<p
v-if="Nationalities.data != undefined && Nationalities.data.length == 0"
class="text-center alert alert-danger"
>There is no data in the Table</p>
</td>
</tr>
<tr v-for="Nationality in Nationalities.data" :key="Nationality.id">
<td>{{Nationality.id}}</td>
<td>{{Nationality.nationality|UppCaseFirstLetter}}</td>
<!-- <td
>{{Nationality.nationality}}</td>-->
<td>
<a href="#" @click="editModal(Nationality)">
<i class="fa fa-edit"></i>
</a>|||
<a href="#" @click="deleteNationality(Nationality.id)">
<i class="fa fa-trash red"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
Code from API routes:
Route::get('chekemployeeNationality','API\EmployeeController@chekemployeeNationality');
Route::apiResources(['nationality'=>'API\NationalityController']);
Code from EmployeeController:
public function chekemployeeNationality()
{
return Employee::all();
}
Code from Nationality Controller:
public function index()
{
return Nationality::orderBy('nationality', 'ASC')->paginate(5);
}
Scripts section includes the following code:
export default {
components: {
Loading
},
data() {
return {
Nationalities: {},
chekemployee: [],
url: "api/chekemployeeNationality",
form: new Form({
id: "",
nationality: ""
})
};
},
methods: {
deleteNationality(id) {
axios.get(this.url).then(response => {
let data = response.data;
data.forEach(element => {
if (element.nationality_id == id) {
toast.fire({
type: "warning",
title:
"this id#" + element.nationality_id
});
} else {
swal
.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, delete it!"
})
.then(result => {
//Send request to the server
if (result.value) {
this.form
.delete("api/nationality/" + id)
.then(() => {
swal.fire(
"Deleted!",
"Your file has been deleted.",
"success"
);
Fire.$emit("refreshPage");
})
.catch(e => {
console.log(e);
});
}
});
}
});
});
},
loadNationalities() {
if (this.$gate.isAdmin() || this.$gate.isUser()) {
this.$Progress.start();
axios
.get("api/nationality")
.then(({ data }) => (this.Nationalities = data));
axios.get("api/employee").then(({ data }) => (this.employees = data));
axios.get("api/chekemployeeNationality")
.then(({ data }) => (this.chekemployeeNationality= data));
this.$Progress.finish();
}
},
created() {
this.loadNationalities();
}
}