Lab, imaging, equipment UI [wip]

public/css/style.css

@@ -128,6 +128,9 @@ body.stag_rhs_collapsed .app-right-panel {
 .mcp-theme-1 .on-hover-opaque:hover {
     opacity: 1;
 }
+.mcp-theme-1 .opacity-60 {
+    opacity: .6;
+}
 .mcp-theme-1 .text-secondary-light {
     color: #c9ddef !important;
 }

resources/views/app/patient/action-items.blade.php

@@ -9,186 +9,15 @@
     </div>
 
     <div class="mt-4">
-        <div class="d-flex align-items-center pb-2">
-            <h4 class="font-weight-bold m-0">Orders</h4>
-            <span class="mx-2 text-secondary">|</span>
-            <div moe>
-                <a start show class="py-0 font-weight-normal">Add</a>
-                <form url="/api/actionItem/create" wide>
-                    <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
-                    <input type="hidden" name="prescriberProUid" value="{{ $pro->uid }}">
-                    <div class="mb-2">
-                        <label for="" class="control-label text-sm text-secondary mb-1">Facility</label>
-                        <select name="toFacilityUid"
-                                class="form-control form-control-sm">
-                            <option value="">-- Facility --</option>
-                            @foreach ($facilities as $facility)
-                                <option value="{{$facility->uid}}">{{$facility->name}}</option>
-                            @endforeach
-                        </select>
-                    </div>
-                    <div class="mb-2">
-                        <label for="" class="control-label text-sm text-secondary mb-1">Category *</label>
-                        <select name="category"
-                                class="form-control form-control-sm" required>
-                            <option value="">-- Category --</option>
-                            <option value="DIAGNOSTIC">Diagnostic</option>
-                            <option value="APPOINTMENT">Appointment</option>
-                            <option value="EXERCISE">Exercise</option>
-                            <option value="DIETETITC">Dietetitc</option>
-                            <option value="EQUIPMENT">Equipment</option>
-                            <option value="OTHER">Other</option>
-                        </select>
-                    </div>
-                    <div class="mb-2">
-                        <input type="text" class="form-control form-control-sm" name="contentText" value="" placeholder="Title *" required>
-                    </div>
-                    <div class="mb-2">
-                        <input type="text" class="form-control form-control-sm" name="contentDetail" value="" placeholder="Details">
-                    </div>
-                    <div class="d-flex align-items-center">
-                        <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                        <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                    </div>
-                </form>
-            </div>
-        </div>
-        <table class="table table-sm table-bordered mb-0" style="table-layout: fixed">
-            <thead>
-            <tr>
-                <th class="px-2 text-secondary border-bottom-0">Category</th>
-                <th class="px-2 text-secondary border-bottom-0">Facility</th>
-                <th class="px-2 text-secondary border-bottom-0 w-25">Action</th>
-                <th class="px-2 text-secondary border-bottom-0">Created</th>
-                <th class="px-2 text-secondary border-bottom-0">Status</th>
-                <th class="px-2 text-secondary border-bottom-0">&nbsp;</th>
-            </tr>
-            </thead>
-            <tbody>
-            <?php $prevItemType = false; ?>
-            @foreach($patient->actionItems as $item)
-                @if($item->action_item_category !== 'DRUG')
-                @if(!$prevItemType || $prevItemType !== $item->action_item_category)
-                    <tr class="bg-light">
-                        <td colspan="6" class="font-weight-bold px-2">
-                            {{ucwords(str_replace("_", " ", strtolower($item->action_item_category)))}}
-                        </td>
-                    </tr>
-                @endif
-                <tr>
-                    <td class="px-2">
-                        &nbsp;
-                    </td>
-                    <td class="px-2">
-                        {{$item->facility ? $item->facility->name : ''}}
-                        <span moe>
-                            <a start show class="on-hover-opaque"><i class="fa fa-edit"></i></a>
-                            <form url="/api/actionItem/updateToFacility">
-                                <input type="hidden" name="uid" value="{{ $item->uid }}">
-                                <div class="mb-2">
-                                    <label for="" class="control-label text-sm text-secondary mb-1">Pharmacy *</label>
-                                    <select name="toFacilityUid" class="form-control form-control-sm" required>
-                                        <option value="">-- Pharmacy --</option>
-                                        @foreach ($facilities as $facility)
-                                            <option {{ $item->to_facility_id === $facility->id ? 'selected' : '' }} value="{{$facility->uid}}">{{$facility->name}}</option>
-                                        @endforeach
-                                    </select>
-                                </div>
-                                <div class="d-flex align-items-center">
-                                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                </div>
-                            </form>
-                        </span>
-                    </td>
-                    <td class="px-2">
-                        {{$item->content_text}}
-                        <span moe>
-                            <a start show class="on-hover-opaque"><i class="fa fa-edit"></i></a>
-                            <form url="/api/actionItem/updateContent" wide>
-                                <input type="hidden" name="uid" value="{{ $item->uid }}">
-                                <div class="mb-2">
-                                    <input type="text" class="form-control form-control-sm" name="contentText" value="{{ $item->content_text }}" placeholder="Title *" required>
-                                </div>
-                                <div class="mb-2">
-                                    <input type="text" class="form-control form-control-sm" name="contentDetail" value="{{ $item->content_detail }}" placeholder="Details">
-                                </div>
-                                <div class="d-flex align-items-center">
-                                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                </div>
-                            </form>
-                        </span>
-                        <div class="text-sm text-secondary">{{$item->content_detail}}</div>
-                    </td>
-                    <td class="px-2">{{friendly_date_time($item->created_at, false)}}</td>
-                    <td class="px-2">
-                        {{$item->status_category}}
-                        <span moe>
-                            <a start show class="on-hover-opaque"><i class="fa fa-edit"></i></a>
-                            <form url="/api/actionItem/updateStatus">
-                                <input type="hidden" name="uid" value="{{ $item->uid }}">
-                                <div class="mb-2">
-                                    <label for="" class="control-label text-sm text-secondary mb-1">Status *</label>
-                                    <select name="statusCategory" class="form-control form-control-sm" required>
-                                        <option {{ $item->status_category === 'OPEN' ? 'selected' : '' }} value="OPEN">Open</option>
-                                        <option {{ $item->status_category === 'CLOSED' ? 'selected' : '' }} value="CLOSED">Closed</option>
-                                    </select>
-                                </div>
-                                <div class="mb-2">
-                                    <input type="text" class="form-control form-control-sm" name="statusMemo" value="" placeholder="Memo">
-                                </div>
-                                <div class="d-flex align-items-center">
-                                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                </div>
-                            </form>
-                        </span>
-                    </td>
-                    <td class="px-2 text-center">
-                        <div class="d-flex align-items-center justify-content-start">
-                            @if($item->is_signed_by_prescriber)
-                                <span class="text-secondary">
-                                <i class="fa fa-check"></i>
-                                Signed
-                            </span>
-                                <span class="mx-2 text-secondary">|</span>
-                            @else
-                                @if($pro->id === $item->prescriber_pro_id)
-                                    <span moe relative>
-                                    <a start show>Sign</a>
-                                    <form url="/api/actionItem/signAsPrescriber" right>
-                                        <input type="hidden" name="uid" value="{{ $item->uid }}">
-                                        <p class="small min-width-200px text-left">Sign this action items as the prescriber?</p>
-                                        <div class="d-flex align-items-center">
-                                            <button class="btn btn-sm btn-success mr-2" submit>Yes</button>
-                                            <button class="btn btn-sm btn-default mr-2 border" cancel>No</button>
-                                        </div>
-                                    </form>
-                                </span>
-                                    <span class="mx-2 text-secondary">|</span>
-                                @endif
-                            @endif
-                            <span moe relative>
-                            <a start show>eFax</a>
-                            <form url="/api/actionItem/efax" right>
-                                <input type="hidden" name="uid" value="{{ $item->uid }}">
-                                <div class="mb-2">
-                                    <input type="text" class="form-control form-control-sm" name="toFaxNumber" value="" placeholder="To Number *" required>
-                                </div>
-                                <div class="d-flex align-items-center">
-                                    <button class="btn btn-sm btn-primary mr-2" submit>Send</button>
-                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                </div>
-                            </form>
-                        </span>
-                        </div>
-                    </td>
-                </tr>
-                <?php $prevItemType = $item->action_item_category; ?>
-                @endif
-            @endforeach
-            </tbody>
-        </table>
+        @include('app/patient/partials/lab')
     </div>
+
+    <div class="mt-4">
+        @include('app/patient/partials/imaging')
+    </div>
+
+    <div class="mt-4">
+        @include('app/patient/partials/equipment')
+    </div>
+
 @endsection

resources/views/app/patient/partials/equipment.blade.php

@@ -0,0 +1,158 @@
+<div id="equipmentApp" v-cloak>
+    <div class="d-flex align-items-center pb-2">
+        <h4 class="font-weight-bold m-0">Equipment/Device</h4>
+        <span class="mx-2 text-secondary">|</span>
+        <a class="py-0 font-weight-normal c-pointer" v-on:click.prevent="showPopup('equipment-popup')">Add</a>
+    </div>
+    <table class="table table-sm table-bordered mb-0" style="table-layout: fixed">
+        <thead>
+        <tr>
+            <th class="px-2 text-secondary border-bottom-0 width-30px">#</th>
+            <th class="px-2 text-secondary border-bottom-0">Items</th>
+            <th class="px-2 text-secondary border-bottom-0">Purpose</th>
+            <th class="px-2 text-secondary border-bottom-0">Memo</th>
+            <th class="px-2 text-secondary border-bottom-0">&nbsp;</th>
+        </tr>
+        </thead>
+        <tbody>
+            <tr v-for="(item, index) in items" :class="item.is_open ? '' : 'opacity-60'">
+                <td class="px-2">#</td>
+                <td class="px-2">@{{item.items}}</td>
+                <td class="px-2">@{{item.purpose}}</td>
+                <td class="px-2">@{{item.memo}}</td>
+                <td class="px-2 text-nowrap">
+                    <a class="mr-2 c-pointer" v-on:click.prevent="showPopup('equipment-popup', item)">Edit</a>
+                    <a class="mr-2 c-pointer" v-if="item.is_open" v-on:click.prevent="closeItem(item)">Close</a>
+                    <a class="mr-2 c-pointer" v-if="!item.is_open" v-on:click.prevent="openItem(item)">Open</a>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    <div class="stag-popup stag-popup-sm mcp-theme-1" stag-popup-key="equipment-popup">
+        <form method="POST" action="/api/appointment/create">
+            <h3 class="stag-popup-title mb-2">
+                <span>@{{ popupMode === 'add' ? 'Add Equipment' : 'Edit Equipment' }}</span>
+                <a href="#" class="ml-auto text-secondary"
+                   onclick="return closeStagPopup()"><i class="fa fa-times-circle"></i></a>
+            </h3>
+            <div class="mb-2">
+                    <equipmentel class="text-sm text-secondary mb-1">Items</equipmentel>
+                    <input type="text" v-model="popupItem.items" class="form-control form-control-sm">
+            </div>
+            <div class="mb-2">
+                <equipmentel class="text-sm text-secondary mb-1">Purpose</equipmentel>
+                <input type="text" v-model="popupItem.purpose" class="form-control form-control-sm">
+            </div>
+            <div class="mb-2">
+                <equipmentel class="text-sm text-secondary mb-1">Memo</equipmentel>
+                <input type="text" v-model="popupItem.memo" class="form-control form-control-sm">
+            </div>
+            <div class="d-flex align-items-center justify-content-center mt-3">
+                <button type="button" class="btn btn-sm btn-primary mr-2" v-on:click.prevent="savePopupItem()">Submit</button>
+                <button type="button" class="btn btn-sm btn-default border" onclick="return closeStagPopup()">Cancel</button>
+            </div>
+        </form>
+    </div>
+</div>
+<script>
+    (function() {
+        <?php
+        $tickets = $patient->tickets->filter(function($_item) {
+            return $_item->category === 'equipment';
+        });
+        $items = [];
+        foreach ($tickets as $ticket) {
+            $item = json_decode($ticket->data);
+            $item->uid = $ticket->uid;
+            $item->is_open = $ticket->is_open;
+            $items[] = $item;
+        }
+        ?>
+        function init() {
+            let items = [];
+            let equipmentApp = new Vue({
+                el: '#equipmentApp',
+                delimiters: ['@{{', '}}'],
+                data: {
+                    popupMode: 'add',
+                    items: {!! json_encode($items) !!},
+                    popupItem: {
+                        uid: '',
+                        is_open: true,
+                        items: '',
+                        purpose: '',
+                        memo: '',
+                    },
+                },
+                methods: {
+                    showPopup: function(_name, _item) {
+                        closeStagPopup();
+                        this.popupMode = _item ? 'edit' : 'add';
+                        this.popupItem = _item ? _item : {
+                            uid: '',
+                            is_open: true,
+                            items: '',
+                            purpose: '',
+                            memo: '',
+                        };
+                        showStagPopup('equipment-popup');
+                    },
+                    savePopupItem: function() {
+                        let form = $('#equipmentApp form').first();
+                        if(!form[0].checkValidity()) {
+                            form[0].reportValidity();
+                            return false;
+                        }
+
+                        showMask();
+                        let payload = {};
+                        if(this.popupMode === 'add') {
+                            payload.clientUid = '{{ $patient->uid }}';
+                            payload.category = 'equipment';
+                            payload.assignedProUid = '{{ $pro->uid  }}';
+                            payload.managerProUid = '{{ $pro->uid  }}';
+                            payload.orderingProUid = '{{ $pro->uid  }}';
+                            payload.initiatingProUid = '{{ $pro->uid  }}';
+                            payload.data = JSON.stringify(this.popupItem);
+                        }
+                        else {
+                            payload.uid = this.popupItem.uid;
+                            payload.newData = JSON.stringify(this.popupItem);
+                        }
+
+                        $.post(
+                            '/api/ticket/' + (this.popupMode === 'add' ? 'create' : 'updateData'),
+                            payload,
+                            function(_data) {
+                                console.log(_data);
+                                fastReload();
+                            },
+                            'json');
+
+                        return false;
+                    },
+                    closeItem: function(_item) {
+                        showMask();
+                        $.post('/api/ticket/close', {
+                            uid: _item.uid
+                        }, function(_data) {
+                            fastReload();
+                        });
+                    },
+                    openItem: function(_item) {
+                        showMask();
+                        $.post('/api/ticket/open', {
+                            uid: _item.uid
+                        }, function(_data) {
+                            fastReload();
+                        });
+                    }
+                },
+                mounted: function () {
+
+                }
+            })
+        }
+        addMCInitializer('equipment', init, '#equipmentApp');
+    })();
+</script>

resources/views/app/patient/partials/erx.blade.php

@@ -1,8 +1,8 @@
-<div id="erxApp">
+<div id="erxApp" v-cloak>
     <div class="d-flex align-items-center pb-2">
         <h4 class="font-weight-bold m-0">ERx</h4>
         <span class="mx-2 text-secondary">|</span>
-        <a class="py-0 font-weight-normal c-pointer" v-on:click.prevent="showPopup('erx-poppup')">Add</a>
+        <a class="py-0 font-weight-normal c-pointer" v-on:click.prevent="showPopup('erx-popup')">Add</a>
     </div>
     <table class="table table-sm table-bordered mb-0" style="table-layout: fixed">
         <thead>
@@ -21,7 +21,7 @@
         </tr>
         </thead>
         <tbody>
-            <tr v-for="(item, index) in items">
+            <tr v-for="(item, index) in items" :class="item.is_open ? '' : 'opacity-60'">
                 <td class="px-2">#</td>
                 <td class="px-2">@{{item.medication}}</td>
                 <td class="px-2">@{{item.strength}}</td>
@@ -209,7 +209,7 @@
                             return false;
                         }
 
-                        // showMask();
+                        showMask();
                         let payload = {};
                         if(this.popupMode === 'add') {
                             payload.clientUid = '{{ $patient->uid }}';
@@ -237,6 +237,7 @@
                         return false;
                     },
                     closeItem: function(_item) {
+                        showMask();
                         $.post('/api/ticket/close', {
                             uid: _item.uid
                         }, function(_data) {
@@ -244,6 +245,7 @@
                         });
                     },
                     openItem: function(_item) {
+                        showMask();
                         $.post('/api/ticket/open', {
                             uid: _item.uid
                         }, function(_data) {

resources/views/app/patient/partials/imaging.blade.php

@@ -0,0 +1,158 @@
+<div id="imagingApp" v-cloak>
+    <div class="d-flex align-items-center pb-2">
+        <h4 class="font-weight-bold m-0">Imaging</h4>
+        <span class="mx-2 text-secondary">|</span>
+        <a class="py-0 font-weight-normal c-pointer" v-on:click.prevent="showPopup('imaging-popup')">Add</a>
+    </div>
+    <table class="table table-sm table-bordered mb-0" style="table-layout: fixed">
+        <thead>
+        <tr>
+            <th class="px-2 text-secondary border-bottom-0 width-30px">#</th>
+            <th class="px-2 text-secondary border-bottom-0">Tests</th>
+            <th class="px-2 text-secondary border-bottom-0">ICDs</th>
+            <th class="px-2 text-secondary border-bottom-0">Memo</th>
+            <th class="px-2 text-secondary border-bottom-0">&nbsp;</th>
+        </tr>
+        </thead>
+        <tbody>
+            <tr v-for="(item, index) in items" :class="item.is_open ? '' : 'opacity-60'">
+                <td class="px-2">#</td>
+                <td class="px-2">@{{item.tests}}</td>
+                <td class="px-2">@{{item.icds}}</td>
+                <td class="px-2">@{{item.memo}}</td>
+                <td class="px-2 text-nowrap">
+                    <a class="mr-2 c-pointer" v-on:click.prevent="showPopup('imaging-popup', item)">Edit</a>
+                    <a class="mr-2 c-pointer" v-if="item.is_open" v-on:click.prevent="closeItem(item)">Close</a>
+                    <a class="mr-2 c-pointer" v-if="!item.is_open" v-on:click.prevent="openItem(item)">Open</a>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    <div class="stag-popup stag-popup-sm mcp-theme-1" stag-popup-key="imaging-popup">
+        <form method="POST" action="/api/appointment/create">
+            <h3 class="stag-popup-title mb-2">
+                <span>@{{ popupMode === 'add' ? 'Add Imaging Order Item' : 'Edit Imaging Order Item' }}</span>
+                <a href="#" class="ml-auto text-secondary"
+                   onclick="return closeStagPopup()"><i class="fa fa-times-circle"></i></a>
+            </h3>
+            <div class="mb-2">
+                    <imagingel class="text-sm text-secondary mb-1">Tests</imagingel>
+                    <input type="text" v-model="popupItem.tests" class="form-control form-control-sm">
+            </div>
+            <div class="mb-2">
+                <imagingel class="text-sm text-secondary mb-1">ICDs</imagingel>
+                <input type="text" v-model="popupItem.icds" class="form-control form-control-sm">
+            </div>
+            <div class="mb-2">
+                <imagingel class="text-sm text-secondary mb-1">Memo</imagingel>
+                <input type="text" v-model="popupItem.memo" class="form-control form-control-sm">
+            </div>
+            <div class="d-flex align-items-center justify-content-center mt-3">
+                <button type="button" class="btn btn-sm btn-primary mr-2" v-on:click.prevent="savePopupItem()">Submit</button>
+                <button type="button" class="btn btn-sm btn-default border" onclick="return closeStagPopup()">Cancel</button>
+            </div>
+        </form>
+    </div>
+</div>
+<script>
+    (function() {
+        <?php
+        $tickets = $patient->tickets->filter(function($_item) {
+            return $_item->category === 'imaging';
+        });
+        $items = [];
+        foreach ($tickets as $ticket) {
+            $item = json_decode($ticket->data);
+            $item->uid = $ticket->uid;
+            $item->is_open = $ticket->is_open;
+            $items[] = $item;
+        }
+        ?>
+        function init() {
+            let items = [];
+            let imagingApp = new Vue({
+                el: '#imagingApp',
+                delimiters: ['@{{', '}}'],
+                data: {
+                    popupMode: 'add',
+                    items: {!! json_encode($items) !!},
+                    popupItem: {
+                        uid: '',
+                        is_open: true,
+                        tests: '',
+                        icds: '',
+                        memo: '',
+                    },
+                },
+                methods: {
+                    showPopup: function(_name, _item) {
+                        closeStagPopup();
+                        this.popupMode = _item ? 'edit' : 'add';
+                        this.popupItem = _item ? _item : {
+                            uid: '',
+                            is_open: true,
+                            tests: '',
+                            icds: '',
+                            memo: '',
+                        };
+                        showStagPopup('imaging-popup');
+                    },
+                    savePopupItem: function() {
+                        let form = $('#imagingApp form').first();
+                        if(!form[0].checkValidity()) {
+                            form[0].reportValidity();
+                            return false;
+                        }
+
+                        showMask();
+                        let payload = {};
+                        if(this.popupMode === 'add') {
+                            payload.clientUid = '{{ $patient->uid }}';
+                            payload.category = 'imaging';
+                            payload.assignedProUid = '{{ $pro->uid  }}';
+                            payload.managerProUid = '{{ $pro->uid  }}';
+                            payload.orderingProUid = '{{ $pro->uid  }}';
+                            payload.initiatingProUid = '{{ $pro->uid  }}';
+                            payload.data = JSON.stringify(this.popupItem);
+                        }
+                        else {
+                            payload.uid = this.popupItem.uid;
+                            payload.newData = JSON.stringify(this.popupItem);
+                        }
+
+                        $.post(
+                            '/api/ticket/' + (this.popupMode === 'add' ? 'create' : 'updateData'),
+                            payload,
+                            function(_data) {
+                                console.log(_data);
+                                fastReload();
+                            },
+                            'json');
+
+                        return false;
+                    },
+                    closeItem: function(_item) {
+                        showMask();
+                        $.post('/api/ticket/close', {
+                            uid: _item.uid
+                        }, function(_data) {
+                            fastReload();
+                        });
+                    },
+                    openItem: function(_item) {
+                        showMask();
+                        $.post('/api/ticket/open', {
+                            uid: _item.uid
+                        }, function(_data) {
+                            fastReload();
+                        });
+                    }
+                },
+                mounted: function () {
+
+                }
+            })
+        }
+        addMCInitializer('imaging', init, '#imagingApp');
+    })();
+</script>

resources/views/app/patient/partials/lab.blade.php

@@ -0,0 +1,158 @@
+<div id="labApp" v-cloak>
+    <div class="d-flex align-items-center pb-2">
+        <h4 class="font-weight-bold m-0">Lab</h4>
+        <span class="mx-2 text-secondary">|</span>
+        <a class="py-0 font-weight-normal c-pointer" v-on:click.prevent="showPopup('lab-popup')">Add</a>
+    </div>
+    <table class="table table-sm table-bordered mb-0" style="table-layout: fixed">
+        <thead>
+        <tr>
+            <th class="px-2 text-secondary border-bottom-0 width-30px">#</th>
+            <th class="px-2 text-secondary border-bottom-0">Tests</th>
+            <th class="px-2 text-secondary border-bottom-0">ICDs</th>
+            <th class="px-2 text-secondary border-bottom-0">Memo</th>
+            <th class="px-2 text-secondary border-bottom-0">&nbsp;</th>
+        </tr>
+        </thead>
+        <tbody>
+            <tr v-for="(item, index) in items" :class="item.is_open ? '' : 'opacity-60'">
+                <td class="px-2">#</td>
+                <td class="px-2">@{{item.tests}}</td>
+                <td class="px-2">@{{item.icds}}</td>
+                <td class="px-2">@{{item.memo}}</td>
+                <td class="px-2 text-nowrap">
+                    <a class="mr-2 c-pointer" v-on:click.prevent="showPopup('lab-popup', item)">Edit</a>
+                    <a class="mr-2 c-pointer" v-if="item.is_open" v-on:click.prevent="closeItem(item)">Close</a>
+                    <a class="mr-2 c-pointer" v-if="!item.is_open" v-on:click.prevent="openItem(item)">Open</a>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    <div class="stag-popup stag-popup-sm mcp-theme-1" stag-popup-key="lab-popup">
+        <form method="POST" action="/api/appointment/create">
+            <h3 class="stag-popup-title mb-2">
+                <span>@{{ popupMode === 'add' ? 'Add Lab Order Item' : 'Edit Lab Order Item' }}</span>
+                <a href="#" class="ml-auto text-secondary"
+                   onclick="return closeStagPopup()"><i class="fa fa-times-circle"></i></a>
+            </h3>
+            <div class="mb-2">
+                    <label class="text-sm text-secondary mb-1">Tests</label>
+                    <input type="text" v-model="popupItem.tests" class="form-control form-control-sm">
+            </div>
+            <div class="mb-2">
+                <label class="text-sm text-secondary mb-1">ICDs</label>
+                <input type="text" v-model="popupItem.icds" class="form-control form-control-sm">
+            </div>
+            <div class="mb-2">
+                <label class="text-sm text-secondary mb-1">Memo</label>
+                <input type="text" v-model="popupItem.memo" class="form-control form-control-sm">
+            </div>
+            <div class="d-flex align-items-center justify-content-center mt-3">
+                <button type="button" class="btn btn-sm btn-primary mr-2" v-on:click.prevent="savePopupItem()">Submit</button>
+                <button type="button" class="btn btn-sm btn-default border" onclick="return closeStagPopup()">Cancel</button>
+            </div>
+        </form>
+    </div>
+</div>
+<script>
+    (function() {
+        <?php
+        $tickets = $patient->tickets->filter(function($_item) {
+            return $_item->category === 'lab';
+        });
+        $items = [];
+        foreach ($tickets as $ticket) {
+            $item = json_decode($ticket->data);
+            $item->uid = $ticket->uid;
+            $item->is_open = $ticket->is_open;
+            $items[] = $item;
+        }
+        ?>
+        function init() {
+            let items = [];
+            let labApp = new Vue({
+                el: '#labApp',
+                delimiters: ['@{{', '}}'],
+                data: {
+                    popupMode: 'add',
+                    items: {!! json_encode($items) !!},
+                    popupItem: {
+                        uid: '',
+                        is_open: true,
+                        tests: '',
+                        icds: '',
+                        memo: '',
+                    },
+                },
+                methods: {
+                    showPopup: function(_name, _item) {
+                        closeStagPopup();
+                        this.popupMode = _item ? 'edit' : 'add';
+                        this.popupItem = _item ? _item : {
+                            uid: '',
+                            is_open: true,
+                            tests: '',
+                            icds: '',
+                            memo: '',
+                        };
+                        showStagPopup('lab-popup');
+                    },
+                    savePopupItem: function() {
+                        let form = $('#labApp form').first();
+                        if(!form[0].checkValidity()) {
+                            form[0].reportValidity();
+                            return false;
+                        }
+
+                        showMask();
+                        let payload = {};
+                        if(this.popupMode === 'add') {
+                            payload.clientUid = '{{ $patient->uid }}';
+                            payload.category = 'lab';
+                            payload.assignedProUid = '{{ $pro->uid  }}';
+                            payload.managerProUid = '{{ $pro->uid  }}';
+                            payload.orderingProUid = '{{ $pro->uid  }}';
+                            payload.initiatingProUid = '{{ $pro->uid  }}';
+                            payload.data = JSON.stringify(this.popupItem);
+                        }
+                        else {
+                            payload.uid = this.popupItem.uid;
+                            payload.newData = JSON.stringify(this.popupItem);
+                        }
+
+                        $.post(
+                            '/api/ticket/' + (this.popupMode === 'add' ? 'create' : 'updateData'),
+                            payload,
+                            function(_data) {
+                                console.log(_data);
+                                fastReload();
+                            },
+                            'json');
+
+                        return false;
+                    },
+                    closeItem: function(_item) {
+                        showMask();
+                        $.post('/api/ticket/close', {
+                            uid: _item.uid
+                        }, function(_data) {
+                            fastReload();
+                        });
+                    },
+                    openItem: function(_item) {
+                        showMask();
+                        $.post('/api/ticket/open', {
+                            uid: _item.uid
+                        }, function(_data) {
+                            fastReload();
+                        });
+                    }
+                },
+                mounted: function () {
+
+                }
+            })
+        }
+        addMCInitializer('lab', init, '#labApp');
+    })();
+</script>