48 lines
1.8 KiB
JavaScript
48 lines
1.8 KiB
JavaScript
const { inject } = Vue;
|
|
|
|
export default {
|
|
name: 'AssignmentEditor',
|
|
setup() {
|
|
const appState = inject('appState');
|
|
return { ...appState };
|
|
},
|
|
template: `
|
|
<div class="assignment-editor-root">
|
|
<div class="assignment-editor-date-card q-mb-lg q-pa-md bg-blue-grey-1 rounded-borders">
|
|
<div class="row items-center justify-between no-wrap">
|
|
<div>
|
|
<div class="text-overline text-blue-grey-4">Shift Date</div>
|
|
<div class="text-subtitle1 text-weight-bold text-blue-grey-9">
|
|
{{ selectedDate.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' }) }}
|
|
</div>
|
|
</div>
|
|
<q-icon name="event" color="blue-grey-2" size="sm"></q-icon>
|
|
</div>
|
|
</div>
|
|
<div class="text-weight-bold q-mb-md">Standard Shifts</div>
|
|
<div class="row q-col-gutter-sm q-mb-xl">
|
|
<div v-for="s in shifts" :key="s.id" class="col-6">
|
|
<q-btn
|
|
:color="s.color"
|
|
:unelevated="currentAssignmentLabel === s.label"
|
|
:outline="currentAssignmentLabel !== s.label"
|
|
rounded
|
|
dense
|
|
no-caps
|
|
:label="s.label"
|
|
class="full-width q-py-sm"
|
|
@click="setPendingShift(s)"
|
|
></q-btn>
|
|
</div>
|
|
<div class="col-12">
|
|
<q-btn outline rounded dense color="red-4" label="Clear Assignment" class="full-width q-mt-sm" icon="delete_outline" @click="setPendingShift(null)"></q-btn>
|
|
</div>
|
|
</div>
|
|
<div class="text-weight-bold q-mb-sm text-grey-7">Cell Identifier</div>
|
|
<div class="assignment-editor-cell-id bg-grey-1 q-pa-sm rounded-borders">
|
|
#cell-{{selectedAgent.id}}-{{formatDateForId(selectedDate)}}
|
|
</div>
|
|
</div>
|
|
`
|
|
};
|