Fix select and multi action buttons

This commit is contained in:
DariusIII
2026-02-20 09:26:21 +01:00
parent a2c4eb8dce
commit 40fbc0aacf
8 changed files with 29 additions and 21 deletions
+5 -5
View File
@@ -9,18 +9,18 @@
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.11",
"@tailwindcss/vite": "^4.1.18",
"@tailwindcss/vite": "^4.2.0",
"axios": "^1.13.5",
"lodash": "^4.17.23",
"npm-check-updates": "^19.3.2",
"npm-check-updates": "^19.4.1",
"prettier": "^3.8.1",
"tailwindcss": "^4.1.18",
"tailwindcss": "^4.2.0",
"vite": "^7.3",
"vue": "^3.5.27"
"vue": "^3.5.28"
},
"dependencies": {
"@alpinejs/csp": "^3.15.8",
"@fortawesome/fontawesome-free": "^7.1.0",
"@fortawesome/fontawesome-free": "^7.2.0",
"@melloware/coloris": "^0.25.0",
"@simonwep/pickr": "^1.9.1",
"chart.js": "^4.5.1",
@@ -86,6 +86,12 @@ Alpine.data('releaseMultiOps', () => ({
boxes.forEach(cb => { cb.checked = this.allChecked; });
},
onCheckboxChange() {
const boxes = document.querySelectorAll('.chkRelease');
const checked = document.querySelectorAll('.chkRelease:checked');
this.allChecked = boxes.length > 0 && checked.length === boxes.length;
},
_getSelected() {
return Array.from(document.querySelectorAll('.chkRelease:checked')).map(cb => cb.value);
},
+1
View File
@@ -33,6 +33,7 @@ const lazyComponentMap = {
'profilePage': () => import('./components/profile-edit.js'), // same file
'copyToClipboard': () => import('./components/profile-edit.js'), // same file
'cartPage': () => import('./components/cart-page.js'),
'releaseMultiOps': () => import('./components/cart-page.js'), // same file
'authPage': () => import('./components/auth-page.js'),
'otpInput': () => import('./components/auth-page.js'), // same file
+4 -4
View File
@@ -43,7 +43,7 @@
</div>
@if($results->count() > 0)
<form id="nzb_multi_operations_form" method="get">
<form id="nzb_multi_operations_form" method="get" x-data="releaseMultiOps">
<div class="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<!-- Left Section -->
@@ -113,7 +113,7 @@
<thead class="bg-gray-100 dark:bg-gray-800 dark:bg-gray-900">
<tr>
<th class="px-3 py-3 text-left">
<input type="checkbox" class="rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" id="chkSelectAll">
<input type="checkbox" class="rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" id="chkSelectAll" x-model="allChecked" @change="toggleAll()">
</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Name</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Category</th>
@@ -128,7 +128,7 @@
@foreach($results as $result)
<tr class="hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-700 transition">
<td class="px-3 py-4 whitespace-nowrap">
<input type="checkbox" class="chkRelease rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" name="release[]" value="{{ $result->guid }}">
<input type="checkbox" class="chkRelease rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" name="release[]" value="{{ $result->guid }}" @change="onCheckboxChange()">
</td>
<td class="px-3 py-4">
<div class="flex items-start">
@@ -278,7 +278,7 @@
@foreach($results as $result)
<div class="border border-gray-200 dark:border-gray-700 rounded-xl p-4 hover:shadow-md transition bg-white dark:bg-gray-800">
<div class="flex items-start gap-3">
<input type="checkbox" class="chkRelease rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:bg-gray-700 mt-1" name="release[]" value="{{ $result->guid }}">
<input type="checkbox" class="chkRelease rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:bg-gray-700 mt-1" name="release[]" value="{{ $result->guid }}" @change="onCheckboxChange()">
<div class="flex-1 min-w-0">
@php
$showThumbs = request()->query('thumbs', '0') === '1';
+4 -3
View File
@@ -31,7 +31,7 @@
@if(count($results) > 0)
<!-- Cart Items -->
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm">
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm" x-data="cartPage">
<div class="px-4 py-3 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
<h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">My Download Basket</h5>
<div class="flex items-center gap-2">
@@ -53,7 +53,7 @@
<tr>
<th class="px-4 py-3 text-left" style="width: 30px">
<label class="inline-flex items-center cursor-pointer">
<input id="check-all" type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 dark:focus:ring-blue-600 focus:ring-2">
<input id="check-all" type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 dark:focus:ring-blue-600 focus:ring-2" x-model="allChecked" @change="toggleAll()">
</label>
</th>
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-300">Name</th>
@@ -70,7 +70,8 @@
type="checkbox"
name="table_records"
class="cart-checkbox form-checkbox h-4 w-4 text-blue-600 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 dark:focus:ring-blue-600 focus:ring-2 cursor-pointer"
value="{{ $result->release->guid }}">
value="{{ $result->release->guid }}"
@change="onCheckboxChange()">
</td>
<td class="px-4 py-3">
<a href="{{ url('/details/' . $result->release->guid) }}"
+2 -2
View File
@@ -41,7 +41,7 @@
</div>
@if($results->count() > 0)
<form id="nzb_multi_operations_form" method="get">
<form id="nzb_multi_operations_form" method="get" x-data="releaseMultiOps">
<div class="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-b border-gray-200">
<div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
<!-- Left Section -->
@@ -176,7 +176,7 @@
{{ $release->searchname }}
</a>
<label class="inline-flex items-center flex-shrink-0">
<input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600" value="{{ $release->guid }}" id="chksingle"/>
<input type="checkbox" class="chkRelease form-checkbox h-4 w-4 text-blue-600" value="{{ $release->guid }}" name="release[]" @change="onCheckboxChange()"/>
</label>
</div>
+4 -4
View File
@@ -148,7 +148,7 @@
<!-- Search Results -->
@if(isset($results) && ((is_array($results) && count($results) > 0) || (is_object($results) && $results->count() > 0)))
<form id="nzb_multi_operations_form" method="get">
<form id="nzb_multi_operations_form" method="get" x-data="releaseMultiOps">
<!-- Multi-operations toolbar -->
<div class="mb-4 bg-gray-50 dark:bg-gray-900 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
@@ -193,7 +193,7 @@
<thead class="bg-gray-100 dark:bg-gray-900">
<tr>
<th class="px-3 py-3 text-left">
<input type="checkbox" class="rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" id="chkSelectAll">
<input type="checkbox" class="rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" id="chkSelectAll" x-model="allChecked" @change="toggleAll()">
</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Name</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Category</th>
@@ -208,7 +208,7 @@
@foreach($results as $result)
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition">
<td class="px-3 py-4 whitespace-nowrap">
<input type="checkbox" class="chkRelease rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" name="release[]" value="{{ $result->guid }}">
<input type="checkbox" class="chkRelease rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" name="release[]" value="{{ $result->guid }}" @change="onCheckboxChange()">
</td>
<td class="px-3 py-4">
<div class="flex-1">
@@ -346,7 +346,7 @@
@foreach($results as $result)
<div class="border border-gray-200 dark:border-gray-700 rounded-xl p-4 hover:shadow-md transition">
<div class="flex items-start gap-3">
<input type="checkbox" class="chkRelease rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700 mt-1" name="release[]" value="{{ $result->guid }}">
<input type="checkbox" class="chkRelease rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700 mt-1" name="release[]" value="{{ $result->guid }}" @change="onCheckboxChange()">
<div class="flex-1">
<div class="flex items-center gap-2 flex-wrap mb-2">
<a href="{{ url('/details/' . $result->guid) }}" class="text-lg font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 break-words break-all">
+3 -3
View File
@@ -199,7 +199,7 @@
<!-- Episodes by Season - Tabbed Interface -->
@if(!empty($seasons))
<form id="nzb_multi_operations_form" method="get">
<form id="nzb_multi_operations_form" method="get" x-data="releaseMultiOps">
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm" x-data="seasonSwitcher">
<div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
<div class="flex items-center justify-between">
@@ -229,7 +229,7 @@
<!-- Season Tabs -->
<div class="border-b border-gray-200">
<div class="flex items-center px-4 py-2 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
<input type="checkbox" class="rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700 mr-2" id="chkSelectAll">
<input type="checkbox" class="rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700 mr-2" id="chkSelectAll" x-model="allChecked" @change="toggleAll()">
<label for="chkSelectAll" class="text-sm text-gray-700 dark:text-gray-300 cursor-pointer">Select All</label>
</div>
<nav class="flex flex-wrap -mb-px px-4" aria-label="Tabs">
@@ -261,7 +261,7 @@
@foreach($releases as $release)
<div class="flex items-center gap-3 bg-gray-50 dark:bg-gray-900 rounded p-3 hover:bg-gray-100">
<div class="flex-shrink-0">
<input type="checkbox" class="chkRelease rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" name="release[]" value="{{ $release->guid }}">
<input type="checkbox" class="chkRelease rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" name="release[]" value="{{ $release->guid }}" @change="onCheckboxChange()">
</div>
<div class="flex-1">
<div class="flex items-center gap-2 flex-wrap">