upccrt/resources/js/components/WorkOrderInfo.vue

<template>
    <div>
        <wo-info-edit-modal modal-id="workordereditModal" :populate-with="workOrder" :store-list="this.storeList"></wo-info-edit-modal>
        <p><i class="fas fa-fw fa-info-circle"></i> <span v-text="workOrder.probdesc"></span></p>
        <p><i class="far fa-fw fa-lightbulb"></i> <span v-text="workOrder.suggested"></span></p>
        <p><i class="fas fa-fw fa-paste"></i> <span v-text="workOrder.woid"></span></p>
        <p><i class="fas fa-fw fa-building"></i> <span>{{ storeList[workOrder.storeid] }}</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(workOrder.dropdate)>
                {{ daysOrDate(workOrder.dropdate) }}
            </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(workOrder.pickupdate)" v-bind:title=this.getHRDate(workOrder.pickupdate)>
                {{ daysOrDate(workOrder.pickupdate) }}
            </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'
    import WoInfoEditModal from '../components/WoInfoEditModal'
    export default {
        components: {
            WoInfoEditModal
        },
        mixins: [dateMixin],
        props: ['workOrder', 'stores'],
        computed: {
            storeList: function () {
                let list = {}
                Object.values(this.stores).map(val => {
                    list[val.storeid] = val.storesname
                })
                return list
            }
        },
        methods: {
            daysOrDate: function(date) {
                if (this.daysSinceToday(date) <= 30) {
                    return Math.floor(this.daysSinceToday(date)) + "days ago"
                } else {
                    return this.getHRDate(date)
                }
            }
        }
    }
</script>