Amirmahdi/meditation-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
Amirmahdi
2026-09-02 11:56:19 +03:30
parent fdbf02bc07
commit e248943f4c
4 changed files with 340 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/dashboard/categories/page.tsx
+82 -5
View File
@@ -14,8 +14,9 @@ import {
Textarea,
Modal,
PageHeader,
Switch,
} from "@/components/ui";
import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons";
import { EditIcon, EyeIcon, PlusIcon, TrashIcon } from "@/components/icons";
import { MediaPreview } from "@/components/MediaPreview";
import { pickUrl } from "@/lib/media";
import { toFa } from "@/lib/utils";
@@ -29,6 +30,8 @@ interface Category {
order?: number;
description?: string | null;
icon?: string | null;
is_deeplink_only?: boolean;
deep_link?: string | null;
subcategories_count?: number;
}
@@ -48,9 +51,16 @@ const ICON_KEYS = ["icon", "icon_url"];
export default function CategoriesPage() {
const [typeFilter, setTypeFilter] = useState<CategoryType>("media");
const { data, loading, error, reload } = useList<Category>("/categories", {
type: typeFilter,
});
// Deep-link-only categories are hidden from the normal listing, so they need
// 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 [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() {
if (!deleting) return;
setRemoving(true);
@@ -174,6 +203,25 @@ export default function CategoriesPage() {
header: "توضیحات",
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",
header: "زیر‌دسته‌ها",
@@ -189,11 +237,17 @@ export default function CategoriesPage() {
subtitle="مدیریت دسته‌بندی‌های عمومی رسانه، پلی‌لیست و قالب تنفس"
action={
<div className="flex items-center gap-3">
<Switch
checked={showDeepLinks}
onChange={setShowDeepLinks}
label="فقط لینک‌های مستقیم"
/>
<Select
value={typeFilter}
onChange={(e) => setTypeFilter(e.target.value as CategoryType)}
aria-label="نوع دسته‌بندی"
className="w-40"
disabled={showDeepLinks}
>
{TYPE_OPTIONS.map((o) => (
<option key={o.value} value={o.value}>
@@ -214,7 +268,11 @@ export default function CategoriesPage() {
loading={loading}
error={error}
onRetry={reload}
emptyMessage="هنوز دسته‌بندی‌ای ثبت نشده است. اولین دسته‌بندی را بسازید."
emptyMessage={
showDeepLinks
? "هیچ دسته‌بندی لینک مستقیمی وجود ندارد."
: "هنوز دسته‌بندی‌ای ثبت نشده است. اولین دسته‌بندی را بسازید."
}
emptyAction={
<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="ویرایش">
<EditIcon className="h-4 w-4" />
</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
variant="ghost"
onClick={() => setDeleting(row)}
app/dashboard/deep-links/categories/page.tsx
+77 -30
View File
@@ -1,6 +1,6 @@
"use client";
import { useState } from "react";
import { useCallback, useState } from "react";
import { apiFetch, ApiError, toFormData } from "@/lib/api";
import { useList } from "@/lib/useResource";
import { useToast } from "@/components/toast";
@@ -15,7 +15,7 @@ import {
Select,
Textarea,
} from "@/components/ui";
import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons";
import { EditIcon, EyeIcon, PlusIcon, TrashIcon } from "@/components/icons";
import { MediaPreview } from "@/components/MediaPreview";
import { pickUrl } from "@/lib/media";
import { toFa } from "@/lib/utils";
@@ -36,19 +36,40 @@ interface Category {
const ICON_KEYS = ["icon", "icon_url"];
export default function CategoryDeepLinksPage() {
const { data, loading, error, reload } = useList<Category>("/categories", {
deeplink_only: 1,
});
const { data: allCategories, loading: allLoading } =
useList<Category>("/categories");
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: 'new' (create a hidden category) or 'existing' (pick existing to hide).
const [source, setSource] = useState<"new" | "existing">("new");
// 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.
@@ -62,7 +83,7 @@ export default function CategoryDeepLinksPage() {
const [removing, setRemoving] = useState(false);
function resetForm() {
setSource("new");
setSource("existing");
setExistingId("");
setName("");
setType("media");
@@ -77,19 +98,26 @@ export default function CategoryDeepLinksPage() {
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 {
await apiFetch(`/categories/${row.id}`, {
method: "POST",
body: toFormData({
is_deeplink_only: !row.is_deeplink_only ? 1 : 0,
}),
body: toFormData({ is_deeplink_only: 0 }),
});
toast.success(
row.is_deeplink_only
? "از لینک مستقیم خارج شد."
: "به لینک مستقیم تبدیل شد.",
);
toast.success("از لینک مستقیم خارج شد.");
reload();
} catch (err) {
toast.error(err instanceof ApiError ? err.message : "خطا در ذخیره‌سازی");
@@ -101,13 +129,13 @@ export default function CategoryDeepLinksPage() {
setSaving(true);
try {
if (editing) {
setOpen(false);
reload();
// 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("لینک مستقیم بهروزرسانی شد.");
return;
}
if (source === "existing") {
} else if (source === "existing") {
if (!existingId) {
toast.error("دسته‌بندی را انتخاب کنید.");
return;
@@ -228,12 +256,16 @@ export default function CategoryDeepLinksPage() {
}
actions={(row) => (
<>
<Button variant="ghost" onClick={() => openEdit(row)} aria-label="ویرایش">
<EditIcon className="h-4 w-4" />
</Button>
<Button
variant="ghost"
onClick={() => toggleHidden(row)}
onClick={() => unhide(row)}
aria-label="نمایش در فهرست"
title="نمایش در فهرست"
>
<EditIcon className="h-4 w-4" />
<EyeIcon className="h-4 w-4" />
</Button>
<Button
variant="ghost"
@@ -250,7 +282,9 @@ export default function CategoryDeepLinksPage() {
<Modal
open={open}
onClose={() => setOpen(false)}
title="لینک مستقیم دسته‌بندی جدید"
title={
editing ? "ویرایش لینک مستقیم دسته‌بندی" : "لینک مستقیم دسته‌بندی جدید"
}
footer={
<>
<Button variant="secondary" onClick={() => setOpen(false)}>
@@ -267,6 +301,7 @@ export default function CategoryDeepLinksPage() {
onSubmit={save}
className="flex flex-col gap-4"
>
{!editing && (
<Field label="منبع دسته‌بندی" required>
<Select
value={source}
@@ -276,6 +311,7 @@ export default function CategoryDeepLinksPage() {
<option value="existing">استفاده از دسته‌بندی موجود</option>
</Select>
</Field>
)}
{source === "existing" ? (
<Field label="انتخاب دسته‌بندی" required>
@@ -309,13 +345,14 @@ export default function CategoryDeepLinksPage() {
/>
</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="playlist">پلی‌لیست</option>
<option value="breathing_template">قالب تنفس</option>
</Select>
</Field>
@@ -337,7 +374,7 @@ export default function CategoryDeepLinksPage() {
/>
</Field>
<Field label="آیکن">
<Field label={editing ? "آیکن (در صورت تغییر)" : "آیکن"}>
<Input
type="file"
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">
{editing ? (
<>
این دسته‌بندی در فهرست نمایش داده نمیشود و فقط با لینک مستقیم قابل
دسترسی است. برای بازگرداندن آن به فهرست، از دکمه «نمایش در فهرست»
استفاده کنید.
</>
) : (
<>
پس از ذخیره، این دسته‌بندی در فهرست نمایش داده نمیشود و فقط با لینک
مستقیم قابل دسترسی است.
</>
)}
</p>
</form>
</Modal>
app/dashboard/deep-links/media/page.tsx
+79 -29
View File
@@ -1,6 +1,6 @@
"use client";
import { useState } from "react";
import { useCallback, useState } from "react";
import { apiFetch, ApiError, toFormData } from "@/lib/api";
import { useList } from "@/lib/useResource";
import { useToast } from "@/components/toast";
@@ -14,10 +14,8 @@ import {
PageHeader,
Select,
Textarea,
Badge,
Switch,
} from "@/components/ui";
import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons";
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";
@@ -70,14 +68,27 @@ function DeepLink({ deep_link }: { deep_link?: string | null }) {
}
export default function MediaDeepLinksPage() {
const { data, loading, error, reload } = useList<Media>("/media", {
deeplink_only: 1,
});
const { data: allMedia, loading: allLoading } = useList<Media>("/media", {
count: 500,
});
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);
@@ -118,17 +129,29 @@ export default function MediaDeepLinksPage() {
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 {
await apiFetch(`/media/${row.id}`, {
method: "POST",
body: toFormData({
is_deeplink_only: !row.is_deeplink_only ? 1 : 0,
}),
body: toFormData({ is_deeplink_only: 0 }),
});
toast.success(
row.is_deeplink_only ? "از لینک مستقیم خارج شد." : "به لینک مستقیم تبدیل شد.",
);
toast.success("از لینک مستقیم خارج شد.");
reload();
} catch (err) {
toast.error(err instanceof ApiError ? err.message : "خطا در ذخیره‌سازی");
@@ -140,13 +163,20 @@ export default function MediaDeepLinksPage() {
setSaving(true);
try {
if (editing) {
setOpen(false);
reload();
// 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("لینک مستقیم بهروزرسانی شد.");
return;
}
if (source === "existing") {
} else if (source === "existing") {
// Toggle the chosen existing media to deeplink-only.
if (!existingId) {
toast.error("رسانهای را انتخاب کنید.");
@@ -256,12 +286,16 @@ export default function MediaDeepLinksPage() {
}
actions={(row) => (
<>
<Button variant="ghost" onClick={() => openEdit(row)} aria-label="ویرایش">
<EditIcon className="h-4 w-4" />
</Button>
<Button
variant="ghost"
onClick={() => toggleHidden(row)}
onClick={() => unhide(row)}
aria-label="نمایش در فهرست"
title="نمایش در فهرست"
>
<EditIcon className="h-4 w-4" />
<EyeIcon className="h-4 w-4" />
</Button>
<Button
variant="ghost"
@@ -278,7 +312,7 @@ export default function MediaDeepLinksPage() {
<Modal
open={open}
onClose={() => setOpen(false)}
title="لینک مستقیم رسانه جدید"
title={editing ? "ویرایش لینک مستقیم رسانه" : "لینک مستقیم رسانه جدید"}
footer={
<>
<Button variant="secondary" onClick={() => setOpen(false)}>
@@ -295,6 +329,7 @@ export default function MediaDeepLinksPage() {
onSubmit={save}
className="flex flex-col gap-4"
>
{!editing && (
<Field label="منبع رسانه" required>
<Select
value={source}
@@ -304,6 +339,7 @@ export default function MediaDeepLinksPage() {
<option value="existing">استفاده از رسانه موجود</option>
</Select>
</Field>
)}
{source === "existing" ? (
<Field label="انتخاب رسانه" required>
@@ -348,6 +384,7 @@ export default function MediaDeepLinksPage() {
onPickId={setImageId}
file={imageFile}
onPickFile={setImageFile}
existingUrl={editing ? pickUrl(editing, IMAGE_KEYS) : null}
/>
</Field>
@@ -358,7 +395,10 @@ export default function MediaDeepLinksPage() {
</Select>
</Field>
<Field label="فایل" hint="بارگذاری فایل یا وارد کردن لینک خارجی">
<Field
label={editing ? "فایل (در صورت تغییر)" : "فایل"}
hint="بارگذاری فایل یا وارد کردن لینک خارجی"
>
<Input
type="file"
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">
پس از ذخیره، این رسانه در فهرست «رسانهها» نمایش داده نمیشود و فقط با لینک
مستقیم قابل دسترسی است.
{editing ? (
<>
این رسانه در فهرست «رسانهها» نمایش داده نمیشود و فقط با لینک مستقیم
قابل دسترسی است. برای بازگرداندن آن به فهرست، از دکمه «نمایش در فهرست»
استفاده کنید.
</>
) : (
<>
پس از ذخیره، این رسانه در فهرست «رسانهها» نمایش داده نمیشود و فقط با
لینک مستقیم قابل دسترسی است.
</>
)}
</p>
</form>
</Modal>
app/dashboard/media/page.tsx
+78 -4
View File
@@ -17,7 +17,7 @@ import {
PageHeader,
Badge,
} 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 { MediaPreview } from "@/components/MediaPreview";
import { ImagePicker } from "@/components/ImagePicker";
@@ -42,6 +42,8 @@ interface Media {
duration?: number;
visibility?: string;
is_premium?: boolean;
is_deeplink_only?: boolean;
deep_link?: string | null;
external_url?: string | null;
image_id?: number | null;
image?: unknown;
@@ -86,7 +88,13 @@ function ChipMultiSelect({
export default function MediaPage() {
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", {
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() {
if (!deleting) return;
setRemoving(true);
@@ -258,6 +284,25 @@ export default function MediaPage() {
header: "مدت",
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",
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
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="جستجو در رسانه‌ها..."
disabled={showDeepLinks}
/>
</div>
<Switch
checked={showDeepLinks}
onChange={setShowDeepLinks}
label="فقط لینک‌های مستقیم"
/>
</div>
@@ -296,7 +349,11 @@ export default function MediaPage() {
loading={loading}
error={error}
onRetry={reload}
emptyMessage="هنوز رسانه‌ای اضافه نکرده‌اید. اولین رسانه را بارگذاری کنید."
emptyMessage={
showDeepLinks
? "هیچ رسانه لینک مستقیمی وجود ندارد."
: "هنوز رسانه‌ای اضافه نکرده‌اید. اولین رسانه را بارگذاری کنید."
}
emptyAction={
<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="ویرایش">
<EditIcon className="h-4 w-4" />
</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
variant="ghost"
onClick={() => setDeleting(row)}