In my Vue application, I am currently processing data for employees, including their hours and swipes, and multiplying this data for each employee every day.
This process is generating new rows of data so that I have a complete set of information for each day.
However, I am facing an issue in my template where I want to display the multiplied data in the column corresponding to the date and have only one row for each employee. I expect the results to look like this:
Employee | 2021-08-31 | 2021-09-01 | 2021-09-02
-----------------------------------------------------
Evan 60 60
Stan 100 200
Kelly 60 164
I am looking for guidance on how I can adjust my current approach to ensure that I end up with only one row per employee and place the data in the correct column based on the date in the object for that record and the column-header date.
<div id="app">
<table>
<thead>
<tr>
<th>Employee</th>
<th>2021-08-31</th>
<th>2021-09-01</th>
<th>2021-09-02</th>
<th>Grand Total</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in compRows">
<td v-html="row.employee"></td>
<td v-if="row.workDate == {{$date->addDay()->format($format)}}"></td>
<td v-html="row.hours"></td>
</tr>
</tbody>
</table>
</div>
@endsection
@section('loadjs')
<script>
new Vue({
el: "#app",
data: {
rows: [
{
employee: "Evan",
hours: "15",
workDate: "2021-08-31",
swipes: "4",
},
{
employee: "Kelly",
hours: "15",
workDate: "2021-08-31",
swipes: "4",
},
{
employee: "Evan",
hours: "15",
workDate: "2021-09-01",
swipes: "4",
},
{
employee: "Stan",
hours: "25",
workDate: "2021-08-31",
swipes: "4",
},
{
employee: "Kelly",
hours: "82",
workDate: "2021-09-02",
swipes: "2",
},
{
employee: "Stan",
hours: "40",
workDate: "2021-09-01",
swipes: "5",
}
]
},
methods: {
},
computed: {
compRows() {
const grouped = this.rows.reduce((r, o) => {
r[o.employee] ??= {};
r[o.employee][o.workDate] ??= {employee: o.employee, workDate: o.workDate, swipes: 0, hours: 0};
r[o.employee][o.workDate].swipes += +o.swipes;
r[o.employee][o.workDate].hours += +o.hours;
return r;
}, {});
return Object.values(grouped).map(o => Object.values(o)).flat();
}
}
});
</script>