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/deep-links/categories/page.tsx
+88 -41
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,15 +301,17 @@ export default function CategoryDeepLinksPage() {
onSubmit={save}
className="flex flex-col gap-4"
>
<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>
{!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>
@@ -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
+88 -38
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,15 +329,17 @@ export default function MediaDeepLinksPage() {
onSubmit={save}
className="flex flex-col gap-4"
>
<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>
{!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>
@@ -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>