attempt on notes

resources/views/app/patient/note/section.blade.php

@@ -4,7 +4,7 @@ if ($latestSectionTS === 0 || $latestSectionTS < $sectionTS) {
     $latestSectionTS = $sectionTS;
 }
 ?>
-<div data-ts="{{$sectionTS}}" class="p-3 border-bottom note-section {{ $section->sectionTemplate->is_page_driven ? 'page-driven' : '' }}"
+<div data-ts="{{$sectionTS}}" class="p-3 border-bottom note-section {{ $section->sectionTemplate->is_page_driven ? '' : '' }}"
     data-section-uid="{{ $section->uid }}"
     data-section-template-uid="{{ $section->sectionTemplate->uid }}"
     data-section-template-name="{{ $section->sectionTemplate->internal_name }}">
@@ -12,7 +12,7 @@ if ($latestSectionTS === 0 || $latestSectionTS < $sectionTS) {
         @if(!isset($note) || (isset($note) && !$note->is_signed_by_hcp))
             <a class="font-weight-bold mb-2 d-flex align-items-center c-pointer">
                 {{$section->sectionTemplate->title}}
-                @if(!isset($guestAccessCode) && !$section->sectionTemplate->is_page_driven)
+                @if(!isset($guestAccessCode) )
                     <span class="d-none if-not-edit"><i class="fa fa-edit ml-2"></i></span>
                     <span class="d-none if-edit edit-trigger font-weight-normal ml-2">Collapse</span>
                     <span class="edit-trigger"></span>
@@ -26,14 +26,14 @@ if ($latestSectionTS === 0 || $latestSectionTS < $sectionTS) {
         <?php $sectionInternalName = $section->sectionTemplate->internal_name; ?>
 
         @if($sectionInternalName === "exam" || $sectionInternalName === "objective")
-        @include('app/patient/note/_templates-exam-index')
+            @include('app/patient/note/_templates-exam-index')
         @else
-        @include('app/patient/note/_templates-index')
+            @include('app/patient/note/_templates-index')
         @endif
 
         @if (!$section->sectionTemplate->is_page_driven)
             @if (file_exists(storage_path('sections/' . $sectionInternalName . '/actions.php'))) {
-            <?php include(storage_path('sections/' . $sectionInternalName . '/actions.php')); ?>
+                <?php include(storage_path('sections/' . $sectionInternalName . '/actions.php')); ?>
             @elseif (file_exists(storage_path('sections/' . $sectionInternalName . '/actions.blade.php')))
                 @include('sections/' . $sectionInternalName . '/actions')
             @endif
@@ -71,35 +71,36 @@ if ($latestSectionTS === 0 || $latestSectionTS < $sectionTS) {
                     Remove
                 </a>
                 @if($pro->pro_type === 'ADMIN' || true)
-                <a href="#" class="d-none if-edit ml-2 move-up-trigger" data-uid="{{$section->uid}}" title="Move Up">
-                    <i class="fa fa-arrow-up"></i>
-                </a>
-                <a href="#" class="d-none if-edit ml-2 move-down-trigger" data-uid="{{$section->uid}}" title="Move Down">
-                    <i class="fa fa-arrow-down"></i>
-                </a>
+                    <a href="#" class="d-none if-edit ml-2 move-up-trigger" data-uid="{{$section->uid}}" title="Move Up">
+                        <i class="fa fa-arrow-up"></i>
+                    </a>
+                    <a href="#" class="d-none if-edit ml-2 move-down-trigger" data-uid="{{$section->uid}}" title="Move Down">
+                        <i class="fa fa-arrow-down"></i>
+                    </a>
                 @endif
             </div>
         @endif
     </div>
+
     @if(!isset($guestAccessCode) || $section->guest_access_level == 'READ')
-    <div class="{{isset($guestAccessCode)?'':'d-none'}} if-not-edit  inset-comment summary-container">
-        <?php if ($section->sectionTemplate->is_page_driven): ?>
-            @include("app.patient.page-sections.{$sectionInternalName}.summary")
-        <?php else: ?>
-            {!! !empty($section->summary_html) ? $section->summary_html : '-' !!}
-        <?php endif; ?>
-    </div>
+        <div class="{{isset($guestAccessCode)?'':'d-none'}} if-not-edit  inset-comment summary-container">
+            <?php if ($section->sectionTemplate->is_page_driven): ?>
+                @include("app.patient.page-sections.{$sectionInternalName}.summary")
+            <?php else: ?>
+                {!! !empty($section->summary_html) ? $section->summary_html : '-' !!}
+            <?php endif; ?>
+        </div>
     @endif
 
     @if(!$section->sectionTemplate->is_page_driven && (!isset($guestAccessCode) || $section->guest_access_level == 'WRITE'))
-    <div class="{{isset($guestAccessCode)?'':'d-none'}} if-edit">
+        <div class="{{isset($guestAccessCode)?'':'d-none'}} if-edit">
 
         <?php
         // if page
-        if ($section->sectionTemplate->is_page_driven) {
-        $contentData = false;
+            if ($section->sectionTemplate->is_page_driven) {
+                $contentData = false;
         ?>
-        @include("app.patient.page-sections.{$sectionInternalName}.form")
+            @include("app.patient.page-sections.{$sectionInternalName}.form")
         <?php
         }
         // if canvas
@@ -133,8 +134,8 @@ if ($latestSectionTS === 0 || $latestSectionTS < $sectionTS) {
             }
         ?>
             <input type="hidden" name="data">
-            <div note-rte data-content="{{$contentData['value']}}" class="form-group mb-2 border-left border-right rte-holder"></div>
-        <?php
+                <div note-rte data-content="{{$contentData['value']}}" class="form-group mb-2 border-left border-right rte-holder"></div>
+            <?php
         }
         ?>
 
@@ -145,4 +146,13 @@ if ($latestSectionTS === 0 || $latestSectionTS < $sectionTS) {
         </div>
     </div>
     @endif
+
+    @if($section->sectionTemplate->is_page_driven && (!isset($guestAccessCode) || $section->guest_access_level == 'WRITE'))
+        <div class="{{isset($guestAccessCode)?'':'d-none'}} if-edit">
+
+
+            @include("app.patient.page-sections.{$sectionInternalName}.form")
+
+        </div>
+    @endif
 </div>

resources/views/app/patient/page-sections/cc/form.blade.php

@@ -0,0 +1,78 @@
+<?php
+
+use App\Models\Page;
+
+$page = Page::where('note_id', $note->id)->where('category', 'CHIEF_COMPLAINT')->first();
+
+
+$contentData = [
+    'value'=>''
+];
+
+if($page){
+    $contentData = json_decode($page->data, true);
+}
+?>
+<div id="ccSection">
+    <div class="form-group mb-2">
+        <input type="hidden" name="data" id="cc-data">
+        <div note-rte note-rte-ros data-content="{{isset($contentData['value'])?$contentData['value']:'' }}" class="form-group mb-2 border-left border-right rte-holder"></div>
+    </div>
+    <div class="form-group mb-2">
+        <button class="btn btn-sm btn-outline-primary" @click="save">Submit</button>
+    </div>
+</div>
+
+<script>
+    (function() {
+        function init() {
+            window.clientVitalsApp = new Vue({
+                el: '#ccSection',
+                data: {
+                    value: '',
+                },
+                mounted: function() {
+                    $(this.$el).closest('#ccSection').find('[name="data"]').val(this.value);
+                },
+                watch: {
+                    value: {
+                        handler: function(val, oldVal) {
+                            $(this.$el).closest('#ccSection').find('[name="data"]').val(this.value);
+                        },
+                        deep: true
+                    },
+                },
+                methods: {
+
+                    save: function(){
+                        console.log(this.value);
+                        showMask();
+                        console.log("DATA", this.value);
+
+                        var payload = {
+                            noteUid:  '{{$note->uid}}',
+                            parentPageUid: null,
+                            clientUid: '{{$patient->uid}}',
+                            category: 'CHIEF_COMPLAINT',
+                            key: null,
+                            data: $(this.$el).closest('#ccSection').find('[name="data"]').val()
+                        }
+                        console.log("PAYLOAD:  ", payload);
+                        $.post('/api/page/changeOrCreateNoteScoped', payload, _data => {
+                            if(!hasResponseError(_data)) {
+                                toastr.success('Medication updated!');
+                                closeStagPopup();
+                            }
+                        }, 'json');
+                        hideMask();
+                        fastReload();
+                        return false;
+
+                    }
+                }
+            });
+        }
+        addMCInitializer('client-cc', init, '#ccSection');
+    })();
+</script>
+

resources/views/app/patient/page-sections/cc/summary.php

@@ -0,0 +1,23 @@
+<?php
+
+use App\Models\Page;
+
+$page = Page::where('note_id', $note->id)->where('category', 'CHIEF_COMPLAINT')->first();
+
+$contentData = [
+    'value'=>''
+];
+if($page && $page->data){
+    $contentData = json_decode($page->data, true);
+}
+
+?>
+
+<?php if(!$page): ?>
+    <div>No CC data</div>
+<?php else: ?>
+    <div class="d-flex">
+        <div><?php echo $contentData['value'] ?></div>
+    </div>
+<?php endif; ?>
+

resources/views/app/patient/page-sections/rx/form.blade.php

@@ -0,0 +1,121 @@
+<?php
+
+use App\Models\Page;
+
+$medicationsAddedOnIntake = Page::where('client_id', $patient->id)
+    ->where('category', 'MEDICATION')
+    ->whereRaw("(is_active IS TRUE AND added_during_note_uid = ? AND added_reason_category = 'ADDED_ON_INTAKE') ",[$note->uid])
+    ->get();
+
+$medicationsRemovedOnIntake = Page::where('client_id', $patient->id)
+    ->where('category', 'MEDICATION')
+    ->whereRaw("(is_active IS FALSE AND deactivated_during_note_uid  = ? AND deactivation_reason_category = 'REMOVED_ON_INTAKE')", [$note->uid])
+    ->get();
+
+
+?>
+<div id="medicationSection">
+    <table>
+        <thead>
+        <tr>
+            <th>Medication</th>
+            <th></th>
+            <th></th>
+            <th></th>
+        </tr>
+        </thead>
+        @foreach($medicationsAddedOnIntake as $medOnIntake)
+        <tr>
+            <td>{{$medOnIntake->key }}</td>
+            <td>Dose</td>
+            <td>Route</td>
+            <td>Frequency</td>
+            <td>Description</td>
+            <td></td>
+        </tr>
+        @endforeach
+        <tr>
+            <td>
+                <input type="text" v-model="currentMed.name" placeholder="name">
+            </td>
+            <td>
+                <input type="text" v-model="currentMed.dose" placeholder="dose">
+            </td>
+            <td>
+                <input type="text" v-model="currentMed.route" placeholder="route">
+            </td>
+            <td>
+                <input type="text" v-model="currentMed.frequency" placeholder="frequency">
+            </td>
+            <td>
+                <input type="text" v-model="currentMed.description" placeholder="description">
+            </td>
+            <td>
+                <button class="btn btn-sm btn-outline-primary" @click="save">Submit</button>
+            </td>
+        </tr>
+    </table>
+</div>
+
+<script>
+    (function() {
+        function init() {
+            window.clientVitalsApp = new Vue({
+                el: '#medicationSection',
+                data: {
+                    value: '',
+                    currentMed: {
+                        name:'',
+                        dose:'',
+                        route:'',
+                        frequency:'',
+                        description:''
+                    }
+                },
+                mounted: function() {
+                    $(this.$el).closest('#medicationSection').find('[name="data"]').val(this.value);
+                },
+                watch: {
+                    value: {
+                        handler: function(val, oldVal) {
+                            $(this.$el).closest('#medicationSection').find('[name="data"]').val(this.value);
+                        },
+                        deep: true
+                    },
+                },
+                methods: {
+
+                    save: function(){
+                        console.log(this.value);
+                        showMask();
+                        console.log("DATA", this.value);
+                        this.currentMed.isActive = true;
+                        this.currentMed.addedReasonCategory = 'ADDED_ON_INTAKE'; // ADDED_BY_HCP_DURING_NOTE, ADDED_ON_INTAKE;
+                        this.currentMed.addedReasonCategoryMemo = 'added on intake';
+                        var payload = {
+                            noteUid:  '{{$note->uid}}',
+                            parentPageUid: null,
+                            clientUid: '{{$patient->uid}}',
+                            category: 'MEDICATION',
+                            key: this.currentMed.name,
+                            data: JSON.stringify(this.currentMed)
+                        }
+                        console.log("PAYLOAD:  ", payload);
+                        $.post('/api/page/changeOrCreateClientScoped', payload, _data => {
+                            if(!hasResponseError(_data)) {
+                                toastr.success('Medication updated!');
+                                closeStagPopup();
+                            }
+                        }, 'json');
+                        hideMask();
+                        fastReload();
+                        return false;
+
+                    }
+                }
+            });
+        }
+        addMCInitializer('client-medication', init, '#medicationSection');
+    })();
+</script>
+

resources/views/app/patient/page-sections/rx/summary.php

@@ -0,0 +1,44 @@
+<?php
+
+use App\Models\Page;
+
+$medicationsAddedOnIntake = Page::where('client_id', $patient->id)
+    ->where('category', 'MEDICATION')
+    ->whereRaw("(is_active IS TRUE AND added_during_note_uid = ? AND added_reason_category = 'ADDED_ON_INTAKE') ",[$note->uid])
+    ->get();
+
+$medicationsRemovedOnIntake = Page::where('client_id', $patient->id)
+    ->where('category', 'MEDICATION')
+    ->whereRaw("(is_active IS FALSE AND deactivated_during_note_uid  = ? AND deactivation_reason_category = 'REMOVED_ON_INTAKE')", [$note->uid])
+    ->get();
+
+?>
+
+<?php if(!count($medicationsAddedOnIntake)): ?>
+    <div>No medications</div>
+<?php else: ?>
+    <div class="d-flex">
+        <table>
+            <thead>
+            <tr>
+                <th>Medication</th>
+                <th>Dose</th>
+                <th>Route</th>
+                <th>Frequency</th>
+                <th></th>
+            </tr>
+            </thead>
+            <?php foreach($medicationsAddedOnIntake as $medOnIntake): ?>
+            <tr>
+                <td><?php echo $medOnIntake->key ?></td>
+                <td><?php echo $medOnIntake->data_dose ?></td>
+                <td><?php echo $medOnIntake->data_route ?></td>
+                <td><?php echo $medOnIntake->data_frequency ?></td>
+                <td></td>
+            </tr>
+            <?php endforeach; ?>
+
+        </table>
+    </div>
+<?php endif; ?>
+

resources/views/app/patient/page-sections/subjective/form.blade.php

@@ -0,0 +1,78 @@
+<?php
+
+use App\Models\Page;
+
+$page = Page::where('note_id', $note->id)->where('category', 'SUBJECTIVE_GENERAL')->first();
+
+
+$contentData = [
+    'value'=>''
+];
+
+if($page){
+    $contentData = json_decode($page->data, true);
+}
+?>
+<div id="subjectiveSection">
+    <div class="form-group mb-2">
+        <input type="hidden" name="data" id="subjective-data">
+        <div note-rte note-rte-ros data-content="{{isset($contentData['value'])?$contentData['value']:'' }}" class="form-group mb-2 border-left border-right rte-holder"></div>
+    </div>
+    <div class="form-group mb-2">
+        <button class="btn btn-sm btn-outline-primary" @click="save">Submit</button>
+    </div>
+</div>
+
+<script>
+    (function() {
+        function init() {
+            window.clientVitalsApp = new Vue({
+                el: '#subjectiveSection',
+                data: {
+                    value: '',
+                },
+                mounted: function() {
+                    $(this.$el).closest('#subjectiveSection').find('[name="data"]').val(this.value);
+                },
+                watch: {
+                    value: {
+                        handler: function(val, oldVal) {
+                            $(this.$el).closest('#subjectiveSection').find('[name="data"]').val(this.value);
+                        },
+                        deep: true
+                    },
+                },
+                methods: {
+
+                    save: function(){
+                        console.log(this.value);
+                        showMask();
+                        console.log("DATA", this.value);
+
+                        var payload = {
+                            noteUid:  '{{$note->uid}}',
+                            parentPageUid: null,
+                            clientUid: '{{$patient->uid}}',
+                            category: 'SUJECTIVE_GENERAL',
+                            key: null,
+                            data: $(this.$el).closest('#subjectiveSection').find('[name="data"]').val()
+                        }
+                        console.log("PAYLOAD:  ", payload);
+                        $.post('/api/page/changeOrCreateNoteScoped', payload, _data => {
+                            if(!hasResponseError(_data)) {
+                                toastr.success('Record updated!');
+                                closeStagPopup();
+                            }
+                        }, 'json');
+                        hideMask();
+                        fastReload();
+                        return false;
+
+                    }
+                }
+            });
+        }
+        addMCInitializer('client-subjective', init, '#subjectiveSection');
+    })();
+</script>
+

resources/views/app/patient/page-sections/subjective/summary.php

@@ -0,0 +1,23 @@
+<?php
+
+use App\Models\Page;
+
+$page = Page::where('note_id', $note->id)->where('category', 'SUBJECTIVE_GENERAL')->first();
+
+$contentData = [
+    'value'=>''
+];
+if($page && $page->data){
+    $contentData = json_decode($page->data, true);
+}
+
+?>
+
+<?php if(!$page): ?>
+    <div>No Subject data</div>
+<?php else: ?>
+    <div class="d-flex">
+        <div><?php echo $contentData['value'] ?></div>
+    </div>
+<?php endif; ?>
+

resources/views/app/patient/page-sections/vitals/default.php

@@ -0,0 +1,20 @@
+<?php
+
+
+use App\Models\Page;
+
+$page = Page::where('client_id', $patient->id)->where('category', 'VITALS')->first();
+
+$contentData = [];
+
+if($page){
+    $contentData = json_decode($page->data, true);
+}else{
+    if ($patient->canvas_data) {
+        $canvasData = json_decode($patient->canvas_data, true);
+        if (isset($canvasData["vitals"])) {
+            $contentData = $canvasData["vitals"];
+        }
+    }
+}
+

resources/views/app/patient/page-sections/vitals/form.blade.php

@@ -0,0 +1,264 @@
+<?php
+
+use App\Models\Page;
+
+$page = Page::where('note_id', $note->id)->where('category', 'VITALS')->first();
+
+$contentData = [];
+
+if($page){
+    $contentData = json_decode($page->data, true);
+}
+
+$vitalLabels = [
+    "heightInInches" => "Ht. (in.)",
+    "weightPounds" => "Wt. (lbs.)",
+    "temperatureF" => "Temp. (F)",
+    "systolicBP" => "SBP",
+    "diastolicBP" => "DBP",
+    "pulseRatePerMinute" => "Pulse",
+    "respirationRatePerMinute" => "Resp.",
+    "pulseOx" => "Pulse Ox.",
+    "smokingStatus" => "Smoking Status",
+    "bmi" => "BMI (kg/m²)",
+];
+if(!$contentData) {
+    $contentData = [
+        "heightInInches" => [
+            "label" => "Ht. (in.)",
+            "value" => "",
+            "date" => "",
+        ],
+        "weightPounds" => [
+            "label" => "Wt. (lbs.)",
+            "value" => "",
+            "date" => "",
+        ],
+        "temperatureF" => [
+            "label" => "Temp. (F)",
+            "value" => "",
+            "date" => "",
+        ],
+        "systolicBP" => [
+            "label" => "SBP",
+            "value" => "",
+            "date" => "",
+        ],
+        "diastolicBP" => [
+            "label" => "DBP",
+            "value" => "",
+            "date" => "",
+        ],
+        "pulseRatePerMinute" => [
+            "label" => "Pulse",
+            "value" => "",
+            "date" => "",
+        ],
+        "respirationRatePerMinute" => [
+            "label" => "Resp.",
+            "value" => "",
+            "date" => "",
+        ],
+        "pulseOx" => [
+            "label" => "Pulse Ox.",
+            "value" => "",
+            "date" => "",
+        ],
+        "smokingStatus" => [
+            "label" => "Smoking Status",
+            "value" => "",
+            "date" => "",
+        ],
+        "bmi" => [
+            "label" => "BMI (kg/m²)",
+            "value" => "",
+            "date" => "",
+        ],
+    ];
+}
+else {
+    // ensure $contentData has all the expected vitals and correct labels!
+    foreach ($vitalLabels as $k => $v) {
+        if(!isset($contentData[$k])) {
+            $contentData[$k] = [
+                "label" => $v,
+                "value" => "",
+                "date" => "",
+            ];
+        }
+    }
+}
+
+$formID = rand(0, 100000);
+?>
+<div id="vitalsSection">
+    <h3 class="stag-popup-title mb-2 border-bottom-0 pb-1 hide-if-note">
+        <span>Vitals</span>
+        <a href="#" onclick="return closeStagPopup()"
+           class="ml-auto text-secondary">
+            <i class="fa fa-times-circle"></i>
+        </a>
+    </h3>
+
+    <input type="hidden" name="data" value="{{json_encode($contentData)}}">
+
+    <table class="table table-sm table-bordered mb-2 table-edit-sheet">
+        <thead>
+        <tr class="bg-light">
+            <th class="px-2 text-secondary border-bottom-0 w-25">Vital</th>
+            <th class="px-2 text-secondary border-bottom-0 w-35">Value</th>
+            <th class="px-2 text-secondary border-bottom-0">Date</th>
+        </tr>
+        </thead>
+        <tbody>
+            @foreach($vitalLabels as $k => $v)
+                <tr>
+                    <td>
+                        <input type="text" tabindex="-1"
+                               class="form-control form-control-sm events-none"
+                               data-field="title" value="{{ $v }}" readonly>
+                    </td>
+                    <td class="position-relative">
+                        @if($k === "bmi")
+                            <input type="text" readonly
+                                   class="form-control form-control-sm vitals-title"
+                                   data-field="value" v-model="bmi">
+                            <p class="py-1 m-0 px-2 font-weight-bold bg-white" v-if="!!bmi">
+                                <span class="text-sm text-warning-mellow" v-if="+bmi < 18.5">Underweight</span>
+                                <span class="text-sm text-success" v-if="+bmi >= 18.5 && +bmi < 25">Healthy Weight</span>
+                                <span class="text-sm text-warning-mellow" v-if="+bmi >= 25 && +bmi < 30">Overweight</span>
+                                <span class="text-sm text-warning-mellow" v-if="+bmi >= 30">Obese</span>
+                            </p>
+                        @elseif($k === "smokingStatus")
+                            <input type="text"
+                                   class="form-control form-control-sm"
+                                   data-field="value" v-model="items['smokingStatus'].value"
+                                   data-option-list="smokingStatus"
+                                   v-on:change="autoDate(items['smokingStatus'], 'smokingStatus')" v-on:keyup="autoDate(items['smokingStatus'], 'smokingStatus')">
+                            <div id="smoking-status-options" class="data-option-list">
+                                <div>Current</div>
+                                <div>Former</div>
+                                <div>Never</div>
+                            </div>
+                        @else
+                            <input type="text"
+                                   class="form-control form-control-sm"
+                                   data-field="value" v-model="items['{{ $k }}'].value"
+                                   v-on:change="autoDate(items['{{ $k }}'], '{{ $k }}')" v-on:keyup="autoDate(items['{{ $k }}'], '{{ $k }}')">
+                        @endif
+                    </td>
+                    <td>
+                        <input type="date" {{ $k === 'bmi' ? 'readonly' : '' }}
+                               class="form-control form-control-sm vitals-title"
+                               data-field="date" v-model="items['{{ $k }}'].date">
+                    </td>
+                </tr>
+
+            @endforeach
+        </tbody>
+    </table>
+    <div>
+        <button class="btn btn-sm btn-outline-primary" @click="save">Submit</button>
+    </div>
+</div>
+<script>
+    (function() {
+        function init() {
+            window.clientVitalsApp = new Vue({
+                el: '#vitalsSection',
+                data: {
+                    today: '{{ date("Y-m-d") }}',
+                    items: <?= json_encode($contentData) ?>,
+                    itemsOriginal: <?= json_encode($contentData) ?>
+                },
+                mounted: function() {
+                    $(this.$el).closest('#vitalsSection').find('[name="data"]').val(
+                        JSON.stringify(this.cleanObject(this.items))
+                    );
+                },
+                watch: {
+                    items: {
+                        handler: function(val, oldVal) {
+                            $(this.$el).closest('#vitalsSection').find('[name="data"]').val(
+                                JSON.stringify(this.cleanObject(this.items))
+                            );
+                        },
+                        deep: true
+                    },
+                },
+                computed: {
+                    bmi: function () {
+                        let result = '';
+                        let h = this.items.heightInInches, w = this.items.weightPounds;
+                        if(!h || !w) {
+                            return result;
+                        }
+                        h = h.value;
+                        w = w.value;
+                        try {
+                            h = parseFloat(h);
+                            w = parseFloat(w);
+                            if(!h || !w) {
+                                this.items.bmi.value = '';
+                                return result;
+                            }
+                            let result = (w / [ h * h]) * 703;
+                            return result.toFixed(1);
+                        }
+                        catch (e) {
+                            return result;
+                        }
+                    }
+                },
+                methods: {
+                    autoDate: function(_item, _index) {
+                        console.log('ALIX autoDate for', _index)
+                        if((_item.value !== this.itemsOriginal[_index].value) && !_item.date) {
+                            _item.date = this.today;
+                        }
+                    },
+                    cleanObject: function(_source) {
+                        let plObject = {};
+                        for (let y in _source) {
+                            if(_source.hasOwnProperty(y)) {
+                                plObject[y] = _source[y];
+                            }
+                        }
+                        plObject.bmi = {
+                            label: "BMI (kg/m²)",
+                            value: this.bmi,
+                            date: this.bmi ? this.today : '',
+                        };
+                        return plObject;
+                    },
+                    save: function(){
+                        console.log(this.items);
+                        showMask();
+                        console.log("DATA", this.items);
+
+                        var payload = {
+                             noteUid:  '{{$note->uid}}',
+                             parentPageUid: null,
+                             clientUid: '{{$patient->uid}}',
+                             category: 'VITALS',
+                             key: null,
+                             data: JSON.stringify(this.items)
+                        }
+                        console.log("PAYLOAD:  ", payload);
+                        $.post('/api/page/changeOrCreateNoteScoped', payload, _data => {
+                            if(!hasResponseError(_data)) {
+                                toastr.success('Record updated!');
+                                closeStagPopup();
+                            }
+                        }, 'json');
+                        hideMask();
+                        fastReload();
+                        return false;
+
+                    }
+                }
+            });
+        }
+        addMCInitializer('client-vitals', init, '#vitalsSection');
+    })();
+</script>

resources/views/app/patient/page-sections/vitals/summary.php

@@ -0,0 +1,131 @@
+<?php
+
+use App\Models\Page;
+
+$page = Page::where('note_id', $note->id)->where('category', 'VITALS')->first();
+$vitalLabels = [
+    "heightInInches" => "Ht. (in.)",
+    "weightPounds" => "Wt. (lbs.)",
+    "temperatureF" => "Temp. (F)",
+    "systolicBP" => "SBP",
+    "diastolicBP" => "DBP",
+    "pulseRatePerMinute" => "Pulse",
+    "respirationRatePerMinute" => "Resp.",
+    "pulseOx" => "Pulse Ox.",
+    "smokingStatus" => "Smoking Status",
+    "bmi" => "BMI (kg/m²)",
+];
+$contentData = [
+    "heightInInches" => [
+        "label" => "Ht. (in.)",
+        "value" => "",
+        "date" => "",
+    ],
+    "weightPounds" => [
+        "label" => "Wt. (lbs.)",
+        "value" => "",
+        "date" => "",
+    ],
+    "temperatureF" => [
+        "label" => "Temp. (F)",
+        "value" => "",
+        "date" => "",
+    ],
+    "systolicBP" => [
+        "label" => "SBP",
+        "value" => "",
+        "date" => "",
+    ],
+    "diastolicBP" => [
+        "label" => "DBP",
+        "value" => "",
+        "date" => "",
+    ],
+    "pulseRatePerMinute" => [
+        "label" => "Pulse",
+        "value" => "",
+        "date" => "",
+    ],
+    "respirationRatePerMinute" => [
+        "label" => "Resp.",
+        "value" => "",
+        "date" => "",
+    ],
+    "pulseOx" => [
+        "label" => "Pulse Ox.",
+        "value" => "",
+        "date" => "",
+    ],
+    "smokingStatus" => [
+        "label" => "Smoking Status",
+        "value" => "",
+        "date" => "",
+    ],
+    "bmi" => [
+        "label" => "BMI (kg/m²)",
+        "value" => "",
+        "date" => "",
+    ],
+];
+
+
+if($page){
+    $contentData = json_decode($page->data, true);
+}else{
+    if($patient->canvas_data) {
+        $canvasData = json_decode($patient->canvas_data, true);
+        if(isset($canvasData["vitals"])) {
+            $contentData = $canvasData["vitals"];
+            // ensure $contentData has all the expected vitals and correct labels!
+        }
+    }
+}
+
+foreach ($vitalLabels as $k => $v) {
+    if(!isset($contentData[$k])) {
+        $contentData[$k] = [
+            "label" => $v,
+            "value" => "",
+            "date" => "",
+        ];
+    }
+}
+
+foreach ($vitalLabels as $k => $v) {
+?>
+    <div class="d-flex vital-item align-items-center">
+        <span class="content-html text-nowrap">
+            <span><?= $v ?>:</span>
+            <?php
+            $vital = [];
+            if(isset($contentData[$k])) {
+                $vital = $contentData[$k];
+            }
+            ?>
+            <b><?= isset($vital["value"]) && !empty($vital["value"]) ? $vital["value"] : '-' ?></b>
+            <?php if($k === 'bmi' && isset($vital["value"]) && !empty($vital["value"])):
+                $bmi = floatval($vital["value"]);
+                ?>
+                <span class="ml-2 py-1 m-0 font-weight-bold">
+                    <?php if($bmi < 18.5): ?>
+                        <span class="text-sm text-warning-mellow">(Underweight)</span>
+                    <?php endif; ?>
+                    <?php if($bmi >= 18.5 && $bmi < 25): ?>
+                        <span class="text-sm text-success">(Healthy Weight)</span>
+                    <?php endif; ?>
+                    <?php if($bmi >= 25 && $bmi < 30): ?>
+                        <span class="text-sm text-warning-mellow">(Overweight)</span>
+                    <?php endif; ?>
+                    <?php if($bmi >= 30): ?>
+                        <span class="text-sm text-warning-mellow">(Obese)</span>
+                    <?php endif; ?>
+                </span>
+            <?php endif; ?>
+            <?php if(!!$vital["date"]): ?>
+                <span class="font-weight-normal text-secondary ml-2 text-sm">(as on <?= friendly_date_time($vital["date"], false) ?>)</span>
+            <?php endif; ?>
+        </span>
+    </div>
+<?php
+}
+?>