feat: added individual photo viewer in architect individual view

dlv237 · Jul 6, 2024 · aacbb01 · aacbb01
1 parent 7c68ba1
commit aacbb01
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 4 deletions.
diff --git a/my-app/public/dicts/cityDict.ts b/my-app/public/dicts/cityDict.ts
@@ -0,0 +1,18 @@
+const cityDict = [
+    "RM - Metropolitana de Santiago",
+    "I - Tarapacá",
+    "II - Antofagasta",
+    "III - Atacama",
+    "IV - Coquimbo",
+    "V - Valparaíso",
+    "VI - Libertador General Bernardo O'Higgins",
+    "VII - Maule",
+    "VIII - Biobío",
+    "IX - La Araucanía",
+    "X - Los Lagos",
+    "XI - Aisén del G. Carlos Ibáñez del Campo",
+    "XII - Magallanes y de la Antártica Chilena",
+    "XIV - Los Ríos",
+    "XV - Arica y Parinacota",
+    "XVI - Ñuble",
+];
diff --git a/my-app/public/dicts/experienceEditDict.ts b/my-app/public/dicts/experienceEditDict.ts
@@ -0,0 +1,6 @@
+const experienceDict = [
+    { value: 0, label: "Estamos empezando!" },
+    { value: 1, label: "Entre 1 y 5 años" },
+    { value: 2, label: "Entre 5 y 10 años" },
+    { value: 3, label: "Más de 10 años" },
+];
diff --git a/my-app/public/dicts/saclesDict.ts b/my-app/public/dicts/saclesDict.ts
@@ -0,0 +1,7 @@
+const scalesDict = [
+    { value: 1, label: "Pequeña"},
+    { value: 2, label: "Media Baja"},
+    { value: 3, label: "Media"},
+    { value: 4, label: "Media Alta"},
+    { value: 5, label: "Gran"}
+];
diff --git a/my-app/src/app/cards.css b/my-app/src/app/cards.css
@@ -73,6 +73,30 @@
     font-size: 14px;
 }
 
+.popupOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.popupContent {
+    position: relative;
+    background: white;
+}
+
+.popupImage {
+    max-width: 90vw;
+    max-height: 90vh;
+}
+
+
 @media (max-width: 630px) {
     .card {
         width: 10rem;

diff --git a/my-app/src/components/cards/search_card.tsx b/my-app/src/components/cards/search_card.tsx
@@ -39,7 +39,7 @@ export default function ProfileCard({ architect }: { architect: ArchitectData })
     }, [architect.id]);
 
     return (
-        <article className="card">
+        <article className="card" onClick={() => window.location.href = `/architects/${architect.id}`}>
             <div className="background">
                 <img src={`https://architects-images.s3.us-east-2.amazonaws.com/${architectImageUrl}`} alt="profile" />
             </div>

diff --git a/my-app/src/pages/architects/[architect_id].tsx b/my-app/src/pages/architects/[architect_id].tsx
@@ -15,7 +15,7 @@ type ArchitectData = {
     experience_id: number;
 }
 
-type ImageData = {
+type ImageUrlData = {
     id: number;
     url: string;
     architect_id: number;
@@ -27,10 +27,12 @@ type ScaleData = {
 }
 
 export default function ArchitectProfile() {
-    const [architectImagesUrl, setArchitectImagesUrl] = React.useState<ImageData[]>([]);
+    const [architectImagesUrl, setArchitectImagesUrl] = React.useState<ImageUrlData[]>([]);
     const [architectData, setArchitectData] = React.useState<ArchitectData>();
     const [architectScales, setArchitectScales] = React.useState<ScaleData[]>([]);
     const [selectedTab, setSelectedTab] = React.useState<string>("experience");
+    const [isPopupVisible, setIsPopupVisible] = React.useState<boolean>(false);
+    const [selectedImage, setSelectedImage] = React.useState<string | null>(null);
 
     const router = useRouter();
     const { architect_id } = router.query;
@@ -57,6 +59,16 @@ export default function ArchitectProfile() {
         fetchArchitectData();
     }, [architect_id]);
 
+    const handleImageClick = (imageUrl: string) => {
+        setSelectedImage(imageUrl);
+        setIsPopupVisible(true);
+    };
+
+    const handleClosePopup = () => {
+        setIsPopupVisible(false);
+        setSelectedImage(null);
+    };
+
     return (
         <div className='container' style={{ width: "fit-content" }}>
             <div className="logoContainerSmall" style={{ marginBottom: "4vh", cursor: "pointer" }} onClick={() => window.location.href = "/"}>
@@ -77,10 +89,18 @@ export default function ArchitectProfile() {
                 </div>
                 <div className="profileImageGrid">
                     {architectImagesUrl.map((imageUrl, index) => (
-                        <img className="architectImage" key={index} src={`https://architects-images.s3.us-east-2.amazonaws.com/${imageUrl.url}`} alt="profile" />
+                        <img className="architectImage" key={index} src={`https://architects-images.s3.us-east-2.amazonaws.com/${imageUrl.url}`} alt="profile" onClick={() => handleImageClick(imageUrl.url)} />
                     ))}
                 </div>
             </div>
+
+            {isPopupVisible && selectedImage && (
+                <div className="popupOverlay" onClick={handleClosePopup}>
+                    <div className="popupContent">
+                        <img src={`https://architects-images.s3.us-east-2.amazonaws.com/${selectedImage}`} alt="popup" className="popupImage" />
+                    </div>
+                </div>
+            )}
         </div>
     );
 }
diff --git a/my-app/src/types/architectDataType.ts b/my-app/src/types/architectDataType.ts
@@ -0,0 +1,11 @@
+type ArchitectData = {
+    id: number;
+    email: string;
+    phone: string;
+    name: string;
+    city: string;
+    address: string;
+    website: string;
+    experience_id: number;
+}
+
diff --git a/my-app/src/types/imageDataType.ts b/my-app/src/types/imageDataType.ts
@@ -0,0 +1,5 @@
+type ImageUrlData = {
+    id: number;
+    url: string;
+    architect_id: number;
+}
diff --git a/my-app/src/types/scaleData.ts b/my-app/src/types/scaleData.ts
@@ -0,0 +1,4 @@
+type ScaleData = {
+    scale_id: number;
+    architect_id: number;
+}