38 lines
1.8 KiB
JavaScript
38 lines
1.8 KiB
JavaScript
import { useQuasar } from 'https://cdn.jsdelivr.net/npm/quasar@2.16.0/dist/quasar.umd.prod.js';
|
|
import { usePlannerState } from '../../services/planner-state-service.js';
|
|
|
|
export default {
|
|
name: 'PlannerHeader',
|
|
emits: ['toggle-left-drawer'],
|
|
setup(props, { emit }) {
|
|
const $q = useQuasar();
|
|
const { state, methods } = usePlannerState();
|
|
|
|
return {
|
|
state,
|
|
clearHighlights: methods.clearHighlights,
|
|
toggleLeftDrawer: () => emit('toggle-left-drawer'),
|
|
$q,
|
|
};
|
|
},
|
|
template: `
|
|
<q-header class="planner-header-toolbar bg-white text-grey-9">
|
|
<q-toolbar class="q-py-sm">
|
|
<q-btn flat round dense icon="menu" color="grey-7" @click="toggleLeftDrawer"></q-btn>
|
|
<div class="row items-center q-ml-md">
|
|
<div class="bg-blue-grey-1 q-pa-xs rounded-borders q-mr-sm">
|
|
<q-icon name="event_note" color="blue-grey-8" size="24px"></q-icon>
|
|
</div>
|
|
<q-toolbar-title class="text-weight-bold text-subtitle1 text-indigo-10 ellipsis" style="max-width: 150px;">Hotline Planner</q-toolbar-title>
|
|
</div>
|
|
<q-space></q-space>
|
|
<div class="row items-center q-gutter-sm">
|
|
<q-btn v-if="state.highlightedRowId || state.highlightedDateStr" outline rounded dense color="amber-9" icon="highlight_off" :label="$q.screen.gt.xs ? 'Clear Highlights' : ''" class="q-mr-xs bg-amber-1" @click="clearHighlights"><q-tooltip v-if="!$q.screen.gt.xs">Clear Highlights</q-tooltip></q-btn>
|
|
<planner-users-online />
|
|
<q-separator vertical inset class="gt-xs q-mx-sm"></q-separator>
|
|
<q-btn flat round dense icon="notifications" color="grey-6" class="gt-xs"></q-btn>
|
|
<q-avatar size="32px" class="cursor-pointer q-ml-xs"><img src="https://i.pravatar.cc/150?u=me"></q-avatar>
|
|
</div>
|
|
</q-toolbar>
|
|
</q-header>`
|
|
}; |