Trent/vigilcare-records
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix responsiveness
CI / backend (push) Successful in 6m14s
Details
CI / frontend (push) Failing after 59s
Details

Browse Source
This commit is contained in:
Trent
2026-08-12 05:45:12 +08:00
parent 00f832aa73
commit 4c5aafe591
27 changed files with 414 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vigilcare-records-web/src/components/ObservationRow.vue
+31 -24
View File
@@ -1,12 +1,15 @@
<template>
<div class="flex flex-col lg:flex-row lg:items-start gap-4 p-4 bg-gray-50 rounded-md">
<div class="flex-1 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-4">
<div
class="flex flex-col xl:flex-row xl:items-start gap-3 p-3 rounded-input border border-line bg-canvas"
data-testid="observation-row"
>
<div class="flex-1 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-3 min-w-0">
<div>
<label class="block text-xs text-gray-500">Code</label>
<label class="workstation-field-label">Code</label>
<select
:value="observation.observationCode"
@change="update('observationCode', ($event.target as HTMLSelectElement).value)"
class="form-input text-sm"
class="form-input text-sm py-1.5"
:disabled="readonly"
>
<option value="">Select...</option>
@@ -23,7 +26,7 @@
</select>
</div>
<div>
<label class="flex items-center gap-2 text-xs text-gray-500">
<label class="workstation-field-label">
Value
<OcrConfidenceBadge :label="ocrLabel" :level="ocrLevel" />
</label>
@@ -32,59 +35,63 @@
@change="update('value', parseFloat(($event.target as HTMLInputElement).value))"
type="number"
step="0.01"
:class="['form-input', 'text-sm', valueInputClass]"
:class="['form-input', 'text-sm', 'py-1.5', valueInputClass]"
:disabled="readonly"
/>
</div>
<div>
<label class="block text-xs text-gray-500">Unit</label>
<label class="workstation-field-label">Unit</label>
<input
:value="observation.unit"
@change="update('unit', ($event.target as HTMLInputElement).value)"
type="text"
class="form-input text-sm"
class="form-input text-sm py-1.5"
:disabled="readonly"
/>
</div>
<div>
<label class="block text-xs text-gray-500">Recorded At</label>
<label class="workstation-field-label">Recorded At</label>
<input
:value="observation.recordedAt?.substring(0, 16)"
@change="update('recordedAt', ($event.target as HTMLInputElement).value)"
type="datetime-local"
class="form-input text-sm"
class="form-input text-sm py-1.5"
:disabled="readonly"
/>
</div>
<div>
<label class="block text-xs text-gray-500">Note</label>
<label class="workstation-field-label">Note</label>
<input
:value="observation.note"
@change="update('note', ($event.target as HTMLInputElement).value)"
type="text"
class="form-input text-sm"
class="form-input text-sm py-1.5"
placeholder="Optional"
:disabled="readonly"
/>
</div>
</div>
<!-- Verification checkbox (only in verification mode) -->
<div v-if="showVerified" class="flex items-center lg:mt-8">
<input
type="checkbox"
:checked="verified"
@change="$emit('verify', observation.id, ($event.target as HTMLInputElement).checked)"
class="w-4 h-4 text-clinical-safe rounded"
/>
<span class="ml-2 text-xs text-gray-500">OK</span>
<div
v-if="showVerified"
class="flex items-center shrink-0 xl:mt-7"
>
<label class="inline-flex items-center gap-2 cursor-pointer">
<input
type="checkbox"
:checked="verified"
@change="$emit('verify', observation.id, ($event.target as HTMLInputElement).checked)"
class="w-4 h-4 text-clinical-safe rounded"
/>
<span class="text-xs text-ink-secondary">OK</span>
</label>
</div>
<!-- Delete button (entry mode only) -->
<button
v-if="!readonly && !showVerified"
type="button"
@click="$emit('delete', observation.id)"
class="lg:mt-8 text-clinical-danger hover:text-red-800 text-sm"
class="self-start xl:mt-7 text-clinical-danger hover:text-clinical-critical text-sm font-medium"
>
Remove
</button>
@@ -115,4 +122,4 @@ const emit = defineEmits<{
function update(field: string, value: unknown) {
emit('update', field, value)
}
</script>
</script>