@izara_frontend/shared-complex-filter 1.0.1

package/src/complexFilterMain/mainCaseUseConditionAndMultipleIdentifersComponent.jsx

@@ -0,0 +1,1341 @@
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { useImmer } from "use-immer";
+import {
+  IzaraDivStyle,
+  IzaraButtonStyle,
+  createStyleDefualtTags,
+  createStyleTags,
+} from "@izaraFrontends/styles";
+import { useDispatch, useSelector } from "react-redux";
+// import { DataFieldsSharedLib } from "@izara_project/izara-shared-search-and-sort";
+import { DataFieldsSharedLib } from "@izara_project/izara-shared-search-and-sort";
+import { ModalLinkStepsComponent } from "../linkSteps/modalLinkStepsComponent.jsx";
+import { ModalComplexFilterComponent } from "./modalComplexFilterComponent.jsx";
+import { utils as sharedSchemaUtils } from "@izara_project/izara-shared-service-schemas";
+
+var hash = require("object-hash");
+
+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 MainCaseUseConditionAndMultipleIdentifersComponent = ({
+  titleModal,
+  statusModalFunc,
+  objConfigUseCase,
+  objTypeMain,
+  nameReducer,
+  parentOutputId,
+  valueUserTags,
+  // valueUserTags, not sure
+  successFunc,
+  collectObjectLinksWithRequestProperties,
+  collectObjectSchemaWithHierarchy,
+  //useCase--------------------------------
+  nameObjectLinkStepEdit,
+  keyElement,
+  LastStepsComponentUseCase,
+}) => {
+  //-----------------------state---------------------------------------
+  // const [nameObjectLinkStep, setNameObjectLinkStep] = useState(
+  //   nameObjectLinkStepEdit,
+  // );
+
+  //--------------------------------------------------------------
+
+  //-----------------------Shared function-----------------------------------
+
+  //-----------------------End Shared function-----------------------------------
+  const dispatch = useDispatch();
+
+  console.log("objTypeMain:xczczxvv ", objTypeMain);
+  function submitLinkSteps() {}
+
+  function validateRequestProperties() {
+    if (linkSteps[linkStepsOutput.active]?.requestProperties) {
+      for (const key in linkSteps[linkStepsOutput.active].requestProperties) {
+        if (!linkSteps[linkStepsOutput.active].requestProperties[key]) {
+          alert("please select " + key + " requestProperties");
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+
+  //----------------------func prop---------------------------------
+
+  // function handleInputNameLinkStep(e) {
+  //   setNameObjectLinkStep(e.target.value);
+  // }
+
+  //----------------------func prop---------------------------------
+
+  console.log("nameReducer:sdxcvzxvcxv ", nameReducer);
+  console.log("component ssswxvcxz");
+  return (
+    <>
+      <ModalLinkStepsComponent
+        titleModal={titleModal}
+        statusModalFunc={statusModalFunc}
+        objConfigUseCase={objConfigUseCase}
+        objTypeMain={objTypeMain}
+        nameReducer={nameReducer}
+        parentOutputId={parentOutputId}
+        successFunc={successFunc}
+        collectObjectLinksWithRequestProperties={
+          collectObjectLinksWithRequestProperties
+        }
+        collectObjectSchemaWithHierarchy={collectObjectSchemaWithHierarchy}
+        //---------------use case----------------------------
+        keyElement={keyElement}
+        // nameObjectLinkStep={nameObjectLinkStep}
+        //------------------------------------------
+        // funcUseCase={{ handleInputNameLinkStep, validateRequestProperties }}
+        ComponentUseCase={ConditionLinkStepAndMultipleIdentifersComponent}
+        LastStepsComponentUseCase={LastStepsComponentUseCase}
+        valueUserTags={valueUserTags}
+        nameObjectLinkStepEdit={nameObjectLinkStepEdit}
+        // keyObjectUseCase
+      />
+    </>
+  );
+};
+
+export const ConditionLinkStepAndMultipleIdentifersComponent = ({
+  allObjTypesLinkConfigs,
+  resultFieldName,
+  linkSteps,
+  nameReducer,
+  parentOutputId,
+  setLinkSteps,
+  linkStepsOutput,
+  objTypeMain,
+  valueUserTags,
+  objConfigUseCase,
+  collectObjectLinksWithRequestProperties,
+  collectObjectSchemaWithHierarchy,
+  LastStepsComponentUseCase,
+}) => {
+  const { checkConditionsLinkStep, checkMultipleIdentifers } =
+    DataFieldsSharedLib;
+  const [modalSortField, setModalSortField] = useState(false);
+  const [modalComplexFilter, setModalComplexFilter] = useState(false);
+  const [modalUseCase, setModalUseCase] = useState(false);
+  const [newUserTags, setNewUserTags] = useImmer({}); //not sure
+
+  function statusModalSortField(status) {
+    setModalSortField(status);
+  }
+
+  function statusModalComplexFilter(status) {
+    setModalComplexFilter(status);
+  }
+
+  function checkObjTypeLinkStep(activeIndex) {
+    let objTypeConcat; // objTypeConcat
+    objTypeConcat = createObjTypeConcat(objTypeMain);
+    if (activeIndex !== 0) {
+      objTypeConcat = createObjTypeConcat(
+        linkSteps[activeIndex - 1].pathLinkType.objType,
+      );
+    }
+    return objTypeConcat;
+  }
+
+  function conditionsObject(indexLinkStep) {
+    let conditions = {};
+
+    if (linkSteps[indexLinkStep - 1].hasOwnProperty("aggregate")) {
+      conditions.aggregate = true;
+    }
+    if (linkSteps[indexLinkStep - 1].hasOwnProperty("comparison")) {
+      conditions.comparison = true;
+    }
+    if (linkSteps[indexLinkStep - 1].hasOwnProperty("combine")) {
+      conditions.combine = linkSteps[indexLinkStep - 1].combine;
+    }
+
+    if (linkSteps[indexLinkStep - 1].hasOwnProperty("requestProperties")) {
+      for (const keyRequestProperties in linkSteps[indexLinkStep - 1]
+        .requestProperties)
+        if (
+          valueUserTags[
+            linkSteps[indexLinkStep - 1].requestProperties[keyRequestProperties]
+          ].hasOwnProperty("complexFilterCombinationId")
+        ) {
+          (console.log("dhawdshffaf"), linkSteps);
+          conditions.applyCombinations = true;
+        }
+    }
+
+    return conditions;
+  }
+
+  function checkMultipleIdentifersResult() {
+    let resultCheckMultipleIdentifers = false;
+    let linkConfig = null;
+
+    for (
+      let indexLinkStep = 0;
+      indexLinkStep < linkSteps.length;
+      indexLinkStep++
+    ) {
+      if (indexLinkStep !== 0) {
+        let conditions = conditionsObject(indexLinkStep);
+
+        let linkTypeId = sharedSchemaUtils.createPathLinkTypeId(
+          linkSteps[indexLinkStep - 1]?.pathLinkType,
+        );
+
+        if (
+          allObjTypesLinkConfigs[
+            createObjTypeConcat(
+              indexLinkStep === 1
+                ? objTypeMain
+                : linkSteps[indexLinkStep - 2]?.pathLinkType.objType,
+            )
+          ]
+        ) {
+          linkConfig =
+            allObjTypesLinkConfigs[
+              createObjTypeConcat(
+                indexLinkStep === 1
+                  ? objTypeMain
+                  : linkSteps[indexLinkStep - 2]?.pathLinkType.objType,
+              )
+            ][
+              allObjTypesLinkConfigs[
+                createObjTypeConcat(
+                  indexLinkStep === 1
+                    ? objTypeMain
+                    : linkSteps[indexLinkStep - 2]?.pathLinkType.objType,
+                ) + "_pathLinkTypeIdIndex"
+              ][linkTypeId?.result]
+            ];
+        }
+
+        resultCheckMultipleIdentifers = checkMultipleIdentifers(
+          linkConfig, //link ก่่อนหน้า active -1
+          conditions,
+          resultCheckMultipleIdentifers,
+        );
+
+        if (linkStepsOutput.active === indexLinkStep) {
+          return resultCheckMultipleIdentifers;
+        }
+      }
+    }
+  }
+
+  function outputResultCheckConditionsLinkStep(index) {
+    let objTypeConcat = checkObjTypeLinkStep(linkStepsOutput.active);
+
+    let combine = false;
+
+    if (linkSteps[linkStepsOutput.active - 1]?.combine) {
+      combine = true;
+    }
+
+    let resultCheckConditionsLinkStep = checkConditionsLinkStep(
+      checkMultipleIdentifersResult(),
+      allObjTypesLinkConfigs[objTypeConcat][index],
+      combine,
+    );
+
+    return resultCheckConditionsLinkStep;
+  }
+
+  function handleConditionLinkSteps(type, value) {
+    // let value = e.target.value;
+
+    setLinkSteps((linkSteps) => {
+      if (value === "none") {
+        delete linkSteps[linkStepsOutput.active][type];
+        if (type === "aggregate") {
+          delete linkSteps[linkStepsOutput.active].sortFields;
+        }
+      } else {
+        if (type === "comparisonSortField") {
+          let dataType;
+          console.log(
+            "sadawdsd",
+            resultFieldName[
+              createObjTypeConcat(
+                linkSteps[linkStepsOutput.active].pathLinkType.objType,
+              )
+            ].fieldNames[value],
+          );
+          switch (
+            resultFieldName[
+              createObjTypeConcat(
+                linkSteps[linkStepsOutput.active].pathLinkType.objType,
+              )
+            ].fieldNames[value].type
+          ) {
+            case "integer":
+            case "number":
+            case "currencyValue":
+              dataType = "number";
+              break;
+
+            case "currency":
+            case "string":
+              dataType = "string";
+              break;
+
+            // default:
+            //   dataType = "string";
+          }
+
+          linkSteps[linkStepsOutput.active].comparisonDataType = dataType;
+        }
+        linkSteps[linkStepsOutput.active][type] = value;
+        if (type === "aggregate") {
+          if (!linkSteps[linkStepsOutput.active]?.sortFields) {
+            linkSteps[linkStepsOutput.active].sortFields = [];
+          }
+        }
+      }
+
+      if (linkStepsOutput.active + 1 !== linkSteps.length) {
+        linkSteps = linkSteps.splice(
+          linkStepsOutput.active - linkSteps.length + 1,
+        );
+      }
+    });
+  }
+
+  function handleSelectSortOrder(e, idSortField) {
+    let value = e.target.value;
+    setLinkSteps((linkSteps) => {
+      linkSteps[linkStepsOutput.active].sortFields[idSortField].sortOrder =
+        value;
+    });
+  }
+  function handleNewOrEditFilter() {
+    statusModalUseCase("filterElements");
+  }
+
+  const COMPARISON = [
+    "equals",
+    "greaterThan",
+    "greaterThanEquals",
+    "lessThan",
+    "lessThanEquals",
+    "highLow",
+    "high",
+    "low",
+    "izaraSyntax",
+  ];
+
+  // valueUserTags not sure if need to be here
+  function handleValueSelect(e, key) {
+    let value = e.target.value;
+
+    if (value === "createUserTag") {
+      setLinkSteps((linkSteps) => {
+        linkSteps[linkStepsOutput.active].requestProperties[key] = null;
+      });
+      setNewUserTags((newUserTags) => {
+        newUserTags[key] = { name: "", obj: { defaultValue: "" } };
+      });
+    } else {
+      setLinkSteps((linkSteps) => {
+        linkSteps[linkStepsOutput.active].requestProperties[key] = value;
+      });
+
+      setNewUserTags((newUserTags) => {
+        delete newUserTags[key];
+      });
+    }
+    // setNewUserTags({});
+  }
+
+  function handleRequestPropertiesSelect(e, key) {
+    let type = e.target.value;
+    let objUserTag = {};
+
+    if (type === "defaultValue") {
+      objUserTag = {
+        defaultValue: "",
+      };
+    }
+
+    if (type === "complexFilterCombination") {
+      objUserTag = {
+        valueSource: "complexFilterCombination",
+      };
+    }
+    if (type === "perParentCombination") {
+      objUserTag = {
+        valueSource: "perParentCombination",
+      };
+    }
+
+    setNewUserTags((newUserTags) => {
+      newUserTags[key].name = "";
+      newUserTags[key].obj = objUserTag;
+    });
+  }
+
+  function handleChangeNameUserTag(e, key) {
+    let value = e.target.value;
+    setNewUserTags((newUserTags) => {
+      newUserTags[key].name = value;
+    });
+  }
+
+  function handleCreateuserTagTypeValue(e, key) {
+    if (
+      newUserTags[key].name === "" ||
+      newUserTags[key].obj.defaultValue === ""
+    ) {
+      alert("please fill in name and defaultValue");
+    } else {
+      setLinkSteps((linkSteps) => {
+        linkSteps[linkStepsOutput.active].requestProperties[key] =
+          newUserTags[key].name;
+      });
+
+      // setValueDataUserTags((valueDataUserTags) => {
+      //   valueDataUserTags[newUserTags[key].name] = {
+      //     defaultValue: newUserTags[key].obj.defaultValue,
+      //   };
+      // });
+
+      setNewUserTags((newUserTags) => {
+        delete newUserTags[key];
+      });
+    }
+  }
+
+  function createFilterElement(
+    objType,
+    initialLogicalElementId,
+    logicalElementObj,
+  ) {
+    setLinkSteps((linkSteps) => {
+      linkSteps[linkStepsOutput.active].filterElements = {
+        objType: objType,
+        initialLogicalElementId: initialLogicalElementId,
+        logicalElements: logicalElementObj,
+      };
+    });
+  }
+
+  function handleCreateUserTagComplexOrPerParent(key, type) {
+    if (newUserTags[key].name === "") {
+      alert("please fill in name");
+    } else {
+      statusModalUseCase(type);
+    }
+  }
+
+  function statusModalUseCase(type) {
+    if (
+      type === "complexFilterCombination" ||
+      type === "perParentCombination"
+    ) {
+      setModalUseCase(type);
+    } else {
+      setModalUseCase(type);
+    }
+  }
+
+  function createComplexFilterCombinations(
+    objTypeConcat,
+    initialLogicalElementId,
+    filterElement,
+    valueDataUserTagsNew,
+    keyUseCase,
+  ) {
+    console.log("newUserTags:dfgxvxvx ", newUserTags, keyUseCase);
+    let objComplexFilterCombination = {};
+
+    objComplexFilterCombination = {
+      objType: objTypeFromObjTypeConcat(objTypeConcat),
+      initialLogicalElementId: initialLogicalElementId,
+      logicalElements: filterElement,
+    };
+
+    let hashComplexFilterCombination = hash(objComplexFilterCombination);
+
+    console.log(
+      "objComplexFilterCombination: fdfcgrtgd",
+      objComplexFilterCombination,
+    );
+
+    // setComplexFilterCombinations((complexFilterCombinations) => {
+    //   delete complexFilterCombinations[
+    //     valueDataUserTags[
+    //       requiredDataLinkStep[requiredDataOutput.active].requestProperties[
+    //         keyUseCase
+    //       ]
+    //     ]?.complexFilterCombinationId
+    //   ];
+    //   complexFilterCombinations[hashComplexFilterCombination] =
+    //     objComplexFilterCombination;
+    // });
+
+    // setRequiredDataLinkStep((requiredDataLinkStep) => {
+    //   requiredDataLinkStep[requiredDataOutput.active].requestProperties[
+    //     keyUseCase
+    //   ] = newUserTags[keyUseCase].name;
+    // });
+  }
+
+  let testAA = [];
+  let testBB = [];
+
+  testAA;
+
+  function successFuncCreateSortField(
+    parentOutputId,
+    sortLinkSteps,
+    objTypeMain,
+    nameLinkSteps,
+    dataType,
+  ) {
+    console.log("sortObj:sdccvxxcv ", sortLinkSteps);
+    let linkStepsArr = [];
+    for (const index in sortLinkSteps) {
+      let linkStepObj = sortLinkSteps[index];
+
+      let hashRequiredData = hash(linkStepObj);
+
+      linkStepsArr.push(hashRequiredData);
+    }
+
+    setLinkSteps((linkSteps) => {
+      linkSteps[linkStepsOutput.active].sortFields.push({
+        requiredDataLinkStepObjectId: nameLinkSteps,
+        dataType: dataType,
+      });
+    });
+  }
+
+  console.log(modalSortField, "modalSortField:widixcaeews");
+  return (
+    <>
+      {allObjTypesLinkConfigs[
+        linkStepsOutput.active === 0
+          ? createObjTypeConcat(objTypeMain)
+          : createObjTypeConcat(
+              linkSteps[linkStepsOutput.active - 1].pathLinkType.objType,
+            )
+      ].map((data, indexLink) => (
+        <div>
+          {_.isEqual(
+            data.relType,
+            linkSteps[linkStepsOutput.active]?.pathLinkType.relType,
+          ) && (
+            <>
+              {Object.entries(
+                outputResultCheckConditionsLinkStep(indexLink),
+              ).map(([key, value]) => (
+                <>
+                  {key === "canAggregateCompare" && value && (
+                    <div>
+                      <fieldset>
+                        <legend>aggregate</legend>
+                        <select
+                          onChange={(e) =>
+                            handleConditionLinkSteps(
+                              "aggregate",
+                              e.target.value,
+                            )
+                          }
+                          value={linkSteps[linkStepsOutput.active]?.aggregate}
+                        >
+                          <option value={null}>none</option>
+                          <option value={"max"}>max</option>
+                          <option value={"min"}>min</option>
+                          <option value={"average"}>average</option>
+                        </select>
+                      </fieldset>
+                      {linkSteps[linkStepsOutput.active]?.aggregate && (
+                        <>
+                          <IzaraButtonStyle
+                            styletags={createStyleDefualtTags(
+                              "modal",
+                              "",
+                              "button",
+                            )}
+                            onClick={(e) => statusModalSortField(true)}
+                          >
+                            create sortField
+                          </IzaraButtonStyle>
+                          {linkSteps[linkStepsOutput.active]?.sortFields && (
+                            <>
+                              {linkSteps[
+                                linkStepsOutput.active
+                              ]?.sortFields.map((data, idSortField) => (
+                                <li>
+                                  {data.linkStepsObjectId}
+                                  <p>data Type</p>
+                                  <select
+                                    onChange={(e) =>
+                                      handleSelectDataType(e, idSortField)
+                                    }
+                                    value={
+                                      linkSteps[linkStepsOutput.active]
+                                        .sortFields[idSortField].dataType
+                                    }
+                                    // value={currentStep.lastFieldname}
+                                  >
+                                    <option value="string">string</option>
+                                    <option value="number">number</option>
+                                    <option value="array">array</option>
+                                  </select>
+                                  {linkSteps[linkStepsOutput.active].sortFields[
+                                    idSortField
+                                  ].dataType === "array" && (
+                                    <>
+                                      {linkSteps[
+                                        linkStepsOutput.active
+                                      ].sortFields[
+                                        idSortField
+                                      ].sortByValueUserTags.map(
+                                        (value, index) => (
+                                          <>
+                                            <li>
+                                              {value}
+                                              <button>X</button>
+                                            </li>
+                                          </>
+                                        ),
+                                      )}
+
+                                      <select
+                                        onChange={(e) => handleDataTypeArray(e)}
+                                        value={dataTypeArray}
+                                      >
+                                        <option value="">-- choose --</option>
+                                        {Object.entries(valueUserTags).map(
+                                          ([key, valueUserTag]) => (
+                                            <div>
+                                              {valueUserTag.hasOwnProperty(
+                                                "defaultValue",
+                                              ) && (
+                                                <option value={key}>
+                                                  {key}
+                                                </option>
+                                              )}
+                                            </div>
+                                          ),
+                                        )}
+                                      </select>
+
+                                      <button
+                                        onClick={() =>
+                                          handleAddDataTypeArray(idSortField)
+                                        }
+                                      >
+                                        add
+                                      </button>
+                                    </>
+                                  )}
+                                  <button
+                                    onClick={(e) =>
+                                      statusModalSortField(
+                                        data.linkStepsObjectId,
+                                      )
+                                    }
+                                  >
+                                    edit
+                                  </button>
+                                  <button>x</button>
+
+                                  <fieldset>
+                                    <legend>sortOrder</legend>
+                                    <select
+                                      onChange={(e) => {
+                                        handleSelectSortOrder(e, idSortField);
+                                      }}
+                                    >
+                                      <option value={""}>choose</option>
+                                      <option value="ascending">
+                                        ascending
+                                      </option>
+                                      <option value="descending">
+                                        descending
+                                      </option>
+                                    </select>
+                                  </fieldset>
+                                </li>
+                              ))}
+                            </>
+                          )}
+                        </>
+                      )}
+                      <hr></hr>
+                      <fieldset>
+                        <legend>comparison</legend>
+                        <select
+                          onChange={(e) =>
+                            handleConditionLinkSteps(
+                              "comparison",
+                              e.target.value,
+                            )
+                          }
+                          value={linkSteps[linkStepsOutput.active].comparison}
+                        >
+                          <option value={null}>none</option>
+                          {COMPARISON.map((key) => (
+                            <option key={key} value={key}>
+                              {key}
+                            </option>
+                          ))}
+                        </select>
+                      </fieldset>
+                      {linkSteps[linkStepsOutput.active]?.comparison && (
+                        <>
+                          <fieldset>
+                            <legend>comparisonValue</legend>
+                            <select
+                              onChange={(e) =>
+                                handleConditionLinkSteps(
+                                  "comparisonValue",
+                                  e.target.value,
+                                )
+                              }
+                              value={
+                                linkSteps[linkStepsOutput.active]
+                                  .comparisonValue
+                              }
+                            >
+                              <option value={null}>none</option>
+                              <option value="createUserTag">
+                                create new userTag
+                              </option>
+                              {Object.entries(valueUserTags)
+                                .filter(([key, val]) => "defaultValue" in val)
+                                .map(([key, val]) => (
+                                  <option key={key} value={key}>
+                                    {val.defaultValue ? key : ""}
+                                  </option>
+                                ))}
+                            </select>
+                          </fieldset>
+
+                          <fieldset>
+                            <legend>comparisonSortField</legend>
+                            <select
+                              onChange={(e) =>
+                                handleConditionLinkSteps(
+                                  "comparisonSortField",
+                                  e.target.value,
+                                )
+                              }
+                              value={
+                                linkSteps[linkStepsOutput.active]
+                                  .comparisonSortField
+                              }
+                            >
+                              <option value={null}>none</option>
+                              {Object.keys(
+                                resultFieldName[
+                                  createObjTypeConcat(
+                                    linkSteps[linkStepsOutput.active]
+                                      .pathLinkType.objType,
+                                  )
+                                ].fieldNames,
+                              ).map((key) => (
+                                <option key={key} value={key}>
+                                  {key}
+                                </option>
+                              ))}
+                            </select>
+                          </fieldset>
+                          <fieldset>
+                            <legend>comparisonDataType</legend>
+                            <select
+                              onChange={(e) =>
+                                handleConditionLinkSteps(
+                                  "comparisonDataType",
+                                  e.target.value,
+                                )
+                              }
+                              value={
+                                linkSteps[linkStepsOutput.active]
+                                  .comparisonDataType
+                              }
+                            >
+                              <option value={null}>none</option>
+                              <option value="string">string</option>
+                              <option value="number">number</option>
+                              <option value="array">array</option>
+                            </select>
+                          </fieldset>
+                        </>
+                      )}
+
+                      <hr></hr>
+                    </div>
+                  )}
+                  {key === "canCombine" && value && (
+                    <div>
+                      <p>Combine</p>
+                      <input
+                        type="checkbox"
+                        checked={linkSteps[linkStepsOutput.active]?.combine}
+                        value={linkSteps[linkStepsOutput.active]?.combine}
+                        onChange={(e) =>
+                          handleConditionLinkSteps("combine", e.target.checked)
+                        }
+                      ></input>
+                      <hr></hr>
+                    </div>
+                  )}
+                  {key === "canFilters" && value && (
+                    <fieldset>
+                      <p>addFilterMain</p>
+
+                      <input
+                        type="checkbox"
+                        checked={
+                          linkSteps[linkStepsOutput.active]?.addFilterMain
+                        }
+                        value={linkSteps[linkStepsOutput.active]?.addFilterMain}
+                        onChange={(e) =>
+                          handleConditionLinkSteps(
+                            "addFilterMain",
+                            e.target.checked,
+                          )
+                        }
+                      ></input>
+                      {linkSteps[linkStepsOutput.active]?.filterElements ? (
+                        <>
+                          <li>
+                            <p>haveFilter</p>
+
+                            {/* <button onClick={}>X</button> */}
+                          </li>
+                          <button
+                            onClick={(e) => statusModalComplexFilter(true)}
+                          >
+                            edit filterElements
+                          </button>
+                        </>
+                      ) : (
+                        <button onClick={(e) => statusModalComplexFilter(true)}>
+                          create filterElements
+                        </button>
+                      )}
+                    </fieldset>
+                  )}
+                  {key === "canPerParent" && (
+                    <fieldset>
+                      {data?.requestProperties && (
+                        <>
+                          <p>requestProperties</p>
+                          {Object.entries(data.requestProperties).map(
+                            ([keyRequestProperties, objRequestProperties]) => (
+                              <IzaraDivStyle
+                                styletags={createStyleDefualtTags(
+                                  "background",
+                                  "scroll",
+                                  "div",
+                                )}
+                                key={keyRequestProperties}
+                              >
+                                <p>{keyRequestProperties}</p>
+                                <select
+                                  onChange={(e) =>
+                                    handleValueSelect(e, keyRequestProperties)
+                                  }
+                                  value={
+                                    linkSteps[linkStepsOutput.active]
+                                      .requestProperties[keyRequestProperties]
+                                  }
+                                >
+                                  <option
+                                    value=""
+                                    disabled={
+                                      linkSteps[linkStepsOutput.active]
+                                        .requestProperties[
+                                        keyRequestProperties
+                                      ] !== ""
+                                    }
+                                  >
+                                    -- choose --
+                                  </option>
+                                  <option value="createUserTag">
+                                    create new userTag
+                                  </option>
+
+                                  {Object.entries(valueUserTags).map(
+                                    ([key, valueUserTag]) => (
+                                      <div>
+                                        {valueUserTag.hasOwnProperty(
+                                          "defaultValue",
+                                        ) && <option value={key}>{key}</option>}
+
+                                        {valueUserTag?.valueSource ===
+                                          "complexFilterCombination" && (
+                                          <>
+                                            {_.isEqual(
+                                              complexFilterCombinations[
+                                                valueUserTag
+                                                  .complexFilterCombinationId
+                                              ].objType,
+                                              objRequestProperties.objType,
+                                            ) && (
+                                              <option value={key}>{key}</option>
+                                            )}
+                                          </>
+                                        )}
+
+                                        {value && (
+                                          <>
+                                            {valueUserTag?.valueSource ===
+                                              "perParentCombination" && (
+                                              <>
+                                                {_.isEqual(
+                                                  perParentCombinations[
+                                                    valueUserTag
+                                                      .perParentCombinationId
+                                                  ].objType,
+                                                  objRequestProperties.objType,
+                                                ) && (
+                                                  <option value={key}>
+                                                    {key}
+                                                  </option>
+                                                )}
+                                              </>
+                                            )}
+                                          </>
+                                        )}
+                                      </div>
+                                    ),
+                                  )}
+                                </select>
+                                {linkSteps[linkStepsOutput.active]
+                                  .requestProperties[keyRequestProperties] && (
+                                  <button
+                                    onClick={(e) =>
+                                      handleEditUserTag(
+                                        e,
+                                        keyRequestProperties,
+                                        linkSteps[linkStepsOutput.active]
+                                          .requestProperties[
+                                          keyRequestProperties
+                                        ],
+                                      )
+                                    }
+                                    disabled={newUserTags[keyRequestProperties]}
+                                  >
+                                    edit
+                                  </button>
+                                )}
+                                {linkSteps[linkStepsOutput.active]
+                                  .requestProperties[keyRequestProperties] ===
+                                  null && (
+                                  <>
+                                    <select
+                                      onChange={(e) =>
+                                        handleRequestPropertiesSelect(
+                                          e,
+                                          keyRequestProperties,
+                                        )
+                                      }
+                                      value={
+                                        newUserTags[
+                                          keyRequestProperties
+                                        ].obj.hasOwnProperty("defaultValue")
+                                          ? "defaultValue"
+                                          : newUserTags[keyRequestProperties]
+                                              .obj.valueSource
+                                      }
+                                    >
+                                      <option value="defaultValue">
+                                        defaultValue
+                                      </option>
+                                      <option value="complexFilterCombination">
+                                        complexFilterCombination
+                                      </option>
+                                      {value && (
+                                        <option value="perParentCombination">
+                                          perParentCombination
+                                        </option>
+                                      )}
+                                    </select>
+                                  </>
+                                )}
+
+                                <>
+                                  {newUserTags[
+                                    keyRequestProperties
+                                  ]?.hasOwnProperty("name") && (
+                                    <>
+                                      {!linkSteps[linkStepsOutput.active]
+                                        .requestProperties[
+                                        keyRequestProperties
+                                      ] && (
+                                        <fieldset>
+                                          <legend>userTagName</legend>
+                                          <input
+                                            onChange={(e) => {
+                                              handleChangeNameUserTag(
+                                                e,
+                                                keyRequestProperties,
+                                              );
+                                            }}
+                                            value={
+                                              newUserTags[keyRequestProperties]
+                                                .name
+                                            }
+                                          ></input>
+                                        </fieldset>
+                                      )}
+                                      {newUserTags[
+                                        keyRequestProperties
+                                      ].obj.hasOwnProperty("defaultValue") && (
+                                        <>
+                                          <fieldset>
+                                            <legend>defaultValue</legend>
+                                            <input
+                                              onChange={(e) =>
+                                                handleChangeUserTag(
+                                                  e,
+                                                  "defaultValue",
+                                                  keyRequestProperties,
+                                                )
+                                              }
+                                              value={
+                                                newUserTags[
+                                                  keyRequestProperties
+                                                ].obj.defaultValue
+                                              }
+                                            ></input>
+                                          </fieldset>
+                                          <button
+                                            onClick={(e) =>
+                                              handleCreateuserTagTypeValue(
+                                                e,
+                                                keyRequestProperties,
+                                              )
+                                            }
+                                          >
+                                            {linkSteps[linkStepsOutput.active]
+                                              .requestProperties[
+                                              keyRequestProperties
+                                            ] ? (
+                                              <>update</>
+                                            ) : (
+                                              <>create</>
+                                            )}
+                                          </button>
+                                        </>
+                                      )}
+                                      {newUserTags[
+                                        keyRequestProperties
+                                      ].obj.hasOwnProperty("valueSource") && (
+                                        <>
+                                          {newUserTags[keyRequestProperties].obj
+                                            .valueSource ===
+                                            "perParentCombination" && (
+                                            <>
+                                              <button
+                                                onClick={() =>
+                                                  handleCreateUserTagComplexOrPerParent(
+                                                    keyRequestProperties,
+                                                    "perParentCombination",
+                                                  )
+                                                }
+                                              >
+                                                create
+                                              </button>
+                                            </>
+                                          )}
+
+                                          {newUserTags[keyRequestProperties].obj
+                                            .valueSource ===
+                                            "complexFilterCombination" && (
+                                            <>
+                                              <button
+                                                onClick={() =>
+                                                  handleCreateUserTagComplexOrPerParent(
+                                                    keyRequestProperties,
+                                                    "complexFilterCombination",
+                                                  )
+                                                }
+                                              >
+                                                create
+                                              </button>
+                                            </>
+                                          )}
+                                        </>
+                                      )}
+
+                                      {modalUseCase ===
+                                        "complexFilterCombination" && (
+                                        <>
+                                          <ModalComplexFilterComponent
+                                            statusModal={statusModalUseCase}
+                                            titleModel={
+                                              "complexFilterCombination"
+                                            }
+                                            objTypeMain={
+                                              data.requestProperties[
+                                                keyRequestProperties
+                                              ].objType
+                                            }
+                                            createFilterElement={
+                                              createComplexFilterCombinations
+                                            }
+                                            nameReducer={nameReducer}
+                                            parentOutputId={parentOutputId}
+                                            keyUseCase={keyRequestProperties}
+                                            valueUserTag={Object.fromEntries(
+                                              Object.entries(
+                                                valueUserTags,
+                                              ).filter(
+                                                ([_, val]) =>
+                                                  "defaultValue" in val,
+                                              ),
+                                            )}
+                                            // objConfigUseCase={
+                                            //   complexFilterCombinations[
+                                            //     valueUserTags[
+                                            //       linkSteps[
+                                            //         linkStepsOutput.active
+                                            //       ].requestProperties[
+                                            //         keyRequestProperties
+                                            //       ]
+                                            //     ]?.complexFilterCombinationId
+                                            //   ]
+                                            // }
+                                            collectObjectLinksWithRequestProperties={
+                                              collectObjectLinksWithRequestProperties
+                                            }
+                                            collectObjectSchemaWithHierarchy={
+                                              collectObjectSchemaWithHierarchy
+                                            }
+                                            // editLogicalElementObj={
+                                            //   complexFilterCombinations[
+                                            //     valueUserTags[
+                                            //       linkSteps[
+                                            //         linkStepsOutput
+                                            //           .active
+                                            //       ]
+                                            //         .requestProperties[
+                                            //         keyRequestProperties
+                                            //       ]
+                                            //     ]
+                                            //       ?.complexFilterCombinationId
+                                            //   ]
+                                            // }
+                                          />
+                                        </>
+                                      )}
+                                      {modalUseCase ===
+                                        "perParentCombination" && (
+                                        <>
+                                          <ModalComplexFilterComponent
+                                            statusModal={statusModalUseCase}
+                                            titleModel={"perParentCombination"}
+                                            objTypeMain={
+                                              data.requestProperties[
+                                                keyRequestProperties
+                                              ].objType
+                                            }
+                                            createFilterElement={
+                                              createPerParentCombinations
+                                            }
+                                            nameReducer={nameReducer}
+                                            parentOutputId={parentOutputId}
+                                            keyUseCase={keyRequestProperties}
+                                            valueUserTag={Object.fromEntries(
+                                              Object.entries(
+                                                valueUserTags,
+                                              ).filter(
+                                                ([_, val]) =>
+                                                  "defaultValue" in val ||
+                                                  "perParentIdentifierFieldname" in
+                                                    val,
+                                              ),
+                                            )}
+                                            objConfigUseCase={
+                                              perParentCombinations[
+                                                valueUserTags[
+                                                  linkSteps[
+                                                    linkStepsOutput.active
+                                                  ].requestProperties[
+                                                    keyRequestProperties
+                                                  ]
+                                                ]?.perParentCombinationId
+                                              ]
+                                            }
+                                            perParentIdentifierFieldname={
+                                              resultFieldName[
+                                                linkStepsOutput.active === 0
+                                                  ? createObjTypeConcat(
+                                                      objTypeMain,
+                                                    )
+                                                  : createObjTypeConcat(
+                                                      linkSteps[
+                                                        linkStepsOutput.active -
+                                                          1
+                                                      ].pathLinkType.objType,
+                                                    )
+                                              ].identifiers
+                                            }
+                                            collectObjectLinksWithRequestProperties={
+                                              collectObjectLinksWithRequestProperties
+                                            }
+                                            collectObjectSchemaWithHierarchy={
+                                              collectObjectSchemaWithHierarchy
+                                            }
+                                            // editLogicalElementObj={
+                                            //   perParentCombinations[
+                                            //     valueUserTags[
+                                            //       linkSteps[
+                                            //         linkStepsOutput
+                                            //           .active
+                                            //       ]
+                                            //         .requestProperties[
+                                            //         keyRequestProperties
+                                            //       ]
+                                            //     ]
+                                            //       ?.perParentCombinationId
+                                            //   ]
+                                            // }
+                                          />
+                                        </>
+                                      )}
+                                    </>
+                                  )}
+                                </>
+                              </IzaraDivStyle>
+                            ),
+                          )}
+                        </>
+                      )}
+                    </fieldset>
+                  )}
+                </>
+              ))}
+              {/* ------------------------------------------------------------------ */}
+              {modalComplexFilter && (
+                <ModalComplexFilterComponent
+                  titleModel={"complexFilter"}
+                  statusModal={statusModalComplexFilter}
+                  // objTypeMain={{
+                  //   serviceTag: "SellOfferPlan",
+                  //   objectType: "sellOfferPlan",
+                  // }}
+                  objTypeMain={
+                    linkSteps[linkStepsOutput.active].pathLinkType.objType
+                  }
+                  nameReducer={nameReducer}
+                  parentOutputId={parentOutputId}
+                  // objConfigUseCase={objConfigUseCase}
+                  createFilterElement={createFilterElement}
+                  collectObjectLinksWithRequestProperties={
+                    collectObjectLinksWithRequestProperties
+                  }
+                  collectObjectSchemaWithHierarchy={
+                    collectObjectSchemaWithHierarchy
+                  }
+                  valueUserTags={valueUserTags}
+                  // successTraversal={successTraversal}
+                />
+              )}
+              {/* {modalSortField && (
+                <ModalLinkStepsComponent
+                  titleModal={"sortField"}
+                  statusModalFunc={statusModalSortField}
+                  objTypeMain={
+                    linkSteps[linkStepsOutput.active].pathLinkType.objType
+                  }
+                  objConfigUseCase={objConfigUseCase}
+                  nameReducer={nameReducer}
+                  parentOutputId={parentOutputId}
+                  successFunc={successSortField}
+                  collectObjectLinksWithRequestProperties={
+                    collectObjectLinksWithRequestProperties
+                  }
+                  collectObjectSchemaWithHierarchy={
+                    collectObjectSchemaWithHierarchy
+                  }
+                  nameObjectLinkStepEdit={
+                    modalSortField === true ? "" : modalSortField
+                  }
+                  //----------------------------------
+                  LastStepsComponentUseCase={LastStepsComponentUseCase}
+                  valueUserTags={valueUserTags}
+
+                  //useLink
+                  // nameFiledNameLastLinkStep={"fieldName"}
+
+                  // sortFieldStatus={true}
+
+                  // complexFilterCombinationsObj={
+                  //   objConfig.pageOutputMainConfigUseCase.complexFilterCombinations
+                  // }
+                  // perParentCombinationsObj={
+                  //   objConfig.pageOutputMainConfigUseCase.perParentCombinations
+                  // }
+                  // createSortFieldFunc={""}
+                  // keyElement={keyElement}
+                />
+              )} */}
+              {modalSortField && (
+                <ModalLinkStepsComponent
+                  titleModal={"srortField"}
+                  statusModalFunc={statusModalSortField}
+                  objConfigUseCase={objConfigUseCase}
+                  objTypeMain={objTypeMain}
+                  nameReducer={nameReducer}
+                  parentOutputId={parentOutputId}
+                  // successFunc={successFuncCreateSortField}
+                  successFuncUseCase={successFuncCreateSortField}
+                  collectObjectLinksWithRequestProperties={
+                    collectObjectLinksWithRequestProperties
+                  }
+                  collectObjectSchemaWithHierarchy={
+                    collectObjectSchemaWithHierarchy
+                  }
+                  //---------------use case----------------------------
+                  // keyElement={keyElement}
+                  // nameObjectLinkStep={nameObjectLinkStep}
+                  //------------------------------------------
+                  // funcUseCase={{ handleInputNameLinkStep, validateRequestProperties }}
+                  ComponentUseCase={
+                    ConditionLinkStepAndMultipleIdentifersComponent
+                  }
+                  LastStepsComponentUseCase={LastStepsComponentUseCase}
+                  valueUserTags={valueUserTags}
+                  nameObjectLinkStepEdit={""}
+                  // keyObjectUseCase
+                />
+              )}
+            </>
+          )}
+        </div>
+      ))}
+    </>
+  );
+};
+//----------------------------- use Lib -----------------------------------------------