Skip to content
This repository has been archived by the owner on Dec 10, 2023. It is now read-only.

Commit

Permalink
new form page working and fixed file structure
Browse files Browse the repository at this point in the history
  • Loading branch information
@Manas2403
Manas2403 committed Jun 17, 2023
1 parent daa7438 commit 83f8396
Show file tree
Hide file tree
Showing 21 changed files with 2,000 additions and 2,295 deletions.
9 changes: 0 additions & 9 deletions .prettierrc
View file

This file was deleted.

36 changes: 20 additions & 16 deletions components/elements/Form/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,32 @@ import menu from '../../../assets/images/illustrations/menu.png';
import Image from 'next/image';
import clock from '../../../assets/images/illustrations/clock.png';
import React from 'react';
import moment from 'moment';
import Link from 'next/link';
export default function Form(props) {
return (
<div
className="bg-[#FFFEFE] shadow-[0px_4px_8px_rgba(0,0,0,0.25)] h-[158px] w-[300px] sm:w-[500px] md:w-[700px] cursor-pointer
<Link href={`/dashboard/project/${props.projectId}/${props.id}`}>
<div
className="bg-[#FFFEFE] shadow-[0px_4px_8px_rgba(0,0,0,0.25)] h-[158px] w-[300px] sm:w-[500px] md:w-[700px] cursor-pointer
flex justify-center flex-col items-center hover:bg-[#DEF7E5] transition-all duration-200 my-3 rounded-lg
"
>
<div className="h-1/2 w-full p-5 pl-6 text-xs flex items-baseline justify-between">
<div className="flex-row md:flex items-baseline">
<div className="text-2xl font-bold ">{props.formName}</div>
<div className="text-xs font-medium ml-0 mt-2 md:mt-0 md:ml-2 w-36 text-[#116149] flex items-baseline ">
<span className="pb-4">{props.createdAt} Months ago</span>
<button>
<Image src={clock} className="w-3 h-3 ml-1" />
</button>
>
<div className="h-1/2 w-full p-5 pl-6 text-xs flex items-baseline justify-between">
<div className="flex-row md:flex items-baseline">
<div className="text-2xl font-bold ">{props.formName}</div>
<div className="text-xs font-medium ml-0 mt-2 md:mt-0 md:ml-2 w-36 text-[#116149] flex items-baseline ">
<span className="pb-4">{moment(props.createdAt).fromNow()}</span>
<button>
<Image src={clock} className="w-3 h-3 ml-1" />
</button>
</div>
</div>
<Image src={menu} className="float-right" />
</div>
<div className="h-1/2 w-full p-5 pl-6 text-2xs flex items-end text-[#116149] font-medium">
<div>{props.totalSubmissions} Submissions</div>
</div>
<Image src={menu} className="float-right" />
</div>
<div className="h-1/2 w-full p-5 pl-6 text-2xs flex items-end text-[#116149] font-medium">
<div>{props.totalSubmissions} Submissions</div>
</div>
</div>
</Link>
);
}
204 changes: 147 additions & 57 deletions components/elements/FormInput/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,72 +1,162 @@
import React from 'react';
import { Input, Checkbox, Dropdown, Button, Space } from 'antd';
import { AiOutlineDown, AiOutlinePlus } from 'react-icons/ai';
import {
Input,
Checkbox,
Dropdown,
Button,
Space,
Select,
message,
} from 'antd';
import { AiOutlineDown, AiOutlinePlus, AiOutlineClose } from 'react-icons/ai';
import CustomParameter from '../CustomParameterInput';
export default function FormInput() {
const items = [
{
label: '1st menu item',
key: '1',
icon: '',
},
{
label: '2nd menu item',
key: '2',
icon: '',
},
{
label: '3rd menu item',
key: '3',
icon: '',
},
{
label: '4rd menu item',
key: '4',
icon: '',
},
export default function FormInput({ fields, setFields, hasFileField }) {
const options = [
{ label: 'checkbox', value: 'checkbox' },
{ label: 'color', value: 'color' },
{ label: 'date', value: 'date' },
{ label: 'datetime-local', value: 'datetime-local' },
{ label: 'email', value: 'email' },
{ label: 'file', value: 'file' },
{ label: 'hidden', value: 'hidden' },
{ label: 'image', value: 'image' },
{ label: 'month', value: 'month' },
{ label: 'number', value: 'number' },
{ label: 'password', value: 'password' },
{ label: 'radio', value: 'radio' },
{ label: 'range', value: 'range' },
{ label: 'reset', value: 'reset' },
{ label: 'search', value: 'search' },
{ label: 'tel', value: 'tel' },
{ label: 'text', value: 'text' },
{ label: 'time', value: 'time' },
{ label: 'url', value: 'url' },
{ label: 'week', value: 'week' },
];
const menuProps = {
items,
options,
onClick: handleMenuClick,
};
const handleMenuClick = (e) => {
console.log('click', e);
};
const addField = () => {
if (fields.length < 10) {
setFields([...fields, { name: '', isRequired: false }]);
} else {
message.error('You cannot add more than 10 fields');
}
};
const handleRemove = (i) => {
if (fields.length > 1) {
setFields((prev) => {
let nFields = [...prev];
nFields.splice(i, 1);
return nFields;
});
} else {
message.error('At least 1 field is required');
}
};
return (
<>
<div className="border-2 rounded-lg p-4 flex flex-col gap-2">
<div className="flex flex-row justify-around gap-4 items-center">
<div>
<Dropdown menu={menuProps}>
<Button className="rounded-lg" size="large">
<Space>
Field Type
<AiOutlineDown />
</Space>
</Button>
</Dropdown>
</div>
<div className="w-full">
<Input
placeholder="Field Name (as per HTML)"
className="rounded-lg "
/>
</div>
<div>
<Checkbox>Required</Checkbox>
</div>
</div>
<div className="flex flex-col gap-2">
<CustomParameter />
</div>
<div className="self-end">
<button className="rounded-lg bg-[#DEF7E5] text-[#023430] font-semibold p-1 px-2 ">
<Space>
<AiOutlinePlus size={16} strokeWidth={12} />
Add a Custom Parameter
</Space>
</button>
<div className="rounded-lg border-solid border-2 border-[#01684a] p-4 flex flex-col gap-2">
<div className="text-lg text-[#01684a] font-bold">
Add Fields to your Form
</div>
{fields.map((field, i) => (
<div className="flex flex-col gap-4">
<div className="border-2 rounded-lg p-4 flex flex-col gap-2">
<div className="flex flex-row justify-around gap-4 items-center">
<div className="w-2/3">
<Select
mode="single"
tokenSeparators={[',']}
style={{ width: '100%' }}
options={
hasFileField
? options.filter(
(option) =>
option.label !== 'file' &&
option.label !== 'image',
)
: options
}
showArrow={true}
placeholder="Select Field Type"
size="large"
maxTagCount={1}
value={field.type}
onChange={(e) =>
setFields((prev) => {
let nFields = [...prev];
nFields[i].type = e;
return nFields;
})
}
/>
</div>
<div className="w-full">
<Input
placeholder="Field Name (as per HTML)"
className="rounded-lg "
value={field.name}
onChange={(e) =>
setFields((prev) => {
let nFields = [...prev];
nFields[i].name = e.target.value;
return nFields;
})
}
/>
</div>
<div>
<Checkbox
checked={field.isRequired}
onChange={(e) =>
setFields((prev) => {
let nFields = [...prev];
nFields[i].isRequired = e.target.checked;
return nFields;
})
}
>
Required
</Checkbox>
</div>
<div onClick={() => handleRemove(i)}>
<AiOutlineClose
size={20}
strokeWidth={12}
className="cursor-pointer"
fill="#970606"
/>
</div>
</div>
{/* <div className="flex flex-col gap-2">
<CustomParameter />
</div>
<div className="self-end">
<button className="rounded-lg bg-[#DEF7E5] text-[#023430] font-semibold p-1 px-2 ">
<Space>
<AiOutlinePlus size={16} strokeWidth={12} />
Add a Custom Parameter
</Space>
</button>
</div> */}
</div>
</div>
))}
<button
className="rounded-lg bg-[#DEF7E5] text-[#023430] font-semibold p-2 w-32"
onClick={addField}
type="button"
>
<Space>
<AiOutlinePlus size={16} strokeWidth={12} />
New Field
</Space>
</button>
</div>
</>
);
Expand Down
77 changes: 0 additions & 77 deletions components/elements/MultipleInputs/index.js
View file

This file was deleted.

Loading

1 comment on commit 83f8396

@vercel
Copy link

@vercel vercel bot commented on 83f8396 Jun 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

save-my-form-frontend – ./

save-my-form-frontend.vercel.app
save-my-form-frontend-git-main-savemyform.vercel.app
save-my-form-frontend-savemyform.vercel.app

Please sign in to comment.