Feature/gallery view component

src/components/collapsible/index.tsx

@@ -5,13 +5,15 @@ import {FaAngleDown, FaAngleUp } from "react-icons/fa";
 
 //This is collapsible component, use it as if you are using any pre-designed component
 //Specify the Style of collapsible component as if you were styling a div using style prompt
-const Collapsible = ({style = {}, label, children}) => {
+const Collapsible = ({style = {}, titleStyle={}, label, children}) => {
     const [isOpen, setOpen] = useState(false)
     const contentRef = useRef(null)
     const toogle = () => {setOpen(!isOpen)}
     return (
         <div className = "collapsible" style={style}>
-            <button onClick={toogle} className="title">{label}{!isOpen ? (
+            {/* Do not remove type="button". Otherwise the button
+            will do a form submission on click and cause the page to refresh */}
+            <button type="button" onClick={toogle} className="title" style={titleStyle}>{label}{!isOpen ? (
                 <FaAngleDown />
               ) : (
                 <FaAngleUp />

src/components/dashboard/AddProvider.tsx

@@ -399,7 +399,7 @@ function AddProvider(props) {
                         )}
                     </div>
                 </Col>
-                <Col xs={12} md={8} lg={9}>
+                <Col xs={12} md={8} lg={9} style={{overflow: "scroll", height: "100vh"}}>
                     <Flipper flipKey={step}>
                         <Flipped flipId="form">
                             <div className="bg-white p-3">

src/components/dashboard/ContentForm.tsx

@@ -1,13 +1,16 @@
 import "@fontsource/inter";
 
 import React, { useEffect, useRef, useState } from "react";
-import { Button, Col, Container, Form, Row } from "react-bootstrap";
+import { Button, Col, Container, Dropdown, Form, Row } from "react-bootstrap";
 // import grabberIcon from "../../assets/svg/grabber.svg";
 import { ReactComponent as GrabberIcon } from "../../assets/svg/grabber.svg";
 import { ReactComponent as PencilIcon } from "../../assets/svg/pencil.svg";
 import { ReactComponent as CheckmarkIcon } from "../../assets/svg/checkmark.svg";
 
 import styles from "./ContentForm.module.css";
+import ChartComponentForm from "components/subcomponents/chartcomponents/ChartComponentForm";
+import Collapsible from "components/collapsible";
+import ProviderGallery from "./ProviderGallery";
 
 const EditableText = ({ text, setText, isEditing, setIsEditing }) => {
     const inputRef = useRef(null);
@@ -97,8 +100,9 @@ const SectionCard = ({
     isEditing,
     setIsEditing,
 }) => {
+    const [components, setComponents] = useState([]);
     return (
-        <Container fluid className="p-0 h-100 d-flex flex-column">
+        <Container fluid className="p-0 h-100 d-flex flex-column" style={{ overflowY: "scroll" }}>
             <Row
                 className=" w-100 d-inline-flex flex-row align-items-center justify-content-between"
                 style={{
@@ -139,11 +143,57 @@ const SectionCard = ({
                     Delete Section
                 </button>
             </Row>
+            {components.map((v, i) =>
+                <Row className="flex-fill m-0 w-100" key={i}>
+                    {v}
+                </Row>
+            )}
             <Row
                 className="flex-fill m-0 w-100"
-                style={{ borderRadius: "8px", backgroundColor: "#FFFFFF" }}
             >
-                {index}
+                <Dropdown>
+                    <Dropdown.Toggle className={styles.deleteButton}
+                        style={{
+                            color: "white",
+                            fontSize: "16px",
+                            fontWeight: "500",
+                            fontFamily: "Inter, sans-serif",
+                        }} id="dropdown-basic">
+                        + Add Filter
+                    </Dropdown.Toggle>
+
+                    <Dropdown.Menu>
+                        <Dropdown.Item onClick={() =>
+                            setComponents([...components,
+                                <Collapsible
+                                    titleStyle={{
+                                        background: "white",
+                                        color: "var(--chart-blue)",
+                                        fontSize: "1.25rem",
+                                        fontStyle: "normal",
+                                        lineHeight: "24px"
+                                    }}
+                                    label={"Chart"}>
+                                    <ChartComponentForm />
+                                </Collapsible>
+                        ])}>Chart</Dropdown.Item>
+                        <Dropdown.Item onClick={() =>
+                            setComponents([...components,
+                            <Collapsible
+                                style={{width: "100%"}}
+                                titleStyle={{
+                                    background: "white",
+                                    color: "var(--chart-blue)",
+                                    fontSize: "1.25rem",
+                                    fontStyle: "normal",
+                                    lineHeight: "24px"
+                                }}
+                                label={"Gallery"}>
+                                <ProviderGallery />
+                            </Collapsible>
+                            ])}>Gallery</Dropdown.Item>
+                    </Dropdown.Menu>
+                </Dropdown>
             </Row>
         </Container>
     );
@@ -179,9 +229,8 @@ const SectionButton = ({
                         maxWidth: "12px",
                         borderTopLeftRadius: "8px",
                         borderBottomLeftRadius: "8px",
-                        backgroundColor: `${
-                            isSelected ? "#226DFF" : "transparent"
-                        }`,
+                        backgroundColor: `${isSelected ? "#226DFF" : "transparent"
+                            }`,
                     }}
                 ></Col>
                 <Col
@@ -289,6 +338,7 @@ const ContentForm = ({ content, onChange }) => {
                 style={{
                     backgroundColor: "#E3E9F5",
                     padding: "16px 16px 28px 16px",
+                    width: "calc(100% - 264px)"
                 }}
             >
                 {selectedSection === null ? null : (

src/components/dashboard/ProviderGallery.tsx

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from "react";
+import ProviderGallerySlide from "./ProviderGallerySlide";
+import { storage } from "../../store";
+
+interface GallerySlide {
+    title: string;
+    description: string;
+    imgLink: string;
+}
+
+export default function ProviderGallery({
+    slidesArray = [],
+}: {
+    slidesArray?: GallerySlide[];
+}) {
+    const [slides, setSlides] = useState<GallerySlide[]>(slidesArray);
+
+    const defaultSlide: GallerySlide = {
+        title: "",
+        description: "",
+        imgLink: "",
+    };
+
+    useEffect(() => {
+        if (!slides || slides.length === 0) {
+            setSlides([{ ...defaultSlide }]);
+        }
+    }, [slides]);
+
+    const handleSlideDataChange = (
+        index: number,
+        field: keyof GallerySlide,
+        e: React.ChangeEvent<HTMLInputElement>
+    ) => {
+        const newSlides = slides.map((slide, i) =>
+            i === index ? { ...slide, [field]: e.target.value } : slide
+        );
+        setSlides(newSlides);
+    };
+
+    const handleDelete = (index: number) => {
+        if (slides.length > 1) {
+            const newSlides = slides.filter((_, i) => i !== index);
+            setSlides(newSlides);
+        }
+    };
+
+    const handleAdd = (index: number) => {
+        const newSlides = [...slides];
+        const newSlide = { ...defaultSlide };
+
+        if (index === newSlides.length - 1) {
+            newSlides.push(newSlide);
+        } else {
+            newSlides.splice(index + 1, 0, newSlide);
+        }
+        setSlides(newSlides);
+    };
+
+    const handleUpload = async (file, index: number) => {
+        const filename = file.name;
+        const fileRef = storage.ref("images").child(filename);
+
+        await fileRef.put(file);
+        const url = await fileRef.getDownloadURL();
+
+        const newSlides = slides.map((slide, i) =>
+            i === index ? { ...slide, imgLink: url } : slide
+        );
+        setSlides(newSlides);
+    };
+
+    const renderSlides = () => {
+        return slides.map((slide, i) => (
+            <ProviderGallerySlide
+                {...slide}
+                index={i}
+                key={i}
+                handleSlideDataChange={handleSlideDataChange}
+                handleDelete={handleDelete}
+                handleAdd={handleAdd}
+                handleUpload={handleUpload}
+            />
+        ));
+    };
+
+    return (
+        <div style={{ width: "100%", margin: "0px" }}>
+            {renderSlides()}
+            {/*TO BE DELETED */}
+            <div>
+                <h4>Current Data:</h4>
+                <pre>{JSON.stringify(slides, null, 2)}</pre>
+            </div>
+        </div>
+    );
+}