From ed8ab47bdd19143c884d5ecf9d977b280f587d3e Mon Sep 17 00:00:00 2001
From: t0is <tomaseisner69@gmail.com>
Date: Fri, 25 Apr 2025 15:01:38 +0200
Subject: [PATCH] has clips filter

---
 src/app/Http/Controllers/VideoController.php |  4 ++
 src/resources/js/Pages/Videos.tsx            | 48 +++++++++++++-------
 2 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/app/Http/Controllers/VideoController.php b/src/app/Http/Controllers/VideoController.php
index eae5a13..ae1dea1 100644
--- a/src/app/Http/Controllers/VideoController.php
+++ b/src/app/Http/Controllers/VideoController.php
@@ -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();
 
diff --git a/src/resources/js/Pages/Videos.tsx b/src/resources/js/Pages/Videos.tsx
index 77e8403..4ce0183 100644
--- a/src/resources/js/Pages/Videos.tsx
+++ b/src/resources/js/Pages/Videos.tsx
@@ -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>