Vitals UI

storage/sections/vitals/form.blade.php

@@ -3,37 +3,101 @@ $contentData = false;
 if($section){
     $contentData = json_decode($section->content_data, true);
 }
-if(!$contentData || !isset($contentData['value'])) {
-    $contentData = [
-        'value'=>''
-    ];
+if(!$contentData) {
+    $contentData = [];
 }
 $formID = rand(0, 100000);
 ?>
-<form method="POST" action="/process_form_submit" onsubmit="return submitForm_NoteSection_{{ $formID }}(this);">
-    <?php if($section): ?>
-        <input type="hidden" name="section_uid" value="<?= $section->uid?>">
-    <?php else: ?>
-        <input type="hidden" name="note_uid" value="<?= $note->uid?>">
-        <input type="hidden" name="section_template_uid" value="<?= $sectionTemplate->uid ?>">
-    <?php endif; ?>
-    <div class="form-group mb-2">
-        <textarea rte type="text" class="form-control form-control-sm p-2" name="value" placeholder="Value"><?= $contentData['value'] ?></textarea>
+<form method="POST" action="/process_form_submit"
+      id="measurements_{{ $formID }}">
+
+    <div v-for="(item, index) in items" class="note-section-item-row">
+        <div class="row mb-2">
+            <div class="col-md-3">
+                <label v-if="index === 0" class="text-secondary text-sm mb-1 d-block">Vital Type</label>
+                <input class="form-control form-control-sm" type="text" v-model="item.label" required>
+            </div>
+            <div class="col-md-3">
+                <label v-if="index === 0" class="text-secondary text-sm mb-1 d-block">Value</label>
+                <input class="form-control form-control-sm" type="text" v-model="item.value" required>
+            </div>
+            <div class="col-md-3">
+                <label v-if="index === 0" class="text-secondary text-sm mb-1 d-block">Related To:</label>
+                <input class="form-control form-control-sm" type="date" max="{{ date('Y-m-d') }}"  v-model="item.effectiveDate">
+            </div>
+            <div class="col-md-3">
+                <label v-if="index === 0" class="text-secondary text-sm mb-1 d-block">&nbsp;</label>
+                <a v-if="items.length > 1" href="#" v-on:click.prevent="removeItem(index)"
+                   class="on-hover-opaque text-danger mt-1 d-inline-block">
+                    <i class="fa fa-trash-alt"></i>
+                </a>
+            </div>
+        </div>
     </div>
-    <div class="form-group m-0 d-flex">
-        <button class="btn btn-sm btn-primary mr-2">Submit</button>
-        <button class="btn btn-sm btn-default border" onclick="return cancelForm_NoteSection_{{ $formID }}(this)">Cancel</button>
+
+    <div class="form-group mt-3 mb-0 d-flex">
+        <button class="btn btn-sm btn-primary mr-2" v-on:click.prevent="submitForm()">Submit</button>
+        <button class="btn btn-sm btn-default text-primary border border-primary mr-2"
+                v-on:click.prevent="addItem()"
+            >Add Vital</button>
+        <button class="btn btn-sm btn-default border" type="button" v-on:click.prevent="cancelForm()">Cancel</button>
     </div>
 </form>
 <script>
-    function submitForm_NoteSection_{{ $formID }}(_form) {
-        $.post(_form.action, $(_form).serialize(), function(_data) {
-            fastReload();
+    (function() {
+
+        let input = {!! json_encode($contentData)  !!};
+        if(!input) input = {};
+        if(!input.measurements || !input.measurements.length) {
+            input.measurements = [{
+                label: '',
+                value: '',
+                effectiveDate: '',
+                memo: 'Created from note'
+            }];
+        }
+
+        window.measurementsApp = new Vue({
+            el: '#measurements_{{ $formID }}',
+            data: {
+                form: $('#measurements_{{ $formID }}'),
+                items: input.measurements
+            },
+            methods: {
+                addItem: function() {
+                    this.items.push({
+                        label: '',
+                        value: '',
+                        effectiveDate: '',
+                        memo: 'Created from note'
+                    });
+                },
+                removeItem: function(_index) {
+                    this.items.splice(_index, 1);
+                },
+                submitForm: function() {
+                    var payload = {};
+                    <?php if($section): ?>
+                        payload.section_uid = '<?= $section->uid ?>';
+                    <?php else: ?>
+                        payload.note_uid = '<?= $note->uid ?>';
+                        payload.section_template_uid = '<?= $sectionTemplate->uid ?>';
+                    <?php endif; ?>
+                    payload.measurements = JSON.stringify(this.items);
+                    $.post('/process_form_submit', payload, function(_data) {
+                        fastReload();
+                    });
+                },
+                cancelForm: function () {
+                    this.form.closest('.note-section').toggleClass('edit');
+                    return false;
+                }
+            },
+            mounted: function () {
+                this.form = $('#measurements_{{ $formID }}');
+            }
         });
-        return false;
-    }
-    function cancelForm_NoteSection_{{ $formID }}(_trigger) {
-        $(_trigger).closest('.note-section').toggleClass('edit');
-        return false;
-    }
+
+    })();
+
 </script>

storage/sections/vitals/processor.php

@@ -1,4 +1,6 @@
 <?php
+
+$inputs = json_decode($request->get('measurements'));
 $newContentData = [
-    'value' => $request->get('value')
+    "measurements" => $inputs
 ];

storage/sections/vitals/summary.php

@@ -1 +1,16 @@
-<div><?= $newContentData['value']; ?></div>
+<?php
+if(!$newContentData || !$newContentData["measurements"]) {
+    echo "-";
+}
+else {
+    for ($i = 0; $i < count($newContentData["measurements"]); $i++) { ?>
+
+        <div class="mb-1">
+            <?= $newContentData["measurements"][$i]->label ?>:
+            <b><?= $newContentData["measurements"][$i]->value ?></b>
+            <span class="text-secondary text-sm ml-1">(as on <?= friendly_date_time($newContentData["measurements"][$i]->effectiveDate, false) ?>)</span>
+        </div>
+
+    <?php }
+}
+