Assign and create survey components

src/app/api/surveys/route.ts

@@ -4,7 +4,7 @@ import { createSurvey, getAllSurveys } from "@/lib/firebase/database/surveys";
 export async function GET() {
   try {
     const allSurveys = await getAllSurveys();
-    return NextResponse.json({ surveys: allSurveys }, { status: 200 });
+    return NextResponse.json(allSurveys, { status: 200 });
   } catch (error) {
     return NextResponse.json({ error: 'error getting all surveys' }, { status: 500 })
   }
@@ -14,7 +14,7 @@ export async function POST(req: NextRequest) {
   const body = await req.json();
   try {
     const survey = await createSurvey(body);
-    return NextResponse.json({data: survey}, {status: 200});
+    return NextResponse.json(survey, {status: 200});
   } catch (err) {
     return NextResponse.json({error: 'error creating survey'}, {status: 500});
   }

src/components/Assign.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { Survey } from '@/types/survey-types';
+import styles from './Assign.module.css';
+
+interface AssignProps {
+    userIds: string[];
+}
+
+export default function Assign({ userIds }: AssignProps) {
+    const [selectedSurveys, setSelectedSurveys] = useState<string[]>([]);
+    const [surveys, setSurveys] = useState<Survey[]>([]);
+
+    useEffect(() => {
+        // Fetch the list of surveys from the server when the component mounts
+        async function fetchSurveys() {
+            try {
+                const response = await fetch('/api/surveys');
+                if (response.ok) {
+                    const surveysArray: Survey[] = await response.json(); 
+                    setSurveys(surveysArray);
+                } else {
+                    console.error('Failed to fetch surveys:', response.statusText);
+                }
+            } catch (error) {
+                console.error('Error occurred while fetching surveys:', error);
+            }
+        }
+
+        fetchSurveys();
+    }, []);
+
+    // Function to toggle the selection of a survey
+    const toggleSurvey = (surveyId: string) => {
+        const isSelected = selectedSurveys.includes(surveyId);
+        setSelectedSurveys(prevSelected => {
+            if (isSelected) {
+                return prevSelected.filter(id => id !== surveyId);
+            } else {
+                return [...prevSelected, surveyId];
+            }
+        });
+    };
+
+    // Function to handle assigning surveys
+    const assignSurveys = async () => {
+        if (selectedSurveys.length === 0) {
+            return;
+        }
+
+        try {
+            console.log(userIds)
+            console.log(selectedSurveys)
+            const response = await fetch('/api/surveys/assign', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    userIds: userIds,
+                    surveyIds: selectedSurveys
+                })
+            });
+
+            if (response.ok) {
+                const responseData = await response.json();
+                console.log(responseData.message);
+            } else {
+                const errorData = await response.json();
+                console.error(errorData.error);
+            }
+        } catch (error) {
+            console.error('Error occurred while assigning surveys:', error);
+        }
+    };
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.title}>Assign Surveys</div>
+
+            {surveys.map((survey) => (
+                <div key={survey.formId} className={styles.centeredOval}>
+                    <input
+                        type="checkbox"
+                        id={`surveyCheckbox_${survey.formId}`}
+                        className={styles.inputCheckbox}
+                        checked={selectedSurveys.includes(survey.formId)}
+                        onChange={() => toggleSurvey(survey.formId)}
+                    />
+                    <label
+                        htmlFor={`surveyCheckbox_${survey.formId}`}
+                        className={styles.text}
+                    >
+                        {survey.info.title}
+                    </label>
+                </div>
+            ))}
+            <button className={styles.button} onClick={assignSurveys}>
+                Assign
+            </button>
+            <span className={styles.closeIcon}/>
+        </div>
+    );
+}

src/components/assign.module.css

@@ -0,0 +1,75 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    background: #d9d9d9;
+    padding: 50px 30px 30px 30px;
+    border-radius: 20px;
+    /*width: 15%; */
+    width: 350px;
+    position: relative;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+.inputGroup {
+
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.button {
+    width: 105px;
+    margin-top: 20px;
+    padding: 4px 0px;
+    background-color: white;
+    color: black;
+    border-radius: 10px;
+    cursor: pointer;
+    font-size: 18px;
+}
+
+.closeIcon {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    background-image: url('/images/close-icon.png');
+    background-size: cover;
+}
+
+.centeredOval {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 350px; 
+    height: 30px; 
+    border-radius: 50px; 
+    font-size: 16px; 
+    color: black; 
+    background-color: white;
+    margin-bottom: 10px;
+    position: relative;
+
+}
+.title {
+    margin-bottom: 20px;
+    color: black;
+    font-size: 20px;
+}
+
+.inputCheckbox {
+    transform: scale(1.3); 
+    position: absolute;
+    left: 10px;
+
+
+}
+.inputCheckbox:checked {
+    accent-color: black;
+}
+
+

src/components/create.module.css

@@ -0,0 +1,73 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    background: #d9d9d9;
+    padding: 50px 30px 30px 30px;
+    border-radius: 20px;
+    width: 330px;
+    position: relative;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+.inputGroup {
+
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.button {
+    background-color: white;
+    color: black;
+    border-radius: 10px;
+    cursor: pointer;
+    width: 120px;
+    margin-top: 15px;
+    padding: 4px 0px;
+    font-size: 16px;
+}
+
+.closeIcon {
+    position: absolute;
+    background-image: url('/images/close-icon.png');
+    background-size: cover;
+    top: 10px;
+    right: 10px;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+}
+
+.centeredOval {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 350px; 
+    height: 40px; 
+    border-radius: 50px; 
+    font-size: 16px; 
+    color: black; 
+    background-color: white;
+    margin-bottom: 10px;
+    position: relative;
+
+}
+.title {
+    margin-bottom: 20px;
+    color: black;
+    font-size: 20px;
+}
+
+.inputField {
+    flex-grow: 1;
+    border-radius: 15px;
+    padding: 0px 20px;
+    font-size:16px;
+    border: none;
+}
+
+.inputField:focus {
+    outline: none;
+}

src/components/create.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import React, { useState } from 'react';
+import styles from './Create.module.css';
+
+export default function Create() {
+    const [surveyTitle, setSurveyTitle] = useState("");
+
+    const createSurvey = async () => {
+        try {
+            const response = await fetch('/api/surveys', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    documentTitle: surveyTitle,
+                    title: surveyTitle
+                })
+            });
+
+            if (response.ok) {
+            } else {
+                console.error('Failed to create survey:', response.statusText);
+            }
+        } catch (error) {
+            console.error('Error occurred while creating survey:', error);
+        }
+    };
+
+    return (
+      <div className={styles.container}>
+        <div className={styles.title}>Create Survey</div>
+        <div className={styles.centeredOval}>
+          <input
+            name="surveyTitle"
+            placeholder="Survey Title"
+            className={styles.inputField}
+            value={surveyTitle}
+            onChange={(ev) => setSurveyTitle(ev.target.value)}
+          />
+        </div>
+        <button className={styles.button} onClick={createSurvey}>
+          Create
+        </button>
+        <span className={styles.closeIcon}/>
+      </div>
+    );
+}