Visit UI - social hx - custom item fix

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

@@ -1,18 +1,12 @@
 <?php
 
-use App\Models\Point;
 use App\Models\Client;
+use App\Models\Point;
 use App\Models\Note;
-use App\Models\Segment;
-
 /** @var Client $patient */
 /** @var Note $note */
 /** @var Segment $segment */
 
-$point = Point::getGlobalSingletonOfCategory($patient, 'SOCIAL_HISTORY',true);
-
-$socHx = $point ? $point->data : null;
-
 $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 "],
@@ -31,237 +25,219 @@ $fields = [
     ]
 ];
 
-$customFields = [];
-/*
- // TODO
 $customFields = $pro->canvasCustomItems('sochx');
 $customFields = array_map(function($_item) {
     return $_item['label'];
 }, $customFields->toArray());
-*/
-if (!$socHx) {
-    $socHx = [
+
+if(!$customFields) $customFields = [];
+
+$point = Point::getGlobalSingletonOfCategory($patient, 'SOCIAL_HISTORY',true);
+
+$contentData = $parsed = @$point && @$point->data ? $point->data : false;
+
+if(!$contentData) {
+    $contentData = [
         "common" => [],
         "custom" => [],
         "comments" => "",
     ];
 }
 
-$contentData = $socHx;
 ?>
-<div visit-moe close-on-save close-on-cancel class="d-block">
-    <form show url="/api/visitPoint/upsertGlobalSingleton" class="mcp-theme-1">
-        <input type="hidden" name="segmentUid" value="<?= $segment->uid ?>">
-        <input type="hidden" name="category" value="SOCIAL_HISTORY">
-        <input type="hidden" name="data">
-        <div class="row">
-            <?php for ($i = 0; $i < count($fields); $i++): ?>
-                <div class="col-md-3">
-                    <?php foreach ($fields[$i] as $head => $values): ?>
-                        <div class="font-weight-bold mb-2"><?= $head ?></div>
-                        <div class="mb-3">
-                            <?php 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" class="m-0"
-                                           data-name="common-><?= $fName ?>"
-                                        <?= @$contentData['common'][$fName] ? 'checked' : '' ?>
-                                    >
-                                    <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"
-                                                  data-name="common['<?= $fName ?>__comments']"></textarea>
-                                            </div>
-                                            <div class="">
-                                                <button type="button" class="btn btn-sm btn-primary" cancel>Close
-                                                </button>
+
+<div class="p-3 border-top mt-3 mcp-theme-1">
+    <div visit-moe close-on-save close-on-cancel class="d-block">
+        <form show url="/api/visitPoint/upsertGlobalSingleton" class="mcp-theme-1">
+            <input type="hidden" name="segmentUid" value="<?= $segment->uid ?>">
+            <input type="hidden" name="category" value="SOCIAL_HISTORY">
+            <input type="hidden" name="data">
+
+            <div id="edit-univ_history_social-container">
+                <div class="d-flex align-items-start flex-wrap custom-items-container">
+                    @for ($i = 0; $i < count($fields); $i++)
+                        <div class="w-25">
+                            @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-start mb-1">
+                                            <input type="checkbox" name="{{ $fName }}" class="mx-0 mt-1"
+                                                   v-model="common['{{$fName}}']">
+                                            <div class="ml-2">
+                                                <div>
+                                                    <span class="mr-2">{{ $values[$k] }}</span>
+                                                    <div moe relative no-mask v-show="common['{{$fName}}']" >
+                                                        <a href="#" start show>
+                                                            <i class="fa-comment" :class="common['{{$fName}}__comments'] ? 'fas' : 'far'"></i>
+                                                        </a>
+                                                        <div url="/nop" right>
+                                                            <div class="mb-2">
+                                                                <textarea class="form-control form-control-sm ns-custom-comment min-width-200px"
+                                                                          v-model="common['{{$fName}}__comments']"></textarea>
+                                                            </div>
+                                                            <div class="">
+                                                                <button type="button" class="btn btn-sm btn-primary" cancel>Close
+                                                                </button>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <span v-show="common['{{$fName}}'] && common['{{$fName}}__comments']"
+                                                      v-html="common['{{$fName}}__comments']"
+                                                      class="text-sm text-secondary">
+                                                </span>
                                             </div>
-                                        </div>
-                                    </div>-->
-                                </label>
-                            <?php endfor; ?>
+                                        </label>
+                                    @endfor
+                                </div>
+                            @endforeach
                         </div>
-                    <?php endforeach; ?>
+                    @endfor
                 </div>
-            <?php endfor; ?>
-        </div>
-
-        <?php /*
-            <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 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>
-                    </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>
+                        {{-- 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-start mb-1">
+                                    <input type="checkbox" class="mx-0 mt-1"
+                                           v-model="item.value">
+                                    <div class="ml-2 pr-3">
+                                        <div>
+                                            <span class="mr-2">@{{ item.label }}</span>
+                                            <div moe relative no-mask v-show="item.value" >
+                                                <a href="#" start show>
+                                                    <i class="fa-comment" :class="item.comments ? 'fas' : 'far'"></i>
+                                                </a>
+                                                <div url="/nop" right>
+                                                    <div class="mb-2">
+                                                        <textarea class="form-control form-control-sm ns-custom-comment min-width-200px" v-model="item.comments"></textarea>
+                                                    </div>
+                                                    <div class="">
+                                                        <button type="button" class="btn btn-sm btn-primary" cancel>Close</button>
+                                                    </div>
+                                                </div>
+                                            </div>
                                         </div>
+                                        <span v-show="item.value && item.comments"
+                                              v-html="item.comments"
+                                              class="text-sm text-secondary">
+                                        </span>
                                     </div>
-                                </div>
-                            </label>
+                                </label>
+                            </div>
                         </div>
-                    </div>
 
+                    </div>
+                </div>
+                <hr class="m-neg-4">
+                <div class="mb-2">
+                    <textarea class="form-control form-control-sm" name="comments">{!! $parsed && @$parsed->content ? @$parsed->content : '' !!}</textarea>
                 </div>
             </div>
-            */ ?>
 
-        <div class="row mb-3">
-            <div class="col-12">
-                <textarea type="text" class="form-control form-control-sm p-2 mt-2"
-                          data-name="comments"
-                          placeholder="Comments"><?= @$contentData['comments'] ?: '' ?></textarea>
+            <div>
+                <button submit class="btn btn-sm btn-primary mr-2">Submit</button>
+                <button cancel class="btn btn-sm btn-default border">Cancel</button>
             </div>
-        </div>
-
-        <div>
-            <button submit class="btn btn-sm btn-primary mr-2">Submit</button>
-            <button cancel class="btn btn-sm btn-default border">Cancel</button>
-        </div>
-
-    </form>
 
+        </form>
+    </div>
 </div>
-
 <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() {
+
+        window.segmentInitializers.<?= $segment->segmentTemplate->internal_name ?> = 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: '#sochxSection',
+            new Vue({
+                el: '#edit-univ_history_social-container',
                 data: model,
-                mounted: function () {
-                    $('#sochxSection [moe][initialized]').removeAttr('initialized');
+                mounted: function() {
+                    $('#edit-univ_history_social-container [moe][initialized]').removeAttr('initialized');
                     initMoes();
-                    $('#sochxSection').find('[name="data"]').val(JSON.stringify({
-                        common: this.cleanObject(this.common),
-                        customFields: this.customFields,
-                        comments: this.comments,
-                    }));
                 },
                 watch: {
                     $data: {
-                        handler: function (val, oldVal) {
-                            $('#sochxSection').find('[name="data"]').val(JSON.stringify({
-                                common: this.cleanObject(this.common),
-                                customFields: this.customFields,
-                                comments: this.comments,
-                            }));
+                        handler: function(val, oldVal) {
+                            let parent = $('#edit-univ_history_social-container').closest('form');
+                            parent.find('[name="data"]').val(JSON.stringify(this.$data));
                         },
                         deep: true
                     }
                 },
                 methods: {
-                    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;
+                    saveCustomItem: function(_label) {
+                        if(!_label) return false;
                         showMask();
                         let self = this;
                         $.post('/api/clientCanvasCustomItem/create', {
                             proUid: '{{ $pro->uid }}',
                             key: 'sochx',
                             label: _label
-                        }, function (_data) {
+                        }, function(_data) {
                             hideMask();
-                            if (_data && _data.success) {
-                                self.appendCustomItem(_label);
+                            if(_data && _data.success) {
                                 hideMoeFormMask();
                                 $('[custom-item-form]').hide();
-                            } else {
+                                $('.custom-items-container').closest('.visit-segment').find('.refresh-segment').trigger('click');
+                            }
+                            else {
                                 toastr.error(_data.message);
                             }
-                        }, 'json');
+                        }, 'json')
                         return false;
                     },
-                    cancelCustomItem: function () {
+                    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();
-                        });
                     }
                 }
             });
-        }
 
-        window.segmentInitializers.<?= $segment->segmentTemplate->internal_name ?> = function() {
-            // any JS can come here
-            // will be run on page-load as well as whenever this segment is refreshed
         };
 
-        // addMCInitializer('client-sochx', init, '#sochxSection');
-    })();
+    }).call(window);
 </script>

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

@@ -1,18 +1,12 @@
 <?php
 
-use App\Models\Point;
 use App\Models\Client;
+use App\Models\Point;
 use App\Models\Note;
-use App\Models\Segment;
-
 /** @var Client $patient */
 /** @var Note $note */
 /** @var Segment $segment */
 
-$point = Point::getGlobalSingletonOfCategory($patient, 'SOCIAL_HISTORY', true);
-
-$contentData = $point ? $point->data : null;
-
 $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 "],
@@ -31,20 +25,17 @@ $fields = [
     ]
 ];
 
-$isempty = false;
-if(!$contentData) {
-    $contentData = [
-        "common" => [],
-        "customFields" => [],
-        "comments" => "",
-    ];
-    $isempty = true;
-}
+$contentData = [
+    "common" => [],
+    "customFields" => [],
+    "comments" => "",
+];
 
-if($isempty) {
-    echo '<span class="text-secondary">No social history in the system</span>';
-}
-else {
+$point = Point::getGlobalSingletonOfCategory($patient, 'SOCIAL_HISTORY', true);
+
+if ($point && @$point->data) {
+
+    $contentData = $point->data;
 
     for ($i = 0; $i < count($fields); $i++):
         foreach($fields[$i] as $head => $values):
@@ -66,7 +57,8 @@ else {
     endfor;
 
     // custom fields
-    if(@$contentData['customFields'] && count($contentData['customFields'])):
+
+    if(isset($contentData['customFields']) && count($contentData['customFields'])):
         ?> <div class="mt-2"> <?php
         for ($i = 0; $i < count($contentData['customFields']); $i++):
             $item = $contentData['customFields'][$i];
@@ -92,4 +84,7 @@ else {
         </div>
     <?php }
 }
+else {
+    echo '<span class="text-secondary">No social history in the system</span>';
+}
 ?>

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

@@ -5,6 +5,7 @@ use App\Models\Point;
 use App\Models\Note;
 /** @var Client $patient */
 /** @var Note $note */
+/** @var Segment $segment */
 
 $fields = [
     [
@@ -28,7 +29,6 @@ $customFields = array_map(function($_item) {
 
 if(!$customFields) $customFields = [];
 
-// try loading afresh - since base section might have gotten dynamically updated
 $point = Point::getGlobalSingletonOfCategory($patient, 'SURGICAL_HISTORY', true);
 
 $contentData = $parsed = @$point && @$point->data ? $point->data : false;
@@ -41,15 +41,6 @@ if(!$contentData) {
     ];
 }
 
-/*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(!isset($contentData["common"][$fName])) $contentData["common"][$fName] = null;
-        }
-    }
-}*/
-
 ?>
 
 <div class="p-3 border-top mt-3 mcp-theme-1">
@@ -77,11 +68,11 @@ if(!$contentData) {
                                             <div class="ml-2">
                                                 <div>
                                                     <span class="mr-2">{{ $values[$k] }}</span>
-                                                    <div moe no-mask v-show="common['{{$fName}}']" >
+                                                    <div moe relative no-mask v-show="common['{{$fName}}']" >
                                                         <a href="#" start show>
                                                             <i class="fa-comment" :class="common['{{$fName}}__comments'] ? 'fas' : 'far'"></i>
                                                         </a>
-                                                        <div url="/nop">
+                                                        <div url="/nop" right>
                                                             <div class="mb-2">
                                                                 <textarea class="form-control form-control-sm ns-custom-comment min-width-200px"
                                                                           v-model="common['{{$fName}}__comments']"></textarea>
@@ -137,7 +128,7 @@ if(!$contentData) {
                                     <div class="ml-2 pr-3">
                                         <div>
                                             <span class="mr-2">@{{ item.label }}</span>
-                                            <div moe no-mask v-show="item.value" >
+                                            <div moe relative no-mask v-show="item.value" >
                                                 <a href="#" start show>
                                                     <i class="fa-comment" :class="item.comments ? 'fas' : 'far'"></i>
                                                 </a>

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

@@ -5,6 +5,7 @@ use App\Models\Point;
 use App\Models\Note;
 /** @var Client $patient */
 /** @var Note $note */
+/** @var Segment $segment */
 
 $fields = [
     [
@@ -83,4 +84,4 @@ if ($point && @$point->data) {
 else {
     echo '<span class="text-secondary">No surgical history in the system</span>';
 }
-?>
+?>