Enhance Activities Organised Page with Filters, Column Selector, and Download Functionality

- Updated the page title icon color for better visibility.
- Added filter controls for Department, Category, and Date Range.
- Implemented a column selector for customizable table views.
- Integrated reusable components for sending emails and downloading proofs.
- Enhanced DataTable initialization with dynamic filtering based on user selections.
- Added functionality for selecting/deselecting all rows and managing download button state.
- Implemented toast notifications for user feedback on actions.
- Improved styling for checkboxes and dropdown menus for better user experience.
This commit is contained in:
Sallu9007
2025-05-13 20:49:36 +05:30
parent 17ebb87bb7
commit aeeab52d6e
6 changed files with 1122 additions and 599 deletions

View File

@@ -0,0 +1,29 @@
@props(['columns' => []])
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" id="columnSelectorDropdown" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-columns me-1"></i> Customize Columns
</button>
<div class="dropdown-menu p-3 shadow-sm column-selector-dropdown" style="width: 320px;">
<h6 class="dropdown-header border-bottom pb-2 mb-2">Toggle Columns Visibility</h6>
<div class="row g-2">
@foreach($columns as $column)
<div class="col-6">
<div class="form-check form-switch">
<input class="form-check-input column-checkbox" type="checkbox" value="{{ $column['value'] }}" id="{{ $column['id'] }}" @checked($column['checked'] ?? false)>
<label class="form-check-label" for="{{ $column['id'] }}">{{ $column['label'] }}</label>
</div>
</div>
@endforeach
</div>
<div class="dropdown-divider my-2"></div>
<div class="d-flex justify-content-between">
<button id="select-all-columns" class="btn btn-sm btn-outline-danger" type="button">
<i class="fas fa-check-square me-1"></i> Select All
</button>
<button id="deselect-all-columns" class="btn btn-sm btn-outline-secondary" type="button">
<i class="fas fa-square me-1"></i> Deselect All
</button>
</div>
</div>
</div>