Debounced auto-save for sections

resources/views/app/patient/note/note-section-list.blade.php

@@ -98,57 +98,101 @@
             }
             ?>
 
-            <div class="form-control">
+            <div class="d-flex align-items-center">
                 <button  class="btn btn-sm btn-primary" btn-save-form><i class="fa fa-save"></i></button>
+                <span class="ml-2 text-secondary text-sm text-saving d-none"><i>Saving ...</i></span>
             </div>
         </div>
     </div>
     @endforeach
     <script>
-        $(document).ready(function(){
-            $('[note-rte]').each(function(){
-                var el = this;
-                var existingContent = $(el).attr('data-content');
-                var quill = new Quill(el, {
-                theme: 'snow',
-                modules: {
-                    keyboard: {
-                        bindings: {
-                            handleEnter: {
-                                key: 13,
-                                handler: function() {
-                                        if(!$('.stag-shortcuts:visible').length) return true;
+        (function(){
+
+            function init() {
+                $('[note-rte]').each(function(){
+                    var el = this;
+                    var existingContent = $(el).attr('data-content');
+                    var quill = new Quill(el, {
+                        theme: 'snow',
+                        modules: {
+                            keyboard: {
+                                bindings: {
+                                    handleEnter: {
+                                        key: 13,
+                                        handler: function() {
+                                            if(!$('.stag-shortcuts:visible').length) return true;
+                                        }
                                     }
                                 }
                             }
                         }
-                    }
-                });
+                    });
+
+                    quill.root.innerHTML = existingContent;
+
+                    quill.on('text-change', function(delta, oldDelta, source){
+                        var content = quill.root.innerHTML;
+                        var dataValue = JSON.stringify({value: content});
+                        var dataField = $(el).closest('.note-section').find('input[name=data]').val(dataValue);
+                    });
+                })
 
-                quill.root.innerHTML = existingContent;
+                $('[btn-save-form]').on('click', function(){
+                    doSave($(this).closest('.note-section'));
+                });
 
-                quill.on('text-change', function(delta, oldDelta, source){
-                    var content = quill.root.innerHTML;
-                    var dataValue = JSON.stringify({value: content});
-                    var dataField = $(el).closest('.note-section').find('input[name=data]').val(dataValue);
+                // [name="data"] change listener
+                $('.note-section input[name="data"]').each(function() {
+                    initChangeListener($(this));
                 });
-            })
 
-            $('[btn-save-form]').on('click', function(){
-                var  dataField = $(this).closest('.note-section').find('input[name=data]')
+            }
+
+            const debounce = (func, wait) => {
+                let timeout;
+
+                return function executedFunction(...args) {
+                    const later = () => {
+                        clearTimeout(timeout);
+                        func(...args);
+                    };
+
+                    clearTimeout(timeout);
+                    timeout = setTimeout(later, wait);
+                };
+            };
+
+            function doSave(_section) {
+                console.log(_section.attr('data-section-template-name'));
+
+                _section.find('[btn-save-form]').prop('disabled', true);
+                _section.find('.text-saving').removeClass('d-none');
+
+                var  dataField = _section.find('input[name=data]')
                 var value = $(dataField).val();
 
-                var summaryContainer = $(this).closest('.note-section').find('.summary-container')
-                
-                var sectionUid = $(this).closest('.note-section').attr('data-section-uid')
+                var summaryContainer = _section.find('.summary-container')
+
+                var sectionUid = _section.attr('data-section-uid')
                 $.post("/process_form_submit", {"section_uid":sectionUid , "data": value}, function(resp) {
-                   console.log(resp);
-                   if(resp.success){
-                       summaryContainer.html(resp.newSummaryHtml);
-                   }
+                    console.log(resp);
+                    if(resp.success){
+                        summaryContainer.html(resp.newSummaryHtml);
+                    }
+                    _section.find('[btn-save-form]').prop('disabled', false);
+                    _section.find('.text-saving').addClass('d-none');
                 },'json');
-            })
-            
-        })
+            }
+
+            function initChangeListener(_elem) {
+                new MutationObserver(debounce(function() {
+                        doSave(_elem.closest('.note-section'))
+                    }, 250))
+                    .observe(_elem[0], {attributes: true});
+            }
+
+            addMCInitializer('note-sections-list-{{ $patient->uid }}', init);
+
+        })();
 
     </script>