Search handout

public/css/style.css

@@ -3343,4 +3343,19 @@ body.forced-masking #mask {
 .pdf-form-preloader i {
     font-size: 35px;
     color: #9e9e9e;
+}
+#handoutSelectComponent img {
+    max-width: 100%;
+}
+#handoutSelectComponent .handout .handout-detail {
+    position: relative;
+}
+#handoutSelectComponent .handout.selected .handout-detail i.fa-check-circle {
+    position: absolute;
+    right: 0;
+    top: 0;
+    color: var(--primary-color);
+}
+#handoutSelectComponent .handout.selected .handout-detail {
+    border-color: var(--primary-color) !important;
 }

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

@@ -13,20 +13,23 @@
         <span class="mx-2 text-secondary">|</span>
         <div moe>
             <a start show class="">Add</a>
-            <form url="/api/handoutClient/create" style="min-width: 300px;">
+            <form url="/api/handoutClient/create" style="width: 500px;">
                 <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
                 @if(@$note)
                     <input type="hidden" name="noteUid" value="{{ $note->uid }}">
                 @endif
-                <div class="mb-2">
-                    <select name="handoutUid" class="form-control form-control-sm">
-                        <option value=""> --select--</option>
-                        @foreach($handouts as $handout)
-                            <option data-img_src="/api/handout/download-thumbnail/{{ $handout->uid }}" value="{{$handout->uid}}">
-                                {{$handout->display_name}}
-                            </option>
-                        @endforeach
-                    </select>
+                <div id="handoutSelectComponent" class="mb-2" v-cloak>
+                    <input type="hidden" name="handoutUid" :value="selectedHandoutUid" />
+                    <input type="search" class="form-control" placeholder="Search Handout" @keyup="filterHandouts" />
+                    <div class="row mt-2">
+                        <div v-for="handout in handoutsList" class="col-md-4 mb-2 handout" :class="selectedHandoutUid == handout.uid ? 'selected':''" @click="selectedHandoutUid = handout.uid">
+                            <div class="d-flex flex-column h-100 border rounded p-2 handout-detail">
+                            <i v-if="selectedHandoutUid == handout.uid" class="fas fa-check-circle"></i>
+                                <img :src="'/api/handout/download-thumbnail/'+handout.uid" :alt="handout.display_name"  onerror="if (this.src != '/img/pdf.png') this.src = '/img/pdf.png';">
+                                <h6 class="mt-2">@{{ handout.display_name }}</h6>
+                            </div>
+                        </div>
+                    </div>
                 </div>
                 <div class="d-flex align-items-center">
                     <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
@@ -89,20 +92,44 @@
     </table>
 </div>
 <script>
-        $(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 handoutSelectComponent = new Vue({
+            el:'#handoutSelectComponent',
+            data:{
+                handouts:<?= json_encode($handouts) ?>,
+                handoutsList: [],
+                selectedHandoutUid: null,
+                search: null
+            },
+            methods:{
+                filterHandouts: function(evt){
+                    var self = this;
+                    self.search = evt.target.value;
+
+                    var obj = $.extend({}, {handouts:self.handouts});
+                    var handoutsList = obj.handouts;
+                    
+                    if(!self.search.length){
+                        self.handoutsList = handoutsList;
+                        return;
+                    }
+
+                    var data = [];
+                    for(var i = 0; i < handoutsList.length; i++){
+                        var handout = handoutsList[i];
+                        if( handout.display_name.toLowerCase().includes(self.search.toLowerCase())){
+                            data.push(handout);
+                        }
+                    }
+                    self.handoutsList = data;
+
+                },
+                init: function(){
+                    this.handoutsList = this.handouts;
                 }
+            },
+            mounted: function(){
+                this.init();
             }
-        var options = {
-            'templateSelection': custom_template,
-            'templateResult': custom_template,
-        }
-        $('select[name=handoutUid]').select2(options);
-    });
+        });
+        
 </script>