Vitals segment UI updates

public/css/style.css

@@ -1443,9 +1443,11 @@ table.table-edit-sheet tbody tr td>input.w-auto-input {
     width: auto !important;
 }
 table.table-edit-sheet tbody tr td>input:focus,
-table.table-edit-sheet tbody tr td>select:focus {
-    background: #fff;
-    outline: 3px solid #4b88a633;
+table.table-edit-sheet tbody tr td>select:focus,
+table.table-edit-sheet tbody tr td input.edit:focus {
+    /*outline: 3px solid #4b88a633;*/
+    /*border: 1px inset #4b88a633 !important;*/
+    background: aliceblue !important;
 }
 table.table-edit-sheet tbody tr [contenteditable] {
     background: #fff;

resources/views/app/patient/segment-templates/vitals/edit.blade.php

@@ -8,6 +8,7 @@ $endPoint = 'upsertNoteSingleton';
 $vitalLabels = [
     "heightInInches" => "Ht. (in.)",
     "weightPounds" => "Wt. (lbs.)",
+    "bmi" => "BMI (kg/m²)",
     "temperatureF" => "Temp. (F)",
     "systolicBP" => "SBP",
     "diastolicBP" => "DBP",
@@ -15,7 +16,6 @@ $vitalLabels = [
     "respirationRatePerMinute" => "Resp.",
     "pulseOx" => "Pulse Ox.",
     "smokingStatus" => "Smoking Status",
-    "bmi" => "BMI (kg/m²)",
 ];
 
 $point = Point::where('added_in_segment_id', $segment->id)->where('category', $category)->orderBy('id', 'DESC')->first();
@@ -29,6 +29,7 @@ if(!$contentData) {
         "date" => $note->effective_dateest,
         "heightInInches" => '',
         "weightPounds" => '',
+        "bmi" => '',
         "temperatureF" => '',
         "systolicBP" => '',
         "diastolicBP" => '',
@@ -36,7 +37,6 @@ if(!$contentData) {
         "respirationRatePerMinute" => '',
         "pulseOx" => '',
         "smokingStatus" => '',
-        "bmi" => '',
     ];
 }else {
     if(!isset($contentData['date'])) $contentData['date'] = $note->effective_dateest;
@@ -114,30 +114,33 @@ $copyTriggerAdded = [];
                         </td>
                         <td class="position-relative">
                             @if($k === "bmi")
-                                <input type="text" readonly bmi
-                                       class="form-control form-control-sm vitals-title border-bottom border-top-0 border-left-0 border-right-0"
-                                       data-name="bmi" value="{{$contentData['bmi']}}">
-                                @if(isset($contentData['bmi']) && $contentData['bmi'] != "" )
-                                    <p class="py-1 m-0 px-2 font-weight-bold bg-white">
-                                        <?php $bmi = $contentData['bmi']; ?>
-                                        @if($bmi < 18.5)
-                                            <span class="text-sm text-warning-mellow" v-if="+bmi < 18.5">Underweight</span>
-                                        @endif
-                                        @if($bmi >= 18.5 && $bmi < 25)
-                                            <span class="text-sm text-success" v-if="+bmi >= 18.5 && +bmi < 25">Healthy Weight</span>
-                                        @endif
-                                        @if($bmi >= 25 && $bmi > 30)
-                                            <span class="text-sm text-warning-mellow" v-if="+bmi >= 25 && +bmi < 30">Overweight</span>
-                                        @endif
-                                        @if($bmi >= 30)
-                                            <span class="text-sm text-warning-mellow" v-if="+bmi >= 30">Obese</span>
+                                <div class="d-flex align-items-stretch">
+                                    <input type="text" readonly bmi
+                                           class="form-control form-control-sm vitals-title border-bottom-0 border-top-0 border-left-0 border-right width-70px"
+                                           data-name="bmi" value="{{$contentData['bmi']}}">
+                                    <div class="flex-grow-1 py-1 m-0 px-2 font-weight-bold bg-light">
+                                        @if(isset($contentData['bmi']) && $contentData['bmi'] != "" )
+                                            <?php $bmi = $contentData['bmi']; ?>
+                                            @if($bmi < 18.5)
+                                                <span class="text-sm text-warning-mellow" v-if="+bmi < 18.5">Underweight</span>
+                                            @endif
+                                            @if($bmi >= 18.5 && $bmi < 25)
+                                                <span class="text-sm text-success" v-if="+bmi >= 18.5 && +bmi < 25">Healthy Weight</span>
+                                            @endif
+                                            @if($bmi >= 25 && $bmi > 30)
+                                                <span class="text-sm text-warning-mellow" v-if="+bmi >= 25 && +bmi < 30">Overweight</span>
+                                            @endif
+                                            @if($bmi >= 30)
+                                                <span class="text-sm text-warning-mellow" v-if="+bmi >= 30">Obese</span>
+                                            @endif
                                         @endif
-                                    </p>
-                                @endif
+                                    </div>
+                                </div>
                             @elseif($k === "smokingStatus")
                                 <input type="text"
                                        class="form-control form-control-sm border-0"
                                        data-name="smokingStatus"
+                                       placeholder="{{$v}}"
                                        data-option-list="smokingStatus" value="{{$contentData['smokingStatus']}}">
                                 <div id="smoking-status-options" class="data-option-list">
                                     <div>Current</div>
@@ -145,13 +148,21 @@ $copyTriggerAdded = [];
                                     <div>Never</div>
                                 </div>
                             @elseif($k === 'systolicBP')
-                                <div class="d-flex align-items-stretch">
-                                    <input type="text" class="form-control form-control-sm min-width-unset w-auto-input flex-grow-1 border-bottom-0 border-right" data-name="systolicBP" systolicBP value="{{$contentData['systolicBP']}}">
-                                    <input type="text" class="form-control form-control-sm min-width-unset w-auto-input flex-grow-1 border-bottom-0" data-name="diastolicBP" diastolicBP value="{{$contentData['diastolicBP']}}">
+                                <div class="d-flex align-items-center bg-white">
+                                    <input type="text" class="form-control form-control-sm min-width-unset w-auto-input width-70px border-0 edit"
+                                           data-name="systolicBP" systolicBP
+                                           value="{{$contentData['systolicBP']}}" placeholder="Systolic">
+                                    <span class="px-2 text-secondary bg-white">/</span>
+                                    <input type="text" class="form-control form-control-sm min-width-unset w-auto-input width-70px border-0 edit"
+                                           data-name="diastolicBP" diastolicBP
+                                           value="{{$contentData['diastolicBP']}}" placeholder="Diastolic">
                                 </div>
                             @else
-                                <input type="text" class="form-control form-control-sm border-0" data-name="{{$k}}" {{$k}} value="{{$contentData[$k]}}"
-                                  @if($k == 'heightInInches' || $k == 'weightPounds') refresh-bmi @endif>
+                                <input type="text"
+                                       class="form-control form-control-sm border-0" data-name="{{$k}}" {{$k}}
+                                       value="{{$contentData[$k]}}"
+                                       placeholder="{{$v}}"
+                                       @if($k == 'heightInInches' || $k == 'weightPounds') refresh-bmi @endif>
                             @endif
                         </td>
                         @if(!$previousData || !count($previousData))

resources/views/app/patient/segment-templates/vitals/summary.blade.php

@@ -8,6 +8,7 @@ $endPoint = 'upsertNoteSingleton';
 $vitalLabels = [
     "heightInInches" => "Ht. (in.)",
     "weightPounds" => "Wt. (lbs.)",
+    "bmi" => "BMI (kg/m²)",
     "temperatureF" => "Temp. (F)",
     "systolicBP" => "SBP",
     "diastolicBP" => "DBP",
@@ -15,7 +16,6 @@ $vitalLabels = [
     "respirationRatePerMinute" => "Resp.",
     "pulseOx" => "Pulse Ox.",
     "smokingStatus" => "Smoking Status",
-    "bmi" => "BMI (kg/m²)",
 ];
 
 $point = Point::where('added_in_segment_id', $segment->id)->where('category', $category)->orderBy('id', 'DESC')->first();
@@ -29,6 +29,7 @@ if(!$contentData) {
         "date" => $note->effective_dateest,
         "heightInInches" => '',
         "weightPounds" => '',
+        "bmi" => '',
         "temperatureF" => '',
         "systolicBP" => '',
         "diastolicBP" => '',
@@ -36,7 +37,6 @@ if(!$contentData) {
         "respirationRatePerMinute" => '',
         "pulseOx" => '',
         "smokingStatus" => '',
-        "bmi" => '',
     ];
 }else {
     if(!isset($contentData['date'])) $contentData['date'] = $note->effective_dateest;