| Lines 11-16
          
      
      
        Link Here | 
        
          | 11 |     [% t("Koha") | html %] | 11 |     [% t("Koha") | html %] | 
        
          | 12 | [% END %]</title> | 12 | [% END %]</title> | 
        
          | 13 | [% INCLUDE 'doc-head-close.inc' %] | 13 | [% INCLUDE 'doc-head-close.inc' %] | 
            
              |  |  | 14 |     <style> | 
            
              | 15 |         #bookings-timeline .vis-item.vis-range { | 
            
              | 16 |             &.cancelled { | 
            
              | 17 |                background: rgba(128, 128, 128, 0.3); | 
            
              | 18 |             } | 
            
              | 19 |         } | 
            
              | 20 |     </style> | 
        
          | 14 | </head> | 21 | </head> | 
        
          | 15 |  | 22 |  | 
        
          | 16 | <body id="circ_request" class="catalog"> | 23 | <body id="circ_request" class="catalog"> | 
  
    | Lines 43-50
          
      
      
        Link Here | 
        
          | 43 |                     <h1>Bookings for [% INCLUDE 'biblio-title-head.inc' %]</h1> | 50 |                     <h1>Bookings for [% INCLUDE 'biblio-title-head.inc' %]</h1> | 
        
          | 44 |                     <div class="page-section" id="bookings-timeline"></div> | 51 |                     <div class="page-section" id="bookings-timeline"></div> | 
        
          | 45 |                     <div class="page-section"> | 52 |                     <div class="page-section"> | 
          
            
              | 46 |                         <fieldset class="action filters" style="cursor:pointer;"> | 53 |                         <fieldset class="action filters" style="cursor:pointer; display: flex; flex-direction: column;"> | 
        
          | 47 |                             <a id="expired_filter" class="filtered"><i class="fa fa-bars"></i> Show expired</a> | 54 |                             <a id="expired_filter" class="filtered"><i class="fa fa-bars"></i> Show expired</a> | 
            
              |  |  | 55 |                             <a id="cancelled_filter" class="filtered"><i class="fa fa-bars"></i> Show cancelled</a> | 
        
          | 48 |                         </fieldset> | 56 |                         </fieldset> | 
        
          | 49 |  | 57 |  | 
        
          | 50 |                         <table id="bookings_table"></table> | 58 |                         <table id="bookings_table"></table> | 
  
    | Lines 122-136
          
      
      
        Link Here | 
        
          | 122 |                             url: false | 130 |                             url: false | 
        
          | 123 |                         }), | 131 |                         }), | 
        
          | 124 |                         [% IF CAN_user_circulate_manage_bookings %] | 132 |                         [% IF CAN_user_circulate_manage_bookings %] | 
          
            
              | 125 |                         editable: { remove: true, updateTime: true }, | 133 |                         editable: booking.status != 'cancelled' ? { remove: true, updateTime: true } : false, | 
        
          | 126 |                         [% ELSE %] | 134 |                         [% ELSE %] | 
        
          | 127 |                         editable: false, | 135 |                         editable: false, | 
        
          | 128 |                         [% END %] | 136 |                         [% END %] | 
        
          | 129 |                         type: 'range', | 137 |                         type: 'range', | 
          
            
              | 130 |                         group: booking.item_id ? booking.item_id : 0 | 138 |                         group: booking.item_id ? booking.item_id : 0, | 
            
              |  |  | 139 |                         className: booking.status, | 
        
          | 131 |                     }); | 140 |                     }); | 
        
          | 132 |                 } | 141 |                 } | 
        
          | 133 |  | 142 |  | 
            
              |  |  | 143 |                 const cancelledItems = document.querySelectorAll('#bookings-timeline .vis-item.vis-range.cancelled'); | 
            
              | 144 |                 cancelledItems.forEach(item => { | 
            
              | 145 |                     item.style.background = 'repeating-linear-gradient(' + | 
            
              | 146 |                         '135deg,' + | 
            
              | 147 |                         'rgba(211, 211, 211, 0.5) 0,' + | 
            
              | 148 |                         'rgba(211, 211, 211, 0.5) 10px,' + | 
            
              | 149 |                         'transparent 10px,' + | 
            
              | 150 |                         'transparent 20px' + | 
            
              | 151 |                     ');'; | 
            
              | 152 |                 }); | 
            
              | 153 |  | 
        
          | 134 |                 var container = document.getElementById('bookings-timeline'); | 154 |                 var container = document.getElementById('bookings-timeline'); | 
        
          | 135 |                 var options = { | 155 |                 var options = { | 
        
          | 136 |                     stack: true, | 156 |                     stack: true, | 
  
    | Lines 206-211
          
      
      
        Link Here | 
        
          | 206 |         ); | 226 |         ); | 
        
          | 207 |  | 227 |  | 
        
          | 208 |         let filter_expired = true; | 228 |         let filter_expired = true; | 
            
              |  |  | 229 |         let filter_cancelled = false; | 
        
          | 209 |         let additional_filters = { | 230 |         let additional_filters = { | 
        
          | 210 |             end_date: function(){ | 231 |             end_date: function(){ | 
        
          | 211 |                 if ( filter_expired ) { | 232 |                 if ( filter_expired ) { | 
  
    | Lines 214-219
          
      
      
        Link Here | 
        
          | 214 |                 } else { | 235 |                 } else { | 
        
          | 215 |                     return; | 236 |                     return; | 
        
          | 216 |                 } | 237 |                 } | 
            
              |  |  | 238 |             }, | 
            
              | 239 |             status: function(){ | 
            
              | 240 |                 if ( filter_cancelled ) { | 
            
              | 241 |                     return { "=": 'cancelled' } | 
            
              | 242 |                 } else { | 
            
              | 243 |                     return; | 
            
              | 244 |                 } | 
        
          | 217 |             } | 245 |             } | 
        
          | 218 |         }; | 246 |         }; | 
        
          | 219 |  | 247 |  | 
  
    | Lines 241-250
          
      
      
        Link Here | 
        
          | 241 |                 visible: false, | 269 |                 visible: false, | 
        
          | 242 |                 render: function (data, type, row, meta) { | 270 |                 render: function (data, type, row, meta) { | 
        
          | 243 |                     let is_expired = dayjs(row.end_date).isBefore(new Date()); | 271 |                     let is_expired = dayjs(row.end_date).isBefore(new Date()); | 
            
              |  |  | 272 |                     let is_cancelled = row.status == 'cancelled' ? 1 : 0; | 
        
          | 244 |                     if (is_expired) { | 273 |                     if (is_expired) { | 
        
          | 245 |                         return '<span class="badge rounded-pill bg-secondary">' + _("Expired") + '</span>'; | 274 |                         return '<span class="badge rounded-pill bg-secondary">' + _("Expired") + '</span>'; | 
        
          | 246 |                     } | 275 |                     } | 
          
            
              | 247 |  | 276 |                     if (is_cancelled) { | 
            
              |  |  | 277 |                         return '<span class="badge rounded-pill bg-secondary">' + _("Cancelled") + '</span>'; | 
            
              | 278 |                     } | 
        
          | 248 |                     return '<span class="badge rounded-pill bg-success">' + _("Active") + '</span>'; | 279 |                     return '<span class="badge rounded-pill bg-success">' + _("Active") + '</span>'; | 
        
          | 249 |                 } | 280 |                 } | 
        
          | 250 |             }, | 281 |             }, | 
  
    | Lines 309-342
          
      
      
        Link Here | 
        
          | 309 |                 "orderable": false, | 340 |                 "orderable": false, | 
        
          | 310 |                 "render": function(data, type, row, meta) { | 341 |                 "render": function(data, type, row, meta) { | 
        
          | 311 |                     let result = ""; | 342 |                     let result = ""; | 
            
              |  |  | 343 |                     let is_cancelled = row.status == 'cancelled' ? 1 : 0; | 
        
          | 312 |                     [% IF CAN_user_circulate_manage_bookings %] | 344 |                     [% IF CAN_user_circulate_manage_bookings %] | 
          
            
              | 313 |                     result += '<button type="button" class="btn btn-default btn-xs edit-action" data-bs-toggle="modal" data-bs-target="#placeBookingModal" data-booking="'+row.booking_id+'" data-biblionumber="[% biblionumber | uri %]" data-itemnumber="'+row.item_id+'" data-patron="'+row.patron_id+'" data-pickup_library="'+row.pickup_library_id+'" data-start_date="'+row.start_date+'" data-end_date="'+row.end_date+'"><i class="fa fa-pencil" aria-hidden="true"></i> '+_("Edit")+'</button>'; | 345 |                     if( !is_cancelled ){ | 
            
              | 314 |                     result += '<button type="button" class="btn btn-default btn-xs cancel-action" data-bs-toggle="modal" data-bs-target="#cancelBookingModal" data-booking="'+row.booking_id+'"><i class="fa fa-trash" aria-hidden="true"></i> '+_("Cancel")+'</button>'; | 346 |                         result += '<button type="button" class="btn btn-default btn-xs edit-action" data-bs-toggle="modal" data-bs-target="#placeBookingModal" data-booking="'+row.booking_id+'" data-biblionumber="[% biblionumber | uri %]" data-itemnumber="'+row.item_id+'" data-patron="'+row.patron_id+'" data-pickup_library="'+row.pickup_library_id+'" data-start_date="'+row.start_date+'" data-end_date="'+row.end_date+'"><i class="fa fa-pencil" aria-hidden="true"></i> '+_("Edit")+'</button>'; | 
            
              |  |  | 347 |                         result += '<button type="button" class="btn btn-default btn-xs cancel-action" data-bs-toggle="modal" data-bs-target="#cancelBookingModal" data-booking="'+row.booking_id+'"><i class="fa fa-trash" aria-hidden="true"></i> '+_("Cancel")+'</button>'; | 
            
              | 348 |                     } | 
        
          | 315 |                     [% END %] | 349 |                     [% END %] | 
        
          | 316 |                     return result; | 350 |                     return result; | 
        
          | 317 |                 } | 351 |                 } | 
        
          | 318 |             }] | 352 |             }] | 
        
          | 319 |         }, [], 0, additional_filters); | 353 |         }, [], 0, additional_filters); | 
        
          | 320 |  | 354 |  | 
          
            
              | 321 |         var txtActivefilter = _("Show expired"); | 355 |         function setupFilter(filterId, activeText, inactiveText, filterVariable) { | 
            
              | 322 |         var txtInactivefilter = _("Hide expired"); | 356 |             $(filterId).on("click", function() { | 
            
              | 323 |         $("#expired_filter").on("click", function() { | 357 |                 if ($(this).hasClass('filtered')) { | 
            
              | 324 |             if ($(this).hasClass('filtered')){ | 358 |                     filterVariable = false; | 
            
              | 325 |                 filter_expired = false; | 359 |                     $(this).html('<i class="fa fa-filter"></i> ' + inactiveText); | 
            
              | 326 |                 $(this).html('<i class="fa fa-filter"></i> '+txtInactivefilter); | 360 |                 } else { | 
            
              | 327 |             } else { | 361 |                     filterVariable = true; | 
            
              | 328 |                 filter_expired = true; | 362 |                     $(this).html('<i class="fa fa-bars"></i> ' + activeText); | 
            
              | 329 |                 $(this).html('<i class="fa fa-bars"></i> '+txtActivefilter); | 363 |                 } | 
            
              | 330 |             } |  |  | 
        
          | 331 |  | 364 |  | 
          
            
              | 332 |             bookings_table.DataTable().ajax.reload(() => { | 365 |                 bookings_table.DataTable().ajax.reload(() => { | 
            
              | 333 |                 bookings_table | 366 |                     bookings_table.DataTable().column("status:name").visible(!filterVariable, false); | 
            
              | 334 |                     .DataTable() | 367 |                 }); | 
            
              | 335 |                     .column("status:name") | 368 |                 $(this).toggleClass('filtered'); | 
            
              | 336 |                     .visible(!filter_expired, false); |  |  | 
        
          | 337 |             }); | 369 |             }); | 
          
            
              | 338 |             $(this).toggleClass('filtered'); | 370 |         } | 
            
              | 339 |         }); | 371 |  | 
            
              |  |  | 372 |         setupFilter("#expired_filter", _("Show expired"), _("Hide expired"), filter_expired); | 
            
              | 373 |         setupFilter("#cancelled_filter", _("Show cancelled"), _("Hide cancelled"), filter_cancelled); | 
        
          | 340 |  | 374 |  | 
        
          | 341 |     }); | 375 |     }); | 
        
          | 342 | </script> | 376 | </script> |