@izara_frontend/shared-complex-filter 1.0.1

package/src/linkSteps/modalLinkStepsComponent.jsx

@@ -0,0 +1,628 @@
+import { useState, useEffect, useMemo } from "react";
+import { useImmer } from "use-immer";
+import {
+  IzaraDivStyle,
+  IzaraButtonStyle,
+  createStyleDefualtTags,
+  createStyleTags,
+} from "@izaraFrontends/styles";
+
+import { useDispatch } from "react-redux";
+//test---------------------------------
+// import { successTraversalConfig } from "./function/createActionLibCreateLinkStepAndComplexFilter";
+// import { ConditionsAndMultipleIdentifersComponent } from "./conditionsAndMultipleIdentifersComponent";
+
+function createObjTypeConcat(objType) {
+  console.log("objType:dfcvcbcxb ", objType);
+
+  return `${objType.serviceTag}_${objType.objectType}`;
+}
+function createRelTypeConcat(relType) {
+  console.log("objType:sdsadwsd ", relType);
+  return `${relType?.serviceTag}_${relType?.relationshipTag}`;
+}
+function objTypeFromObjTypeConcat(objTypeConcat) {
+  console.log("objTypeConcat:aeaeaeww ", objTypeConcat);
+  let result = objTypeConcat.split("_");
+
+  if (result.length !== 2) {
+    throw Error("objTypeConcat invalid");
+  }
+
+  return {
+    serviceTag: result[0],
+    objectType: result[1],
+  };
+}
+
+export const ModalLinkStepsComponent = ({
+  titleModal, //string
+  statusModalFunc, //func
+  objConfigUseCase, //store
+  objTypeMain,
+  nameReducer,
+  parentOutputId,
+  successFunc, //func
+  collectObjectLinksWithRequestProperties,
+  collectObjectSchemaWithHierarchy,
+
+  //useCase props
+  nameObjectLinkStepEdit,
+  userTag,
+  keyElement, //**** */
+  ComponentUseCase,
+  LastStepsComponentUseCase,
+  valueUserTags,
+  successFuncUseCase,
+}) => {
+  // InitialSchemaLib.initSchemaFn(
+  //   getObjSchemaS3WithHierarchyShared,
+  //   getObjectLinksShared
+  // );
+
+  console.log("valueUserTags:ModalLinkStepsComponent ", valueUserTags);
+  let arrObjRequiredData = [{}];
+
+  arrObjRequiredData = [];
+  if (nameObjectLinkStepEdit) {
+    if (objConfigUseCase?.linkStepsObjects) {
+      for (const keyLinkStep of objConfigUseCase.linkStepsObjects[
+        nameObjectLinkStepEdit
+      ].linkSteps) {
+        arrObjRequiredData.push(objConfigUseCase.linkSteps[keyLinkStep]);
+      }
+    }
+  }
+
+  if (objConfigUseCase?.traversalSteps) {
+    for (const keyTraversalStep of objConfigUseCase.traversalSteps) {
+      arrObjRequiredData.push(
+        objConfigUseCase.traversalSteps[keyTraversalStep],
+      );
+    }
+  }
+
+  console.log("arrObjRequiredData: xxxxaaawwweee", arrObjRequiredData);
+  if (!objTypeMain) {
+    objTypeMain = objConfigUseCase.objType;
+  }
+
+  console.time("renderTimeInModalRequiredData");
+
+  //--------------------------------------------------------------
+
+  const [allObjTypesLinkConfigs, collectRequireLinksFn, collectLinksOpt] =
+    collectObjectLinksWithRequestProperties(); // allObjTypesLinkConfigs
+
+  const [resultFieldName, getObjSchemaHieFn, collectLinksOpt2] =
+    collectObjectSchemaWithHierarchy();
+
+  //--------------------------------------------------------------
+
+  const [linkSteps, setLinkSteps] = useImmer(arrObjRequiredData);
+
+  const [nameLinkSteps, setNameLinkSteps] = useState(nameObjectLinkStepEdit);
+  const [linkStepsOutput, setLinkStepsOutput] = useImmer({
+    status: null, //link or lastStep
+    active: 0,
+  });
+
+  const dispatch = useDispatch();
+
+  console.log("linkSteps:linkStepsLog ", linkSteps);
+  console.log("collectLinks: ", allObjTypesLinkConfigs, collectLinksOpt);
+  console.log("allObjTypesLinkConfigs: ", allObjTypesLinkConfigs);
+
+  useEffect(() => {
+    collectRequireLinksFn(objTypeMain, {
+      returnLinkTypeId: false,
+      returnPathLinkTypeId: true,
+    });
+    getObjSchemaHieFn(objTypeMain);
+
+    if (nameObjectLinkStepEdit) {
+      for (
+        let keyLinkStep = 0;
+        keyLinkStep < arrObjRequiredData.length;
+        keyLinkStep++
+      ) {
+        const linkStep = arrObjRequiredData[keyLinkStep];
+        if (linkStep.hasOwnProperty("pathLinkType")) {
+          collectRequireLinksFn(linkStep.pathLinkType.objType, {
+            returnLinkTypeId: false,
+            returnPathLinkTypeId: true,
+          });
+          getObjSchemaHieFn(linkStep.pathLinkType.objType);
+
+          // if (keyLinkStep === arrObjRequiredData.length - 1) {
+          //   setLinkStepsOutput((linkStepsOutput) => {
+          //     linkStepsOutput.status = true;
+          //   });
+          // }
+        } else {
+          getObjSchemaHieFn(
+            keyLinkStep === 0
+              ? objTypeMain
+              : arrObjRequiredData[keyLinkStep - 1].pathLinkType.objType,
+          );
+        }
+        console.log("linkStep: sddfdfdfgcvb", linkStep);
+      }
+    }
+  }, []);
+  //-----------------------Shared function-----------------------------------
+
+  function checkObjTypeLinkStep(activeIndex) {
+    let objTypeConcat; // objTypeConcat
+    objTypeConcat = createObjTypeConcat(objTypeMain);
+    if (activeIndex !== 0) {
+      objTypeConcat = createObjTypeConcat(
+        linkSteps[activeIndex - 1].pathLinkType.objType,
+      );
+    }
+    return objTypeConcat;
+  }
+
+  //-----------------------End Shared function-----------------------------------
+
+  function hadelSelectType(e) {
+    let type = e.target.value;
+
+    setLinkStepsOutput((linkStepsOutput) => {
+      linkStepsOutput.status = type;
+    });
+
+    if (type === "link") {
+      setLinkSteps((linkSteps) => {
+        linkSteps[linkStepsOutput.active] = {
+          pathLinkType: {
+            relType: {},
+            objType: {},
+            direction: "",
+          },
+        };
+      });
+    } else {
+      setLinkSteps((linkSteps) => {
+        linkSteps[linkStepsOutput.active] = { lastStep: null };
+      });
+    }
+
+    setLinkSteps((linkSteps) => {
+      if (linkStepsOutput.active + 1 !== linkSteps.length) {
+        linkSteps = linkSteps.splice(
+          linkStepsOutput.active - linkSteps.length + 1,
+        );
+      }
+    });
+  }
+
+  function handelSelectRelTypeAndDirection(e) {
+    let relType = e.target.value;
+    let index = e.target.selectedIndex - 1;
+
+    console.log("index:handelSelectRelTypeAndDirection ", index, typeof index);
+    let objTypeConcat = checkObjTypeLinkStep(linkStepsOutput.active);
+
+    collectRequireLinksFn(
+      allObjTypesLinkConfigs[objTypeConcat][index].other.objType,
+      { returnLinkTypeId: false, returnPathLinkTypeId: true },
+    );
+
+    getObjSchemaHieFn(
+      allObjTypesLinkConfigs[objTypeConcat][index].other.objType,
+    );
+
+    setLinkSteps((linkSteps) => {
+      linkSteps[linkStepsOutput.active].pathLinkType = {
+        relType: JSON.parse(relType),
+        objType: allObjTypesLinkConfigs[objTypeConcat][index].other.objType,
+        direction: allObjTypesLinkConfigs[objTypeConcat][index].base.direction,
+      };
+
+      // linkSteps[
+      //   linkStepsOutput.active
+      // ].allObjTypesLinkConfigIndex = index;
+
+      if (allObjTypesLinkConfigs[objTypeConcat][index]?.requestProperties) {
+        let requestProperties = {};
+        for (const key in allObjTypesLinkConfigs[objTypeConcat][index]
+          ?.requestProperties) {
+          requestProperties[key] = "";
+        }
+        linkSteps[linkStepsOutput.active].requestProperties = requestProperties;
+      } else {
+        delete linkSteps[linkStepsOutput.active].requestProperties;
+      }
+      if (linkStepsOutput.active + 1 !== linkSteps.length) {
+        linkSteps = linkSteps.splice(
+          linkStepsOutput.active - linkSteps.length + 1,
+        );
+      }
+    });
+  }
+
+  function handelActiveStep(index) {
+    setLinkStepsOutput((linkStepsOutput) => {
+      linkStepsOutput.active = index;
+    });
+    if (index !== 0) {
+      collectRequireLinksFn(linkSteps[index - 1].pathLinkType.objType, {
+        returnLinkTypeId: false,
+        returnPathLinkTypeId: true,
+      });
+
+      getObjSchemaHieFn(linkSteps[index - 1].pathLinkType.objType);
+    }
+  }
+
+  function handleNextStep() {
+    // funcUseCase.testA();
+    let validateResult = true;
+    // validateAggregateCompare() &&
+    // validateComparison() &&
+    // validateRequestProperties();
+
+    if (validateResult) {
+      setLinkStepsOutput((linkStepsOutput) => {
+        linkStepsOutput.active++;
+      }); //
+
+      if (linkSteps.length === linkStepsOutput.active + 1) {
+        setLinkSteps((linkSteps) => {
+          linkSteps[linkStepsOutput.active + 1] = {};
+        }); //
+      }
+    }
+  }
+
+  function handlePrevStep() {
+    setLinkStepsOutput((linkStepsOutput) => {
+      linkStepsOutput.active--;
+    });
+  }
+
+  function handleNameRequiredData(e) {
+    setNameLinkSteps(e.target.value);
+  }
+
+  function submitLinkSteps() {
+    console.log("nameObjectLinkStepEdit:xczxczxsd ", nameObjectLinkStepEdit);
+    console.log("nameLinkSteps:xczxczxsd ", nameLinkSteps);
+
+    if (nameObjectLinkStepEdit !== undefined) {
+      if (nameLinkSteps) {
+        console.log("xczxczxsd");
+        if (successFunc) {
+          dispatch(
+            successFunc({
+              parentOutputId: parentOutputId,
+              linkSteps: linkSteps,
+              initialObjType: objTypeMain,
+              nameLinkStepObject: nameLinkSteps,
+              dataType: "text",
+            }),
+          );
+        } else {
+          //sortFields in requiredData
+          successFuncUseCase(
+            parentOutputId,
+            linkSteps,
+            objTypeMain,
+            nameLinkSteps,
+            { dataType: "text" },
+          );
+        }
+        statusModalFunc(false);
+      } else {
+        alert("please fill name");
+      }
+    } else {
+      if (successFuncUseCase) {
+        console.log("dofigusoigdjigfdg");
+        const resultStaus = successFuncUseCase(parentOutputId, linkSteps);
+
+        statusModalFunc(resultStaus);
+      }
+
+      // dispatch(
+      //   successTraversalConfig({
+      //     parentOutputId: parentOutputId,
+      //     traversalLinkStepsObj: linkSteps,
+      //   }),
+      // );
+      // statusModalFunc(false);
+    }
+
+    // }
+  }
+
+  console.log("nameObjectLinkStepEdit: ", nameObjectLinkStepEdit);
+  console.timeEnd("renderTimeInModalRequiredData");
+  return (
+    <IzaraDivStyle
+      styletags={createStyleDefualtTags("modal", "", "mainBackgroundTemplate")}
+    >
+      <IzaraDivStyle
+        styletags={createStyleDefualtTags("modal", "", "mainBoxTemplate")}
+      >
+        <IzaraDivStyle
+          styletags={createStyleDefualtTags("modal", "", "gridTemplate")}
+        >
+          {/* --------------------------header-------------------- */}
+          <IzaraDivStyle
+            styletags={createStyleDefualtTags("modal", "", "headerTemplate")}
+          >
+            <IzaraDivStyle
+              styletags={createStyleDefualtTags("textAlign", "", "left")}
+            >
+              <h1>{titleModal}</h1>
+            </IzaraDivStyle>
+            {nameObjectLinkStepEdit !== undefined && (
+              <input
+                onChange={(e) => handleNameRequiredData(e)}
+                placeholder="name"
+                value={nameLinkSteps}
+                disabled={nameObjectLinkStepEdit}
+              />
+            )}
+
+            <button onClick={(e) => submitLinkSteps()}>save</button>
+            <button onClick={(e) => statusModalFunc(false)}>cancel</button>
+          </IzaraDivStyle>
+          {/* --------------------------data-------------------- */}
+          <div>
+            <IzaraDivStyle
+              styletags={createStyleDefualtTags("pagination", "", "template")}
+            >
+              <>
+                {linkStepsOutput.active === 0 ? (
+                  <a style={{ color: "red", pointerEvents: "none" }}>
+                    {createObjTypeConcat(objTypeMain)}
+                  </a>
+                ) : (
+                  <a onClick={(e) => handelActiveStep(0)}>
+                    {createObjTypeConcat(objTypeMain)}
+                  </a>
+                )}
+                {linkSteps.length > 1 && (
+                  <>
+                    {linkSteps.map((step, index) => (
+                      <>
+                        {linkSteps[index - 1]?.pathLinkType.objType && (
+                          <>
+                            /
+                            {linkStepsOutput.active === index ? (
+                              <a
+                                style={{ color: "red", pointerEvents: "none" }}
+                              >
+                                {createObjTypeConcat(
+                                  linkSteps[index - 1].pathLinkType.objType,
+                                )}
+                              </a>
+                            ) : (
+                              <a onClick={(e) => handelActiveStep(index)}>
+                                {createObjTypeConcat(
+                                  linkSteps[index - 1].pathLinkType.objType,
+                                )}
+                              </a>
+                            )}
+                          </>
+                        )}
+                      </>
+                    ))}
+                  </>
+                )}
+              </>
+            </IzaraDivStyle>
+            <IzaraDivStyle
+            // styletags={createStyleDefualtTags("background", "scroll", "div")}
+            >
+              <p>type:</p>
+
+              <select
+                value={
+                  linkSteps.length === 0
+                    ? ""
+                    : linkSteps[linkStepsOutput.active].pathLinkType?.objType
+                      ? "link"
+                      : "lastStep"
+                }
+                value={
+                  linkSteps.length === 0
+                    ? ""
+                    : linkSteps[linkStepsOutput.active].pathLinkType?.objType
+                }
+                onChange={(e) => {
+                  hadelSelectType(e);
+                }}
+              >
+                <option
+                // value=""
+                // selected={
+                //   Object.keys(linkSteps[linkStepsOutput.active]).length === 0
+                // }
+                // disabled={
+                //   Object.keys(linkSteps[linkStepsOutput.active]).length !== 0
+                // }
+                >
+                  -- choose type --
+                </option>
+                <option value="link">link</option>
+                <option value="lastStep">lastStep</option>
+              </select>
+            </IzaraDivStyle>
+            {allObjTypesLinkConfigs ? (
+              <IzaraDivStyle
+                styletags={createStyleDefualtTags("gridColumn", "", "1")}
+              >
+                {linkSteps.length === 0 ||
+                  (linkSteps[linkStepsOutput.active].pathLinkType?.objType && (
+                    <>
+                      {!allObjTypesLinkConfigs[
+                        linkStepsOutput.active === 0
+                          ? createObjTypeConcat(objTypeMain)
+                          : createObjTypeConcat(
+                              linkSteps[linkStepsOutput.active - 1].pathLinkType
+                                .objType,
+                            )
+                      ] ? (
+                        <IzaraDivStyle
+                          styletags={createStyleDefualtTags(
+                            "loadingCircle",
+                            "20px",
+                            "template",
+                          )}
+                        ></IzaraDivStyle>
+                      ) : (
+                        <>
+                          <IzaraDivStyle
+                          // styletags={createStyleDefualtTags(
+                          //   "background",
+                          //   "scroll ",
+                          //   "div"
+                          // )}
+                          >
+                            <p> relationship type:</p>
+                            <select
+                              value={JSON.stringify(
+                                linkSteps[linkStepsOutput.active].pathLinkType
+                                  .relType,
+                              )}
+                              onChange={handelSelectRelTypeAndDirection}
+                            >
+                              <option
+                                value=""
+                                disabled={
+                                  Object.keys(
+                                    linkSteps[linkStepsOutput.active]
+                                      .pathLinkType.relType,
+                                  ).length !== 0
+                                }
+                              >
+                                -- relType --
+                              </option>
+                              {allObjTypesLinkConfigs[
+                                linkStepsOutput.active === 0
+                                  ? createObjTypeConcat(objTypeMain)
+                                  : createObjTypeConcat(
+                                      linkSteps[linkStepsOutput.active - 1]
+                                        .pathLinkType.objType,
+                                    )
+                              ].map((dataLink, index) => (
+                                <option
+                                  key={index}
+                                  value={JSON.stringify(dataLink.relType)}
+                                >
+                                  {createRelTypeConcat(dataLink.relType)}
+                                </option>
+                              ))}
+                            </select>
+
+                            {Object.keys(
+                              linkSteps[linkStepsOutput.active]?.pathLinkType
+                                ?.relType,
+                            ).length !== 0 && (
+                              <>
+                                <p> object type:</p>
+                                <span>
+                                  {createObjTypeConcat(
+                                    linkSteps[linkStepsOutput.active]
+                                      ?.pathLinkType.objType,
+                                  )}
+                                </span>
+                                <p>direction</p>
+                                <span>
+                                  {
+                                    linkSteps[linkStepsOutput.active]
+                                      ?.pathLinkType.direction
+                                  }
+                                </span>
+                                <br></br>
+                                <hr></hr>
+                                {ComponentUseCase && (
+                                  <ComponentUseCase
+                                    allObjTypesLinkConfigs={
+                                      allObjTypesLinkConfigs
+                                    }
+                                    resultFieldName={resultFieldName}
+                                    linkSteps={linkSteps}
+                                    setLinkSteps={setLinkSteps}
+                                    linkStepsOutput={linkStepsOutput}
+                                    objTypeMain={objTypeMain}
+                                    valueUserTags={valueUserTags}
+                                    objConfigUseCase={objConfigUseCase}
+                                    parentOutputId={parentOutputId}
+                                    collectObjectLinksWithRequestProperties={
+                                      collectObjectLinksWithRequestProperties
+                                    }
+                                    collectObjectSchemaWithHierarchy={
+                                      collectObjectSchemaWithHierarchy
+                                    }
+                                    LastStepsComponentUseCase={
+                                      LastStepsComponentUseCase
+                                    }
+                                    // funcUseCase={funcUseCase}
+                                  />
+                                )}
+                              </>
+                            )}
+                          </IzaraDivStyle>
+                        </>
+                      )}
+                    </>
+                  ))}
+
+                {LastStepsComponentUseCase && (
+                  <LastStepsComponentUseCase
+                    parentOutputId={parentOutputId}
+                    linkSteps={linkSteps}
+                    setLinkSteps={setLinkSteps}
+                    linkStepsOutput={linkStepsOutput}
+                    objTypeMain={objTypeMain}
+                    resultFieldName={resultFieldName}
+                    valueUserTags={valueUserTags}
+                  />
+                )}
+              </IzaraDivStyle>
+            ) : (
+              <>
+                <IzaraDivStyle
+                  styletags={createStyleDefualtTags(
+                    "loadingCircle",
+                    "20px",
+                    "template",
+                  )}
+                ></IzaraDivStyle>
+              </>
+            )}
+          </div>
+
+          {/* --------------------------footer-------------------- */}
+          <IzaraDivStyle
+            styletags={createStyleDefualtTags("gridColumn", "", "11")}
+          >
+            <button
+              onClick={handlePrevStep}
+              disabled={linkStepsOutput.active === 0}
+            >
+              prev
+            </button>
+            <button
+              onClick={handleNextStep}
+              disabled={
+                linkSteps[linkStepsOutput.active]?.pathLinkType?.direction ===
+                  "" ||
+                !linkSteps[linkStepsOutput.active]?.pathLinkType?.objType
+              }
+            >
+              next
+            </button>
+          </IzaraDivStyle>
+        </IzaraDivStyle>
+      </IzaraDivStyle>
+    </IzaraDivStyle>
+  );
+};
+
+//----------------------------- use Lib -----------------------------------------------