Zmiany w modalach
This commit is contained in:
dm
@@ -1,146 +1,167 @@
|
||||
// src/islands/JamboxChannelsModal.jsx
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
import { useEffect, useMemo, useState } from "preact/hooks";
|
||||
import "../../styles/modal.css";
|
||||
import "../../styles/offers/offers-table.css";
|
||||
import "../../styles/channels-search.css"; // żeby input miał identyczny styl
|
||||
|
||||
export default function JamboxChannelsModal({ isOpen, onClose, pkg }) {
|
||||
const [channels, setChannels] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [channels, setChannels] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
const [query, setQuery] = useState("");
|
||||
const q = query.trim().toLowerCase();
|
||||
|
||||
const q = query.trim().toLowerCase();
|
||||
const filtered = !q
|
||||
? channels
|
||||
: channels.filter((ch) => (ch.name || "").toLowerCase().includes(q));
|
||||
|
||||
const filtered = !q
|
||||
? channels
|
||||
: channels.filter((ch) =>
|
||||
(ch.name || "").toLowerCase().includes(q)
|
||||
);
|
||||
const meta = useMemo(() => {
|
||||
if (loading) return "Ładowanie…";
|
||||
if (error) return error;
|
||||
if (!query.trim()) return `Wyniki: ${filtered.length} / ${channels.length}`;
|
||||
return `Wyniki: ${filtered.length} / ${channels.length}`;
|
||||
}, [loading, error, query, filtered.length, channels.length]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen || !pkg?.id) return;
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen || !pkg?.id) return;
|
||||
let cancelled = false;
|
||||
|
||||
let cancelled = false;
|
||||
async function loadChannels() {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
setChannels([]);
|
||||
setQuery("");
|
||||
|
||||
async function loadChannels() {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
setChannels([]);
|
||||
setQuery("");
|
||||
try {
|
||||
const params = new URLSearchParams({ packageId: String(pkg.id) });
|
||||
const res = await fetch(`/api/jambox/channels?${params.toString()}`);
|
||||
|
||||
try {
|
||||
const params = new URLSearchParams({ packageId: String(pkg.id) });
|
||||
const res = await fetch(`/api/jambox/channels?${params.toString()}`);
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(`HTTP ${res.status}`);
|
||||
}
|
||||
const json = await res.json();
|
||||
if (!cancelled) setChannels(Array.isArray(json.data) ? json.data : []);
|
||||
} catch (err) {
|
||||
console.error("❌ Błąd pobierania listy kanałów:", err);
|
||||
if (!cancelled) setError("Nie udało się załadować listy kanałów.");
|
||||
} finally {
|
||||
if (!cancelled) setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
const json = await res.json();
|
||||
if (!cancelled) {
|
||||
setChannels(Array.isArray(json.data) ? json.data : []);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("❌ Błąd pobierania listy kanałów:", err);
|
||||
if (!cancelled) {
|
||||
setError("Nie udało się załadować listy kanałów.");
|
||||
}
|
||||
} finally {
|
||||
if (!cancelled) setLoading(false);
|
||||
}
|
||||
}
|
||||
loadChannels();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [isOpen, pkg?.id]);
|
||||
|
||||
loadChannels();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [isOpen, pkg?.id]);
|
||||
if (!isOpen || !pkg) return null;
|
||||
|
||||
if (!isOpen || !pkg) return null;
|
||||
return (
|
||||
<div class="f-modal-overlay" onClick={onClose}>
|
||||
<button
|
||||
class="f-modal-close"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onClose();
|
||||
}}
|
||||
aria-label="Zamknij"
|
||||
type="button"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
|
||||
return (
|
||||
<div class="fuz-modal-overlay" onClick={onClose}>
|
||||
<button
|
||||
class="fuz-modal-close"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
<div
|
||||
class="f-modal-panel f-modal-panel--channels"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={`Kanały w pakiecie ${pkg.name}`}
|
||||
>
|
||||
<div class="max-w-8xl mx-auto px-3 md:px-6">
|
||||
<h2 class="f-modal-title">Kanały w pakiecie {pkg.name}</h2>
|
||||
|
||||
<div
|
||||
class="fuz-modal-panel fuz-modal-panel--channels"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div class="max-w-8xl mx-auto px-3 md:px-6">
|
||||
<h2 class="fuz-modal-title">Kanały w pakiecie {pkg.name}</h2>
|
||||
{/* INPUT jak w wyszukiwarce (z własnym X) */}
|
||||
<div class="f-chsearch__top">
|
||||
<div class="f-chsearch__inputwrap">
|
||||
<input
|
||||
class="f-chsearch__input"
|
||||
type="search"
|
||||
value={query}
|
||||
onInput={(e) => setQuery(e.currentTarget.value)}
|
||||
placeholder="Szukaj kanału po nazwie…"
|
||||
aria-label="Szukaj kanału po nazwie"
|
||||
/>
|
||||
|
||||
<div class="fuz-chsearch__top">
|
||||
<input
|
||||
class="fuz-chsearch__input"
|
||||
type="search"
|
||||
value={query}
|
||||
onInput={(e) => setQuery(e.currentTarget.value)}
|
||||
placeholder="Szukaj kanału po nazwie…"
|
||||
aria-label="Szukaj kanału po nazwie"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{!loading && !error && (
|
||||
<div class="jmb-search-meta">
|
||||
Wyniki: <strong>{filtered.length}</strong> / {channels.length}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading && <p>Ładowanie kanałów...</p>}
|
||||
{error && <p class="text-red-600">{error}</p>}
|
||||
|
||||
{!loading && !error && (
|
||||
<>
|
||||
{filtered.length === 0 ? (
|
||||
<p>Brak kanałów spełniających kryteria.</p>
|
||||
) : (
|
||||
<div class="">
|
||||
<div class="f-section-channel">
|
||||
{filtered.map((ch) => (
|
||||
<div
|
||||
class="jmb-channel-card"
|
||||
key={ch.number}
|
||||
onClick={(e) => {
|
||||
if (e.target.closest("a, button")) return;
|
||||
e.currentTarget.classList.toggle("is-flipped");
|
||||
}}
|
||||
>
|
||||
<div class="jmb-channel-inner">
|
||||
<div class="jmb-channel-face jmb-channel-front">
|
||||
{ch.logo_url && (
|
||||
<img src={ch.logo_url} alt={ch.name} class="jmb-channel-logo" loading="lazy" />
|
||||
)}
|
||||
<div class="jmb-channel-name">{ch.name}</div>
|
||||
<div class="jmb-channel-number">kanał {ch.number}</div>
|
||||
</div>
|
||||
|
||||
<div class="jmb-channel-face jmb-channel-back">
|
||||
<div class="jmb-channel-back-title">{ch.name}</div>
|
||||
<div
|
||||
class="jmb-channel-desc"
|
||||
dangerouslySetInnerHTML={{ __html: ch.description || "<em>Brak opisu kanału.</em>" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{query && (
|
||||
<button
|
||||
type="button"
|
||||
class="f-chsearch__clear"
|
||||
aria-label="Wyczyść wyszukiwanie"
|
||||
onClick={() => setQuery("")}
|
||||
onMouseDown={(e) => e.preventDefault()} // nie zabieraj focusa inputowi
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="f-chsearch__meta">{meta}</div>
|
||||
</div>
|
||||
|
||||
{loading && <p>Ładowanie kanałów...</p>}
|
||||
{error && !loading && <p class="text-red-600">{error}</p>}
|
||||
|
||||
{!loading && !error && (
|
||||
<>
|
||||
{filtered.length === 0 ? (
|
||||
<p>Brak kanałów spełniających kryteria.</p>
|
||||
) : (
|
||||
<div class="f-section-channel">
|
||||
{filtered.map((ch) => (
|
||||
<div
|
||||
class="jmb-channel-card"
|
||||
key={ch.number}
|
||||
onClick={(e) => {
|
||||
// żeby klik w link w opisie nie flipował
|
||||
if (e.target.closest("a, button")) return;
|
||||
e.currentTarget.classList.toggle("is-flipped");
|
||||
}}
|
||||
>
|
||||
<div class="jmb-channel-inner">
|
||||
{/* FRONT */}
|
||||
<div class="jmb-channel-face jmb-channel-front">
|
||||
{ch.logo_url && (
|
||||
<img
|
||||
src={ch.logo_url}
|
||||
alt={ch.name}
|
||||
class="jmb-channel-logo"
|
||||
loading="lazy"
|
||||
/>
|
||||
)}
|
||||
<div class="jmb-channel-name">{ch.name}</div>
|
||||
<div class="jmb-channel-number">kanał {ch.number}</div>
|
||||
</div>
|
||||
|
||||
{/* BACK */}
|
||||
<div class="jmb-channel-face jmb-channel-back">
|
||||
<div class="jmb-channel-back-title">{ch.name}</div>
|
||||
<div
|
||||
class="jmb-channel-desc"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: ch.description || "<em>Brak opisu kanału.</em>",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user