47 adding confirmation page (#77)

* fixing merging error * merging two button two one and start validateFormInputs * validateFormInputs implemented * add rejected functionality * modified icon workflow * modifying little css things * valid submit goes to confirm page * update data even if form is invalid * button and submit logic is done * Css tweaks show more is fix on the right, progressbar is sticky, modal is clean * fix lint * adding confirmPage but data importation not working. * Access/Route to confirm page + started working on css * Sent images to confirmpage * fix css * No need to approve all * Fixed carousel * merge correction * lint + prettier * forgot a lint * fix build --------- Co-authored-by: Samuel Pelletier Evraire <[email protected]>
ai-cfia · Jun 20, 2024 · 6cce7d9 · 6cce7d9
1 parent 37a0eae
commit 6cce7d9
Show file tree

Hide file tree

Showing 13 changed files with 225 additions and 93 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,6 +6,7 @@ import "./App.css";
 import Header from "./Components/Header/Header";
 import FormPage from "./Pages/FormPage/FormPage";
 import { StrictMode } from "react";
+import ConfirmPage from "./Pages/ConfirmPage/ConfirmPage";
 
 function App() {
   return (
@@ -19,6 +20,7 @@ function App() {
 
           <Route path="Json" element={<JsonPage />} />
           <Route path="Form" element={<FormPage />} />
+          <Route path="Confirm" element={<ConfirmPage />} />
 
           <Route path="*" element={<NoPage />} />
         </Route>

diff --git a/src/Components/Carousel/Carousel.css b/src/Components/Carousel/Carousel.css
@@ -1,12 +1,13 @@
 .curr-img {
   grid-area: main;
   display: flex;
+  justify-content: center;
   width: 100%;
   height: 100%;
   align-content: center;
 }
 
-.main-img{
+.main-img {
   width: 100%;
   max-width: 400px;
   min-width: 150px;
@@ -15,22 +16,21 @@
   margin-top: 30px;
 }
 
-@media only screen and (min-width: 1231px) { /*the minimum place that need the form to have when he is in full page mode is 1231*/
+@media only screen and (min-width: 1231px) {
+  /*the minimum place that need the form to have when he is in full page mode is 1231*/
   .carousel-wrapper {
     position: fixed;
     display: grid;
     grid-template-areas:
       "main main main"
       ".  carousel  .";
-    grid-template-rows: 60% 30%;
-    align-content: center;
+    grid-template-rows: 500px 30%;
     justify-content: center;
-    gap: 70px;
   }
 }
 
-
-@media only screen and (max-width: 1230px) {/*the minimum place that need the form to have when he is in full page mode is 1231*/
+@media only screen and (max-width: 1230px) {
+  /*the minimum place that need the form to have when he is in full page mode is 1231*/
   .carousel-wrapper {
     display: grid;
     grid-template-areas:
@@ -43,21 +43,11 @@
   }
 }
 
-.carousel-wrapper {
-  display: grid;
-  grid-template-areas:
-    "main main main"
-    ".  carousel  .";
-  grid-template-rows: 60% 30%;
-  align-content: center;
-}
-
-
 .carousel {
-  position:static;
+  position: static;
   grid-area: carousel;
-  width:auto;
-  display:inline-flex;
+  width: auto;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
@@ -83,6 +73,8 @@
 .prev,
 .next {
   cursor: pointer;
+  position: relative;
+  top: 45%;
   max-width: 10px;
   height: 40px;
   font-weight: bold;
@@ -92,7 +84,6 @@
   border-radius: 10px;
   user-select: none;
   z-index: 3;
-  margin-top: 50%;
 }
 
 /* Position the "next button" to the right */
@@ -116,3 +107,13 @@
 .next:hover {
   background-color: #bdbdbd;
 }
+
+.carousel-wrapper .react-transform-wrapper {
+  height: 500px;
+}
+.carousel-wrapper .react-transform-wrapper img {
+  margin: auto 0;
+  width: auto;
+  object-fit: contain;
+  height: 500px;
+}
diff --git a/src/Components/ImageZoomInOut/ImageZoomInOut.css b/src/Components/ImageZoomInOut/ImageZoomInOut.css
@@ -1,20 +1,28 @@
 .btn-container {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    background-color: #fff;
-    border-radius: 8px;
-    overflow: hidden;
-    top: 10px;
-    left: 10px;
-    z-index: 1;
-    border:1px solid black;
-  }
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background-color: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  top: 10px;
+  left: 10px;
+  z-index: 1;
+  border: 1px solid black;
+}
 
 .btn-container button {
-    border: none;
-    color: #737373;
-    background-color: #fff;
-    padding: 10px;
-    cursor: pointer;
-  }
+  border: none;
+  color: #737373;
+  background-color: #fff;
+  padding: 10px;
+  cursor: pointer;
+}
+
+.zoom-in-out {
+  cursor: grab;
+  height: 100%;
+}
+.zoom-in-out:active {
+  cursor: grabbing;
+}
diff --git a/src/Components/ImageZoomInOut/ImageZoomInOut.tsx b/src/Components/ImageZoomInOut/ImageZoomInOut.tsx
@@ -1,5 +1,22 @@
-import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
+import {
+  TransformWrapper,
+  TransformComponent,
+  useControls,
+} from "react-zoom-pan-pinch";
 import "./ImageZoomInOut.css";
+import { useEffect } from "react";
+
+interface ControlsProps {
+  url: string;
+}
+const TransformControls = ({ url }: ControlsProps) => {
+  const { resetTransform } = useControls();
+  useEffect(() => {
+    resetTransform();
+    // eslint-disable-next-line
+  }, [url]);
+  return <></>;
+};
 
 interface ImageProps {
   imageUrl: string;
@@ -10,11 +27,18 @@ interface ImageProps {
 
 function ImageZoomInOut({ imageUrl, className, onClick, alt }: ImageProps) {
   return (
-    <div onClick={onClick}>
+    <div className="zoom-in-out" onClick={onClick}>
       <TransformWrapper pinch={{ step: 1000 }}>
-        <TransformComponent>
-          <img src={imageUrl} alt={alt} className={className} />
-        </TransformComponent>
+        {/* eslint-disable-next-line */}
+        {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
+          <>
+            {console.log(rest)}
+            <TransformControls url={imageUrl} />
+            <TransformComponent>
+              <img src={imageUrl} alt={alt} className={className} />
+            </TransformComponent>
+          </>
+        )}
       </TransformWrapper>
     </div>
   );

diff --git a/src/Components/Input/Input.css b/src/Components/Input/Input.css
@@ -5,7 +5,7 @@ textarea:disabled {
   background-color: #4e4e4e7a;
   border: solid 2px black;
 }
-.rejected{
+.rejected {
   border: solid 2px red;
 }
 @media (prefers-color-schem: light) {

diff --git a/src/Components/Modal/Modal.css b/src/Components/Modal/Modal.css
@@ -15,6 +15,7 @@
 .overlay.active {
   display: grid;
   grid-template-areas: "pics card";
+  grid-template-columns: 50% 50%;
 }
 
 /* Styles de la carte */
@@ -122,7 +123,7 @@
   }
 }
 
-.overlay .pic-container{
+.overlay .pic-container {
   grid-area: pics;
   display: flex;
   flex-direction: column;
@@ -131,6 +132,6 @@
   margin-top: 20px;
 }
 
-.overlay .carousel-wrapper{
+.overlay .carousel-wrapper {
   position: relative;
 }
diff --git a/src/Components/ProgressBar/ProgressBar.css b/src/Components/ProgressBar/ProgressBar.css
@@ -1,17 +1,17 @@
 .progress-bar-vertical {
-    flex-direction: column;
-    width: 35px;
-    height: 120%;
-    border-radius: 15px;
-    overflow: hidden;
-    position: sticky;
-    margin-top: 50px;
+  flex-direction: column;
+  width: 35px;
+  height: 120%;
+  border-radius: 15px;
+  overflow: hidden;
+  position: sticky;
+  margin-top: 50px;
 }
 
-.progress-wrapper{  
+.progress-wrapper {
   position: fixed;
   right: 60px;
-  top:40px;
+  top: 40px;
 }
 
 .section {
@@ -23,9 +23,9 @@
 .section.approved {
   background-color: rgb(18, 178, 18);
 }
-.section.modified{
+.section.modified {
   background-color: rgb(255, 255, 0);
 }
-.section.rejected{
+.section.rejected {
   background-color: rgb(255, 0, 0);
 }
diff --git a/src/Components/ProgressBar/ProgressBar.tsx b/src/Components/ProgressBar/ProgressBar.tsx
@@ -27,18 +27,25 @@ const ProgressBar = ({ sections }: { sections: { label: string }[] }) => {
       inputInfo.property = "approved";
     });
     // eslint-disable-next-line
-    {/* const unsubModify =*/} FormClickActions.on(
-      "ModifyClick",
-      (inputInfo: Input) => {
+    {
+      /* const unsubModify =*/
+    }
+    FormClickActions.on("ModifyClick", (inputInfo: Input) => {
       sec.find((elem) => elem.label == inputInfo.id)!.ref.current!.className =
         "section modified";
       inputInfo.property = "modified";
     });
-    // When the input is rejected because he is not in the good format ex: email, adress, etc
     // eslint-disable-next-line
-    {/*const unsubRejected = */}FormClickActions.on(
-      "Rejected",
-      (inputInfo: Input) => {
+    {
+      /*const unsubRejected = */
+    }
+    FormClickActions.on("Rejected", (inputInfo: Input) => {
+      sec.find((elem) => elem.label == inputInfo.id)!.ref.current!.className =
+        "section modified";
+      inputInfo.property = "modified";
+    });
+    // When the input is rejected because he is not in the good format ex: email, adress, etc
+    FormClickActions.on("Rejected", (inputInfo: Input) => {
       console.log("rejected");
       console.log(inputInfo.id);
       // remove all classes and add section and rejected

diff --git a/src/Pages/ConfirmPage/ConfirmPage.css b/src/Pages/ConfirmPage/ConfirmPage.css
@@ -0,0 +1,40 @@
+.data-infos {
+  display: flex;
+  flex-direction: column;
+}
+.confirm-page-container {
+  display: grid;
+  grid-template-areas:
+    "title title"
+    "pics infos";
+  grid-template-columns: 1fr 1fr;
+}
+.confirm-page-container .carousel-wrapper {
+  grid-area: pics;
+}
+#confirm-title {
+  grid-area: title;
+  text-align: center;
+}
+.confirm-container {
+  grid-area: infos;
+  border: 2px rgb(172, 170, 170) solid;
+  border-radius: 10px;
+  padding-left: 8%;
+  padding-right: 8%;
+  background-color: rgb(220, 219, 219);
+  text-overflow: ellipsis;
+  margin-right: 3%;
+}
+.confirm-container h2 {
+  text-align: left;
+  margin-bottom: 0px;
+}
+.confirm-container ul {
+  padding-left: 20px;
+}
+.confirm-container li {
+  margin-bottom: 10px;
+  font-size: 20px;
+  text-align: left;
+}