added newform and form dashboard pages

opencodeiiita · Jun 16, 2023 · daa7438 · daa7438 · vercel · Jun 16, 2023
1 parent 5b1df3a
commit daa7438
Show file tree

Hide file tree

Showing 7 changed files with 375 additions and 135 deletions.
diff --git a/assets/svgs/dashboardsVector.svg b/assets/svgs/dashboardsVector.svg
diff --git a/components/elements/CustomParameterInput/index.js b/components/elements/CustomParameterInput/index.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { Dropdown, Input, Button, Space } from 'antd';
+import { AiOutlineDown } from 'react-icons/ai';
+
+export default function CustomParameter() {
+  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: '',
+    },
+  ];
+  const menuProps = {
+    items,
+    onClick: handleMenuClick,
+  };
+  const handleMenuClick = (e) => {
+    console.log('click', e);
+  };
+  return (
+    <>
+      <div className="flex flex-row justify-around gap-4 items-center">
+        <div>
+          <Dropdown menu={menuProps}>
+            <Button className="rounded-lg" size="large">
+              <Space>
+                Custom Option Type
+                <AiOutlineDown />
+              </Space>
+            </Button>
+          </Dropdown>
+        </div>
+        <div className="w-full">
+          <Input placeholder="Custom Option Value" className="rounded-lg " />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/components/elements/FormInput/index.js b/components/elements/FormInput/index.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import { Input, Checkbox, Dropdown, Button, Space } from 'antd';
+import { AiOutlineDown, AiOutlinePlus } 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: '',
+    },
+  ];
+  const menuProps = {
+    items,
+    onClick: handleMenuClick,
+  };
+  const handleMenuClick = (e) => {
+    console.log('click', e);
+  };
+  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>
+      </div>
+    </>
+  );
+}
diff --git a/components/elements/FormResponse/index.js b/components/elements/FormResponse/index.js
@@ -0,0 +1,26 @@
+import React from 'react';
+export default function FormResponse({ response }) {
+  return (
+    <>
+      <div className="border-2 rounded-lg">
+        <div className="p-4 flex flex-col">
+          <div className="flex flex-row gap-1">
+            <div className="text-[#001e2b] font-semibold text-sm">Name:</div>
+            <div className="text-[#006bfb] font-base text-sm">Manas Gupta</div>
+          </div>
+          <div className="flex flex-row gap-1">
+            <div className="text-[#001e2b] font-semibold text-sm">City:</div>
+            <div className="text-[#006bfb] font-base text-sm">Ludhiana</div>
+          </div>
+          <div className="flex flex-row gap-1">
+            <div className="text-[#001e2b] font-semibold text-sm">State:</div>
+            <div className="text-[#006bfb] font-base text-sm">Punjab</div>
+          </div>
+          <div className="self-end text-[#001e2b] italic text-xs">
+            Submittted a week ago
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/components/utils/JSONSchema/index.js b/components/utils/JSONSchema/index.js
@@ -1,53 +1,60 @@
-import React from "react";
+const options = {
+  email: { type: 'string', format: 'email' },
+  checkbox: { type: 'boolean' },
+  color: {
+    type: 'string',
+    pattern: '^#[0-9a-f]{3}([0-9a-f]{3})?$',
+  },
+  date: { type: 'string', format: 'date' },
+  'datetime-local': { type: 'string', format: 'date-time' },
+  image: {
+    type: 'string',
+    format: 'uri',
+  },
+  hidden: { type: 'boolean' },
+  month: { type: 'integer', minimum: 1, maximum: 12 },
+  number: { type: 'number' },
+  radio: { type: 'boolean' },
+  range: { type: 'number' },
+  reset: { type: 'boolean' },
+  search: { type: 'string' },
+  tel: {
+    type: 'string',
+    minLength: 10,
+    maxLength: 20,
+    pattern: '^(\\([0-9]{3}\\))?[0-9]{3}-[0-9]{4}$',
+  },
+  text: { type: 'string' },
+  time: { type: 'string', format: 'time' },
+  url: { type: 'string', format: 'uri' },
+  week: { type: 'number', minimum: 1, maximum: 53 },
+  file: { type: 'string', format: 'uri' },
+  password: { type: 'string' },
+};
 
 const createJSONSchema = (inputs) => {
   let JSONSchema = {
-    type: "object",
+    type: 'object',
     properties: {},
-    isRequired: [],
+    required: [],
+    additionalProperties: false,
   };
   inputs.forEach((input) => {
     JSONSchema.properties[input.name] = options[input.type];
     if (input.isRequired) {
-      JSONSchema.isRequired.push(input.name);
+      JSONSchema.required.push(input.name);
     }
   });
+  console.log(JSONSchema);
   return JSONSchema;
 };
+createJSONSchema([
+  { name: 'name', type: 'text', isRequired: true },
+  { name: 'email', type: 'email', isRequired: true },
+  { name: 'password', type: 'password', isRequired: true },
+  { name: 'checkbox', type: 'checkbox', isRequired: true },
+  { name: 'color', type: 'color', isRequired: true },
+  { name: 'date', type: 'date', isRequired: true },
+]);
 
-const options = {
-  email: { type: "string", format: "email" },
-  checkbox: { type: "boolean" },
-  color: {
-    type: "string",
-    pattern:
-      "^#([da-f]{3}){1,2}$|^#([da-f]{4}){1,2}$|(rgb|hsl)a?((s*-?d+%?s*,){2}(s*-?d+%?s*,?s*)?)(,s*(0?.d+)?|1)?)",
-  },
-  date: { type: "string", format: "date" },
-  "datetime-local": { type: "string", format: "date-time" },
-  image: {
-    type: "string",
-    format: "uri",
-  },
-  hidden: { type: "boolean" },
-  month: { type: "integer", minimum: 1, maximum: 12 },
-  number: { type: "number" },
-  radio: { type: "boolean" },
-  range: { type: "number" },
-  reset: { type: "boolean" },
-  search: { type: "string" },
-  tel: {
-    type: "string",
-    minLength: 10,
-    maxLength: 20,
-    pattern: "^(\\([0-9]{3}\\))?[0-9]{3}-[0-9]{4}$",
-  },
-  text: { type: "string" },
-  time: { type: "string", format: "time" },
-  url: { type: "string", format: "uri" },
-  week: { type: "number", minimum: 1, maximum: 53 },
-  file: { type: "string", format:'uri' },
-  password: { type: "string" },
-};
-
-export default createJSONSchema;
+// export default createJSONSchema;