Multi selecrt

resources/views/app/practice-management/supply-orders-ready-to-ship.blade.php

@@ -1,7 +1,11 @@
 @extends ('layouts/template')
 
 @section('content')
-
+    <style>
+        #practice-supply-orders-ready-to-ship .bulk-actions {
+            width: 188px;
+        }
+    </style>
     <div id="practice-supply-orders-ready-to-ship" class="p-3 mcp-theme-1">
         <div class="card">
 
@@ -20,9 +24,25 @@
 <!--                <a href="{{route('practice-management.supply-orders-ready-to-ship')}}" class="ml-auto">Clear Filters</a>-->
             </div>
             <div class="card-body p-0">
-                <table class="table table-sm table-condensed p-0 m-0" style="table-layout: fixed">
+                <table id="ordersSupplyReadyToShipTable" class="table table-sm table-condensed p-0 m-0" style="table-layout: fixed">
                     <thead class="bg-light">
                     <tr>
+                    <th class="border-0 bulk-actions">
+                        <div class="d-flex align-items-center">
+                            <input type="checkbox" multi-select />
+                            <div class="ml-2">
+                                <div class="dropdown">
+                                    <button class="btn btn btn-outline-primary dropdown-toggle p-1" type="button" id="dropdownMenuButtonOrdersReadyToShip" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                        Bulk Action
+                                    </button>
+                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonOrdersReadyToShip">
+                                        <a class="dropdown-item" href="#" data-applybulkaction="generate_shipment">Generate Shipment</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                    </th>
 <!--                        <th class="border-0">Date</th>-->
                         <th class="border-0">Patient</th>
                         <th class="border-0">Address</th>
@@ -31,7 +51,7 @@
                         <th class="border-0">Actions</th>
                     </tr>
                     </thead>
-                    <div>
+                    <tbody>
                     <?php
                     $prevClientAndAddress = null;
                     $shipmentIndex = 0;
@@ -43,7 +63,7 @@
                             $sameClientAndAddress = false;
                         ?>
                         @if($currentClientAndAddress !== $prevClientAndAddress)
-                            <tr class="sep"><td colspan="4"></td></tr>
+                            <tr class="sep"><td colspan="6"></td></tr>
                             <?php
                             $shipmentIndex++;
                             $prevClientAndAddress = $currentClientAndAddress;
@@ -60,6 +80,11 @@
                             data-address-zip="{{$supplyOrder->mailing_address_zip}}"
                             data-shipment-index="{{$shipmentIndex}}"
                             data-supply-order-uid="{{$supplyOrder->uid}}">
+                            <td class="border-top-0">
+                                @if(!$sameClientAndAddress)
+                                    <input type="checkbox" data-supply="{{$supplyOrder->uid}}" />
+                                @endif
+                            </td>
 <!--                            <td class="align-top border-top-0">{{friendlier_date_time($supplyOrder->created_at)}}</td>-->
                             <td class="align-top border-top-0">
                                 @if(!$sameClientAndAddress)
@@ -90,7 +115,7 @@
                                     </form>
                                 </div>
                             </td>
-                            <td>
+                            <td class="border-top-0">
                                 @if(!$sameClientAndAddress)
                                     @foreach($patient->devices as $device)
                                         <div>
@@ -103,10 +128,10 @@
                             </td>
                             <td class="align-top border-top-0">
                                 @if(!$sameClientAndAddress)
-                                    <a href="#" id="generate-shipment">Generate Shipment</a>
+                                    <a href="#" id="generate-shipment" data-generateshipment="{{ $supplyOrder->uid }}">Generate Shipment</a>
                                 @endif
                             </td>
-                        </div>
+                        </tr>                        
                     @endforeach
                     </tbody>
                 </table>
@@ -118,6 +143,56 @@
     </div>
 
     <script>
+        var multiSelectActions = null;
+        
+        (function($){
+            multiSelectActions = {
+                table: null,
+
+                initOnMultiSelect: function(){
+                    var self = this;
+                    $('[multi-select]').change(function(evt){
+                        var input = evt.target;
+                        var isChecked = input.checked ? true:false;
+                        self.toggleAll(isChecked);
+                    });
+                },
+                toggleAll: function(isChecked){
+                    var self = this;
+                    self.table.find('tr input[data-supply]').prop('checked', isChecked);
+                },
+                initBulkAction: function(){
+                    var self = this;
+                    $('[data-applybulkaction]').click(function(evt){
+                        evt.preventDefault();
+                        var action = $(evt.target).data('applybulkaction');
+                        var text = $(evt.target).text();
+                        $('#dropdownMenuButtonOrdersReadyToShip').text(text);
+                        if(action === 'generate_shipment') self.bulkGenerateShipment();
+                    });
+                },
+                bulkGenerateShipment: function(){
+                    var self = this;
+                    var rows = self.table.find('tr');
+                    var count = 0;
+                    $.each(rows, function(i, row){
+                        var rowCheckbox = $(row).find('input[type=checkbox]');
+                        var rowCheckboxIsChecked = rowCheckbox.prop('checked');
+                        var rowCheckedOrderUid = rowCheckbox.data('supply');
+                        if(rowCheckboxIsChecked){
+                            count++;
+                            $('[data-generateshipment='+rowCheckedOrderUid+']').text('Processing...').click();
+                        }
+                    });
+                    if(!count) toastr.error('Nothing selected!');
+                },
+                init: function(){
+                    this.table = $('#ordersSupplyReadyToShipTable');
+                    this.initBulkAction();
+                    this.initOnMultiSelect();
+                }
+            };
+        })(jQuery);
         (function() {
 
             function hasError (_data) {
@@ -162,6 +237,7 @@
                             }
                         }, 'json');
                     });
+                    multiSelectActions.init();
             }
 
             addMCInitializer('practice-supply-orders-ready-to-ship', init, '#practice-supply-orders-ready-to-ship')