Erx UI - Edit pro and client declared status

resources/views/app/patient/prescriptions/client-status-form.blade.php

@@ -0,0 +1,32 @@
+<div class="stag-popup stag-popup-sm mcp-theme-1 min-height-unset" stag-popup-key="client-status-popup">
+    <form method="POST" action="" class="overflow-visible">
+        <h3 class="stag-popup-title mb-2">
+            <span>Client Declared Status</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">Status</label>
+            <select class="form-control form-control-sm min-width-unset erx-hcp-pro-select"
+                    v-model="currentPrescriptionClientStatus.status">
+                <option value="">-- select --</option>
+                <option value="CREATED">Created</option>
+                <option value="SENT">Sent</option>
+                <option value="RECEIVED_BY_CLIENT">Received by client</option>
+                <option value="RECEIPT_CONFIRMED_BY_FACILITY">Receipt confirmed by facility</option>
+                <option value="CANCELLED">Cancelled</option>
+            </select>
+        </div>
+        <div class="mb-2">
+            <label class="text-sm text-secondary mb-1">Memo</label>
+            <input type="text" class="form-control form-control-sm min-width-unset"
+                   v-model="currentPrescriptionClientStatus.memo">
+        </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="saveClientStatus()">Submit
+            </button>
+            <button type="button" class="btn btn-sm btn-default border" onclick="return closeStagPopup()">Cancel
+            </button>
+        </div>
+    </form>
+</div>

resources/views/app/patient/prescriptions/index.blade.php

@@ -2,19 +2,19 @@
 
 @section('inner-content')
     <div id="prescriptions-{{$patient->id}}">
-        <div class="d-flex align-items-baseline pt-2">
+        <div class="d-flex align-items-baseline py-2">
             <h6 class="my-0 font-weight-bold text-secondary font-size-14">Prescriptions</h6>
-            <span class="mx-2 text-secondary">|</span>
+            <span class="mx-2 text-secondary on-hover-opaque">|</span>
             <a href="#" v-on:click.prevent="newPrescription('DRUG')">+ Drug</a>
-            <span class="mx-2 text-secondary">|</span>
+            <span class="mx-2 text-secondary on-hover-opaque">|</span>
             <a href="#" v-on:click.prevent="newPrescription('LAB')">+ Lab</a>
-            <span class="mx-2 text-secondary">|</span>
+            <span class="mx-2 text-secondary on-hover-opaque">|</span>
             <a href="#" v-on:click.prevent="newPrescription('IMAGING')">+ Imaging</a>
-            <span class="mx-2 text-secondary">|</span>
+            <span class="mx-2 text-secondary on-hover-opaque">|</span>
             <a href="#" v-on:click.prevent="newPrescription('REFERRAL')">+ Referral</a>
-            <span class="mx-2 text-secondary">|</span>
+            <span class="mx-2 text-secondary on-hover-opaque">|</span>
             <a href="#" v-on:click.prevent="newPrescription('SUPPLY')">+ Supply</a>
-            <span class="mx-2 text-secondary">|</span>
+            <span class="mx-2 text-secondary on-hover-opaque">|</span>
             <a href="#" v-on:click.prevent="newPrescription('OTHER')">+ Other</a>
         </div>
         <table class="table table-striped table-sm table-bordered mt-2 mb-0">
@@ -98,8 +98,23 @@
                         <span v-else>-</span>
                     </div>
                 </td>
-                <td class="px-2">@{{prescription.pro_declared_status}}</td>
-                <td class="px-2">@{{prescription.client_declared_status}}</td>
+                <td class="px-2">
+                    <div class="d-flex align-items-baseline">
+                        <a class="mr-2" href="#" v-on:click.prevent="editProStatus(prescription)"><i class="fa fa-edit on-hover-opaque"></i></a>
+                        <div v-if="prescription.pro_declared_status" class="d-flex align-items-baseline">
+                            @{{ sanitizeStatus(prescription.pro_declared_status) }}
+                        </div>
+                        <div v-else>-</div>
+                    </div>
+                <td class="px-2">
+                    <div class="d-flex align-items-baseline">
+                        <a class="mr-2" href="#" v-on:click.prevent="editClientStatus(prescription)"><i class="fa fa-edit on-hover-opaque"></i></a>
+                        <div v-if="prescription.client_declared_status" class="d-flex align-items-baseline">
+                            @{{ sanitizeStatus(prescription.client_declared_status) }}
+                        </div>
+                        <div v-else>-</div>
+                    </div>
+                </td>
                 <td class="px-2"></td>
             </tr>
             </tbody>
@@ -113,6 +128,8 @@
         @include('app.patient.prescriptions.logistics-form')
         @include('app.patient.prescriptions.hcp-pro-form')
         @include('app.patient.prescriptions.sign-as-hcp-form')
+        @include('app.patient.prescriptions.pro-status-form')
+        @include('app.patient.prescriptions.client-status-form')
     </div>
     <script>
         (function() {
@@ -432,7 +449,7 @@
                             }, 'json');
                         },
 
-                        // edit sign
+                        // sign
                         signAsHcpPro: function(_prescription) {
                             this.currentPrescriptionAction = 'SIGN_AS_HCP';
                             this.currentPrescriptionType = _prescription.erx_category;
@@ -456,21 +473,60 @@
                         },
 
                         // edit pro status
-                        editHcpProStatus: function(_prescription) {
-
+                        editProStatus: function(_prescription) {
+                            this.currentPrescriptionAction = 'EDIT_PRO_DECLARED_STATUS';
+                            this.currentPrescriptionType = _prescription.erx_category;
+                            this.currentPrescriptionProStatus = {
+                                uid: _prescription.uid,
+                                status: _prescription.pro_declared_status,
+                                memo: _prescription.pro_declared_status_memo,
+                            };
+                            Vue.nextTick(() => {
+                                showStagPopup('pro-status-popup', true);
+                            });
                         },
-                        saveHcpProStatus: function() {
-
+                        saveProStatus: function() {
+                            let payload = JSON.parse(JSON.stringify(this.currentPrescriptionProStatus));
+                            $.post('/api/erx/updateProDeclaredStatus', payload, _data => {
+                                if(!hasResponseError(_data)) {
+                                    toastr.success('Pro declared status updated');
+                                    closeStagPopup();
+                                    fastReload();
+                                }
+                            }, 'json');
                         },
 
-                        // edit sign
-                        editHcpClientStatus: function(_prescription) {
-
+                        // edit client status
+                        editClientStatus: function(_prescription) {
+                            this.currentPrescriptionAction = 'EDIT_CLIENT_DECLARED_STATUS';
+                            this.currentPrescriptionType = _prescription.erx_category;
+                            this.currentPrescriptionClientStatus = {
+                                uid: _prescription.uid,
+                                status: _prescription.client_declared_status,
+                                memo: _prescription.client_declared_status_memo,
+                            };
+                            Vue.nextTick(() => {
+                                showStagPopup('client-status-popup', true);
+                            });
                         },
-                        saveHcpClientStatus: function() {
-
+                        saveClientStatus: function() {
+                            let payload = JSON.parse(JSON.stringify(this.currentPrescriptionClientStatus));
+                            $.post('/api/erx/updateClientDeclaredStatus', payload, _data => {
+                                if(!hasResponseError(_data)) {
+                                    toastr.success('Client declared status updated');
+                                    closeStagPopup();
+                                    fastReload();
+                                }
+                            }, 'json');
                         },
 
+                        // sane display status
+                        sanitizeStatus: function(_s) {
+                            _s = _s.toLowerCase().replaceAll('_', ' ');
+                            _s = _s[0].toUpperCase() + _s.substr(1);
+                            return _s;
+                        }
+
                         // cancel, etc.
 
                     },

resources/views/app/patient/prescriptions/pro-status-form.blade.php

@@ -0,0 +1,32 @@
+<div class="stag-popup stag-popup-sm mcp-theme-1 min-height-unset" stag-popup-key="pro-status-popup">
+    <form method="POST" action="" class="overflow-visible">
+        <h3 class="stag-popup-title mb-2">
+            <span>Pro Declared Status</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">Status</label>
+            <select class="form-control form-control-sm min-width-unset erx-hcp-pro-select"
+                    v-model="currentPrescriptionProStatus.status">
+                <option value="">-- select --</option>
+                <option value="CREATED">Created</option>
+                <option value="SENT">Sent</option>
+                <option value="RECEIVED_BY_CLIENT">Received by client</option>
+                <option value="RECEIPT_CONFIRMED_BY_FACILITY">Receipt confirmed by facility</option>
+                <option value="CANCELLED">Cancelled</option>
+            </select>
+        </div>
+        <div class="mb-2">
+            <label class="text-sm text-secondary mb-1">Memo</label>
+            <input type="text" class="form-control form-control-sm min-width-unset"
+                   v-model="currentPrescriptionProStatus.memo">
+        </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="saveProStatus()">Submit
+            </button>
+            <button type="button" class="btn btn-sm btn-default border" onclick="return closeStagPopup()">Cancel
+            </button>
+        </div>
+    </form>
+</div>