Move mcp-queue feature into own blade

resources/views/app/patient/partials/mcp-queue.blade.php

@@ -0,0 +1,60 @@
+<div class="border-top patient-queue mcp-theme-1" id="queueComponent" v-cloak>
+    <div class="bg-secondary text-white font-weight-bold text-center py-1" v-if="items.length > 0">
+        @{{ items.length }} patient@{{ items.length > 1 ? 's' : '' }} in the queue
+    </div>
+    <div class="bg-secondary text-white font-weight-bold text-center py-1" v-if="items.length === 0">
+        No patients in the queue
+    </div>
+    <div v-if="items && items.length" class="d-flex align-items-center my-1">
+        <div v-for="item in items">
+            <div class="queue-item border border-primary rounded mx-1" :title="item.name">
+                <div class="patient-avatar mb-1 text-dark">@{{ item.initials }}</div>
+                <div class="font-weight-bold small text-nowrap text-ellipsis">@{{ item.name }}</div>
+            </div>
+            <button class="btn btn-sm btn-primary mt-1 text-white font-weight-bold py-0 mx-auto d-block"
+                    v-on:click.prevent="claim(item.clientUid)">Claim</button>
+        </div>
+    </div>
+</div>
+<script>
+    (function() {
+        window.queueComponent = new Vue({
+            el: '#queueComponent',
+            data: {
+                items: []
+            },
+            mounted: function() {
+                let self = this;
+                this.refresh();
+                window.setInterval(function() {
+                    self.refresh();
+                }, 15000); // once in 15 seconds
+            },
+            methods: {
+                refresh: function() {
+                    let self = this;
+                    $.get('/patients-in-queue', function(_data) {
+                        self.items = _data;
+                    }, 'json');
+                },
+                claim: function(_uid) {
+                    $.post('/api/mcpRequest/claim', {clientUid: _uid}, function(_data) {
+                        if(_data && _data.success) {
+                            // open patient in LHS
+                            window.top.openInLHS('/patients/view/' + _uid);
+                            // open patient video in RHS
+                            window.top.openInRHS('/pro/meet/' + _uid);
+                        }
+                        else {
+                            if (_data.message) {
+                                window.top.toastr.error(_data.message);
+                            } else {
+                                window.top.toastr.error('Unable to claim the patient');
+                            }
+                        }
+                    }, 'json');
+                }
+            }
+        });
+    })();
+</script>

resources/views/app/video/call-agora-v2.blade.php

@@ -117,26 +117,6 @@
         @endif
 
     </div>
-
-    <div class="border-top patient-queue mcp-theme-1" id="queueComponent" v-cloak>
-        <div class="bg-secondary text-white font-weight-bold text-center py-1" v-if="items.length > 0">
-            @{{ items.length }} patient@{{ items.length > 1 ? 's' : '' }} in the queue
-        </div>
-        <div class="bg-secondary text-white font-weight-bold text-center py-1" v-if="items.length === 0">
-            No patients in the queue
-        </div>
-        <div v-if="items && items.length" class="d-flex align-items-center my-1">
-            <div v-for="item in items">
-                <div class="queue-item border border-primary rounded mx-1" :title="item.name">
-                    <div class="patient-avatar mb-1 text-dark">@{{ item.initials }}</div>
-                    <div class="font-weight-bold small text-nowrap text-ellipsis">@{{ item.name }}</div>
-                </div>
-                <button class="btn btn-sm btn-primary mt-1 text-white font-weight-bold py-0 mx-auto d-block"
-                        v-on:click.prevent="claim(item.clientUid)">Claim</button>
-            </div>
-        </div>
-    </div>
-
     <script>
         (function () {
             window.proCallComponent = new Vue({
@@ -716,47 +696,8 @@
             });
         })();
     </script>
-    <script>
-        (function() {
-            window.queueComponent = new Vue({
-                el: '#queueComponent',
-                data: {
-                    items: []
-                },
-                mounted: function() {
-                    let self = this;
-                    this.refresh();
-                    window.setInterval(function() {
-                        self.refresh();
-                    }, 15000); // once in 15 seconds
-                },
-                methods: {
-                    refresh: function() {
-                        let self = this;
-                        $.get('/patients-in-queue', function(_data) {
-                            self.items = _data;
-                        }, 'json');
-                    },
-                    claim: function(_uid) {
-                        $.post('/api/mcpRequest/claim', {clientUid: _uid}, function(_data) {
-                            if(_data && _data.success) {
-                                // open patient in LHS
-                                window.top.openInLHS('/patients/view/' + _uid);
-                                // open patient video in RHS
-                                window.top.openInRHS('/pro/meet/' + _uid);
-                            }
-                            else {
-                                if (_data.message) {
-                                    window.top.toastr.error(_data.message);
-                                } else {
-                                    window.top.toastr.error('Unable to claim the patient');
-                                }
-                            }
-                        }, 'json');
-                    }
-                }
-            });
-        })();
-    </script>
+
+    @include('app/patient/partials/mcp-queue')
+
 </body>
 </html>