has clips filter
This commit is contained in:
parent
e2b548f0fe
commit
ed8ab47bdd
@ -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();
|
||||
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user