- Added Vital view for individual person

- Add measurement modal for Vital view autopopulates vital
- User can pan vital graph

CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.1.6] - 2023-09-20
+
+### Added
+- Added Vital view for individual person
+- Add measurement modal for Vital view autopopulates vital
+- Person can pan vital graph
+
+### Changed
+
+### Fixed
+
+
 ## [0.1.5] - 2023-09-19
 
 ### Added

package.json

@@ -1,7 +1,7 @@
 {
   "name": "healthrecord",
   "private": true,
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,7 +13,9 @@
     "@heroicons/vue": "^2.0.18",
     "@tailwindcss/forms": "^0.5.6",
     "chart.js": "^4.4.0",
+    "chartjs-adapter-dayjs-4": "^1.0.4",
     "chartjs-plugin-annotation": "^3.0.1",
+    "chartjs-plugin-zoom": "^2.0.1",
     "dayjs": "^1.11.9",
     "file-saver": "^2.0.5",
     "pluralize": "^8.0.0",

src/components/Dashboard/Measurements/Form.vue

@@ -13,7 +13,7 @@ const emit  = defineEmits(['submit']);
 const value     = ref(props.value || '');
 const date      = ref(dayjs(props.date).format('YYYY-MM-DD') || '');
 const personId  = ref(props.personId || route.params.personId || '');
-const vitalId   = ref(props.vitalId || '');
+const vitalId   = ref(props.vitalId || route.params.vitalId || '');
 
 const isFormComplete = computed(() => {
   return value.value.length > 0 

src/components/Dashboard/Measurements/MeasurementListItem.vue

@@ -5,9 +5,12 @@ import { EllipsisHorizontalIcon, PencilIcon, TrashIcon, CalendarIcon, UserIcon,
 import { vitals } from '../../../store/vitals';
 import { people } from '../../../store/people';
 import { computed } from 'vue';
+import { useRoute } from 'vue-router';
 
 const props = defineProps(['measurement']);
 
+const route = useRoute();
+
 const vital = computed(() => {
   return vitals.value.find(vital => vital.id === props.measurement.vitalId);
 });
@@ -16,9 +19,31 @@ const person = computed(() => {
   return people.value.find(person => person.id === props.measurement.personId);
 });
 
-const isHigh = computed(() => {
+const editRoute = () => {
+  if (route.params.personId && route.params.vitalId) {
+    return {
+      name: 'PersonVitalMeasurementEdit',
+      params: {
+        measurementId: props.measurement.id
+      }
+    }
+  } else if (route.params.personId) {
+    return {
+      name: 'PersonMeasurementEdit',
+      params: {
+        measurementId: props.measurement.id
+      }
+    }
+  } else {
+    return {
+      name: 'MeasurementEdit',
+      params: {
+        measurementId: props.measurement.id
+      }
+    }
+  }
+}
 
-});
 </script>
 
 <template>
@@ -46,7 +71,7 @@ const isHigh = computed(() => {
         <MenuItems @click.stop class="menu-items">
           <div class="p-1">
             <MenuItem v-slot="{ close }">
-              <button class="menu-item group/menu-item" @click="close(); $router.push({ name: 'MeasurementEdit', params: { measurementId: measurement.id }});">
+              <button class="menu-item group/menu-item" @click="close(); $router.push(editRoute());">
                 <PencilIcon class="group-hover/menu-item:text-indigo-200" />
                 Edit
               </button>

src/components/Dashboard/People/Person.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { LightBulbIcon } from '@heroicons/vue/24/outline';
+import { LightBulbIcon, ChevronRightIcon } from '@heroicons/vue/24/outline';
 import { PlusIcon } from '@heroicons/vue/20/solid';
 import VitalChart from './VitalChart.vue';
 import { computed } from 'vue';
@@ -47,11 +47,14 @@ const vitalMeasurements = (vitalId) => {
       </div>
     </div>
     <div>
-      <div v-if="trackedVitals.length > 0" class="grid md:grid-cols-2 gap-3">
-        <div v-for="vital in trackedVitals" :key="vital.id" class="group bg-white p-3 rounded-md cursor-pointer hover:shadow">
-          <h3 class="font-semibold group-hover:text-indigo-600 mb-1">{{ vital.name }}</h3>
+      <div v-if="trackedVitals.length > 0" class="grid grid-cols-2 gap-3">
+        <div v-for="vital in trackedVitals" :key="vital.id" class="group bg-white p-3 rounded-md cursor-pointer hover:shadow" @click="$router.push({ name: 'PersonVital', params: { vitalId: vital.id } })">
+          <header class="grid grid-cols-[auto_min-content]">
+            <h3 class="font-semibold group-hover:text-indigo-600 mb-1">{{ vital.name }}</h3>
+            <ChevronRightIcon class="h-5 w-5 self-start group-hover:stroke-indigo-600" />
+          </header>
           <p class="text-gray-500 text-sm">{{ pluralize('measurement', vitalMeasurements(vital.id).length, true) }}</p>
-          <VitalChart class="mt-3" :vital="vital" :measurements="vitalMeasurements(vital.id)" />
+          <VitalChart class="mt-3" :vital="vital" :measurements="vitalMeasurements(vital.id)" :small="true" />
         </div>
       </div>
       <div v-else class="border border-amber-200 p-4 rounded-lg text-amber-500 bg-amber-100 text-sm">
@@ -63,7 +66,7 @@ const vitalMeasurements = (vitalId) => {
       </div>
     </div>
     <div v-if="measurements.length > 0" class="pb-28 pt-9 md:pb-0 grid gap-3">
-      <h3 class="z-10 text-xl font-bold sticky top-14 pb-3 bg-gradient-to-b from-gray-100 from-70%">Measurements</h3>
+      <h3 class="z-10 text-xl font-bold sticky top-8 pb-1 bg-gradient-to-b from-gray-100 from-70%">Measurements</h3>
       <MeasurementListItem v-for="measurement in measurements" :key="measurement.id" :measurement="measurement" />
     </div>
     <RouterView name="modal" />

src/components/Dashboard/People/Vital.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { vitals } from '../../../store/vitals';
+import { measurements } from '../../../store/measurements';
+import { people } from '../../../store/people';
+import { useRoute } from 'vue-router';
+import VitalChart from './VitalChart.vue';
+import { computed } from 'vue';
+import pluralize from 'pluralize';
+import MeasurementListItem from '../Measurements/MeasurementListItem.vue';
+import { PlusIcon } from '@heroicons/vue/20/solid';
+import { ChevronLeftIcon } from '@heroicons/vue/24/outline';
+
+const vitalId   = useRoute().params.vitalId;
+const personId  = useRoute().params.personId;
+
+const person = computed(() => {
+  return people.value.find(person => person.id === personId);
+});
+
+const vital = computed(() => {
+  return vitals.value.find(vital => vital.id === vitalId);
+});
+
+const vitalMeasurements = computed(() => {
+  return measurements.value.filter(measurement => {
+    return measurement.personId === personId && measurement.vitalId === vitalId;
+  });
+});
+</script>
+
+<template>
+  <div>
+    <div class="z-10 sticky top-0 pt-0 mt-0 pb-5 grid grid-flow-col items-start bg-gradient-to-b from-gray-100 from-90%">
+      <header>
+        <RouterLink class="text-sm text-gray-500" :to="{ name: 'Person', params: { personId }}">
+          <ChevronLeftIcon class="w-4 h-4 inline -mt-0.5" /> {{ person.firstName + ' ' + person.lastName }}
+        </RouterLink>
+        <h2 class="text-2xl font-bold">{{ vital.name }}</h2>
+        <p class="text-sm text-gray-500">{{ pluralize('measurement', vitalMeasurements.length, true) }}.</p>
+      </header>
+      <div class="grid justify-end">
+        <RouterLink class="group rounded-full hover:bg-gray-200" :to="{ name: 'PersonVitalMeasurementAdd' }">
+          <PlusIcon class="group-hover:text-indigo-600 h-10 w-10" />
+        </RouterLink>
+      </div>
+    </div>
+    <div class="bg-white rounded-xl p-4">
+      <VitalChart :vital="vital" :measurements="vitalMeasurements" />
+    </div>
+    <div class="pb-28 pt-9 md:pb-0 grid gap-3">
+      <h3 class="z-10 text-xl font-bold sticky top-14 pb-3 bg-gradient-to-b from-gray-100 from-70%">Measurements</h3>
+      <MeasurementListItem v-for="measurement in vitalMeasurements" :key="measurement.id" :measurement="measurement" />
+    </div>
+    <RouterView name="modal" />
+  </div>
+</template>