76 lines
3.9 KiB
JavaScript
76 lines
3.9 KiB
JavaScript
window.GridComponent = {
|
|
props: ['dateRange', 'agents'],
|
|
emits: ['select-cell'],
|
|
template: `
|
|
<div class="planner-grid-container">
|
|
<table class="grid-table">
|
|
<thead>
|
|
<!-- ExNet / Target Header Row -->
|
|
<tr>
|
|
<th class="grid-header-cell col-sticky-left bg-white" style="z-index: 31;">
|
|
<div class="text-caption text-grey-6">Targets</div>
|
|
</th>
|
|
<th v-for="day in dateRange" :key="'target-'+day.dayNum"
|
|
class="grid-header-cell header-exnet text-center">
|
|
{{ day.exNetTarget }}
|
|
</th>
|
|
</tr>
|
|
|
|
<!-- Date Header Row -->
|
|
<tr>
|
|
<th class="grid-header-cell col-sticky-left">
|
|
<div class="row items-center justify-between">
|
|
<span>Agent</span>
|
|
<q-icon name="filter_list" class="cursor-pointer text-grey-5" size="xs"></q-icon>
|
|
</div>
|
|
</th>
|
|
<th v-for="day in dateRange" :key="'date-'+day.dayNum"
|
|
class="grid-header-cell text-center"
|
|
:class="{'bg-blue-1': day.isWeekend}">
|
|
<div class="column items-center">
|
|
<span class="text-xs text-uppercase text-grey-6">{{ day.dayName }}</span>
|
|
<span class="text-h6 text-primary" style="line-height: 1.1;">{{ day.dayNum }}</span>
|
|
</div>
|
|
<!-- Mock Traffic Light -->
|
|
<div class="row justify-center q-mt-xs">
|
|
<div class="status-indicator status-green" v-if="!day.isWeekend"></div>
|
|
<div class="status-indicator status-yellow" v-else></div>
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="agent in agents" :key="agent.id">
|
|
<!-- Sticky Agent Cell -->
|
|
<td class="grid-cell col-sticky-left">
|
|
<div class="row items-center no-wrap">
|
|
<q-avatar size="28px" class="q-mr-sm">
|
|
<img :src="agent.avatar">
|
|
</q-avatar>
|
|
<div class="column" style="overflow: hidden;">
|
|
<div class="text-weight-medium text-no-wrap ellipsis" style="width: 140px;">{{ agent.name }}</div>
|
|
<div class="text-caption text-grey-5 text-no-wrap ellipsis">{{ agent.role }}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
<!-- Shift Cells -->
|
|
<td v-for="day in dateRange" :key="agent.id + '-' + day.dayNum"
|
|
class="grid-cell text-center cursor-pointer"
|
|
@click="$emit('select-cell', { agent, day })">
|
|
|
|
<!-- Mock Shift Data -->
|
|
<div v-if="Math.random() > 0.7" class="bg-blue-1 text-blue-9 text-caption q-pa-xs rounded-borders" style="font-size: 10px;">
|
|
08:00 - 16:00
|
|
</div>
|
|
<div v-else-if="Math.random() > 0.8" class="text-grey-4 text-center">
|
|
<q-icon name="add" size="xs"></q-icon>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
`
|
|
};
|