From 73770103d09002e7e296162d6d73ab5eb944a70c Mon Sep 17 00:00:00 2001 From: MoulikaKulkarni Date: Mon, 18 Sep 2023 19:56:26 +0530 Subject: [PATCH 1/3] fix: create schema responsiveness Signed-off-by: MoulikaKulkarni --- src/components/Resources/Schema/Create.tsx | 1006 +++++++++++--------- 1 file changed, 535 insertions(+), 471 deletions(-) diff --git a/src/components/Resources/Schema/Create.tsx b/src/components/Resources/Schema/Create.tsx index 5660dbc33..08b72bc01 100644 --- a/src/components/Resources/Schema/Create.tsx +++ b/src/components/Resources/Schema/Create.tsx @@ -4,13 +4,8 @@ import * as yup from 'yup'; import { Alert, Button, Card, Label, Table } from 'flowbite-react'; import { Field, FieldArray, Form, Formik } from 'formik'; -import { - apiStatusCodes, - schemaVersionRegex, - storageKeys, -} from '../../../config/CommonConstant'; +import {apiStatusCodes,schemaVersionRegex,storageKeys} from '../../../config/CommonConstant'; import { useEffect, useState } from 'react'; - import type { AxiosResponse } from 'axios'; import BreadCrumbs from '../../BreadCrumbs'; import type { FieldName, Values } from './interfaces'; @@ -19,477 +14,546 @@ import { addSchema } from '../../../api/Schema'; import { getFromLocalStorage } from '../../../api/Auth'; import { pathRoutes } from '../../../config/pathRoutes'; -const options = [ - { value: 'string', label: 'String' }, - { value: 'number', label: 'Number' }, - { value: 'date', label: 'Date' }, -]; - -const CreateSchema = () => { - const [failure, setFailure] = useState(null); - const [orgId, setOrgId] = useState(0); - const [orgDid, setOrgDid] = useState(''); - const [createloader, setCreateLoader] = useState(false); - - useEffect(() => { - const fetchData = async () => { - const organizationId = await getFromLocalStorage(storageKeys.ORG_ID); - setOrgId(Number(organizationId)); - }; - - fetchData(); - }, []); - - const submit = async (values: Values) => { - setCreateLoader(true); - const schemaFieldName: FieldName = { - schemaName: values.schemaName, - schemaVersion: values.schemaVersion, - attributes: values.attribute, - orgId: orgId, - }; - - const createSchema = await addSchema(schemaFieldName); - const { data } = createSchema as AxiosResponse; - if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) { - if (data?.data) { - setCreateLoader(false); - window.location.href = pathRoutes.organizations.schemas; - } else { - setFailure(createSchema as string); - setCreateLoader(false); - } - } else { - setCreateLoader(false); - setFailure(createSchema as string); - setTimeout(() => { - setFailure(null); - }, 4000); - } - }; - - return ( -
-
- -

- Create Schema -

-
-
- -
- => { - values.attribute.forEach((element: any) => { - if (!element.schemaDataType) { - element.schemaDataType = 'string'; - } - }); - const updatedAttribute: Array = []; - values.attribute.forEach((element) => { - updatedAttribute.push(Number(element)); - }); - submit(values); - }} - > - {(formikHandlers): JSX.Element => ( -
-
-
-
-
-
- {' '} - - {formikHandlers.errors && - formikHandlers.touched.schemaName && - formikHandlers.errors.schemaName ? ( - - ) : ( - - )} -
-
-
-
-
-
- {' '} - - {formikHandlers.errors && - formikHandlers.touched.schemaVersion && - formikHandlers.errors.schemaVersion ? ( - - ) : ( - - )} -
-
-
-
- - {(fieldArrayProps: any): JSX.Element => { - const { form, remove, push } = fieldArrayProps; - const { values } = form; - const { attribute } = values; - - const areFirstInputsSelected = - values.schemaName && values.schemaVersion; - - return ( - <> -
- Attributes * -
-
- {attribute.map((element: any, index: number) => ( -
- -
-
- - {formikHandlers.touched.attribute && - attribute[index] && - formikHandlers?.errors?.attribute && - formikHandlers?.errors?.attribute[ - index - ] && - formikHandlers?.touched?.attribute[index] - ?.attributeName && - formikHandlers?.errors?.attribute[index] - ?.attributeName ? ( - - ) : ( - - )} -
- -
- - {options.map((opt) => { - return ( - - ); - })} - - {formikHandlers?.touched?.attribute && - attribute[index] && - formikHandlers?.errors?.attribute && - formikHandlers?.errors?.attribute[ - index - ] && - formikHandlers?.touched?.attribute[index] - ?.schemaDataType && - formikHandlers?.errors?.attribute[index] - ?.schemaDataType ? ( - - ) : ( - - )} -
-
- - - {formikHandlers?.touched?.attribute && - attribute[index] && - formikHandlers?.errors?.attribute && - formikHandlers?.errors?.attribute[ - index - ] && - formikHandlers?.touched?.attribute[index] - ?.displayName && - formikHandlers?.errors?.attribute[index] - ?.displayName ? ( - - ) : ( - - )} -
- {index === 0 && attribute.length === 1 ? ( - '' - ) : ( -
+ const options = [ + { value: 'string', label: 'String' }, + { value: 'number', label: 'Number' }, + { value: 'date', label: 'Date' }, + ]; + + + const CreateSchema = () => { + const [failure, setFailure] = useState(null); + const [orgId, setOrgId] = useState(0); + const [orgDid, setOrgDid] = useState(''); + const [createloader, setCreateLoader] = useState(false); + + useEffect(() => { + const fetchData = async () => { + const organizationId = await getFromLocalStorage( + storageKeys.ORG_ID); + setOrgId(Number(organizationId)); + }; + + fetchData(); + }, []); + + const submit = async (values: Values) => { + setCreateLoader(true); + const schemaFieldName: FieldName = { + schemaName: values.schemaName, + schemaVersion: values.schemaVersion, + attributes: values.attribute, + orgId: orgId, + }; + + const createSchema = await addSchema(schemaFieldName); + const { data } = createSchema as AxiosResponse; + if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) { + + if (data?.data) { + setCreateLoader(false); + window.location.href = pathRoutes.organizations.schemas; + + } else { + setFailure(createSchema as string); + setCreateLoader(false); + } + } else { + setCreateLoader(false); + setFailure(createSchema as string); + setTimeout(() => { + setFailure(null); + }, 4000); + } + }; + + return ( +
+
+ +

+ Create Schema +

+
+
+ +
+ => { + values.attribute.forEach((element: any) => { + + if (!element.schemaDataType) { + element.schemaDataType = 'string'; + } + }); + const updatedAttribute: Array = []; + values.attribute.forEach((element) => { + updatedAttribute.push(Number(element)); + + }); + submit(values); + }} + > + {(formikHandlers): JSX.Element => ( + + +
+
+
+
+
+ {' '} + + {formikHandlers.errors && + formikHandlers.touched.schemaName && + formikHandlers.errors.schemaName ? ( + + + ) : ( + + )} +
+
+
+
+
+
+ {' '} + + {formikHandlers.errors && + formikHandlers.touched.schemaVersion && + formikHandlers.errors.schemaVersion ? ( + + + ) : ( + + )} +
+
+
+
+ + {(fieldArrayProps: any): JSX.Element => { + const { form, remove, push } = fieldArrayProps; + const { values } = form; + const { attribute } = values; + + const areFirstInputsSelected = + values.schemaName && values.schemaVersion; + + return ( + <> +
+ Attributes * + +
+
+ {attribute.map((element: any, index: number, schemaDataType:string) => ( + +
+ + +
+
+ + {formikHandlers.touched.attribute && + attribute[index] && + formikHandlers?.errors?.attribute && + formikHandlers?.errors?.attribute[ + index + ] && + formikHandlers?.touched?.attribute[index] + ?.attributeName && + formikHandlers?.errors?.attribute[index] + + ?.attributeName ? ( + + ) : ( + + )} +
+ +
+ + {options.map((opt) => { + return ( + + ); + })} + + {formikHandlers?.touched?.attribute && + attribute[index] && + formikHandlers?.errors?.attribute && + formikHandlers?.errors?.attribute[ + index + ] && + formikHandlers?.touched?.attribute[index] + ?.schemaDataType && + formikHandlers?.errors?.attribute[index] + + ?.schemaDataType ? ( + + ) : ( + + )} +
+
+ + + {formikHandlers?.touched?.attribute && + attribute[index] && + formikHandlers?.errors?.attribute && + formikHandlers?.errors?.attribute[ + index + ] && + formikHandlers?.touched?.attribute[index] + ?.displayName && + formikHandlers?.errors?.attribute[index] + + ?.displayName ? ( + + ) : ( + + )} +
+ + + +
+ {index === 0 && attribute.length === 1 ? ( +
-
- )} - {index === attribute.length - 1 && ( - - )} -
-
- ))} -
- - ); - }} - -
- - {failure && ( -
- setFailure(null)}> - -

{failure}

- - -
- )} -
-
+ ) : ( + +
+ +
+ )} + + {index === attribute.length - 1 && ( +
+ + +
+ )} +
+
+ +
+ ))} +
+ + ); + }} + +
+ + {failure && ( +
+ setFailure(null)}> + +

{failure}

+ + +
+ )} +
+ -
- -
- -
- -
- +
+ +
+ +
+ +
+ -
- - )} - -
- -
-
- ); +
+ + )} + +
+ +
+
+ ); }; -export default CreateSchema; +export default CreateSchema; \ No newline at end of file From 169126c0fe81b43124d0dd9a8e9a774dc62c5dba Mon Sep 17 00:00:00 2001 From: MoulikaKulkarni Date: Tue, 19 Sep 2023 12:28:13 +0530 Subject: [PATCH 2/3] fix:fixed array index in keys Signed-off-by: MoulikaKulkarni --- src/components/Resources/Schema/Create.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Resources/Schema/Create.tsx b/src/components/Resources/Schema/Create.tsx index 08b72bc01..886170ed8 100644 --- a/src/components/Resources/Schema/Create.tsx +++ b/src/components/Resources/Schema/Create.tsx @@ -215,7 +215,7 @@ import { pathRoutes } from '../../../config/pathRoutes'; Attribute: {index + 1} -
+
{index === 0 && attribute.length === 1 ? ( -
+