Implements spinning circle for Notes.

public/js/app.js

@@ -2607,6 +2607,10 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_Modal_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components/Modal.vue */ "./resources/js/components/Modal.vue");
+/* harmony import */ var _components_CircleSpinner_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/CircleSpinner.vue */ "./resources/js/components/CircleSpinner.vue");
+//
+//
+//
 //
 //
 //
@@ -2625,9 +2629,11 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 
+
 /* harmony default export */ __webpack_exports__["default"] = ({
   components: {
-    Modal: _components_Modal_vue__WEBPACK_IMPORTED_MODULE_0__["default"]
+    Modal: _components_Modal_vue__WEBPACK_IMPORTED_MODULE_0__["default"],
+    CircleSpinner: _components_CircleSpinner_vue__WEBPACK_IMPORTED_MODULE_1__["default"]
   },
   props: {
     populateWith: {
@@ -2650,14 +2656,18 @@ __webpack_require__.r(__webpack_exports__);
   },
   data: function data() {
     return {
-      note: JSON.parse(JSON.stringify(this.populateWith))
+      note: JSON.parse(JSON.stringify(this.populateWith)),
+      noteSaving: false
     };
   },
   methods: {
     updateNote: function updateNote(note) {
       var _this = this;
 
+      this.noteSaving = true;
       axios.put('/api/workorders/notes/' + note.noteid, note).then(function (response) {
+        _this.noteSaving = false;
+
         _this.hideModal();
       });
     },
@@ -2680,6 +2690,8 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _mixins_dateMixin__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../mixins/dateMixin */ "./resources/js/mixins/dateMixin.js");
 /* harmony import */ var _components_NoteFormModal_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/NoteFormModal.vue */ "./resources/js/components/NoteFormModal.vue");
+/* harmony import */ var _components_CircleSpinner_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../components/CircleSpinner.vue */ "./resources/js/components/CircleSpinner.vue");
+//
 //
 //
 //
@@ -2718,11 +2730,15 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+//
+
 
 
 /* harmony default export */ __webpack_exports__["default"] = ({
   components: {
-    NoteFormModal: _components_NoteFormModal_vue__WEBPACK_IMPORTED_MODULE_1__["default"]
+    NoteFormModal: _components_NoteFormModal_vue__WEBPACK_IMPORTED_MODULE_1__["default"],
+    CircleSpinner: _components_CircleSpinner_vue__WEBPACK_IMPORTED_MODULE_2__["default"]
   },
   mixins: [_mixins_dateMixin__WEBPACK_IMPORTED_MODULE_0__["default"]],
   props: {
@@ -2750,7 +2766,8 @@ __webpack_require__.r(__webpack_exports__);
         thenote: '',
         noteuser: this.authusername,
         woid: this.woid
-      }
+      },
+      noteSaving: false
     };
   },
   computed: {
@@ -2762,9 +2779,14 @@ __webpack_require__.r(__webpack_exports__);
     createNote: function createNote() {
       var _this = this;
 
+      this.noteSaving = true;
       axios.post('/api/workorders/notes', this.newNote).then(function (response) {
+        _this.noteSaving = false;
         $('#note' + _this.noteType + 'add').collapse('hide');
         _this.newNote.thenote = '';
+      })["catch"](function (error) {
+        _this.noteSaving = false;
+        console.log(error);
       });
     },
     getNoteOrders: function getNoteOrders(notes) {
@@ -51503,7 +51525,7 @@ var render = function() {
           attrs: { slot: "header", id: _vm.modalId + "Label" },
           slot: "header"
         },
-        [_vm._v("\n                Edit Note\n            ")]
+        [_vm._v("\n        Edit Note\n    ")]
       ),
       _vm._v(" "),
       _c("div", { attrs: { slot: "body" }, slot: "body" }, [
@@ -51558,7 +51580,12 @@ var render = function() {
               }
             }
           },
-          [_vm._v("Save")]
+          [
+            !_vm.noteSaving
+              ? _c("div", [_vm._v("Save")])
+              : _c("circle-spinner", { attrs: { size: 2 } })
+          ],
+          1
         )
       ])
     ]
@@ -51667,7 +51694,12 @@ var render = function() {
                         }
                       }
                     },
-                    [_vm._v("Save")]
+                    [
+                      !_vm.noteSaving
+                        ? _c("div", [_vm._v("Save")])
+                        : _c("circle-spinner", { attrs: { size: 2 } })
+                    ],
+                    1
                   )
                 ]
               )

resources/js/components/NoteFormModal.vue

@@ -1,25 +1,30 @@
 <template>
     <modal :id="modalId" tabindex="-1" role="dialog" :aria-labelledby="modalId+'Label'">
-                <h5 slot="header" class="modal-title" :id="modalId+'Label'">
-                    Edit Note
-                </h5>
-                <div slot="body">
-                    <div class="form-group">
-                        <label for="content">Content</label>
-                        <textarea :name="'content'+note.noteid" :id="'content'+note.noteid" class="form-control" v-model="note.thenote"></textarea>
-                    </div>
-                </div>
-                <div slot="footer">
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                    <button type="button" class="btn btn-primary" @click="updateNote(note)">Save</button>
-                </div>
-            </modal>
+        <h5 slot="header" class="modal-title" :id="modalId+'Label'">
+            Edit Note
+        </h5>
+        <div slot="body">
+            <div class="form-group">
+                <label for="content">Content</label>
+                <textarea :name="'content'+note.noteid" :id="'content'+note.noteid" class="form-control" v-model="note.thenote"></textarea>
+            </div>
+        </div>
+        <div slot="footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+            <button type="button" class="btn btn-primary" @click="updateNote(note)">
+                <div v-if="!noteSaving">Save</div>
+                <circle-spinner v-else :size="2"></circle-spinner>
+            </button>
+        </div>
+    </modal>
 </template>
 <script>
 import Modal from '../components/Modal.vue'
+import CircleSpinner from '../components/CircleSpinner.vue'
 export default {
     components: {
         Modal,
+        CircleSpinner,
     },
     props: {
         populateWith: {
@@ -42,13 +47,16 @@ export default {
     },
     data () {
         return {
-            note: JSON.parse(JSON.stringify(this.populateWith))
+            note: JSON.parse(JSON.stringify(this.populateWith)),
+            noteSaving: false
         }
     },
     methods: {
         updateNote (note) {
+            this.noteSaving = true
             axios.put('/api/workorders/notes/' + note.noteid, note)
                 .then((response) => {
+                    this.noteSaving = false
                     this.hideModal()
                 })
         },

resources/js/components/Notes.vue

@@ -8,7 +8,10 @@
                     <div class="collapse" :id="'note'+noteType+'add'">
                         <div class="d-flex flex-wrap flex-md-nowrap justify-content-center">
                             <textarea :name="'newnote'+noteType" :id="'newnote'+noteType" class="form-control" v-model="newNote.thenote"></textarea>
-                            <button type="button" class="btn btn-secondary m-2" @click="createNote()">Save</button>
+                            <button type="button" class="btn btn-secondary m-2" @click="createNote()">
+                                <div v-if="!noteSaving">Save</div>
+                                <circle-spinner v-else :size="2"></circle-spinner>
+                            </button>
                         </div>
                     </div>
                 </div>
@@ -39,9 +42,11 @@
 <script>
 import dateMixin from '../mixins/dateMixin'
 import NoteFormModal from '../components/NoteFormModal.vue'
+import CircleSpinner from '../components/CircleSpinner.vue'
 export default {
     components: {
         NoteFormModal,
+        CircleSpinner,
     },
     mixins:[dateMixin],
     props: {
@@ -68,8 +73,9 @@ export default {
                 notetype: this.noteType,
                 thenote: '',
                 noteuser: this.authusername,
-                woid: this.woid
+                woid: this.woid,
             },
+            noteSaving: false
         }
     },
     computed: {
@@ -79,10 +85,15 @@ export default {
     },
     methods: {
         createNote () {
+            this.noteSaving = true
             axios.post('/api/workorders/notes', this.newNote)
                     .then((response) => {
+                        this.noteSaving = false
                         $('#note'+this.noteType+'add').collapse('hide')
                         this.newNote.thenote = ''
+                    }).catch(error => {
+                        this.noteSaving = false
+                        console.log(error)
                     })
         },
         getNoteOrders(notes) {