"Selectable" checkboxes in Dx section

public/css/style.css

@@ -1048,3 +1048,6 @@ table.table-edit-sheet .ql-container {
 .w-35 {
     width: 35%;
 }
+.client-single-dashboard .hide-if-dashboard {
+    display: none;
+}

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

@@ -28,6 +28,13 @@ $formID = rand(0, 100000);
     <table class="table table-sm table-bordered mb-2 table-edit-sheet">
         <thead>
         <tr class="bg-light">
+            <th class="px-2 text-secondary border-bottom-0 width-50px hide-if-dashboard">
+                <label class="d-flex align-items-center c-pointer align-items-end m-0">
+                    <input type="checkbox" class="mr-1" tabindex="-1"
+                           v-model="includeAll" v-on:change="includeAllChanged()">
+                    <span>All</span>
+                </label>
+            </th>
             <th class="px-2 text-secondary border-bottom-0">ICD</th>
             <th class="px-2 text-secondary border-bottom-0">Title</th>
             <th class="px-2 text-secondary border-bottom-0">Chr/Act.</th>
@@ -38,6 +45,13 @@ $formID = rand(0, 100000);
         </thead>
         <tbody>
         <tr v-for="(item, index) in items">
+            <td class="px-2 hide-if-dashboard">
+                <label class="d-block c-pointer m-0 pt-1">
+                    <input type="checkbox" class="mt-1" tabindex="-1"
+                           v-model="inclusion[index]"
+                           v-on:change="includeChanged()">
+                </label>
+            </td>
             <td>
                 <input type="text" :data-index="index"
                        class="form-control form-control-sm canvas-dx-title"
@@ -86,14 +100,28 @@ $formID = rand(0, 100000);
             window.clientDXApp = new Vue({
                 el: '#dxSection',
                 data: {
-                    items: <?= json_encode($contentData['items']) ?>
+                    includeAll: true,
+                    items: <?= json_encode($contentData['items']) ?>,
+                    inclusion: []
                 },
                 mounted: function() {
+                    this.inclusion = [];
+                    for (let i = 0; i < this.items.length; i++) {
+                        this.inclusion[i] = this.items[i].included;
+                    }
                     this.initRTE();
                     this.initICDAutoSuggest();
                 },
                 watch: {
-                    $data: {
+                    items: {
+                        handler: function(val, oldVal) {
+                            $(this.$el).closest('#dxSection').find('[name="data"]').val(JSON.stringify({
+                                items: this.cleanArray(this.items)
+                            }));
+                        },
+                        deep: true
+                    },
+                    inclusion: {
                         handler: function(val, oldVal) {
                             $(this.$el).closest('#dxSection').find('[name="data"]').val(JSON.stringify({
                                 items: this.cleanArray(this.items)
@@ -103,15 +131,31 @@ $formID = rand(0, 100000);
                     }
                 },
                 methods: {
+                    includeAllChanged: function() {
+                        for (let i = 0; i < this.items.length; i++) {
+                            this.inclusion[i] = this.includeAll;
+                        }
+                    },
+                    includeChanged: function() {
+                        let all = true;
+                        for (let i = 0; i < this.items.length; i++) {
+                            if(!this.inclusion[i]) {
+                                all = false;
+                                break;
+                            }
+                        }
+                        this.includeAll = all;
+                    },
                     addItem: function() {
                         let self = this;
                         this.items.push({
                             title: '',
                             icd: '',
-                            coa: '',
+                            coa: 'Chronic',
                             detail: '',
                             plan: '',
                         });
+                        this.inclusion.push(true);
                         Vue.nextTick(function() {
                             self.initRTE();
                             self.initICDAutoSuggest();
@@ -120,6 +164,7 @@ $formID = rand(0, 100000);
                     },
                     removeItem: function(_index) {
                         this.items.splice(_index, 1);
+                        this.inclusion.splice(_index, 1);
                     },
                     cleanArray: function(_source) {
                         let plItems = [], plObject = {};
@@ -130,6 +175,7 @@ $formID = rand(0, 100000);
                                     plObject[y] = _source[x][y];
                                 }
                             }
+                            plObject.included = this.inclusion[x];
                             plItems.push(plObject);
                         }
                         return plItems;

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

@@ -14,7 +14,7 @@ if(count($contentData['items'])) {
     for ($i = 0; $i < count($contentData['items']); $i++) {
         $item = $contentData['items'][$i];
 ?>
-        <div class="mb-2">
+        <div class="mb-2 <?= @$item["included"] ? '' : 'hide-if-note' ?>">
             <div class="">
                 <b><?= $item["title"] ?></b>
                 <?= !!$item["icd"] ? '/&nbsp;' . $item["icd"] : '' ?>

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

@@ -24,7 +24,7 @@
         <?php $infoLines = !$infoLines ? [] : $infoLines; ?>
         <?php $vitalLabels = ['Ht. (in.)','Wt. (lbs.)','Temp. (F)','Pulse','Resp.','Pulse Ox.','SBP','DBP','Smoking Status', 'BMI']; ?>
 
-	    <div class="row">
+	    <div class="row client-single-dashboard">
             <div class="col-6">
 
                 {{-- appointments --}}

resources/views/layouts/template.blade.php

@@ -266,7 +266,7 @@
             stagPopup.find('[moe][initialized]').removeAttr('initialized');
             initMoes();
             window.setTimeout(function() {
-                stagPopup.find('input:visible,select:visible').first().focus();
+                stagPopup.find('input[type="text"]:visible,select:visible').first().focus();
             }, 150);
             return false;
         }