fix
This commit is contained in:
@@ -14,8 +14,9 @@ import {
|
|||||||
Textarea,
|
Textarea,
|
||||||
Modal,
|
Modal,
|
||||||
PageHeader,
|
PageHeader,
|
||||||
|
Switch,
|
||||||
} from "@/components/ui";
|
} from "@/components/ui";
|
||||||
import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons";
|
import { EditIcon, EyeIcon, PlusIcon, TrashIcon } from "@/components/icons";
|
||||||
import { MediaPreview } from "@/components/MediaPreview";
|
import { MediaPreview } from "@/components/MediaPreview";
|
||||||
import { pickUrl } from "@/lib/media";
|
import { pickUrl } from "@/lib/media";
|
||||||
import { toFa } from "@/lib/utils";
|
import { toFa } from "@/lib/utils";
|
||||||
@@ -29,6 +30,8 @@ interface Category {
|
|||||||
order?: number;
|
order?: number;
|
||||||
description?: string | null;
|
description?: string | null;
|
||||||
icon?: string | null;
|
icon?: string | null;
|
||||||
|
is_deeplink_only?: boolean;
|
||||||
|
deep_link?: string | null;
|
||||||
subcategories_count?: number;
|
subcategories_count?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -48,9 +51,16 @@ const ICON_KEYS = ["icon", "icon_url"];
|
|||||||
|
|
||||||
export default function CategoriesPage() {
|
export default function CategoriesPage() {
|
||||||
const [typeFilter, setTypeFilter] = useState<CategoryType>("media");
|
const [typeFilter, setTypeFilter] = useState<CategoryType>("media");
|
||||||
const { data, loading, error, reload } = useList<Category>("/categories", {
|
// Deep-link-only categories are hidden from the normal listing, so they need
|
||||||
type: typeFilter,
|
// their own view here — otherwise a category sent to deep links disappears
|
||||||
});
|
// from this page and can only be brought back from the deep-links screen.
|
||||||
|
const [showDeepLinks, setShowDeepLinks] = useState(false);
|
||||||
|
const { data, loading, error, reload } = useList<Category>(
|
||||||
|
"/categories",
|
||||||
|
// `deeplink_only` returns every hidden category regardless of type, so the
|
||||||
|
// type filter is not sent alongside it.
|
||||||
|
showDeepLinks ? { deeplink_only: 1 } : { type: typeFilter },
|
||||||
|
);
|
||||||
const toast = useToast();
|
const toast = useToast();
|
||||||
|
|
||||||
const [editing, setEditing] = useState<Category | null>(null);
|
const [editing, setEditing] = useState<Category | null>(null);
|
||||||
@@ -128,6 +138,25 @@ export default function CategoriesPage() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Move a category into or out of deep-link-only mode, both directions.
|
||||||
|
// Playlist categories live in music_categories, which has no such column.
|
||||||
|
async function toggleDeepLink(row: Category) {
|
||||||
|
try {
|
||||||
|
await apiFetch(`/categories/${row.id}`, {
|
||||||
|
method: "POST",
|
||||||
|
body: toFormData({ is_deeplink_only: row.is_deeplink_only ? 0 : 1 }),
|
||||||
|
});
|
||||||
|
toast.success(
|
||||||
|
row.is_deeplink_only
|
||||||
|
? "به فهرست عادی بازگشت."
|
||||||
|
: "به لینک مستقیم تبدیل شد.",
|
||||||
|
);
|
||||||
|
reload();
|
||||||
|
} catch (err) {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : "خطا در ذخیرهسازی");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
async function confirmDelete() {
|
async function confirmDelete() {
|
||||||
if (!deleting) return;
|
if (!deleting) return;
|
||||||
setRemoving(true);
|
setRemoving(true);
|
||||||
@@ -174,6 +203,25 @@ export default function CategoriesPage() {
|
|||||||
header: "توضیحات",
|
header: "توضیحات",
|
||||||
render: (r) => r.description || "—",
|
render: (r) => r.description || "—",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
key: "deep_link",
|
||||||
|
header: "لینک مستقیم",
|
||||||
|
className: "w-56",
|
||||||
|
render: (r) =>
|
||||||
|
r.is_deeplink_only ? (
|
||||||
|
<a
|
||||||
|
href={r.deep_link ?? undefined}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
dir="ltr"
|
||||||
|
className="inline-block max-w-[200px] truncate text-xs text-primary underline"
|
||||||
|
>
|
||||||
|
{r.deep_link ?? "—"}
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
<span className="text-xs text-muted">—</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
key: "subcategories_count",
|
key: "subcategories_count",
|
||||||
header: "زیردستهها",
|
header: "زیردستهها",
|
||||||
@@ -189,11 +237,17 @@ export default function CategoriesPage() {
|
|||||||
subtitle="مدیریت دستهبندیهای عمومی رسانه، پلیلیست و قالب تنفس"
|
subtitle="مدیریت دستهبندیهای عمومی رسانه، پلیلیست و قالب تنفس"
|
||||||
action={
|
action={
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
|
<Switch
|
||||||
|
checked={showDeepLinks}
|
||||||
|
onChange={setShowDeepLinks}
|
||||||
|
label="فقط لینکهای مستقیم"
|
||||||
|
/>
|
||||||
<Select
|
<Select
|
||||||
value={typeFilter}
|
value={typeFilter}
|
||||||
onChange={(e) => setTypeFilter(e.target.value as CategoryType)}
|
onChange={(e) => setTypeFilter(e.target.value as CategoryType)}
|
||||||
aria-label="نوع دستهبندی"
|
aria-label="نوع دستهبندی"
|
||||||
className="w-40"
|
className="w-40"
|
||||||
|
disabled={showDeepLinks}
|
||||||
>
|
>
|
||||||
{TYPE_OPTIONS.map((o) => (
|
{TYPE_OPTIONS.map((o) => (
|
||||||
<option key={o.value} value={o.value}>
|
<option key={o.value} value={o.value}>
|
||||||
@@ -214,7 +268,11 @@ export default function CategoriesPage() {
|
|||||||
loading={loading}
|
loading={loading}
|
||||||
error={error}
|
error={error}
|
||||||
onRetry={reload}
|
onRetry={reload}
|
||||||
emptyMessage="هنوز دستهبندیای ثبت نشده است. اولین دستهبندی را بسازید."
|
emptyMessage={
|
||||||
|
showDeepLinks
|
||||||
|
? "هیچ دستهبندی لینک مستقیمی وجود ندارد."
|
||||||
|
: "هنوز دستهبندیای ثبت نشده است. اولین دستهبندی را بسازید."
|
||||||
|
}
|
||||||
emptyAction={
|
emptyAction={
|
||||||
<Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}>
|
<Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}>
|
||||||
دستهبندی جدید
|
دستهبندی جدید
|
||||||
@@ -225,6 +283,25 @@ export default function CategoriesPage() {
|
|||||||
<Button variant="ghost" onClick={() => openEdit(row)} aria-label="ویرایش">
|
<Button variant="ghost" onClick={() => openEdit(row)} aria-label="ویرایش">
|
||||||
<EditIcon className="h-4 w-4" />
|
<EditIcon className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
|
{row.type !== "playlist" && (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => toggleDeepLink(row)}
|
||||||
|
aria-label={
|
||||||
|
row.is_deeplink_only
|
||||||
|
? "بازگرداندن به فهرست"
|
||||||
|
: "تبدیل به لینک مستقیم"
|
||||||
|
}
|
||||||
|
title={
|
||||||
|
row.is_deeplink_only
|
||||||
|
? "بازگرداندن به فهرست"
|
||||||
|
: "تبدیل به لینک مستقیم"
|
||||||
|
}
|
||||||
|
className={row.is_deeplink_only ? "text-primary" : undefined}
|
||||||
|
>
|
||||||
|
<EyeIcon className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
onClick={() => setDeleting(row)}
|
onClick={() => setDeleting(row)}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState } from "react";
|
import { useCallback, useState } from "react";
|
||||||
import { apiFetch, ApiError, toFormData } from "@/lib/api";
|
import { apiFetch, ApiError, toFormData } from "@/lib/api";
|
||||||
import { useList } from "@/lib/useResource";
|
import { useList } from "@/lib/useResource";
|
||||||
import { useToast } from "@/components/toast";
|
import { useToast } from "@/components/toast";
|
||||||
@@ -15,7 +15,7 @@ import {
|
|||||||
Select,
|
Select,
|
||||||
Textarea,
|
Textarea,
|
||||||
} from "@/components/ui";
|
} from "@/components/ui";
|
||||||
import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons";
|
import { EditIcon, EyeIcon, PlusIcon, TrashIcon } from "@/components/icons";
|
||||||
import { MediaPreview } from "@/components/MediaPreview";
|
import { MediaPreview } from "@/components/MediaPreview";
|
||||||
import { pickUrl } from "@/lib/media";
|
import { pickUrl } from "@/lib/media";
|
||||||
import { toFa } from "@/lib/utils";
|
import { toFa } from "@/lib/utils";
|
||||||
@@ -36,19 +36,40 @@ interface Category {
|
|||||||
const ICON_KEYS = ["icon", "icon_url"];
|
const ICON_KEYS = ["icon", "icon_url"];
|
||||||
|
|
||||||
export default function CategoryDeepLinksPage() {
|
export default function CategoryDeepLinksPage() {
|
||||||
const { data, loading, error, reload } = useList<Category>("/categories", {
|
const { data, loading, error, reload: reloadHidden } = useList<Category>(
|
||||||
deeplink_only: 1,
|
"/categories",
|
||||||
});
|
{ deeplink_only: 1 },
|
||||||
const { data: allCategories, loading: allLoading } =
|
);
|
||||||
useList<Category>("/categories");
|
// The "use an existing category" picker. /categories only lists visible ones,
|
||||||
|
// so it must be refetched on every toggle — otherwise a just-unhidden
|
||||||
|
// category is missing from the picker until a full page reload.
|
||||||
|
const {
|
||||||
|
data: allSelectable,
|
||||||
|
loading: allLoading,
|
||||||
|
reload: reloadAll,
|
||||||
|
} = useList<Category>("/categories");
|
||||||
const toast = useToast();
|
const toast = useToast();
|
||||||
|
|
||||||
|
// Only rows from the `categories` table can be toggled — /categories with no
|
||||||
|
// type also folds in music (playlist) categories, whose IDs belong to another
|
||||||
|
// table and which have no deep-link column.
|
||||||
|
const allCategories = allSelectable.filter((c) => c.type !== "playlist");
|
||||||
|
|
||||||
|
// Both lists change together on every toggle.
|
||||||
|
const reload = useCallback(() => {
|
||||||
|
reloadHidden();
|
||||||
|
reloadAll();
|
||||||
|
}, [reloadHidden, reloadAll]);
|
||||||
|
|
||||||
|
// Non-null while the modal edits an existing row (null = create).
|
||||||
const [editing, setEditing] = useState<Category | null>(null);
|
const [editing, setEditing] = useState<Category | null>(null);
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const [saving, setSaving] = useState(false);
|
const [saving, setSaving] = useState(false);
|
||||||
|
|
||||||
// Source: 'new' (create a hidden category) or 'existing' (pick existing to hide).
|
// Source: 'existing' (pick an existing category to hide — the common case,
|
||||||
const [source, setSource] = useState<"new" | "existing">("new");
|
// and it avoids the "name already taken" error you get from re-creating one)
|
||||||
|
// or 'new' (create a fresh hidden category).
|
||||||
|
const [source, setSource] = useState<"new" | "existing">("existing");
|
||||||
const [existingId, setExistingId] = useState<string>("");
|
const [existingId, setExistingId] = useState<string>("");
|
||||||
|
|
||||||
// Fields for creating a new hidden category.
|
// Fields for creating a new hidden category.
|
||||||
@@ -62,7 +83,7 @@ export default function CategoryDeepLinksPage() {
|
|||||||
const [removing, setRemoving] = useState(false);
|
const [removing, setRemoving] = useState(false);
|
||||||
|
|
||||||
function resetForm() {
|
function resetForm() {
|
||||||
setSource("new");
|
setSource("existing");
|
||||||
setExistingId("");
|
setExistingId("");
|
||||||
setName("");
|
setName("");
|
||||||
setType("media");
|
setType("media");
|
||||||
@@ -77,19 +98,26 @@ export default function CategoryDeepLinksPage() {
|
|||||||
setOpen(true);
|
setOpen(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function toggleHidden(row: Category) {
|
function openEdit(row: Category) {
|
||||||
|
setEditing(row);
|
||||||
|
setSource("new"); // the edit form always shows the category fields
|
||||||
|
setExistingId("");
|
||||||
|
setName(row.name ?? "");
|
||||||
|
setType(row.type ?? "media");
|
||||||
|
setOrder(row.order != null ? String(row.order) : "0");
|
||||||
|
setDescription(row.description ?? "");
|
||||||
|
setIcon(null);
|
||||||
|
setOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Take a category back out of deep-link-only mode (it returns to the lists).
|
||||||
|
async function unhide(row: Category) {
|
||||||
try {
|
try {
|
||||||
await apiFetch(`/categories/${row.id}`, {
|
await apiFetch(`/categories/${row.id}`, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: toFormData({
|
body: toFormData({ is_deeplink_only: 0 }),
|
||||||
is_deeplink_only: !row.is_deeplink_only ? 1 : 0,
|
|
||||||
}),
|
|
||||||
});
|
});
|
||||||
toast.success(
|
toast.success("از لینک مستقیم خارج شد.");
|
||||||
row.is_deeplink_only
|
|
||||||
? "از لینک مستقیم خارج شد."
|
|
||||||
: "به لینک مستقیم تبدیل شد.",
|
|
||||||
);
|
|
||||||
reload();
|
reload();
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
toast.error(err instanceof ApiError ? err.message : "خطا در ذخیرهسازی");
|
toast.error(err instanceof ApiError ? err.message : "خطا در ذخیرهسازی");
|
||||||
@@ -101,13 +129,13 @@ export default function CategoryDeepLinksPage() {
|
|||||||
setSaving(true);
|
setSaving(true);
|
||||||
try {
|
try {
|
||||||
if (editing) {
|
if (editing) {
|
||||||
setOpen(false);
|
// Edit an existing deep-link category. It stays deeplink-only.
|
||||||
reload();
|
await apiFetch(`/categories/${editing.id}`, {
|
||||||
|
method: "POST",
|
||||||
|
body: toFormData({ name, type, order, description, icon }),
|
||||||
|
});
|
||||||
toast.success("لینک مستقیم بهروزرسانی شد.");
|
toast.success("لینک مستقیم بهروزرسانی شد.");
|
||||||
return;
|
} else if (source === "existing") {
|
||||||
}
|
|
||||||
|
|
||||||
if (source === "existing") {
|
|
||||||
if (!existingId) {
|
if (!existingId) {
|
||||||
toast.error("دستهبندی را انتخاب کنید.");
|
toast.error("دستهبندی را انتخاب کنید.");
|
||||||
return;
|
return;
|
||||||
@@ -228,12 +256,16 @@ export default function CategoryDeepLinksPage() {
|
|||||||
}
|
}
|
||||||
actions={(row) => (
|
actions={(row) => (
|
||||||
<>
|
<>
|
||||||
|
<Button variant="ghost" onClick={() => openEdit(row)} aria-label="ویرایش">
|
||||||
|
<EditIcon className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
onClick={() => toggleHidden(row)}
|
onClick={() => unhide(row)}
|
||||||
aria-label="نمایش در فهرست"
|
aria-label="نمایش در فهرست"
|
||||||
|
title="نمایش در فهرست"
|
||||||
>
|
>
|
||||||
<EditIcon className="h-4 w-4" />
|
<EyeIcon className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
@@ -250,7 +282,9 @@ export default function CategoryDeepLinksPage() {
|
|||||||
<Modal
|
<Modal
|
||||||
open={open}
|
open={open}
|
||||||
onClose={() => setOpen(false)}
|
onClose={() => setOpen(false)}
|
||||||
title="لینک مستقیم دستهبندی جدید"
|
title={
|
||||||
|
editing ? "ویرایش لینک مستقیم دستهبندی" : "لینک مستقیم دستهبندی جدید"
|
||||||
|
}
|
||||||
footer={
|
footer={
|
||||||
<>
|
<>
|
||||||
<Button variant="secondary" onClick={() => setOpen(false)}>
|
<Button variant="secondary" onClick={() => setOpen(false)}>
|
||||||
@@ -267,15 +301,17 @@ export default function CategoryDeepLinksPage() {
|
|||||||
onSubmit={save}
|
onSubmit={save}
|
||||||
className="flex flex-col gap-4"
|
className="flex flex-col gap-4"
|
||||||
>
|
>
|
||||||
<Field label="منبع دستهبندی" required>
|
{!editing && (
|
||||||
<Select
|
<Field label="منبع دستهبندی" required>
|
||||||
value={source}
|
<Select
|
||||||
onChange={(e) => setSource(e.target.value as "new" | "existing")}
|
value={source}
|
||||||
>
|
onChange={(e) => setSource(e.target.value as "new" | "existing")}
|
||||||
<option value="new">ساخت دستهبندی جدید</option>
|
>
|
||||||
<option value="existing">استفاده از دستهبندی موجود</option>
|
<option value="new">ساخت دستهبندی جدید</option>
|
||||||
</Select>
|
<option value="existing">استفاده از دستهبندی موجود</option>
|
||||||
</Field>
|
</Select>
|
||||||
|
</Field>
|
||||||
|
)}
|
||||||
|
|
||||||
{source === "existing" ? (
|
{source === "existing" ? (
|
||||||
<Field label="انتخاب دستهبندی" required>
|
<Field label="انتخاب دستهبندی" required>
|
||||||
@@ -309,13 +345,14 @@ export default function CategoryDeepLinksPage() {
|
|||||||
/>
|
/>
|
||||||
</Field>
|
</Field>
|
||||||
|
|
||||||
|
{/* No playlist option: playlist categories live in the
|
||||||
|
music_categories table, which has no deep-link column. */}
|
||||||
<Field label="نوع">
|
<Field label="نوع">
|
||||||
<Select
|
<Select
|
||||||
value={type}
|
value={type}
|
||||||
onChange={(e) => setType(e.target.value)}
|
onChange={(e) => setType(e.target.value)}
|
||||||
>
|
>
|
||||||
<option value="media">رسانه</option>
|
<option value="media">رسانه</option>
|
||||||
<option value="playlist">پلیلیست</option>
|
|
||||||
<option value="breathing_template">قالب تنفس</option>
|
<option value="breathing_template">قالب تنفس</option>
|
||||||
</Select>
|
</Select>
|
||||||
</Field>
|
</Field>
|
||||||
@@ -337,7 +374,7 @@ export default function CategoryDeepLinksPage() {
|
|||||||
/>
|
/>
|
||||||
</Field>
|
</Field>
|
||||||
|
|
||||||
<Field label="آیکن">
|
<Field label={editing ? "آیکن (در صورت تغییر)" : "آیکن"}>
|
||||||
<Input
|
<Input
|
||||||
type="file"
|
type="file"
|
||||||
accept="image/*"
|
accept="image/*"
|
||||||
@@ -348,8 +385,18 @@ export default function CategoryDeepLinksPage() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
<p className="rounded-xl border border-border bg-surface-muted p-3 text-xs text-muted">
|
<p className="rounded-xl border border-border bg-surface-muted p-3 text-xs text-muted">
|
||||||
پس از ذخیره، این دستهبندی در فهرست نمایش داده نمیشود و فقط با لینک
|
{editing ? (
|
||||||
مستقیم قابل دسترسی است.
|
<>
|
||||||
|
این دستهبندی در فهرست نمایش داده نمیشود و فقط با لینک مستقیم قابل
|
||||||
|
دسترسی است. برای بازگرداندن آن به فهرست، از دکمه «نمایش در فهرست»
|
||||||
|
استفاده کنید.
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
پس از ذخیره، این دستهبندی در فهرست نمایش داده نمیشود و فقط با لینک
|
||||||
|
مستقیم قابل دسترسی است.
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</p>
|
</p>
|
||||||
</form>
|
</form>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState } from "react";
|
import { useCallback, useState } from "react";
|
||||||
import { apiFetch, ApiError, toFormData } from "@/lib/api";
|
import { apiFetch, ApiError, toFormData } from "@/lib/api";
|
||||||
import { useList } from "@/lib/useResource";
|
import { useList } from "@/lib/useResource";
|
||||||
import { useToast } from "@/components/toast";
|
import { useToast } from "@/components/toast";
|
||||||
@@ -14,10 +14,8 @@ import {
|
|||||||
PageHeader,
|
PageHeader,
|
||||||
Select,
|
Select,
|
||||||
Textarea,
|
Textarea,
|
||||||
Badge,
|
|
||||||
Switch,
|
|
||||||
} from "@/components/ui";
|
} from "@/components/ui";
|
||||||
import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons";
|
import { EditIcon, EyeIcon, PlusIcon, TrashIcon } from "@/components/icons";
|
||||||
import { MediaPreview } from "@/components/MediaPreview";
|
import { MediaPreview } from "@/components/MediaPreview";
|
||||||
import { ImagePicker } from "@/components/ImagePicker";
|
import { ImagePicker } from "@/components/ImagePicker";
|
||||||
import { pickUrl, SOUND_KEYS, VIDEO_KEYS, IMAGE_KEYS } from "@/lib/media";
|
import { pickUrl, SOUND_KEYS, VIDEO_KEYS, IMAGE_KEYS } from "@/lib/media";
|
||||||
@@ -70,14 +68,27 @@ function DeepLink({ deep_link }: { deep_link?: string | null }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function MediaDeepLinksPage() {
|
export default function MediaDeepLinksPage() {
|
||||||
const { data, loading, error, reload } = useList<Media>("/media", {
|
const { data, loading, error, reload: reloadHidden } = useList<Media>(
|
||||||
deeplink_only: 1,
|
"/media",
|
||||||
});
|
{ deeplink_only: 1 },
|
||||||
const { data: allMedia, loading: allLoading } = useList<Media>("/media", {
|
);
|
||||||
count: 500,
|
// The "use an existing media" picker. /media only lists visible media, so it
|
||||||
});
|
// must be refetched whenever a media moves in or out of deep-link mode —
|
||||||
|
// otherwise a just-unhidden media is missing from the picker until a reload.
|
||||||
|
const {
|
||||||
|
data: allMedia,
|
||||||
|
loading: allLoading,
|
||||||
|
reload: reloadAll,
|
||||||
|
} = useList<Media>("/media", { count: 500 });
|
||||||
const toast = useToast();
|
const toast = useToast();
|
||||||
|
|
||||||
|
// Both lists change together on every toggle.
|
||||||
|
const reload = useCallback(() => {
|
||||||
|
reloadHidden();
|
||||||
|
reloadAll();
|
||||||
|
}, [reloadHidden, reloadAll]);
|
||||||
|
|
||||||
|
// Non-null while the modal edits an existing row (null = create).
|
||||||
const [editing, setEditing] = useState<Media | null>(null);
|
const [editing, setEditing] = useState<Media | null>(null);
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const [saving, setSaving] = useState(false);
|
const [saving, setSaving] = useState(false);
|
||||||
@@ -118,17 +129,29 @@ export default function MediaDeepLinksPage() {
|
|||||||
setOpen(true);
|
setOpen(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function toggleHidden(row: Media) {
|
function openEdit(row: Media) {
|
||||||
|
setEditing(row);
|
||||||
|
setSource("new"); // the edit form always shows the media fields
|
||||||
|
setExistingId("");
|
||||||
|
setTitle(row.title ?? "");
|
||||||
|
setCaption(row.caption ?? "");
|
||||||
|
setType(row.type ?? "audio");
|
||||||
|
setDuration(row.duration != null ? String(row.duration) : "");
|
||||||
|
setFile(null);
|
||||||
|
setExternalUrl(row.external_url ?? "");
|
||||||
|
setImageId(row.image_id ?? null);
|
||||||
|
setImageFile(null);
|
||||||
|
setOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Take a media back out of deep-link-only mode (it returns to the lists).
|
||||||
|
async function unhide(row: Media) {
|
||||||
try {
|
try {
|
||||||
await apiFetch(`/media/${row.id}`, {
|
await apiFetch(`/media/${row.id}`, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: toFormData({
|
body: toFormData({ is_deeplink_only: 0 }),
|
||||||
is_deeplink_only: !row.is_deeplink_only ? 1 : 0,
|
|
||||||
}),
|
|
||||||
});
|
});
|
||||||
toast.success(
|
toast.success("از لینک مستقیم خارج شد.");
|
||||||
row.is_deeplink_only ? "از لینک مستقیم خارج شد." : "به لینک مستقیم تبدیل شد.",
|
|
||||||
);
|
|
||||||
reload();
|
reload();
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
toast.error(err instanceof ApiError ? err.message : "خطا در ذخیرهسازی");
|
toast.error(err instanceof ApiError ? err.message : "خطا در ذخیرهسازی");
|
||||||
@@ -140,13 +163,20 @@ export default function MediaDeepLinksPage() {
|
|||||||
setSaving(true);
|
setSaving(true);
|
||||||
try {
|
try {
|
||||||
if (editing) {
|
if (editing) {
|
||||||
setOpen(false);
|
// Edit an existing deep-link media. It stays deeplink-only.
|
||||||
reload();
|
const body = toFormData({
|
||||||
|
title,
|
||||||
|
caption,
|
||||||
|
type,
|
||||||
|
duration,
|
||||||
|
file,
|
||||||
|
external_url: externalUrl,
|
||||||
|
image_id: imageId,
|
||||||
|
image: imageFile,
|
||||||
|
});
|
||||||
|
await apiFetch(`/media/${editing.id}`, { method: "POST", body });
|
||||||
toast.success("لینک مستقیم بهروزرسانی شد.");
|
toast.success("لینک مستقیم بهروزرسانی شد.");
|
||||||
return;
|
} else if (source === "existing") {
|
||||||
}
|
|
||||||
|
|
||||||
if (source === "existing") {
|
|
||||||
// Toggle the chosen existing media to deeplink-only.
|
// Toggle the chosen existing media to deeplink-only.
|
||||||
if (!existingId) {
|
if (!existingId) {
|
||||||
toast.error("رسانهای را انتخاب کنید.");
|
toast.error("رسانهای را انتخاب کنید.");
|
||||||
@@ -256,12 +286,16 @@ export default function MediaDeepLinksPage() {
|
|||||||
}
|
}
|
||||||
actions={(row) => (
|
actions={(row) => (
|
||||||
<>
|
<>
|
||||||
|
<Button variant="ghost" onClick={() => openEdit(row)} aria-label="ویرایش">
|
||||||
|
<EditIcon className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
onClick={() => toggleHidden(row)}
|
onClick={() => unhide(row)}
|
||||||
aria-label="نمایش در فهرست"
|
aria-label="نمایش در فهرست"
|
||||||
|
title="نمایش در فهرست"
|
||||||
>
|
>
|
||||||
<EditIcon className="h-4 w-4" />
|
<EyeIcon className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
@@ -278,7 +312,7 @@ export default function MediaDeepLinksPage() {
|
|||||||
<Modal
|
<Modal
|
||||||
open={open}
|
open={open}
|
||||||
onClose={() => setOpen(false)}
|
onClose={() => setOpen(false)}
|
||||||
title="لینک مستقیم رسانه جدید"
|
title={editing ? "ویرایش لینک مستقیم رسانه" : "لینک مستقیم رسانه جدید"}
|
||||||
footer={
|
footer={
|
||||||
<>
|
<>
|
||||||
<Button variant="secondary" onClick={() => setOpen(false)}>
|
<Button variant="secondary" onClick={() => setOpen(false)}>
|
||||||
@@ -295,15 +329,17 @@ export default function MediaDeepLinksPage() {
|
|||||||
onSubmit={save}
|
onSubmit={save}
|
||||||
className="flex flex-col gap-4"
|
className="flex flex-col gap-4"
|
||||||
>
|
>
|
||||||
<Field label="منبع رسانه" required>
|
{!editing && (
|
||||||
<Select
|
<Field label="منبع رسانه" required>
|
||||||
value={source}
|
<Select
|
||||||
onChange={(e) => setSource(e.target.value as "new" | "existing")}
|
value={source}
|
||||||
>
|
onChange={(e) => setSource(e.target.value as "new" | "existing")}
|
||||||
<option value="new">بارگذاری رسانه جدید</option>
|
>
|
||||||
<option value="existing">استفاده از رسانه موجود</option>
|
<option value="new">بارگذاری رسانه جدید</option>
|
||||||
</Select>
|
<option value="existing">استفاده از رسانه موجود</option>
|
||||||
</Field>
|
</Select>
|
||||||
|
</Field>
|
||||||
|
)}
|
||||||
|
|
||||||
{source === "existing" ? (
|
{source === "existing" ? (
|
||||||
<Field label="انتخاب رسانه" required>
|
<Field label="انتخاب رسانه" required>
|
||||||
@@ -348,6 +384,7 @@ export default function MediaDeepLinksPage() {
|
|||||||
onPickId={setImageId}
|
onPickId={setImageId}
|
||||||
file={imageFile}
|
file={imageFile}
|
||||||
onPickFile={setImageFile}
|
onPickFile={setImageFile}
|
||||||
|
existingUrl={editing ? pickUrl(editing, IMAGE_KEYS) : null}
|
||||||
/>
|
/>
|
||||||
</Field>
|
</Field>
|
||||||
|
|
||||||
@@ -358,7 +395,10 @@ export default function MediaDeepLinksPage() {
|
|||||||
</Select>
|
</Select>
|
||||||
</Field>
|
</Field>
|
||||||
|
|
||||||
<Field label="فایل" hint="بارگذاری فایل یا وارد کردن لینک خارجی">
|
<Field
|
||||||
|
label={editing ? "فایل (در صورت تغییر)" : "فایل"}
|
||||||
|
hint="بارگذاری فایل یا وارد کردن لینک خارجی"
|
||||||
|
>
|
||||||
<Input
|
<Input
|
||||||
type="file"
|
type="file"
|
||||||
accept="audio/*,video/*"
|
accept="audio/*,video/*"
|
||||||
@@ -392,8 +432,18 @@ export default function MediaDeepLinksPage() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
<p className="rounded-xl border border-border bg-surface-muted p-3 text-xs text-muted">
|
<p className="rounded-xl border border-border bg-surface-muted p-3 text-xs text-muted">
|
||||||
پس از ذخیره، این رسانه در فهرست «رسانهها» نمایش داده نمیشود و فقط با لینک
|
{editing ? (
|
||||||
مستقیم قابل دسترسی است.
|
<>
|
||||||
|
این رسانه در فهرست «رسانهها» نمایش داده نمیشود و فقط با لینک مستقیم
|
||||||
|
قابل دسترسی است. برای بازگرداندن آن به فهرست، از دکمه «نمایش در فهرست»
|
||||||
|
استفاده کنید.
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
پس از ذخیره، این رسانه در فهرست «رسانهها» نمایش داده نمیشود و فقط با
|
||||||
|
لینک مستقیم قابل دسترسی است.
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</p>
|
</p>
|
||||||
</form>
|
</form>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ import {
|
|||||||
PageHeader,
|
PageHeader,
|
||||||
Badge,
|
Badge,
|
||||||
} from "@/components/ui";
|
} from "@/components/ui";
|
||||||
import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons";
|
import { EditIcon, EyeIcon, PlusIcon, TrashIcon } from "@/components/icons";
|
||||||
import { formatMinutes, fileNameToTitle } from "@/lib/utils";
|
import { formatMinutes, fileNameToTitle } from "@/lib/utils";
|
||||||
import { MediaPreview } from "@/components/MediaPreview";
|
import { MediaPreview } from "@/components/MediaPreview";
|
||||||
import { ImagePicker } from "@/components/ImagePicker";
|
import { ImagePicker } from "@/components/ImagePicker";
|
||||||
@@ -42,6 +42,8 @@ interface Media {
|
|||||||
duration?: number;
|
duration?: number;
|
||||||
visibility?: string;
|
visibility?: string;
|
||||||
is_premium?: boolean;
|
is_premium?: boolean;
|
||||||
|
is_deeplink_only?: boolean;
|
||||||
|
deep_link?: string | null;
|
||||||
external_url?: string | null;
|
external_url?: string | null;
|
||||||
image_id?: number | null;
|
image_id?: number | null;
|
||||||
image?: unknown;
|
image?: unknown;
|
||||||
@@ -86,7 +88,13 @@ function ChipMultiSelect({
|
|||||||
|
|
||||||
export default function MediaPage() {
|
export default function MediaPage() {
|
||||||
const [search, setSearch] = useState("");
|
const [search, setSearch] = useState("");
|
||||||
const { data, loading, error, reload } = useList<Media>("/media", { search });
|
// Deep-link-only media is hidden from the normal listing, so it needs its own
|
||||||
|
// view here — otherwise media sent to deep links disappears from this page.
|
||||||
|
const [showDeepLinks, setShowDeepLinks] = useState(false);
|
||||||
|
const { data, loading, error, reload } = useList<Media>(
|
||||||
|
"/media",
|
||||||
|
showDeepLinks ? { deeplink_only: 1 } : { search },
|
||||||
|
);
|
||||||
const { data: categories } = useList<Category>("/categories", {
|
const { data: categories } = useList<Category>("/categories", {
|
||||||
type: "media",
|
type: "media",
|
||||||
});
|
});
|
||||||
@@ -203,6 +211,24 @@ export default function MediaPage() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Move a media into or out of deep-link-only mode, both directions.
|
||||||
|
async function toggleDeepLink(row: Media) {
|
||||||
|
try {
|
||||||
|
await apiFetch(`/media/${row.id}`, {
|
||||||
|
method: "POST",
|
||||||
|
body: toFormData({ is_deeplink_only: row.is_deeplink_only ? 0 : 1 }),
|
||||||
|
});
|
||||||
|
toast.success(
|
||||||
|
row.is_deeplink_only
|
||||||
|
? "به فهرست عادی بازگشت."
|
||||||
|
: "به لینک مستقیم تبدیل شد.",
|
||||||
|
);
|
||||||
|
reload();
|
||||||
|
} catch (err) {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : "خطا در ذخیرهسازی");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
async function confirmDelete() {
|
async function confirmDelete() {
|
||||||
if (!deleting) return;
|
if (!deleting) return;
|
||||||
setRemoving(true);
|
setRemoving(true);
|
||||||
@@ -258,6 +284,25 @@ export default function MediaPage() {
|
|||||||
header: "مدت",
|
header: "مدت",
|
||||||
render: (r) => formatMinutes(r.duration),
|
render: (r) => formatMinutes(r.duration),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
key: "deep_link",
|
||||||
|
header: "لینک مستقیم",
|
||||||
|
className: "w-56",
|
||||||
|
render: (r) =>
|
||||||
|
r.is_deeplink_only ? (
|
||||||
|
<a
|
||||||
|
href={r.deep_link ?? undefined}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
dir="ltr"
|
||||||
|
className="inline-block max-w-[200px] truncate text-xs text-primary underline"
|
||||||
|
>
|
||||||
|
{r.deep_link ?? "—"}
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
<span className="text-xs text-muted">—</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
key: "is_premium",
|
key: "is_premium",
|
||||||
header: "ویژه",
|
header: "ویژه",
|
||||||
@@ -282,11 +327,19 @@ export default function MediaPage() {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="mb-4 max-w-sm">
|
<div className="mb-4 flex items-center gap-4">
|
||||||
<Input
|
<div className="max-w-sm flex-1">
|
||||||
value={search}
|
<Input
|
||||||
onChange={(e) => setSearch(e.target.value)}
|
value={search}
|
||||||
placeholder="جستجو در رسانهها..."
|
onChange={(e) => setSearch(e.target.value)}
|
||||||
|
placeholder="جستجو در رسانهها..."
|
||||||
|
disabled={showDeepLinks}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Switch
|
||||||
|
checked={showDeepLinks}
|
||||||
|
onChange={setShowDeepLinks}
|
||||||
|
label="فقط لینکهای مستقیم"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -296,7 +349,11 @@ export default function MediaPage() {
|
|||||||
loading={loading}
|
loading={loading}
|
||||||
error={error}
|
error={error}
|
||||||
onRetry={reload}
|
onRetry={reload}
|
||||||
emptyMessage="هنوز رسانهای اضافه نکردهاید. اولین رسانه را بارگذاری کنید."
|
emptyMessage={
|
||||||
|
showDeepLinks
|
||||||
|
? "هیچ رسانه لینک مستقیمی وجود ندارد."
|
||||||
|
: "هنوز رسانهای اضافه نکردهاید. اولین رسانه را بارگذاری کنید."
|
||||||
|
}
|
||||||
emptyAction={
|
emptyAction={
|
||||||
<Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}>
|
<Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}>
|
||||||
رسانه جدید
|
رسانه جدید
|
||||||
@@ -307,6 +364,23 @@ export default function MediaPage() {
|
|||||||
<Button variant="ghost" onClick={() => openEdit(row)} aria-label="ویرایش">
|
<Button variant="ghost" onClick={() => openEdit(row)} aria-label="ویرایش">
|
||||||
<EditIcon className="h-4 w-4" />
|
<EditIcon className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => toggleDeepLink(row)}
|
||||||
|
aria-label={
|
||||||
|
row.is_deeplink_only
|
||||||
|
? "بازگرداندن به فهرست"
|
||||||
|
: "تبدیل به لینک مستقیم"
|
||||||
|
}
|
||||||
|
title={
|
||||||
|
row.is_deeplink_only
|
||||||
|
? "بازگرداندن به فهرست"
|
||||||
|
: "تبدیل به لینک مستقیم"
|
||||||
|
}
|
||||||
|
className={row.is_deeplink_only ? "text-primary" : undefined}
|
||||||
|
>
|
||||||
|
<EyeIcon className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
onClick={() => setDeleting(row)}
|
onClick={() => setDeleting(row)}
|
||||||
|
|||||||
Reference in New Issue
Block a user