Canvas based Allergies

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

@@ -0,0 +1,170 @@
+<?php
+if(!$contentData) {
+    $contentData = [
+        "items" => [
+            [
+                "title" => "",
+            ]
+        ]
+    ];
+}
+$formID = rand(0, 100000);
+?>
+<div id="allergySection">
+    <h3 class="stag-popup-title mb-2 border-bottom-0 pb-1">
+        <span>Allergies</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">Allergy</th>
+            <th class="px-2 text-secondary border-bottom-0 w-50">Detail</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-allergy-title"
+                       data-field="title" v-model="item.title">
+            </td>
+            <td>
+                <textarea type="text" class="form-control form-control-sm"
+                          allergy-rte :data-index="index" data-field="detail"
+                          v-model="item.detail"></textarea>
+            </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.clientAllergyApp = new Vue({
+                el: '#allergySection',
+                data: {
+                    items: <?= json_encode($contentData['items']) ?>
+                },
+                mounted: function() {
+                    this.initRTE();
+                },
+                watch: {
+                    $data: {
+                        handler: function(val, oldVal) {
+                            $(this.$el).closest('#allergySection').find('[name="data"]').val(JSON.stringify({
+                                items: this.cleanArray(this.items)
+                            }));
+                        },
+                        deep: true
+                    }
+                },
+                methods: {
+                    addItem: function() {
+                        let self = this;
+                        this.items.push({
+                            title: '',
+                            detail: '',
+                        });
+                        Vue.nextTick(function() {
+                            self.initRTE();
+                            $('.canvas-allergy-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;
+                    },
+                    initRTE: function() {
+                        let self = this;
+                        $('#allergySection textarea[allergy-rte]').each(function() {
+
+                            $(this).wrap(
+                                $('<div class="rte-holder"/>')
+                                    .attr('data-shortcuts', '')
+                            );
+
+                            // give a unique id to this editor instance
+                            var editorID = Math.ceil(Math.random() * 99999);
+
+                            $('<div data-editor-id="' + editorID + '" data-field="' + this.name + '"/>')
+                                .html(this.value)
+                                .insertBefore(this);
+
+                            let vueField = $(this).attr('data-field'), vueIndex = +$(this).attr('data-index');
+
+                            $(this).remove();
+
+                            var qe = new Quill('[data-editor-id="' + editorID + '"]', {
+                                theme: 'snow',
+                                modules: {
+                                    keyboard: {
+                                        bindings: {
+                                            handleEnter: {
+                                                key: 13,
+                                                handler: function() {
+                                                    if(!$('.stag-shortcuts:visible').length) return true;
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            });
+
+                            var toolbar = $(qe.container).prev('.ql-toolbar');
+
+                            // add button for new shortcut
+                            var newSCButton = $('<button type="button" tabindex="-1" ' +
+                                'class="btn bg-white btn-sm btn-default text-primary w-auto px-2 border py-0 ' +
+                                'text-sm add-shortcut" data-editor-id="' + editorID + '">+ Shortcut</button>');
+                            toolbar.append(newSCButton);
+
+                            qe.on('text-change', function() {
+                                self.items[vueIndex][vueField] = qe.root.innerHTML;
+                            });
+
+                            $(qe.container)
+                                .find('.ql-editor[contenteditable]')
+                                .attr('data-editor-id', editorID)
+                                .attr('with-shortcuts', 1);
+
+                        });
+                    },
+                }
+            });
+        }
+        addMCInitializer('client-allergy-{{ $patient->uid }}', init);
+    })();
+</script>

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

@@ -0,0 +1,33 @@
+<?php
+
+$contentData = [
+    "items" => []
+];
+if($patient->canvas_data) {
+    $canvasData = json_decode($patient->canvas_data, true);
+    if(isset($canvasData["allergies"])) {
+        $contentData = $canvasData["allergies"];
+    }
+}
+
+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>
+            </div>
+            <?php if(!!$item["detail"]): ?>
+                <div class="text-secondary"><?= $item["detail"] ?></div>
+            <?php endif; ?>
+        </div>
+<?php
+    }
+}
+else {
+    ?>
+    <div class="text-secondary">Nothing here yet!</div>
+    <?php
+}
+?>

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

@@ -33,6 +33,18 @@
                 {{-- allergies --}}
                 @include('app/patient/partials/allergies')
 
+                {{-- canvas based allergies --}}
+                <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">Allergies **</h6>
+                        <span class="mx-2 text-secondary">|</span>
+                        @include('app.patient.canvas-sections.canvas-editor-modal', ['key' => 'allergies'])
+                    </div>
+                    <div class="bg-light border p-2 mb-3">
+                        @include('app.patient.canvas-sections.allergies.summary')
+                    </div>
+                </div>
+
                 {{-- rx --}}
                 @include('app/patient/partials/rx')