classify web
This commit is contained in:
Husanjonazamov
338
components/PagesComponent/AdsListing/ComponentThree.jsx
Normal file
338
components/PagesComponent/AdsListing/ComponentThree.jsx
Normal file
@@ -0,0 +1,338 @@
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import { toast } from "sonner";
|
||||
import { HiOutlineUpload } from "react-icons/hi";
|
||||
import { MdOutlineAttachFile } from "react-icons/md";
|
||||
import CustomLink from "@/components/Common/CustomLink";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { handleKeyDown, inpNum, t } from "@/utils";
|
||||
import CustomImage from "@/components/Common/CustomImage";
|
||||
|
||||
const ComponentThree = ({
|
||||
customFields,
|
||||
setExtraDetails,
|
||||
filePreviews,
|
||||
setFilePreviews,
|
||||
setStep,
|
||||
handleGoBack,
|
||||
currentExtraDetails,
|
||||
langId,
|
||||
defaultLangId,
|
||||
}) => {
|
||||
const write = (fieldId, value) =>
|
||||
setExtraDetails((prev) => ({
|
||||
...prev,
|
||||
[langId]: {
|
||||
...prev[langId],
|
||||
[fieldId]: value,
|
||||
},
|
||||
}));
|
||||
|
||||
const handleFileChange = (id, file) => {
|
||||
if (file) {
|
||||
const allowedExtensions = /\.(jpg|jpeg|svg|png|pdf)$/i;
|
||||
if (!allowedExtensions.test(file.name)) {
|
||||
toast.error(t("notAllowedFile"));
|
||||
return;
|
||||
}
|
||||
const fileUrl = URL.createObjectURL(file);
|
||||
setFilePreviews((prev) => {
|
||||
const oldUrl = prev?.[langId]?.[id]?.url;
|
||||
if (oldUrl) {
|
||||
URL.revokeObjectURL(oldUrl);
|
||||
}
|
||||
return {
|
||||
...prev,
|
||||
[langId]: {
|
||||
...(prev[langId] || {}),
|
||||
[id]: {
|
||||
url: fileUrl,
|
||||
isPdf: /\.pdf$/i.test(file.name),
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
write(id, file);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (id, value) => write(id, value ?? "");
|
||||
|
||||
const handleCheckboxChange = (id, value, checked) => {
|
||||
const list = currentExtraDetails[id] || [];
|
||||
const next = checked ? [...list, value] : list.filter((v) => v !== value);
|
||||
write(id, next);
|
||||
};
|
||||
|
||||
const renderCustomFields = (field) => {
|
||||
let {
|
||||
id,
|
||||
name,
|
||||
translated_name,
|
||||
type,
|
||||
translated_value,
|
||||
values,
|
||||
min_length,
|
||||
max_length,
|
||||
is_required,
|
||||
} = field;
|
||||
|
||||
const inputProps = {
|
||||
id,
|
||||
name: id,
|
||||
required: !!is_required,
|
||||
onChange: (e) => handleChange(id, e.target.value),
|
||||
value: currentExtraDetails[id] || "",
|
||||
...(type === "number"
|
||||
? { min: min_length, max: max_length }
|
||||
: { minLength: min_length, maxLength: max_length }),
|
||||
};
|
||||
|
||||
switch (type) {
|
||||
case "number": {
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<Input
|
||||
type={type}
|
||||
inputMode="numeric"
|
||||
placeholder={`${t("enter")} ${translated_name || name}`}
|
||||
{...inputProps}
|
||||
onKeyDown={(e) => handleKeyDown(e, max_length)}
|
||||
onKeyPress={(e) => inpNum(e)}
|
||||
/>
|
||||
{max_length && (
|
||||
<span className="self-end text-sm text-muted-foreground">
|
||||
{`${currentExtraDetails[id]?.length ?? 0}/${max_length}`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
case "textbox": {
|
||||
return (
|
||||
<div className=" flex flex-col">
|
||||
<Textarea
|
||||
placeholder={`${t("enter")} ${translated_name || name}`}
|
||||
{...inputProps}
|
||||
/>
|
||||
{max_length && (
|
||||
<span className="self-end text-sm text-muted-foreground">
|
||||
{`${currentExtraDetails[id]?.length ?? 0}/${max_length}`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
case "dropdown":
|
||||
return (
|
||||
<div className="w-full">
|
||||
<Select
|
||||
id={id}
|
||||
name={id}
|
||||
onValueChange={(value) => handleChange(id, value)}
|
||||
value={currentExtraDetails[id] || ""}
|
||||
>
|
||||
<SelectTrigger className="outline-none focus:outline-none">
|
||||
<SelectValue
|
||||
className="font-medium"
|
||||
placeholder={`${t("select")} ${translated_name || name}`}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel value="">
|
||||
{t("select")} {translated_name || name}
|
||||
</SelectLabel>
|
||||
{values?.map((option, index) => (
|
||||
<SelectItem
|
||||
id={option}
|
||||
className="font-medium"
|
||||
key={option}
|
||||
value={option}
|
||||
>
|
||||
{translated_value[index] || option}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
|
||||
case "checkbox":
|
||||
return (
|
||||
<div className="flex w-full flex-wrap gap-2">
|
||||
{values?.map((value, index) => {
|
||||
const uniqueId = `${id}-${value}-${index}`;
|
||||
return (
|
||||
<div key={uniqueId} className="flex gap-1 items-center">
|
||||
<Checkbox
|
||||
id={uniqueId}
|
||||
value={value}
|
||||
onCheckedChange={(checked) =>
|
||||
handleCheckboxChange(id, value, checked)
|
||||
}
|
||||
checked={currentExtraDetails[id]?.includes(value)}
|
||||
/>
|
||||
<label
|
||||
htmlFor={uniqueId}
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
{translated_value[index] || value}
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
case "radio":
|
||||
return (
|
||||
<RadioGroup
|
||||
value={currentExtraDetails[id] || ""}
|
||||
onValueChange={(value) => handleChange(id, value)}
|
||||
className="flex flex-wrap gap-2"
|
||||
>
|
||||
{(translated_value || values)?.map((option, index) => {
|
||||
const uniqueId = `${id}-${option}-${index}`;
|
||||
return (
|
||||
<div
|
||||
key={uniqueId}
|
||||
className="flex items-center gap-2 flex-wrap"
|
||||
>
|
||||
<RadioGroupItem
|
||||
value={option}
|
||||
id={uniqueId}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<label
|
||||
htmlFor={uniqueId}
|
||||
className={`${currentExtraDetails[id] === option
|
||||
? "bg-primary text-white"
|
||||
: ""
|
||||
} border rounded-md px-4 py-2 cursor-pointer transition-colors`}
|
||||
>
|
||||
{translated_value[index] || option}
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</RadioGroup>
|
||||
);
|
||||
|
||||
case "fileinput":
|
||||
const fileUrl = filePreviews?.[langId]?.[id]?.url;
|
||||
const isPdf = filePreviews?.[langId]?.[id]?.isPdf;
|
||||
|
||||
return (
|
||||
<>
|
||||
<label htmlFor={id} className="flex gap-2 items-center">
|
||||
<div className="cursor-pointer border px-2.5 py-1 rounded">
|
||||
<HiOutlineUpload size={24} fontWeight="400" />
|
||||
</div>
|
||||
{fileUrl && (
|
||||
<div className="flex items-center gap-1 text-sm flex-nowrap break-words">
|
||||
{isPdf ? (
|
||||
<>
|
||||
<MdOutlineAttachFile />
|
||||
<CustomLink
|
||||
href={fileUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{t("viewPdf")}
|
||||
</CustomLink>
|
||||
</>
|
||||
) : (
|
||||
<CustomImage
|
||||
key={fileUrl}
|
||||
src={fileUrl}
|
||||
alt="Preview"
|
||||
className="h-9 w-9"
|
||||
height={36}
|
||||
width={36}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id={id}
|
||||
name={id}
|
||||
className="hidden"
|
||||
onChange={(e) => handleFileChange(id, e.target.files[0])}
|
||||
accept=".jpg,.jpeg,.png,.svg,.pdf"
|
||||
/>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{t("allowedFileType")}
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{customFields?.map((field) => {
|
||||
if (langId !== defaultLangId && field.type !== "textbox") return null;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col w-full gap-2" key={field?.id}>
|
||||
<div className="flex gap-2 items-center">
|
||||
<CustomImage
|
||||
src={field?.image}
|
||||
alt={field?.name}
|
||||
height={28}
|
||||
width={28}
|
||||
className="h-7 w-7 rounded-sm"
|
||||
/>
|
||||
<Label
|
||||
className={`${field?.required === 1 && defaultLangId === langId
|
||||
? "requiredInputLabel"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{field?.translated_name || field?.name}
|
||||
</Label>
|
||||
</div>
|
||||
{renderCustomFields(field)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="flex justify-end gap-3">
|
||||
<button
|
||||
className="bg-black text-white px-4 py-2 rounded-md text-xl font-light"
|
||||
onClick={handleGoBack}
|
||||
>
|
||||
{t("back")}
|
||||
</button>
|
||||
<button
|
||||
className="bg-primary text-white px-4 py-2 rounded-md text-xl font-light"
|
||||
onClick={() => setStep(4)}
|
||||
>
|
||||
{t("next")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ComponentThree;
|
||||
Reference in New Issue
Block a user