ERx ticket single page

app/Http/Controllers/PatientController.php

@@ -14,6 +14,7 @@ use App\Models\NoteTemplate;
 use App\Models\Pro;
 use App\Models\Program;
 use App\Models\SectionTemplate;
+use App\Models\Ticket;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\File;
 
@@ -78,27 +79,27 @@ class PatientController extends Controller
         return view('app.patient.action-items-other', compact('patient', 'facilities', 'filter', 'allPros'));
     }
 
-    public function actionItemsErxSingle(Request $request, Client $patient, $ticket) {
+    public function actionItemsErxSingle(Request $request, Client $patient, Ticket $ticket) {
         $allPros = Pro::all();
         $facilities = Facility::where('is_active', true)->get();
         return view('app.patient.action-items-erx-single', compact('patient', 'facilities', 'allPros', 'ticket'));
     }
-    public function actionItemsLabSingle(Request $request, Client $patient, $ticket) {
+    public function actionItemsLabSingle(Request $request, Client $patient, Ticket $ticket) {
         $allPros = Pro::all();
         $facilities = Facility::where('is_active', true)->get();
         return view('app.patient.action-items-lab-single', compact('patient', 'facilities', 'allPros', 'ticket'));
     }
-    public function actionItemsImagingSingle(Request $request, Client $patient, $ticket) {
+    public function actionItemsImagingSingle(Request $request, Client $patient, Ticket $ticket) {
         $allPros = Pro::all();
         $facilities = Facility::where('is_active', true)->get();
         return view('app.patient.action-items-imaging-single', compact('patient', 'facilities', 'allPros', 'ticket'));
     }
-    public function actionItemsEquipmentSingle(Request $request, Client $patient, $ticket) {
+    public function actionItemsEquipmentSingle(Request $request, Client $patient, Ticket $ticket) {
         $allPros = Pro::all();
         $facilities = Facility::where('is_active', true)->get();
         return view('app.patient.action-items-equipment-single', compact('patient', 'facilities', 'allPros', 'ticket'));
     }
-    public function actionItemsOtherSingle(Request $request, Client $patient, $ticket) {
+    public function actionItemsOtherSingle(Request $request, Client $patient, Ticket $ticket) {
         $allPros = Pro::all();
         $facilities = Facility::where('is_active', true)->get();
         return view('app.patient.action-items-other-single', compact('patient', 'facilities', 'allPros', 'ticket'));

public/css/style.css

@@ -169,7 +169,11 @@ body.stag_rhs_collapsed .app-right-panel {
 .mcp-theme-1 .nav-link:hover {
     background: #e3e3e394;
 }
+.mcp-theme-1 .nav-link {
+    border-top: 1px solid transparent;
+}
 .mcp-theme-1 .nav-link.active {
+    border-top: 1px solid #f8f9fa;
     background: #e2e2e2;
 }
 .mcp-theme-1 .text-sm {

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

@@ -6,7 +6,383 @@
 
     <div class="mb-3">
 
-    TODO
+        <div id="erxSingleApp" v-cloak>
+            <div class="d-flex align-items-center pb-2">
+                <h4 class="font-weight-bold m-0 font-size-14"><i class="fa fa-prescription mr-2"></i>ERx Ticket
+                    <span v-if="!item.is_open" class="text-secondary font-weight-bold opacity-60">(Closed)</span>
+                </h4>
+                <span class="mx-3 text-secondary">|</span>
+                <a class="c-pointer" v-if="item.is_open" v-on:click.prevent="closeItem(item)">Close</a>
+                <a class="c-pointer" v-if="!item.is_open" v-on:click.prevent="openItem(item)">Re-open</a>
+                <span class="mx-3 text-secondary">|</span>
+                <a class="py-0 font-weight-normal c-pointer" v-on:click.prevent="showPopup('erx-popup', item)">Edit</a>
+            </div>
+
+            <div class="row mt-2 mb-3">
+                <div class="col-6 pr-0">
+                    <div class="card bg-light">
+                        <div class="card-body">
+                            <div class="d-flex align-items-start flex-nowrap mb-2">
+                                <span class="width-100px text-secondary text-sm">Medication</span>
+                                <span class="font-weight-bold">@{{ item.medication ? item.medication : '-' }}</span>
+                            </div>
+                            <div class="d-flex align-items-start flex-nowrap mb-2">
+                                <span class="width-100px text-secondary text-sm">Strength</span>
+                                <span class="font-weight-bold">@{{ item.strength ? item.strength : '-' }}</span>
+                            </div>
+                            <div class="d-flex align-items-start flex-nowrap mb-2">
+                                <span class="width-100px text-secondary text-sm">Amount</span>
+                                <span class="font-weight-bold">@{{ item.amount ? item.amount : '-' }}</span>
+                            </div>
+                            <div class="d-flex align-items-start flex-nowrap mb-2">
+                                <span class="width-100px text-secondary text-sm">Route</span>
+                                <span class="font-weight-bold">@{{ item.route ? item.route : '-' }}</span>
+                            </div>
+                            <div class="d-flex align-items-start flex-nowrap mb-2">
+                                <span class="width-100px text-secondary text-sm">Frequency</span>
+                                <span class="font-weight-bold">@{{ item.frequency ? item.frequency : '-' }}</span>
+                            </div>
+                            <div class="d-flex align-items-start flex-nowrap mb-2">
+                                <span class="width-100px text-secondary text-sm">Dispense</span>
+                                <span class="font-weight-bold">@{{ item.dispense ? item.dispense : '-' }}</span>
+                            </div>
+                            <div class="d-flex align-items-start flex-nowrap mb-2">
+                                <span class="width-100px text-secondary text-sm">Refills</span>
+                                <span class="font-weight-bold">@{{ item.refills ? item.refills : '-' }}</span>
+                            </div>
+                            <div class="d-flex align-items-start flex-nowrap">
+                                <span class="width-100px text-secondary text-sm">Purpose</span>
+                                <span class="font-weight-bold">@{{ item.purpose ? item.purpose : '-' }}</span>
+                            </div>
+                            <hr class="m-neg-4">
+                            <div class="d-flex align-items-start flex-nowrap">
+                                <span class="width-100px text-secondary text-sm">Pref. Pharmacy</span>
+                                <span class="" v-html="pharmacy()"></span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-6">
+                    @include('app.patient.partials.ticket_vue_collab_card')
+                </div>
+            </div>
+
+            <div class="row my-2">
+                <div class="col-12">
+                    <div class="p-0">
+                        @include('app.patient.partials.ticket_action_links')
+                    </div>
+                </div>
+            </div>
+
+            <div class="stag-popup stag-popup-sm mcp-theme-1" stag-popup-key="erx-popup">
+                <form method="POST" action="">
+                    <h3 class="stag-popup-title mb-2">
+                        <span>@{{ popupMode === 'add' ? 'Add ERx Item' : 'Edit ERx Item' }}</span>
+                        <a href="#" class="ml-auto text-secondary"
+                           onclick="return closeStagPopup()"><i class="fa fa-times-circle"></i></a>
+                    </h3>
+                    <div class="row mb-2">
+                        <div class="col-6">
+                            <label class="text-sm text-secondary mb-1">Medication</label>
+                            <input required type="text" data-field="medication"
+                                   v-model="popupItem.medication" class="form-control form-control-sm">
+                        </div>
+                        <div class="col-6">
+                            <label class="text-sm text-secondary mb-1">Strength</label>
+                            <input type="text" data-field="strength"
+                                   v-model="popupItem.strength" class="form-control form-control-sm">
+                        </div>
+                    </div>
+                    <div class="row mb-2">
+                        <div class="col-6">
+                            <label class="text-sm text-secondary mb-1">Amount</label>
+                            <input type="text" v-model="popupItem.amount" class="form-control form-control-sm">
+                        </div>
+                        <div class="col-6">
+                            <label class="text-sm text-secondary mb-1">Route</label>
+                            <input required type="text" v-model="popupItem.route" class="form-control form-control-sm"
+                                   data-option-list="route-options">
+                            <div id="route-options" class="data-option-list">
+                                <div>PO (by mouth)</div>
+                                <div>PR (per rectum)</div>
+                                <div>IM (intramuscular)</div>
+                                <div>IV (intravenous)</div>
+                                <div>ID (intradermal)</div>
+                                <div>IN (intranasal)</div>
+                                <div>TP (topical)</div>
+                                <div>SL (sublingual)</div>
+                                <div>BUCC (buccal)</div>
+                                <div>IP (intraperitoneal)</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row mb-2">
+                        <div class="col-6">
+                            <label class="text-sm text-secondary mb-1">Frequency</label>
+                            <input type="text" v-model="popupItem.frequency" class="form-control form-control-sm"
+                                   data-option-list="frequency-options">
+                            <div id="frequency-options" class="data-option-list">
+                                <div>Once a day</div>
+                                <div>Twice a day</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row mb-2">
+                        <div class="col-6">
+                            <label class="text-sm text-secondary mb-1">Dispense</label>
+                            <input required type="number" v-model="popupItem.dispense" class="form-control form-control-sm">
+                        </div>
+                        <div class="col-6">
+                            <label class="text-sm text-secondary mb-1">Refills</label>
+                            <input type="number" v-model="popupItem.refills" class="form-control form-control-sm">
+                        </div>
+                    </div>
+                    <div class="row mb-2">
+                        <div class="col-12">
+                            <label class="text-sm text-secondary mb-1">Purpose</label>
+                            <input required type="text" v-model="popupItem.purpose" class="form-control form-control-sm">
+                        </div>
+                    </div>
+                    <hr class="mt-3 mb-2">
+
+                    <div class="row mb-2">
+                        <div class="col-12">
+                            <label class="text-sm text-secondary mb-1 font-weight-bold">Preferred Pharmacy</label>
+                        </div>
+                    </div>
+                    <div class="row mb-2">
+                        <div class="col-8">
+                            <label class="text-sm text-secondary mb-1">Business Name</label>
+                            <input type="text" v-model="popupItem.pharmacyName" class="form-control form-control-sm">
+                        </div>
+                    </div>
+                    <div class="row mb-2">
+                        <div class="col-6">
+                            <label class="text-sm text-secondary mb-1">City</label>
+                            <input type="text" v-model="popupItem.pharmacyCity" class="form-control form-control-sm">
+                        </div>
+                        <div class="col-6">
+                            <label class="text-sm text-secondary mb-1">State</label>
+                            <input type="text" v-model="popupItem.pharmacyState" class="form-control form-control-sm">
+                        </div>
+                    </div>
+                    <div class="row mb-2">
+                        <div class="col-12">
+                            <label class="text-sm text-secondary mb-1">Address Memo</label>
+                            <input type="text" v-model="popupItem.pharmacyAddressMemo" class="form-control form-control-sm">
+                        </div>
+                    </div>
+                    <div class="row mb-2">
+                        <div class="col-6">
+                            <label class="text-sm text-secondary mb-1">Phone</label>
+                            <input type="text" v-model="popupItem.pharmacyPhone" class="form-control form-control-sm">
+                        </div>
+                        <div class="col-6">
+                            <label class="text-sm text-secondary mb-1">Fax</label>
+                            <input type="text" v-model="popupItem.pharmacyFax" class="form-control form-control-sm">
+                        </div>
+                    </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>
+            @include('app.patient.partials.ticket_update_pro_form',['ticketType'=>'erx'])
+        </div>
+        <script>
+            (function() {
+                <?php
+                $item = json_decode($ticket->data);
+                $item->uid = $ticket->uid;
+                $item->is_open = $ticket->is_open;
+                $item->assigned_pro_id = $ticket->assigned_pro_id;
+                $item->manager_pro_id = $ticket->manager_pro_id;
+                $item->ordering_pro_id = $ticket->ordering_pro_id;
+                $item->initiating_pro_id = $ticket->initiating_pro_id;
+                $item->has_assigned_pro_signed = $ticket->has_assigned_pro_signed;
+                $item->has_manager_pro_signed = $ticket->has_manager_pro_signed;
+                $item->has_ordering_pro_signed = $ticket->has_ordering_pro_signed;
+                $item->has_initiating_pro_signed = $ticket->has_initiating_pro_signed;
+                $item->is_entry_error = $ticket->is_entry_error;
+                $item->created_at = friendly_date_time($ticket->created_at);
+                $items[] = $item;
+                ?>
+                function init() {
+                    let items = [];
+                    let erxSingleApp = new Vue({
+                        el: '#erxSingleApp',
+                        delimiters: ['@{{', '}}'],
+                        data: {
+                            popupMode: 'add',
+                            item: {!! json_encode($item) !!},
+                            popupItem: {
+                                uid: '',
+                                is_open: true,
+                                medication: '',
+                                strength: '',
+                                amount: '',
+                                route: '',
+                                frequency: '',
+                                dispense: '',
+                                refills: '',
+                                purpose: '',
+                                pharmacyName: '',
+                                pharmacyCity: '',
+                                pharmacyState: '',
+                                pharmacyAddressMemo: '',
+                                pharmacyPhone: '',
+                                pharmacyFax: '',
+                            },
+                            @include('app.patient.partials.ticket_vue_data')
+                        },
+                        methods: {
+                            showPopup: function(_name, _item) {
+                                closeStagPopup();
+                                this.popupMode = _item ? 'edit' : 'add';
+                                this.popupItem = _item ? JSON.parse(JSON.stringify(_item)) : {
+                                    uid: '',
+                                    is_open: true,
+                                    medication: '',
+                                    strength: '',
+                                    amount: '',
+                                    route: '',
+                                    frequency: '',
+                                    dispense: '',
+                                    refills: '',
+                                    purpose: '',
+                                    pharmacy: '',
+                                    pharmacyName: '',
+                                    pharmacyCity: '',
+                                    pharmacyState: '',
+                                    pharmacyAddressMemo: '',
+                                    pharmacyPhone: '',
+                                    pharmacyFax: '',
+                                };
+                                showStagPopup('erx-popup');
+                            },
+                            savePopupItem: function() {
+                                let form = $('#erxSingleApp form').first();
+                                if(!form[0].checkValidity()) {
+                                    form[0].reportValidity();
+                                    return false;
+                                }
+
+                                showMask();
+                                let payload = {};
+                                if(this.popupMode === 'add') {
+                                    payload.clientUid = '{{ $patient->uid }}';
+                                    payload.category = 'erx';
+                                    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();
+                                });
+                            },
+                            initRxAutoSuggest: function() {
+                                let self = this;
+                                $('#erxSingleApp input[type="text"][data-field="medication"]:not([ac-initialized])').each(function() {
+                                    let elem = this,
+                                        randPart = Math.ceil(Math.random() * 1000000),
+                                        dynID = 'rx-' + randPart;
+                                    $(elem).attr('id', dynID);
+                                    var strengthElem = $(elem).closest('.stag-popup').find('[data-field="strength"]')[0],
+                                        dynStrengthsID = 'rx-' + randPart + '-strengths';
+                                    $(strengthElem).attr('id', dynStrengthsID);
+                                    $(strengthElem).attr('rx-id', dynID);
+                                    new window.Def.Autocompleter.Prefetch(dynStrengthsID, []);
+                                    new window.Def.Autocompleter.Search(dynID,
+                                        'https://clinicaltables.nlm.nih.gov/api/rxterms/v3/search?ef=STRENGTHS_AND_FORMS');
+                                    window.Def.Autocompleter.Event.observeListSelections(dynID, function() {
+                                        var autocomp = elem.autocomp, acData = autocomp.getSelectedItemData();
+                                        var strengths = acData[0].data['STRENGTHS_AND_FORMS'];
+                                        if (strengths) {
+                                            strengthElem.autocomp.setListAndField(strengths, '');
+                                        }
+                                        self.popupItem.medication = $(elem).val();
+                                    });
+                                    window.Def.Autocompleter.Event.observeListSelections(dynStrengthsID, function() {
+                                        var autocomp = elem.autocomp, acData = autocomp.getSelectedItemData();
+                                        self.popupItem.strength = $(strengthElem).val();
+                                    });
+                                    $(elem).attr('ac-initialized', 1);
+                                    $(strengthElem).attr('ac-initialized', 1);
+                                });
+                            },
+                            inWords: function (num) {
+                                try {
+                                    num = +num;
+                                    var a = ['','one ','two ','three ','four ', 'five ','six ','seven ','eight ','nine ','ten ','eleven ','twelve ','thirteen ','fourteen ','fifteen ','sixteen ','seventeen ','eighteen ','nineteen '];
+                                    var b = ['', '', 'twenty','thirty','forty','fifty', 'sixty','seventy','eighty','ninety'];
+                                    if ((num = num.toString()).length > 3) return 'overflow';
+                                    let n = ('000000000' + num).substr(-9).match(/^(\d{2})(\d{2})(\d{2})(\d{1})(\d{2})$/);
+                                    if (!n) return; var str = '';
+                                    str += (n[1] != 0) ? (a[Number(n[1])] || b[n[1][0]] + ' ' + a[n[1][1]]) + 'crore ' : '';
+                                    str += (n[2] != 0) ? (a[Number(n[2])] || b[n[2][0]] + ' ' + a[n[2][1]]) + 'lakh ' : '';
+                                    str += (n[3] != 0) ? (a[Number(n[3])] || b[n[3][0]] + ' ' + a[n[3][1]]) + 'thousand ' : '';
+                                    str += (n[4] != 0) ? (a[Number(n[4])] || b[n[4][0]] + ' ' + a[n[4][1]]) + 'hundred ' : '';
+                                    str += (n[5] != 0) ? ((str != '') ? 'and ' : '') + (a[Number(n[5])] || b[n[5][0]] + ' ' + a[n[5][1]]) : '';
+                                    return str ? '(' + $.trim(str) + ')' : '';
+                                }
+                                catch (e) {
+                                    return '';
+                                }
+                            },
+                            pharmacy: function() {
+                                return [
+                                    this.item.pharmacyName,
+                                    this.item.pharmacyCity,
+                                    this.item.pharmacyState,
+                                    this.item.pharmacyAddressMemo,
+                                    this.item.pharmacyPhone,
+                                    this.item.pharmacyFax,
+                                ].filter(Boolean).join('<br>');
+                            },
+                            @include('app.patient.partials.ticket_vue_methods',['ticketType'=>'erx'])
+                        },
+                        mounted: function () {
+                            this.initRxAutoSuggest();
+                            initFastLoad($('#erxSingleApp'));
+                        }
+                    })
+                }
+                addMCInitializer('erx', init, '#erxSingleApp');
+            })();
+        </script>
 
     </div>
 

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

@@ -24,7 +24,8 @@
                 <td class="px-2">@{{ index + 1 }}</td>
                 <td class="px-2">
                     <div class="d-flex align-items-center flex-wrap">
-                        <a :href="'/patients/view/{{$patient->uid}}/action-items-erx/view/' + item.uid" class="font-weight-bold font-size-13">@{{item.medication}}</a>
+                        <a :href="'/patients/view/{{$patient->uid}}/action-items-erx/view/' + item.uid"
+                           class="font-weight-bold font-size-13">@{{item.medication}}</a>
                         <span class="d-inline-flex align-items-center" v-if="item.strength">
                             <span class="mx-2 text-secondary">•</span>
                             <span>@{{item.strength}}</span>

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

@@ -1,13 +1,3 @@
-<a class="mr-2 c-pointer" v-if="!item.is_entry_error" v-on:click.prevent="setIsEntryErrorToTrue(item)">Mark As Entry Error</a>
-<a class="mr-2 c-pointer" v-if="item.is_entry_error" v-on:click.prevent="setIsEntryErrorToFalse(item)">Undo Mark As Entry Error</a>
-<a class="mr-2 c-pointer" v-if="!item.has_assigned_pro_signed" v-on:click.prevent="signAsAssignedPro(item)">Sign As Assigned Pro</a>
-<a class="mr-2 c-pointer" v-if="item.has_assigned_pro_signed" v-on:click.prevent="undoSignAsAssignedPro(item)">Undo Sign As Assigned Pro</a>
-<a class="mr-2 c-pointer" v-if="!item.has_manager_pro_signed" v-on:click.prevent="signAsManagerPro(item)">Sign As Manager Pro</a>
-<a class="mr-2 c-pointer" v-if="item.has_manager_pro_signed" v-on:click.prevent="undoSignAsManagerPro(item)">Undo Sign As Manager Pro</a>
-<a class="mr-2 c-pointer" v-if="!item.has_ordering_pro_signed" v-on:click.prevent="signAsOrderingPro(item)">Sign As Ordering Pro</a>
-<a class="mr-2 c-pointer" v-if="item.has_ordering_pro_signed" v-on:click.prevent="undoSignAsOrderingPro(item)">Undo Sign As Ordering Pro</a>
-<a class="mr-2 c-pointer" v-if="!item.has_initiating_pro_signed" v-on:click.prevent="signAsInitiatingPro(item)">Sign As Initiating Pro</a>
-<a class="mr-2 c-pointer" v-if="item.has_initiating_pro_signed" v-on:click.prevent="undoSignAsInitiatingPro(item)">Undo Sign As Initiating Pro</a>
-<template v-for="proType in proTypes">
-    <a class="mr-2 c-pointer" v-on:click.prevent="showProUpdatePopup('other-popup', proType, item)">Update @{{proType}} Pro</a>
-</template>
+<a class="btn btn-sm btn-primary text-white font-weight-bold mr-2 c-pointer" v-if="!item.is_entry_error" v-on:click.prevent="setIsEntryErrorToTrue(item)">Mark As Entry Error</a>
+<a class="btn btn-sm btn-primary text-white font-weight-bold mr-2 c-pointer" v-if="item.is_entry_error" v-on:click.prevent="setIsEntryErrorToFalse(item)">Undo Mark As Entry Error</a>
+

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

@@ -0,0 +1,84 @@
+<div class="card bg-light">
+    <div class="card-body">
+        <span class="d-flex align-items-center mb-2" v-if="item.assigned_pro_id">
+            <span class="text-secondary text-sm width-50px">Assigned:</span>
+            <b>@{{proNameFromId(item.assigned_pro_id)}}</b>
+            <span class="d-inline-flex" v-if="item.manager_pro_id === {{$pro->id}}">
+                <span class="mx-2 opacity-60 text-secondary">•</span>
+                <a class="on-hover-opaque c-pointer" v-on:click.prevent="showProUpdatePopup('other-popup', 'Assigned', item)">
+                    <i class="fa fa-edit"></i>
+                </a>
+            </span>
+            <span class="d-inline-flex" v-if="item.assigned_pro_id === {{$pro->id}}">
+                <span class="mx-2 opacity-60 text-secondary">•</span>
+                <span v-if="item.has_assigned_pro_signed" class="text-success">
+                    <i class="fa fa-check"></i>
+                    Signed
+                    <a class="ml-2 c-pointer" v-on:click.prevent="undoSignAsAssignedPro(item)">Undo</a>
+                </span>
+                <a v-if="!item.has_assigned_pro_signed" class="c-pointer"
+                   v-on:click.prevent="signAsAssignedPro(item)">Sign</a>
+            </span>
+        </span>
+        <span class="d-flex align-items-center mb-2" v-if="item.manager_pro_id">
+            <span class="text-secondary text-sm width-50px">Manager:</span>
+            <b>@{{proNameFromId(item.manager_pro_id)}}</b>
+            <span class="d-inline-flex" v-if="item.manager_pro_id === {{$pro->id}}">
+                <span class="mx-2 opacity-60 text-secondary">•</span>
+                <a class="on-hover-opaque c-pointer" v-on:click.prevent="showProUpdatePopup('other-popup', 'Manager', item)">
+                    <i class="fa fa-edit"></i>
+                </a>
+            </span>
+            <span class="d-inline-flex" v-if="item.manager_pro_id === {{$pro->id}}">
+                <span class="mx-2 opacity-60 text-secondary">•</span>
+                <span v-if="item.has_manager_pro_signed" class="text-success">
+                    <i class="fa fa-check"></i>
+                    Signed
+                    <a class="ml-2 c-pointer" v-on:click.prevent="undoSignAsManagerPro(item)">Undo</a>
+                </span>
+                <a v-if="!item.has_manager_pro_signed" class="c-pointer"
+                   v-on:click.prevent="signAsManagerPro(item)">Sign</a>
+            </span>
+        </span>
+        <span class="d-flex align-items-center mb-2" v-if="item.initiating_pro_id">
+            <span class="text-secondary text-sm width-50px">Initiating:</span>
+            <b>@{{proNameFromId(item.initiating_pro_id)}}</b>
+            <span class="d-inline-flex" v-if="item.manager_pro_id === {{$pro->id}}">
+                <span class="mx-2 opacity-60 text-secondary">•</span>
+                <a class="on-hover-opaque c-pointer" v-on:click.prevent="showProUpdatePopup('other-popup', 'Initiating', item)">
+                    <i class="fa fa-edit"></i>
+                </a>
+            </span>
+            <span class="d-inline-flex" v-if="item.initiating_pro_id === {{$pro->id}}">
+                <span class="mx-2 opacity-60 text-secondary">•</span>
+                <span v-if="item.has_initiating_pro_signed" class="text-success">
+                    <i class="fa fa-check"></i>
+                    Signed
+                    <a class="ml-2 c-pointer" v-on:click.prevent="undoSignAsInitiatingPro(item)">Undo</a>
+                </span>
+                <a v-if="!item.has_initiating_pro_signed" class="c-pointer"
+                   v-on:click.prevent="signAsInitiatingPro(item)">Sign</a>
+            </span>
+        </span>
+        <span class="d-flex align-items-center" v-if="item.ordering_pro_id">
+            <span class="text-secondary text-sm width-50px">Ordering:</span>
+            <b>@{{proNameFromId(item.ordering_pro_id)}}</b>
+            <span class="d-inline-flex" v-if="item.manager_pro_id === {{$pro->id}}">
+                <span class="mx-2 opacity-60 text-secondary">•</span>
+                <a class="on-hover-opaque c-pointer" v-on:click.prevent="showProUpdatePopup('other-popup', 'Ordering', item)">
+                    <i class="fa fa-edit"></i>
+                </a>
+            </span>
+            <span class="d-inline-flex" v-if="item.ordering_pro_id === {{$pro->id}}">
+                <span class="mx-2 opacity-60 text-secondary">•</span>
+                <span v-if="item.has_ordering_pro_signed" class="text-success">
+                    <i class="fa fa-check"></i>
+                    Signed
+                    <a class="ml-2 c-pointer" v-on:click.prevent="undoSignAsOrderingPro(item)">Undo</a>
+                </span>
+                <a v-if="!item.has_ordering_pro_signed" class="c-pointer"
+                   v-on:click.prevent="signAsOrderingPro(item)">Sign</a>
+            </span>
+        </span>
+    </div>
+</div>