62 lines
1.8 KiB
Vue
62 lines
1.8 KiB
Vue
<script setup>
|
|
import { storeToRefs } from 'pinia'
|
|
import { useWardStore } from '@/stores/ward'
|
|
import Button from '@/components/ui/Button.vue'
|
|
|
|
const emit = defineEmits(['export-handoff'])
|
|
|
|
const wardStore = useWardStore()
|
|
const { searchInput, filters, hasActiveFilters, encounters } = storeToRefs(wardStore)
|
|
|
|
const filterOptions = [
|
|
{ key: 'hasAlerts', label: 'Has alerts' },
|
|
{ key: 'sepsisActive', label: 'Sepsis active' },
|
|
{ key: 'critical', label: 'Critical (NEWS2 ≥ 7)' },
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mb-4 space-y-4 rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900">
|
|
<label class="block">
|
|
<span class="sr-only">Search patients</span>
|
|
<input
|
|
:value="searchInput"
|
|
type="search"
|
|
placeholder="Search by name or MRN…"
|
|
class="w-full rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
|
|
@input="wardStore.setSearchInput($event.target.value)"
|
|
>
|
|
</label>
|
|
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<Button
|
|
v-for="option in filterOptions"
|
|
:key="option.key"
|
|
size="sm"
|
|
:variant="filters[option.key] ? 'primary' : 'secondary'"
|
|
@click="wardStore.toggleFilter(option.key)"
|
|
>
|
|
{{ option.label }}
|
|
</Button>
|
|
|
|
<Button
|
|
v-if="hasActiveFilters"
|
|
size="sm"
|
|
variant="ghost"
|
|
@click="wardStore.clearFilters()"
|
|
>
|
|
Clear filters
|
|
</Button>
|
|
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
:disabled="encounters.length === 0"
|
|
@click="emit('export-handoff')"
|
|
>
|
|
Export Handoff Report
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</template>
|