114 lines
4.3 KiB
JavaScript
114 lines
4.3 KiB
JavaScript
const PlannerSettings = {
|
|
template: `
|
|
<q-drawer v-model="isOpen" side="left" bordered :width="280">
|
|
<q-scroll-area class="fit">
|
|
<q-list padding>
|
|
<q-item-label header class="text-weight-bold text-uppercase text-caption text-indigo-9">Planner Configurations</q-item-label>
|
|
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption class="q-mb-xs">Viewing Scope</q-item-label>
|
|
<q-select
|
|
v-model="settings.viewScope"
|
|
:options="[4, 8]"
|
|
dense
|
|
outlined
|
|
emit-value
|
|
map-options
|
|
suffix=" Weeks"
|
|
></q-select>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption class="q-mb-xs">Filter by Team</q-item-label>
|
|
<q-select
|
|
v-model="settings.activeDept"
|
|
:options="deptOptions"
|
|
dense
|
|
outlined
|
|
></q-select>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-separator class="q-my-md"></q-separator>
|
|
|
|
<q-item tag="label" v-ripple>
|
|
<q-item-section>
|
|
<q-item-label>Compact View</q-item-label>
|
|
<q-item-label caption>Reduce row height for high density</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-toggle v-model="settings.isCompact" color="indigo"></q-toggle>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item tag="label" v-ripple>
|
|
<q-item-section>
|
|
<q-item-label>Weekends are Working Days</q-item-label>
|
|
<q-item-label caption>Allow shift entry on Sat/Sun</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-toggle v-model="settings.weekendsAreWorkingDays" color="indigo"></q-toggle>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item tag="label" v-ripple>
|
|
<q-item-section>
|
|
<q-item-label>Start Week on Monday</q-item-label>
|
|
<q-item-label caption>Toggle Mon/Sun start</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-btn-toggle
|
|
v-model="settings.weekStart"
|
|
no-caps
|
|
rounded
|
|
unelevated
|
|
toggle-color="indigo"
|
|
color="grey-3"
|
|
text-color="indigo"
|
|
size="sm"
|
|
:options="[
|
|
{label: 'Mon', value: 1},
|
|
{label: 'Sun', value: 0}
|
|
]"
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item clickable v-ripple @click="resetToToday">
|
|
<q-item-section avatar>
|
|
<q-icon name="today"></q-icon>
|
|
</q-item-section>
|
|
<q-item-section>Reset to Today</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-scroll-area>
|
|
</q-drawer>
|
|
`,
|
|
setup() {
|
|
const { computed } = Vue;
|
|
const settings = store.viewSettings;
|
|
|
|
const isOpen = computed({
|
|
get: () => store.viewSettings.leftDrawerOpen,
|
|
set: (val) => store.viewSettings.leftDrawerOpen = val
|
|
});
|
|
|
|
const resetToToday = () => {
|
|
store.setStartDate(new Date());
|
|
store.viewSettings.leftDrawerOpen = false;
|
|
};
|
|
|
|
const deptOptions = ['All', ...store.consts.DEPARTMENTS];
|
|
|
|
return {
|
|
isOpen,
|
|
settings,
|
|
resetToToday,
|
|
deptOptions
|
|
}
|
|
}
|
|
};
|