Level 5
Nevermind, I figured it out. I had to change employee.id to index.
Here is my vue:
<th>
Salary
</th>
<th>
Active
</th>
<th>
Modify
</th>
</tr>
<tr v-for="employee in employees"
:key="employee.id">
<td>
{{
employee.employee_num
}}
</td>
<td>
{{
employee.name
}}
</td>
<td>
{{
employee.hire_date
|
myDate
}}
</td>
<td>
<p v-if="employee.dob">
{{
employee.dob
|
myDate
}}
</p>
<p v-else>
</p>
</td>
<td>
<p v-if="employee.eligible_for_pto">
Yes
</p>
<p v-else>
No
</p>
</td>
<td>
<p v-if="employee.salary">
Yes
</p>
<p v-else>
No
</p>
</td>
<td>
<p v-if="employee.active">
Yes
</p>
<p v-else>
No
</p>
</td>
<td>
<a href="#"
@click.prevent="editModal(employee)">
<font-awesome-icon
icon="edit"></font-awesome-icon>
</a>
/
<a href="#"
@click.prevent="deleteEmployee(employee.id)">
<font-awesome-icon
icon="trash"></font-awesome-icon>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
</div>
<!-- Modal -->
<div
class="modal fade"
id="addNew"
tabindex="-1"
role="dialog"
aria-labelledby="addNewLabel"
aria-hidden="true">
<div
class="modal-dialog modal-dialog-centered"
role="document">
<div
class="modal-content">
<div
class="modal-header">
<h5 class="modal-title"
v-show="editmode"
id="addNewLabel">
Update
Employee's
Info</h5>
<h5 class="modal-title"
v-show="!editmode"
id="addNewLabel">
Add
Employee
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close">
<span
aria-hidden="true">×</span>
</button>
</div>
<form
@submit.prevent="editmode ? updateEmployee() : createEmployee()">
<div
class="modal-body">
<div
class="form-group">
<div
v-if="!editmode">
<select
class='form-control shadow'
v-model='form.user_id'
v-show="!editmode"
>
<option
disabled>
Select
One
</option>
<option
v-for='user in users'
:key="user.id"
:value="user.id"
>
{{
user.name
}}
</option>
</select>
<has-error
:form="form"
field="user_id"></has-error>
</div>
<div
v-else>
Employee
Name
<input
disabled
id="name"
v-model="form.name"
/>
</div>
</div>
<div
class="form-group">
<label>
Employee
Number
</label>
<input
v-model="form.employee_num"
type="number"
name="employee_num"
placeholder="Employee number"
class="form-control"
:class="{ 'is-invalid': form.errors.has('employee_num') }">
<has-error
:form="form"
field="employee_num"></has-error>
</div>
<div
class="form-group">
<label>
Hire
Date
</label>
<input
v-model="form.hire_date"
type="date"
name="hire_date"
placeholder="Hire Date"
class="form-control"
:class="{ 'is-invalid': form.errors.has('hire_date') }">
<has-error
:form="form"
field="hire_date"></has-error>
</div>
<div
class="form-group">
<label>
DOB
</label>
<input
v-model="form.dob"
type="date"
name="dob"
placeholder="Date of Birth"
class="form-control"
:class="{ 'is-invalid': form.errors.has('dob') }">
<has-error
:form="form"
field="dob"></has-error>
</div>
<div
class="form-group">
<label>
Eligible
for
PTO
</label>
<select
class='form-control shadow'
v-model='form.eligible_for_pto'
id="eligible_for_pto">
<option
disabled>
Select
One
</option>
<option
value="1"
>
Yes
</option>
<option
value="0">
No
</option>
</select>
</div>
<has-error
:form="form"
field="eligible_for_pto"></has-error>
<div
class="form-group">
<label>
Salary
</label>
<select
class='form-control shadow'
v-model='form.salary'
id="salary">
<option
disabled>
Select
One
</option>
<option
value="1"
>
Yes
</option>
<option
value="0">
No
</option>
</select>
</div>
<has-error
:form="form"
field="salary"></has-error>
<div
class="form-group">
<label>
Active
</label>
<select
class='form-control shadow'
v-model='form.active'
id="active">
<option
disabled>
Select
One
</option>
<option
value="1"
>
Yes
</option>
<option
value="0">
No
</option>
</select>
</div>
<has-error
:form="form"
field="active"></has-error>
</div>
<div
class="modal-footer">
<button
type="button"
class="btn btn-danger"
data-dismiss="modal">
Close
</button>
<button
v-show="editmode"
type="submit"
class="btn btn-success">
Update
</button>
<button
v-show="!editmode"
type="submit"
class="btn btn-primary">
Create
</button>
</div>
</form>
</div>
</div>
</div>
</div>
And here are the two controller methods:
public function getEmployees()
{
$employees = DB::table('employees')
->leftJoin('users', 'employees.user_id', '=', 'users.id')
->get();
//save for example/reference
// $employees = Employees::with('users:id,name')->get();
return response()->json($employees);
}
public function getUsers()
{
$users = DB::table('users')
->leftJoin('employees', 'employees.user_id', '=', 'users.id')
->where('employees.user_id', '=', null)
->get();
return response()->json($users);
}
Nevermind, I figured it out. I had to change employee.id to index.
Please or to participate in this conversation.