handouts

resources/views/app/patient/handouts-list.blade.php

@@ -22,7 +22,7 @@
                     <select name="handoutUid" class="form-control form-control-sm">
                         <option value=""> --select--</option>
                         @foreach($handouts as $handout)
-                            <option value="{{$handout->uid}}">
+                            <option data-img_src="/api/handout/download-thumbnail/{{ $handout->uid }}" value="{{$handout->uid}}">
                                 {{$handout->display_name}}
                             </option>
                         @endforeach
@@ -47,11 +47,11 @@
         </tr>
         </thead>
         <tbody>
-        @foreach($clientHandouts as $clientHandout)            
+        @foreach($clientHandouts as $clientHandout)
             <?php $downloadLink = config('app.url') . "/guest/handout/".$clientHandout->uid; ?>
             <tr>
                 <td>
-                    <img width="100" src="/api/handout/download-thumbnail/{{ $clientHandout->handout->uid }}" alt="{{$clientHandout->handout->display_name}}">
+                    <img width="50" src="/api/handout/download-thumbnail/{{ $clientHandout->handout->uid }}" alt="{{$clientHandout->handout->display_name}}"  onerror="if (this.src != '/img/pdf.png') this.src = '/img/pdf.png';">
                 </td>
                 <td>{{$clientHandout->handout->internal_name}}</td>
                 <td>{{$clientHandout->handout->display_name}}</td>
@@ -89,7 +89,20 @@
     </table>
 </div>
 <script>
-    $(document).ready(function(){
-        $('select[name=handoutUid]').select2();
+        $(document).ready(function(){
+          function custom_template(obj){
+                var data = $(obj.element).data();
+                var text = $(obj.element).text();
+                if(data && data['img_src']){
+                    img_src = data['img_src'];
+                    template = $("<div class='d-flex align-items-center border-bottom:1px solid #eee;'><img src=\"" + img_src + "\" style=\"height:70px;\" onerror=\"if (this.src != '/img/pdf.png') this.src = '/img/pdf.png';\"/><p style=\"padding-left:5px; margin-bottom:0; text-align:center;\">" + text + "</p></div>");
+                    return template;
+                }
+            }
+        var options = {
+            'templateSelection': custom_template,
+            'templateResult': custom_template,
+        }
+        $('select[name=handoutUid]').select2(options);
     });
 </script>

resources/views/app/practice-management/handouts.blade.php

@@ -57,7 +57,7 @@
                 @foreach($handouts as $handout)
                     <tr class="{{$handout->is_active ? '' : 'bg-light text-secondary'}}">
                         <td>
-                            <img width="100" src="/api/handout/download-thumbnail/{{ $handout->uid }}" alt="{{$handout->display_name}}"  onerror="if (this.src != '/img/pdf.png') this.src = '/img/pdf.png';">
+                            <img width="50" src="/api/handout/download-thumbnail/{{ $handout->uid }}" alt="{{$handout->display_name}}"  onerror="if (this.src != '/img/pdf.png') this.src = '/img/pdf.png';">
                         </td>
                         <td>{{ $handout->display_name }}</td>
                         <td>{{ $handout->internal_name }}</td>