Implantable devices section UI

storage/sections/implantable-devices/form.blade.php

@@ -3,26 +3,68 @@ $contentData = false;
 if($section){
     $contentData = json_decode($section->content_data, true);
 }
-if(!$contentData || !isset($contentData['value'])) {
-    $contentData = [
-        'value'=>''
-    ];
+if(!$contentData) {
+    $contentData = [];
+}
+if(!isset($contentData['count'])) {
+    $contentData['count'] = 1;
 }
 $formID = rand(0, 100000);
 ?>
-<form method="POST" action="/process_form_submit" onsubmit="return submitForm_NoteSection_{{ $formID }}(this);">
+<form method="POST" action="/process_form_submit"
+      id="hospitalizations_{{ $formID }}"
+      onsubmit="return submitForm_NoteSection_{{ $formID }}(this);">
+    <input type="hidden" name="count" v-model="count">
     <?php if($section): ?>
         <input type="hidden" name="section_uid" value="<?= $section->uid?>">
     <?php else: ?>
         <input type="hidden" name="note_uid" value="<?= $note->uid?>">
         <input type="hidden" name="section_template_uid" value="<?= $sectionTemplate->uid ?>">
     <?php endif; ?>
-    <div class="form-group mb-2">
-        <textarea rte type="text" class="form-control form-control-sm p-2" name="value" placeholder="Value"><?= $contentData['value'] ?></textarea>
+
+    <div v-for="(item, index) in items" class="note-section-item-row">
+        <hr v-if="index > 0" class="row">
+        <div class="row mb-2">
+            <div class="col-md-3">
+                <label class="text-secondary text-sm mb-1 d-block">Status</label>
+                <select :name="'item_' + index + '_status'" v-model="item.status"
+                        class="form-control form-control-sm">
+                    <option value=""> -- select --</option>
+                    <option value="Completed">Completed</option>
+                    <option value="Active">Active</option>
+                    <option value="Aborted">Aborted</option>
+                    <option value="Canceled">Canceled</option>
+                    <option value="Scheduled">Scheduled</option>
+                </select>
+            </div>
+            <div class="col-md-3">
+                <label class="text-secondary text-sm mb-1 d-block">UDI:</label>
+                <input class="form-control form-control-sm" type="text" :name="'item_' + index + '_udi'" v-model="item.udi">
+            </div>
+            <div class="col-md-3">
+                <label class="text-secondary text-sm mb-1 d-block">&nbsp;</label>
+                <a v-if="items.length > 1" 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>
+            </div>
+        </div>
+        <div class="row mb-2">
+            <div class="col-md-12">
+                <textarea rte class="form-control form-control-sm" type="text"
+                          :name="'item_' + index + '_comments'"
+                          data-shortcuts="{{ $shortcuts }}"  v-model="item.comments">
+                </textarea>
+            </div>
+        </div>
     </div>
-    <div class="form-group m-0 d-flex">
+
+    <div class="form-group mt-3 mb-0 d-flex">
         <button class="btn btn-sm btn-primary mr-2">Submit</button>
-        <button class="btn btn-sm btn-default border" onclick="return cancelForm_NoteSection_{{ $formID }}(this)">Cancel</button>
+        <button class="btn btn-sm btn-default text-primary border border-primary mr-2"
+                v-on:click.prevent="addItem()"
+            >Add Device</button>
+        <button class="btn btn-sm btn-default border" type="button" onclick="return cancelForm_NoteSection_{{ $formID }}(this)">Cancel</button>
     </div>
 </form>
 <script>
@@ -36,4 +78,100 @@ $formID = rand(0, 100000);
         $(_trigger).closest('.note-section').toggleClass('edit');
         return false;
     }
+
+    (function() {
+
+        let count = {{ $contentData['count'] }}, items = [];
+        let input = {!! json_encode($contentData)  !!};
+        for (let i = 0; i < count; i++) {
+            items.push({
+                udi: input['item_' + i + '_udi'],
+                status: input['item_' + i + '_status'],
+                comments: input['item_' + i + '_comments'],
+            });
+        }
+
+        window.hospitalizationsApp = new Vue({
+            el: '#hospitalizations_{{ $formID }}',
+            data: {
+                count: {{ $contentData['count'] }},
+                items: items
+            },
+            methods: {
+                initRTE: function() {
+                    $('textarea[rte]').each(function() {
+
+                        $(this).wrap(
+                            $('<div class="border-left border-right rte-holder"/>')
+                                .attr('data-shortcuts', '{{ $packed }}')
+                        );
+
+                        // 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);
+                        $(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 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() {
+                            ti.val(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({
+                        udi: '',
+                        status: '',
+                        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;
+                }
+            }
+        });
+
+    })();
+
 </script>

storage/sections/implantable-devices/processor.php

@@ -1,4 +1,12 @@
 <?php
-$newContentData = [
-    'value' => $request->get('value')
-];
+$newContentData = [];
+
+$newContentData['count'] = $request->get('count');
+$count = intval($newContentData['count']);
+
+for ($i = 0; $i < $count; $i++) {
+    $newContentData['item_' . $i . '_udi'] = $request->get('item_' . $i . '_udi');
+    $newContentData['item_' . $i . '_status'] = $request->get('item_' . $i . '_status');
+    $newContentData['item_' . $i . '_comments'] = $request->get('item_' . $i . '_comments');
+}
+

storage/sections/implantable-devices/summary.php

@@ -1 +1,19 @@
-<div><?= $newContentData['value']; ?></div>
+<?php
+
+$count = isset($newContentData['count']) ? intval($newContentData['count']) : 0;
+
+for ($i = 0; $i < $count; $i++) { ?>
+
+    <div class="mb-3">
+        <div class="">
+            Status: <b><?= $newContentData['item_' . $i . '_status'] ?></b>
+        </div>
+        <div>
+            UDI: <b><?= $newContentData['item_' . $i . '_udi'] ?></b>
+        </div>
+        <div class="text-secondary pb-2 mb-2">
+            <b>Comments: </b><?= $newContentData['item_' . $i . '_comments'] ?>
+        </div>
+    </div>
+
+<?php }