Compare commits
5
Commits
faf95327f1
...
e248943f4c
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
e248943f4c | ||
|
|
fdbf02bc07 | ||
|
|
1898dbb322 | ||
|
|
fee184c0e6 | ||
|
|
5c4af242fc |
@@ -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)}
|
||||||
|
|||||||
@@ -0,0 +1,413 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useCallback, useState } from "react";
|
||||||
|
import { apiFetch, ApiError, toFormData } from "@/lib/api";
|
||||||
|
import { useList } from "@/lib/useResource";
|
||||||
|
import { useToast } from "@/components/toast";
|
||||||
|
import { DataTable, type Column } from "@/components/DataTable";
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
ConfirmDialog,
|
||||||
|
Field,
|
||||||
|
Input,
|
||||||
|
Modal,
|
||||||
|
PageHeader,
|
||||||
|
Select,
|
||||||
|
Textarea,
|
||||||
|
} from "@/components/ui";
|
||||||
|
import { EditIcon, EyeIcon, PlusIcon, TrashIcon } from "@/components/icons";
|
||||||
|
import { MediaPreview } from "@/components/MediaPreview";
|
||||||
|
import { pickUrl } from "@/lib/media";
|
||||||
|
import { toFa } from "@/lib/utils";
|
||||||
|
|
||||||
|
interface Category {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
type: string;
|
||||||
|
order?: number;
|
||||||
|
description?: string | null;
|
||||||
|
icon?: string | null;
|
||||||
|
icon_url?: string | null;
|
||||||
|
deep_link?: string | null;
|
||||||
|
is_deeplink_only?: boolean;
|
||||||
|
subcategories_count?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ICON_KEYS = ["icon", "icon_url"];
|
||||||
|
|
||||||
|
export default function CategoryDeepLinksPage() {
|
||||||
|
const { data, loading, error, reload: reloadHidden } = useList<Category>(
|
||||||
|
"/categories",
|
||||||
|
{ deeplink_only: 1 },
|
||||||
|
);
|
||||||
|
// 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();
|
||||||
|
|
||||||
|
// 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 [open, setOpen] = useState(false);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
|
||||||
|
// Source: 'existing' (pick an existing category to hide — the common case,
|
||||||
|
// 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>("");
|
||||||
|
|
||||||
|
// Fields for creating a new hidden category.
|
||||||
|
const [name, setName] = useState("");
|
||||||
|
const [type, setType] = useState("media");
|
||||||
|
const [order, setOrder] = useState("0");
|
||||||
|
const [description, setDescription] = useState("");
|
||||||
|
const [icon, setIcon] = useState<File | null>(null);
|
||||||
|
|
||||||
|
const [deleting, setDeleting] = useState<Category | null>(null);
|
||||||
|
const [removing, setRemoving] = useState(false);
|
||||||
|
|
||||||
|
function resetForm() {
|
||||||
|
setSource("existing");
|
||||||
|
setExistingId("");
|
||||||
|
setName("");
|
||||||
|
setType("media");
|
||||||
|
setOrder("0");
|
||||||
|
setDescription("");
|
||||||
|
setIcon(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
function openCreate() {
|
||||||
|
setEditing(null);
|
||||||
|
resetForm();
|
||||||
|
setOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
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 {
|
||||||
|
await apiFetch(`/categories/${row.id}`, {
|
||||||
|
method: "POST",
|
||||||
|
body: toFormData({ is_deeplink_only: 0 }),
|
||||||
|
});
|
||||||
|
toast.success("از لینک مستقیم خارج شد.");
|
||||||
|
reload();
|
||||||
|
} catch (err) {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : "خطا در ذخیرهسازی");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function save(e: React.FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
setSaving(true);
|
||||||
|
try {
|
||||||
|
if (editing) {
|
||||||
|
// Edit an existing deep-link category. It stays deeplink-only.
|
||||||
|
await apiFetch(`/categories/${editing.id}`, {
|
||||||
|
method: "POST",
|
||||||
|
body: toFormData({ name, type, order, description, icon }),
|
||||||
|
});
|
||||||
|
toast.success("لینک مستقیم بهروزرسانی شد.");
|
||||||
|
} else if (source === "existing") {
|
||||||
|
if (!existingId) {
|
||||||
|
toast.error("دستهبندی را انتخاب کنید.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await apiFetch(`/categories/${existingId}`, {
|
||||||
|
method: "POST",
|
||||||
|
body: toFormData({ is_deeplink_only: 1 }),
|
||||||
|
});
|
||||||
|
toast.success("دستهبندی به لینک مستقیم تبدیل شد.");
|
||||||
|
} else {
|
||||||
|
const body = toFormData({
|
||||||
|
name,
|
||||||
|
type,
|
||||||
|
order,
|
||||||
|
description,
|
||||||
|
icon,
|
||||||
|
is_deeplink_only: true,
|
||||||
|
});
|
||||||
|
await apiFetch("/categories", { method: "POST", body });
|
||||||
|
toast.success("لینک مستقیم جدید افزوده شد.");
|
||||||
|
}
|
||||||
|
setOpen(false);
|
||||||
|
reload();
|
||||||
|
} catch (err) {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : "خطا در ذخیرهسازی");
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function confirmDelete() {
|
||||||
|
if (!deleting) return;
|
||||||
|
setRemoving(true);
|
||||||
|
try {
|
||||||
|
await apiFetch(`/categories/${deleting.id}`, { method: "DELETE" });
|
||||||
|
toast.success("دستهبندی حذف شد.");
|
||||||
|
setDeleting(null);
|
||||||
|
reload();
|
||||||
|
} catch (err) {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : "خطا در حذف");
|
||||||
|
} finally {
|
||||||
|
setRemoving(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const columns: Column<Category>[] = [
|
||||||
|
{
|
||||||
|
key: "icon",
|
||||||
|
header: "آیکن",
|
||||||
|
className: "w-20",
|
||||||
|
render: (r) => (
|
||||||
|
<MediaPreview kind="image" src={pickUrl(r, ICON_KEYS)} label={r.name} />
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{ key: "name", header: "نام دستهبندی" },
|
||||||
|
{
|
||||||
|
key: "type",
|
||||||
|
header: "نوع",
|
||||||
|
render: (r) =>
|
||||||
|
r.type === "media"
|
||||||
|
? "رسانه"
|
||||||
|
: r.type === "playlist"
|
||||||
|
? "پلیلیست"
|
||||||
|
: r.type === "breathing_template"
|
||||||
|
? "قالب تنفس"
|
||||||
|
: r.type,
|
||||||
|
className: "w-28",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "deep_link",
|
||||||
|
header: "لینک مستقیم",
|
||||||
|
render: (r) =>
|
||||||
|
r.deep_link ? (
|
||||||
|
<a
|
||||||
|
href={r.deep_link}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
dir="ltr"
|
||||||
|
className="inline-block max-w-[220px] truncate text-xs text-primary underline"
|
||||||
|
>
|
||||||
|
{r.deep_link}
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
<span className="text-xs text-muted">—</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "subcategories_count",
|
||||||
|
header: "زیردستهها",
|
||||||
|
render: (r) => toFa(r.subcategories_count ?? 0),
|
||||||
|
className: "w-28",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<PageHeader
|
||||||
|
title="لینکهای مستقیم دستهبندی"
|
||||||
|
subtitle="دستهبندیهایی که در فهرست نمایش داده نمیشوند اما از طریق لینک مستقیم قابل دسترسیاند"
|
||||||
|
action={
|
||||||
|
<Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}>
|
||||||
|
لینک مستقیم جدید
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<DataTable
|
||||||
|
columns={columns}
|
||||||
|
rows={data}
|
||||||
|
loading={loading}
|
||||||
|
error={error}
|
||||||
|
onRetry={reload}
|
||||||
|
emptyMessage="هنوز لینک مستقیمی تعریف نشده است."
|
||||||
|
emptyAction={
|
||||||
|
<Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}>
|
||||||
|
لینک مستقیم جدید
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
actions={(row) => (
|
||||||
|
<>
|
||||||
|
<Button variant="ghost" onClick={() => openEdit(row)} aria-label="ویرایش">
|
||||||
|
<EditIcon className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => unhide(row)}
|
||||||
|
aria-label="نمایش در فهرست"
|
||||||
|
title="نمایش در فهرست"
|
||||||
|
>
|
||||||
|
<EyeIcon className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => setDeleting(row)}
|
||||||
|
aria-label="حذف"
|
||||||
|
className="text-danger"
|
||||||
|
>
|
||||||
|
<TrashIcon className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
open={open}
|
||||||
|
onClose={() => setOpen(false)}
|
||||||
|
title={
|
||||||
|
editing ? "ویرایش لینک مستقیم دستهبندی" : "لینک مستقیم دستهبندی جدید"
|
||||||
|
}
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="secondary" onClick={() => setOpen(false)}>
|
||||||
|
انصراف
|
||||||
|
</Button>
|
||||||
|
<Button form="cat-deeplink-form" type="submit" loading={saving}>
|
||||||
|
ذخیره
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<form
|
||||||
|
id="cat-deeplink-form"
|
||||||
|
onSubmit={save}
|
||||||
|
className="flex flex-col gap-4"
|
||||||
|
>
|
||||||
|
{!editing && (
|
||||||
|
<Field label="منبع دستهبندی" required>
|
||||||
|
<Select
|
||||||
|
value={source}
|
||||||
|
onChange={(e) => setSource(e.target.value as "new" | "existing")}
|
||||||
|
>
|
||||||
|
<option value="new">ساخت دستهبندی جدید</option>
|
||||||
|
<option value="existing">استفاده از دستهبندی موجود</option>
|
||||||
|
</Select>
|
||||||
|
</Field>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{source === "existing" ? (
|
||||||
|
<Field label="انتخاب دستهبندی" required>
|
||||||
|
{allCategories.length ? (
|
||||||
|
<Select
|
||||||
|
value={existingId}
|
||||||
|
onChange={(e) => setExistingId(e.target.value)}
|
||||||
|
>
|
||||||
|
<option value="">انتخاب کنید...</option>
|
||||||
|
{allCategories.map((c) => (
|
||||||
|
<option key={c.id} value={String(c.id)}>
|
||||||
|
{c.name} ({c.type})
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
) : (
|
||||||
|
<p className="text-xs text-muted">
|
||||||
|
{allLoading ? "در حال بارگذاری..." : "دستهبندیای موجود نیست."}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Field label="نام دستهبندی" required>
|
||||||
|
<Input
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
placeholder="مثلاً مدیتیشن شبانه"
|
||||||
|
required
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
|
||||||
|
{/* No playlist option: playlist categories live in the
|
||||||
|
music_categories table, which has no deep-link column. */}
|
||||||
|
<Field label="نوع">
|
||||||
|
<Select
|
||||||
|
value={type}
|
||||||
|
onChange={(e) => setType(e.target.value)}
|
||||||
|
>
|
||||||
|
<option value="media">رسانه</option>
|
||||||
|
<option value="breathing_template">قالب تنفس</option>
|
||||||
|
</Select>
|
||||||
|
</Field>
|
||||||
|
|
||||||
|
<Field label="ترتیب">
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
dir="ltr"
|
||||||
|
value={order}
|
||||||
|
onChange={(e) => setOrder(e.target.value)}
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
|
||||||
|
<Field label="توضیحات">
|
||||||
|
<Textarea
|
||||||
|
value={description}
|
||||||
|
onChange={(e) => setDescription(e.target.value)}
|
||||||
|
placeholder="توضیح کوتاه"
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
|
||||||
|
<Field label={editing ? "آیکن (در صورت تغییر)" : "آیکن"}>
|
||||||
|
<Input
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
onChange={(e) => setIcon(e.target.files?.[0] ?? null)}
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<p className="rounded-xl border border-border bg-surface-muted p-3 text-xs text-muted">
|
||||||
|
{editing ? (
|
||||||
|
<>
|
||||||
|
این دستهبندی در فهرست نمایش داده نمیشود و فقط با لینک مستقیم قابل
|
||||||
|
دسترسی است. برای بازگرداندن آن به فهرست، از دکمه «نمایش در فهرست»
|
||||||
|
استفاده کنید.
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
پس از ذخیره، این دستهبندی در فهرست نمایش داده نمیشود و فقط با لینک
|
||||||
|
مستقیم قابل دسترسی است.
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<ConfirmDialog
|
||||||
|
open={!!deleting}
|
||||||
|
message={`آیا از حذف «${deleting?.name ?? ""}» مطمئن هستید؟`}
|
||||||
|
loading={removing}
|
||||||
|
onConfirm={confirmDelete}
|
||||||
|
onClose={() => setDeleting(null)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,460 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useCallback, useState } from "react";
|
||||||
|
import { apiFetch, ApiError, toFormData } from "@/lib/api";
|
||||||
|
import { useList } from "@/lib/useResource";
|
||||||
|
import { useToast } from "@/components/toast";
|
||||||
|
import { DataTable, type Column } from "@/components/DataTable";
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
ConfirmDialog,
|
||||||
|
Field,
|
||||||
|
Input,
|
||||||
|
Modal,
|
||||||
|
PageHeader,
|
||||||
|
Select,
|
||||||
|
Textarea,
|
||||||
|
} from "@/components/ui";
|
||||||
|
import { EditIcon, EyeIcon, PlusIcon, TrashIcon } from "@/components/icons";
|
||||||
|
import { MediaPreview } from "@/components/MediaPreview";
|
||||||
|
import { ImagePicker } from "@/components/ImagePicker";
|
||||||
|
import { pickUrl, SOUND_KEYS, VIDEO_KEYS, IMAGE_KEYS } from "@/lib/media";
|
||||||
|
import { formatMinutes, fileNameToTitle } from "@/lib/utils";
|
||||||
|
|
||||||
|
interface Cat {
|
||||||
|
id: number;
|
||||||
|
name?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Media {
|
||||||
|
id: number;
|
||||||
|
title?: string;
|
||||||
|
caption?: string;
|
||||||
|
type?: string;
|
||||||
|
duration?: number;
|
||||||
|
visibility?: string;
|
||||||
|
is_deeplink_only?: boolean;
|
||||||
|
is_premium?: boolean;
|
||||||
|
external_url?: string | null;
|
||||||
|
deep_link?: string | null;
|
||||||
|
image_id?: number | null;
|
||||||
|
image?: unknown;
|
||||||
|
detail_image_id?: number | null;
|
||||||
|
detail_image?: unknown;
|
||||||
|
categories?: Cat[];
|
||||||
|
sub_categories?: Cat[];
|
||||||
|
subcategories?: Cat[];
|
||||||
|
subCategories?: Cat[];
|
||||||
|
}
|
||||||
|
|
||||||
|
function DeepLink({ deep_link }: { deep_link?: string | null }) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{deep_link ? (
|
||||||
|
<a
|
||||||
|
href={deep_link}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
dir="ltr"
|
||||||
|
className="inline-block max-w-[220px] truncate text-xs text-primary underline"
|
||||||
|
>
|
||||||
|
{deep_link}
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
<span className="text-xs text-muted">—</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function MediaDeepLinksPage() {
|
||||||
|
const { data, loading, error, reload: reloadHidden } = useList<Media>(
|
||||||
|
"/media",
|
||||||
|
{ deeplink_only: 1 },
|
||||||
|
);
|
||||||
|
// 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();
|
||||||
|
|
||||||
|
// 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 [open, setOpen] = useState(false);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
|
||||||
|
// Source: 'new' (upload / external url) or 'existing' (pick a media record).
|
||||||
|
const [source, setSource] = useState<"new" | "existing">("new");
|
||||||
|
const [existingId, setExistingId] = useState<string>("");
|
||||||
|
|
||||||
|
// Fields for creating a new hidden media.
|
||||||
|
const [title, setTitle] = useState("");
|
||||||
|
const [caption, setCaption] = useState("");
|
||||||
|
const [type, setType] = useState("audio");
|
||||||
|
const [duration, setDuration] = useState("");
|
||||||
|
const [file, setFile] = useState<File | null>(null);
|
||||||
|
const [externalUrl, setExternalUrl] = useState("");
|
||||||
|
const [imageId, setImageId] = useState<number | null>(null);
|
||||||
|
const [imageFile, setImageFile] = useState<File | null>(null);
|
||||||
|
|
||||||
|
const [deleting, setDeleting] = useState<Media | null>(null);
|
||||||
|
const [removing, setRemoving] = useState(false);
|
||||||
|
|
||||||
|
function resetForm() {
|
||||||
|
setSource("new");
|
||||||
|
setExistingId("");
|
||||||
|
setTitle("");
|
||||||
|
setCaption("");
|
||||||
|
setType("audio");
|
||||||
|
setDuration("");
|
||||||
|
setFile(null);
|
||||||
|
setExternalUrl("");
|
||||||
|
setImageId(null);
|
||||||
|
setImageFile(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
function openCreate() {
|
||||||
|
setEditing(null);
|
||||||
|
resetForm();
|
||||||
|
setOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
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 {
|
||||||
|
await apiFetch(`/media/${row.id}`, {
|
||||||
|
method: "POST",
|
||||||
|
body: toFormData({ is_deeplink_only: 0 }),
|
||||||
|
});
|
||||||
|
toast.success("از لینک مستقیم خارج شد.");
|
||||||
|
reload();
|
||||||
|
} catch (err) {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : "خطا در ذخیرهسازی");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function save(e: React.FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
setSaving(true);
|
||||||
|
try {
|
||||||
|
if (editing) {
|
||||||
|
// Edit an existing deep-link media. It stays deeplink-only.
|
||||||
|
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("لینک مستقیم بهروزرسانی شد.");
|
||||||
|
} else if (source === "existing") {
|
||||||
|
// Toggle the chosen existing media to deeplink-only.
|
||||||
|
if (!existingId) {
|
||||||
|
toast.error("رسانهای را انتخاب کنید.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await apiFetch(`/media/${existingId}`, {
|
||||||
|
method: "POST",
|
||||||
|
body: toFormData({ is_deeplink_only: 1 }),
|
||||||
|
});
|
||||||
|
toast.success("رسانه به لینک مستقیم تبدیل شد.");
|
||||||
|
} else {
|
||||||
|
// Create a brand new hidden media (upload / external url).
|
||||||
|
const body = toFormData({
|
||||||
|
title,
|
||||||
|
caption,
|
||||||
|
type,
|
||||||
|
duration,
|
||||||
|
file,
|
||||||
|
external_url: externalUrl,
|
||||||
|
image_id: imageId,
|
||||||
|
image: imageFile,
|
||||||
|
is_deeplink_only: true,
|
||||||
|
});
|
||||||
|
await apiFetch("/media", { method: "POST", body });
|
||||||
|
toast.success("لینک مستقیم جدید افزوده شد.");
|
||||||
|
}
|
||||||
|
setOpen(false);
|
||||||
|
reload();
|
||||||
|
} catch (err) {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : "خطا در ذخیرهسازی");
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function confirmDelete() {
|
||||||
|
if (!deleting) return;
|
||||||
|
setRemoving(true);
|
||||||
|
try {
|
||||||
|
await apiFetch(`/media/${deleting.id}`, { method: "DELETE" });
|
||||||
|
toast.success("رسانه حذف شد.");
|
||||||
|
setDeleting(null);
|
||||||
|
reload();
|
||||||
|
} catch (err) {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : "خطا در حذف");
|
||||||
|
} finally {
|
||||||
|
setRemoving(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const columns: Column<Media>[] = [
|
||||||
|
{
|
||||||
|
key: "play",
|
||||||
|
header: "پخش",
|
||||||
|
className: "w-20",
|
||||||
|
render: (r) =>
|
||||||
|
r.type === "video" ? (
|
||||||
|
<MediaPreview kind="video" src={pickUrl(r, VIDEO_KEYS)} label={r.title} />
|
||||||
|
) : (
|
||||||
|
<MediaPreview kind="audio" src={pickUrl(r, SOUND_KEYS)} label={r.title} />
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "thumbnail",
|
||||||
|
header: "تصویر",
|
||||||
|
className: "w-20",
|
||||||
|
render: (r) => (
|
||||||
|
<MediaPreview kind="image" src={pickUrl(r, IMAGE_KEYS)} label={r.title} />
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{ key: "title", header: "عنوان", render: (r) => r.title ?? "—" },
|
||||||
|
{
|
||||||
|
key: "deep_link",
|
||||||
|
header: "لینک مستقیم",
|
||||||
|
render: (r) => <DeepLink deep_link={r.deep_link} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "duration",
|
||||||
|
header: "مدت",
|
||||||
|
render: (r) => formatMinutes(r.duration),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<PageHeader
|
||||||
|
title="لینکهای مستقیم رسانه"
|
||||||
|
subtitle="رسانههایی که در فهرست نمایش داده نمیشوند اما از طریق لینک مستقیم (دیپلینک) قابل دسترسیاند"
|
||||||
|
action={
|
||||||
|
<Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}>
|
||||||
|
لینک مستقیم جدید
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<DataTable
|
||||||
|
columns={columns}
|
||||||
|
rows={data}
|
||||||
|
loading={loading}
|
||||||
|
error={error}
|
||||||
|
onRetry={reload}
|
||||||
|
emptyMessage="هنوز لینک مستقیمی تعریف نشده است."
|
||||||
|
emptyAction={
|
||||||
|
<Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}>
|
||||||
|
لینک مستقیم جدید
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
actions={(row) => (
|
||||||
|
<>
|
||||||
|
<Button variant="ghost" onClick={() => openEdit(row)} aria-label="ویرایش">
|
||||||
|
<EditIcon className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => unhide(row)}
|
||||||
|
aria-label="نمایش در فهرست"
|
||||||
|
title="نمایش در فهرست"
|
||||||
|
>
|
||||||
|
<EyeIcon className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => setDeleting(row)}
|
||||||
|
aria-label="حذف"
|
||||||
|
className="text-danger"
|
||||||
|
>
|
||||||
|
<TrashIcon className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
open={open}
|
||||||
|
onClose={() => setOpen(false)}
|
||||||
|
title={editing ? "ویرایش لینک مستقیم رسانه" : "لینک مستقیم رسانه جدید"}
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="secondary" onClick={() => setOpen(false)}>
|
||||||
|
انصراف
|
||||||
|
</Button>
|
||||||
|
<Button form="deeplink-form" type="submit" loading={saving}>
|
||||||
|
ذخیره
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<form
|
||||||
|
id="deeplink-form"
|
||||||
|
onSubmit={save}
|
||||||
|
className="flex flex-col gap-4"
|
||||||
|
>
|
||||||
|
{!editing && (
|
||||||
|
<Field label="منبع رسانه" required>
|
||||||
|
<Select
|
||||||
|
value={source}
|
||||||
|
onChange={(e) => setSource(e.target.value as "new" | "existing")}
|
||||||
|
>
|
||||||
|
<option value="new">بارگذاری رسانه جدید</option>
|
||||||
|
<option value="existing">استفاده از رسانه موجود</option>
|
||||||
|
</Select>
|
||||||
|
</Field>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{source === "existing" ? (
|
||||||
|
<Field label="انتخاب رسانه" required>
|
||||||
|
{allMedia.length ? (
|
||||||
|
<Select value={existingId} onChange={(e) => setExistingId(e.target.value)}>
|
||||||
|
<option value="">انتخاب کنید...</option>
|
||||||
|
{allMedia.map((m) => (
|
||||||
|
<option key={m.id} value={String(m.id)}>
|
||||||
|
{m.title ?? `#${m.id}`}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
) : (
|
||||||
|
<p className="text-xs text-muted">
|
||||||
|
{allLoading ? "در حال بارگذاری..." : "رسانهای موجود نیست."}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Field label="عنوان" required>
|
||||||
|
<Input
|
||||||
|
value={title}
|
||||||
|
onChange={(e) => setTitle(e.target.value)}
|
||||||
|
placeholder="مثلاً مدیتیشن شبانه"
|
||||||
|
required
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
|
||||||
|
<Field label="توضیحات">
|
||||||
|
<Textarea
|
||||||
|
value={caption}
|
||||||
|
onChange={(e) => setCaption(e.target.value)}
|
||||||
|
placeholder="توضیح کوتاه"
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
|
||||||
|
<Field label="تصویر">
|
||||||
|
<ImagePicker
|
||||||
|
imageId={imageId}
|
||||||
|
onPickId={setImageId}
|
||||||
|
file={imageFile}
|
||||||
|
onPickFile={setImageFile}
|
||||||
|
existingUrl={editing ? pickUrl(editing, IMAGE_KEYS) : null}
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
|
||||||
|
<Field label="نوع" required>
|
||||||
|
<Select value={type} onChange={(e) => setType(e.target.value)} required>
|
||||||
|
<option value="audio">صوت</option>
|
||||||
|
<option value="video">ویدیو</option>
|
||||||
|
</Select>
|
||||||
|
</Field>
|
||||||
|
|
||||||
|
<Field
|
||||||
|
label={editing ? "فایل (در صورت تغییر)" : "فایل"}
|
||||||
|
hint="بارگذاری فایل یا وارد کردن لینک خارجی"
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
type="file"
|
||||||
|
accept="audio/*,video/*"
|
||||||
|
onChange={(e) => {
|
||||||
|
const f = e.target.files?.[0] ?? null;
|
||||||
|
setFile(f);
|
||||||
|
if (f && !title.trim()) setTitle(fileNameToTitle(f.name));
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
|
||||||
|
<Field label="لینک خارجی" hint="اگر فایل آپلود نمیکنید، آدرس مستقیم فایل.">
|
||||||
|
<Input
|
||||||
|
dir="ltr"
|
||||||
|
value={externalUrl}
|
||||||
|
onChange={(e) => setExternalUrl(e.target.value)}
|
||||||
|
placeholder="https://..."
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
|
||||||
|
<Field label="مدت (دقیقه)">
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
dir="ltr"
|
||||||
|
value={duration}
|
||||||
|
onChange={(e) => setDuration(e.target.value)}
|
||||||
|
placeholder="مثلاً ۱۰"
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<p className="rounded-xl border border-border bg-surface-muted p-3 text-xs text-muted">
|
||||||
|
{editing ? (
|
||||||
|
<>
|
||||||
|
این رسانه در فهرست «رسانهها» نمایش داده نمیشود و فقط با لینک مستقیم
|
||||||
|
قابل دسترسی است. برای بازگرداندن آن به فهرست، از دکمه «نمایش در فهرست»
|
||||||
|
استفاده کنید.
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
پس از ذخیره، این رسانه در فهرست «رسانهها» نمایش داده نمیشود و فقط با
|
||||||
|
لینک مستقیم قابل دسترسی است.
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<ConfirmDialog
|
||||||
|
open={!!deleting}
|
||||||
|
message={`آیا از حذف «${deleting?.title ?? ""}» مطمئن هستید؟`}
|
||||||
|
loading={removing}
|
||||||
|
onConfirm={confirmDelete}
|
||||||
|
onClose={() => setDeleting(null)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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">
|
||||||
|
<div className="max-w-sm flex-1">
|
||||||
<Input
|
<Input
|
||||||
value={search}
|
value={search}
|
||||||
onChange={(e) => setSearch(e.target.value)}
|
onChange={(e) => setSearch(e.target.value)}
|
||||||
placeholder="جستجو در رسانهها..."
|
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)}
|
||||||
|
|||||||
@@ -31,6 +31,8 @@ interface Playlist {
|
|||||||
detail_image_id?: number | null;
|
detail_image_id?: number | null;
|
||||||
detail_image?: unknown;
|
detail_image?: unknown;
|
||||||
is_premium?: boolean;
|
is_premium?: boolean;
|
||||||
|
categories?: { id: number; name?: string }[];
|
||||||
|
subcategories?: { id: number; name?: string }[];
|
||||||
}
|
}
|
||||||
|
|
||||||
interface MusicCategory {
|
interface MusicCategory {
|
||||||
@@ -164,6 +166,14 @@ export default function MusicPlaylistsPage() {
|
|||||||
),
|
),
|
||||||
},
|
},
|
||||||
{ key: "name", header: "نام" },
|
{ key: "name", header: "نام" },
|
||||||
|
{
|
||||||
|
key: "subcategories",
|
||||||
|
header: "زیردسته",
|
||||||
|
render: (r) =>
|
||||||
|
r.subcategories?.length
|
||||||
|
? r.subcategories.map((s) => s.name).filter(Boolean).join("، ")
|
||||||
|
: "—",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
key: "description",
|
key: "description",
|
||||||
header: "توضیحات",
|
header: "توضیحات",
|
||||||
|
|||||||
@@ -11,11 +11,15 @@ import {
|
|||||||
Card,
|
Card,
|
||||||
Modal,
|
Modal,
|
||||||
PageHeader,
|
PageHeader,
|
||||||
|
Field,
|
||||||
|
Input,
|
||||||
Pagination,
|
Pagination,
|
||||||
Select,
|
Select,
|
||||||
Spinner,
|
Spinner,
|
||||||
} from "@/components/ui";
|
} from "@/components/ui";
|
||||||
import { EyeIcon } from "@/components/icons";
|
import { DownloadIcon, EyeIcon } from "@/components/icons";
|
||||||
|
import { useToast } from "@/components/toast";
|
||||||
|
import { exportToExcel, mapWithConcurrency } from "@/lib/excel";
|
||||||
import { toFa } from "@/lib/utils";
|
import { toFa } from "@/lib/utils";
|
||||||
|
|
||||||
interface MeditationUser {
|
interface MeditationUser {
|
||||||
@@ -61,6 +65,11 @@ interface DetailData {
|
|||||||
questions_answered?: number;
|
questions_answered?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Confirmation password for the full export. This is a guard against an
|
||||||
|
// accidental click, not a security boundary — it ships in the client bundle, so
|
||||||
|
// anyone with the page can read it. Real protection belongs on the API side.
|
||||||
|
const EXPORT_PASSWORD = "amnk1380";
|
||||||
|
|
||||||
const GENDER_LABELS: Record<number, string> = {
|
const GENDER_LABELS: Record<number, string> = {
|
||||||
1: "مرد",
|
1: "مرد",
|
||||||
2: "زن",
|
2: "زن",
|
||||||
@@ -83,6 +92,16 @@ export default function UsersPage() {
|
|||||||
query: answered ? { answered } : undefined,
|
query: answered ? { answered } : undefined,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const toast = useToast();
|
||||||
|
const [exporting, setExporting] = useState(false);
|
||||||
|
const [exportProgress, setExportProgress] = useState(0);
|
||||||
|
|
||||||
|
// The full export hammers the API with one request per user, so it sits
|
||||||
|
// behind a confirmation password instead of being one stray click away.
|
||||||
|
const [gateOpen, setGateOpen] = useState(false);
|
||||||
|
const [gatePassword, setGatePassword] = useState("");
|
||||||
|
const [gateError, setGateError] = useState<string | null>(null);
|
||||||
|
|
||||||
const [detailUser, setDetailUser] = useState<MeditationUser | null>(null);
|
const [detailUser, setDetailUser] = useState<MeditationUser | null>(null);
|
||||||
const [detailData, setDetailData] = useState<DetailData | null>(null);
|
const [detailData, setDetailData] = useState<DetailData | null>(null);
|
||||||
const [detailOpen, setDetailOpen] = useState(false);
|
const [detailOpen, setDetailOpen] = useState(false);
|
||||||
@@ -134,6 +153,162 @@ export default function UsersPage() {
|
|||||||
setDetailLoading(false);
|
setDetailLoading(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function genderLabel(value?: number | null) {
|
||||||
|
return value != null ? GENDER_LABELS[value] ?? "—" : "—";
|
||||||
|
}
|
||||||
|
|
||||||
|
function openGate() {
|
||||||
|
if (exporting) return;
|
||||||
|
setGatePassword("");
|
||||||
|
setGateError(null);
|
||||||
|
setGateOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function submitGate() {
|
||||||
|
if (gatePassword !== EXPORT_PASSWORD) {
|
||||||
|
setGateError("رمز عبور نادرست است.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setGateOpen(false);
|
||||||
|
setGatePassword("");
|
||||||
|
setGateError(null);
|
||||||
|
void exportAll();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Full export: walks every page of the current filter, then pulls each user's
|
||||||
|
// survey answers so the sheet gets one column per question.
|
||||||
|
async function exportAll() {
|
||||||
|
if (exporting) return;
|
||||||
|
setExporting(true);
|
||||||
|
setExportProgress(0);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const users: MeditationUser[] = [];
|
||||||
|
let currentPage = 1;
|
||||||
|
let lastPage = 1;
|
||||||
|
|
||||||
|
do {
|
||||||
|
const res = await apiFetch<{
|
||||||
|
data: MeditationUser[];
|
||||||
|
last_page?: number;
|
||||||
|
meta?: { last_page?: number };
|
||||||
|
}>("/admin/survey-users", {
|
||||||
|
baseUrl: MEDITATION_BASE_URL,
|
||||||
|
query: {
|
||||||
|
page: currentPage,
|
||||||
|
per_page: 100,
|
||||||
|
...(answered ? { answered } : {}),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
users.push(...(res.data ?? []));
|
||||||
|
lastPage = Number(res.last_page ?? res.meta?.last_page ?? 1);
|
||||||
|
currentPage++;
|
||||||
|
} while (currentPage <= lastPage);
|
||||||
|
|
||||||
|
if (users.length === 0) {
|
||||||
|
toast.error("کاربری برای خروجی گرفتن وجود ندارد.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const details = await mapWithConcurrency(
|
||||||
|
users,
|
||||||
|
6,
|
||||||
|
(user) =>
|
||||||
|
apiFetch<{ survey_answers?: SurveyAnswerItem[] }>(
|
||||||
|
`/admin/survey-users/${user.identifier || user.id}`,
|
||||||
|
{ baseUrl: MEDITATION_BASE_URL },
|
||||||
|
)
|
||||||
|
.then((r) => r.survey_answers ?? [])
|
||||||
|
.catch(() => [] as SurveyAnswerItem[]),
|
||||||
|
(done, total) => setExportProgress(Math.round((done / total) * 100)),
|
||||||
|
);
|
||||||
|
|
||||||
|
// Union of questions, in first-seen order, so every row lines up.
|
||||||
|
const questionOrder: number[] = [];
|
||||||
|
const questionTitles = new Map<number, string>();
|
||||||
|
for (const answers of details) {
|
||||||
|
for (const item of answers) {
|
||||||
|
if (!questionTitles.has(item.question_id)) {
|
||||||
|
questionTitles.set(item.question_id, item.question || `سوال ${item.question_id}`);
|
||||||
|
questionOrder.push(item.question_id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const headers = [
|
||||||
|
"شناسه",
|
||||||
|
"نام",
|
||||||
|
"سن",
|
||||||
|
"جنسیت",
|
||||||
|
"ایمیل",
|
||||||
|
"موبایل",
|
||||||
|
"تاریخ ثبتنام",
|
||||||
|
"تعداد پاسخها",
|
||||||
|
"سوالات پاسخ داده شده",
|
||||||
|
...questionOrder.map((id) => questionTitles.get(id)!),
|
||||||
|
];
|
||||||
|
|
||||||
|
const rows = users.map((user, i) => {
|
||||||
|
const byQuestion = new Map(
|
||||||
|
details[i].map((item) => [
|
||||||
|
item.question_id,
|
||||||
|
item.answers.map((a) => a.label).join("، "),
|
||||||
|
]),
|
||||||
|
);
|
||||||
|
return [
|
||||||
|
user.id,
|
||||||
|
user.full_name || [user.first_name, user.last_name].filter(Boolean).join(" ") || "—",
|
||||||
|
user.age ?? "—",
|
||||||
|
genderLabel(user.gender),
|
||||||
|
user.email || "—",
|
||||||
|
user.mobile || "—",
|
||||||
|
faDate(user.created_at),
|
||||||
|
user.answers_count ?? "—",
|
||||||
|
user.questions_answered ?? "—",
|
||||||
|
...questionOrder.map((id) => byQuestion.get(id) || ""),
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
const suffix = answered === "1" ? "-answered" : answered === "0" ? "-unanswered" : "";
|
||||||
|
exportToExcel(`survey-users${suffix}`, headers, rows, "کاربران");
|
||||||
|
toast.success(`خروجی اکسل ${toFa(users.length)} کاربر آماده شد.`);
|
||||||
|
} catch {
|
||||||
|
toast.error("خطا در تهیه خروجی اکسل.");
|
||||||
|
} finally {
|
||||||
|
setExporting(false);
|
||||||
|
setExportProgress(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Single-user export: profile fields plus that user's survey answers, taken
|
||||||
|
// straight from what the open modal already loaded.
|
||||||
|
function exportDetail() {
|
||||||
|
if (!detailUser || !detailData) return;
|
||||||
|
const appro = detailData.appro;
|
||||||
|
|
||||||
|
const headers = ["عنوان", "مقدار"];
|
||||||
|
const rows: (string | number)[][] = [
|
||||||
|
["شناسه", detailUser.id],
|
||||||
|
["نام", userName || "—"],
|
||||||
|
["سن", (appro?.age ?? detailUser.age) ?? "—"],
|
||||||
|
["جنسیت", genderLabel(appro?.gender ?? detailUser.gender)],
|
||||||
|
["تاریخ تولد", appro?.birthday ? faDate(appro.birthday) : "—"],
|
||||||
|
["ایمیل", (appro?.email ?? detailUser.email) || "—"],
|
||||||
|
["موبایل", detailUser.mobile || "—"],
|
||||||
|
["تاریخ ثبتنام", faDate(detailUser.created_at)],
|
||||||
|
["تعداد پاسخها", detailData.answers_count ?? "—"],
|
||||||
|
["سوالات پاسخ داده شده", detailData.questions_answered ?? "—"],
|
||||||
|
["", ""],
|
||||||
|
["سوال", "پاسخ"],
|
||||||
|
...detailData.survey_answers.map((item) => [
|
||||||
|
item.question || `سوال ${item.question_id}`,
|
||||||
|
item.answers.map((a) => a.label).join("، ") || "بدون پاسخ",
|
||||||
|
]),
|
||||||
|
];
|
||||||
|
|
||||||
|
exportToExcel(`survey-user-${detailUser.id}`, headers, rows, "جزئیات کاربر");
|
||||||
|
}
|
||||||
|
|
||||||
const columns: Column<MeditationUser>[] = [
|
const columns: Column<MeditationUser>[] = [
|
||||||
{ key: "id", header: "شناسه", render: (r) => toFa(r.id), className: "w-20" },
|
{ key: "id", header: "شناسه", render: (r) => toFa(r.id), className: "w-20" },
|
||||||
{
|
{
|
||||||
@@ -169,6 +344,21 @@ export default function UsersPage() {
|
|||||||
<PageHeader
|
<PageHeader
|
||||||
title="کاربران نظرسنجی"
|
title="کاربران نظرسنجی"
|
||||||
subtitle="فهرست کاربران و پاسخهای نظرسنجی آنها"
|
subtitle="فهرست کاربران و پاسخهای نظرسنجی آنها"
|
||||||
|
action={
|
||||||
|
<Button onClick={openGate} disabled={exporting}>
|
||||||
|
{exporting ? (
|
||||||
|
<>
|
||||||
|
<Spinner className="h-4 w-4" />
|
||||||
|
<span>در حال آمادهسازی… {toFa(exportProgress)}٪</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<DownloadIcon className="h-4 w-4" />
|
||||||
|
<span>خروجی اکسل</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="mb-4 flex items-center gap-3">
|
<div className="mb-4 flex items-center gap-3">
|
||||||
@@ -204,14 +394,69 @@ export default function UsersPage() {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
open={gateOpen}
|
||||||
|
onClose={() => setGateOpen(false)}
|
||||||
|
title="تایید خروجی اکسل"
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button onClick={submitGate} disabled={!gatePassword}>
|
||||||
|
تایید و شروع خروجی
|
||||||
|
</Button>
|
||||||
|
<Button variant="secondary" onClick={() => setGateOpen(false)}>
|
||||||
|
انصراف
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<form
|
||||||
|
onSubmit={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
submitGate();
|
||||||
|
}}
|
||||||
|
className="flex flex-col gap-3"
|
||||||
|
>
|
||||||
|
<p className="text-sm text-muted">
|
||||||
|
این عملیات اطلاعات همه کاربران و پاسخهای نظرسنجی را از سرور
|
||||||
|
میخواند و ممکن است بار زیادی روی سرور بگذارد. برای ادامه رمز عبور
|
||||||
|
را وارد کنید.
|
||||||
|
</p>
|
||||||
|
<Field label="رمز عبور" required>
|
||||||
|
<Input
|
||||||
|
type="password"
|
||||||
|
autoFocus
|
||||||
|
value={gatePassword}
|
||||||
|
onChange={(e) => {
|
||||||
|
setGatePassword(e.target.value);
|
||||||
|
setGateError(null);
|
||||||
|
}}
|
||||||
|
placeholder="رمز عبور خروجی"
|
||||||
|
dir="ltr"
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
{gateError && <p className="text-sm text-danger">{gateError}</p>}
|
||||||
|
{/* Lets Enter submit the form even though the button lives in the footer. */}
|
||||||
|
<button type="submit" className="hidden" aria-hidden />
|
||||||
|
</form>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
<Modal
|
<Modal
|
||||||
open={detailOpen}
|
open={detailOpen}
|
||||||
onClose={() => setDetailOpen(false)}
|
onClose={() => setDetailOpen(false)}
|
||||||
title={userName ? `جزئیات کاربر — ${userName}` : "جزئیات کاربر"}
|
title={userName ? `جزئیات کاربر — ${userName}` : "جزئیات کاربر"}
|
||||||
footer={
|
footer={
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
onClick={exportDetail}
|
||||||
|
disabled={detailLoading || !detailData}
|
||||||
|
>
|
||||||
|
<DownloadIcon className="h-4 w-4" />
|
||||||
|
<span>خروجی اکسل</span>
|
||||||
|
</Button>
|
||||||
<Button variant="secondary" onClick={() => setDetailOpen(false)}>
|
<Button variant="secondary" onClick={() => setDetailOpen(false)}>
|
||||||
بستن
|
بستن
|
||||||
</Button>
|
</Button>
|
||||||
|
</>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{detailLoading && (
|
{detailLoading && (
|
||||||
|
|||||||
@@ -24,6 +24,14 @@ export const PlusIcon = (p: IconProps) => (
|
|||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
export const DownloadIcon = (p: IconProps) => (
|
||||||
|
<svg {...base(p)}>
|
||||||
|
<path d="M12 3v12" />
|
||||||
|
<path d="m7 10 5 5 5-5" />
|
||||||
|
<path d="M5 21h14" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
export const EditIcon = (p: IconProps) => (
|
export const EditIcon = (p: IconProps) => (
|
||||||
<svg {...base(p)}>
|
<svg {...base(p)}>
|
||||||
<path d="M12 20h9" />
|
<path d="M12 20h9" />
|
||||||
|
|||||||
+304
@@ -0,0 +1,304 @@
|
|||||||
|
// Dependency-free .xlsx writer. An .xlsx is just a ZIP of XML parts, so we
|
||||||
|
// build the parts by hand and pack them with STORE (no compression) — that
|
||||||
|
// keeps us from needing a deflate implementation while still producing a file
|
||||||
|
// Excel opens natively, with no "format and extension don't match" warning.
|
||||||
|
|
||||||
|
type Cell = string | number | null | undefined;
|
||||||
|
|
||||||
|
/* --------------------------------- ZIP ---------------------------------- */
|
||||||
|
|
||||||
|
const CRC_TABLE = (() => {
|
||||||
|
const table = new Uint32Array(256);
|
||||||
|
for (let i = 0; i < 256; i++) {
|
||||||
|
let c = i;
|
||||||
|
for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
|
||||||
|
table[i] = c >>> 0;
|
||||||
|
}
|
||||||
|
return table;
|
||||||
|
})();
|
||||||
|
|
||||||
|
function crc32(bytes: Uint8Array): number {
|
||||||
|
let c = 0xffffffff;
|
||||||
|
for (let i = 0; i < bytes.length; i++) {
|
||||||
|
c = CRC_TABLE[(c ^ bytes[i]) & 0xff] ^ (c >>> 8);
|
||||||
|
}
|
||||||
|
return (c ^ 0xffffffff) >>> 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ZipEntry {
|
||||||
|
name: string;
|
||||||
|
data: Uint8Array;
|
||||||
|
crc: number;
|
||||||
|
offset: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Builds a ZIP archive with stored (uncompressed) entries. Fixed DOS timestamp
|
||||||
|
// so repeated exports of the same data are byte-identical.
|
||||||
|
function zip(files: { name: string; content: string }[]): Blob {
|
||||||
|
const encoder = new TextEncoder();
|
||||||
|
const chunks: Uint8Array[] = [];
|
||||||
|
const entries: ZipEntry[] = [];
|
||||||
|
let offset = 0;
|
||||||
|
|
||||||
|
const DOS_TIME = 0; // 00:00:00
|
||||||
|
const DOS_DATE = (2020 - 1980) << 9 | (1 << 5) | 1; // 2020-01-01
|
||||||
|
|
||||||
|
function push(bytes: Uint8Array) {
|
||||||
|
chunks.push(bytes);
|
||||||
|
offset += bytes.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
function header(size: number) {
|
||||||
|
const buf = new ArrayBuffer(size);
|
||||||
|
return { view: new DataView(buf), bytes: new Uint8Array(buf) };
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const file of files) {
|
||||||
|
const nameBytes = encoder.encode(file.name);
|
||||||
|
const data = encoder.encode(file.content);
|
||||||
|
const crc = crc32(data);
|
||||||
|
const local = header(30 + nameBytes.length);
|
||||||
|
|
||||||
|
local.view.setUint32(0, 0x04034b50, true); // local file header signature
|
||||||
|
local.view.setUint16(4, 20, true); // version needed
|
||||||
|
local.view.setUint16(6, 0x0800, true); // flags: UTF-8 names
|
||||||
|
local.view.setUint16(8, 0, true); // method: stored
|
||||||
|
local.view.setUint16(10, DOS_TIME, true);
|
||||||
|
local.view.setUint16(12, DOS_DATE, true);
|
||||||
|
local.view.setUint32(14, crc, true);
|
||||||
|
local.view.setUint32(18, data.length, true); // compressed size
|
||||||
|
local.view.setUint32(22, data.length, true); // uncompressed size
|
||||||
|
local.view.setUint16(26, nameBytes.length, true);
|
||||||
|
local.view.setUint16(28, 0, true); // extra field length
|
||||||
|
local.bytes.set(nameBytes, 30);
|
||||||
|
|
||||||
|
entries.push({ name: file.name, data, crc, offset });
|
||||||
|
push(local.bytes);
|
||||||
|
push(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
const centralStart = offset;
|
||||||
|
for (const entry of entries) {
|
||||||
|
const nameBytes = encoder.encode(entry.name);
|
||||||
|
const central = header(46 + nameBytes.length);
|
||||||
|
|
||||||
|
central.view.setUint32(0, 0x02014b50, true); // central directory signature
|
||||||
|
central.view.setUint16(4, 20, true); // version made by
|
||||||
|
central.view.setUint16(6, 20, true); // version needed
|
||||||
|
central.view.setUint16(8, 0x0800, true); // flags: UTF-8 names
|
||||||
|
central.view.setUint16(10, 0, true); // method: stored
|
||||||
|
central.view.setUint16(12, DOS_TIME, true);
|
||||||
|
central.view.setUint16(14, DOS_DATE, true);
|
||||||
|
central.view.setUint32(16, entry.crc, true);
|
||||||
|
central.view.setUint32(20, entry.data.length, true);
|
||||||
|
central.view.setUint32(24, entry.data.length, true);
|
||||||
|
central.view.setUint16(28, nameBytes.length, true);
|
||||||
|
central.view.setUint16(30, 0, true); // extra
|
||||||
|
central.view.setUint16(32, 0, true); // comment
|
||||||
|
central.view.setUint16(34, 0, true); // disk number
|
||||||
|
central.view.setUint16(36, 0, true); // internal attrs
|
||||||
|
central.view.setUint32(38, 0, true); // external attrs
|
||||||
|
central.view.setUint32(42, entry.offset, true);
|
||||||
|
central.bytes.set(nameBytes, 46);
|
||||||
|
|
||||||
|
push(central.bytes);
|
||||||
|
}
|
||||||
|
|
||||||
|
const end = header(22);
|
||||||
|
end.view.setUint32(0, 0x06054b50, true); // end of central directory
|
||||||
|
end.view.setUint16(8, entries.length, true);
|
||||||
|
end.view.setUint16(10, entries.length, true);
|
||||||
|
end.view.setUint32(12, offset - centralStart, true);
|
||||||
|
end.view.setUint32(16, centralStart, true);
|
||||||
|
push(end.bytes);
|
||||||
|
|
||||||
|
return new Blob(chunks as BlobPart[], {
|
||||||
|
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------- XML ---------------------------------- */
|
||||||
|
|
||||||
|
// Built via RegExp so the source file stays free of literal control bytes.
|
||||||
|
const CONTROL_CHARS = new RegExp(
|
||||||
|
"[\\u0000-\\u0008\\u000B\\u000C\\u000E-\\u001F]",
|
||||||
|
"g",
|
||||||
|
);
|
||||||
|
|
||||||
|
function escapeXml(value: string): string {
|
||||||
|
return value
|
||||||
|
.replace(/&/g, "&")
|
||||||
|
.replace(/</g, "<")
|
||||||
|
.replace(/>/g, ">")
|
||||||
|
.replace(/"/g, """)
|
||||||
|
// Control characters are illegal in XML 1.0 and make Excel reject the file.
|
||||||
|
.replace(CONTROL_CHARS, "");
|
||||||
|
}
|
||||||
|
|
||||||
|
// 0 -> A, 25 -> Z, 26 -> AA ...
|
||||||
|
function columnName(index: number): string {
|
||||||
|
let name = "";
|
||||||
|
let n = index;
|
||||||
|
while (n >= 0) {
|
||||||
|
name = String.fromCharCode(65 + (n % 26)) + name;
|
||||||
|
n = Math.floor(n / 26) - 1;
|
||||||
|
}
|
||||||
|
return name;
|
||||||
|
}
|
||||||
|
|
||||||
|
function cellXml(ref: string, value: Cell, style: number): string {
|
||||||
|
if (value === null || value === undefined || value === "") {
|
||||||
|
return `<c r="${ref}" s="${style}"/>`;
|
||||||
|
}
|
||||||
|
if (typeof value === "number" && Number.isFinite(value)) {
|
||||||
|
return `<c r="${ref}" s="${style}"><v>${value}</v></c>`;
|
||||||
|
}
|
||||||
|
// Inline strings keep us from having to build a sharedStrings part.
|
||||||
|
return `<c r="${ref}" s="${style}" t="inlineStr"><is><t xml:space="preserve">${escapeXml(
|
||||||
|
String(value),
|
||||||
|
)}</t></is></c>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function sheetXml(headers: string[], rows: Cell[][]): string {
|
||||||
|
const width = Math.max(headers.length, ...rows.map((r) => r.length), 1);
|
||||||
|
const cols =
|
||||||
|
`<cols>` +
|
||||||
|
Array.from(
|
||||||
|
{ length: width },
|
||||||
|
(_, i) => `<col min="${i + 1}" max="${i + 1}" width="22" customWidth="1"/>`,
|
||||||
|
).join("") +
|
||||||
|
`</cols>`;
|
||||||
|
|
||||||
|
const lines: string[] = [];
|
||||||
|
lines.push(
|
||||||
|
`<row r="1">${headers
|
||||||
|
.map((h, i) => cellXml(`${columnName(i)}1`, h, 1))
|
||||||
|
.join("")}</row>`,
|
||||||
|
);
|
||||||
|
rows.forEach((row, r) => {
|
||||||
|
const n = r + 2;
|
||||||
|
lines.push(
|
||||||
|
`<row r="${n}">${row
|
||||||
|
.map((cell, i) => cellXml(`${columnName(i)}${n}`, cell, 0))
|
||||||
|
.join("")}</row>`,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
`<?xml version="1.0" encoding="UTF-8" standalone="yes"?>` +
|
||||||
|
`<worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main">` +
|
||||||
|
// rightToLeft so the sheet opens in RTL orientation, and a frozen header row.
|
||||||
|
`<sheetViews><sheetView rightToLeft="1" workbookViewId="0" tabSelected="1">` +
|
||||||
|
`<pane ySplit="1" topLeftCell="A2" activePane="bottomLeft" state="frozen"/>` +
|
||||||
|
`</sheetView></sheetViews>` +
|
||||||
|
cols +
|
||||||
|
`<sheetData>${lines.join("")}</sheetData>` +
|
||||||
|
`<autoFilter ref="A1:${columnName(width - 1)}${rows.length + 1}"/>` +
|
||||||
|
`</worksheet>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Two cell formats: 0 = body, 1 = bold header on a grey fill.
|
||||||
|
const STYLES_XML =
|
||||||
|
`<?xml version="1.0" encoding="UTF-8" standalone="yes"?>` +
|
||||||
|
`<styleSheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main">` +
|
||||||
|
`<fonts count="2"><font><sz val="11"/><name val="Calibri"/></font>` +
|
||||||
|
`<font><b/><sz val="11"/><name val="Calibri"/></font></fonts>` +
|
||||||
|
`<fills count="3"><fill><patternFill patternType="none"/></fill>` +
|
||||||
|
`<fill><patternFill patternType="gray125"/></fill>` +
|
||||||
|
`<fill><patternFill patternType="solid"><fgColor rgb="FFEEEEEE"/><bgColor indexed="64"/></patternFill></fill></fills>` +
|
||||||
|
`<borders count="1"><border><left/><right/><top/><bottom/><diagonal/></border></borders>` +
|
||||||
|
`<cellStyleXfs count="1"><xf numFmtId="0" fontId="0" fillId="0" borderId="0"/></cellStyleXfs>` +
|
||||||
|
`<cellXfs count="2">` +
|
||||||
|
`<xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0" applyAlignment="1"><alignment vertical="center" wrapText="1"/></xf>` +
|
||||||
|
`<xf numFmtId="0" fontId="1" fillId="2" borderId="0" xfId="0" applyFont="1" applyFill="1" applyAlignment="1"><alignment horizontal="center" vertical="center"/></xf>` +
|
||||||
|
`</cellXfs><cellStyles count="1"><cellStyle name="Normal" xfId="0" builtinId="0"/></cellStyles></styleSheet>`;
|
||||||
|
|
||||||
|
/* -------------------------------- Public -------------------------------- */
|
||||||
|
|
||||||
|
export function exportToExcel(
|
||||||
|
filename: string,
|
||||||
|
headers: string[],
|
||||||
|
rows: Cell[][],
|
||||||
|
sheetName = "Sheet1",
|
||||||
|
) {
|
||||||
|
const safeSheet = escapeXml(sheetName.replace(/[[\]:*?/\\]/g, "").slice(0, 31)) || "Sheet1";
|
||||||
|
|
||||||
|
const blob = zip([
|
||||||
|
{
|
||||||
|
name: "[Content_Types].xml",
|
||||||
|
content:
|
||||||
|
`<?xml version="1.0" encoding="UTF-8" standalone="yes"?>` +
|
||||||
|
`<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types">` +
|
||||||
|
`<Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/>` +
|
||||||
|
`<Default Extension="xml" ContentType="application/xml"/>` +
|
||||||
|
`<Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"/>` +
|
||||||
|
`<Override PartName="/xl/worksheets/sheet1.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/>` +
|
||||||
|
`<Override PartName="/xl/styles.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml"/>` +
|
||||||
|
`</Types>`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "_rels/.rels",
|
||||||
|
content:
|
||||||
|
`<?xml version="1.0" encoding="UTF-8" standalone="yes"?>` +
|
||||||
|
`<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">` +
|
||||||
|
`<Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="xl/workbook.xml"/>` +
|
||||||
|
`</Relationships>`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "xl/workbook.xml",
|
||||||
|
content:
|
||||||
|
`<?xml version="1.0" encoding="UTF-8" standalone="yes"?>` +
|
||||||
|
`<workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" ` +
|
||||||
|
`xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships">` +
|
||||||
|
`<sheets><sheet name="${safeSheet}" sheetId="1" r:id="rId1"/></sheets></workbook>`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "xl/_rels/workbook.xml.rels",
|
||||||
|
content:
|
||||||
|
`<?xml version="1.0" encoding="UTF-8" standalone="yes"?>` +
|
||||||
|
`<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">` +
|
||||||
|
`<Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet1.xml"/>` +
|
||||||
|
`<Relationship Id="rId2" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles" Target="styles.xml"/>` +
|
||||||
|
`</Relationships>`,
|
||||||
|
},
|
||||||
|
{ name: "xl/styles.xml", content: STYLES_XML },
|
||||||
|
{ name: "xl/worksheets/sheet1.xml", content: sheetXml(headers, rows) },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.href = url;
|
||||||
|
link.download = filename.endsWith(".xlsx") ? filename : `${filename}.xlsx`;
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Runs `worker` over `items` with a bounded number of in-flight promises so a
|
||||||
|
// few thousand rows don't open a few thousand sockets at once.
|
||||||
|
export async function mapWithConcurrency<T, R>(
|
||||||
|
items: T[],
|
||||||
|
limit: number,
|
||||||
|
worker: (item: T, index: number) => Promise<R>,
|
||||||
|
onProgress?: (done: number, total: number) => void,
|
||||||
|
): Promise<R[]> {
|
||||||
|
const results = new Array<R>(items.length);
|
||||||
|
let cursor = 0;
|
||||||
|
let done = 0;
|
||||||
|
|
||||||
|
async function run() {
|
||||||
|
while (cursor < items.length) {
|
||||||
|
const index = cursor++;
|
||||||
|
results[index] = await worker(items[index], index);
|
||||||
|
done++;
|
||||||
|
onProgress?.(done, items.length);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
await Promise.all(
|
||||||
|
Array.from({ length: Math.min(limit, items.length) }, run),
|
||||||
|
);
|
||||||
|
return results;
|
||||||
|
}
|
||||||
@@ -2,6 +2,7 @@ import type { ComponentType, SVGProps } from "react";
|
|||||||
import {
|
import {
|
||||||
BreathIcon,
|
BreathIcon,
|
||||||
ChatIcon,
|
ChatIcon,
|
||||||
|
EyeIcon,
|
||||||
HomeIcon,
|
HomeIcon,
|
||||||
ImageIcon,
|
ImageIcon,
|
||||||
MediaIcon,
|
MediaIcon,
|
||||||
@@ -81,6 +82,14 @@ export const NAV: NavSection[] = [
|
|||||||
icon: SliderIcon,
|
icon: SliderIcon,
|
||||||
items: [{ href: "/dashboard/sliders", label: "اسلایدرها" }],
|
items: [{ href: "/dashboard/sliders", label: "اسلایدرها" }],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: "لینکهای مستقیم",
|
||||||
|
icon: EyeIcon,
|
||||||
|
items: [
|
||||||
|
{ href: "/dashboard/deep-links/media", label: "رسانهها" },
|
||||||
|
{ href: "/dashboard/deep-links/categories", label: "دستهبندیها" },
|
||||||
|
],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: "اعلانها",
|
label: "اعلانها",
|
||||||
icon: SliderIcon,
|
icon: SliderIcon,
|
||||||
|
|||||||
Reference in New Issue
Block a user