Compare commits

...
4 Commits
Author SHA1 Message Date
Amirmahdi 7c6d16693c feat: update deploy 2026-06-11 10:59:26 +03:30
Amirmahdi 3cc1d1385c feat: add category 2026-06-11 10:28:19 +03:30
Amirmahdi bd71076c72 feat: category type 2026-06-11 09:51:02 +03:30
Amirmahdi 944d3bc00a feat: media & music file name 2026-06-07 21:53:01 +03:30
9 changed files with 100 additions and 42 deletions
Regular → Executable
View File
@@ -10,6 +10,7 @@ import {
ConfirmDialog, ConfirmDialog,
Field, Field,
Input, Input,
Select,
Textarea, Textarea,
Modal, Modal,
PageHeader, PageHeader,
@@ -19,24 +20,42 @@ 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";
type CategoryType = "media" | "playlist" | "breathing_template";
interface Category { interface Category {
id: number; id: number;
name: string; name: string;
type: CategoryType;
description?: string | null; description?: string | null;
icon?: string | null; icon?: string | null;
subcategories_count?: number; subcategories_count?: number;
} }
// General category types, shared across media, playlists and breathing templates.
const TYPE_OPTIONS: { value: CategoryType; label: string }[] = [
{ value: "media", label: "رسانه" },
{ value: "playlist", label: "پلی‌لیست" },
{ value: "breathing_template", label: "قالب تنفس" },
];
const TYPE_LABELS: Record<CategoryType, string> = Object.fromEntries(
TYPE_OPTIONS.map((o) => [o.value, o.label]),
) as Record<CategoryType, string>;
// The icon is a direct image-file field on the category (not an image_id ref). // The icon is a direct image-file field on the category (not an image_id ref).
const ICON_KEYS = ["icon", "icon_url"]; const ICON_KEYS = ["icon", "icon_url"];
export default function MediaCategoriesPage() { export default function CategoriesPage() {
const { data, loading, error, reload } = useList<Category>("/categories"); const [typeFilter, setTypeFilter] = useState<CategoryType>("media");
const { data, loading, error, reload } = useList<Category>("/categories", {
type: typeFilter,
});
const toast = useToast(); const toast = useToast();
const [editing, setEditing] = useState<Category | null>(null); const [editing, setEditing] = useState<Category | null>(null);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [name, setName] = useState(""); const [name, setName] = useState("");
const [type, setType] = useState<CategoryType>("media");
const [description, setDescription] = useState(""); const [description, setDescription] = useState("");
const [icon, setIcon] = useState<File | null>(null); const [icon, setIcon] = useState<File | null>(null);
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
@@ -47,6 +66,7 @@ export default function MediaCategoriesPage() {
function openCreate() { function openCreate() {
setEditing(null); setEditing(null);
setName(""); setName("");
setType(typeFilter);
setDescription(""); setDescription("");
setIcon(null); setIcon(null);
setOpen(true); setOpen(true);
@@ -54,6 +74,7 @@ export default function MediaCategoriesPage() {
function openEdit(row: Category) { function openEdit(row: Category) {
setEditing(row); setEditing(row);
setName(row.name ?? ""); setName(row.name ?? "");
setType(row.type ?? "media");
setDescription(row.description ?? ""); setDescription(row.description ?? "");
setIcon(null); setIcon(null);
setOpen(true); setOpen(true);
@@ -68,6 +89,7 @@ export default function MediaCategoriesPage() {
const body = toFormData({ const body = toFormData({
_method: "PUT", _method: "PUT",
name, name,
type,
description, description,
icon, icon,
}); });
@@ -76,7 +98,7 @@ export default function MediaCategoriesPage() {
} else { } else {
await apiFetch("/categories", { await apiFetch("/categories", {
method: "POST", method: "POST",
body: toFormData({ name, description, icon }), body: toFormData({ name, type, description, icon }),
}); });
toast.success("دسته‌بندی افزوده شد."); toast.success("دسته‌بندی افزوده شد.");
} }
@@ -114,6 +136,12 @@ export default function MediaCategoriesPage() {
), ),
}, },
{ key: "name", header: "نام دسته‌بندی" }, { key: "name", header: "نام دسته‌بندی" },
{
key: "type",
header: "نوع",
render: (r) => TYPE_LABELS[r.type] ?? r.type,
className: "w-28",
},
{ {
key: "description", key: "description",
header: "توضیحات", header: "توضیحات",
@@ -130,12 +158,26 @@ export default function MediaCategoriesPage() {
return ( return (
<div> <div>
<PageHeader <PageHeader
title="دسته‌بندی رسانه‌ها" title="دسته‌بندی‌ها"
subtitle="مدیریت دسته‌بندی‌های اصلی محتوای صوتی و تصویری" subtitle="مدیریت دسته‌بندی‌های عمومی رسانه، پلی‌لیست و قالب تنفس"
action={ action={
<Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}> <div className="flex items-center gap-3">
دستهبندی جدید <Select
</Button> value={typeFilter}
onChange={(e) => setTypeFilter(e.target.value as CategoryType)}
aria-label="نوع دسته‌بندی"
className="w-40"
>
{TYPE_OPTIONS.map((o) => (
<option key={o.value} value={o.value}>
{o.label}
</option>
))}
</Select>
<Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}>
دستهبندی جدید
</Button>
</div>
} }
/> />
@@ -184,6 +226,19 @@ export default function MediaCategoriesPage() {
} }
> >
<form id="category-form" onSubmit={save} className="flex flex-col gap-4"> <form id="category-form" onSubmit={save} className="flex flex-col gap-4">
<Field label="نوع" required>
<Select
value={type}
onChange={(e) => setType(e.target.value as CategoryType)}
>
{TYPE_OPTIONS.map((o) => (
<option key={o.value} value={o.value}>
{o.label}
</option>
))}
</Select>
</Field>
<Field label="نام دسته‌بندی" required> <Field label="نام دسته‌بندی" required>
<Input <Input
value={name} value={name}
+10 -3
View File
@@ -18,7 +18,7 @@ import {
Badge, Badge,
} from "@/components/ui"; } from "@/components/ui";
import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons"; import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons";
import { formatMinutes } 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";
import { pickUrl, SOUND_KEYS, VIDEO_KEYS, IMAGE_KEYS } from "@/lib/media"; import { pickUrl, SOUND_KEYS, VIDEO_KEYS, IMAGE_KEYS } from "@/lib/media";
@@ -85,7 +85,9 @@ 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 }); const { data, loading, error, reload } = useList<Media>("/media", { search });
const { data: categories } = useList<Category>("/categories"); const { data: categories } = useList<Category>("/categories", {
type: "media",
});
const { data: subCategories } = useList<Category>("/sub-categories"); const { data: subCategories } = useList<Category>("/sub-categories");
const toast = useToast(); const toast = useToast();
@@ -397,7 +399,12 @@ export default function MediaPage() {
<Input <Input
type="file" type="file"
accept="audio/*,video/*" accept="audio/*,video/*"
onChange={(e) => setFile(e.target.files?.[0] ?? null)} onChange={(e) => {
const f = e.target.files?.[0] ?? null;
setFile(f);
// Fill the title from the file name if still empty.
if (f && !title.trim()) setTitle(fileNameToTitle(f.name));
}}
/> />
</Field> </Field>
+7 -2
View File
@@ -15,7 +15,7 @@ import {
PageHeader, PageHeader,
} from "@/components/ui"; } from "@/components/ui";
import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons"; import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons";
import { formatMinutes } 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";
import { pickUrl, SOUND_KEYS, IMAGE_KEYS } from "@/lib/media"; import { pickUrl, SOUND_KEYS, IMAGE_KEYS } from "@/lib/media";
@@ -301,7 +301,12 @@ export default function MusicTracksPage() {
<Input <Input
type="file" type="file"
accept="audio/*" accept="audio/*"
onChange={(e) => setFile(e.target.files?.[0] ?? null)} onChange={(e) => {
const f = e.target.files?.[0] ?? null;
setFile(f);
// Fill the title from the file name if still empty.
if (f && !title.trim()) setTitle(fileNameToTitle(f.name));
}}
required={!editing} required={!editing}
/> />
</Field> </Field>
+9 -5
View File
@@ -33,14 +33,18 @@ export const NAV: NavSection[] = [
icon: HomeIcon, icon: HomeIcon,
items: [{ href: "/dashboard", label: "خانه" }], items: [{ href: "/dashboard", label: "خانه" }],
}, },
{
label: "عمومی",
icon: TagIcon,
items: [
{ href: "/dashboard/categories", label: "دسته‌بندی‌ها" },
{ href: "/dashboard/sub-categories", label: "زیر‌دسته‌ها" },
],
},
{ {
label: "رسانه‌ها", label: "رسانه‌ها",
icon: MediaIcon, icon: MediaIcon,
items: [ items: [{ href: "/dashboard/media", label: "فهرست رسانه‌ها" }],
{ href: "/dashboard/media", label: "فهرست رسانه‌ها" },
{ href: "/dashboard/media/categories", label: "دسته‌بندی‌ها" },
{ href: "/dashboard/media/sub-categories", label: "زیر‌دسته‌ها" },
],
}, },
{ {
label: "موسیقی", label: "موسیقی",
+10
View File
@@ -19,6 +19,16 @@ export function formatDuration(seconds?: number | null): string {
return toFa(`${m}:${String(s).padStart(2, "0")}`); return toFa(`${m}:${String(s).padStart(2, "0")}`);
} }
// Derive a clean title from an uploaded file name: drop the extension and turn
// underscores/dashes into spaces (e.g. "morning_calm-01.mp3" -> "morning calm 01").
export function fileNameToTitle(name: string): string {
return name
.replace(/\.[^./\\]+$/, "")
.replace(/[_-]+/g, " ")
.replace(/\s+/g, " ")
.trim();
}
// Minutes -> Persian label. Media and music store `duration` in minutes. // Minutes -> Persian label. Media and music store `duration` in minutes.
export function formatMinutes(minutes?: number | null): string { export function formatMinutes(minutes?: number | null): string {
if (minutes === null || minutes === undefined) return "—"; if (minutes === null || minutes === undefined) return "—";
+1 -24
View File
@@ -277,30 +277,6 @@
"node": ">=6.9.0" "node": ">=6.9.0"
} }
}, },
"node_modules/@emnapi/core": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
"integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
"dev": true,
"license": "MIT",
"optional": true,
"peer": true,
"dependencies": {
"@emnapi/wasi-threads": "1.2.1",
"tslib": "^2.4.0"
}
},
"node_modules/@emnapi/runtime": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
"integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
"license": "MIT",
"optional": true,
"peer": true,
"dependencies": {
"tslib": "^2.4.0"
}
},
"node_modules/@emnapi/wasi-threads": { "node_modules/@emnapi/wasi-threads": {
"version": "1.2.1", "version": "1.2.1",
"resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz", "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
@@ -3312,6 +3288,7 @@
"integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==", "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@rtsao/scc": "^1.1.0", "@rtsao/scc": "^1.1.0",
"array-includes": "^3.1.9", "array-includes": "^3.1.9",
Regular → Executable
View File