fix detail artilce, magazine
This commit is contained in:
Rama Priyanto
parent
d110f85e30
commit
e5771ae8f4
|
|
@ -105,6 +105,7 @@ export default function CreateArticleForm() {
|
|||
null
|
||||
);
|
||||
const [thumbnailValidation, setThumbnailValidation] = useState("");
|
||||
const [filesValidation, setFileValidation] = useState("");
|
||||
const [diseData, setDiseData] = useState<DiseData>();
|
||||
const [selectedWritingType, setSelectedWritingType] = useState("single");
|
||||
|
||||
|
|
@ -162,10 +163,21 @@ export default function CreateArticleForm() {
|
|||
};
|
||||
|
||||
const onSubmit = async (values: z.infer<typeof createArticleSchema>) => {
|
||||
if (thumbnailImg.length < 1 && !selectedMainImage) {
|
||||
setThumbnailValidation("Required");
|
||||
if ((thumbnailImg.length < 1 && !selectedMainImage) || files.length < 1) {
|
||||
if (files.length < 1) {
|
||||
setFileValidation("Required");
|
||||
} else {
|
||||
setFileValidation("");
|
||||
}
|
||||
if (thumbnailImg.length < 1 && !selectedMainImage) {
|
||||
setThumbnailValidation("Required");
|
||||
} else {
|
||||
setThumbnailValidation("");
|
||||
}
|
||||
} else {
|
||||
setThumbnailValidation("");
|
||||
setFileValidation("Required");
|
||||
|
||||
MySwal.fire({
|
||||
title: "Simpan Data",
|
||||
text: "",
|
||||
|
|
@ -463,7 +475,6 @@ export default function CreateArticleForm() {
|
|||
placeholder=""
|
||||
label=""
|
||||
value={value}
|
||||
isReadOnly
|
||||
onChange={onChange}
|
||||
labelPlacement="outside"
|
||||
className="w-full "
|
||||
|
|
@ -577,6 +588,9 @@ export default function CreateArticleForm() {
|
|||
</Fragment>
|
||||
) : null}
|
||||
</Fragment>
|
||||
{filesValidation !== "" && files.length < 1 && (
|
||||
<p className="text-red-400 text-sm mb-3">Upload File Media</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="w-full lg:w-[35%] flex flex-col gap-8">
|
||||
<div className="h-fit bg-white rounded-lg p-8 flex flex-col gap-1">
|
||||
|
|
@ -630,7 +644,9 @@ export default function CreateArticleForm() {
|
|||
onChange={handleFileChange}
|
||||
/>
|
||||
{thumbnailValidation !== "" && (
|
||||
<p className="text-red-400 text-sm mb-3">Thumbnail harus ada</p>
|
||||
<p className="text-red-400 text-sm mb-3">
|
||||
Upload thumbnail atau pilih dari File Media
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -419,7 +419,6 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
placeholder=""
|
||||
label=""
|
||||
value={value}
|
||||
isReadOnly
|
||||
onChange={onChange}
|
||||
labelPlacement="outside"
|
||||
className="w-full "
|
||||
|
|
@ -509,8 +508,11 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
detailfiles ? (
|
||||
<>
|
||||
<div>
|
||||
<img
|
||||
src={`http://38.47.180.165:8802${detailfiles[mainImage]?.file_url}`}
|
||||
<Image
|
||||
alt="main"
|
||||
width={720}
|
||||
height={480}
|
||||
src={detailfiles[mainImage]?.file_url}
|
||||
className="w-[75%] mx-auto"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -521,8 +523,11 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
onClick={() => setMainImage(index)}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<img
|
||||
src={`http://38.47.180.165:8802${file.file_url}`}
|
||||
<Image
|
||||
width={480}
|
||||
height={360}
|
||||
alt={`image-${index}`}
|
||||
src={file.file_url}
|
||||
className="h-[100px] object-cover w-[150px]"
|
||||
/>
|
||||
</a>
|
||||
|
|
@ -534,52 +539,46 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
)
|
||||
) : (
|
||||
<div className="flex flex-col">
|
||||
{detailfiles?.map(
|
||||
(file: any, index: number) =>
|
||||
index > 0 && (
|
||||
<div
|
||||
key={file?.file_name + index}
|
||||
className=" flex justify-between border px-3.5 py-3 rounded-md"
|
||||
>
|
||||
<div className="flex gap-3 items-center">
|
||||
<div className="file-preview">
|
||||
<img
|
||||
src={`http://38.47.180.165:8802${file?.file_url}`}
|
||||
className="h-[50px] object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className=" text-sm text-card-foreground">
|
||||
{file?.file_name}
|
||||
</div>
|
||||
<div className=" text-xs font-light text-muted-foreground">
|
||||
{Math.round(file?.size / 100) / 10 > 1000 ? (
|
||||
<>
|
||||
{(Math.round(file?.size / 100) / 10000).toFixed(
|
||||
1
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{(Math.round(file?.size / 100) / 10).toFixed(1)}
|
||||
</>
|
||||
)}
|
||||
{" kb"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className=" border-none rounded-full"
|
||||
variant="bordered"
|
||||
color="danger"
|
||||
onClick={() => handleDeleteFile(file?.id)}
|
||||
>
|
||||
<TimesIcon />
|
||||
</Button>
|
||||
{detailfiles?.map((file: any, index: number) => (
|
||||
<div
|
||||
key={file?.file_name + index}
|
||||
className=" flex justify-between border px-3.5 py-3 rounded-md"
|
||||
>
|
||||
<div className="flex gap-3 items-center">
|
||||
<div className="file-preview">
|
||||
<Image
|
||||
width={480}
|
||||
height={360}
|
||||
alt={`image-${index}`}
|
||||
src={file?.file_url}
|
||||
className="h-[100px] object-cover w-[150px]"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
<div>
|
||||
<div className=" text-sm text-card-foreground">
|
||||
{file?.file_name}
|
||||
</div>
|
||||
<div className=" text-xs font-light text-muted-foreground">
|
||||
{Math.round(file?.size / 100) / 10 > 1000 ? (
|
||||
<>{(Math.round(file?.size / 100) / 10000).toFixed(1)}</>
|
||||
) : (
|
||||
<>{(Math.round(file?.size / 100) / 10).toFixed(1)}</>
|
||||
)}
|
||||
{" kb"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className=" border-none rounded-full"
|
||||
variant="bordered"
|
||||
color="danger"
|
||||
onClick={() => handleDeleteFile(file?.id)}
|
||||
>
|
||||
<TimesIcon />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -587,10 +586,18 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
<div className="h-fit bg-white rounded-lg p-8 flex flex-col gap-1">
|
||||
<p className="text-sm">Thubmnail</p>
|
||||
{isDetail ? (
|
||||
<img src={thumbnail} className="w-[30%]" alt="thumbnail" />
|
||||
<Image
|
||||
width={480}
|
||||
height={360}
|
||||
src={thumbnail}
|
||||
className="w-[30%]"
|
||||
alt="thumbnail"
|
||||
/>
|
||||
) : selectedMainImage && files.length >= selectedMainImage ? (
|
||||
<div className="flex flex-row">
|
||||
<img
|
||||
<Image
|
||||
width={480}
|
||||
height={360}
|
||||
src={URL.createObjectURL(files[selectedMainImage - 1])}
|
||||
className="w-[30%]"
|
||||
alt="thumbnail"
|
||||
|
|
@ -607,7 +614,13 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
</div>
|
||||
) : thumbnail !== "" ? (
|
||||
<div className="flex flex-row">
|
||||
<img src={thumbnail} className="w-[30%]" alt="thumbnail" />
|
||||
<Image
|
||||
width={480}
|
||||
height={360}
|
||||
src={thumbnail}
|
||||
className="w-[30%]"
|
||||
alt="thumbnail"
|
||||
/>
|
||||
|
||||
<Button
|
||||
className=" border-none rounded-full"
|
||||
|
|
@ -621,7 +634,9 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
</div>
|
||||
) : thumbnailImg.length > 0 ? (
|
||||
<div className="flex flex-row">
|
||||
<img
|
||||
<Image
|
||||
width={480}
|
||||
height={360}
|
||||
src={URL.createObjectURL(thumbnailImg[0])}
|
||||
className="w-[30%]"
|
||||
alt="thumbnail"
|
||||
|
|
|
|||
|
|
@ -389,7 +389,9 @@ export default function NewCreateMagazineForm() {
|
|||
|
||||
{thumbnailImg.length > 0 ? (
|
||||
<div className="flex flex-row">
|
||||
<img
|
||||
<Image
|
||||
width={720}
|
||||
height={480}
|
||||
src={URL.createObjectURL(thumbnailImg[0])}
|
||||
className="w-[30%]"
|
||||
alt="thumbnail"
|
||||
|
|
@ -409,7 +411,7 @@ export default function NewCreateMagazineForm() {
|
|||
<input
|
||||
id="file-upload"
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/*"
|
||||
className="w-fit h-fit"
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -156,12 +156,8 @@ export default function EditMagazineForm(props: { isDetail: boolean }) {
|
|||
const data = res?.data?.data;
|
||||
setValue("title", data?.title);
|
||||
setValue("description", data?.description);
|
||||
if (res?.data?.data?.thumbnailPath) {
|
||||
setPrevThumbnail(
|
||||
res?.data?.data?.thumbnailPath?.split("/")[
|
||||
res?.data?.data?.thumbnailPath?.split("/").length - 1
|
||||
]
|
||||
);
|
||||
if (res?.data?.data?.thumbnailUrl) {
|
||||
setPrevThumbnail(res?.data?.data?.thumbnailUrl);
|
||||
}
|
||||
|
||||
setDetailFiles(data?.files);
|
||||
|
|
@ -477,8 +473,10 @@ export default function EditMagazineForm(props: { isDetail: boolean }) {
|
|||
|
||||
{prevThumbnail !== "" ? (
|
||||
<div className="flex flex-row">
|
||||
<img
|
||||
src={`http://38.47.180.165:8802/magazines/thumbnail/viewer/${prevThumbnail}`}
|
||||
<Image
|
||||
width={720}
|
||||
height={480}
|
||||
src={prevThumbnail}
|
||||
className="w-[30%]"
|
||||
alt="thumbnail"
|
||||
/>
|
||||
|
|
@ -496,7 +494,9 @@ export default function EditMagazineForm(props: { isDetail: boolean }) {
|
|||
</div>
|
||||
) : thumbnailImg.length > 0 ? (
|
||||
<div className="flex flex-row">
|
||||
<img
|
||||
<Image
|
||||
width={720}
|
||||
height={480}
|
||||
src={URL.createObjectURL(thumbnailImg[0])}
|
||||
className="w-[30%]"
|
||||
alt="thumbnail"
|
||||
|
|
@ -516,7 +516,7 @@ export default function EditMagazineForm(props: { isDetail: boolean }) {
|
|||
<input
|
||||
id="file-upload"
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/*"
|
||||
className="w-fit h-fit"
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -264,7 +264,7 @@ export default function DashboardContainer() {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row border-b-1 gap-1">
|
||||
<div className="flex flex-row border-b-1 gap-1 py-1">
|
||||
<div className="w-[5%]">NO</div>
|
||||
<div className="w-[50%] lg:w-[70%]">POLDA</div>
|
||||
<div className="w-[45%] lg:w-[25%] text-right">
|
||||
|
|
@ -273,7 +273,10 @@ export default function DashboardContainer() {
|
|||
</div>
|
||||
<div className="flex flex-col gap-1 lg:h-[500px] overflow-y-auto">
|
||||
{postCount?.map((list) => (
|
||||
<div key={list.id} className="flex flex-row border-b-1 gap-1">
|
||||
<div
|
||||
key={list.id}
|
||||
className="flex flex-row border-b-1 gap-1 py-1"
|
||||
>
|
||||
<div className="w-[5%]">{list?.no}</div>
|
||||
<div className="w-[85%]">{list?.name}</div>
|
||||
<div
|
||||
|
|
|
|||
Loading…
Reference in New Issue