Skip to content

Commit a5eea11

Browse files
uiuxarghyauiuxarghya
authoredJun 29, 2024··
Merge pull request #4 from edgexhq/anish
fix form routs
2 parents 7c6fc6a + b9022f8 commit a5eea11

File tree

10 files changed

+475
-417
lines changed

10 files changed

+475
-417
lines changed
 

‎app/dashboard/edit-form/[formId]/page.jsx

+109-85
Original file line numberDiff line numberDiff line change
@@ -1,150 +1,174 @@
1-
"use client"
2-
import { db } from '../../configs'
3-
import { JsonForms } from '../../configs/schema'
4-
import { useUser } from '@clerk/nextjs'
5-
import { and, eq } from 'drizzle-orm'
6-
import { ArrowLeft, Share2, SquareArrowOutUpRight } from 'lucide-react'
7-
import { useRouter } from 'next/navigation'
8-
import React, { useEffect, useState } from 'react'
9-
import FormUi from '../_components/FormUi'
10-
import { fromJSON } from 'postcss'
11-
import { toast } from 'sonner'
12-
import Controller from '../_components/Controller'
13-
import { Button } from '../../components/ui/button'
14-
import Link from 'next/link'
15-
import { RWebShare } from 'react-web-share'
1+
"use client";
2+
import { db } from "@/app/configs";
3+
import { JsonForms } from "@/app/configs/schema";
4+
import { useUser } from "@clerk/nextjs";
5+
import { and, eq } from "drizzle-orm";
6+
import { ArrowLeft, Share2, SquareArrowOutUpRight } from "lucide-react";
7+
import { useRouter } from "next/navigation";
8+
import React, { useEffect, useState } from "react";
9+
import FormUi from "../_components/FormUi";
10+
import { fromJSON } from "postcss";
11+
import { toast } from "sonner";
12+
import Controller from "../_components/Controller";
13+
import { Button } from "@/app/components/ui/button";
14+
import Link from "next/link";
15+
import { RWebShare } from "react-web-share";
1616

1717
function EditForm({ params }) {
18-
1918
const { user } = useUser();
2019
const [jsonForm, setJsonForm] = useState([]);
2120
const router = useRouter();
2221
const [updateTrigger, setUpdateTrigger] = useState();
2322
const [record, setRecord] = useState([]);
2423

25-
const [selectedTheme, setSelectedTheme] = useState('light');
24+
const [selectedTheme, setSelectedTheme] = useState("light");
2625
const [selectedBackground, setSelectedBackground] = useState();
2726
const [selectedStyle, setSelectedStyle] = useState();
2827

2928
useEffect(() => {
3029
user && GetFormData();
31-
}, [user])
30+
}, [user]);
3231
const GetFormData = async () => {
33-
const result = await db.select().from(JsonForms)
34-
.where(and(eq(JsonForms.id, params?.formId),
35-
eq(JsonForms.createdBy, user?.primaryEmailAddress?.emailAddress)));
36-
37-
setRecord(result[0])
38-
console.log(result[0])
39-
setJsonForm(JSON.parse(result[0].jsonform))
40-
setSelectedBackground(result[0].background)
41-
setSelectedTheme(result[0].theme)
42-
setSelectedStyle(JSON.parse(result[0].style))
43-
44-
45-
46-
}
32+
const result = await db
33+
.select()
34+
.from(JsonForms)
35+
.where(
36+
and(
37+
eq(JsonForms.id, params?.formId),
38+
eq(JsonForms.createdBy, user?.primaryEmailAddress?.emailAddress)
39+
)
40+
);
41+
42+
setRecord(result[0]);
43+
console.log(result[0]);
44+
setJsonForm(JSON.parse(result[0].jsonform));
45+
setSelectedBackground(result[0].background);
46+
setSelectedTheme(result[0].theme);
47+
setSelectedStyle(JSON.parse(result[0].style));
48+
};
4749

4850
useEffect(() => {
4951
if (updateTrigger) {
5052
setJsonForm(jsonForm);
5153
updateJsonFormInDb();
5254
}
53-
}, [updateTrigger])
55+
}, [updateTrigger]);
5456

5557
const onFieldUpdate = (value, index) => {
5658
jsonForm.fields[index].label = value.label;
5759
jsonForm.fields[index].placeholder = value.placeholder;
58-
setUpdateTrigger(Date.now())
59-
}
60+
setUpdateTrigger(Date.now());
61+
};
6062

6163
const updateJsonFormInDb = async () => {
62-
const result = await db.update(JsonForms)
64+
const result = await db
65+
.update(JsonForms)
6366
.set({
64-
jsonform: jsonForm
65-
}).where(and(eq(JsonForms.id, record.id),
66-
eq(JsonForms.createdBy, user?.primaryEmailAddress?.emailAddress)))
67-
.returning({ id: JsonForms.id })
68-
69-
toast('Updated!!!')
67+
jsonform: jsonForm,
68+
})
69+
.where(
70+
and(
71+
eq(JsonForms.id, record.id),
72+
eq(JsonForms.createdBy, user?.primaryEmailAddress?.emailAddress)
73+
)
74+
)
75+
.returning({ id: JsonForms.id });
76+
77+
toast("Updated!!!");
7078
console.log(result);
71-
}
79+
};
7280

7381
const deleteField = (indexToRemove) => {
74-
const result = jsonForm.fields.filter((item, index) => index != indexToRemove)
82+
const result = jsonForm.fields.filter(
83+
(item, index) => index != indexToRemove
84+
);
7585

7686
jsonForm.fields = result;
77-
setUpdateTrigger(Date.now())
78-
}
87+
setUpdateTrigger(Date.now());
88+
};
7989

8090
const updateControllerFields = async (value, columnName) => {
81-
console.log(value, columnName)
82-
const result = await db.update(JsonForms).set({
83-
[columnName]: value
84-
}).where(and(eq(JsonForms.id, record.id),
85-
eq(JsonForms.createdBy, user?.primaryEmailAddress?.emailAddress)))
86-
.returning({ id: JsonForms.id })
87-
88-
toast('Updated!!!')
89-
90-
}
91+
console.log(value, columnName);
92+
const result = await db
93+
.update(JsonForms)
94+
.set({
95+
[columnName]: value,
96+
})
97+
.where(
98+
and(
99+
eq(JsonForms.id, record.id),
100+
eq(JsonForms.createdBy, user?.primaryEmailAddress?.emailAddress)
101+
)
102+
)
103+
.returning({ id: JsonForms.id });
104+
105+
toast("Updated!!!");
106+
};
91107

92108
return (
93-
<div className='p-10'>
94-
<div className='flex justify-between items-center'>
95-
<h2 className='flex gap-2 items-center my-5 cursor-pointer
96-
hover:font-bold ' onClick={() => router.back()}>
109+
<div className="p-10">
110+
<div className="flex justify-between items-center">
111+
<h2
112+
className="flex gap-2 items-center my-5 cursor-pointer
113+
hover:font-bold "
114+
onClick={() => router.back()}
115+
>
97116
<ArrowLeft /> Back
98117
</h2>
99-
<div className='flex gap-2'>
100-
<Link href={'/aiform/' + record?.id} target="_blank">
101-
<Button className="flex gap-2" > <SquareArrowOutUpRight className='h-5 w-5' /> Live Preview</Button>
118+
<div className="flex gap-2">
119+
<Link href={"/aiform/" + record?.id} target="_blank">
120+
<Button className="flex gap-2">
121+
{" "}
122+
<SquareArrowOutUpRight className="h-5 w-5" /> Live Preview
123+
</Button>
102124
</Link>
103125
<RWebShare
104126
data={{
105-
text: jsonForm?.formHeading + " , Build your form in seconds with AI form Builder ",
127+
text:
128+
jsonForm?.formHeading +
129+
" , Build your form in seconds with AI form Builder ",
106130
url: process.env.NEXT_PUBLIC_BASE_URL + "/aiform/" + record?.id,
107131
title: jsonForm?.formTitle,
108132
}}
109133
onClick={() => console.log("shared successfully!")}
110134
>
111-
<Button className="flex gap-2 bg-green-600 hover:bg-green-700"> <Share2 /> Share</Button>
112-
135+
<Button className="flex gap-2 bg-green-600 hover:bg-green-700">
136+
{" "}
137+
<Share2 /> Share
138+
</Button>
113139
</RWebShare>
114-
115140
</div>
116141
</div>
117-
<div className='grid grid-cols-1 md:grid-cols-3 gap-5'>
118-
<div className='p-5 border rounded-lg shadow-md'>
142+
<div className="grid grid-cols-1 md:grid-cols-3 gap-5">
143+
<div className="p-5 border rounded-lg shadow-md">
119144
<Controller
120145
selectedTheme={(value) => {
121-
updateControllerFields(value, 'theme')
122-
setSelectedTheme(value)
146+
updateControllerFields(value, "theme");
147+
setSelectedTheme(value);
123148
}}
124149
selectedBackground={(value) => {
125-
updateControllerFields(value, 'background')
150+
updateControllerFields(value, "background");
126151

127-
setSelectedBackground(value)
128-
}
129-
}
152+
setSelectedBackground(value);
153+
}}
130154
selectedStyle={(value) => {
131155
setSelectedStyle(value);
132-
updateControllerFields(value, 'style')
156+
updateControllerFields(value, "style");
133157
}}
134-
135158
setSignInEnable={(value) => {
136-
updateControllerFields(value, 'enabledSignIn')
159+
updateControllerFields(value, "enabledSignIn");
137160
}}
138161
/>
139162
</div>
140-
<div className='md:col-span-2 border rounded-lg p-5
141-
flex items-center justify-center'
163+
<div
164+
className="md:col-span-2 border rounded-lg p-5
165+
flex items-center justify-center"
142166
style={{
143-
backgroundImage: selectedBackground
167+
backgroundImage: selectedBackground,
144168
}}
145169
>
146-
147-
<FormUi jsonForm={jsonForm}
170+
<FormUi
171+
jsonForm={jsonForm}
148172
selectedTheme={selectedTheme}
149173
selectedStyle={selectedStyle}
150174
onFieldUpdate={onFieldUpdate}
@@ -153,7 +177,7 @@ function EditForm({ params }) {
153177
</div>
154178
</div>
155179
</div>
156-
)
180+
);
157181
}
158182

159-
export default EditForm
183+
export default EditForm;

‎app/dashboard/edit-form/_components/Controller.jsx

+104-86
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,118 @@
1-
import React, { useState } from 'react'
1+
import React, { useState } from "react";
22
import {
3-
Select,
4-
SelectContent,
5-
SelectItem,
6-
SelectTrigger,
7-
SelectValue,
8-
} from "../../components/ui/select"
9-
import Themes from '../../_data/Themes'
10-
import GradientBg from '../../_data/GradientBg'
11-
import { Button } from '../../components/ui/button'
12-
import Style from '../../_data/Style'
13-
import { Checkbox } from '../../components/ui/checkbox'
3+
Select,
4+
SelectContent,
5+
SelectItem,
6+
SelectTrigger,
7+
SelectValue,
8+
} from "@/app/components/ui/select";
9+
import Themes from "@/app/_data/Themes";
10+
import GradientBg from "@/app/_data/GradientBg";
11+
import { Button } from "@/app/components/ui/button";
12+
import Style from "@/app/_data/Style";
13+
import { Checkbox } from "@/app/components/ui/checkbox";
1414

15-
16-
function Controller({selectedTheme,selectedBackground,selectedStyle,setSignInEnable}) {
17-
const [showMore,setShowMore]=useState(6)
15+
function Controller({
16+
selectedTheme,
17+
selectedBackground,
18+
selectedStyle,
19+
setSignInEnable,
20+
}) {
21+
const [showMore, setShowMore] = useState(6);
1822
return (
1923
<div>
20-
{/* Theme selection Controller */}
21-
<h2 className='my-1'>Themes</h2>
22-
<Select onValueChange={(value)=>selectedTheme(value)}>
23-
<SelectTrigger className="w-full">
24-
<SelectValue placeholder="Theme" />
25-
</SelectTrigger>
26-
<SelectContent>
27-
{Themes.map((theme,index)=>(
28-
<SelectItem value={theme.theme} key={index}>
29-
<div className='flex gap-3'>
30-
<div className='flex'>
31-
<div className='h-5 w-5 rounded-l-md'
32-
style={{backgroundColor:theme.primary}}
33-
></div>
34-
<div className='h-5 w-5'
35-
style={{backgroundColor:theme.secondary}}
36-
></div>
37-
<div className='h-5 w-5'
38-
style={{backgroundColor:theme.accent}}
39-
></div>
40-
<div className='h-5 w-5 rounded-r-md'
41-
style={{backgroundColor:theme.neutral}}
42-
></div>
43-
44-
</div>
45-
{theme.theme}
46-
</div>
47-
</SelectItem>
48-
49-
))}
50-
51-
</SelectContent>
52-
</Select>
24+
{/* Theme selection Controller */}
25+
<h2 className="my-1">Themes</h2>
26+
<Select onValueChange={(value) => selectedTheme(value)}>
27+
<SelectTrigger className="w-full">
28+
<SelectValue placeholder="Theme" />
29+
</SelectTrigger>
30+
<SelectContent>
31+
{Themes.map((theme, index) => (
32+
<SelectItem value={theme.theme} key={index}>
33+
<div className="flex gap-3">
34+
<div className="flex">
35+
<div
36+
className="h-5 w-5 rounded-l-md"
37+
style={{ backgroundColor: theme.primary }}
38+
></div>
39+
<div
40+
className="h-5 w-5"
41+
style={{ backgroundColor: theme.secondary }}
42+
></div>
43+
<div
44+
className="h-5 w-5"
45+
style={{ backgroundColor: theme.accent }}
46+
></div>
47+
<div
48+
className="h-5 w-5 rounded-r-md"
49+
style={{ backgroundColor: theme.neutral }}
50+
></div>
51+
</div>
52+
{theme.theme}
53+
</div>
54+
</SelectItem>
55+
))}
56+
</SelectContent>
57+
</Select>
5358

54-
{/* Background Selection Controller */}
55-
<h2 className='mt-8 my-1'> Background </h2>
56-
<div className='grid grid-cols-3 gap-5'>
57-
{GradientBg.map((bg,index)=>(index<showMore)&&(
58-
<div
59+
{/* Background Selection Controller */}
60+
<h2 className="mt-8 my-1"> Background </h2>
61+
<div className="grid grid-cols-3 gap-5">
62+
{GradientBg.map(
63+
(bg, index) =>
64+
index < showMore && (
65+
<div
5966
key={index}
60-
onClick={()=>selectedBackground(bg.gradient)}
61-
className=' w-full h-[70px] rounded-lg cursor-pointer
67+
onClick={() => selectedBackground(bg.gradient)}
68+
className=" w-full h-[70px] rounded-lg cursor-pointer
6269
hover:border-black hover:border-2 flex items-center justify-center
63-
'
64-
style={{background:bg.gradient}}
65-
>
66-
{index==0&&'None'}
67-
</div>
68-
))}
69-
70-
</div>
71-
<Button variant="ghost" size="sm"
72-
className="w-full my-1 "
73-
onClick={()=>setShowMore(showMore>6?6:20)}
74-
>{showMore>6?'Show Less':'Show More'}
75-
</Button>
70+
"
71+
style={{ background: bg.gradient }}
72+
>
73+
{index == 0 && "None"}
74+
</div>
75+
)
76+
)}
77+
</div>
78+
<Button
79+
variant="ghost"
80+
size="sm"
81+
className="w-full my-1 "
82+
onClick={() => setShowMore(showMore > 6 ? 6 : 20)}
83+
>
84+
{showMore > 6 ? "Show Less" : "Show More"}
85+
</Button>
7686

77-
{/* Style Selection Controller */}
78-
<div>
79-
<label>Style</label>
80-
<div className='grid grid-cols-3 gap-3'>
81-
{Style.map((item,index)=>(
82-
<div>
83-
<div className='cursor-pointer hover:border-2 rounded-lg' onClick={()=>selectedStyle(item)}>
84-
<img src={item.img} width={600} height={80} className='rounded-lg'/>
85-
87+
{/* Style Selection Controller */}
88+
<div>
89+
<label>Style</label>
90+
<div className="grid grid-cols-3 gap-3">
91+
{Style.map((item, index) => (
92+
<div>
93+
<div
94+
className="cursor-pointer hover:border-2 rounded-lg"
95+
onClick={() => selectedStyle(item)}
96+
>
97+
<img
98+
src={item.img}
99+
width={600}
100+
height={80}
101+
className="rounded-lg"
102+
/>
86103
</div>
87-
<h2 className='text-center'>{item.name}</h2>
88-
</div>
89-
))}
90-
</div>
104+
<h2 className="text-center">{item.name}</h2>
105+
</div>
106+
))}
91107
</div>
108+
</div>
92109

93-
<div className='flex gap-2 my-4 items-center mt-10'>
94-
<Checkbox onCheckedChange={(e)=>setSignInEnable(e)} /> <h2>Enable Social Authentication before submit the form</h2>
95-
</div>
110+
<div className="flex gap-2 my-4 items-center mt-10">
111+
<Checkbox onCheckedChange={(e) => setSignInEnable(e)} />{" "}
112+
<h2>Enable Social Authentication before submit the form</h2>
113+
</div>
96114
</div>
97-
)
115+
);
98116
}
99117

100-
export default Controller
118+
export default Controller;

‎app/dashboard/edit-form/_components/FieldEdit.jsx

+79-70
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,90 @@
1-
import { Delete, Edit, Trash } from 'lucide-react'
2-
import React, { useState } from 'react'
1+
import { Delete, Edit, Trash } from "lucide-react";
2+
import React, { useState } from "react";
33
import {
4-
Popover,
5-
PopoverContent,
6-
PopoverTrigger,
7-
} from "../../components/ui/popover"
8-
import { Input } from '../../components/ui/input'
9-
import { Button } from '../../components/ui/button';
4+
Popover,
5+
PopoverContent,
6+
PopoverTrigger,
7+
} from "@/app/components/ui/popover";
8+
import { Input } from "@/app/components/ui/input";
9+
import { Button } from "@/app/components/ui/button";
1010
import {
11-
AlertDialog,
12-
AlertDialogAction,
13-
AlertDialogCancel,
14-
AlertDialogContent,
15-
AlertDialogDescription,
16-
AlertDialogFooter,
17-
AlertDialogHeader,
18-
AlertDialogTitle,
19-
AlertDialogTrigger,
20-
} from "../../components/ui/alert-dialog"
21-
22-
23-
function FieldEdit({defaultValue,onUpdate,deleteField}) {
11+
AlertDialog,
12+
AlertDialogAction,
13+
AlertDialogCancel,
14+
AlertDialogContent,
15+
AlertDialogDescription,
16+
AlertDialogFooter,
17+
AlertDialogHeader,
18+
AlertDialogTitle,
19+
AlertDialogTrigger,
20+
} from "@/app/components/ui/alert-dialog";
2421

25-
const [label,setLabel]=useState(defaultValue?.label);
26-
const [placeholder,setPlaceholder]=useState(defaultValue?.placeholder);
22+
function FieldEdit({ defaultValue, onUpdate, deleteField }) {
23+
const [label, setLabel] = useState(defaultValue?.label);
24+
const [placeholder, setPlaceholder] = useState(defaultValue?.placeholder);
2725

2826
return (
29-
<div className='flex gap-2'>
30-
31-
<Popover>
32-
<PopoverTrigger> <Edit className='h-5 w-5 text-gray-500'/></PopoverTrigger>
27+
<div className="flex gap-2">
28+
<Popover>
29+
<PopoverTrigger>
30+
{" "}
31+
<Edit className="h-5 w-5 text-gray-500" />
32+
</PopoverTrigger>
3333
<PopoverContent>
34-
<h2>Edit Fields</h2>
35-
<div>
36-
<label className='text-xs'>Label Name</label>
37-
<Input type="text" defaultValue={defaultValue.label}
38-
onChange={(e)=>setLabel(e.target.value)}
39-
/>
40-
</div>
41-
<div>
42-
<label className='text-xs'>Placeholder Name</label>
43-
<Input type="text" defaultValue={defaultValue.placeholder}
44-
onChange={(e)=>setPlaceholder(e.target.value)}
45-
/>
46-
</div>
47-
<Button size="sm" className="mt-3"
48-
onClick={()=>onUpdate({
49-
label:label,
50-
placeholder:placeholder
51-
})}
52-
>Update</Button>
34+
<h2>Edit Fields</h2>
35+
<div>
36+
<label className="text-xs">Label Name</label>
37+
<Input
38+
type="text"
39+
defaultValue={defaultValue.label}
40+
onChange={(e) => setLabel(e.target.value)}
41+
/>
42+
</div>
43+
<div>
44+
<label className="text-xs">Placeholder Name</label>
45+
<Input
46+
type="text"
47+
defaultValue={defaultValue.placeholder}
48+
onChange={(e) => setPlaceholder(e.target.value)}
49+
/>
50+
</div>
51+
<Button
52+
size="sm"
53+
className="mt-3"
54+
onClick={() =>
55+
onUpdate({
56+
label: label,
57+
placeholder: placeholder,
58+
})
59+
}
60+
>
61+
Update
62+
</Button>
5363
</PopoverContent>
54-
</Popover>
64+
</Popover>
5565

56-
57-
<AlertDialog>
58-
<AlertDialogTrigger>
59-
<Trash className='h-5 w-5 text-red-500'/>
60-
</AlertDialogTrigger>
61-
<AlertDialogContent>
62-
<AlertDialogHeader>
63-
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
64-
<AlertDialogDescription>
65-
This action cannot be undone. This will permanently delete your account
66-
and remove your data from our servers.
67-
</AlertDialogDescription>
68-
</AlertDialogHeader>
69-
<AlertDialogFooter>
70-
<AlertDialogCancel>Cancel</AlertDialogCancel>
71-
<AlertDialogAction onClick={()=>deleteField()}>Continue</AlertDialogAction>
72-
</AlertDialogFooter>
73-
</AlertDialogContent>
74-
</AlertDialog>
75-
76-
66+
<AlertDialog>
67+
<AlertDialogTrigger>
68+
<Trash className="h-5 w-5 text-red-500" />
69+
</AlertDialogTrigger>
70+
<AlertDialogContent>
71+
<AlertDialogHeader>
72+
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
73+
<AlertDialogDescription>
74+
This action cannot be undone. This will permanently delete your
75+
account and remove your data from our servers.
76+
</AlertDialogDescription>
77+
</AlertDialogHeader>
78+
<AlertDialogFooter>
79+
<AlertDialogCancel>Cancel</AlertDialogCancel>
80+
<AlertDialogAction onClick={() => deleteField()}>
81+
Continue
82+
</AlertDialogAction>
83+
</AlertDialogFooter>
84+
</AlertDialogContent>
85+
</AlertDialog>
7786
</div>
78-
)
87+
);
7988
}
8089

81-
export default FieldEdit
90+
export default FieldEdit;

‎app/dashboard/edit-form/_components/FormUi.jsx

+168-147
Original file line numberDiff line numberDiff line change
@@ -1,191 +1,212 @@
1-
import { Input } from '../../components/ui/input'
2-
import React, { useEffect, useRef, useState } from 'react'
1+
import { Input } from "@/app/components/ui/input";
2+
import React, { useEffect, useRef, useState } from "react";
33
import {
44
Select,
55
SelectContent,
66
SelectItem,
77
SelectTrigger,
88
SelectValue,
9-
} from "../../components/ui/select"
10-
import { Checkbox } from "../../components/ui/checkbox"
11-
12-
import { Label } from "../../components/ui/label"
13-
import { RadioGroup, RadioGroupItem } from "../../components/ui/radio-group"
14-
import { Button } from '../../components/ui/button'
15-
import FieldEdit from './FieldEdit'
16-
import { db } from '../../configs'
17-
import { userResponses } from '../../configs/schema'
18-
import moment from 'moment'
19-
import { toast } from 'sonner'
20-
import { SignInButton, useUser } from '@clerk/nextjs'
21-
22-
function FormUi({ jsonForm,selectedTheme,selectedStyle,
23-
onFieldUpdate,deleteField,editable=true,formId=0,enabledSignIn=false }) {
24-
const [formData,setFormData]=useState();
25-
let formRef=useRef();
26-
const {user,isSignedIn}=useUser();
27-
const handleInputChange=(event)=>{
28-
const {name,value}=event.target;
9+
} from "@/app/components/ui/select";
10+
import { Checkbox } from "@/app/components/ui/checkbox";
11+
12+
import { Label } from "@/app/components/ui/label";
13+
import { RadioGroup, RadioGroupItem } from "@/app/components/ui/radio-group";
14+
import { Button } from "@/app/components/ui/button";
15+
import FieldEdit from "./FieldEdit";
16+
import { db } from "@/app/configs";
17+
import { userResponses } from "@/app/configs/schema";
18+
import moment from "moment";
19+
import { toast } from "sonner";
20+
import { SignInButton, useUser } from "@clerk/nextjs";
21+
22+
function FormUi({
23+
jsonForm,
24+
selectedTheme,
25+
selectedStyle,
26+
onFieldUpdate,
27+
deleteField,
28+
editable = true,
29+
formId = 0,
30+
enabledSignIn = false,
31+
}) {
32+
const [formData, setFormData] = useState();
33+
let formRef = useRef();
34+
const { user, isSignedIn } = useUser();
35+
const handleInputChange = (event) => {
36+
const { name, value } = event.target;
2937
setFormData({
3038
...formData,
31-
[name]:value
32-
})
33-
}
39+
[name]: value,
40+
});
41+
};
3442

35-
const hadleSelectChange=(name,value)=>{
43+
const hadleSelectChange = (name, value) => {
3644
setFormData({
3745
...formData,
38-
[name]:value
39-
})
40-
}
46+
[name]: value,
47+
});
48+
};
4149

42-
const onFormSubmit=async(event)=>{
43-
event.preventDefault()
50+
const onFormSubmit = async (event) => {
51+
event.preventDefault();
4452
console.log(formData);
4553

46-
const result=await db.insert(userResponses)
47-
.values({
48-
jsonResponse:formData,
49-
createdAt:moment().format('DD/MM/yyy'),
50-
formRef:formId
51-
})
54+
const result = await db.insert(userResponses).values({
55+
jsonResponse: formData,
56+
createdAt: moment().format("DD/MM/yyy"),
57+
formRef: formId,
58+
});
5259

53-
if(result)
54-
{
60+
if (result) {
5561
formRef.reset();
56-
toast('Response Submitted Successfully !')
62+
toast("Response Submitted Successfully !");
63+
} else {
64+
toast("Error while saving your form !");
5765
}
58-
else{
59-
toast('Error while saving your form !')
66+
};
6067

61-
}
62-
}
68+
const handleCheckboxChange = (fieldName, itemName, value) => {
69+
const list = formData?.[fieldName] ? formData?.[fieldName] : [];
6370

64-
const handleCheckboxChange=(fieldName, itemName, value)=>{
65-
66-
const list=formData?.[fieldName]?formData?.[fieldName]:[];
67-
68-
if(value)
69-
{
71+
if (value) {
7072
list.push({
71-
label:itemName,
72-
value:value
73-
})
73+
label: itemName,
74+
value: value,
75+
});
7476
setFormData({
7577
...formData,
76-
[fieldName]:list
77-
})
78-
}else{
79-
const result= list.filter((item)=>item.label==itemName);
80-
setFormData({
81-
...formData,
82-
[fieldName]:result
83-
})
78+
[fieldName]: list,
79+
});
80+
} else {
81+
const result = list.filter((item) => item.label == itemName);
82+
setFormData({
83+
...formData,
84+
[fieldName]: result,
85+
});
8486
}
85-
86-
}
87+
};
8788

8889
return (
89-
<form
90-
91-
ref={(e)=>formRef=e}
92-
onSubmit={onFormSubmit}
93-
className='border p-5 md:w-[600px] rounded-lg'
94-
data-theme={selectedTheme}
95-
style={{
96-
boxShadow: selectedStyle?.key=='boxshadow'&& '5px 5px 0px black',
97-
border:selectedStyle?.key=='border'&&selectedStyle.value
98-
}}
99-
>
100-
101-
<h2 className='font-bold text-center text-2xl'>{jsonForm?.formTitle}</h2>
102-
<h2 className='text-sm text-gray-400 text-center'>{jsonForm?.formHeading}</h2>
90+
<form
91+
ref={(e) => (formRef = e)}
92+
onSubmit={onFormSubmit}
93+
className="border p-5 md:w-[600px] rounded-lg"
94+
data-theme={selectedTheme}
95+
style={{
96+
boxShadow: selectedStyle?.key == "boxshadow" && "5px 5px 0px black",
97+
border: selectedStyle?.key == "border" && selectedStyle.value,
98+
}}
99+
>
100+
<h2 className="font-bold text-center text-2xl">{jsonForm?.formTitle}</h2>
101+
<h2 className="text-sm text-gray-400 text-center">
102+
{jsonForm?.formHeading}
103+
</h2>
103104

104105
{jsonForm?.fields?.map((field, index) => (
105-
<div key={index} className='flex items-center gap-2'>
106-
{field.fieldType == 'select' ?
107-
<div className='my-3 w-full'>
108-
<label className='text-xs text-gray-500'>{field.label}</label>
109-
110-
<Select required={field?.required}
111-
onValueChange={(v)=>hadleSelectChange(field.fieldName,v)}>
106+
<div key={index} className="flex items-center gap-2">
107+
{field.fieldType == "select" ? (
108+
<div className="my-3 w-full">
109+
<label className="text-xs text-gray-500">{field.label}</label>
110+
111+
<Select
112+
required={field?.required}
113+
onValueChange={(v) => hadleSelectChange(field.fieldName, v)}
114+
>
112115
<SelectTrigger className="w-full bg-transparent">
113116
<SelectValue placeholder={field.placeholder} />
114117
</SelectTrigger>
115118
<SelectContent>
116119
{field.options.map((item, index) => (
117-
<SelectItem key={index} value={item.label?item.label:item}>{item.label?item.label:item}</SelectItem>
120+
<SelectItem
121+
key={index}
122+
value={item.label ? item.label : item}
123+
>
124+
{item.label ? item.label : item}
125+
</SelectItem>
118126
))}
119127
</SelectContent>
120128
</Select>
121129
</div>
122-
: field.fieldType == 'radio' ?
123-
<div className='w-full my-3'>
124-
<label className='text-xs text-gray-500'>{field.label}</label>
125-
126-
<RadioGroup required={field?.required} >
127-
{field.options.map((item, index) => (
128-
<div key={index} className="flex items-center space-x-2">
129-
<RadioGroupItem value={item.label} id={item.label}
130-
onClick={()=>hadleSelectChange(field.fieldName,item.label)}
131-
/>
132-
<Label htmlFor={item.label}>{item.label}</Label>
133-
</div>
134-
))}
135-
136-
137-
</RadioGroup>
138-
139-
</div>
140-
:field.fieldType=='checkbox'?
141-
<div className='my-3 w-full'>
142-
<label className='text-xs text-gray-500'>{field?.label}</label>
143-
{field?.options?field?.options?.map((item,index)=>(
144-
<div key={index} className='flex gap-2 items-center'>
145-
<Checkbox
146-
onCheckedChange={(v)=>handleCheckboxChange(field?.label,item.label?item.label:item,v)} />
147-
<h2>{item.label?item.label:item}</h2>
148-
130+
) : field.fieldType == "radio" ? (
131+
<div className="w-full my-3">
132+
<label className="text-xs text-gray-500">{field.label}</label>
133+
134+
<RadioGroup required={field?.required}>
135+
{field.options.map((item, index) => (
136+
<div key={index} className="flex items-center space-x-2">
137+
<RadioGroupItem
138+
value={item.label}
139+
id={item.label}
140+
onClick={() =>
141+
hadleSelectChange(field.fieldName, item.label)
142+
}
143+
/>
144+
<Label htmlFor={item.label}>{item.label}</Label>
145+
</div>
146+
))}
147+
</RadioGroup>
148+
</div>
149+
) : field.fieldType == "checkbox" ? (
150+
<div className="my-3 w-full">
151+
<label className="text-xs text-gray-500">{field?.label}</label>
152+
{field?.options ? (
153+
field?.options?.map((item, index) => (
154+
<div key={index} className="flex gap-2 items-center">
155+
<Checkbox
156+
onCheckedChange={(v) =>
157+
handleCheckboxChange(
158+
field?.label,
159+
item.label ? item.label : item,
160+
v
161+
)
162+
}
163+
/>
164+
<h2>{item.label ? item.label : item}</h2>
149165
</div>
150166
))
151-
:
152-
<div className='flex gap-2 items-center'>
153-
<Checkbox required={field.required} />
154-
<h2>{field.label}</h2>
155-
</div>
156-
}
167+
) : (
168+
<div className="flex gap-2 items-center">
169+
<Checkbox required={field.required} />
170+
<h2>{field.label}</h2>
157171
</div>
158-
159-
: <div className='my-3 w-full'>
160-
<label className='text-xs text-gray-500'>{field.label}</label>
161-
<Input type={field?.type}
162-
placeholder={field.placeholder}
163-
name={field.fieldName}
164-
className="bg-transparent"
165-
required={field?.required}
166-
onChange={(e)=>handleInputChange(e)}
167-
/>
168-
</div>}
169-
170-
{editable&& <div>
171-
<FieldEdit defaultValue={field}
172-
onUpdate={(value)=>onFieldUpdate(value,index)}
173-
deleteField={()=>deleteField(index)}
174-
/>
175-
</div>}
172+
)}
173+
</div>
174+
) : (
175+
<div className="my-3 w-full">
176+
<label className="text-xs text-gray-500">{field.label}</label>
177+
<Input
178+
type={field?.type}
179+
placeholder={field.placeholder}
180+
name={field.fieldName}
181+
className="bg-transparent"
182+
required={field?.required}
183+
onChange={(e) => handleInputChange(e)}
184+
/>
185+
</div>
186+
)}
187+
188+
{editable && (
189+
<div>
190+
<FieldEdit
191+
defaultValue={field}
192+
onUpdate={(value) => onFieldUpdate(value, index)}
193+
deleteField={() => deleteField(index)}
194+
/>
195+
</div>
196+
)}
176197
</div>
177198
))}
178-
{!enabledSignIn?
179-
<button className='btn btn-primary'>Submit</button>:
180-
isSignedIn?
181-
<button className='btn btn-primary'>Submit</button>:
182-
<Button>
183-
<SignInButton mode='modal' >Sign In before Submit</SignInButton>
184-
</Button> }
185-
186-
199+
{!enabledSignIn ? (
200+
<button className="btn btn-primary">Submit</button>
201+
) : isSignedIn ? (
202+
<button className="btn btn-primary">Submit</button>
203+
) : (
204+
<Button>
205+
<SignInButton mode="modal">Sign In before Submit</SignInButton>
206+
</Button>
207+
)}
187208
</form>
188-
)
209+
);
189210
}
190211

191-
export default FormUi
212+
export default FormUi;

‎app/dashboard/forms/_components/CreateForm.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ function CreateForm() {
6666

6767
console.log("New Form ID", resp[0].id);
6868
if (resp[0].id) {
69-
route.push("/edit-form/" + resp[0].id);
69+
route.push("/dashboard/form/edit-form/" + resp[0].id);
7070
}
7171
setLoading(false);
7272
}

‎app/dashboard/forms/_components/FormListItem.jsx

-1
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,6 @@ function FormListItem({ formRecord, jsonForm, refreshData }) {
8787
</RWebShare>
8888
<Link href={"/edit-form/" + formRecord?.id}>
8989
<Button className="flex gap-2" size="sm">
90-
{" "}
9190
<Edit className="h-5 w-5" /> Edit
9291
</Button>
9392
</Link>

‎app/dashboard/forms/_components/SideNav.jsx

+2-8
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { db } from "../../../configs";
44
import { JsonForms } from "../../../configs/schema";
55
import { useUser } from "@clerk/nextjs";
66
import { desc, eq } from "drizzle-orm";
7-
import { LibraryBig, LineChart, MessageSquare, Shield } from "lucide-react";
7+
import { LibraryBig, MessageSquare, Shield } from "lucide-react";
88
import Link from "next/link";
99
import { usePathname } from "next/navigation";
1010
import React, { useEffect, useState } from "react";
@@ -23,12 +23,6 @@ function SideNav() {
2323
icon: MessageSquare,
2424
path: "/dashboard/responses",
2525
},
26-
{
27-
id: 1,
28-
name: "Analytics",
29-
icon: LineChart,
30-
path: "/dashboard/analytics",
31-
},
3226
{
3327
id: 1,
3428
name: "Upgrade",
@@ -77,7 +71,7 @@ function SideNav() {
7771
</Link>
7872
))}
7973
</div>
80-
<div className="fixed bottom-7 p-6 w-64 ">
74+
<div className="fixed bottom-0 p-6 w-64 border">
8175
<Button className="w-full">+ Create Form</Button>
8276
<div className="my-7">
8377
<Progress value={PercFileCreated} />

‎app/dashboard/forms/layout.jsx

+12-17
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,19 @@
1-
"use client"
2-
import { SignIn, SignedIn } from '@clerk/clerk-react'
3-
import React from 'react'
4-
import SideNav from './_components/SideNav'
1+
"use client";
2+
import { SignIn, SignedIn } from "@clerk/clerk-react";
3+
import React from "react";
4+
import SideNav from "./_components/SideNav";
55

6-
function DashboardLayout({children}) {
6+
function DashboardLayout({ children }) {
77
return (
88
<SignedIn>
9-
<div>
10-
<div className='md:w-64 fixed'>
11-
<SideNav/>
9+
<div className="w-full">
10+
<div className="md:w-64 fixed">
11+
<SideNav />
1212
</div>
13-
<div className='md:ml-64'>
14-
15-
{children}
16-
17-
</div>
18-
19-
</div>
13+
<div className="md:ml-64">{children}</div>
14+
</div>
2015
</SignedIn>
21-
)
16+
);
2217
}
2318

24-
export default DashboardLayout
19+
export default DashboardLayout;

‎app/dashboard/forms/page.jsx

-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ function Dashboard() {
99
<h2 className='font-bold text-3xl flex items-center justify-between'>Dashboard
1010
<CreateForm/>
1111
</h2>
12-
{/* List of Forms */}
1312
<FormList/>
1413
</div>
1514
)

‎app/dashboard/page.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import Link from "next/link";
22
import {
33
Bell,
4-
CircleUser,
54
Home,
65
LineChart,
76
Menu,

0 commit comments

Comments
 (0)
Please sign in to comment.