From ad9284cd4e0fe409ae504a148351b4f9d45f8b5e Mon Sep 17 00:00:00 2001 From: Baligh ZOGHLAMI Date: Thu, 4 Jul 2024 14:16:19 +0100 Subject: [PATCH 1/4] feat:add file input to create floor --- src/app/(dashboard)/etage/CreateEtage.jsx | 93 ++++++++++++++++++++- src/app/(dashboard)/etage/EtageTableRow.jsx | 3 +- src/app/(dashboard)/etage/page.jsx | 1 + src/static/image/svg/image.svg | 1 + src/static/image/svg/image2.svg | 1 + 5 files changed, 95 insertions(+), 4 deletions(-) create mode 100644 src/static/image/svg/image.svg create mode 100644 src/static/image/svg/image2.svg diff --git a/src/app/(dashboard)/etage/CreateEtage.jsx b/src/app/(dashboard)/etage/CreateEtage.jsx index 2d16ceb..5c55362 100644 --- a/src/app/(dashboard)/etage/CreateEtage.jsx +++ b/src/app/(dashboard)/etage/CreateEtage.jsx @@ -1,3 +1,4 @@ +/* eslint-disable @next/next/no-img-element */ 'use client' import Loader from '@/components/Loader/Loader' import React, { useRef, useState, useEffect } from 'react' @@ -5,7 +6,9 @@ import fetchRequest from '../../lib/fetchRequest' import { useNotification } from "@/context/NotificationContext"; import CancelIcon from "@/static/image/svg/cancel.svg" import CheckIcon from "@/static/image/svg/check.svg" - +import ImageIcon from "@/static/image/svg/image.svg" +import ColoredImageIcon from "@/static/image/svg/image2.svg" +import CrossIcon from "@/static/image/svg/cancel.svg" const CreateEtage = ({ appendEtage, cancelCreate }) => { const [isLoading, setIsLoading] = useState(false) @@ -15,12 +18,17 @@ const CreateEtage = ({ appendEtage, cancelCreate }) => { setNumeroEtage(event.target.value) } const inputRef = useRef(null) + const imageInput = useRef(null) + const [image, setImage] = useState(null) const handleSubmit = async (event) => { event.preventDefault() setIsLoading(true) + const formData = new FormData() + formData.append("numero", numeroEtage) + formData.append("image", image) const { data, errors, isSuccess } = await fetchRequest("/zoaning/etages/", { method: "POST", - body: JSON.stringify({ numero: numeroEtage }) + body: formData }) if (isSuccess) { setIsLoading(false) @@ -93,9 +101,88 @@ const CreateEtage = ({ appendEtage, cancelCreate }) => { } }, []) + + const removeImage = () => { + imageInput.current.value = ""; + setImage(null); + setIsDisplayingImage(false) + }; + + const handleChangeImage = (e) => { + if (imageInput.current.value !== "") { + const supportedType = ["image/jpg", "image/jpeg", "image/png", "image/svg+xml"]; + if (supportedType.includes(imageInput.current.files[0].type)) { + setImage(imageInput.current.files[0]); + } else { + removeImage(); + setIsDisplayingImage(false) + toggleNotification({ + type: "warning", + message: "Le type de l'image n'est pas supporté", + visible: true + }) + } + } else { + setImage(null); + setIsDisplayingImage(false) + } + }; + const [isDisplayingImage, setIsDisplayingImage] = useState(false) + const viewImage = () => { + setIsDisplayingImage(true) + } + return - + + + + {(!image) && <> + + } + + + + {(image) && <> +
+
+
+ +
+
+

{image.name}

+

{Math.round((image.size / (1024 * 1024)) * 100) / 100}Mo

+
+
+

Voir l'image

+
+ {(isDisplayingImage) &&
+
+
setIsDisplayingImage(false)} className='ml-auto relative bottom-3'> + +
+
+ User uploaded +
+
+
} +
+
+ +
+
+
+
+ }
diff --git a/src/app/(dashboard)/etage/EtageTableRow.jsx b/src/app/(dashboard)/etage/EtageTableRow.jsx index ff162b5..501be4b 100644 --- a/src/app/(dashboard)/etage/EtageTableRow.jsx +++ b/src/app/(dashboard)/etage/EtageTableRow.jsx @@ -72,8 +72,9 @@ const EtageTableRow = ({ id, numero, setEtages }) => { <> - setNumeroEtage(event.target.value)} defaultValue={numero} type='text' className='w-full border-0 rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 disabled:bg-transparent duration-100 h-10 outline-none' /> + setNumeroEtage(event.target.value)} defaultValue={numero} type='text' className='w-full min-w-80 border-0 rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 disabled:bg-transparent duration-100 h-10 outline-none' /> +