ERx UI polish

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

@@ -23,107 +23,83 @@
         @endif
     </div>
     <div class="d-flex align-items-start bg-white">
-        <table class="table table-striped table-sm table-bordered mb-0 flex-grow-1">
-            <thead class="bg-light">
-            <tr>
-                <th class="border-0 text-secondary">Created</th>
-                @if(!request()->input('erx_category'))
-                    <th class="border-0 text-secondary">Type</th>
-                @endif
-                <th class="border-0 text-secondary w-50">Clinical</th>
-                <th class="border-0 text-secondary">Prescriber</th>
-                <th class="border-0 text-secondary" v-if="!currentPrescription">Sign</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr v-for="(prescription, index) in prescriptions" :class="currentPrescription && currentPrescription.id === prescription.id ? 'bg-aliceblue' : ''">
-                <td>
-                    <a href="#" v-on:click.prevent="currentPrescription=prescription"
-                       class="text-nowrap"
-                       :class="currentPrescription && currentPrescription.id === prescription.id ? 'font-weight-bold' : ''">
-                        @{{prescription.created_at_friendly_short}}
-                    </a>
-                    @if(@$note)
-                        <div v-if="prescription.note_id === {{$note->id}}" class="text-info mt-1 text-nowrap">* Created on this note</div>
-                    @endif
-                    <div v-if="prescription.pro_declared_status === 'CANCELLED'" class="text-secondary font-weight-bold mt-1 text-sm d-flex align-items-baseline">
-                        <i class="fa fa-ban mr-1 text-sm"></i>
-                        CANCELLED
-                    </div>
-                </td>
-                @if(!request()->input('erx_category'))
-                <td>@{{prescription.erx_category}}</td>
-                @endif
-                <td>
-                    <div class="d-flex align-items-baseline">
-                        {{--
-                        <a v-if="!prescription.has_hcp_pro_signed" class="mr-2" href="#" v-on:click.prevent="editClinicalDetails(prescription)"><i class="fa fa-edit on-hover-opaque"></i></a>
-                        <span v-else class="mr-2" title="Cannot edit. Prescription already signed."><i class="fa fa-edit on-hover-opaque text-secondary"></i></span>
-                        --}}
-                        <div v-if="prescription.clinical_detail_json" class="d-inline-flex align-items-baseline">
-                            <div class="" v-if="prescription.erx_category === 'DRUG'">
-                                <div class="d-flex align-items-baseline mb-1" v-for="drug in prescription.clinical_detail_json.items">
-                                    <b class="mr-2">@{{drug.medication ?? '-'}}</b>
+        <div :class="currentPrescription ? '' : 'flex-grow-1'">
+            <table class="table table-striped table-sm table-bordered mb-0">
+                <thead class="bg-light">
+                <tr>
+                    <th class="border-0 text-secondary width-150px">Created</th>
+                    <th class="border-0 text-secondary" :class="currentPrescription ? 'width-200px' : ''">Clinical</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr v-for="(prescription, index) in prescriptions" :class="currentPrescription && currentPrescription.id === prescription.id ? 'bg-aliceblue' : ''">
+                    <td class="width-150px">
+                        <a href="#" v-on:click.prevent="currentPrescription=prescription"
+                           class="text-nowrap"
+                           :class="currentPrescription && currentPrescription.id === prescription.id ? 'font-weight-bold' : ''">
+                            @{{prescription.created_at_friendly_short}}
+                        </a>
+                        <div class="mt-1">
+                            <b class="text-sm">@{{prescription.erx_category}}</b>
+                            /
+                            <span class="text-sm">@{{prescription.hcpProDisplayName}}</span>
+                        </div>
+                        @if(@$note)
+                            <div v-if="prescription.note_id === {{$note->id}}" class="text-sm text-info mt-1 text-nowrap">* From this note</div>
+                        @endif
+                        <div v-if="prescription.pro_declared_status === 'CANCELLED'" class="text-sm text-secondary font-weight-bold mt-1 text-sm d-flex align-items-baseline">
+                            <i class="fa fa-ban mr-1 text-sm"></i>
+                            CANCELLED
+                        </div>
+                    </td>
+                    <td>
+                        <div class="d-flex align-items-baseline">
+                            {{--
+                            <a v-if="!prescription.has_hcp_pro_signed" class="mr-2" href="#" v-on:click.prevent="editClinicalDetails(prescription)"><i class="fa fa-edit on-hover-opaque"></i></a>
+                            <span v-else class="mr-2" title="Cannot edit. Prescription already signed."><i class="fa fa-edit on-hover-opaque text-secondary"></i></span>
+                            --}}
+                            <div v-if="prescription.clinical_detail_json" class="d-inline-flex align-items-baseline">
+                                <div class="" v-if="prescription.erx_category === 'DRUG'">
+                                    <div class="d-flex align-items-baseline mb-1" v-for="drug in prescription.clinical_detail_json.items">
+                                        <span class="mr-2">@{{drug.medication ?? '-'}}</span>
+                                    </div>
                                 </div>
-                            </div>
-                            <div v-if="prescription.erx_category === 'LAB' || prescription.erx_category === 'IMAGING'">
-                                <div class="px-2 py-1 mb-1 border bg-light"  v-for="item in prescription.clinical_detail_json.items">
-                                    <div class="d-flex align-items-baseline mb-1">
-                                        <span class="text-secondary mr-2">Tests:</span>
-                                        <span class="flex-grow-1">
+                                <div v-if="prescription.erx_category === 'LAB' || prescription.erx_category === 'IMAGING'">
+                                    <div class="px-2 py-1 mb-1 border bg-light"  v-for="item in prescription.clinical_detail_json.items">
+                                        <div class="d-flex align-items-baseline mb-1">
+                                            <span class="text-secondary mr-2">Tests:</span>
+                                            <span class="flex-grow-1">
                                             <b v-for="test in item.tests" class="mr-2">@{{ test.desc }}</b>
                                         </span>
-                                    </div>
-                                    <div class="d-flex align-items-baseline">
-                                        <span class="text-secondary mr-2">ICDs:</span>
-                                        <span class="flex-grow-1">
+                                        </div>
+                                        <div class="d-flex align-items-baseline">
+                                            <span class="text-secondary mr-2">ICDs:</span>
+                                            <span class="flex-grow-1">
                                             <b v-for="icd in item.icds" class="mr-2">@{{ icd.code }}</b>
                                         </span>
+                                        </div>
                                     </div>
                                 </div>
+                                <div class="d-flex align-items-baseline" v-if="prescription.erx_category === 'REFERRAL'">
+                                    <b class="mr-2">@{{prescription.clinical_detail_json.to ?? '-'}}</b>
+                                    <span class="text-secondary mr-1">@{{prescription.clinical_detail_json.memo ?? '-'}}</span>
+                                </div>
+                                <div class="d-flex align-items-baseline" v-if="prescription.erx_category === 'OTHER'">
+                                    <b class="mr-2">@{{prescription.clinical_detail_json.title ?? '-'}}</b>
+                                    <span class="text-secondary mr-1">@{{prescription.clinical_detail_json.memo ?? '-'}}</span>
+                                </div>
                             </div>
-                            <div class="d-flex align-items-baseline" v-if="prescription.erx_category === 'REFERRAL'">
-                                <b class="mr-2">@{{prescription.clinical_detail_json.to ?? '-'}}</b>
-                                <span class="text-secondary mr-1">@{{prescription.clinical_detail_json.memo ?? '-'}}</span>
-                            </div>
-                            <div class="d-flex align-items-baseline" v-if="prescription.erx_category === 'OTHER'">
-                                <b class="mr-2">@{{prescription.clinical_detail_json.title ?? '-'}}</b>
-                                <span class="text-secondary mr-1">@{{prescription.clinical_detail_json.memo ?? '-'}}</span>
-                            </div>
+                            <div v-else>-</div>
                         </div>
-                        <div v-else>-</div>
-                    </div>
-                </td>
-                <td>
-                    <div class="d-flex align-items-baseline">
-                        {{--
-                        <a v-if="!prescription.has_hcp_pro_signed" class="mr-2" href="#" v-on:click.prevent="editHcpPro(prescription)"><i class="fa fa-edit on-hover-opaque"></i></a>
-                        <span v-else class="mr-2" title="Cannot edit. Prescription already signed."><i class="fa fa-edit on-hover-opaque text-secondary"></i></span>
-                        --}}
-                        <div>@{{prescription.hcpProDisplayName}}</div>
-                    </div>
-                </td>
-                <td v-if="!currentPrescription">
-                    <div v-if="prescription.has_hcp_pro_signed" class="d-flex align-items-baseline">
-                        <i class="text-secondary fa fa-check mr-1"></i>
-                        <span class="text-secondary">Signed</span>
-                    </div>
-                    {{--
-                    <div v-else>
-                        <a v-if="prescription.hcp_pro_id === {{$pro->id}}"
-                           href="#"
-                           v-on:click.prevent="signAsHcpPro(prescription)">Sign</a>
-                        <span v-else>-</span>
-                    </div>
-                    --}}
-                </td>
-            </tr>
-            </tbody>
-        </table>
-        <div v-if="currentPrescription" class="ml-2 border align-self-stretch p-3 flex-grow-1">
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+        <div v-if="currentPrescription" class="ml-2 border align-self-stretch p-3 flex-grow-1 min-width-50">
             <div class="d-flex align-items-center">
                 <h3 class="font-size-16 m-0">
-                    <span class="mr-1 font-size-16">@{{ currentPrescription.erx_category }} / @{{ currentPrescription.created_at_friendly_short }}</span>
+                    <b class="mr-1 font-size-16">@{{ currentPrescription.erx_category }}: @{{ currentPrescription.created_at_friendly_short }}</b>
                 </h3>
                 <a class="ml-auto" href="#" v-on:click.prevent="currentPrescription=null">
                     <i class="fa fa-times-circle on-hover-opaque"></i>
@@ -131,11 +107,11 @@
             </div>
             <hr class="my-3">
             <div class="pb-2 d-flex align-items-start">
-                <span class="min-width-110px text-secondary text-sm">Created</span>
+                <span class="min-width-140px text-secondary text-sm">Created</span>
                 <div>
                     <span class="text-nowrap">@{{currentPrescription.created_at_friendly}}</span>
                     @if(@$note)
-                        <div v-if="currentPrescription.note_id === {{$note->id}}" class="text-info mt-1 font-weight-bold text-nowrap">* Created on this note</div>
+                        <div v-if="currentPrescription.note_id === {{$note->id}}" class="text-info mt-1 font-weight-bold text-nowrap">* From this note</div>
                     @endif
                 </div>
             </div>