Canvas editor for fhx

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

@@ -1,21 +1,15 @@
 <?php
-$contentData = [
-    "count" => 1,
-    "unknown" => false,
-    "items" => [[]]
-];
-if($patient->canvas_data) {
-    $canvasData = json_decode($patient->canvas_data, true);
-    if(isset($canvasData["fhx"])) {
-        $contentData = $canvasData["fhx"];
-    }
+if(!$contentData) {
+    $contentData = [
+        "count" => 1,
+        "unknown" => false,
+        "items" => [[]]
+    ];
 }
+
 $formID = rand(0, 100000);
 ?>
-<form method="POST" action="/api/client/updateCanvasData"
-      id="fhx_{{ $formID }}" v-on:submit.prevent="submitForm()">
-    <input type="hidden" name="uid" value="{{$patient->uid}}">
-    <input type="hidden" name="key" value="fhx">
+<div id="{{$key}}_{{ $formID }}">
 
     <div class="border border-secondary rounded mb-2 p-2">
         <label class="my-0 d-flex align-items-center">
@@ -218,29 +212,22 @@ $formID = rand(0, 100000);
 
         <div class="row mb-2">
             <div class="col-md-12">
-                <textarea rte class="form-control form-control-sm" type="text" v-model="item.comments" :model-index="index">
+                <textarea class="form-control form-control-sm" type="text" v-model="item.comments" :model-index="index">
                 </textarea>
             </div>
         </div>
 
     </div>
 
-    <div class="form-group mt-3 mb-0 d-flex">
-        <button class="btn btn-sm btn-primary mr-2">Submit</button>
-        <button v-if="!unknown" class="btn btn-sm btn-default text-primary border border-primary mr-2"
-                v-on:click.prevent="addItem()"
-            >Add Family Member</button>
-        <button class="btn btn-sm btn-default border" type="button" onclick="return closeStagPopup()">Cancel</button>
+    <div class="form-group my-2">
+    <button v-if="!unknown" class="btn btn-sm btn-default text-primary border border-primary mr-2"
+            v-on:click.prevent="addItem()"
+    >Add Family Member</button>
     </div>
-</form>
-<script>
-    function cancelForm_CanvasSection_{{ $formID }}(_trigger) {
-        $(_trigger).closest('.note-section').toggleClass('edit');
-        return false;
-    }
 
+</div>
+<script>
     (function() {
-
         function init() {
             window.clientFHXApp = new Vue({
                 el: '#fhx_{{ $formID }}',
@@ -250,69 +237,21 @@ $formID = rand(0, 100000);
                     items: <?= json_encode($contentData['items']) ?>
                 },
                 mounted: function() {
-                    this.initRTE();
+
+                },
+                watch: {
+                    $data: {
+                        handler: function(val, oldVal) {
+                            $(this.$el).closest('form').find('[name="canvasData"]').val(JSON.stringify({
+                                count: this.count,
+                                unknown: this.unknown,
+                                items: this.cleanArray(this.items)
+                            }));
+                        },
+                        deep: true
+                    }
                 },
                 methods: {
-                    initRTE: function() {
-
-                        let self = this;
-
-                        $('textarea[rte]').each(function() {
-
-                            let textarea = $(this), modelIndex = + textarea.attr('model-index');
-
-                            textarea.wrap(
-                                $('<div class="border-left border-right rte-holder"/>')
-                                    .attr('data-shortcuts', '')
-                            );
-
-                            // give a unique id to this editor instance
-                            var editorID = Math.ceil(Math.random() * 99999),
-                                fieldName = this.name;
-
-                            // var ti = $('<input type="hidden" />')
-                            //     .val(this.value)
-                            //     .attr('name', this.name)
-                            //     .insertBefore(this);
-                            var ce = $('<div data-editor-id="' + editorID + '" data-field="' + this.name + '"/>')
-                                .html(this.value)
-                                .insertBefore(this);
-                            textarea.hide();
-
-                            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 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[modelIndex].comments = qe.root.innerHTML;
-                            });
-
-                            $(qe.container)
-                                .find('.ql-editor[contenteditable]')
-                                .attr('data-field', fieldName)
-                                .attr('data-editor-id', editorID)
-                                .attr('with-shortcuts', 1);
-
-                        });
-                    },
                     addItem: function() {
                         this.items.push({
                             relationship: '',
@@ -342,33 +281,11 @@ $formID = rand(0, 100000);
                             comments: '',
                         });
                         this.count = this.items.length;
-                        var self = this;
-                        Vue.nextTick(function() {
-                            self.initRTE();
-                        })
                     },
                     removeItem: function(_index) {
                         this.items.splice(_index, 1);
                         this.count = this.items.length;
                     },
-                    submitForm: function() {
-                        showMask();
-                        let payload = {
-                            uid: '{{$patient->uid}}',
-                            key: 'fhx',
-                            canvasData: JSON.stringify({
-                                count: this.count,
-                                unknown: this.unknown,
-                                items: this.cleanArray(this.items)
-                            })
-                        };
-                        console.log('ALIX payload: ', payload);
-                        $.post('/api/client/updateCanvasData', payload, function(_data) {
-                            console.log(_data);
-                            closeStagPopup();
-                            fastReload();
-                        });
-                    },
                     cleanArray: function(_source) {
                         let plItems = [], plObject = {};
                         for (let x=0; x<_source.length; x++) {
@@ -385,9 +302,6 @@ $formID = rand(0, 100000);
                 }
             });
         }
-
         addMCInitializer('client-fhx-{{ $patient->uid }}', init);
-
     })();
-
 </script>