upccrt/resources/js/components/woinfo.vue

<template>
    <div>
        <modal id="workordereditModal" tabindex="-1" role="dialog" aria-labelledby="workordereditModalLabel">
            <h5 slot="header" class="modal-title" id="workordereditModalLabel">
                Edit Work Order Information
            </h5>
            <div slot="body">
                <div class="form-group">
                    <label for="probdesc">Problem Description</label>
                    <textarea id="probdesc" name="probdesc" class="form-control" v-model="data.probdesc"></textarea>
                </div>
                <div class="form-group">
                    <label for="suggested">Suggested Solution</label>
                    <textarea id="suggested" name="suggested" class="form-control" v-model="data.suggested"></textarea>
                </div>
                <div class="form-group">
                    <label for="storelist">Store</label>
                    <select name="storelist" id="storelist" class="form-control" v-model="data.storeid">
                        <option v-for="store in storeList" v-bind:key="store.storeid" v-bind:value="store.storeid">
                            {{ store.storesname }}
                        </option>
                    </select>
                </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="updateWorkOrder()">Save</button>
            </div>
        </modal>
        <p><i class="fas fa-fw fa-info-circle"></i> <span v-text="this.data.probdesc"></span></p>
        <p><i class="far fa-fw fa-lightbulb"></i> <span v-text="this.data.suggested"></span></p>
        <p><i class="fas fa-fw fa-paste"></i> <span v-text="this.data.woid"></span></p>
        <p><i class="fas fa-fw fa-building"></i> <span>{{ storeName }}</span></p>
        <p><i class="fas fa-fw fa-sign-in-alt"></i> 
            <span class="dashed-underline" data-toggle="tooltip" data-placement="bottom" v-bind:title=this.getHRDate(this.data.dropdate)>
                {{ Math.floor(this.daysSinceToday(this.data.dropdate)) }} days ago
            </span>
        </p>
        <p><i class="fas fa-sign-out-alt"></i> 
            <span class="dashed-underline" data-toggle="tooltip" data-placement="bottom" v-if="!this.isZero(this.data.pickupdate)" v-bind:title=this.getHRDate(this.data.pickupdate)>
                {{ Math.floor(this.daysSinceToday(this.data.pickupdate)) }} days ago
            </span>
        </p>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#workordereditModal">Edit</button>
    </div>
</template>
<script>
    import dateMixin from '../mixins/dateMixin'
    export default {
        mixins: [dateMixin],
        props: ['workOrder'],
        data() {
            return {
                data: JSON.parse(this.workOrder),
                storeName: null,
                storeList: null,
            }
        },
        mounted() {
            Echo.channel('work-orders')
                .listen('WorkOrderUpdated', (e) => {
                    this.data = JSON.parse(e.data);
                    this.storeName = this.getStoreName();
                });
            axios.get('/api/stores').then((response) => { this.storeList = response.data }).catch((error) => { console.error(error) });
            this.storeList = this.getStoreName();
        },
        methods: {
            updateWorkOrder() {
                axios.put('/api/workorders/' + this.data.woid, this.data)
                    .then((response) => {})
                    .catch((error) => {});
                $('#workordereditModal').modal('hide');
            },
            getStoreName() {
                axios.get('/api/stores/' + this.data.storeid)
                    .then((response) => { this.storeName = response.data.storesname })
                    .catch((error) => { console.error(error) });
            }
        }
    }
</script>