Bring-in canvas related work from dev-vj-canvas

app/Models/ClientCanvasDataCustomItem.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+# use Illuminate\Database\Eloquent\Model;
+
+class ClientCanvasDataCustomItem extends Model
+{
+    protected $table = 'client_canvas_data_custom_item';
+
+}

app/Models/Pro.php

@@ -88,4 +88,8 @@ class Pro extends Model
         $count = ProClientWork::where('pro_id', $this->id)->where('client_id', $_client->id)->where('is_active', true)->count();
         return $count > 0;
     }
+
+    public function canvasCustomItems($_key) {
+        return ClientCanvasDataCustomItem::where('key', $_key)->where('pro_id', $this->id)->get();
+    }
 }

public/css/style.css

@@ -213,6 +213,10 @@ body>nav.navbar {
     left: calc(50% - 250px);
     width: 500px;
 }
+[moe][center][wide] [url]:not([show]) {
+    left: calc(50% - 400px);
+    width: 800px;
+}
 [moe][center] [url]:not([show]) .form-control.form-control-sm {
     min-width: unset;
     max-width: 100%;
@@ -825,6 +829,41 @@ body .node input[type="number"] {
     padding: 3px 8px;
     border-bottom-left-radius: 5px;
 }
-.w-60px {
-    width: 60px;
+
+/* stag popups */
+.stag-popup {
+    position: fixed;
+    left: 0;
+    top: 55px;
+    width: 100%;
+    height: calc(100% - 55px);
+    overflow-x: auto;
+    z-index: 19998;
+    justify-content: center;
+    align-items: center;
+    display: none;
+    background: center center no-repeat scroll rgba(0, 0, 0, 0.1);
+    padding: 2rem 0;
+}
+.stag-popup.show {
+    display: block;
+}
+.stag-popup>form {
+    width: 80%;
+    background: #fff;
+    border: 1px solid #aaa;
+    border-radius: 5px;
+    overflow: hidden;
+    box-shadow: 0 0 5px #ddd;
+    margin: 0 auto;
+    padding: 0.75rem;
+}
+.no-scroll {
+    overflow: hidden;
+}
+.stag-popup .form-control.form-control-sm {
+    min-width: unset !important;
+}
+.client-rs-contents p {
+    margin-bottom: 0.25rem;
 }

public/js/mc.js

@@ -168,6 +168,7 @@ function onFastLoaded(_data, _href, _history) {
     }
     hideMask();
     hideMoeFormMask();
+    $('html, body').removeClass('no-scroll');
 }
 function fastLoad(_href, _history = true, _useCache = true, _replaceState = false) {
 

public/js/yemi.js

@@ -289,7 +289,12 @@ var initMoes = function() {
         var infoToggle = false;
 
         if (start) {
-            $(start).click(function () {
+            $(start).off('click.moe');
+            $(start).on('click.moe', function () {
+
+                // if any div based moes are visible, hide first
+                $('[moe]>div[url]:visible').hide();
+
                 $('.dropdown-menu[aria-labelledby="practice-management"]')
                     .removeClass('show')
                     .prev('.dropdown-toggle').attr('aria-expanded', 'false');
@@ -337,7 +342,8 @@ var initMoes = function() {
             $(start).attr('href', '#');
         }
         if (cancel) {
-            $(cancel).click(function (e) {
+            $(cancel).off('click.moe');
+            $(cancel).on('click.moe', function (e) {
                 e.preventDefault();
                 e.stopImmediatePropagation();
                 if ($(realForm).attr('show') == null) {
@@ -352,7 +358,8 @@ var initMoes = function() {
                 hideMoeFormMask();
             });
         }
-        $(submit).click(function (e) {
+        $(submit).off('click.moe');
+        $(submit).on('click.moe', function (e) {
             e.preventDefault();
             e.stopImmediatePropagation();
             if (moe.isProcessing) {

resources/views/app/patient/canvas-sections/fhx/form.blade.php

@@ -0,0 +1,393 @@
+<?php
+$contentData = [
+    "count" => 1,
+    "unknown" => false,
+    "items" => [[]]
+];
+if($patient->canvas_data) {
+    $canvasData = json_decode($patient->canvas_data, true);
+    if(isset($canvasData["fhx"])) {
+        $contentData = $canvasData["fhx"];
+    }
+}
+$formID = rand(0, 100000);
+?>
+<form method="POST" action="/api/client/updateCanvasData"
+      id="fhx_{{ $formID }}" v-on:submit.prevent="submitForm()">
+    <input type="hidden" name="uid" value="{{$patient->uid}}">
+    <input type="hidden" name="key" value="fhx">
+
+    <div class="border border-secondary rounded mb-2 p-2">
+        <label class="my-0 d-flex align-items-center">
+            <input type="checkbox" class="my-0 mr-2" v-model="unknown" name="unknown">
+            <span>Family history is unknown/unavailable</span>
+        </label>
+    </div>
+
+    <div v-if="!unknown" v-for="(item, index) in items" class="note-section-item-row">
+        <hr v-if="index > 0" class="row">
+        <div class="row mb-3">
+            <div class="col-md-3">
+                <label class="text-secondary text-sm mb-1 d-block">Relationship</label>
+                <select class="form-control form-control-sm" v-model="item.relationship" required>
+                    <option value="">-- select --</option>
+                    <option value="Mother">Mother</option>
+                    <option value="Father">Father</option>
+                    <option value="Sister (First)">Sister (First)</option>
+                    <option value="Sister (Second)">Sister (Second)</option>
+                    <option value="Sister (Third)">Sister (Third)</option>
+                    <option value="Sister (Fourth)">Sister (Fourth)</option>
+                    <option value="Brother (First)">Brother (First)</option>
+                    <option value="Brother (Second)">Brother (Second)</option>
+                    <option value="Brother (Third)">Brother (Third)</option>
+                    <option value="Brother (Fourth)">Brother (Fourth)</option>
+                    <option value="Daughter (First)">Daughter (First)</option>
+                    <option value="Daughter (Second)">Daughter (Second)</option>
+                    <option value="Daughter (Third)">Daughter (Third)</option>
+                    <option value="Daughter (Fourth)">Daughter (Fourth)</option>
+                    <option value="Son (First)">Son (First)</option>
+                    <option value="Son (Second)">Son (Second)</option>
+                    <option value="Son (Third)">Son (Third)</option>
+                    <option value="Son (Fourth)">Son (Fourth)</option>
+                    <option value="Half-sister">Half-sister</option>
+                    <option value="Half-brother">Half-brother</option>
+                    <option value="Maternal Aunt">Maternal Aunt</option>
+                    <option value="Paternal Aunt">Paternal Aunt</option>
+                    <option value="Maternal Uncle">Maternal Uncle</option>
+                    <option value="Paternal Uncle">Paternal Uncle</option>
+                    <option value="Niece">Niece</option>
+                    <option value="Nephew">Nephew</option>
+                    <option value="Maternal Cousin">Maternal Cousin</option>
+                    <option value="Paternal Cousin">Paternal Cousin</option>
+                    <option value="Maternal Grandmother">Maternal Grandmother</option>
+                    <option value="Maternal Grandfather">Maternal Grandfather</option>
+                    <option value="Paternal Grandmother">Paternal Grandmother</option>
+                    <option value="Paternal Grandfather">Paternal Grandfather</option>
+                    <option value="Granddaughter">Granddaughter</option>
+                    <option value="Grandson">Grandson</option>
+                </select>
+            </div>
+            <div class="col-md-6">
+                <label class="text-secondary text-sm mb-1 d-block">Health Status</label>
+                <label class="my-0 mr-3 d-inline-flex align-items-center">
+                    <input type="radio" :name="'item_' + index + '_status'" v-model="item.status" value="Alive" class="mr-1">
+                    Alive
+                </label>
+                <label class="my-0 mr-3 d-inline-flex align-items-center">
+                    <input type="radio" :name="'item_' + index + '_status'" v-model="item.status" value="Deceased" class="mr-1">
+                    Deceased
+                </label>
+                <label class="my-0 mr-3 d-inline-flex align-items-center">
+                    <input type="radio" :name="'item_' + index + '_status'" v-model="item.status" value="Unknown" class="mr-1">
+                    Unknown
+                </label>
+            </div>
+            <div class="col-md-2">
+                <label 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 class="row mb-1 font-weight-bold">
+            <div class="col-8">
+                General
+            </div>
+            <div class="col-4">
+                Cancer
+            </div>
+        </div>
+        <div class="row mb-1 font-weight-bold">
+            <div class="col-4">
+                <div class="rspace">+</div>
+                <div class="rspace">-</div>
+            </div>
+            <div class="col-4">
+                <div class="rspace">+</div>
+                <div class="rspace">-</div>
+            </div>
+            <div class="col-4">
+                <div class="rspace">+</div>
+                <div class="rspace">-</div>
+            </div>
+        </div>
+        <div class="row mb-3">
+            <div class="col-4">
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_no_health_concern'" v-model="item.general_no_health_concern"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_no_health_concern'" v-model="item.general_no_health_concern"></div>
+                    <span class="ml-2">No Health Concern</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_arthritis'" v-model="item.general_arthritis"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_arthritis'" v-model="item.general_arthritis"></div>
+                    <span class="ml-2">Arthritis</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_asthma'" v-model="item.general_asthma"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_asthma'" v-model="item.general_asthma"></div>
+                    <span class="ml-2">Asthma</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_bleeding_disorder'" v-model="item.general_bleeding_disorder"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_bleeding_disorder'" v-model="item.general_bleeding_disorder"></div>
+                    <span class="ml-2">Bleeding Disorder</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_cad_lt_age_55'" v-model="item.general_cad_lt_age_55"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_cad_lt_age_55'" v-model="item.general_cad_lt_age_55"></div>
+                    <span class="ml-2">CAD < age 55</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_copd'" v-model="item.general_copd"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_copd'" v-model="item.general_copd"></div>
+                    <span class="ml-2">COPD</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_diabetes'" v-model="item.general_diabetes"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_diabetes'" v-model="item.general_diabetes"></div>
+                    <span class="ml-2">Diabetes</span>
+                </div>
+            </div>
+            <div class="col-4">
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_heart_attack'" v-model="item.general_heart_attack"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_heart_attack'" v-model="item.general_heart_attack"></div>
+                    <span class="ml-2">Heart Attack</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_heart_disease'" v-model="item.general_heart_disease"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_heart_disease'" v-model="item.general_heart_disease"></div>
+                    <span class="ml-2">Heart Disease</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_high_cholesterol'" v-model="item.general_high_cholesterol"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_high_cholesterol'" v-model="item.general_high_cholesterol"></div>
+                    <span class="ml-2">High Cholesterol</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_hypertension'" v-model="item.general_hypertension"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_hypertension'" v-model="item.general_hypertension"></div>
+                    <span class="ml-2">Hypertension</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_mental_illness'" v-model="item.general_mental_illness"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_mental_illness'" v-model="item.general_mental_illness"></div>
+                    <span class="ml-2">Mental Illness</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_osteoporosis'" v-model="item.general_osteoporosis"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_osteoporosis'" v-model="item.general_osteoporosis"></div>
+                    <span class="ml-2">Osteoporosis</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_stroke'" v-model="item.general_stroke"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_stroke'" v-model="item.general_stroke"></div>
+                    <span class="ml-2">Stroke</span>
+                </div>
+            </div>
+            <div class="col-4">
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_cancer_breast_ca'" v-model="item.cancer_breast_ca"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_cancer_breast_ca'" v-model="item.cancer_breast_ca"></div>
+                    <span class="ml-2">Breast CA</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_cancer_colon_ca'" v-model="item.cancer_colon_ca"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_cancer_colon_ca'" v-model="item.cancer_colon_ca"></div>
+                    <span class="ml-2">Colon CA</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_cancer_other_ca'" v-model="item.cancer_other_ca"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_cancer_other_ca'" v-model="item.cancer_other_ca"></div>
+                    <span class="ml-2">Other CA</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_cancer_ovarian_ca'" v-model="item.cancer_ovarian_ca"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_cancer_ovarian_ca'" v-model="item.cancer_ovarian_ca"></div>
+                    <span class="ml-2">Ovarian CA</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_cancer_uterine_ca'" v-model="item.cancer_uterine_ca"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_cancer_uterine_ca'" v-model="item.cancer_uterine_ca"></div>
+                    <span class="ml-2">Uterine CA</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="row mb-2">
+            <div class="col-md-12">
+                <textarea rte class="form-control form-control-sm" type="text" v-model="item.comments" :model-index="index">
+                </textarea>
+            </div>
+        </div>
+
+    </div>
+
+    <div class="form-group mt-3 mb-0 d-flex">
+        <button class="btn btn-sm btn-primary mr-2">Submit</button>
+        <button v-if="!unknown" class="btn btn-sm btn-default text-primary border border-primary mr-2"
+                v-on:click.prevent="addItem()"
+            >Add Family Member</button>
+        <button class="btn btn-sm btn-default border" type="button" onclick="return closeStagPopup()">Cancel</button>
+    </div>
+</form>
+<script>
+    function cancelForm_CanvasSection_{{ $formID }}(_trigger) {
+        $(_trigger).closest('.note-section').toggleClass('edit');
+        return false;
+    }
+
+    (function() {
+
+        function init() {
+            window.clientFHXApp = new Vue({
+                el: '#fhx_{{ $formID }}',
+                data: {
+                    count: {{ $contentData['count'] }},
+                    unknown: {{ $contentData['unknown'] ? 'true' : 'false' }},
+                    items: <?= json_encode($contentData['items']) ?>
+                },
+                mounted: function() {
+                    this.initRTE();
+                },
+                methods: {
+                    initRTE: function() {
+
+                        let self = this;
+
+                        $('textarea[rte]').each(function() {
+
+                            let textarea = $(this), modelIndex = + textarea.attr('model-index');
+
+                            textarea.wrap(
+                                $('<div class="border-left border-right rte-holder"/>')
+                                    .attr('data-shortcuts', '')
+                            );
+
+                            // give a unique id to this editor instance
+                            var editorID = Math.ceil(Math.random() * 99999),
+                                fieldName = this.name;
+
+                            // var ti = $('<input type="hidden" />')
+                            //     .val(this.value)
+                            //     .attr('name', this.name)
+                            //     .insertBefore(this);
+                            var ce = $('<div data-editor-id="' + editorID + '" data-field="' + this.name + '"/>')
+                                .html(this.value)
+                                .insertBefore(this);
+                            textarea.hide();
+
+                            var qe = new Quill('[data-editor-id="' + editorID + '"]', {
+                                theme: 'snow',
+                                modules: {
+                                    keyboard: {
+                                        bindings: {
+                                            handleEnter: {
+                                                key: 13,
+                                                handler: function() {
+                                                    if(!$('.stag-shortcuts:visible').length) return true;
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            });
+                            var toolbar = $(qe.container).prev('.ql-toolbar');
+
+                            // add button for new shortcut
+                            var newSCButton = $('<button class="btn bg-white btn-sm btn-default text-primary w-auto px-2 border py-0 ' +
+                                'text-sm add-shortcut" data-editor-id="' + editorID + '">+ Shortcut</button>');
+                            toolbar.append(newSCButton);
+
+                            qe.on('text-change', function() {
+                                self.items[modelIndex].comments = qe.root.innerHTML;
+                            });
+
+                            $(qe.container)
+                                .find('.ql-editor[contenteditable]')
+                                .attr('data-field', fieldName)
+                                .attr('data-editor-id', editorID)
+                                .attr('with-shortcuts', 1);
+
+                        });
+                    },
+                    addItem: function() {
+                        this.items.push({
+                            relationship: '',
+                            status: '',
+
+                            general_no_health_concern: null,
+                            general_arthritis: null,
+                            general_asthma: null,
+                            general_bleeding_disorder: null,
+                            general_cad_lt_age_55: null,
+                            general_copd: null,
+                            general_diabetes: null,
+                            general_heart_attack: null,
+                            general_heart_disease: null,
+                            general_high_cholesterol: null,
+                            general_hypertension: null,
+                            general_mental_illness: null,
+                            general_osteoporosis: null,
+                            general_stroke: null,
+
+                            cancer_breast_ca: null,
+                            cancer_colon_ca: null,
+                            cancer_other_ca: null,
+                            cancer_ovarian_ca: null,
+                            cancer_uterine_ca: null,
+
+                            comments: '',
+                        });
+                        this.count = this.items.length;
+                        var self = this;
+                        Vue.nextTick(function() {
+                            self.initRTE();
+                        })
+                    },
+                    removeItem: function(_index) {
+                        this.items.splice(_index, 1);
+                        this.count = this.items.length;
+                    },
+                    submitForm: function() {
+                        showMask();
+                        let payload = {
+                            uid: '{{$patient->uid}}',
+                            key: 'fhx',
+                            canvasData: JSON.stringify({
+                                count: this.count,
+                                unknown: this.unknown,
+                                items: this.cleanArray(this.items)
+                            })
+                        };
+                        console.log('ALIX payload: ', payload);
+                        $.post('/api/client/updateCanvasData', payload, function(_data) {
+                            console.log(_data);
+                            closeStagPopup();
+                            fastReload();
+                        });
+                    },
+                    cleanArray: function(_source) {
+                        let plItems = [], plObject = {};
+                        for (let x=0; x<_source.length; x++) {
+                            plObject = {};
+                            for (let y in _source[x]) {
+                                if(_source[x].hasOwnProperty(y)) {
+                                    plObject[y] = _source[x][y];
+                                }
+                            }
+                            plItems.push(plObject);
+                        }
+                        return plItems;
+                    }
+                }
+            });
+        }
+
+        addMCInitializer('client-fhx-{{ $patient->uid }}', init);
+
+    })();
+
+</script>

resources/views/app/patient/canvas-sections/fhx/summary.php

@@ -0,0 +1,64 @@
+<?php
+
+$contentData = [
+    "count" => 0,
+    "unknown" => false,
+    "items" => []
+];
+if($patient->canvas_data) {
+    $canvasData = json_decode($patient->canvas_data, true);
+    if(isset($canvasData["fhx"])) {
+        $contentData = $canvasData["fhx"];
+    }
+}
+
+$labels = [
+    'general_no_health_concern' => 'No health concern',
+    'general_arthritis' => 'Arthritis',
+    'general_asthma' => 'Asthma',
+    'general_bleeding_disorder' => 'Bleeding disorder',
+    'general_cad_lt_age_55' => 'Cad &gt; age 55',
+    'general_copd' => 'Copd',
+    'general_diabetes' => 'Diabetes',
+    'general_heart_attack' => 'Heart attack',
+    'general_heart_disease' => 'Heart disease',
+    'general_high_cholesterol' => 'High cholesterol',
+    'general_hypertension' => 'Hypertension',
+    'general_mental_illness' => 'Mental illness',
+    'general_osteoporosis' => 'Osteoporosis',
+    'general_stroke' => 'Stroke',
+    'cancer_breast_ca' => 'Breast cancer',
+    'cancer_colon_ca' => 'Colon cancer',
+    'cancer_other_ca' => 'Other cancer',
+    'cancer_ovarian_ca' => 'Ovarian cancer',
+    'cancer_uterine_ca' => 'Uterine cancer',
+];
+
+if(!$contentData['unknown'] && !!$contentData['count']) {
+    for ($i = 0; $i < $contentData['count']; $i++) {
+?>
+        <div class="<?= $i > 0 ? 'mt-2' : '' ?>">
+            <div class="pb-1">
+                <b><?= $contentData['items'][$i]['relationship'] ?></b>
+                <span class="ml-1 text-secondary">(<?= $contentData['items'][$i]['status'] ?>)</span>
+            </div>
+            <div class="ml-3">
+                <?php foreach ($labels as $k => $v): ?>
+                    <?= isset($contentData['items'][$i][$k]) ? '<div>' . $v . ': <b>' . $contentData['items'][$i][$k] . '</b></div>' : '' ?>
+                <?php endforeach; ?>
+            </div>
+            <?php if(isset($contentData['items'][$i]['comments']) && !empty($contentData['items'][$i]['comments'])): ?>
+                <div class="ml-3 pt-1 text-secondary client-rs-contents">
+                    <b>Comments: </b><?= $contentData['items'][$i]['comments'] ?>
+                </div>
+            <?php endif; ?>
+        </div>
+<?php
+    }
+}
+else {
+    ?>
+    <div class="text-secondary">Family History is unknown/unavailable</div>
+    <?php
+}
+?>

resources/views/app/patient/canvas-sections/pmhx/form.blade.php

@@ -0,0 +1,274 @@
+<?php
+$fields = [
+    [
+        "Head" => ["Trauma"],
+        "Eyes" => ["Blindness", "Cataracts", "Glaucoma", "Wears glasses/contacts"],
+        "Ears" => ["Hearing aids"],
+        "Nose/Sinuses" => ["Allergic Rhinitis", "Sinus infections"],
+        "Mouth/Throat/Teeth" => ["Dentures"],
+        "Cardiovascular" => ["Aneurysm", "Angina", "DVT", "Dysrhythmia", "HTN", "Murmur", "Myocardial infarction", "Other heart disease"],
+    ],
+    [
+        "Respiratory" => ["Asthma", "Bronchitis", "COPD - Bronchitis/Emphysema", "Pleuritis", "Pneumonia"],
+        "Gastrointestinal" => ["Cirrhosis", "GERD", "Gallbladder disease", "Heartburn", "Hemorrhoids", "Hepatitis", "Hiatal hernia", "Jaundice", "Ulcer"],
+        "Genitourinary" => ["Hernia", "Incontinence", "Nephrolithiasis", "Other kidney disease", "STDs", "UTI(s)"],
+    ],
+    [
+        "Musculoskeletal" => ["Arthritis", "Gout", "M/S injury"],
+        "Skin" => ["Dermatitis", "Mole(s)", "Other skin condition(s)", "Psoriasis"],
+        "Neurological" => ["Epilepsy", "Seizures", "Severe headaches, migraines", "Stroke", "TIA"],
+        "Psychiatric" => ["Bipolar disorder", "Depression", "Hallucinations, delusions", "Suicidal ideation", "Suicide attempts"],
+    ],
+    [
+        "Endocrine" => ["Goiter", "Hyperlipidemia", "Hypothyroidism", "Thyroid disease", "Thyroiditis", "Type I DM", "Type II DM"],
+        "Heme/Onc" => ["Anemia", "Cancer"],
+        "Infectious" => ["HIV", "STDs", "Tuberculosis (dz)", "Tuberculosis (exposure)"],
+    ]
+];
+
+$customFields = $pro->canvasCustomItems('pmhx');
+$customFields = array_map(function($_item) {
+    return $_item['label'];
+}, $customFields->toArray());
+
+$formID = rand(0, 100000);
+?>
+<?php
+$contentData = [
+    "bloodType" => "",
+    "bloodRH" => "",
+    "common" => [],
+    "custom" => [],
+    "comments" => "",
+];
+if ($patient->canvas_data) {
+    $canvasData = json_decode($patient->canvas_data, true);
+    if (isset($canvasData["pmhx"])) {
+        $contentData = $canvasData["pmhx"];
+    }
+}
+?>
+<form method="POST" action="/api/client/updateCanvasData"
+      id="pmhx_{{ $formID }}" v-on:submit.prevent="submitForm()">
+    <input type="hidden" name="uid" value="{{$patient->uid}}">
+    <input type="hidden" name="key" value="pmhx">
+
+    <div class="mb-3 d-flex align-items-start">
+        <div class="width-100px mr-3">
+            <label class="text-secondary mb-1">Blood Type</label>
+            <select name="blood_type" class="form-control form-control-sm width-100px" v-model="bloodType">
+                <option value=""> -- select -- </option>
+                <option value="A">A</option>
+                <option value="AB">AB</option>
+                <option value="B">B</option>
+                <option value="O">O</option>
+            </select>
+        </div>
+        <div class="width-100px mr-3">
+            <label class="text-secondary mb-1">RH</label>
+            <select name="blood_rh" class="form-control form-control-sm width-100px" v-model="bloodRH">
+                <option value=""> -- select -- </option>
+                <option value="+ve">+ve</option>
+                <option value="-ve">-ve</option>
+            </select>
+        </div>
+    </div>
+
+    <div class="row">
+        @for ($i = 0; $i < count($fields); $i++)
+            <div class="col-md-3">
+                @foreach($fields[$i] as $head => $values)
+                    <div class="font-weight-bold mb-2">{{ $head }}</div>
+                    <div class="mb-3">
+                        @for($k = 0; $k < count($values); $k++)
+                            <?php $fName = $head . '_' . sanitize_field_name($values[$k]); ?>
+                            <label class="d-flex align-items-center mb-1">
+                                <input type="checkbox" name="{{ $fName }}" class="m-0"
+                                       v-model="common['{{$fName}}']">
+                                <span class="mx-2">{{ $values[$k] }}</span>
+                                <div moe>
+                                    <a href="#" start show>
+                                        <i v-show="common['{{$fName}}']" class="fa-comment" :class="common['{{$fName}}__comments'] ? 'fas' : 'far'"></i>
+                                    </a>
+                                    <div url="/nop">
+                                        <div class="mb-2">
+                                            <textarea class="form-control form-control-sm ns-custom-comment"
+                                                      v-model="common['{{$fName}}__comments']"></textarea>
+                                        </div>
+                                        <div class="">
+                                            <button type="button" class="btn btn-sm btn-primary" cancel>Close
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </label>
+                        @endfor
+                    </div>
+                @endforeach
+            </div>
+        @endfor
+    </div>
+
+    <div class="row border-top pt-3">
+        <div class="col-12">
+            <div class="d-flex align-items-center mb-2">
+                <span class="font-weight-bold">Custom Items</span>
+                <span class="mx-2 text-secondary">|</span>
+                <div moe>
+                    <a href="#" start show>Add</a>
+                    <div custom-item-form url="/api/sectionTemplateCustomItem/create">
+                        <div class="mb-2">
+                            <input type="text" placeholder="Label"
+                                   v-model="newCustomItemLabel"
+                                   class="form-control form-control-sm label_new_custom_item">
+                        </div>
+                        <div>
+                            <button type="button" class="btn btn-sm btn-primary mr-1"
+                                    v-on:click.prevent="saveCustomItem(newCustomItemLabel)">Submit</button>
+                            <button type="button" class="btn btn-sm btn-default border"
+                                    v-on:click.prevent="cancelCustomItem()">Cancel</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {{-- custom items --}}
+            <div class="d-flex align-items-start flex-wrap custom-items-container">
+                <div class="w-25" v-for="item in customFields">
+                    <label class="d-flex align-items-center mb-1">
+                        <input type="checkbox" class="m-0"
+                               v-model="item.value">
+                        <span class="mx-2">@{{ item.label }}</span>
+                        <div moe>
+                            <a href="#" start show>
+                                <i v-show="item.value" class="fa-comment" :class="item.comments ? 'fas' : 'far'"></i>
+                            </a>
+                            <div url="/nop">
+                                <div class="mb-2">
+                                    <textarea class="form-control form-control-sm ns-custom-comment" v-model="item.comments"></textarea>
+                                </div>
+                                <div class="">
+                                    <button type="button" class="btn btn-sm btn-primary" cancel>Close</button>
+                                </div>
+                            </div>
+                        </div>
+                    </label>
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+    <div class="row mb-3">
+        <div class="col-12">
+            <textarea type="text" class="form-control form-control-sm p-2 mt-2" v-model="comments" placeholder="Comments"></textarea>
+        </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 closeStagPopup()">Cancel</button>
+    </div>
+</form>
+<script>
+    (function() {
+        let model = <?= json_encode($contentData) ?>;
+        model.newCustomItemLabel = '';
+        let customFields = <?= json_encode($customFields) ?>;
+        if(!model.customFields) {
+            model.customFields = [];
+        }
+        for (let i = 0; i < customFields.length; i++) {
+            let found = model.customFields.filter(function(_item) {
+                return _item.label === customFields[i];
+            }).length;
+            if(!found) {
+                model.customFields.push({
+                    label: customFields[i],
+                    value: '',
+                    comments: '',
+                })
+            }
+        }
+
+        function init() {
+            window.clientPMHXApp = new Vue({
+                el: '#pmhx_{{ $formID }}',
+                data: model,
+                mounted: function () {
+                    $('#pmhx_{{ $formID }} [moe][initialized]').removeAttr('initialized');
+                    initMoes();
+                },
+                methods: {
+                    submitForm: function() {
+                        showMask();
+                        let payload = {
+                            uid: '{{$patient->uid}}',
+                            key: 'pmhx',
+                            canvasData: JSON.stringify({
+                                bloodType: this.bloodType,
+                                bloodRH: this.bloodRH,
+                                common: this.cleanObject(this.common),
+                                customFields: this.customFields,
+                                comments: this.comments,
+                            })
+                        };
+                        console.log('ALIX payload: ', payload);
+                        $.post('/api/client/updateCanvasData', payload, function(_data) {
+                            console.log(_data);
+                            closeStagPopup();
+                            fastReload();
+                        });
+                    },
+                    cleanObject: function(_source) {
+                        let plObject = {};
+                        for (let y in _source) {
+                            if(_source.hasOwnProperty(y)) {
+                                plObject[y] = _source[y];
+                            }
+                        }
+                        return plObject;
+                    },
+                    saveCustomItem: function(_label) {
+                        if(!_label) return false;
+                        showMask();
+                        let self = this;
+                        $.post('/api/clientCanvasCustomItem/create', {
+                            proUid: '{{ $pro->uid }}',
+                            key: 'pmhx',
+                            label: _label
+                        }, function(_data) {
+                            hideMask();
+                            if(_data && _data.success) {
+                                self.appendCustomItem(_label);
+                                hideMoeFormMask();
+                                $('[custom-item-form]').hide();
+                            }
+                            else {
+                                toastr.error(_data.message);
+                            }
+                        }, 'json');
+                        return false;
+                    },
+                    cancelCustomItem: function() {
+                        hideMoeFormMask();
+                        $('div[moe]').hide();
+                        return false;
+                    },
+                    appendCustomItem: function(_name) {
+                        this.customFields.push({
+                            label: _name,
+                            value: '',
+                            comments: '',
+                        });
+                        Vue.nextTick(function() {
+                            $('.custom-items-container [moe][initialized]').removeAttr('initialized');
+                            initMoes();
+                        });
+                    }
+                }
+            });
+        }
+        addMCInitializer('client-pmhx-{{ $patient->uid }}', init);
+    })();
+</script>

resources/views/app/patient/canvas-sections/pmhx/summary.php

@@ -0,0 +1,114 @@
+<?php
+$fields = [
+    [
+        "Head" => ["Trauma"],
+        "Eyes" => ["Blindness", "Cataracts", "Glaucoma", "Wears glasses/contacts"],
+        "Ears" => ["Hearing aids"],
+        "Nose/Sinuses" => ["Allergic Rhinitis", "Sinus infections"],
+        "Mouth/Throat/Teeth" => ["Dentures"],
+        "Cardiovascular" => ["Aneurysm", "Angina", "DVT", "Dysrhythmia", "HTN", "Murmur", "Myocardial infarction", "Other heart disease"],
+    ],
+    [
+        "Respiratory" => ["Asthma", "Bronchitis", "COPD - Bronchitis/Emphysema", "Pleuritis", "Pneumonia"],
+        "Gastrointestinal" => ["Cirrhosis", "GERD", "Gallbladder disease", "Heartburn", "Hemorrhoids", "Hepatitis", "Hiatal hernia", "Jaundice", "Ulcer"],
+        "Genitourinary" => ["Hernia", "Incontinence", "Nephrolithiasis", "Other kidney disease", "STDs", "UTI(s)"],
+    ],
+    [
+        "Musculoskeletal" => ["Arthritis", "Gout", "M/S injury"],
+        "Skin" => ["Dermatitis", "Mole(s)", "Other skin condition(s)", "Psoriasis"],
+        "Neurological" => ["Epilepsy", "Seizures", "Severe headaches, migraines", "Stroke", "TIA"],
+        "Psychiatric" => ["Bipolar disorder", "Depression", "Hallucinations, delusions", "Suicidal ideation", "Suicide attempts"],
+    ],
+    [
+        "Endocrine" => ["Goiter", "Hyperlipidemia", "Hypothyroidism", "Thyroid disease", "Thyroiditis", "Type I DM", "Type II DM"],
+        "Heme/Onc" => ["Anemia", "Cancer"],
+        "Infectious" => ["HIV", "STDs", "Tuberculosis (dz)", "Tuberculosis (exposure)"],
+    ]
+];
+
+$contentData = [
+    "bloodType" => "",
+    "bloodRH" => "",
+    "common" => [],
+    "customFields" => [],
+    "comments" => "",
+];
+$isempty = false;
+if ($patient->canvas_data) {
+    $canvasData = json_decode($patient->canvas_data, true);
+    if (isset($canvasData["pmhx"])) {
+        $contentData = $canvasData["pmhx"];
+    }
+    else {
+        $isempty = true;
+    }
+}
+else {
+    $isempty = true;
+}
+
+if($isempty) {
+    echo '<span class="text-secondary">No medical history in the system</span>';
+}
+else {
+    $blood = [];
+    if(isset($contentData['bloodType'])) {
+        $blood[] = $contentData['bloodType'];
+    }
+    if(isset($contentData['bloodRH'])) {
+        $blood[] = $contentData['bloodRH'];
+    }
+    $blood = implode(" ", $blood);
+    if(!empty(trim($blood))) { ?>
+        <div class="mb-2">
+            <div>Blood Type &amp; RH: <b><?= $blood ?></b></div>
+        </div>
+    <?php }
+
+    for ($i = 0; $i < count($fields); $i++):
+        foreach($fields[$i] as $head => $values):
+            for($k = 0; $k < count($values); $k++):
+                $fName = $head . '_' . sanitize_field_name($values[$k]);
+                if(@$contentData['common'][$fName]): ?>
+                    <div>
+                        <?= ucwords($head) ?>
+                        <i class="fa fa-arrow-right text-sm text-secondary"></i>
+                        <span class="font-weight-bold"><?= $values[$k] ?></span>
+                        <?php if(@$contentData['common'][$fName . '__comments']): ?>
+                            <span class="text-sm ml-1 text-secondary">(<?= $contentData['common'][$fName . '__comments'] ?>)</span>
+                        <?php endif; ?>
+                    </div>
+                <?php
+                endif;
+            endfor;
+        endforeach;
+    endfor;
+
+    // custom fields
+    if(count($contentData['customFields'])):
+        ?> <div class="mt-2"> <?php
+        for ($i = 0; $i < count($contentData['customFields']); $i++):
+            $item = $contentData['customFields'][$i];
+            if($item['value']): ?>
+                <div>
+                    Custom
+                    <i class="fa fa-arrow-right text-sm text-secondary"></i>
+                    <span class="font-weight-bold"><?= $item['label'] ?></span>
+                    <?php if($item['comments']): ?>
+                        <span class="text-sm ml-1 text-secondary">(<?= $item['comments'] ?>)</span>
+                    <?php endif; ?>
+                </div>
+            <?php
+            endif;
+        endfor;
+        ?> </div> <?php
+    endif;
+
+    if(isset($contentData['comments'])) { ?>
+        <div class="mt-2 mb-1">
+            <div class="font-weight-bold">Comments:</div>
+            <div><?= $contentData['comments'] ?></div>
+        </div>
+    <?php }
+}
+?>

resources/views/app/patient/canvas-sections/pshx/form.blade.php

@@ -0,0 +1,251 @@
+<?php
+$fields = [
+    [
+        "" => ["Aneurysm repair", "Appendectomy", "Back surgery", "Bariatric surgery/gastric bypass", "Bilateral tubal ligation", "Breast resection/mastectomy", "CABG", "Carotid endarterectomy/stent", "Carpal tunnel release surgery",]
+    ],
+    [
+        "" => ["Cataract/lens surgery", "Cesarean section", "Cholecystectomy/bile duct surgery", "Dilation and curettage", "Hemorrhoid surgery", "Hip arthroplasty", "Hip replacement", "Hysterectomy", "Inguinal hernia repair",]
+    ],
+    [
+        "" => ["Knee arthroplasty", "LASIK", "Laminectomy", "Nasal surgery", "PTCA/PCI", "Pacemaker/defibrillator", "Prostate surgery", "Prostatectomy", "Rotator cuff surgery",]
+    ],
+    [
+        "" => ["Sinus surgery", "Skin cancer excision", "Spinal fusion", "TAH-BSO", "TURP", "Tonsillectomy/Adenoidectomy", "Vasectomy",]
+    ]
+];
+
+$customFields = $pro->canvasCustomItems('pshx');
+$customFields = array_map(function($_item) {
+    return $_item['label'];
+}, $customFields->toArray());
+
+$formID = rand(0, 100000);
+?>
+
+<?php
+$contentData = [
+    "common" => [],
+    "custom" => [],
+    "comments" => "",
+];
+if ($patient->canvas_data) {
+    $canvasData = json_decode($patient->canvas_data, true);
+    if (isset($canvasData["pshx"])) {
+        $contentData = $canvasData["pshx"];
+    }
+}
+?>
+
+<form method="POST" action="/api/client/updateCanvasData"
+      id="pshx_{{ $formID }}" v-on:submit.prevent="submitForm()">
+    <input type="hidden" name="uid" value="{{$patient->uid}}">
+    <input type="hidden" name="key" value="pshx">
+
+    <div class="row">
+        <div class="col-12">
+            <div class="font-weight-bold my-1">Common Surgeries</div>
+        </div>
+    </div>
+
+    <div class="row">
+        @for ($i = 0; $i < count($fields); $i++)
+            <div class="col-md-3">
+                @foreach($fields[$i] as $head => $values)
+                    <div class="font-weight-bold mb-2">{{ $head }}</div>
+                    <div class="mb-3">
+                        @for($k = 0; $k < count($values); $k++)
+                            <?php $fName = $head . '_' . sanitize_field_name($values[$k]); ?>
+                            <?php
+                            if(!isset($contentData[$fName])) {
+                                $contentData[$fName] = false;
+                                $contentData[$fName . '__comments'] = '';
+                            }
+                            ?>
+                            <label class="d-flex align-items-center mb-1">
+                                <input type="checkbox" name="{{ $fName }}" class="m-0"
+                                       v-model="common['{{$fName}}']">
+                                <span class="mx-2">{{ $values[$k] }}</span>
+                                <div moe>
+                                    <a href="#" start show>
+                                        <i v-show="common['{{$fName}}']" class="fa-comment" :class="common['{{$fName}}__comments'] ? 'fas' : 'far'"></i>
+                                    </a>
+                                    <div url="/nop">
+                                        <div class="mb-2">
+                                            <textarea class="form-control form-control-sm ns-custom-comment"
+                                                      v-model="common['{{$fName}}__comments']"></textarea>
+                                        </div>
+                                        <div class="">
+                                            <button type="button" class="btn btn-sm btn-primary" cancel>Close
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </label>
+                        @endfor
+                    </div>
+                @endforeach
+            </div>
+        @endfor
+    </div>
+
+    <div class="row border-top pt-3">
+        <div class="col-12">
+            <div class="d-flex align-items-center mb-2">
+                <span class="font-weight-bold">Custom Items</span>
+                <span class="mx-2 text-secondary">|</span>
+                <div moe>
+                    <a href="#" start show>Add</a>
+                    <div custom-item-form url="/api/sectionTemplateCustomItem/create">
+                        <div class="mb-2">
+                            <input type="text" placeholder="Label"
+                                   v-model="newCustomItemLabel"
+                                   class="form-control form-control-sm label_new_custom_item">
+                        </div>
+                        <div>
+                            <button type="button" class="btn btn-sm btn-primary mr-1"
+                                    v-on:click.prevent="saveCustomItem(newCustomItemLabel)">Submit</button>
+                            <button type="button" class="btn btn-sm btn-default border"
+                                    v-on:click.prevent="cancelCustomItem()">Cancel</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {{-- custom items --}}
+            <div class="d-flex align-items-start flex-wrap custom-items-container">
+                <div class="w-25" v-for="item in customFields">
+                    <label class="d-flex align-items-center mb-1">
+                        <input type="checkbox" class="m-0"
+                               v-model="item.value">
+                        <span class="mx-2">@{{ item.label }}</span>
+                        <div moe>
+                            <a href="#" start show>
+                                <i v-show="item.value" class="fa-comment" :class="item.comments ? 'fas' : 'far'"></i>
+                            </a>
+                            <div url="/nop">
+                                <div class="mb-2">
+                                    <textarea class="form-control form-control-sm ns-custom-comment" v-model="item.comments"></textarea>
+                                </div>
+                                <div class="">
+                                    <button type="button" class="btn btn-sm btn-primary" cancel>Close</button>
+                                </div>
+                            </div>
+                        </div>
+                    </label>
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+    <div class="row mb-3">
+        <div class="col-12">
+            <textarea type="text" class="form-control form-control-sm p-2 mt-2" v-model="comments" placeholder="Comments"></textarea>
+        </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>
+</form>
+<script>
+    (function() {
+        let model = <?= json_encode($contentData) ?>;
+        model.newCustomItemLabel = '';
+        let customFields = <?= json_encode($customFields) ?>;
+        if(!model.customFields) {
+            model.customFields = [];
+        }
+        for (let i = 0; i < customFields.length; i++) {
+            let found = model.customFields.filter(function(_item) {
+                return _item.label === customFields[i];
+            }).length;
+            if(!found) {
+                model.customFields.push({
+                    label: customFields[i],
+                    value: '',
+                    comments: '',
+                })
+            }
+        }
+
+        function init() {
+            window.clientPSHXApp = new Vue({
+                el: '#pshx_{{ $formID }}',
+                data: model,
+                mounted: function () {
+                    $('#pshx_{{ $formID }} [moe][initialized]').removeAttr('initialized');
+                    initMoes();
+                },
+                methods: {
+                    submitForm: function() {
+                        showMask();
+                        let payload = {
+                            uid: '{{$patient->uid}}',
+                            key: 'pshx',
+                            canvasData: JSON.stringify({
+                                common: this.cleanObject(this.common),
+                                customFields: this.customFields,
+                                comments: this.comments,
+                            })
+                        };
+                        console.log('ALIX payload: ', payload);
+                        $.post('/api/client/updateCanvasData', payload, function(_data) {
+                            console.log(_data);
+                            closeStagPopup();
+                            fastReload();
+                        });
+                    },
+                    cleanObject: function(_source) {
+                        let plObject = {};
+                        for (let y in _source) {
+                            if(_source.hasOwnProperty(y)) {
+                                plObject[y] = _source[y];
+                            }
+                        }
+                        return plObject;
+                    },
+                    saveCustomItem: function(_label) {
+                        if(!_label) return false;
+                        showMask();
+                        let self = this;
+                        $.post('/api/clientCanvasCustomItem/create', {
+                            proUid: '{{ $pro->uid }}',
+                            key: 'pshx',
+                            label: _label
+                        }, function(_data) {
+                            hideMask();
+                            if(_data && _data.success) {
+                                self.appendCustomItem(_label);
+                                hideMoeFormMask();
+                                $('[custom-item-form]').hide();
+                            }
+                            else {
+                                toastr.error(_data.message);
+                            }
+                        }, 'json');
+                        return false;
+                    },
+                    cancelCustomItem: function() {
+                        hideMoeFormMask();
+                        $('div[moe]').hide();
+                        return false;
+                    },
+                    appendCustomItem: function(_name) {
+                        this.customFields.push({
+                            label: _name,
+                            value: '',
+                            comments: '',
+                        });
+                        Vue.nextTick(function() {
+                            $('.custom-items-container [moe][initialized]').removeAttr('initialized');
+                            initMoes();
+                        });
+                    }
+                }
+            });
+        }
+        addMCInitializer('client-pshx-{{ $patient->uid }}', init);
+    })();
+</script>

resources/views/app/patient/canvas-sections/pshx/summary.php

@@ -0,0 +1,85 @@
+<?php
+$fields = [
+    [
+        "" => ["Aneurysm repair", "Appendectomy", "Back surgery", "Bariatric surgery/gastric bypass", "Bilateral tubal ligation", "Breast resection/mastectomy", "CABG", "Carotid endarterectomy/stent", "Carpal tunnel release surgery",]
+    ],
+    [
+        "" => ["Cataract/lens surgery", "Cesarean section", "Cholecystectomy/bile duct surgery", "Dilation and curettage", "Hemorrhoid surgery", "Hip arthroplasty", "Hip replacement", "Hysterectomy", "Inguinal hernia repair",]
+    ],
+    [
+        "" => ["Knee arthroplasty", "LASIK", "Laminectomy", "Nasal surgery", "PTCA/PCI", "Pacemaker/defibrillator", "Prostate surgery", "Prostatectomy", "Rotator cuff surgery",]
+    ],
+    [
+        "" => ["Sinus surgery", "Skin cancer excision", "Spinal fusion", "TAH-BSO", "TURP", "Tonsillectomy/Adenoidectomy", "Vasectomy",]
+    ]
+];
+
+$contentData = [
+    "common" => [],
+    "customFields" => [],
+    "comments" => "",
+];
+$isempty = false;
+if ($patient->canvas_data) {
+    $canvasData = json_decode($patient->canvas_data, true);
+    if (isset($canvasData["pshx"])) {
+        $contentData = $canvasData["pshx"];
+    }
+    else {
+        $isempty = true;
+    }
+}
+else {
+    $isempty = true;
+}
+
+if($isempty) {
+    echo '<span class="text-secondary">No surgical history in the system</span>';
+}
+else {
+
+    for ($i = 0; $i < count($fields); $i++):
+        foreach($fields[$i] as $head => $values):
+            for($k = 0; $k < count($values); $k++):
+                $fName = $head . '_' . sanitize_field_name($values[$k]);
+                if(@$contentData['common'][$fName]): ?>
+                    <div>
+                        <span class="font-weight-bold"><?= $values[$k] ?></span>
+                        <?php if(@$contentData['common'][$fName . '__comments']): ?>
+                            <span class="text-sm ml-1 text-secondary">(<?= $contentData['common'][$fName . '__comments'] ?>)</span>
+                        <?php endif; ?>
+                    </div>
+                <?php
+                endif;
+            endfor;
+        endforeach;
+    endfor;
+
+    // custom fields
+    if(count($contentData['customFields'])):
+        ?> <div class="mt-2"> <?php
+        for ($i = 0; $i < count($contentData['customFields']); $i++):
+            $item = $contentData['customFields'][$i];
+            if($item['value']): ?>
+                <div>
+                    Custom
+                    <i class="fa fa-arrow-right text-sm text-secondary"></i>
+                    <span class="font-weight-bold"><?= $item['label'] ?></span>
+                    <?php if($item['comments']): ?>
+                        <span class="text-sm ml-1 text-secondary">(<?= $item['comments'] ?>)</span>
+                    <?php endif; ?>
+                </div>
+            <?php
+            endif;
+        endfor;
+        ?> </div> <?php
+    endif;
+
+    if(isset($contentData['comments'])) { ?>
+        <div class="mt-2 mb-1">
+            <div class="font-weight-bold">Comments:</div>
+            <div><?= $contentData['comments'] ?></div>
+        </div>
+    <?php }
+}
+?>

resources/views/app/patient/canvas-sections/sochx/form.blade.php

@@ -0,0 +1,243 @@
+<?php
+
+$fields = [
+    [
+        "Tobacco" => ["Current every day smoker", "Current some day smoker", "Former smoker", "Heavy tobacco smoker", "Light tobacco smoker", "Never smoker", "Smoker, current status unknown", "Unknown if ever smoked "],
+    ],
+    [
+        "Alcohol" => ["Do not drink", "Drink daily", "Frequently drink", "Hx of Alcoholism", "Occasional drink"],
+        "Drug Abuse" => ["IVDU", "Illicit drug use", "No illicit drug use"],
+    ],
+    [
+        "Cardiovascular" => ["Eat healthy meals", "Regular exercise", "Take daily aspirin"],
+        "Safety" => ["Household Smoke detector", "Keep Firearms in home", "Wear seatbelts"],
+    ],
+    [
+        "Sexual Activity" => ["Exposure to STI", "Homosexual encounters", "Not sexually active", "Safe sex practices", "Sexually active"],
+        "Birth Gender" => ["Male", "Female", "Undifferentiated"],
+    ]
+];
+
+$customFields = $pro->canvasCustomItems('sochx');
+$customFields = array_map(function($_item) {
+    return $_item['label'];
+}, $customFields->toArray());
+
+$formID = rand(0, 100000);
+?>
+<?php
+$contentData = [
+    "common" => [],
+    "custom" => [],
+    "comments" => "",
+];
+if ($patient->canvas_data) {
+    $canvasData = json_decode($patient->canvas_data, true);
+    if (isset($canvasData["sochx"])) {
+        $contentData = $canvasData["sochx"];
+    }
+}
+?>
+<form method="POST" action="/api/client/updateCanvasData"
+      id="sochx_{{ $formID }}" v-on:submit.prevent="submitForm()">
+    <input type="hidden" name="uid" value="{{$patient->uid}}">
+    <input type="hidden" name="key" value="sochx">
+
+    <div class="row">
+        @for ($i = 0; $i < count($fields); $i++)
+            <div class="col-md-3">
+                @foreach($fields[$i] as $head => $values)
+                    <div class="font-weight-bold mb-2">{{ $head }}</div>
+                    <div class="mb-3">
+                        @for($k = 0; $k < count($values); $k++)
+                            <?php $fName = $head . '_' . sanitize_field_name($values[$k]); ?>
+                            <label class="d-flex align-items-center mb-1">
+                                <input type="checkbox" name="{{ $fName }}" class="m-0"
+                                       v-model="common['{{$fName}}']">
+                                <span class="mx-2">{{ $values[$k] }}</span>
+                                <div moe>
+                                    <a href="#" start show>
+                                        <i v-show="common['{{$fName}}']" class="fa-comment" :class="common['{{$fName}}__comments'] ? 'fas' : 'far'"></i>
+                                    </a>
+                                    <div url="/nop">
+                                        <div class="mb-2">
+                                            <textarea class="form-control form-control-sm ns-custom-comment"
+                                                      v-model="common['{{$fName}}__comments']"></textarea>
+                                        </div>
+                                        <div class="">
+                                            <button type="button" class="btn btn-sm btn-primary" cancel>Close
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </label>
+                        @endfor
+                    </div>
+                @endforeach
+            </div>
+        @endfor
+    </div>
+
+    <div class="row border-top pt-3">
+        <div class="col-12">
+            <div class="d-flex align-items-center mb-2">
+                <span class="font-weight-bold">Custom Items</span>
+                <span class="mx-2 text-secondary">|</span>
+                <div moe>
+                    <a href="#" start show>Add</a>
+                    <div custom-item-form url="/api/sectionTemplateCustomItem/create">
+                        <div class="mb-2">
+                            <input type="text" placeholder="Label"
+                                   v-model="newCustomItemLabel"
+                                   class="form-control form-control-sm label_new_custom_item">
+                        </div>
+                        <div>
+                            <button type="button" class="btn btn-sm btn-primary mr-1"
+                                    v-on:click.prevent="saveCustomItem(newCustomItemLabel)">Submit</button>
+                            <button type="button" class="btn btn-sm btn-default border"
+                                    v-on:click.prevent="cancelCustomItem()">Cancel</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {{-- custom items --}}
+            <div class="d-flex align-items-start flex-wrap custom-items-container">
+                <div class="w-25" v-for="item in customFields">
+                    <label class="d-flex align-items-center mb-1">
+                        <input type="checkbox" class="m-0"
+                               v-model="item.value">
+                        <span class="mx-2">@{{ item.label }}</span>
+                        <div moe>
+                            <a href="#" start show>
+                                <i v-show="item.value" class="fa-comment" :class="item.comments ? 'fas' : 'far'"></i>
+                            </a>
+                            <div url="/nop">
+                                <div class="mb-2">
+                                    <textarea class="form-control form-control-sm ns-custom-comment" v-model="item.comments"></textarea>
+                                </div>
+                                <div class="">
+                                    <button type="button" class="btn btn-sm btn-primary" cancel>Close</button>
+                                </div>
+                            </div>
+                        </div>
+                    </label>
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+    <div class="row mb-3">
+        <div class="col-12">
+            <textarea type="text" class="form-control form-control-sm p-2 mt-2" v-model="comments" placeholder="Comments"></textarea>
+        </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 closeStagPopup()">Cancel</button>
+    </div>
+</form>
+<script>
+    (function() {
+        let model = <?= json_encode($contentData) ?>;
+        model.newCustomItemLabel = '';
+        let customFields = <?= json_encode($customFields) ?>;
+        if(!model.customFields) {
+            model.customFields = [];
+        }
+        for (let i = 0; i < customFields.length; i++) {
+            let found = model.customFields.filter(function(_item) {
+                return _item.label === customFields[i];
+            }).length;
+            if(!found) {
+                model.customFields.push({
+                    label: customFields[i],
+                    value: '',
+                    comments: '',
+                })
+            }
+        }
+
+        function init() {
+            window.clientSocHXApp = new Vue({
+                el: '#sochx_{{ $formID }}',
+                data: model,
+                mounted: function () {
+                    $('#sochx_{{ $formID }} [moe][initialized]').removeAttr('initialized');
+                    initMoes();
+                },
+                methods: {
+                    submitForm: function() {
+                        showMask();
+                        let payload = {
+                            uid: '{{$patient->uid}}',
+                            key: 'sochx',
+                            canvasData: JSON.stringify({
+                                bloodType: this.bloodType,
+                                bloodRH: this.bloodRH,
+                                common: this.cleanObject(this.common),
+                                customFields: this.customFields,
+                                comments: this.comments,
+                            })
+                        };
+                        console.log('ALIX payload: ', payload);
+                        $.post('/api/client/updateCanvasData', payload, function(_data) {
+                            console.log(_data);
+                            closeStagPopup();
+                            fastReload();
+                        });
+                    },
+                    cleanObject: function(_source) {
+                        let plObject = {};
+                        for (let y in _source) {
+                            if(_source.hasOwnProperty(y)) {
+                                plObject[y] = _source[y];
+                            }
+                        }
+                        return plObject;
+                    },
+                    saveCustomItem: function(_label) {
+                        if(!_label) return false;
+                        showMask();
+                        let self = this;
+                        $.post('/api/clientCanvasCustomItem/create', {
+                            proUid: '{{ $pro->uid }}',
+                            key: 'sochx',
+                            label: _label
+                        }, function(_data) {
+                            hideMask();
+                            if(_data && _data.success) {
+                                self.appendCustomItem(_label);
+                                hideMoeFormMask();
+                                $('[custom-item-form]').hide();
+                            }
+                            else {
+                                toastr.error(_data.message);
+                            }
+                        }, 'json');
+                        return false;
+                    },
+                    cancelCustomItem: function() {
+                        hideMoeFormMask();
+                        $('div[moe]').hide();
+                        return false;
+                    },
+                    appendCustomItem: function(_name) {
+                        this.customFields.push({
+                            label: _name,
+                            value: '',
+                            comments: '',
+                        });
+                        Vue.nextTick(function() {
+                            $('.custom-items-container [moe][initialized]').removeAttr('initialized');
+                            initMoes();
+                        });
+                    }
+                }
+            });
+        }
+        addMCInitializer('client-sochx-{{ $patient->uid }}', init);
+    })();
+</script>

resources/views/app/patient/canvas-sections/sochx/summary.php

@@ -0,0 +1,90 @@
+<?php
+$fields = [
+    [
+        "Tobacco" => ["Current every day smoker", "Current some day smoker", "Former smoker", "Heavy tobacco smoker", "Light tobacco smoker", "Never smoker", "Smoker, current status unknown", "Unknown if ever smoked "],
+    ],
+    [
+        "Alcohol" => ["Do not drink", "Drink daily", "Frequently drink", "Hx of Alcoholism", "Occasional drink"],
+        "Drug Abuse" => ["IVDU", "Illicit drug use", "No illicit drug use"],
+    ],
+    [
+        "Cardiovascular" => ["Eat healthy meals", "Regular exercise", "Take daily aspirin"],
+        "Safety" => ["Household Smoke detector", "Keep Firearms in home", "Wear seatbelts"],
+    ],
+    [
+        "Sexual Activity" => ["Exposure to STI", "Homosexual encounters", "Not sexually active", "Safe sex practices", "Sexually active"],
+        "Birth Gender" => ["Male", "Female", "Undifferentiated"],
+    ]
+];
+
+$contentData = [
+    "common" => [],
+    "customFields" => [],
+    "comments" => "",
+];
+$isempty = false;
+if ($patient->canvas_data) {
+    $canvasData = json_decode($patient->canvas_data, true);
+    if (isset($canvasData["sochx"])) {
+        $contentData = $canvasData["sochx"];
+    }
+    else {
+        $isempty = true;
+    }
+}
+else {
+    $isempty = true;
+}
+
+if($isempty) {
+    echo '<span class="text-secondary">No social history in the system</span>';
+}
+else {
+
+    for ($i = 0; $i < count($fields); $i++):
+        foreach($fields[$i] as $head => $values):
+            for($k = 0; $k < count($values); $k++):
+                $fName = $head . '_' . sanitize_field_name($values[$k]);
+                if(@$contentData['common'][$fName]): ?>
+                    <div>
+                        <?= ucwords($head) ?>
+                        <i class="fa fa-arrow-right text-sm text-secondary"></i>
+                        <span class="font-weight-bold"><?= $values[$k] ?></span>
+                        <?php if(@$contentData['common'][$fName . '__comments']): ?>
+                            <span class="text-sm ml-1 text-secondary">(<?= $contentData['common'][$fName . '__comments'] ?>)</span>
+                        <?php endif; ?>
+                    </div>
+                <?php
+                endif;
+            endfor;
+        endforeach;
+    endfor;
+
+    // custom fields
+    if(count($contentData['customFields'])):
+        ?> <div class="mt-2"> <?php
+        for ($i = 0; $i < count($contentData['customFields']); $i++):
+            $item = $contentData['customFields'][$i];
+            if($item['value']): ?>
+                <div>
+                    Custom
+                    <i class="fa fa-arrow-right text-sm text-secondary"></i>
+                    <span class="font-weight-bold"><?= $item['label'] ?></span>
+                    <?php if($item['comments']): ?>
+                        <span class="text-sm ml-1 text-secondary">(<?= $item['comments'] ?>)</span>
+                    <?php endif; ?>
+                </div>
+            <?php
+            endif;
+        endfor;
+        ?> </div> <?php
+    endif;
+
+    if(isset($contentData['comments'])) { ?>
+        <div class="mt-2 mb-1">
+            <div class="font-weight-bold">Comments:</div>
+            <div><?= $contentData['comments'] ?></div>
+        </div>
+    <?php }
+}
+?>

resources/views/app/patient/dashboard.blade.php

@@ -313,323 +313,75 @@
                 </div>
 
                 {{-- history_medical --}}
-                {{--<div class="mt-2">
+                <div class="pl-2 mt-2">
                     <div class="d-flex align-items-center pb-2">
-                        <h6 class="my-0 font-weight-bold">Medical</h6>
+                        <h6 class="my-0 font-weight-bold">Medical History</h6>
                         <span class="mx-2 text-secondary">|</span>
-                        <div moe>
-                            <a start show class="py-0 font-weight-normal">Add</a>
-                            <form url="/api/clientInfoLine/create">
-                                <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
-                                <input type="hidden" name="category" value="history_medical">
-                                <div class="mb-2"><input type="text" class="form-control form-control-sm" name="contentText" value="" placeholder="Medical History"></div>
-                                <div class="d-flex align-items-center">
-                                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                </div>
-                            </form>
+                        <div>
+                            <a class="py-0 font-weight-normal show-fhx-edit c-pointer" onclick="showStagPopup('client-pmhx')">Edit</a>
+                            <div class="stag-popup mcp-theme-1" stag-popup-key="client-pmhx">
+                                @include('app.patient.canvas-sections.pmhx.form')
+                            </div>
                         </div>
-                         <span class="mx-2 text-secondary">|</span>
-
-            <div moe>
-                <a start show class="">Multi</a>
-                <form url="/api/clientInfoLine/createMultiple">
-                    <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
-                    <input type="hidden" name="category" value="history_medical">
-                    <div class="mb-2"><textarea class="form-control form-control-sm" rows="8" name="contentTexts" value="" placeholder="Lines..."></textarea></div>
-                    <div class="d-flex align-items-center">
-                        <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                        <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
                     </div>
-                </form>
-            </div>
+                    <div class="bg-light border p-2 mb-3">
+                        @include('app.patient.canvas-sections.pmhx.summary')
                     </div>
-                    <table class="table table-sm border-0 m-0">
-                        <tbody>
-                        @foreach($infoLines as $category => $lines)
-                            @if($category === "history_medical")
-                                @foreach ($lines as $line)
-                                    <tr>
-                                        <td class="pl-4 py-0 border-0">
-                                            <div class="d-flex">
-                                                <span moe relative class="mr-2">
-                                                    <a class="on-hover-opaque" start show title="Delete"><i class="font-size-11 fa fa-trash-alt text-danger"></i></a>
-                                                    <form url="/api/clientInfoLine/remove">
-                                                        <input type="hidden" name="uid" value="{{ $line->uid }}">
-                                                        <p class="small">Are you sure you want to delete this entry?</p>
-                                                        <div class="d-flex align-items-center">
-                                                            <button class="btn btn-sm btn-danger mr-2" submit>Delete</button>
-                                                            <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                                        </div>
-                                                    </form>
-                                                </span>
-                                                <div moe relative class="mr-2">
-                                                    <a class="on-hover-opaque" start show title="Edit">
-                                                        <i class="font-size-11 fa fa-edit"></i>
-                                                    </a>
-                                                    <form url="/api/clientInfoLine/updateContent">
-                                                        <input type="hidden" name="uid" value="{{ $line->uid }}">
-                                                        <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
-                                                        <input type="hidden" name="category" value="history_medical">
-                                                        <div class="mb-2"><input type="text" class="form-control form-control-sm" name="contentText" value="{{$line->contentText}}" placeholder="History"></div>
-                                                        <div class="d-flex align-items-center">
-                                                            <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                                                            <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                                        </div>
-                                                    </form>
-                                                </div>
-                                                <span class="">{{$line->contentText}}</span>
-                                            </div>
-                                        </td>
-                                    </tr>
-                                @endforeach
-                            @endif
-                        @endforeach
-                        </tbody>
-                    </table>
-                </div>--}}
+                </div>
 
                 {{-- history_surgical --}}
-                <div class="mt-2">
+                <div class="pl-2 mt-2">
                     <div class="d-flex align-items-center pb-2">
-                        <h6 class="my-0 font-weight-bold">Surgical</h6>
+                        <h6 class="my-0 font-weight-bold">Surgical History</h6>
                         <span class="mx-2 text-secondary">|</span>
-                        <div moe>
-                            <a start show class="py-0 font-weight-normal">Add</a>
-                            <form url="/api/clientInfoLine/create">
-                                <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
-                                <input type="hidden" name="category" value="history_surgical">
-                                <div class="mb-2"><input type="text" class="form-control form-control-sm" name="contentText" value="" placeholder="Surgical History"></div>
-                                <div class="d-flex align-items-center">
-                                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                </div>
-                            </form>
+                        <div>
+                            <a class="py-0 font-weight-normal show-fhx-edit c-pointer" onclick="showStagPopup('client-pshx')">Edit</a>
+                            <div class="stag-popup mcp-theme-1" stag-popup-key="client-pshx">
+                                @include('app.patient.canvas-sections.pshx.form')
+                            </div>
                         </div>
-
-                         <span class="mx-2 text-secondary">|</span>
-
-            <div moe>
-                <a start show class="">Multi</a>
-                <form url="/api/clientInfoLine/createMultiple">
-                    <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
-                    <input type="hidden" name="category" value="history_surgical">
-                    <div class="mb-2"><textarea class="form-control form-control-sm" rows="8" name="contentTexts" value="" placeholder="Lines..."></textarea></div>
-                    <div class="d-flex align-items-center">
-                        <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                        <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
                     </div>
-                </form>
-            </div>
-
+                    <div class="bg-light border p-2 mb-3">
+                        @include('app.patient.canvas-sections.pshx.summary')
                     </div>
-                    <table class="table table-sm border-0 m-0">
-                        <tbody>
-                        @foreach($infoLines as $category => $lines)
-                            @if($category === "history_surgical")
-                                @foreach ($lines as $line)
-                                    <tr>
-                                        <td class="pl-4 py-0 border-0">
-                                            <div class="d-flex">
-                                                <span moe relative class="mr-2">
-                                                    <a class="on-hover-opaque" start show title="Delete"><i class="font-size-11 fa fa-trash-alt text-danger"></i></a>
-                                                    <form url="/api/clientInfoLine/remove">
-                                                        <input type="hidden" name="uid" value="{{ $line->uid }}">
-                                                        <p class="small">Are you sure you want to delete this entry?</p>
-                                                        <div class="d-flex align-items-center">
-                                                            <button class="btn btn-sm btn-danger mr-2" submit>Delete</button>
-                                                            <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                                        </div>
-                                                    </form>
-                                                </span>
-                                                <div moe relative class="mr-2">
-                                                    <a class="on-hover-opaque" start show title="Edit">
-                                                        <i class="font-size-11 fa fa-edit"></i>
-                                                    </a>
-                                                    <form url="/api/clientInfoLine/updateContent">
-                                                        <input type="hidden" name="uid" value="{{ $line->uid }}">
-                                                        <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
-                                                        <input type="hidden" name="category" value="history_surgical">
-                                                        <div class="mb-2"><input type="text" class="form-control form-control-sm" name="contentText" value="{{$line->contentText}}" placeholder="History"></div>
-                                                        <div class="d-flex align-items-center">
-                                                            <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                                                            <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                                        </div>
-                                                    </form>
-                                                </div>
-                                                <span class="">{{$line->contentText}}</span>
-                                            </div>
-                                        </td>
-                                    </tr>
-                                @endforeach
-                            @endif
-                        @endforeach
-                        </tbody>
-                    </table>
                 </div>
 
                 {{-- history_family --}}
-                <div class="mt-2">
+                <div class="pl-2 mt-2">
                     <div class="d-flex align-items-center pb-2">
-                        <h6 class="my-0 font-weight-bold">Family</h6>
+                        <h6 class="my-0 font-weight-bold">Family History</h6>
                         <span class="mx-2 text-secondary">|</span>
-                        <div moe>
-                            <a start show class="py-0 font-weight-normal">Add</a>
-                            <form url="/api/clientInfoLine/create">
-                                <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
-                                <input type="hidden" name="category" value="history_family">
-                                <div class="mb-2"><input type="text" class="form-control form-control-sm" name="contentText" value="" placeholder="Family History"></div>
-                                <div class="d-flex align-items-center">
-                                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                </div>
-                            </form>
+                        <div>
+                            <a class="py-0 font-weight-normal show-fhx-edit c-pointer" onclick="showStagPopup('client-fhx')">Edit</a>
+                            <div class="stag-popup mcp-theme-1" stag-popup-key="client-fhx">
+                                @include('app.patient.canvas-sections.fhx.form')
+                            </div>
                         </div>
-
-                         <span class="mx-2 text-secondary">|</span>
-
-            <div moe>
-                <a start show class="">Multi</a>
-                <form url="/api/clientInfoLine/createMultiple">
-                    <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
-                    <input type="hidden" name="category" value="history_family">
-                    <div class="mb-2"><textarea class="form-control form-control-sm" rows="8" name="contentTexts" value="" placeholder="Lines..."></textarea></div>
-                    <div class="d-flex align-items-center">
-                        <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                        <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
                     </div>
-                </form>
-            </div>
-
+                    <div class="bg-light border p-2 mb-3">
+                        @include('app.patient.canvas-sections.fhx.summary')
                     </div>
-                    <table class="table table-sm border-0 m-0">
-                        <tbody>
-                        @foreach($infoLines as $category => $lines)
-                            @if($category === "history_family")
-                                @foreach ($lines as $line)
-                                    <tr>
-                                        {{--<td class="px-2">{{$category}}</td>--}}
-                                        <td class="pl-4 py-0 border-0">
-                                            <div class="d-flex">
-                                                <span moe relative class="mr-2">
-                                                    <a class="on-hover-opaque" start show title="Delete"><i class="font-size-11 fa fa-trash-alt text-danger"></i></a>
-                                                    <form url="/api/clientInfoLine/remove">
-                                                        <input type="hidden" name="uid" value="{{ $line->uid }}">
-                                                        <p class="small">Are you sure you want to delete this entry?</p>
-                                                        <div class="d-flex align-items-center">
-                                                            <button class="btn btn-sm btn-danger mr-2" submit>Delete</button>
-                                                            <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                                        </div>
-                                                    </form>
-                                                </span>
-                                                <div moe relative class="mr-2">
-                                                    <a class="on-hover-opaque" start show title="Edit">
-                                                        <i class="font-size-11 fa fa-edit"></i>
-                                                    </a>
-                                                    <form url="/api/clientInfoLine/updateContent">
-                                                        <input type="hidden" name="uid" value="{{ $line->uid }}">
-                                                        <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
-                                                        <input type="hidden" name="category" value="history_family">
-                                                        <div class="mb-2"><input type="text" class="form-control form-control-sm" name="contentText" value="{{$line->contentText}}" placeholder="History"></div>
-                                                        <div class="d-flex align-items-center">
-                                                            <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                                                            <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                                        </div>
-                                                    </form>
-                                                </div>
-                                                <span class="">{{$line->contentText}}</span>
-                                            </div>
-                                        </td>
-                                    </tr>
-                                @endforeach
-                            @endif
-                        @endforeach
-                        </tbody>
-                    </table>
                 </div>
 
                 {{-- history_social --}}
-                <div class="mt-2">
+                <div class="pl-2 mt-2">
                     <div class="d-flex align-items-center pb-2">
-                        <h6 class="my-0 font-weight-bold">Social</h6>
+                        <h6 class="my-0 font-weight-bold">Social History</h6>
                         <span class="mx-2 text-secondary">|</span>
-                        <div moe>
-                            <a start show class="py-0 font-weight-normal">Add</a>
-                            <form url="/api/clientInfoLine/create">
-                                <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
-                                <input type="hidden" name="category" value="history_social">
-                                <div class="mb-2"><input type="text" class="form-control form-control-sm" name="contentText" value="" placeholder="Social History"></div>
-                                <div class="d-flex align-items-center">
-                                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                </div>
-                            </form>
+                        <div>
+                            <a class="py-0 font-weight-normal show-fhx-edit c-pointer" onclick="showStagPopup('client-sochx')">Edit</a>
+                            <div class="stag-popup mcp-theme-1" stag-popup-key="client-sochx">
+                                @include('app.patient.canvas-sections.sochx.form')
+                            </div>
                         </div>
-
-
-                         <span class="mx-2 text-secondary">|</span>
-
-            <div moe>
-                <a start show class="">Multi</a>
-                <form url="/api/clientInfoLine/createMultiple">
-                    <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
-                    <input type="hidden" name="category" value="history_social">
-                    <div class="mb-2"><textarea class="form-control form-control-sm" rows="8" name="contentTexts" value="" placeholder="Lines..."></textarea></div>
-                    <div class="d-flex align-items-center">
-                        <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                        <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
                     </div>
-                </form>
-            </div>
-</div>
-                    <table class="table table-sm border-0 m-0">
-                        <tbody>
-                        @foreach($infoLines as $category => $lines)
-                            @if($category === "history_social")
-                                @foreach ($lines as $line)
-                                    <tr>
-                                        {{--<td class="px-2">{{$category}}</td>--}}
-                                        <td class="pl-4 py-0 border-0">
-                                            <div class="d-flex">
-                                                <span moe relative class="mr-2">
-                                                    <a class="on-hover-opaque" start show title="Delete"><i class="font-size-11 fa fa-trash-alt text-danger"></i></a>
-                                                    <form url="/api/clientInfoLine/remove">
-                                                        <input type="hidden" name="uid" value="{{ $line->uid }}">
-                                                        <p class="small">Are you sure you want to delete this entry?</p>
-                                                        <div class="d-flex align-items-center">
-                                                            <button class="btn btn-sm btn-danger mr-2" submit>Delete</button>
-                                                            <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                                        </div>
-                                                    </form>
-                                                </span>
-                                                <div moe relative class="mr-2">
-                                                    <a class="on-hover-opaque" start show title="Edit">
-                                                        <i class="font-size-11 fa fa-edit"></i>
-                                                    </a>
-                                                    <form url="/api/clientInfoLine/updateContent">
-                                                        <input type="hidden" name="uid" value="{{ $line->uid }}">
-                                                        <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
-                                                        <input type="hidden" name="category" value="history_social">
-                                                        <div class="mb-2"><input type="text" class="form-control form-control-sm" name="contentText" value="{{$line->contentText}}" placeholder="History"></div>
-                                                        <div class="d-flex align-items-center">
-                                                            <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                                                            <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                                        </div>
-                                                    </form>
-                                                </div>
-                                                <span class="">{{$line->contentText}}</span>
-                                            </div>
-                                        </td>
-                                    </tr>
-                                @endforeach
-                            @endif
-                        @endforeach
-                        </tbody>
-                    </table>
+                    <div class="bg-light border p-2 mb-3">
+                        @include('app.patient.canvas-sections.sochx.summary')
+                    </div>
                 </div>
 
                 {{-- history_ob_and_preg --}}
-                <div class="mt-2">
+                <div class="pl-2 mt-2">
                     <div class="d-flex align-items-center pb-2">
                         <h6 class="my-0 font-weight-bold">OB & Pregnancy</h6>
                         <span class="mx-2 text-secondary">|</span>
@@ -645,22 +397,19 @@
                                 </div>
                             </form>
                         </div>
-
-                         <span class="mx-2 text-secondary">|</span>
-
-            <div moe>
-                <a start show class="">Multi</a>
-                <form url="/api/clientInfoLine/createMultiple">
-                    <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
-                    <input type="hidden" name="category" value="history_ob_and_preg">
-                    <div class="mb-2"><textarea class="form-control form-control-sm" rows="8" name="contentTexts" value="" placeholder="Lines..."></textarea></div>
-                    <div class="d-flex align-items-center">
-                        <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                        <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                    </div>
-                </form>
-            </div>
-
+                        <span class="mx-2 text-secondary">|</span>
+                        <div moe>
+                            <a start show class="">Multi</a>
+                            <form url="/api/clientInfoLine/createMultiple">
+                                <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
+                                <input type="hidden" name="category" value="history_ob_and_preg">
+                                <div class="mb-2"><textarea class="form-control form-control-sm" rows="8" name="contentTexts" value="" placeholder="Lines..."></textarea></div>
+                                <div class="d-flex align-items-center">
+                                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
+                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
+                                </div>
+                            </form>
+                        </div>
                     </div>
                     <table class="table table-sm border-0 m-0">
                         <tbody>
@@ -709,7 +458,7 @@
                 </div>
 
                 {{-- history_hospitalizations_procedures --}}
-                <div class="mt-2">
+                <div class="pl-2 mt-2">
                     <div class="d-flex align-items-center pb-2">
                         <h6 class="my-0 font-weight-bold">Hospitalizations / Procedures</h6>
                         <span class="mx-2 text-secondary">|</span>
@@ -725,22 +474,19 @@
                                 </div>
                             </form>
                         </div>
-
-                         <span class="mx-2 text-secondary">|</span>
-
-            <div moe>
-                <a start show class="">Multi</a>
-                <form url="/api/clientInfoLine/createMultiple">
-                    <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
-                    <input type="hidden" name="category" value="history_hospitalizations_procedures">
-                    <div class="mb-2"><textarea class="form-control form-control-sm" rows="8" name="contentTexts" value="" placeholder="Lines..."></textarea></div>
-                    <div class="d-flex align-items-center">
-                        <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                        <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                    </div>
-                </form>
-            </div>
-
+                        <span class="mx-2 text-secondary">|</span>
+                        <div moe>
+                            <a start show class="">Multi</a>
+                            <form url="/api/clientInfoLine/createMultiple">
+                                <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
+                                <input type="hidden" name="category" value="history_hospitalizations_procedures">
+                                <div class="mb-2"><textarea class="form-control form-control-sm" rows="8" name="contentTexts" value="" placeholder="Lines..."></textarea></div>
+                                <div class="d-flex align-items-center">
+                                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
+                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
+                                </div>
+                            </form>
+                        </div>
                     </div>
                     <table class="table table-sm border-0 m-0">
                         <tbody>
@@ -789,7 +535,7 @@
                 </div>
 
                 {{-- history_screenings --}}
-                <div class="mt-2">
+                <div class="pl-2 mt-2">
                     <div class="d-flex align-items-center pb-2">
                         <h6 class="my-0 font-weight-bold">Screenings</h6>
                         <span class="mx-2 text-secondary">|</span>
@@ -805,23 +551,19 @@
                                 </div>
                             </form>
                         </div>
-
-                         <span class="mx-2 text-secondary">|</span>
-
-            <div moe>
-                <a start show class="">Multi</a>
-                <form url="/api/clientInfoLine/createMultiple">
-                    <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
-                    <input type="hidden" name="category" value="history_screenings">
-                    <div class="mb-2"><textarea class="form-control form-control-sm" rows="8" name="contentTexts" value="" placeholder="Lines..."></textarea></div>
-                    <div class="d-flex align-items-center">
-                        <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                        <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                    </div>
-                </form>
-            </div>
-
-
+                        <span class="mx-2 text-secondary">|</span>
+                        <div moe>
+                            <a start show class="">Multi</a>
+                            <form url="/api/clientInfoLine/createMultiple">
+                                <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
+                                <input type="hidden" name="category" value="history_screenings">
+                                <div class="mb-2"><textarea class="form-control form-control-sm" rows="8" name="contentTexts" value="" placeholder="Lines..."></textarea></div>
+                                <div class="d-flex align-items-center">
+                                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
+                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
+                                </div>
+                            </form>
+                        </div>
                     </div>
                     <table class="table table-sm border-0 m-0">
                         <tbody>
@@ -870,7 +612,7 @@
                 </div>
 
                 {{-- history_colonoscopy --}}
-                <div class="mt-2">
+                <div class="pl-2 mt-2">
                     <div class="d-flex align-items-center pb-2">
                         <h6 class="my-0 font-weight-bold">Colonoscopy</h6>
                         <span class="mx-2 text-secondary">|</span>
@@ -934,7 +676,7 @@
                 </div>
 
                 {{-- history_mammogram --}}
-                <div class="mt-2">
+                <div class="pl-2 mt-2">
                     <div class="d-flex align-items-center pb-2">
                         <h6 class="my-0 font-weight-bold">Mammogram</h6>
                         <span class="mx-2 text-secondary">|</span>

resources/views/layouts/template.blade.php

@@ -257,6 +257,31 @@
             }, 2500);
         });
     </script>
+    <script>
+        function showStagPopup(_key) {
+            $('html, body').addClass('no-scroll');
+            let stagPopup = $('[stag-popup-key="' + _key + '"]');
+            stagPopup.addClass('show');
+            stagPopup.find('[moe][initialized]').removeAttr('initialized');
+            initMoes();
+            return false;
+        }
+        function closeStagPopup() {
+            $('.stag-popup').removeClass('show');
+            $('html, body').removeClass('no-scroll');
+            return false;
+        }
+        (function() {
+            window.initStagPopupEvents = function () {
+                $(document).on('click', '.stag-popup', function(_e) {
+                    if($(_e.target).is('.stag-popup')) {
+                        closeStagPopup();
+                    }
+                });
+            }
+            addMCInitializer('stag-popups', window.initStagPopupEvents);
+        })();
+    </script>
     <script>
         (function() {
             window.initAutoRxAndICDComplete = function () {