impaktapps-ui-builder 0.0.382460 → 1.0.0

package/page/App/components/InspectPanel/PanelSetters/SelectSetter/baseMultiSelect .tsx

@@ -0,0 +1,236 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { PanelLabel } from "@/page/App/components/InspectPanel/components/Label";
+import { SerializedStyles, css } from "@emotion/react";
+import { fixedWidthStyle } from "@/page/App/components/InspectPanel/PanelSetters/style";
+import { BaseMultiSelectSetterProps } from "./interface";
+import TextField from "@mui/material/TextField";
+import Autocomplete from "@mui/material/Autocomplete";
+import "./styles.css";
+import { useSelector } from "react-redux";
+import { Checkbox} from "@mui/material";
+import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import Chip from "@mui/material/Chip";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { useState } from "react";
+import { without } from "lodash";
+import { getClaasesObject } from "@/redux/currentApp/style/styleSelector";
+const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
+const checkedIcon = <CheckBoxIcon fontSize="small" />;
+const applyBaseSelectWrapperStyle = (
+  isSetterSingleRow: boolean = false
+): SerializedStyles => {
+  return isSetterSingleRow
+    ? css`
+        width: 100%;
+      `
+    : fixedWidthStyle;
+};
+
+const setterContainerStyle = (isSetterSingleRow: boolean = false) => {
+  const basicStyle = css`
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  `;
+  const singleRowStyle = css`
+    flex-direction: column;
+    gap: 1px;
+  `;
+  return css`
+    display: flex;
+    padding: 8px 0;
+    ${isSetterSingleRow ? singleRowStyle : basicStyle};
+    width: 100%;
+  `;
+};
+
+const BaseSelectSetter = (props: BaseMultiSelectSetterProps) => {
+  const {
+    isSetterSingleRow,
+    options,
+    attrName,
+    handleUpdateDsl,
+    value,
+    onChange,
+    labelName,
+    labelDesc,
+    labelSize,
+  } = props;
+  const availableClasses = useSelector(getClaasesObject);
+  const [uniquekey, setUniqueKey] = useState(value?.map((e) => e.value) || []);
+  const classNames = Object.keys(availableClasses);
+  const actualoptions: { title: string; value: string | number }[] =
+    options ||
+    classNames.map((e) => {
+      return { title: e, value: e };
+    });
+  const getActalValues = (paramValue) => {
+    const filterValues = [];
+    const filterOptions = actualoptions.filter((e) => {
+      if (paramValue.includes(e.value)) {
+        filterValues.push(e.value);
+        return true;
+      }
+      return false;
+    });
+    const returnData = paramValue.map((e) => {
+      const index = filterValues.indexOf(e);
+      return filterOptions[index];
+    });
+    return returnData;
+  };
+  const SortableItem = (props) => {
+    const { attributes, listeners, setNodeRef, transform, transition } =
+      useSortable({ id: props.value });
+
+    const style = {
+      transform: CSS.Transform.toString(transform),
+      transition,
+      margin: "2px",
+    };
+
+    const onMouseDown = (e) => {
+      // e.preventDefault();
+      // e.stopPropagation();
+    };
+    return (
+      <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+        <Chip
+          key={props.value?.title}
+          label={props.value?.title}
+          onMouseDown={onMouseDown}
+          onDelete={() => {
+         
+          }}
+        />
+      </div>
+    );
+  };
+
+  const SortableChips = (props) => {
+    const sensors = useSensors(
+      useSensor(PointerSensor),
+      useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+      })
+    );
+    const handleDragEnd = (event) => {
+      const { active, over } = event;
+      if (active && over && active.id.title !== over.id.title) {
+        const valuesArray = props.values.map((e) => e.value);
+        const oldIndex = valuesArray.indexOf(active.id.value);
+        const newIndex = valuesArray.indexOf(over.id.value);
+        const updatedMoveValues = arrayMove(valuesArray, oldIndex, newIndex);
+
+        handleUpdateDsl(attrName, getActalValues(updatedMoveValues));
+        onChange?.(getActalValues(updatedMoveValues));
+      }
+    };
+    return (
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext
+          items={props.values}
+          strategy={verticalListSortingStrategy}
+        >
+          {props?.values?.map((id) => (
+            <SortableItem key={id.title} value={id} />
+          ))}
+        </SortableContext>
+      </DndContext>
+    );
+  };
+  return (
+    <div css={setterContainerStyle(isSetterSingleRow)}>
+      <span>
+        {labelName && (
+          <PanelLabel
+            labelName={labelName}
+            labelDesc={labelDesc}
+            labelSize={labelSize}
+          />
+        )}
+      </span>
+      <div css={applyBaseSelectWrapperStyle(isSetterSingleRow)}>
+        <Autocomplete
+          multiple
+          options={actualoptions}
+          value={
+            value || []
+            // ? getActalValues(value) :
+          }
+          isOptionEqualToValue={()=>true}
+          id={attrName}
+
+          size="small"
+          fullWidth
+          disableCloseOnSelect={true}
+          getOptionLabel={(option) => option.title}
+          renderOption={(props, option, 
+            // {  _selected }
+          ) => {
+            const { key, ...optionProps } = props;
+            return (
+              <li key={key} {...optionProps}>
+                <Checkbox
+                  icon={icon}
+                  checkedIcon={checkedIcon}
+                  style={{ marginRight: 8 }}
+                  checked={uniquekey.includes(key)}
+                />
+                {option.title}
+              </li>
+            );
+          }}
+          renderInput={(params) => <TextField value {...params} size="small" />}
+          onChange={(event: any, val: any) => {
+            const multiOptions = [];
+      
+            val?.map((e) => {
+              multiOptions.push(e?.value || e);
+            });
+            const uniqueSet = new Set(multiOptions);
+            const uniqueValues = Array.from(uniqueSet);
+            if (uniqueValues.length < multiOptions.length) {
+              const newArray = without(
+                uniqueValues,
+                multiOptions[multiOptions.length - 1]
+              );
+              setUniqueKey(newArray);
+              handleUpdateDsl(attrName, getActalValues(newArray));
+              onChange?.(getActalValues(newArray));
+            } else {
+              setUniqueKey(uniqueValues);
+              handleUpdateDsl(attrName, getActalValues(uniqueValues));
+              onChange?.(getActalValues(uniqueValues));
+            }
+          }}
+          renderTags={(value) => <SortableChips values={value} />}
+        />
+      </div>
+    </div>
+  );
+};
+
+BaseSelectSetter.displayName = "BaseSelect";
+
+export default BaseSelectSetter;

package/page/App/components/InspectPanel/PanelSetters/SelectSetter/baseSelect.tsx

@@ -0,0 +1,95 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { PanelLabel } from "@/page/App/components/InspectPanel/components/Label";
+import { SerializedStyles, css } from "@emotion/react";
+import { fixedWidthStyle } from "@/page/App/components/InspectPanel/PanelSetters/style";
+import {BaseSelectSetterProps} from './interface';
+
+import TextField from "@mui/material/TextField";
+import Autocomplete from "@mui/material/Autocomplete";
+import { isObject } from "lodash";
+
+import "./styles.css";
+
+const applyBaseSelectWrapperStyle = (
+  isSetterSingleRow: boolean = false
+): SerializedStyles => {
+  return isSetterSingleRow
+    ? css`
+        width: 100%;
+      `
+    : fixedWidthStyle;
+};
+
+const setterContainerStyle = (isSetterSingleRow: boolean = false) => {
+  const basicStyle = css`
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  `;
+  const singleRowStyle = css`
+    flex-direction: column;
+    gap: 8px;
+  `;
+  return css`
+    display: flex;
+    padding: 8px 0;
+    ${isSetterSingleRow ? singleRowStyle : basicStyle};
+    width: 100%;
+  `;
+};
+
+const BaseSelectSetter = (props: BaseSelectSetterProps) => {
+  const {
+    isSetterSingleRow,
+    options,
+    attrName,
+    handleUpdateDsl,
+    value,
+    onChange,
+    labelName,
+    labelDesc,
+    labelSize,
+  } = props;
+
+  return (
+    <div css={setterContainerStyle(isSetterSingleRow)}>
+      <span>
+        {labelName && (
+          <PanelLabel
+            labelName={labelName}
+            labelDesc={labelDesc}
+            labelSize={labelSize}
+          />
+        )}
+      </span>
+      <div css={applyBaseSelectWrapperStyle(isSetterSingleRow)}>
+        <Autocomplete
+          className="custom-autocomplete"
+           id={`combo-box-demo-${attrName}`}
+           key={`combo-box-demo-${attrName}`}
+          value={value}
+          options={options}
+          renderInput={(params) => <TextField {...params} size="small" />}
+          sx={{ width: 180 }}
+          disableCloseOnSelect
+          isOptionEqualToValue={()=>true}
+          onChange={(_event, val:any) => {
+           if(isObject(val)){
+            //@ts-expect-error mkkkk
+            const { value } = val??{value:""};
+            handleUpdateDsl(attrName, value);
+            onChange?.(value);
+           }else{
+            handleUpdateDsl(attrName, val);
+            onChange?.(val);
+           }
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+BaseSelectSetter.displayName = "BaseSelect";
+
+export default BaseSelectSetter;

package/page/App/components/InspectPanel/PanelSetters/SelectSetter/dataSourceSelectSetter.tsx

@@ -0,0 +1,121 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { get } from "lodash-es"
+import { FC, useCallback, useMemo } from "react"
+import { useSelector } from "react-redux"
+import { publicPaddingStyle } from "@/page/App/components/InspectPanel/style"
+import { getActionList } from "@/redux/currentApp/action/actionSelector"
+import { searchDSLByDisplayName } from "@/redux/currentApp/components/componentsSelector"
+import { getExecutionError } from "@/redux/currentApp/executionTree/executionSelector"
+import { RootState } from "@/store"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
+import BaseDynamicSelect from "./baseDynamicSelect"
+import { BaseSetter } from "../interface"
+import { PanelLabelProps } from "../../components/Label/interface"
+import { BaseSelectSetterProps } from "./interface"
+
+export interface ChartDataSourceSetterProps
+  extends BaseSetter,
+    PanelLabelProps {
+  allowClear?: boolean
+  value: string
+}
+
+export interface ChartColorSelectSetterProps extends BaseSetter {
+  value: string
+}
+
+export interface ChartTypeSelectSetterProps extends BaseSelectSetterProps {}
+
+const DataSourceSetter: FC<ChartDataSourceSetterProps> = (props) => {
+  const { handleUpdateDsl, widgetDisplayName, labelName, labelDesc } = props
+  const actions = useSelector(getActionList)
+  const executionErrors = useSelector(getExecutionError)
+  const isError = useMemo(() => {
+    return (
+      (executionErrors[`${widgetDisplayName}.dataSource`] ?? [])?.length > 0
+    )
+  }, [executionErrors, widgetDisplayName])
+
+  const targetComponentProps = useSelector<RootState, Record<string, any>>(
+    (rootState) => {
+      return searchDSLByDisplayName(widgetDisplayName, rootState)?.props || {}
+    },
+  )
+
+  const isDynamic = useMemo(() => {
+    const dataSourceMode = get(targetComponentProps, "dataSourceMode", "select")
+    return dataSourceMode === "dynamic"
+  }, [targetComponentProps])
+
+  const finalValue = useMemo(() => {
+    if (isDynamic) {
+      return get(targetComponentProps, "dataSourceJS")
+    } else {
+      return get(targetComponentProps, "dataSource")
+    }
+  }, [isDynamic, targetComponentProps])
+
+  const selectedOptions = useMemo(() => {
+    return actions.map((action) => ({
+      label: action.displayName,
+      value: `{{${action.displayName}.data}}`,
+    }))
+  }, [actions])
+
+  const handleClickFxButton = useCallback(() => {
+    const isInOption = selectedOptions.some(
+      (option) => option.value === finalValue,
+    )
+    if (isDynamic) {
+      handleUpdateDsl("dataSourceMode", "select")
+      if (!isInOption) {
+        handleUpdateDsl("dataSource", "")
+      } else {
+        handleUpdateDsl("dataSource", finalValue)
+      }
+    } else {
+      handleUpdateDsl("dataSourceMode", "dynamic")
+      if (isInOption) {
+        handleUpdateDsl("dataSourceJS", finalValue)
+      }
+    }
+  }, [handleUpdateDsl, isDynamic, selectedOptions, finalValue])
+
+  const handleChangeInput = useCallback(
+    (value: string) => {
+      handleUpdateDsl("dataSourceJS", value)
+    },
+    [handleUpdateDsl],
+  )
+
+  const handleChangeSelect = useCallback(
+    (value: any) => {
+      handleUpdateDsl("dataSource", value)
+    },
+    [handleUpdateDsl],
+  )
+
+  return (
+    <div css={publicPaddingStyle}>
+      <BaseDynamicSelect
+        {...props}
+        isDynamic={isDynamic}
+        onClickFxButton={handleClickFxButton}
+        selectPlaceholder="Select a query or transformer"
+        inputPlaceholder="{{}}"
+        onChangeInput={handleChangeInput}
+        path={`${widgetDisplayName}.dataSourceJS`}
+        options={selectedOptions}
+        expectedType={VALIDATION_TYPES.ARRAY}
+        onChangeSelect={handleChangeSelect}
+        value={finalValue}
+        labelName={labelName}
+        labelDesc={labelDesc}
+        isError={isError}
+      />
+    </div>
+  )
+}
+
+DataSourceSetter.displayName = "DataSourceSetter"
+export default DataSourceSetter

package/page/App/components/InspectPanel/PanelSetters/SelectSetter/eventActionTypeSelect.tsx

@@ -0,0 +1,60 @@
+import { get } from "lodash-es"
+import { FC, useCallback, useMemo } from "react"
+import { useSelector } from "react-redux"
+import { getCachedAction } from "@/redux/config/configSelector"
+import { getWidgetExecutionResult } from "@/redux/currentApp/executionTree/executionSelector"
+import { BaseSelectSetterProps } from "./interface"
+import SearchSelectSetter from "./searchSelect"
+
+const EventActionTypeSelect: FC<BaseSelectSetterProps> = (props) => {
+  const {
+    attrName,
+    parentAttrName,
+    handleUpdateDsl,
+    widgetDisplayName,
+    widgetOrAction,
+  } = props
+
+  const widgetDisplayNameMapProps = useSelector(getWidgetExecutionResult)
+  const selectedAction = useSelector(getCachedAction)
+
+  const oldEvent = useMemo(() => {
+    if (widgetOrAction === "WIDGET") {
+      return get(
+        widgetDisplayNameMapProps,
+        `${widgetDisplayName}.${parentAttrName}`,
+        {},
+      )
+    } else {
+      return get(selectedAction, `content.${parentAttrName}`, {})
+    }
+  }, [
+    widgetOrAction,
+    widgetDisplayNameMapProps,
+    widgetDisplayName,
+    parentAttrName,
+    selectedAction,
+  ])
+
+  const _finalAttrPath = parentAttrName ? parentAttrName : attrName
+  const handleUpdateDSLInner = useCallback(
+    (attrPath: string, value: unknown) => {
+      handleUpdateDsl(attrPath, {
+        actionType: value,
+        id: oldEvent?.id,
+        eventType: oldEvent?.eventType,
+      })
+    },
+    [handleUpdateDsl, oldEvent],
+  )
+
+  return (
+    <SearchSelectSetter
+      {...props}
+      attrName={_finalAttrPath}
+      handleUpdateDsl={handleUpdateDSLInner}
+    />
+  )
+}
+EventActionTypeSelect.displayName = "EventActionTypeSelect"
+export default EventActionTypeSelect

package/page/App/components/InspectPanel/PanelSetters/SelectSetter/eventBodyViewSelect.tsx

@@ -0,0 +1,72 @@
+
+import { get, toPath } from "lodash-es"
+import { FC, useMemo } from "react"
+import { useSelector } from "react-redux"
+import {
+  getComponentMap,
+  searchComponentFromMap,
+} from "@/redux/currentApp/components/componentsSelector"
+import { BaseSelectSetterProps } from "./interface"
+import SearchSelectSetter from "./searchSelect"
+import { convertPathToString } from "@/redux/utils"
+
+const EventTargetViewSelect: FC<BaseSelectSetterProps> = (props) => {
+  const { attrName, value, componentNode, widgetOrAction, panelConfig } = props
+
+  const parentAttrNameArray = toPath(attrName)
+  parentAttrNameArray.splice(-1, 1)
+
+  const parentAttr =
+    widgetOrAction === "WIDGET"
+      ? get(componentNode, `props.${convertPathToString(parentAttrNameArray)}`)
+      : get(panelConfig, convertPathToString(parentAttrNameArray))
+
+  const pagePath = get(parentAttr, "pagePath")
+  const componentsMap = useSelector(getComponentMap)
+  const pageComponent = searchComponentFromMap(componentsMap, pagePath)
+
+  const finalOptions = useMemo(() => {
+    if (!pageComponent) return []
+    const options: { label: string; value: string }[] = []
+    const walkedConfig = new Map<string, Record<string, any>>()
+    pageComponent.childrenNode.forEach((node) => {
+      const component = searchComponentFromMap(componentsMap, node)
+      const { props } = component ?? {}
+      if (
+        props &&
+        Array.isArray(props.viewSortedKey) &&
+        Array.isArray(props.sectionViewConfigs)
+      ) {
+        props.sectionViewConfigs.forEach((config) => {
+          if (walkedConfig.get(config.path)) return
+          walkedConfig.set(config.path, config)
+          options.push({
+            label: config.path,
+            value: config.path,
+          })
+        })
+      }
+    })
+    return options
+  }, [componentsMap, pageComponent])
+
+  const finalValue = useMemo(() => {
+    const index = finalOptions.findIndex((option) => {
+      return option.value === value
+    })
+    if (index !== -1) return value
+    return undefined
+  }, [finalOptions, value])
+
+  return (
+    <SearchSelectSetter
+      {...props}
+      value={finalValue as string}
+      options={finalOptions}
+    />
+  )
+}
+
+EventTargetViewSelect.displayName = "EventTargetViewSelect"
+
+export default EventTargetViewSelect

package/page/App/components/InspectPanel/PanelSetters/SelectSetter/eventTargetActionSelect.tsx

@@ -0,0 +1,37 @@
+import { FC, useContext, useMemo } from "react"
+import { SelectedPanelContext } from "@/page/App/components/InspectPanel/context/selectedContext"
+import { BaseSelectSetterProps } from "./interface"
+import SearchSelectSetter from "./searchSelect"
+import { useSelector } from "react-redux"
+import { getActionList } from "@/redux/currentApp/action/actionSelector"
+import { getCachedAction } from "@/redux/config/configSelector"
+
+const EventTargetActionSelect: FC<BaseSelectSetterProps> = (props) => {
+  const actionList =  useSelector(getActionList)
+
+  const selectedContext = useContext(SelectedPanelContext)
+  const selectedAction =  useSelector(getCachedAction);
+
+  const actionOptions = useMemo(() => {
+    if (selectedContext.widgetOrAction === "ACTION") {
+      return actionList
+        .filter((value) => {
+          return value.displayName !== selectedAction?.displayName
+        })
+        .map((item) => item.displayName)
+    }
+    if (selectedContext.widgetOrAction === "WIDGET") {
+      return actionList.map((item) => {
+        return item.displayName
+      })
+    }
+    return []
+  }, [
+    actionList, 
+    selectedAction?.displayName, selectedContext.widgetOrAction])
+  return <SearchSelectSetter {...props} options={actionOptions} />
+}
+
+EventTargetActionSelect.displayName = "EventTargetActionSelect"
+
+export default EventTargetActionSelect

package/page/App/components/InspectPanel/PanelSetters/SelectSetter/eventTargetStateSelect.tsx

@@ -0,0 +1,40 @@
+import { FC, useMemo } from "react"
+import { useSelector } from "react-redux"
+import { getGlobalDataExecutionResult } from "@/redux/currentApp/executionTree/executionSelector"
+import { BaseSelectSetterProps } from "./interface"
+import SearchSelectSetter from "./searchSelect"
+
+const EventtargetStateSelect: FC<BaseSelectSetterProps> = (props) => {
+  const { value } = props
+
+  const globalDataResult = useSelector(getGlobalDataExecutionResult)
+
+  const finalOptions = useMemo(() => {
+    return Object.keys(globalDataResult)
+      .filter((key) => !key.startsWith("$"))
+      .map((key) => ({
+        label: key,
+        value: key,
+      }))
+  }, [globalDataResult])
+
+  const finalValue = useMemo(() => {
+    const index = finalOptions.findIndex((option) => {
+      return option.value === value
+    })
+    if (index !== -1) return value
+    return undefined
+  }, [finalOptions, value])
+
+  return (
+    <SearchSelectSetter
+      {...props}
+      value={finalValue as string}
+      options={finalOptions}
+    />
+  )
+}
+
+EventtargetStateSelect.displayName = "EventtargetStateSelect"
+
+export default EventtargetStateSelect