has clips filter

This commit is contained in:
t0is 2025-04-25 15:01:38 +02:00
parent e2b548f0fe
commit ed8ab47bdd
2 changed files with 36 additions and 16 deletions

View File

@ -37,6 +37,10 @@ class VideoController extends Controller
$query->whereBetween('external_date', [$request->input('start_date'), $request->input('end_date')]);
}
if ($request->get('clipExists') === "true") {
$query->has('clips');
}
// Retrieve the videos (you can add pagination if desired)
$videos = $query->orderBy('external_date', 'desc')->get();

View File

@ -21,10 +21,12 @@ export default function Videos() {
// Filter states
const [selectedChannelIds, setSelectedChannelIds] = useState<string[]>([]);
const [selectedLanguages, setSelectedLanguages] = useState<string[]>([]);
const [clipExistsCheckbox, setClipExistsCheckbox] = useState<boolean>(false);
const [startDate, setStartDate] = useState<string>('');
const [endDate, setEndDate] = useState<string>('');
// (1) Initial fetch on mount to get all channels and compute distinct languages (runs only once)
useEffect(() => {
setLoadingChannels(true);
@ -64,7 +66,7 @@ export default function Videos() {
// Fetch clips when filters change (including videoId)
useEffect(() => {
setLoadingVideos(true);
const params: Record<string, string | string[]> = {};
const params: Record<string, string | string[] | boolean> = {};
if (selectedChannelIds.length > 0) {
params.channel_ids = selectedChannelIds.filter(id => id !== '');
@ -74,6 +76,7 @@ export default function Videos() {
}
if (startDate) params.start_date = startDate;
if (endDate) params.end_date = endDate;
params.clipExists = clipExistsCheckbox;
axios.get('/api/videos/get', { params })
.then(response => {
@ -84,7 +87,7 @@ export default function Videos() {
console.error('Error fetching clips:', error);
setLoadingVideos(false);
});
}, [selectedChannelIds, selectedLanguages, startDate, endDate]);
}, [selectedChannelIds, selectedLanguages, startDate, endDate, clipExistsCheckbox]);
return (
<AppLayout
@ -99,11 +102,11 @@ export default function Videos() {
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div className="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg p-6">
{/* Filter Options */}
<div className="mb-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
<div className="mb-6 grid grid-cols-1 sm:grid-cols-3 md:grid-cols-5 gap-4">
{/* Channel Filter */}
<div className="form-control">
<div className="form-control flex flex-col">
<label className="label">
<span className="label-text">Channel</span>
<span className="label-text pl-2">Channel</span>
</label>
{loadingChannels ? (
<span className="loading loading-dots loading-md"></span>
@ -120,9 +123,9 @@ export default function Videos() {
)}
</div>
{/* Language Filter */}
<div className="form-control">
<div className="form-control flex flex-col">
<label className="label">
<span className="label-text">Language</span>
<span className="label-text pl-2">Language</span>
</label>
{loadingChannels ? (
<span className="loading loading-dots loading-md"></span>
@ -138,10 +141,26 @@ export default function Videos() {
/>
)}
</div>
{/* Start Date Filter */}
<div className="form-control">
{/* Clip exists filter */}
<div className="flex flex-col">
<label className="label">
<span className="label-text">Start Date</span>
<span className="label-text pl-2">Has clips?</span>
</label>
{loadingChannels ? (
<span className="loading loading-dots loading-md"></span>
) : (
<input
type="checkbox"
className="checkbox checkbox-primary mt-3 ml-3"
checked={clipExistsCheckbox}
onChange={e => setClipExistsCheckbox(e.target.checked)}
/>
)}
</div>
{/* Start Date Filter */}
<div className="form-control flex flex-col">
<label className="label">
<span className="label-text pl-2">Start Date</span>
</label>
<input
type="date"
@ -151,9 +170,9 @@ export default function Videos() {
/>
</div>
{/* End Date Filter */}
<div className="form-control">
<div className="form-control flex flex-col">
<label className="label">
<span className="label-text">End Date</span>
<span className="label-text pl-2">End Date</span>
</label>
<input
type="date"
@ -162,13 +181,10 @@ export default function Videos() {
onChange={(e) => setEndDate(e.target.value)}
/>
</div>
<div>
</div>
</div>
<div className="overflow-x-auto">
<table className="table">
<table className="table">
{/* head */}
<thead>
<tr>