95 lines
3.4 KiB
Vue
95 lines
3.4 KiB
Vue
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { storeToRefs } from 'pinia'
|
|
import { useWardStore } from '@/stores/ward'
|
|
import { useDarkMode } from '@/composables/useDarkMode'
|
|
|
|
const route = useRoute()
|
|
const wardStore = useWardStore()
|
|
const { department } = storeToRefs(wardStore)
|
|
const { darkMode, toggle } = useDarkMode()
|
|
|
|
const pageTitle = computed(() => route.meta.title ?? 'VigilCare')
|
|
|
|
const departments = [
|
|
{ value: '', label: 'All departments' },
|
|
{ value: 'ICU', label: 'ICU' },
|
|
{ value: 'GENERAL_MEDICINE', label: 'General Medicine' },
|
|
{ value: 'SURGERY', label: 'Surgery' },
|
|
]
|
|
|
|
function onDepartmentChange(event) {
|
|
const value = event.target.value || null
|
|
wardStore.setDepartment(value)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<header class="sticky top-0 z-30 border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
|
|
<div class="flex h-16 items-center gap-4 px-4 lg:px-8">
|
|
<div class="min-w-0 flex-1">
|
|
<p class="truncate text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
|
VigilCare Clinical
|
|
</p>
|
|
<h1 class="truncate text-lg font-semibold text-gray-900 dark:text-gray-100">
|
|
{{ pageTitle }}
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="flex shrink-0 items-center gap-2 sm:gap-4">
|
|
<label v-if="route.name === 'WardDashboard'" class="hidden sm:block">
|
|
<span class="sr-only">Department filter</span>
|
|
<select
|
|
:value="department ?? ''"
|
|
class="rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200"
|
|
@change="onDepartmentChange"
|
|
>
|
|
<option v-for="dept in departments" :key="dept.value" :value="dept.value">
|
|
{{ dept.label }}
|
|
</option>
|
|
</select>
|
|
</label>
|
|
|
|
<button
|
|
type="button"
|
|
class="flex h-8 w-8 items-center justify-center rounded-lg text-gray-600 transition duration-200 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:text-gray-300 dark:hover:bg-gray-800"
|
|
:aria-label="darkMode ? 'Switch to light mode' : 'Switch to dark mode'"
|
|
@click="toggle"
|
|
>
|
|
<svg
|
|
v-if="darkMode"
|
|
class="h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
v-else
|
|
class="h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|