Canvas based Dx [wip]

public/css/style.css

@@ -878,6 +878,9 @@ body .node input[type="number"] {
     margin: 0 auto;
     padding: 0.75rem;
 }
+.stag-popup.wide>form {
+    width: calc(100% - 4rem);
+}
 .stag-popup.stag-popup-sm>form {
     max-width: 500px;
 }

resources/views/app/patient/canvas-sections/canvas-editor-modal.blade.php

@@ -1,5 +1,5 @@
 <a class="py-0 font-weight-normal c-pointer" onclick="showStagPopup('client-{{ $key }}')">Edit</a>
-<div class="stag-popup mcp-theme-1" stag-popup-key="client-{{ $key }}">
+<div class="stag-popup mcp-theme-1 {{ isset($class) ? $class : '' }}" stag-popup-key="client-{{ $key }}">
     <?php
     $contentData = false;
     if ($patient->canvas_data) {

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

@@ -0,0 +1,124 @@
+<?php
+if(!$contentData) {
+    $contentData = [
+        "items" => [
+            [
+                "title" => "",
+                "icd" => "",
+                "coa" => "",
+                "detail" => "",
+                "plan" => "",
+            ]
+        ]
+    ];
+}
+$formID = rand(0, 100000);
+?>
+<div id="dxSection">
+    <h3 class="stag-popup-title mb-2 border-bottom-0 pb-1">
+        <span>Current Problems / Focus Areas</span>
+        <a href="#" onclick="return closeStagPopup()"
+           class="ml-auto text-secondary">
+            <i class="fa fa-times-circle"></i>
+        </a>
+    </h3>
+
+    <input type="hidden" name="data" value="{{json_encode($contentData)}}">
+
+    <table class="table table-sm table-bordered mb-2">
+        <thead>
+        <tr class="bg-light">
+            <th class="border-bottom-0">Title</th>
+            <th class="border-bottom-0">ICD</th>
+            <th class="border-bottom-0">Chr/Act.</th>
+            <th class="border-bottom-0">Detail</th>
+            <th class="border-bottom-0">Plan</th>
+            <th class="border-bottom-0"></th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="(item, index) in items">
+            <td><input type="text" class="form-control form-control-sm canvas-dx-title" v-model="item.title"></td>
+            <td><input type="text" class="form-control form-control-sm" v-model="item.icd"></td>
+            <td>
+                <select v-model="item.coa" class="form-control form-control-sm pl-1" required>
+                    <option value="">-- select --</option>
+                    <option value="Chronic" selected>Chronic</option>
+                    <option value="Acute">Acute</option>
+                </select>
+            </td>
+            <td><input type="text" class="form-control form-control-sm" v-model="item.detail"></td>
+            <td><input type="text" class="form-control form-control-sm" v-model="item.plan"></td>
+            <td class="px-2">
+                <a 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>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+
+    <div class="form-group my-2">
+    <button class="btn btn-sm btn-default text-primary border border-primary mr-2"
+            v-on:click.prevent="addItem()"
+    >+ New Entry</button>
+    </div>
+
+</div>
+<script>
+    (function() {
+        function init() {
+            window.clientDXApp = new Vue({
+                el: '#dxSection',
+                data: {
+                    items: <?= json_encode($contentData['items']) ?>
+                },
+                mounted: function() {
+
+                },
+                watch: {
+                    $data: {
+                        handler: function(val, oldVal) {
+                            $(this.$el).closest('#dxSection').find('[name="data"]').val(JSON.stringify({
+                                items: this.cleanArray(this.items)
+                            }));
+                        },
+                        deep: true
+                    }
+                },
+                methods: {
+                    addItem: function() {
+                        this.items.push({
+                            title: '',
+                            icd: '',
+                            coa: '',
+                            detail: '',
+                            plan: '',
+                        });
+                        Vue.nextTick(function() {
+                            $('.canvas-dx-title').last().focus();
+                        });
+                    },
+                    removeItem: function(_index) {
+                        this.items.splice(_index, 1);
+                    },
+                    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-dx-{{ $patient->uid }}', init);
+    })();
+</script>

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

@@ -0,0 +1,40 @@
+<?php
+
+$contentData = [
+    "items" => []
+];
+if($patient->canvas_data) {
+    $canvasData = json_decode($patient->canvas_data, true);
+    if(isset($canvasData["dx"])) {
+        $contentData = $canvasData["dx"];
+    }
+}
+
+if(count($contentData['items'])) {
+    for ($i = 0; $i < count($contentData['items']); $i++) {
+        $item = $contentData['items'][$i];
+?>
+        <div class="mb-2">
+            <div class="">
+                <b><?= $item["title"] ?></b>
+                <?= !!$item["icd"] ? '/&nbsp;' . $item["icd"] : '' ?>
+                <?= !!$item["coa"] ? '/&nbsp;' . $item["coa"] : '' ?>
+            </div>
+            <?php if(!!$item["detail"]): ?>
+                <div class="text-secondary font-weight-bold">Detail</div>
+                <div class="ml-2"><?= $item["detail"] ?></div>
+            <?php endif; ?>
+            <?php if(!!$item["plan"]): ?>
+                <div class="text-secondary font-weight-bold">Plan</div>
+                <div class="ml-2"><?= $item["plan"] ?></div>
+            <?php endif; ?>
+        </div>
+<?php
+    }
+}
+else {
+    ?>
+    <div class="text-secondary">Nothing here yet!</div>
+    <?php
+}
+?>

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

@@ -309,6 +309,18 @@
                 {{-- dx --}}
                 @include('app/patient/partials/dx')
 
+                {{-- canvas based dx --}}
+                <div class="pt-2 mt-2 border-top">
+                    <div class="d-flex align-items-center pb-2">
+                        <h6 class="my-0 font-weight-bold text-secondary">Current Problems / Focus Areas</h6>
+                        <span class="mx-2 text-secondary">|</span>
+                        @include('app.patient.canvas-sections.canvas-editor-modal', ['key' => 'dx', 'class' => 'wide'])
+                    </div>
+                    <div class="bg-light border p-2 mb-3">
+                        @include('app.patient.canvas-sections.dx.summary')
+                    </div>
+                </div>
+
                 {{--<div class="mt-2">
                     <div class="d-flex align-items-center mb-2 py-2 border-top border-bottom">
                         <h6 class="my-0 font-weight-bold text-secondary">History</h6>