Canvas based Care-Team

resources/views/app/patient/canvas-sections/care-team/default.php

@@ -0,0 +1,10 @@
+<?php
+
+$canvasData = [];
+if ($patient->canvas_data) {
+    $canvasData = json_decode($patient->canvas_data, true);
+    if (isset($canvasData["care-team"])) {
+        $canvasData = $canvasData["care-team"];
+    }
+}
+$contentData = $canvasData;

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

@@ -0,0 +1,155 @@
+<?php
+if(!$contentData) {
+    $contentData = [
+        "items" => [
+            [
+                "name" => "",
+                "specialty" => "",
+                "organization" => "",
+                "phone" => "",
+                "fax" => "",
+                "date" => "",
+                "memo" => "",
+            ]
+        ]
+    ];
+}
+$formID = rand(0, 100000);
+?>
+<div id="careTeamSection">
+    <h3 class="stag-popup-title mb-2 border-bottom-0 pb-1 hide-if-note">
+        <span>Care Team</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 table-edit-sheet">
+        <thead>
+        <tr class="bg-light">
+            <th class="px-2 text-secondary border-bottom-0 w-25">Name</th>
+            <th class="px-2 text-secondary border-bottom-0">Specialty</th>
+            <th class="px-2 text-secondary border-bottom-0">Organization</th>
+            <th class="px-2 text-secondary border-bottom-0">Phone</th>
+            <th class="px-2 text-secondary border-bottom-0">Fax</th>
+            <th class="px-2 text-secondary border-bottom-0">Date</th>
+            <th class="px-2 text-secondary border-bottom-0">Memo</th>
+            <th class="px-2 text-secondary border-bottom-0"></th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="(item, index) in items">
+            <td>
+                <input type="text" :data-index="index"
+                       class="form-control form-control-sm canvas-care-team-title"
+                       data-field="name" v-model="item.name">
+            </td>
+            <td>
+                <input type="text" :data-index="index"
+                       class="form-control form-control-sm"
+                       data-field="specialty" v-model="item.specialty">
+            </td>
+            <td>
+                <input type="text" :data-index="index"
+                       class="form-control form-control-sm"
+                       data-field="organization" v-model="item.organization">
+            </td>
+            <td>
+                <input type="text" :data-index="index"
+                       class="form-control form-control-sm"
+                       data-field="phone" v-model="item.phone">
+            </td>
+            <td>
+                <input type="text" :data-index="index"
+                       class="form-control form-control-sm"
+                       data-field="fax" v-model="item.fax">
+            </td>
+            <td>
+                <input type="date" :data-index="index"
+                       class="form-control form-control-sm"
+                       data-field="date" v-model="item.date">
+            </td>
+            <td>
+                <input type="text" :data-index="index"
+                       class="form-control form-control-sm"
+                       data-field="memo" v-model="item.memo">
+            </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 type="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.clientCareTeamApp = new Vue({
+                el: '#careTeamSection',
+                data: {
+                    items: <?= json_encode($contentData['items']) ?>
+                },
+                mounted: function() {
+
+                },
+                watch: {
+                    $data: {
+                        handler: function(val, oldVal) {
+                            $(this.$el).closest('#careTeamSection').find('[name="data"]').val(JSON.stringify({
+                                items: this.cleanArray(this.items)
+                            }));
+                        },
+                        deep: true
+                    }
+                },
+                methods: {
+                    addItem: function() {
+                        let self = this;
+                        this.items.push({
+                            name: '',
+                            specialty: '',
+                            organization: '',
+                            phone: '',
+                            fax: '',
+                            date: '',
+                            memo: '',
+                        });
+                        Vue.nextTick(function() {
+                            $('.canvas-care-team-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-care-team-{{ $patient->uid }}', init);
+    })();
+</script>

resources/views/app/patient/canvas-sections/care-team/summary.php

@@ -0,0 +1,34 @@
+<?php
+
+$contentData = [
+    "items" => []
+];
+if($patient->canvas_data) {
+    $canvasData = json_decode($patient->canvas_data, true);
+    if(isset($canvasData["care-team"])) {
+        $contentData = $canvasData["care-team"];
+    }
+}
+
+if(count($contentData['items'])) {
+    for ($i = 0; $i < count($contentData['items']); $i++) {
+        $item = $contentData['items'][$i];
+?>
+        <div class="mb-2">
+            <div class="content-html text-nowrap">
+                <b><?= $item["name"] ?></b>
+                <?php if(!!$item["specialty"]): ?>
+                <span class="text-secondary mx-1">/</span>
+                <span class="text-secondary"><?= $item["specialty"] ?></span>
+                <?php endif; ?>
+            </div>
+        </div>
+<?php
+    }
+}
+else {
+    ?>
+    <div class="text-secondary">Nothing here yet!</div>
+    <?php
+}
+?>

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

@@ -780,6 +780,18 @@
 
                 {{-- care-team --}}
                 @include('app/patient/partials/care-team')
+
+                {{-- 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">Care Team **</h6>
+                        <span class="mx-2 text-secondary">|</span>
+                        @include('app.patient.canvas-sections.canvas-editor-modal', ['key' => 'care-team', 'class' => 'wide'])
+                    </div>
+                    <div class="bg-light border p-2 mb-3">
+                        @include('app.patient.canvas-sections.care-team.summary')
+                    </div>
+                </div>
             </div>
         </div>
         <div class="row my-3">