ROS auto-save

resources/views/app/patient/segment-templates/ros/edit.blade.php

@@ -296,12 +296,11 @@ for ($i = 0; $i < count($fields); $i++) {
                         </div>
                     @endfor
                 </div>
-                <hr class="m-neg-4">
+                <hr class="m-neg-4 mt-0">
                 <div class="mb-2">
                     <textarea class="form-control form-control-sm" v-model="comments">{!! $parsed && @$parsed->content ? @$parsed->content : '' !!}</textarea>
                 </div>
                 <div class="mt-3">
-                    <button type="button" class="btn btn-sm btn-primary mr-2" v-on:click.prevent="saveROS()">Save</button>
                     <div class="d-inline-flex align-self-stretch align-items-center">
                         <span class="autosave-indicator saving text-sm text-secondary">Saving changes &hellip;</span>
                         <span class="autosave-indicator saved text-sm text-secondary">
@@ -318,6 +317,27 @@ for ($i = 0; $i < count($fields); $i++) {
 <script>
     (function() {
 
+        const debounce = (func, wait) => {
+            let timeout;
+            return function executedFunction(...args) {
+                const later = () => {
+                    clearTimeout(timeout);
+                    func(...args);
+                };
+                clearTimeout(timeout);
+                timeout = setTimeout(later, wait);
+            };
+        };
+
+        let debouncedROSSaver = debounce(function(_trigger) {
+            $(_trigger).closest('.stag-popup').find('.autosave-indicator').removeClass('show');
+            $(_trigger).closest('.stag-popup').find('.autosave-indicator.saving').addClass('show');
+            saveVisitForm(_trigger, true, false, () => {
+                $(_trigger).closest('.stag-popup').find('.autosave-indicator').removeClass('show');
+                $(_trigger).closest('.stag-popup').find('.autosave-indicator.saved').addClass('show');
+            });
+        }, 500);
+
         function initROS() {
 
             let model = <?= $contentData ? json_encode($contentData) : '{}' ?>;
@@ -331,12 +351,31 @@ for ($i = 0; $i < count($fields); $i++) {
                 mounted: function() {
                     $('#edit-ros-container [moe][initialized]').removeAttr('initialized');
                     initMoes();
+
+                    // custom buttons on title bar
+                    $('.button-container').remove();
+                    let buttonContainer = $('<div/>').addClass('button-container ml-4 mr-auto');
+                    let titleElem = $('#edit-ros-container').closest('.stag-popup').find('.stag-popup-title>span');
+                    titleElem.next().removeClass('ml-auto');
+                    titleElem.parent().addClass('align-items-center');
+
+                    // add button for "Edit Mode"
+                    $('<div class="d-inline-flex align-self-stretch align-items-center">' +
+                        '<span class="autosave-indicator saving text-sm text-secondary">Saving changes &hellip;</span>' +
+                        '<span class="autosave-indicator saved text-sm text-secondary">' +
+                        '<i class="fa fa-check"></i>' +
+                        ' Saved' +
+                        '</span>' +
+                        '</div>').appendTo(buttonContainer);
+
+                    buttonContainer.insertAfter(titleElem);
                 },
                 watch: {
                     $data: {
                         handler: function(val, oldVal) {
                             let parent = $('#edit-ros-container').closest('form');
                             parent.find('[name="data"]').val(JSON.stringify(this.$data));
+                            debouncedROSSaver($('#edit-ros-container')[0]);
                         },
                         deep: true
                     }