upccrt/resources/js/components/notes.vue

<template>
    <ul class="list-unstyled">
            <div class="row">
                <div class="col-md-2 d-flex justify-content-center justify-content-md-start">
                    <button type="button" data-toggle="collapse" :data-target="'#note'+noteType+'add'" class="btn btn-primary m-2"><i class="fas fa-fw fa-plus"></i> Add New Note</button>
                </div>
                <div class="col-md-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>
                        </div>
                    </div>
                </div>
            </div>
        <li class="row no-gutters mb-2" v-bind:key="index" v-for="(note, index) in this.notes">
            <note-form-modal :modal-id="'note'+note.noteid+'editModal'" :populate-with="note"></note-form-modal>
            <div class="col-md-1 d-flex flex-column mx-md-3" :class="setOrder(index)">
                <div class="text-center p-0 m-0">{{note.noteuser}}</div>
                <div class="text-muted text-small text-center p-0 m-0">{{getHRDate(note.notetime)}}</div>
                <div class="btn-group justify-content-center p-0 m-0">
                    <template v-if="authusername === note.noteuser || authusername === 'admin'">
                        <button class="btn btn-sm btn-primary m-1" data-toggle="modal" :data-target="'#note'+note.noteid+'editModal'"><i class="fas fa-fw fa-edit"></i></button>
                        <button class="btn btn-sm btn-danger m-1"><i class="fas fa-fw fa-trash-alt"></i></button>
                        <button class="btn btn-sm btn-primary m-1"><i class="fa fa-fw fa-random"></i></button>
                    </template>
                </div>
            </div>
            <div class="col-md-10">
                <div class="card m-2">
                    <div class="card-body p-2">
                        {{ note.thenote }}
                    </div>
                </div>
            </div>
        </li>
    </ul>
</template>
<script>
import dateMixin from '../mixins/dateMixin'
export default {
    mixins:[dateMixin],
    props: ['initialnotes', 'authusername', 'noteType', 'woid'],
    data () {
        return {
            notes: Object.values(this.initialnotes),
            currentOrder: 'order-first',
            newNote: {
                notetype: this.noteType,
                thenote: '',
                noteuser: this.authusername,
                woid: this.woid
            }
        }
    },
    mounted () {
        Echo.channel('wonotes.'+this.noteType+'.'+this.woid)
            .listen('WorkOrderNoteAdded', (e) => {
                this.notes.push(e.note)
            })
            .listen('WorkOrderNoteEdited', (e) => {
                let index = this.notes.findIndex((note) => {
                    return note.noteid === e.note.noteid
                })
                this.notes[index] = e.note
            })
            .listen('WorkOrderNoteDeleted', (e) => {
                let index = this.notes.findIndex((note) => {
                    return note.noteid === e.noteid
                })
                this.notes.splice(index, 1)
            })
    },
    methods: {
        setOrder (index) {
            if (index === 0) {
                this.currentOrder = 'order-first'
            } else if (this.notes[index].noteuser !== this.notes[index-1].noteuser) {
                if (this.currentOrder === 'order-first') {
                    this.currentOrder = 'order-last'
                } else {
                    this.currentOrder = 'order-first'
                }
            }
            return this.currentOrder
        },
        createNote () {
            axios.post('/api/workorders/notes', this.newNote)
                    .then((response) => {
                        $('#note'+this.noteType+'add').collapse('hide')
                        this.newNote.thenote = ''
                    })
        }
    }
}
</script>