Skip to content

Add form functionality #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Keshav7104 wants to merge 2 commits into
base: keshav
Choose a base branch
from
Open

Add form functionality #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2325513
Temporary
Keshav7104 May 23, 2024
0d8f356
Fixed reset button for forms
Keshav7104 Oct 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/(pages)/about/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,11 @@ const People = {
],
studentEditors: [
{
name: 'Keshav Arora',
name: 'Sachin Pathak',
role: 'Developer and Maintainer',
designation: 'UG Student, CSE 3rd year',
description: 'None',
profile: 'https://avatars.githubusercontent.com/u/124811079',
profile: 'https://avatars.githubusercontent.com/u/103988614?v=4',
links: [
{ to: 'https://www.linkedin.com/in/keshav-arora-a5a20325b', icon: 'linkedin' },
{ to: 'https://github.com/keshav7104/', icon: 'github' },
Expand Down
323 changes: 202 additions & 121 deletions components/form/preview-fc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,172 +1,253 @@
import { useEffect, useState } from 'react';
import MarkdownIcon from '../icons/markdown-icon';
import SpinnerIcon from '../icons/spinner-icon';
import NoPreview from './no-preview';
import PreviewedInput from '../MdInput';
import styles from './preview.module.scss';
import cx from 'classnames';
import Image from 'next/image';
import useFetchCollection from '@/hooks/fetchCollection';
import { where } from 'firebase/firestore';
import { useEffect, useState } from "react";
import MarkdownIcon from "../icons/markdown-icon";
import SpinnerIcon from "../icons/spinner-icon";
import NoPreview from "./no-preview";
import PreviewedInput from "../MdInput";
import styles from "./preview.module.scss";
import cx from "classnames";
import Image from "next/image";
import useFetchCollection from "@/hooks/fetchCollection";
import { where } from "firebase/firestore";

const PreviewFC = ({ display, category, fields,Formfields, images = [], imgCaption, submit, switchForm, loading = false }) => {
const [desc, setDesc] = useState('');
const PreviewFC = ({
display,
category,
fields,
Formfields,
images = [],
imgCaption,
submit,
switchForm,
loading = false,
}) => {
const [desc, setDesc] = useState("");
const [editing, setEditing] = useState(false);
const [labels, setLabels] = useState({});
const {docs:Form,refetch} = useFetchCollection("activity-forms",[where("name","==",category)]);
const { docs: Form, refetch } = useFetchCollection("activity-forms", [
where("name", "==", category),
]);

useEffect(()=>{
useEffect(() => {
refetch();
},[category]);
}, [category]);

const getPreviewFields = (fields) => {
if (category === '' || !labels) return fields;
if (category === "" || !labels) return fields;
const newFields = {};

Object.keys(labels).forEach(field => {
if (field === 'activityTitle') return;
Object.keys(labels).forEach((field) => {
if (field === "activityTitle") return;
if (!fields[field]) {
newFields[field] = labels[field] ? labels[field].toUpperCase() : '';
} else if (field === 'pi' || field === 'copi' || field === 'author') {
let outStr = '', sep = ', ';
newFields[field] = labels[field] ? labels[field].toUpperCase() : "";
} else if (field === "pi" || field === "copi" || field === "author") {
let outStr = "",
sep = ", ";
if (fields[field].length) {
if (field === 'pi') {
outStr += fields[field].map((el, i) => {
if (i === fields[field].length - 2) sep = 'and '
if (i === fields[field].length - 1) sep = ''
return `${el.name}, ${el.designation}, ${el.department} ${sep}`
}).join('')
outStr += fields[field].length > 1 ? ' as Principal Investigators' : ' as a Principal Investigator'
} else if (field === 'copi') {
outStr += fields[field].map((el, i) => {
if (i === fields[field].length - 2) sep = 'and '
if (i === fields[field].length - 1) sep = ''
return `${el.name}, ${el.designation}, ${el.department} ${el.insName ? ', ' + el.insName : ''}${sep}`
}).join('')
outStr += ' and ' + fields[field].length > 1 ? ' as Co-Principal Investigators' : ' as a Co-Principal Investigator'
} else if (field === 'author') {
outStr += fields[field].map((el, i) => {
if (i === fields[field].length - 2) sep = 'and '
if (i === fields[field].length - 1) sep = ''
return `${el.lastName}, ${el.firstInitials.toUpperCase()}.`
}).join('')
if (field === "pi") {
outStr += fields[field]
.map((el, i) => {
if (i === fields[field].length - 2) sep = "and ";
if (i === fields[field].length - 1) sep = "";
return `${el.name}, ${el.designation}, ${el.department} ${sep}`;
})
.join("");
outStr +=
fields[field].length > 1
? " as Principal Investigators"
: " as a Principal Investigator";
} else if (field === "copi") {
outStr += fields[field]
.map((el, i) => {
if (i === fields[field].length - 2) sep = "and ";
if (i === fields[field].length - 1) sep = "";
return `${el.name}, ${el.designation}, ${el.department} ${
el.insName ? ", " + el.insName : ""
}${sep}`;
})
.join("");
outStr +=
" and " + fields[field].length > 1
? " as Co-Principal Investigators"
: " as a Co-Principal Investigator";
} else if (field === "author") {
outStr += fields[field]
.map((el, i) => {
if (i === fields[field].length - 2) sep = "and ";
if (i === fields[field].length - 1) sep = "";
return `${el.lastName}, ${el.firstInitials.toUpperCase()}.`;
})
.join("");
}
}
newFields[field] = outStr ? outStr : labels[field].toUpperCase();
} else {
newFields[field] = fields[field];
}
})
});
return newFields;
}
};

const replaceKeysWithValues=(oldFields , newFields , str)=> {
const replaceKeysWithValues = (oldFields, newFields, str) => {
// Iterate through props object
for (const key in oldFields ) {
if (oldFields .hasOwnProperty(key) && newFields .hasOwnProperty(key)) {
// Create a regular expression to match the key within the string
const regex = new RegExp(oldFields [key], 'g');
// Replace all occurrences of the key with its value
str = str.replace(regex, newFields [key]);
// oldFields[key]=newFields[key];
}
for (const key in oldFields) {
if (oldFields.hasOwnProperty(key) && newFields.hasOwnProperty(key)) {
// Create a regular expression to match the key within the string
const regex = new RegExp(oldFields[key], "g");
// Replace all occurrences of the key with its value
str = str.replace(regex, newFields[key]);
// oldFields[key]=newFields[key];
}
}
return str;
}
};

const updatePreview = () => {
if (Form[category]===undefined) setDesc('');
const updatePreview = (reset = false) => {
if (Form[category] === undefined) setDesc("");
else {
const oldFields = {}
Form[category].fields.forEach(item=>{
oldFields[item.name]=item.placeholder;
})
const oldFields = {};
Form[category].fields.forEach((item) => {
oldFields[item.name] = item.placeholder;
});
const newFields = getPreviewFields(fields);
// console.log(oldFields,newFields);
setDesc(replaceKeysWithValues(oldFields,newFields,Form[category].preview));
// console.log(oldFields, newFields);
if (reset === true) {
setDesc(
replaceKeysWithValues(newFields, oldFields, Form[category].preview)
);
} else {
setDesc(
replaceKeysWithValues(oldFields, newFields, Form[category].preview)
);
}
}
}
};

const handleSubmit = (event) => {
if (document.getElementById('activityForm').checkValidity()) {
if (document.getElementById("activityForm").checkValidity()) {
event.preventDefault();
submit(desc);
} else {
switchForm(true);
}
}
};

useEffect(() => {
let labels = {};
Formfields.filter(field => (
field.type !== 'sectionHeading'
&& field.type !== 'person'
&& field.type !== 'file'
&& field.type !== 'radio'
)).forEach(field => {
if (field.type === 'dateRange') {
labels = { ...labels, date: field.from.placeholder, toDate: field.to.placeholder }
Formfields.filter(
(field) =>
field.type !== "sectionHeading" &&
field.type !== "person" &&
field.type !== "file" &&
field.type !== "radio"
).forEach((field) => {
if (field.type === "dateRange") {
labels = {
...labels,
date: field.from.placeholder,
toDate: field.to.placeholder,
};
} else {
labels = { ...labels, [field.name]: field.required || field.type === 'list' ? field.placeholder : '' }
labels = {
...labels,
[field.name]:
field.required || field.type === "list" ? field.placeholder : "",
};
}
})
});
setLabels(labels);
}, [Formfields]);

useEffect(() => {
updatePreview();
// eslint-disable-next-line
}, [fields,Form])
}, [fields, Form]);

return (
<div className={styles.preview} style={{ display: display }} >
{category === '' ? <NoPreview /> : (<>
<div className={cx(styles['formatted-preview-wrapper'], { [styles.active]: editing })}>
<div className={styles.previews}>
<h1>{fields.activityTitle ? fields.activityTitle : category!=='' ? category : <em>Untitled</em>}</h1>
<PreviewedInput
placeholder='Your output will show here'
value={desc}
updateVal={txt => { setDesc(txt) }}
editing={status => { setEditing(status) }}
/>
<div className={styles.preview} style={{ display: display }}>
{category === "" ? (
<NoPreview />
) : (
<>
<div
className={cx(styles["formatted-preview-wrapper"], {
[styles.active]: editing,
})}
>
<div className={styles.previews}>
<h1>
{fields.activityTitle ? (
fields.activityTitle
) : category !== "" ? (
category
) : (
<em>Untitled</em>
)}
</h1>
<PreviewedInput
placeholder="Your output will show here"
value={desc}
updateVal={(txt) => {
setDesc(txt);
}}
editing={(status) => {
setEditing(status);
}}
/>
</div>
<footer className={styles["markdown-support"]}>
<p>
Click to edit
<a
className={styles["text-link"]}
target="_blank"
rel="noreferrer"
href="https://guides.github.com/features/mastering-markdown/"
>
<MarkdownIcon className={styles["markdown-icon"]} />
<span>Styling with Markdown is supported</span>
</a>
</p>
</footer>
</div>
<footer className={styles['markdown-support']}>
<p>
Click to edit
<a className={styles['text-link']} target='_blank' rel='noreferrer' href='https://guides.github.com/features/mastering-markdown/'>
<MarkdownIcon className={styles['markdown-icon']} />
<span>Styling with Markdown is supported</span>
</a>
</p>
</footer>
</div>

<div className={styles['image-preview']}>
{images.map((img, i) => (
<div key={i} className={styles['image-container']} >
<Image className={styles['image']} fill={true} alt="" src={URL.createObjectURL(img)} />
</div>
))}
</div>
{images.length !== 0 && (category !== 1 || category !== 3) && (
<p className={styles['img-caption-preview']}>{imgCaption}</p>
)}
<div className={styles.actions}>
<button
id='submitBtn'
form='activityForm'
type='submit'
disabled={loading}
onClick={handleSubmit}
className={cx(styles.btn, styles.submit)}>
{!loading ? 'Submit' : <SpinnerIcon />}
</button>
<button disabled={loading} onClick={updatePreview} className={cx(styles.btn, styles.reset)}>Reset</button>
</div>
</>)}
<div className={styles["image-preview"]}>
{images.map((img, i) => (
<div key={i} className={styles["image-container"]}>
<Image
className={styles["image"]}
fill={true}
alt=""
src={URL.createObjectURL(img)}
/>
</div>
))}
</div>
{images.length !== 0 && (category !== 1 || category !== 3) && (
<p className={styles["img-caption-preview"]}>{imgCaption}</p>
)}
<div className={styles.actions}>
<button
id="submitBtn"
form="activityForm"
type="submit"
disabled={loading}
onClick={handleSubmit}
className={cx(styles.btn, styles.submit)}
>
{!loading ? "Submit" : <SpinnerIcon />}
</button>
<button
disabled={loading}
onClick={()=>updatePreview(true)}
className={cx(styles.btn, styles.reset)}
>
Reset
</button>
</div>
</>
)}
</div>
)
}
);
};

export default PreviewFC;