diff --git a/playground/src/App.tsx b/playground/src/App.tsx index c7893aa5..287d1631 100644 --- a/playground/src/App.tsx +++ b/playground/src/App.tsx @@ -165,6 +165,8 @@ const App: React.FC = () => { {graphPage ? ( @@ -277,7 +279,6 @@ const App: React.FC = () => { - diff --git a/playground/src/component/Leaf.tsx b/playground/src/component/Leaf.tsx new file mode 100644 index 00000000..c63174e8 --- /dev/null +++ b/playground/src/component/Leaf.tsx @@ -0,0 +1,244 @@ +import axios from "axios"; +import React, { useState } from "react"; +import { useForm } from "react-hook-form"; +import JSONPretty from "react-json-pretty"; +import { makeObjectData } from "./function"; + +interface Props { + data: any; + toggleNode: any; + parent: any; + port: string; + header: string; +} + +const createElementDetails = ( + item: any, + index: number, + name: string, + register: any, + detail: string +) => { + return Object.keys(item).map((val: any) => + Array.isArray(item[val].value) ? ( + <> +

+ {Object.keys(item[val].value[0])[0]} +

+ {item[val].value.map((va: any) => { + return ( + <> + {createElementDetails( + va, + index + 1, + name + " " + Object.keys(va)[0], + register, + detail + )} + + ); + })} + + ) : ( +
+

{item[val].value}

+ + 0 && + parseInt(item[val].value[0]).toString() != "NaN"), + } + )} + style={{ height: "1.5rem" }} + /> +
+ ) + ); +}; +const Leaf: React.FC = ({ data, toggleNode, parent, header, port }) => { + const { + register: register3, + handleSubmit: handleSubmit3, + watch, + unregister, + reset, + } = useForm(); + const onSubmit3 = (data: any) => { + let contents; + let model; + let doit; + let myObject: any = {}; + Object.keys(data).map((key: any) => { + if (data[key] === "" || data[key].toString() === "NaN") { + delete data[key]; + } else { + contents = key.split(" ")[0]; + model = key.split(" ")[1]; + doit = key.split(" ")[2]; + + myObject = { + ...myObject, + [key.split(contents + " " + model + " " + doit)[1].trim()]: data[key], + }; + } + }); + + let dataCustom = makeObjectData(myObject); + + const link = port + ? `http://127.0.0.1:${port}/funql` + : `http://127.0.0.1:6005/funql`; + console.log({ + link, + dataCustom, + header, + }); + axios + .post( + link, + { + contents: contents, + details: dataCustom, + wants: { + model: model ? model : "", + doit: doit ? doit : "", + }, + }, + { headers: header } + ) + .then(function (response) { + setResult(JSON.stringify(response.data.body)); + }) + .catch(function (error) { + console.log(error.response, "err"); + // error && setResult("you have errors"); + error && + error.response && + setResult(JSON.stringify(error.response.data)); + }); + }; + const [result, setResult] = useState(""); //this state is for displaying the request result + + return ( + <> + {result ? ( + +
+ + +
+ + ) : ( + +
+
+ + +
+ + {data.map((da: any, index: number) => { + return ( +
+

+ {da && da[0] && Object.keys(da[0]) && Object.keys(da[0])[0]} +

+ {da && + Array.isArray(da) && + da.map((valArray: any) => { + return ( + valArray && ( + <> + { + <> + {createElementDetails( + valArray, + 0, + parent + " " + Object.keys(valArray)[0], + register3, + Object.keys(valArray)[0].split(" ")[0] + )} + + } + + ) + ); + })} +
+ ); + })} +
+ + )} + + ); +}; +export default Leaf; diff --git a/playground/src/component/Modalbox.tsx b/playground/src/component/Modalbox.tsx new file mode 100644 index 00000000..519cd4ce --- /dev/null +++ b/playground/src/component/Modalbox.tsx @@ -0,0 +1,85 @@ +import React from "react"; +import styled from "styled-components"; + +interface Props { + textHeader: string; + open: any; + setOpen: any; + width?: string; +} +interface ContainMI { + open: string; + width?: string; +} +const ModalBox: React.FC = ({ + width, + textHeader, + setOpen, + open, + children, +}) => { + return ( + <> + setOpen("")}> + + + + {textHeader} + + {children} + + + ); +}; +export default ModalBox; + +const Modal = styled.div` + display: ${(props) => (props.open !== "" ? "flex" : "none")}; + flex-direction: column; + z-index: 1; + left: 0; + justify-content: center; + align-items: center; + top: 0; + position: fixed; + width: 100%; + height: 100%; + background-color: rgb(0, 0, 0); + background-color: rgba(0, 0, 0, 0.4); +`; +const ContainerModal = styled.div` + display: ${(props) => (props.open !== "" ? "flex" : "none")}; + border-radius: 0.8rem; + width: ${(props) => (props.width ? props.width : "65%")}; + z-index: 2; + margin: 5rem auto; + height: 80%; + background-color: white; + padding: 0 3rem; + flex-direction: column; +`; + +const HeaderModal = styled.div` + display: flex; + height: 5rem; + border-bottom: 0.1rem solid #cbcbcb; + align-items: center; +`; +const TextHeader = styled.h3` + justify-content: center; + align-items: center; + display: flex; + font-size: 1.5rem; + flex: 1; +`; +// const Close = styled.span` +// font-size: 2.5rem; +// cursor: pointer; +// `; +const BodyModal = styled.div` + display: flex; + justify-content: center; + padding: 2rem 0 3rem 0; + flex-wrap: wrap; + overflow-y: auto; +`; diff --git a/playground/src/component/Test.tsx b/playground/src/component/Test.tsx index 8c8145ce..34c184df 100644 --- a/playground/src/component/Test.tsx +++ b/playground/src/component/Test.tsx @@ -1,8 +1,10 @@ import React, { useState } from "react"; import Tree from "react-d3-tree"; import { PathFunctionOption } from "react-d3-tree/lib/types/common"; +import { useForm } from "react-hook-form"; import "../index.css"; import "../styles/globals.css"; +import Leaf from "./Leaf"; import { TreeData } from "./TreeData"; // This is a simplified example of an org chart with a depth of 2. @@ -19,36 +21,93 @@ import { TreeData } from "./TreeData"; // if(!ndObj._collapsed) // myRef.handleNodeToggle(ndObj.id, false); // }); -const createElementDetails = (item: any, index: number) => { - return Object.keys(item).map((val: any) => - Array.isArray(item[val]) ? ( - <> -

- {Object.keys(item[val][0])[0]} -

- {item[val].map((va: any) => { - return <>{createElementDetails(va, index + 1)}; - })} - - ) : ( -
-

{item[val]}

- -
- ) - ); -}; + interface Props { setGraphPage: any; data: any; + port: string; + header: string; } -const OrgChartTree: React.FC = ({ setGraphPage, data }) => { + +const OrgChartTree: React.FC = ({ + setGraphPage, + data, + header, + port, +}) => { + const { + register: register3, + handleSubmit: handleSubmit3, + watch, + unregister, + reset, + } = useForm(); + + const onSubmit3 = (data: any) => { + // let model; + // let doit; + // let contents; + // let obdata: any; + // Object.keys(data).map((key: any) => { + // if (data[key] === "" || data[key].toString() === "NaN") { + // delete data[key]; + // } else { + // contents = key.split(" ")[0]; + // model = key.split(" ")[1]; + // doit = key.split(" ")[2]; + // console.log(key, key.split(contents + " " + model + " " + doit)[1]); + + // obdata = { + // ...obdata, + // }; + // delete Object.assign(data, { + // [key.split(contents + " " + model + " " + doit)[1]]: data[key], + // })[key]; + // } + // }); + // let dataCustom = makeObjectData(data); + + console.log( + { + // contents: isStatic ? "static" : "dynamic", + details: data, + // wants: { + // model: models ? models.value : "", + // doit: doits ? doits.value : "", + // }, + }, + "dat" + ); + // const link = port + // ? `http://127.0.0.1:${port}/funql` + // : `http://127.0.0.1:6005/funql`; + // axios + // .post( + // link, + // { + // contents: isStatic ? "static" : "dynamic", + // details: dataCustom, + // wants: { + // model: models ? models.value : "", + // doit: doits ? doits.value : "", + // }, + // }, + // { headers: header } + // ) + // .then(function (response) { + // setResult(JSON.stringify(response.data.body)); + // }) + // .catch(function (error) { + // console.log(error.response, "err"); + // // error && setResult("you have errors"); + // error && + // error.response && + // setResult(JSON.stringify(error.response.data)); + // }); + }; + + let list: any; + const [path, setPath] = useState("straight"); return ( // `` will fill width/height of its container; in this case `#treeWrapper`. @@ -65,6 +124,11 @@ const OrgChartTree: React.FC = ({ setGraphPage, data }) => { justifyContent: "center", }} > + {/* {result !== "" && ( + +
{result}
+ + )} */} {!data ? (
= ({ setGraphPage, data }) => { ) : ( - -
- {nodeDatum.data.map((valArray: any) => { - return ( - valArray && ( - <> -

- {" "} - {valArray[0] && - Object.keys(valArray[0]) && - Object.keys(valArray[0])} -

- {valArray.map((va: any) => { - return <>{createElementDetails(va, 0)}; - })} - - ) - ); - // console.log("a", valArray); - // return valArray - // ? valArray.map((valArray1: any) => { - // // console.log("asas", valArray1); - // return createElementDetails(valArray1, 0); - // }) - // : {}; - })} -
- + <> + {nodeDatum.data && ( + + )} + ); }} // collapsible={true} @@ -176,6 +215,7 @@ const OrgChartTree: React.FC = ({ setGraphPage, data }) => { initialDepth={3} depthFactor={500} pathFunc={path} + nodeSize={{ x: 400, y: 200 }} // ={() =>
asdass
} orientation="vertical" rootNodeClassName="node__root" diff --git a/playground/src/component/TreeData.ts b/playground/src/component/TreeData.ts index c5e42793..6100edca 100644 --- a/playground/src/component/TreeData.ts +++ b/playground/src/component/TreeData.ts @@ -6,26 +6,28 @@ const recfunc: any = (values: any, ke: any, value: any) => { : { [value]: recfunc(values.props[val], ke, val) }; }); } else { - return value; + return { value, type: values.type }; } }; export const TreeData = (Data?: any) => { - let model: string[] = []; let isStatic: string[] = []; let subdata: any[] = []; let alldata: any[] = []; let schema: any[] = []; const dataSchema: any = Data.schema.props.contents.props; Object.keys(dataSchema).map((keyContents: string) => { + const content = keyContents; Object.keys(dataSchema[keyContents].props.models.props).map( (keyModel: string) => { - model.push(keyModel); let doits: any[] = new Array(); + const model = keyModel; Object.keys( dataSchema[keyContents].props.models.props[keyModel].props.doits.props ).map((keyDoits) => { + const doit = keyDoits; + Object.keys( dataSchema[keyContents].props.models.props[keyModel].props.doits .props[keyDoits].props.details.props @@ -43,7 +45,10 @@ export const TreeData = (Data?: any) => { schema.length !== 0 ? (obje = { name: keyDoits, - children: [{ name: "details", data: schema }], + children: [ + { data: schema, parent: content + " " + model + " " + doit }, + {}, + ], }) : (obje = { name: keyDoits }); diff --git a/playground/src/index.css b/playground/src/index.css index 292b4839..d55387c4 100644 --- a/playground/src/index.css +++ b/playground/src/index.css @@ -53,17 +53,17 @@ code { right: 0; height: 11rem; background-color: white; - transition: all 0.4s linear; + transition: all 0.3s linear; } .closemenu { z-index: 3; position: fixed; height: 0; - transition: all 0.4s linear; + transition: all 0.3s linear; width: 100%; } .darkcontainerclose { - transition: all 0.4s linear; + transition: all 0.3s linear; position: fixed; height: 100%; width: 100%; @@ -72,7 +72,7 @@ code { } .darkcontaineropen { position: fixed; - transition: all 0.4s linear; + transition: all 0.3s linear; z-index: 3; height: 100%; width: 100%; @@ -101,7 +101,7 @@ code { z-index: 2; margin: 0; background-color: white; - transition: all 0.4s linear; + transition: all 0.3s linear; top: 10px; border-radius: 0.5rem; opacity: 1; @@ -110,7 +110,7 @@ code { padding: 1.5rem 0.5rem 0 0.5rem; } .closeulmenu { - transition: all 0.4s linear; + transition: all 0.3s linear; padding: 0.5rem; border-radius: 0.5rem; opacity: 0; @@ -126,7 +126,7 @@ code { } .imagesettingopen { bottom: 10.2rem; - transition: all 0.4s linear; + transition: all 0.3s linear; z-index: 3; transform: rotate(0); } @@ -135,7 +135,7 @@ code { z-index: 3; width: 2.5rem; height: 2.5rem; - transition: all 0.4s linear; + transition: all 0.3s linear; transform: rotate(360deg); } input[type="file"]::-webkit-file-upload-button { @@ -186,7 +186,7 @@ input[type="file"]::file-selector-button { border: none; color: white; margin: 0.5rem; - + cursor: pointer; border-radius: 0.5rem; } .btn1 { diff --git a/readme.md b/readme.md index 47042b7f..15f567b9 100644 --- a/readme.md +++ b/readme.md @@ -89,8 +89,16 @@ every schema should have 4 seprate things : - Firstly, [`deno`](https://deno.land/manual/getting_started/installation) must be installed. - After that just run this line: +to install latest version: + +```shell +deno install -qAf --allow-read --allow-write --unstable https://deno.land/x/funql/funql.ts +``` + +to install specific version: + ```shell -deno install -qAf --allow-read --allow-write --unstable https://deno.land/x/funql@0.0.35/funql.ts +deno install -qAf --allow-read --allow-write --unstable https://deno.land/x/funql@{SPECIFIC_VERSION}/funql.ts ``` ## How to Use It