Tickets v1 (wip) - Common templates for collab and comments

resources/views/app/patient/tickets/comments.blade.php

@@ -0,0 +1,32 @@
+<div v-if="<?=$category?>PopupMode === 'edit' && <?=$category?>PopupItem.data.comments && <?=$category?>PopupItem.data.comments.length" class="px-3 pt-3 pb-0 bg-light">
+    <div class="row mb-3">
+        <div class="col-12">
+            <label class="text-secondary mb-0 font-weight-normal font-size-16">Comments (<span v-html="<?=$category?>PopupItem.data.comments.length"></span>)</label>
+        </div>
+    </div>
+    <div v-for="(message) in <?=$category?>PopupItem.data.comments" class="d-flex align-items-start pb-3">
+        <div class="pro-initials text-uppercase mr-2"
+             :title="allProsFlat['pro_' + message.pro_id].displayedName"
+             :style="'background-color: ' + allProsFlat['pro_' + message.pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + message.pro_id].colors.fc + ';'"
+             v-html="allProsFlat['pro_' + message.pro_id].displayedInitials">
+        </div>
+        <div class="flex-grow-1">
+            <div class="">
+                @{{ allProsFlat['pro_' + message.pro_id].displayedName }}
+                <span class="text-secondary ml-3">@{{ message.created_at }}</span>
+            </div>
+            <div>@{{ message.message }}</div>
+        </div>
+    </div>
+</div>
+<div v-if="<?=$category?>PopupMode === 'edit'" class="comment-input-outer p-3 bg-light d-flex align-items-start border-top">
+    <div class="pro-initials text-uppercase mr-2"
+         :title="allProsFlat['pro_' + own_pro_id].displayedName"
+         :style="'background-color: ' + allProsFlat['pro_' + own_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + own_pro_id].colors.fc + ';'"
+         v-html="allProsFlat['pro_' + own_pro_id].displayedInitials">
+    </div>
+    <div class="flex-grow-1 position-relative">
+        <textarea class="form-control form-control-sm txt-comment shadow-none" v-model="comment"></textarea>
+        <a href="#" v-on:click.prevent="<?=$category?>SaveComment()" class="btn btn-sm btn-primary text-white btn-save-comment">Comment</a>
+    </div>
+</div>

resources/views/app/patient/tickets/common-fields.blade.php

@@ -0,0 +1,70 @@
+<div class="p-3 border-bottom">
+
+    <div v-if="<?=$category?>PopupMode === 'edit'">
+        <div class="row mb-2">
+            <div class="col-3 d-inline-flex align-items-center">
+                <label class="text-secondary m-0">Assigned Pro</label>
+            </div>
+            <div class="col-9">
+                <div class="d-flex align-items-center">
+                    <div class="pro-initials text-uppercase"
+                         :title="allProsFlat['pro_' + <?=$category?>PopupItem.assigned_pro_id].displayedName"
+                         :style="'background-color: ' + allProsFlat['pro_' + <?=$category?>PopupItem.assigned_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + <?=$category?>PopupItem.assigned_pro_id].colors.fc + ';'"
+                         v-html="allProsFlat['pro_' + <?=$category?>PopupItem.assigned_pro_id].displayedInitials">
+                    </div>
+                    <div class="flex-grow-1 ml-2">
+                        <select provider-search
+                                data-field="assigned_pro_uid"
+                                v-model="<?=$category?>PopupItem.assigned_pro_uid"
+                                :data-pro-name="[<?=$category?>PopupItem.assigned_pro.name_last, <?=$category?>PopupItem.assigned_pro.name_first].filter(Boolean).join(', ')"
+                                class="form-control form-control-sm">
+                            <option value=""> --select--</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row mb-2">
+            <div class="col-3 d-inline-flex align-items-center">
+                <label class="text-secondary m-0">Ordering Pro</label>
+            </div>
+            <div class="col-9">
+                <div class="d-flex align-items-center">
+                    <div class="pro-initials text-uppercase"
+                         :title="allProsFlat['pro_' + <?=$category?>PopupItem.ordering_pro_id].displayedName"
+                         :style="'background-color: ' + allProsFlat['pro_' + <?=$category?>PopupItem.ordering_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + <?=$category?>PopupItem.ordering_pro_id].colors.fc + ';'"
+                         v-html="allProsFlat['pro_' + <?=$category?>PopupItem.ordering_pro_id].displayedInitials">
+                    </div>
+                    <div class="flex-grow-1 ml-2">
+                        <select provider-search
+                                data-field="ordering_pro_uid"
+                                v-model="<?=$category?>PopupItem.ordering_pro_uid"
+                                :data-pro-name="[<?=$category?>PopupItem.ordering_pro.name_last, <?=$category?>PopupItem.ordering_pro.name_first].filter(Boolean).join(', ')"
+                                class="form-control form-control-sm">
+                            <option value=""> --select--</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-3 d-inline-flex align-items-center">
+            <label class="text-secondary m-0">Due Date</label>
+        </div>
+        <div class="col-9">
+            <div class="d-flex align-items-center">
+                <div class="pro-initials text-uppercase text-white bg-info"
+                     title="Due Date">
+                    <i class="fa fa-calendar-day"></i>
+                </div>
+                <div class="flex-grow-1 ml-2">
+                    <input type="text" data-field="due_date" placeholder="Due Date"
+                           v-model="<?=$category?>PopupItem.data.due_date" class="form-control form-control-sm date-input">
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>

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

@@ -147,7 +147,9 @@
                 </div>
 
             </div>
+            @include('app.patient.tickets.common-fields', ['category' => 'equipment'])
 
+            <!-- equipment specific -->
             <div class="p-3 border-bottom">
 
                 <div class="row mb-2">
@@ -194,39 +196,8 @@
             </div>
 
             <!-- comments -->
-            <div v-if="equipmentPopupMode === 'edit' && equipmentPopupItem.data.comments && equipmentPopupItem.data.comments.length" class="px-3 pt-3 pb-0 bg-light">
-                <div class="row mb-3">
-                    <div class="col-12">
-                        <label class="text-secondary mb-0 font-weight-normal font-size-16">Comments (@{{ equipmentPopupItem.data.comments.length }})</label>
-                    </div>
-                </div>
-                <div v-for="(message) in equipmentPopupItem.data.comments" class="d-flex align-items-start pb-3">
-                    <div class="pro-initials text-uppercase mr-2"
-                         :title="allProsFlat['pro_' + message.pro_id].displayedName"
-                         :style="'background-color: ' + allProsFlat['pro_' + message.pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + message.pro_id].colors.fc + ';'">
-                        @{{allProsFlat['pro_' + message.pro_id].displayedInitials}}
-                    </div>
-                    <div class="flex-grow-1">
-                        <div class="">
-                            @{{ allProsFlat['pro_' + message.pro_id].displayedName }}
-                            <span class="text-secondary ml-3">@{{ message.created_at }}</span>
-                        </div>
-                        <div>@{{ message.message }}</div>
-                    </div>
-                </div>
-            </div>
+            @include('app.patient.tickets.comments', ['category' => 'equipment'])
 
-            <div v-if="equipmentPopupMode === 'edit'" class="comment-input-outer p-3 bg-light d-flex align-items-start border-top">
-                <div class="pro-initials text-uppercase mr-2"
-                     :title="allProsFlat['pro_' + own_pro_id].displayedName"
-                     :style="'background-color: ' + allProsFlat['pro_' + own_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + own_pro_id].colors.fc + ';'">
-                    @{{allProsFlat['pro_' + own_pro_id].displayedInitials}}
-                </div>
-                <div class="flex-grow-1 position-relative">
-                    <textarea class="form-control form-control-sm txt-comment shadow-none" v-model="comment"></textarea>
-                    <a href="#" v-on:click.prevent="equipmentSaveComment()" class="btn btn-sm btn-primary text-white btn-save-comment">Comment</a>
-                </div>
-            </div>
         </form>
     </div>
 </div>

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

@@ -100,76 +100,7 @@
             </h3>
 
             <!-- common - only applicable for edit -->
-            <div class="p-3 border-bottom">
-
-                <div v-if="erxPopupMode === 'edit'">
-                    <div class="row mb-2">
-                        <div class="col-3 d-inline-flex align-items-center">
-                            <label class="text-secondary m-0">Assigned Pro</label>
-                        </div>
-                        <div class="col-9">
-                            <div class="d-flex align-items-center">
-                                <div class="pro-initials text-uppercase"
-                                     :title="allProsFlat['pro_' + erxPopupItem.assigned_pro_id].displayedName"
-                                     :style="'background-color: ' + allProsFlat['pro_' + erxPopupItem.assigned_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + erxPopupItem.assigned_pro_id].colors.fc + ';'">
-                                    @{{allProsFlat['pro_' + erxPopupItem.assigned_pro_id].displayedInitials}}
-                                </div>
-                                <div class="flex-grow-1 ml-2">
-                                    <select provider-search
-                                            data-field="assigned_pro_uid"
-                                            v-model="erxPopupItem.assigned_pro_uid"
-                                            :data-pro-name="[erxPopupItem.assigned_pro.name_last, erxPopupItem.assigned_pro.name_first].filter(Boolean).join(', ')"
-                                            class="form-control form-control-sm">
-                                        <option value=""> --select--</option>
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row mb-2">
-                        <div class="col-3 d-inline-flex align-items-center">
-                            <label class="text-secondary m-0">Ordering Pro</label>
-                        </div>
-                        <div class="col-9">
-                            <div class="d-flex align-items-center">
-                                <div class="pro-initials text-uppercase"
-                                     :title="allProsFlat['pro_' + erxPopupItem.ordering_pro_id].displayedName"
-                                     :style="'background-color: ' + allProsFlat['pro_' + erxPopupItem.ordering_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + erxPopupItem.ordering_pro_id].colors.fc + ';'">
-                                    @{{allProsFlat['pro_' + erxPopupItem.ordering_pro_id].displayedInitials}}
-                                </div>
-                                <div class="flex-grow-1 ml-2">
-                                    <select provider-search
-                                            data-field="ordering_pro_uid"
-                                            v-model="erxPopupItem.ordering_pro_uid"
-                                            :data-pro-name="[erxPopupItem.ordering_pro.name_last, erxPopupItem.ordering_pro.name_first].filter(Boolean).join(', ')"
-                                            class="form-control form-control-sm">
-                                        <option value=""> --select--</option>
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="row">
-                    <div class="col-3 d-inline-flex align-items-center">
-                        <label class="text-secondary m-0">Due Date</label>
-                    </div>
-                    <div class="col-9">
-                        <div class="d-flex align-items-center">
-                            <div class="pro-initials text-uppercase text-white bg-info"
-                                 title="Due Date">
-                                <i class="fa fa-calendar-day"></i>
-                            </div>
-                            <div class="flex-grow-1 ml-2">
-                                <input type="text" data-field="due_date" placeholder="Due Date"
-                                       v-model="erxPopupItem.data.due_date" class="form-control form-control-sm date-input">
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-            </div>
+            @include('app.patient.tickets.common-fields', ['category' => 'erx'])
 
             <div class="p-3 border-bottom">
 
@@ -287,39 +218,8 @@
             </div>
 
             <!-- comments -->
-            <div v-if="erxPopupMode === 'edit' && erxPopupItem.data.comments && erxPopupItem.data.comments.length" class="px-3 pt-3 pb-0 bg-light">
-                <div class="row mb-3">
-                    <div class="col-12">
-                        <label class="text-secondary mb-0 font-weight-normal font-size-16">Comments (@{{ erxPopupItem.data.comments.length }})</label>
-                    </div>
-                </div>
-                <div v-for="(message) in erxPopupItem.data.comments" class="d-flex align-items-start pb-3">
-                    <div class="pro-initials text-uppercase mr-2"
-                         :title="allProsFlat['pro_' + message.pro_id].displayedName"
-                         :style="'background-color: ' + allProsFlat['pro_' + message.pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + message.pro_id].colors.fc + ';'">
-                        @{{allProsFlat['pro_' + message.pro_id].displayedInitials}}
-                    </div>
-                    <div class="flex-grow-1">
-                        <div class="">
-                            @{{ allProsFlat['pro_' + message.pro_id].displayedName }}
-                            <span class="text-secondary ml-3">@{{ message.created_at }}</span>
-                        </div>
-                        <div>@{{ message.message }}</div>
-                    </div>
-                </div>
-            </div>
+            @include('app.patient.tickets.comments', ['category' => 'erx'])
 
-            <div v-if="erxPopupMode === 'edit'" class="comment-input-outer p-3 bg-light d-flex align-items-start border-top">
-                <div class="pro-initials text-uppercase mr-2"
-                     :title="allProsFlat['pro_' + own_pro_id].displayedName"
-                     :style="'background-color: ' + allProsFlat['pro_' + own_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + own_pro_id].colors.fc + ';'">
-                    @{{allProsFlat['pro_' + own_pro_id].displayedInitials}}
-                </div>
-                <div class="flex-grow-1 position-relative">
-                    <textarea class="form-control form-control-sm txt-comment shadow-none" v-model="comment"></textarea>
-                    <a href="#" v-on:click.prevent="erxSaveComment()" class="btn btn-sm btn-primary text-white btn-save-comment">Comment</a>
-                </div>
-            </div>
         </form>
     </div>
 </div>

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

@@ -75,77 +75,9 @@
             </h3>
 
             <!-- common - only applicable for edit -->
-            <div class="p-3 border-bottom">
-
-                <div v-if="imagingPopupMode === 'edit'">
-                    <div class="row mb-2">
-                        <div class="col-3 d-inline-flex align-items-center">
-                            <label class="text-secondary m-0">Assigned Pro</label>
-                        </div>
-                        <div class="col-9">
-                            <div class="d-flex align-items-center">
-                                <div class="pro-initials text-uppercase"
-                                     :title="allProsFlat['pro_' + imagingPopupItem.assigned_pro_id].displayedName"
-                                     :style="'background-color: ' + allProsFlat['pro_' + imagingPopupItem.assigned_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + imagingPopupItem.assigned_pro_id].colors.fc + ';'">
-                                    @{{allProsFlat['pro_' + imagingPopupItem.assigned_pro_id].displayedInitials}}
-                                </div>
-                                <div class="flex-grow-1 ml-2">
-                                    <select provider-search
-                                            data-field="assigned_pro_uid"
-                                            v-model="imagingPopupItem.assigned_pro_uid"
-                                            :data-pro-name="[imagingPopupItem.assigned_pro.name_last, imagingPopupItem.assigned_pro.name_first].filter(Boolean).join(', ')"
-                                            class="form-control form-control-sm">
-                                        <option value=""> --select--</option>
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row mb-2">
-                        <div class="col-3 d-inline-flex align-items-center">
-                            <label class="text-secondary m-0">Ordering Pro</label>
-                        </div>
-                        <div class="col-9">
-                            <div class="d-flex align-items-center">
-                                <div class="pro-initials text-uppercase"
-                                     :title="allProsFlat['pro_' + imagingPopupItem.ordering_pro_id].displayedName"
-                                     :style="'background-color: ' + allProsFlat['pro_' + imagingPopupItem.ordering_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + imagingPopupItem.ordering_pro_id].colors.fc + ';'">
-                                    @{{allProsFlat['pro_' + imagingPopupItem.ordering_pro_id].displayedInitials}}
-                                </div>
-                                <div class="flex-grow-1 ml-2">
-                                    <select provider-search
-                                            data-field="ordering_pro_uid"
-                                            v-model="imagingPopupItem.ordering_pro_uid"
-                                            :data-pro-name="[imagingPopupItem.ordering_pro.name_last, imagingPopupItem.ordering_pro.name_first].filter(Boolean).join(', ')"
-                                            class="form-control form-control-sm">
-                                        <option value=""> --select--</option>
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="row">
-                    <div class="col-3 d-inline-flex align-items-center">
-                        <label class="text-secondary m-0">Due Date</label>
-                    </div>
-                    <div class="col-9">
-                        <div class="d-flex align-items-center">
-                            <div class="pro-initials text-uppercase text-white bg-info"
-                                 title="Due Date">
-                                <i class="fa fa-calendar-day"></i>
-                            </div>
-                            <div class="flex-grow-1 ml-2">
-                                <input type="text" data-field="due_date" placeholder="Due Date"
-                                       v-model="imagingPopupItem.data.due_date" class="form-control form-control-sm date-input">
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-            </div>
+            @include('app.patient.tickets.common-fields', ['category' => 'imaging'])
 
+            <!-- imaging specific -->
             <div class="p-3 border-bottom">
 
                 <div class="row mb-2">
@@ -207,39 +139,7 @@
             </div>
 
             <!-- comments -->
-            <div v-if="imagingPopupMode === 'edit' && imagingPopupItem.data.comments && imagingPopupItem.data.comments.length" class="px-3 pt-3 pb-0 bg-light">
-                <div class="row mb-3">
-                    <div class="col-12">
-                        <label class="text-secondary mb-0 font-weight-normal font-size-16">Comments (@{{ imagingPopupItem.data.comments.length }})</label>
-                    </div>
-                </div>
-                <div v-for="(message) in imagingPopupItem.data.comments" class="d-flex align-items-start pb-3">
-                    <div class="pro-initials text-uppercase mr-2"
-                         :title="allProsFlat['pro_' + message.pro_id].displayedName"
-                         :style="'background-color: ' + allProsFlat['pro_' + message.pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + message.pro_id].colors.fc + ';'">
-                        @{{allProsFlat['pro_' + message.pro_id].displayedInitials}}
-                    </div>
-                    <div class="flex-grow-1">
-                        <div class="">
-                            @{{ allProsFlat['pro_' + message.pro_id].displayedName }}
-                            <span class="text-secondary ml-3">@{{ message.created_at }}</span>
-                        </div>
-                        <div>@{{ message.message }}</div>
-                    </div>
-                </div>
-            </div>
-
-            <div v-if="imagingPopupMode === 'edit'" class="comment-input-outer p-3 bg-light d-flex align-items-start border-top">
-                <div class="pro-initials text-uppercase mr-2"
-                     :title="allProsFlat['pro_' + own_pro_id].displayedName"
-                     :style="'background-color: ' + allProsFlat['pro_' + own_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + own_pro_id].colors.fc + ';'">
-                    @{{allProsFlat['pro_' + own_pro_id].displayedInitials}}
-                </div>
-                <div class="flex-grow-1 position-relative">
-                    <textarea class="form-control form-control-sm txt-comment shadow-none" v-model="comment"></textarea>
-                    <a href="#" v-on:click.prevent="imagingSaveComment()" class="btn btn-sm btn-primary text-white btn-save-comment">Comment</a>
-                </div>
-            </div>
+            @include('app.patient.tickets.comments', ['category' => 'imaging'])
         </form>
     </div>
 </div>

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

@@ -76,77 +76,9 @@
             </h3>
 
             <!-- common - only applicable for edit -->
-            <div class="p-3 border-bottom">
-
-                <div v-if="labPopupMode === 'edit'">
-                    <div class="row mb-2">
-                        <div class="col-3 d-inline-flex align-items-center">
-                            <label class="text-secondary m-0">Assigned Pro</label>
-                        </div>
-                        <div class="col-9">
-                            <div class="d-flex align-items-center">
-                                <div class="pro-initials text-uppercase"
-                                     :title="allProsFlat['pro_' + labPopupItem.assigned_pro_id].displayedName"
-                                     :style="'background-color: ' + allProsFlat['pro_' + labPopupItem.assigned_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + labPopupItem.assigned_pro_id].colors.fc + ';'">
-                                    @{{allProsFlat['pro_' + labPopupItem.assigned_pro_id].displayedInitials}}
-                                </div>
-                                <div class="flex-grow-1 ml-2">
-                                    <select provider-search
-                                            data-field="assigned_pro_uid"
-                                            v-model="labPopupItem.assigned_pro_uid"
-                                            :data-pro-name="[labPopupItem.assigned_pro.name_last, labPopupItem.assigned_pro.name_first].filter(Boolean).join(', ')"
-                                            class="form-control form-control-sm">
-                                        <option value=""> --select--</option>
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row mb-2">
-                        <div class="col-3 d-inline-flex align-items-center">
-                            <label class="text-secondary m-0">Ordering Pro</label>
-                        </div>
-                        <div class="col-9">
-                            <div class="d-flex align-items-center">
-                                <div class="pro-initials text-uppercase"
-                                     :title="allProsFlat['pro_' + labPopupItem.ordering_pro_id].displayedName"
-                                     :style="'background-color: ' + allProsFlat['pro_' + labPopupItem.ordering_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + labPopupItem.ordering_pro_id].colors.fc + ';'">
-                                    @{{allProsFlat['pro_' + labPopupItem.ordering_pro_id].displayedInitials}}
-                                </div>
-                                <div class="flex-grow-1 ml-2">
-                                    <select provider-search
-                                            data-field="ordering_pro_uid"
-                                            v-model="labPopupItem.ordering_pro_uid"
-                                            :data-pro-name="[labPopupItem.ordering_pro.name_last, labPopupItem.ordering_pro.name_first].filter(Boolean).join(', ')"
-                                            class="form-control form-control-sm">
-                                        <option value=""> --select--</option>
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="row">
-                    <div class="col-3 d-inline-flex align-items-center">
-                        <label class="text-secondary m-0">Due Date</label>
-                    </div>
-                    <div class="col-9">
-                        <div class="d-flex align-items-center">
-                            <div class="pro-initials text-uppercase text-white bg-info"
-                                 title="Due Date">
-                                <i class="fa fa-calendar-day"></i>
-                            </div>
-                            <div class="flex-grow-1 ml-2">
-                                <input type="text" data-field="due_date" placeholder="Due Date"
-                                       v-model="labPopupItem.data.due_date" class="form-control form-control-sm date-input">
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-            </div>
+            @include('app.patient.tickets.common-fields', ['category' => 'lab'])
 
+            <!-- lab specific -->
             <div class="p-3 border-bottom">
 
                 <div class="row mb-2">
@@ -212,39 +144,8 @@
             </div>
 
             <!-- comments -->
-            <div v-if="labPopupMode === 'edit' && labPopupItem.data.comments && labPopupItem.data.comments.length" class="px-3 pt-3 pb-0 bg-light">
-                <div class="row mb-3">
-                    <div class="col-12">
-                        <label class="text-secondary mb-0 font-weight-normal font-size-16">Comments (@{{ labPopupItem.data.comments.length }})</label>
-                    </div>
-                </div>
-                <div v-for="(message) in labPopupItem.data.comments" class="d-flex align-items-start pb-3">
-                    <div class="pro-initials text-uppercase mr-2"
-                         :title="allProsFlat['pro_' + message.pro_id].displayedName"
-                         :style="'background-color: ' + allProsFlat['pro_' + message.pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + message.pro_id].colors.fc + ';'">
-                        @{{allProsFlat['pro_' + message.pro_id].displayedInitials}}
-                    </div>
-                    <div class="flex-grow-1">
-                        <div class="">
-                            @{{ allProsFlat['pro_' + message.pro_id].displayedName }}
-                            <span class="text-secondary ml-3">@{{ message.created_at }}</span>
-                        </div>
-                        <div>@{{ message.message }}</div>
-                    </div>
-                </div>
-            </div>
+            @include('app.patient.tickets.comments', ['category' => 'lab'])
 
-            <div v-if="labPopupMode === 'edit'" class="comment-input-outer p-3 bg-light d-flex align-items-start border-top">
-                <div class="pro-initials text-uppercase mr-2"
-                     :title="allProsFlat['pro_' + own_pro_id].displayedName"
-                     :style="'background-color: ' + allProsFlat['pro_' + own_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + own_pro_id].colors.fc + ';'">
-                    @{{allProsFlat['pro_' + own_pro_id].displayedInitials}}
-                </div>
-                <div class="flex-grow-1 position-relative">
-                    <textarea class="form-control form-control-sm txt-comment shadow-none" v-model="comment"></textarea>
-                    <a href="#" v-on:click.prevent="labSaveComment()" class="btn btn-sm btn-primary text-white btn-save-comment">Comment</a>
-                </div>
-            </div>
         </form>
     </div>
 </div>