feat: enhance HeroSliderPage with image preview and improved file handling
This commit is contained in:
parent
93b116673e
commit
2915f4ea10
|
|
@ -1,4 +1,4 @@
|
|||
import { useEffect } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useForm, useFieldArray } from "react-hook-form";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import * as yup from "yup";
|
||||
|
|
@ -10,6 +10,7 @@ import { LandingHeroData, HeroImage } from "./core/_models";
|
|||
import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
|
||||
import { PlusCircle, Trash2, Save } from "lucide-react";
|
||||
import { useFileUpload, useFileDelete } from "@/hooks/useFileUpload";
|
||||
import { Modal } from "@/components/ui/Modal";
|
||||
|
||||
const heroImageSchema = yup.object({
|
||||
alt_text: yup.string().required("متن ALT الزامی است"),
|
||||
|
|
@ -28,6 +29,7 @@ const landingHeroSchema = yup.object({
|
|||
export const HeroSliderPage = () => {
|
||||
const { data, isLoading } = useLandingHero();
|
||||
const { mutate: updateHero, isPending: isSaving } = useUpdateLandingHero();
|
||||
const [preview, setPreview] = useState<{ url: string; alt: string } | null>(null);
|
||||
|
||||
const {
|
||||
control,
|
||||
|
|
@ -35,6 +37,7 @@ export const HeroSliderPage = () => {
|
|||
formState: { errors, isDirty, isValid },
|
||||
reset,
|
||||
setValue,
|
||||
watch,
|
||||
} = useForm<LandingHeroData>({
|
||||
resolver: yupResolver(landingHeroSchema) as any,
|
||||
mode: "onChange",
|
||||
|
|
@ -97,35 +100,55 @@ export const HeroSliderPage = () => {
|
|||
|
||||
return (
|
||||
<div className="p-6 max-w-4xl mx-auto">
|
||||
<h1 className="text-2xl font-bold mb-6">مدیریت اسلایدر صفحه اصلی</h1>
|
||||
<h1 className="text-2xl font-bold mb-6 text-gray-900 dark:text-gray-100">مدیریت اسلایدر صفحه اصلی</h1>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
|
||||
{/* Main slide */}
|
||||
<div className="card p-6 space-y-6">
|
||||
<h2 className="text-lg font-semibold">اسلاید اصلی</h2>
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">اسلاید اصلی</h2>
|
||||
<Input
|
||||
label="ALT Text"
|
||||
{...control.register("main.alt_text" as const)}
|
||||
error={(errors as any).main?.alt_text?.message}
|
||||
/>
|
||||
|
||||
<FileUploader
|
||||
onUpload={handleMainFileUpload}
|
||||
onRemove={handleMainFileRemove}
|
||||
acceptedTypes={["image/*"]}
|
||||
maxFileSize={5 * 1024 * 1024}
|
||||
maxFiles={1}
|
||||
mode="single"
|
||||
label="تصویر اسلاید"
|
||||
description="تصویر را انتخاب کنید (حداکثر 5MB)"
|
||||
error={(errors as any).main?.url?.message}
|
||||
/>
|
||||
{watch("main.url") && (
|
||||
<div className="flex items-center gap-3">
|
||||
<img
|
||||
src={watch("main.url") as string}
|
||||
alt={watch("main.alt_text") as string}
|
||||
className="w-40 h-24 object-cover rounded border cursor-zoom-in"
|
||||
onClick={() => setPreview({ url: watch("main.url") as string, alt: (watch("main.alt_text") as string) || "" })}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={() => setValue("main.url", "", { shouldDirty: true, shouldValidate: true })}
|
||||
>
|
||||
حذف تصویر فعلی
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!watch("main.url") && (
|
||||
<FileUploader
|
||||
onUpload={handleMainFileUpload}
|
||||
onRemove={handleMainFileRemove}
|
||||
acceptedTypes={["image/*"]}
|
||||
maxFileSize={5 * 1024 * 1024}
|
||||
maxFiles={1}
|
||||
mode="single"
|
||||
label="تصویر اسلاید"
|
||||
description="تصویر را انتخاب کنید (حداکثر 5MB)"
|
||||
error={(errors as any).main?.url?.message}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Side slides */}
|
||||
<div className="card p-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold">اسلایدهای جانبی</h2>
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">اسلایدهای جانبی</h2>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
|
|
@ -154,17 +177,37 @@ export const HeroSliderPage = () => {
|
|||
}
|
||||
/>
|
||||
|
||||
<FileUploader
|
||||
onUpload={handleSideFileUpload(index)}
|
||||
onRemove={handleSideFileRemove(index)}
|
||||
acceptedTypes={["image/*"]}
|
||||
maxFileSize={5 * 1024 * 1024}
|
||||
maxFiles={1}
|
||||
mode="single"
|
||||
label="تصویر اسلاید"
|
||||
description="تصویر را انتخاب کنید (حداکثر 5MB)"
|
||||
error={(errors as any).side?.[index]?.url?.message as string | undefined}
|
||||
/>
|
||||
{watch(`side.${index}.url` as const) && (
|
||||
<div className="flex items-center gap-3">
|
||||
<img
|
||||
src={watch(`side.${index}.url` as const) as string}
|
||||
alt={(watch(`side.${index}.alt_text` as const) as string) || "preview"}
|
||||
className="w-32 h-20 object-cover rounded border cursor-zoom-in"
|
||||
onClick={() => setPreview({ url: watch(`side.${index}.url` as const) as string, alt: (watch(`side.${index}.alt_text` as const) as string) || "" })}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={() => setValue(`side.${index}.url` as const, "", { shouldDirty: true, shouldValidate: true })}
|
||||
>
|
||||
حذف تصویر فعلی
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!watch(`side.${index}.url` as const) && (
|
||||
<FileUploader
|
||||
onUpload={handleSideFileUpload(index)}
|
||||
onRemove={handleSideFileRemove(index)}
|
||||
acceptedTypes={["image/*"]}
|
||||
maxFileSize={5 * 1024 * 1024}
|
||||
maxFiles={1}
|
||||
mode="single"
|
||||
label="تصویر اسلاید"
|
||||
description="تصویر را انتخاب کنید (حداکثر 5MB)"
|
||||
error={(errors as any).side?.[index]?.url?.message as string | undefined}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -179,6 +222,11 @@ export const HeroSliderPage = () => {
|
|||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
<Modal isOpen={!!preview} onClose={() => setPreview(null)} title={preview?.alt || "مشاهده تصویر"}>
|
||||
{preview && (
|
||||
<img src={preview.url} alt={preview.alt} className="max-h-[70vh] w-auto mx-auto rounded" />
|
||||
)}
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,10 +11,14 @@ import {
|
|||
} from "./_models";
|
||||
|
||||
export const getLandingHero = async () => {
|
||||
const response = await httpGetRequest<LandingHeroResponse>(
|
||||
const response = await httpGetRequest<any>(
|
||||
APIUrlGenerator(API_ROUTES.GET_LANDING_HERO)
|
||||
);
|
||||
return response.data.data;
|
||||
const root = response.data;
|
||||
const setting = root?.setting ?? root;
|
||||
const data: LandingHeroData = setting?.data ??
|
||||
root?.data ?? { main: { alt_text: "", url: "", thumbnail: "" }, side: [] };
|
||||
return data;
|
||||
};
|
||||
|
||||
export const updateLandingHero = async (data: LandingHeroData) => {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import { FormHeader, PageContainer, SectionTitle, Label } from '../../../compone
|
|||
|
||||
const maintenanceSchema = yup.object({
|
||||
title: yup.string().required('عنوان نگهداری الزامی است'),
|
||||
description: yup.string().required('توضیحات نگهداری الزامی است'),
|
||||
description: yup.string(),
|
||||
content: yup.string().required('محتوای نگهداری الزامی است'),
|
||||
image: yup.string().required('تصویر نگهداری الزامی است'),
|
||||
});
|
||||
|
|
@ -28,7 +28,7 @@ const optionSchema = yup.object({
|
|||
|
||||
const productOptionSchema = yup.object({
|
||||
title: yup.string().required('عنوان الزامی است').min(2, 'عنوان باید حداقل 2 کاراکتر باشد'),
|
||||
description: yup.string().required('توضیحات الزامی است'),
|
||||
description: yup.string(),
|
||||
maintenance: maintenanceSchema.required('اطلاعات نگهداری الزامی است'),
|
||||
options: yup.array().of(optionSchema).min(1, 'حداقل یک گزینه باید وارد شود').required('گزینهها الزامی است'),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -49,8 +49,28 @@ export const getProducts = async (filters?: ProductFilters) => {
|
|||
response.data.products &&
|
||||
Array.isArray(response.data.products)
|
||||
) {
|
||||
// Normalize products for UI consumption
|
||||
const normalizedProducts = response.data.products.map((p: any) => {
|
||||
// Derive price from first variant if direct price is absent
|
||||
const firstVariant = (p.product_variants || p.variants || [])[0] || {};
|
||||
const price = p.price ?? firstVariant.price_amount ?? 0;
|
||||
|
||||
// Determine primary category
|
||||
const primaryCategory = (p.product_categories || p.categories || [])[0];
|
||||
|
||||
// Map enabled boolean to status string expected by UI components
|
||||
const status = p.status ?? (p.enabled ? "active" : "inactive");
|
||||
|
||||
return {
|
||||
...p,
|
||||
price,
|
||||
category: primaryCategory,
|
||||
status,
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
products: response.data.products,
|
||||
products: normalizedProducts,
|
||||
total: response.data.total,
|
||||
page: response.data.page,
|
||||
per_page: response.data.per_page,
|
||||
|
|
|
|||
Loading…
Reference in New Issue