upccrt/resources/js/components/notes.vue

<template>
    <ul class="list-unstyled">
        <note-form-modal :modal-id="'note'+noteType+'CreateModal'" :note-type="noteType" :woid="woid" :note-user="authusername"></note-form-modal>
        <button type="button" data-toggle="modal" :data-target="'#note'+noteType+'CreateModal'" class="btn btn-primary"><i class="fas fa-fw fa-plus"></i> Add New Note</button>
        <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'
        }
    },
    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
        }
    }
}
</script>