Hx sections - custom items functionality upgrade

app/Models/Pro.php

@@ -151,7 +151,7 @@ class Pro extends Model
     }
 
     public function canvasCustomItems($_key) {
-        return ClientCanvasDataCustomItem::where('key', $_key)->get();
+        return ClientCanvasDataCustomItem::where('key', $_key)->where('pro_id', $this->id)->get();
     }
 
 

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

@@ -0,0 +1,87 @@
+<div class="row">
+    <div class="col-9">
+        <div class="d-flex align-items-center mb-2">
+            <span class="font-weight-bold">My 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 class="row custom-items-container">
+            <div class="col-4" v-for="item in customFields" v-if="!item.other">
+                <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>
+                </label>
+            </div>
+        </div>
+    </div>
+    <div class="col-3 border-left">
+        <div class="d-flex align-items-center mb-2">
+            <span class="font-weight-bold">Other Custom Items</span>
+        </div>
+        <div class="custom-items-container">
+            <div v-for="item in customFields" v-if="item.other">
+                <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>
+                </label>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -114,59 +114,7 @@ for ($i = 0; $i < count($fields); $i++) {
                 </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-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>
-                                </label>
-                            </div>
-                        </div>
-
+                        @include('app.patient.segment-templates._custom_items.edit')
                     </div>
                 </div>
                 <hr class="m-neg-4">
@@ -190,23 +138,35 @@ for ($i = 0; $i < count($fields); $i++) {
 
             let model = <?= $contentData ? json_encode($contentData) : '{}' ?>;
             model.newCustomItemLabel = '';
-            let customFields = <?= json_encode($customFields) ?>;
+            let myCustomFields = <?= json_encode($customFields) ?>;
             if(!model.customFields) {
                 model.customFields = [];
             }
-            for (let i = 0; i < customFields.length; i++) {
+            for (let i = 0; i < myCustomFields.length; i++) {
                 let found = model.customFields.filter(function(_item) {
-                    return _item.label === customFields[i];
+                    return _item.label === myCustomFields[i];
                 }).length;
                 if(!found) {
                     model.customFields.push({
-                        label: customFields[i],
+                        label: myCustomFields[i],
                         value: '',
                         comments: '',
                     })
                 }
             }
 
+            // if not own AND not active - remove from model.customFields
+            for (let i = model.customFields.length - 1; i >= 0 ; i--) {
+                if(myCustomFields.indexOf(model.customFields[i].label) === -1) {
+                    if(!!model.customFields[i].value) {
+                        model.customFields[i].other = true;
+                    }
+                    else {
+                        model.customFields.splice(i, 1);
+                    }
+                }
+            }
+
             new Vue({
                 el: '#edit-univ_history_social-container',
                 delimiters: ["@{{","}}"],

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

@@ -114,59 +114,7 @@ for ($i = 0; $i < count($fields); $i++) {
                 </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-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>
-                                </label>
-                            </div>
-                        </div>
-
+                        @include('app.patient.segment-templates._custom_items.edit')
                     </div>
                 </div>
                 <hr class="m-neg-4">
@@ -190,23 +138,35 @@ for ($i = 0; $i < count($fields); $i++) {
 
             let model = <?= $contentData ? json_encode($contentData) : '{}' ?>;
             model.newCustomItemLabel = '';
-            let customFields = <?= json_encode($customFields) ?>;
+            let myCustomFields = <?= json_encode($customFields) ?>;
             if(!model.customFields) {
                 model.customFields = [];
             }
-            for (let i = 0; i < customFields.length; i++) {
+            for (let i = 0; i < myCustomFields.length; i++) {
                 let found = model.customFields.filter(function(_item) {
-                    return _item.label === customFields[i];
+                    return _item.label === myCustomFields[i];
                 }).length;
                 if(!found) {
                     model.customFields.push({
-                        label: customFields[i],
+                        label: myCustomFields[i],
                         value: '',
                         comments: '',
                     })
                 }
             }
 
+            // if not own AND not active - remove from model.customFields
+            for (let i = model.customFields.length - 1; i >= 0 ; i--) {
+                if(myCustomFields.indexOf(model.customFields[i].label) === -1) {
+                    if(!!model.customFields[i].value) {
+                        model.customFields[i].other = true;
+                    }
+                    else {
+                        model.customFields.splice(i, 1);
+                    }
+                }
+            }
+
             new Vue({
                 el: '#edit-univ_history_surgical-container',
                 delimiters: ["@{{","}}"],

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

@@ -154,59 +154,7 @@ for ($i = 0; $i < count($fields); $i++) {
                 </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-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>
-                                </label>
-                            </div>
-                        </div>
-
+                        @include('app.patient.segment-templates._custom_items.edit')
                     </div>
                 </div>
                 <hr class="m-neg-4">
@@ -230,23 +178,35 @@ for ($i = 0; $i < count($fields); $i++) {
 
             let model = <?= $contentData ? json_encode($contentData) : '{}' ?>;
             model.newCustomItemLabel = '';
-            let customFields = <?= json_encode($customFields) ?>;
+            let myCustomFields = <?= json_encode($customFields) ?>;
             if(!model.customFields) {
                 model.customFields = [];
             }
-            for (let i = 0; i < customFields.length; i++) {
+            for (let i = 0; i < myCustomFields.length; i++) {
                 let found = model.customFields.filter(function(_item) {
-                    return _item.label === customFields[i];
+                    return _item.label === myCustomFields[i];
                 }).length;
                 if(!found) {
                     model.customFields.push({
-                        label: customFields[i],
+                        label: myCustomFields[i],
                         value: '',
                         comments: '',
                     })
                 }
             }
 
+            // if not own AND not active - remove from model.customFields
+            for (let i = model.customFields.length - 1; i >= 0 ; i--) {
+                if(myCustomFields.indexOf(model.customFields[i].label) === -1) {
+                    if(!!model.customFields[i].value) {
+                        model.customFields[i].other = true;
+                    }
+                    else {
+                        model.customFields.splice(i, 1);
+                    }
+                }
+            }
+
             new Vue({
                 el: '#edit-univ_history_past_medical-container',
                 delimiters: ["@{{","}}"],