upccrt/resources/js/components/NoteFormModal.vue

<template>
    <div>
        <modal v-if="changeType" :id="modalId" tabindex="-1" role="dialog" :aria-labelledby="modalId+'Label'">
            <!-- We want the original notetype, if we used note.notetype the text would change as soon as we hit the Confirm button.
            This way the change in text occurs when we receive the updated info from the backend, so we can make sure there are no
            errors preventing the data from actually changing first -->
            <h5 v-if="populateWith.notetype === 0 " slot="header" class="modal-title" :id="modalId+'Label'">
                Change to Private Note
            </h5>
            <h5 v-else slot="header" class="modal-title" :id="modalId+'Label'">
                Change to Public Note
            </h5>
            <div slot="body">
                Are you sure?
            </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()">
                    <div v-if="!noteSaving">Confirm</div>
                    <circle-spinner v-else :size="2"></circle-spinner>
                </button>
            </div>
        </modal>
        <modal v-else :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()">
                    <div v-if="!noteSaving">Save</div>
                    <circle-spinner v-else :size="2"></circle-spinner>
                </button>
            </div>
        </modal>
    </div>
</template>
<script>
import Modal from '../components/Modal.vue'
import CircleSpinner from '../components/CircleSpinner.vue'
export default {
    components: {
        Modal,
        CircleSpinner,
    },
    props: {
        populateWith: {
            type: Object,
            require: true
        },
        modalId: {
            type: String,
            require: true
        },
        noteUser: {
            type: String
        },
        woid: {
            type: Number
        },
        // If true, user is intending to switch the note
        // from public to private or vice/versa. Modal
        // Will be displayed differently, but the update
        // logic is only different for one line of code.
        changeType: {
            type: Boolean,
            default: false,
        }
    },
    data () {
        return {
            note: JSON.parse(JSON.stringify(this.populateWith)),
            noteSaving: false,
        }
    },
    methods: {
        updateNote () {
            this.noteSaving = true
            if (this.changeType) {
                this.note.notetype = (this.note.notetype === 1 ? 0 : 1)
            }
            axios.put('/api/workorders/notes/' + this.note.noteid, this.note)
                .then((response) => {
                    this.noteSaving = false
                    this.hideModal()
                })
        },
        hideModal () {
            $('#'+this.modalId).modal('hide')
        }
    }
}
</script>