Reimplements WO summary in SPA.

resources/js/app.js

@@ -16,7 +16,7 @@ Vue.use(VueRouter)
 
 import App from './views/App'
 import Dashboard from './views/Dashboard'
-//import WorkOrder from './views/WorkOrder'
+import WorkOrder from './views/WorkOrder'
 import Login from './views/Login'
 import Home from './views/Welcome'
 
@@ -38,11 +38,12 @@ const router = new VueRouter({
             name: 'dashboard',
             component: Dashboard,
         },
-        /* {
+        {
             path: '/workorders/:id',
             name: 'workorders',
             component: WorkOrder,
-        } */
+            props: true,
+        }
     ],
 })
 

resources/js/components/woinfo-edit-modal.vue → resources/js/components/WoInfoEditModal.vue

@@ -32,25 +32,25 @@
 </modal>
 </template>
 <script>
+import Modal from '../components/Modal'
+import AutocompleteCustomDropdown from '../components/AutocompleteCustomDropdown'
 export default {
+    components: {
+        Modal,
+        AutocompleteCustomDropdown
+    },
     props:['populateWith', 'storeList', 'modalId'],
     data() {
         return {
             // Copies object from prop, so it doesn't mutate the object
             // from the parent component. Parent component will be updated via
             // Websocket if updateWorkOrder is successful.
-            data: JSON.parse(JSON.stringify(this.populateWith)),
+            data: {},
             id: this.modalId,
             store: {},
             errors: []
         }
     },
-    mounted () {
-        this.store = {
-            'id': this.data.storeid,
-            'name': this.storeList[this.data.storeid]
-        }
-    },
     methods: {
         updateWorkOrder() {
             this.data.storeid = this.store.id
@@ -58,6 +58,21 @@ export default {
                 .then((response) => { $('#workordereditModal').modal('hide'); })
                 .catch((error) => { this.errors = JSON.parse(error.response.request.response).errors; });
         }
+    },
+    watch: {
+        populateWith: function (value) {
+            this.data = JSON.parse(JSON.stringify(this.populateWith))
+            this.store = {
+                'id': this.data.storeid,
+                'name': this.storeList[this.data.storeid]
+            }
+        },
+        storeList: function (value) {
+            this.store = {
+                'id': this.data.storeid,
+                'name': this.storeList[this.data.storeid]
+            }
+        }
     }
 }
 </script>

resources/js/components/woinfo.vue → resources/js/components/WorkOrderInfo.vue

@@ -1,18 +1,18 @@
 <template>
     <div>
-        <woinfo-edit-modal modal-id="workordereditModal" :populate-with="this.data" :store-list="this.storeList"></woinfo-edit-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>{{ storeList[data.storeid] }}</span></p>
+        <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(this.data.dropdate)>
-                {{ Math.floor(this.daysSinceToday(this.data.dropdate)) }} days ago
+            <span class="dashed-underline" data-toggle="tooltip" data-placement="bottom" v-bind:title=this.getHRDate(workOrder.dropdate)>
+                {{ Math.floor(this.daysSinceToday(workOrder.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 class="dashed-underline" data-toggle="tooltip" data-placement="bottom" v-if="!this.isZero(workOrder.pickupdate)" v-bind:title=this.getHRDate(workOrder.pickupdate)>
+                {{ Math.floor(this.daysSinceToday(workOrder.pickupdate)) }} days ago
             </span>
         </p>
         <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#workordereditModal">Edit</button>
@@ -20,28 +20,21 @@
 </template>
 <script>
     import dateMixin from '../mixins/dateMixin'
+    import WoInfoEditModal from '../components/WoInfoEditModal'
     export default {
+        components: {
+            WoInfoEditModal
+        },
         mixins: [dateMixin],
         props: ['workOrder', 'stores'],
-        data() {
-            return {
-                data: JSON.parse(this.workOrder),
-            }
-        },
         computed: {
             storeList: function () {
                 let list = {}
-                JSON.parse(this.stores).map(val => {
+                Object.values(this.stores).map(val => {
                     list[val.storeid] = val.storesname
                 })
                 return list
             }
         },
-        mounted() {
-            Echo.channel('work-order.'+this.data.woid)
-                .listen('WorkOrderUpdated', (e) => {
-                    this.data = e.data;
-                });
-        }
     }
 </script>

resources/js/views/WorkOrder.vue

@@ -0,0 +1,135 @@
+<template>
+    <div class="container-fluid">
+        <div class="row my-3">
+            <div class="col-lg-6">
+                <div class="card h-100">
+                    <div class="card-header text-right">
+                        <button type="button" class="btn btn-default xs-toggle" data-toggle="collapse" data-target="#assetTab">
+                            <span class="sr-only">Toggle Navigation</span>
+                            <span class="icon-bar"></span>
+                            <span class="icon-bar"></span>
+                            <span class="icon-bar"></span>
+                        </button>
+                        <ul class="nav nav-pills card-header-pills nav-justified xs-collapse collapse" id="assetTab" role="tablist">
+                            <li class="nav-item">
+                                <a class="nav-link active" id="assetinfo-tab" data-toggle="pill" href="#assetinfo" role="tab" aria-controls="assetinfo" aria-selected="true">Hardware</a>
+                            </li>
+                            <!-- @if($workOrder->asset->group !== null)
+                            <li class="nav-item">
+                                <a class="nav-link" id="group-tab" data-toggle="pill" href="#group" role="tab" aria-controls="group" aria-selected="false">Group</a>
+                            </li>
+                            @endif -->
+                            <li class="nav-item">
+                                <a class="nav-link" id="credentials-tab" data-toggle="pill" href="#credentials" role="tab" aria-controls="credentials" aria-selected="false">Credentials</a>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="card-body">
+                        <div class="tab-content">
+                            <div class="tab-pane active" id="assetinfo" role="tabpanel" aria-labelledby="assetinfo-tab">
+                                <!-- <assetinfo asset="{{$asset}}"></assetinfo> -->
+                            </div>
+                            <!-- @if($workOrder->asset->group !== null)
+                            <div class="tab-pane" id="group" role="tabpanel" aria-labelledby="group-tab">
+                                Name: {{$workOrder->asset->group->pcgroupname}}
+                            </div>
+                            @endif
+                            <div class="tab-pane" id="credentials" role="tabpanel" aria-labelledby="credentials-tab">
+                                <credential-list :credential-list="{{$workOrder->asset->credentials->sortByDesc('creddate')->values()}}" :descriptions="{{App\CredDesc::all()}}" :pcid="{{$workOrder->asset->pcid}}"></credential-list>
+                            </div> -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-6">
+                <div class="card h-100">
+                    <div class="card-header text-right">
+                        <button type="button" class="btn btn-default xs-toggle" data-toggle="collapse" data-target="#workorderTab">
+                            <span class="sr-only">Toggle Navigation</span>
+                            <span class="icon-bar"></span>
+                            <span class="icon-bar"></span>
+                            <span class="icon-bar"></span>
+                        </button>
+                        <ul class="nav nav-pills card-header-pills nav-justified xs-collapse collapse" id="workorderTab" role="tablist">
+                            <li class="nav-item">
+                                <a class="nav-link active" id="workordersumm-tab" data-toggle="pill" href="#workordersumm" role="tab" aria-controls="workordersumm" aria-selected="true">Summary</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" id="attachments-tab" data-toggle="pill" href="#attachments" role="tab" aria-controls="attachments" aria-selected="false">Attachments</a>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class='card-body'>
+                        <div class='tab-content'>
+                            <div class="tab-pane active" id="workordersumm" role="tabpanel" aria-labelledby="workordersumm-tab">
+                                <work-order-info :work-order="workOrder" :stores="stores"></work-order-info>
+                            </div>
+                            <div class="tab-pane" id="attachments" role="tabpanel" aria-labelledby="attachments-tab">
+                                TODO 2
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- <div class="row my-3 no-gutters">
+            <div class="col-12">
+                <div class="card">
+                    <div class="card-body">
+                        <h5 class="card-title">Customer Notes</h5>
+                        <notes :initialnotes='{{ $workOrder->notes->where('notetype', '0')->values() }}' authusername="{{Auth::user()->username}}" :note-type="0" :woid="{{$workOrder->woid}}"></notes>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row my-3 no-gutters">
+            <div class="col-12">
+                <div class="card">
+                    <div class="card-body">
+                        <h5 class="card-title">Private/Billing Notes</h5>
+                        <notes :initialnotes='{{ $workOrder->notes->where('notetype', '1')->values() }}' authusername="{{Auth::user()->username}}" :note-type="1" :woid="{{$workOrder->woid}}"></notes>
+                    </div>
+                </div>
+            </div>
+        </div> -->
+    </div>
+</template>
+<script>
+import WorkOrderInfo from '../components/WorkOrderInfo.vue'
+export default {
+    components: {
+        WorkOrderInfo,
+    },
+    props: ['id'],
+    data () {
+        return {
+            workOrder: {},
+            stores: {},
+        }
+    },
+    mounted () {
+        let token = localStorage.getItem('jwt')
+        let user = localStorage.getItem('user')
+
+        axios.defaults.headers.common['Content-Type'] = 'application/json'
+        axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
+
+        axios.get('/api/workorders/'+this.id).then(response => {
+            this.workOrder = response.data
+        }).catch(error => {
+            console.log(error)
+        })
+
+        axios.get('/api/stores/').then(response => {
+            this.stores = response.data
+        }).catch(error => {
+            console.log(error)
+        })
+        
+        Echo.channel('work-order.'+this.id)
+                .listen('WorkOrderUpdated', (e) => {
+                    this.workOrder = e.data;
+                });
+    },
+}
+</script>