t0is/transcriptor-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

has clips filter

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/Http/Controllers/VideoController.php
View File

@ -37,6 +37,10 @@ class VideoController extends Controller
$query->whereBetween('external_date', [$request->input('start_date'), $request->input('end_date')]); $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) // Retrieve the videos (you can add pagination if desired)
$videos = $query->orderBy('external_date', 'desc')->get(); $videos = $query->orderBy('external_date', 'desc')->get();

48
src/resources/js/Pages/Videos.tsx
View File

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