feat: add media_detail
This commit is contained in:
@@ -41,6 +41,9 @@ interface Media {
|
|||||||
is_premium?: boolean;
|
is_premium?: boolean;
|
||||||
external_url?: string | null;
|
external_url?: string | null;
|
||||||
image_id?: number | null;
|
image_id?: number | null;
|
||||||
|
image?: unknown;
|
||||||
|
detail_image_id?: number | null;
|
||||||
|
detail_image?: unknown;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Compact multi-select rendered as toggle chips.
|
// Compact multi-select rendered as toggle chips.
|
||||||
@@ -101,6 +104,8 @@ export default function MediaPage() {
|
|||||||
const [externalUrl, setExternalUrl] = useState("");
|
const [externalUrl, setExternalUrl] = useState("");
|
||||||
const [imageId, setImageId] = useState<number | null>(null);
|
const [imageId, setImageId] = useState<number | null>(null);
|
||||||
const [imageFile, setImageFile] = useState<File | null>(null);
|
const [imageFile, setImageFile] = useState<File | null>(null);
|
||||||
|
const [detailImageId, setDetailImageId] = useState<number | null>(null);
|
||||||
|
const [detailImageFile, setDetailImageFile] = useState<File | null>(null);
|
||||||
|
|
||||||
const [deleting, setDeleting] = useState<Media | null>(null);
|
const [deleting, setDeleting] = useState<Media | null>(null);
|
||||||
const [removing, setRemoving] = useState(false);
|
const [removing, setRemoving] = useState(false);
|
||||||
@@ -118,6 +123,8 @@ export default function MediaPage() {
|
|||||||
setExternalUrl("");
|
setExternalUrl("");
|
||||||
setImageId(null);
|
setImageId(null);
|
||||||
setImageFile(null);
|
setImageFile(null);
|
||||||
|
setDetailImageId(null);
|
||||||
|
setDetailImageFile(null);
|
||||||
}
|
}
|
||||||
|
|
||||||
function openCreate() {
|
function openCreate() {
|
||||||
@@ -142,6 +149,8 @@ export default function MediaPage() {
|
|||||||
setExternalUrl(row.external_url ?? "");
|
setExternalUrl(row.external_url ?? "");
|
||||||
setImageId(row.image_id ?? null);
|
setImageId(row.image_id ?? null);
|
||||||
setImageFile(null);
|
setImageFile(null);
|
||||||
|
setDetailImageId(row.detail_image_id ?? null);
|
||||||
|
setDetailImageFile(null);
|
||||||
setOpen(true);
|
setOpen(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -166,6 +175,8 @@ export default function MediaPage() {
|
|||||||
external_url: externalUrl,
|
external_url: externalUrl,
|
||||||
image_id: imageId,
|
image_id: imageId,
|
||||||
image: imageFile,
|
image: imageFile,
|
||||||
|
detail_image_id: detailImageId,
|
||||||
|
detail_image: detailImageFile,
|
||||||
});
|
});
|
||||||
if (editing) {
|
if (editing) {
|
||||||
// File-bearing update: POST /media/:id (multipart, file optional)
|
// File-bearing update: POST /media/:id (multipart, file optional)
|
||||||
@@ -335,7 +346,7 @@ export default function MediaPage() {
|
|||||||
/>
|
/>
|
||||||
</Field>
|
</Field>
|
||||||
|
|
||||||
<Field label="تصویر شاخص" hint="انتخاب از کتابخانه یا بارگذاری تصویر جدید">
|
<Field label="تصویر لیست" hint="در فهرست نمایش داده میشود">
|
||||||
<ImagePicker
|
<ImagePicker
|
||||||
imageId={imageId}
|
imageId={imageId}
|
||||||
onPickId={setImageId}
|
onPickId={setImageId}
|
||||||
@@ -345,6 +356,16 @@ export default function MediaPage() {
|
|||||||
/>
|
/>
|
||||||
</Field>
|
</Field>
|
||||||
|
|
||||||
|
<Field label="تصویر جزئیات" hint="در صفحه جزئیات نمایش داده میشود">
|
||||||
|
<ImagePicker
|
||||||
|
imageId={detailImageId}
|
||||||
|
onPickId={setDetailImageId}
|
||||||
|
file={detailImageFile}
|
||||||
|
onPickFile={setDetailImageFile}
|
||||||
|
existingUrl={editing ? pickUrl(editing, ["detail_image"]) : null}
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
|
||||||
<Field label="دستهبندیها">
|
<Field label="دستهبندیها">
|
||||||
<ChipMultiSelect
|
<ChipMultiSelect
|
||||||
options={categories}
|
options={categories}
|
||||||
|
|||||||
@@ -26,6 +26,8 @@ interface Playlist {
|
|||||||
description?: string;
|
description?: string;
|
||||||
image_id?: number | null;
|
image_id?: number | null;
|
||||||
image?: unknown;
|
image?: unknown;
|
||||||
|
detail_image_id?: number | null;
|
||||||
|
detail_image?: unknown;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface MusicCategory {
|
interface MusicCategory {
|
||||||
@@ -49,6 +51,8 @@ export default function MusicPlaylistsPage() {
|
|||||||
const [subcategoryIds, setSubcategoryIds] = useState<number[]>([]);
|
const [subcategoryIds, setSubcategoryIds] = useState<number[]>([]);
|
||||||
const [imageId, setImageId] = useState<number | null>(null);
|
const [imageId, setImageId] = useState<number | null>(null);
|
||||||
const [imageFile, setImageFile] = useState<File | null>(null);
|
const [imageFile, setImageFile] = useState<File | null>(null);
|
||||||
|
const [detailImageId, setDetailImageId] = useState<number | null>(null);
|
||||||
|
const [detailImageFile, setDetailImageFile] = useState<File | null>(null);
|
||||||
|
|
||||||
const [deleting, setDeleting] = useState<Playlist | null>(null);
|
const [deleting, setDeleting] = useState<Playlist | null>(null);
|
||||||
const [removing, setRemoving] = useState(false);
|
const [removing, setRemoving] = useState(false);
|
||||||
@@ -65,6 +69,8 @@ export default function MusicPlaylistsPage() {
|
|||||||
setSubcategoryIds([]);
|
setSubcategoryIds([]);
|
||||||
setImageId(null);
|
setImageId(null);
|
||||||
setImageFile(null);
|
setImageFile(null);
|
||||||
|
setDetailImageId(null);
|
||||||
|
setDetailImageFile(null);
|
||||||
setOpen(true);
|
setOpen(true);
|
||||||
}
|
}
|
||||||
function openEdit(row: Playlist) {
|
function openEdit(row: Playlist) {
|
||||||
@@ -75,6 +81,8 @@ export default function MusicPlaylistsPage() {
|
|||||||
setSubcategoryIds([]);
|
setSubcategoryIds([]);
|
||||||
setImageId(row.image_id ?? null);
|
setImageId(row.image_id ?? null);
|
||||||
setImageFile(null);
|
setImageFile(null);
|
||||||
|
setDetailImageId(row.detail_image_id ?? null);
|
||||||
|
setDetailImageFile(null);
|
||||||
setOpen(true);
|
setOpen(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -91,6 +99,8 @@ export default function MusicPlaylistsPage() {
|
|||||||
description,
|
description,
|
||||||
image_id: imageId,
|
image_id: imageId,
|
||||||
image: imageFile,
|
image: imageFile,
|
||||||
|
detail_image_id: detailImageId,
|
||||||
|
detail_image: detailImageFile,
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
toast.success("پلیلیست ویرایش شد.");
|
toast.success("پلیلیست ویرایش شد.");
|
||||||
@@ -105,6 +115,8 @@ export default function MusicPlaylistsPage() {
|
|||||||
subcategory_ids: subcategoryIds,
|
subcategory_ids: subcategoryIds,
|
||||||
image_id: imageId,
|
image_id: imageId,
|
||||||
image: imageFile,
|
image: imageFile,
|
||||||
|
detail_image_id: detailImageId,
|
||||||
|
detail_image: detailImageFile,
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
toast.success("پلیلیست افزوده شد.");
|
toast.success("پلیلیست افزوده شد.");
|
||||||
@@ -225,7 +237,7 @@ export default function MusicPlaylistsPage() {
|
|||||||
/>
|
/>
|
||||||
</Field>
|
</Field>
|
||||||
|
|
||||||
<Field label="تصویر">
|
<Field label="تصویر لیست">
|
||||||
<ImagePicker
|
<ImagePicker
|
||||||
imageId={imageId}
|
imageId={imageId}
|
||||||
onPickId={setImageId}
|
onPickId={setImageId}
|
||||||
@@ -235,6 +247,16 @@ export default function MusicPlaylistsPage() {
|
|||||||
/>
|
/>
|
||||||
</Field>
|
</Field>
|
||||||
|
|
||||||
|
<Field label="تصویر جزئیات">
|
||||||
|
<ImagePicker
|
||||||
|
imageId={detailImageId}
|
||||||
|
onPickId={setDetailImageId}
|
||||||
|
file={detailImageFile}
|
||||||
|
onPickFile={setDetailImageFile}
|
||||||
|
existingUrl={editing ? pickUrl(editing, ["detail_image"]) : null}
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
|
||||||
{!editing && (
|
{!editing && (
|
||||||
<>
|
<>
|
||||||
<Field label="دستهبندیها">
|
<Field label="دستهبندیها">
|
||||||
|
|||||||
Reference in New Issue
Block a user