impaktapps-ui-builder 0.0.382460 → 1.0.0

package/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/context/viewsListContext.tsx

@@ -0,0 +1,270 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { klona } from "klona/json"
+import { get } from "lodash-es"
+import { FC, ReactNode, createContext, useCallback, useMemo } from "react"
+import { useDispatch, useSelector } from "react-redux"
+import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface"
+import { componentsActions } from "@/redux/currentApp/components/componentsSlice"
+import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector"
+import { RootState } from "@/store"
+import { newGenerateChildrenComponentNode } from "@/utils/generators/generateComponentNode"
+import { BasicContainerConfig } from "@/widgetLibrary/BasicContainer/BasicContainer"
+import { ViewItemShape } from "../interface"
+import {
+  generateNewViewItem,
+  generateViewItemId,
+} from "../utils/generateNewOptions"
+import { ComponentMapNode } from "@/utils/generators/interface"
+
+interface ProviderProps {
+  viewsList: ViewItemShape[]
+  childrenSetter: PanelFieldConfig[]
+  widgetDisplayName: string
+  attrPath: string
+  componentNode: ComponentMapNode
+  handleUpdateDsl: (attrPath: string, value: any) => void
+  handleUpdateMultiAttrDSL?: (updateSlice: Record<string, any>) => void
+  handleUpdateExecutionResult?: (
+    displayName: string,
+    updateSlice: Record<string, any>,
+  ) => void
+  handleUpdateOtherMultiAttrDSL?: (
+    displayName: string,
+    updateSlice: Record<string, any>,
+  ) => void
+  children: ReactNode
+}
+
+interface Inject extends Omit<ProviderProps, "children"> {
+  currentViewIndex: number
+  handleDeleteOptionItem: (index: number) => void
+  handleCopyOptionItem: (index: number) => void
+  handleUpdateCurrentViewIndex: (index: number) => void
+  handleMoveOptionItem: (dragIndex: number, hoverIndex: number) => void
+}
+
+export const ViewListSetterContext = createContext<Inject>({} as Inject)
+
+export const ViewListSetterProvider: FC<ProviderProps> = (props) => {
+  const {
+    viewsList,
+    attrPath,
+    widgetDisplayName,
+    handleUpdateMultiAttrDSL,
+    handleUpdateExecutionResult,
+    componentNode,
+  } = props
+  const dispatch = useDispatch()
+  const executionResult = useSelector(getExecutionResult)
+
+  const targetComponentProps = useSelector<RootState, Record<string, any>>(
+    (rootState) => {
+      const executionTree = getExecutionResult(rootState)
+      return get(executionTree, widgetDisplayName, {})
+    },
+  )
+ 
+  const allViews = useMemo(() => {
+    return get(
+      executionResult,
+      `${widgetDisplayName}.${attrPath}`,
+      [],
+    ) as ViewItemShape[]
+  }, [attrPath, executionResult, widgetDisplayName])
+
+  const linkWidgetDisplayName = useMemo(() => {
+    return get(targetComponentProps, "linkWidgetDisplayName", "") as string
+  }, [targetComponentProps])
+
+  const currentViewIndex = useMemo(() => {
+    return get(executionResult, `${widgetDisplayName}.currentIndex`)
+  }, [executionResult, widgetDisplayName])
+
+  const allViewsKeys = useMemo(() => {
+    return allViews.map((view) => view.key)
+  }, [allViews])
+
+  const handleDeleteOptionItem = useCallback(
+    (index: number) => {
+      if (viewsList.length <= 1) return
+      const updatedArray = viewsList.filter(
+        (optionItem: Record<string, any>, i: number) => {
+          return i !== index
+        },
+      )
+
+      const currentChildrenNodeDisplayName = componentNode.childrenNode[index]
+
+      const updateSlice = {
+        [attrPath]: updatedArray,
+        currentIndex: 0,
+        currentKey: allViewsKeys[0],
+      }
+
+      if (currentViewIndex !== index) {
+        const oldCurrentViewKey = viewsList[currentViewIndex].key
+        const newCurrentViewIndex = updatedArray.findIndex(
+          (item) => item.key === oldCurrentViewKey,
+        )
+        if (newCurrentViewIndex !== -1) {
+          updateSlice.currentIndex = newCurrentViewIndex
+          updateSlice.currentKey = oldCurrentViewKey
+        }
+      }
+
+      handleUpdateMultiAttrDSL?.(updateSlice)
+      dispatch(
+        componentsActions.deleteComponentNodeReducer({
+          displayNames: [currentChildrenNodeDisplayName],
+        }),
+      )
+    },
+    [
+      allViewsKeys,
+      attrPath,
+      componentNode.childrenNode,
+      currentViewIndex,
+      dispatch,
+      handleUpdateMultiAttrDSL,
+      viewsList,
+    ],
+  )
+
+  const handleCopyOptionItem = useCallback(
+    (index: number) => {
+      let targetOptionItem = viewsList.find(
+        (optionItem: Record<string, any>, i: number) => {
+          return i === index
+        },
+      )
+      if (!targetOptionItem) return
+      const newChildrenNodes = newGenerateChildrenComponentNode(
+        BasicContainerConfig,
+        componentNode.displayName,
+      )
+      const newItem = generateNewViewItem(allViewsKeys)
+      targetOptionItem = {
+        ...targetOptionItem,
+        key: newItem.key,
+        id: generateViewItemId(),
+      }
+      const updatedArray = [...viewsList, targetOptionItem]
+      handleUpdateMultiAttrDSL?.({
+        [attrPath]: updatedArray,
+      })
+      dispatch(componentsActions.addComponentReducer([newChildrenNodes]))
+    },
+    [
+      allViewsKeys,
+      attrPath,
+      componentNode.displayName,
+      dispatch,
+      handleUpdateMultiAttrDSL,
+      viewsList,
+    ],
+  )
+
+  const handleUpdateCurrentViewIndex = useCallback(
+    (index: number) => {
+      if (index > viewsList.length || index < 0) return
+      const currentViewKey = allViews[index].key
+      handleUpdateExecutionResult?.(widgetDisplayName, {
+        currentIndex: index,
+        currentKey: currentViewKey || index,
+      })
+      if (linkWidgetDisplayName) {
+        if (Array.isArray(linkWidgetDisplayName)) {
+          linkWidgetDisplayName.forEach((linkDisplayName) => {
+            handleUpdateExecutionResult?.(linkDisplayName, {
+              currentIndex: index,
+              currentKey: currentViewKey || index,
+            })
+          })
+        } else {
+          handleUpdateExecutionResult?.(linkWidgetDisplayName, {
+            currentIndex: index,
+            currentKey: currentViewKey || index,
+          })
+          const linkWidgetLinkedDisplayName = get(
+            executionResult,
+            `${linkWidgetDisplayName}.linkWidgetDisplayName`,
+            [],
+          )
+          linkWidgetLinkedDisplayName &&
+            Array.isArray(linkWidgetLinkedDisplayName) &&
+            linkWidgetLinkedDisplayName.forEach((name) => {
+              name !== widgetDisplayName &&
+                handleUpdateExecutionResult?.(name, {
+                  currentIndex: index,
+                  currentKey: currentViewKey || index,
+                })
+            })
+        }
+      }
+    },
+    [
+      allViews,
+      executionResult,
+      handleUpdateExecutionResult,
+      linkWidgetDisplayName,
+      viewsList.length,
+      widgetDisplayName,
+    ],
+  )
+
+  const handleMoveOptionItem = useCallback(
+    (dragIndex: number, hoverIndex: number) => {
+      const dragOptionItem = viewsList[dragIndex]
+      const currentSelected = viewsList[currentViewIndex]
+      const newComponentNode = klona(componentNode.childrenNode)
+      ;[newComponentNode[dragIndex], newComponentNode[hoverIndex]] = [
+        newComponentNode[hoverIndex],
+        newComponentNode[dragIndex],
+      ]
+      const newViews = [...viewsList]
+      newViews.splice(dragIndex, 1)
+      newViews.splice(hoverIndex, 0, dragOptionItem)
+      const newSelectedIndex = newViews.findIndex(
+        (view) => view.key === currentSelected.key,
+      )
+      const newSelectedKey = newViews[newSelectedIndex].key
+      handleUpdateMultiAttrDSL?.({
+        [attrPath]: newViews,
+        currentIndex: newSelectedIndex,
+        currentKey: newSelectedKey,
+      })
+      dispatch(
+        componentsActions.sortComponentNodeChildrenReducer({
+          parentDisplayName: componentNode.displayName,
+          newChildrenNode: newComponentNode,
+        }),
+      )
+    },
+    [
+      attrPath,
+      componentNode.childrenNode,
+      componentNode.displayName,
+      currentViewIndex,
+      dispatch,
+      handleUpdateMultiAttrDSL,
+      viewsList,
+    ],
+  )
+  const value = {
+    ...props,
+    handleDeleteOptionItem,
+    handleCopyOptionItem,
+    currentViewIndex,
+    handleUpdateCurrentViewIndex,
+    handleMoveOptionItem,
+  }
+
+  return (
+    <ViewListSetterContext.Provider value={value}>
+      {props.children}
+    </ViewListSetterContext.Provider>
+  )
+}
+
+ViewListSetterProvider.displayName = "OptionListSetterProvider"

package/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/dragIconAndLabel.tsx

@@ -0,0 +1,86 @@
+import { get } from "lodash-es"
+import { FC, MouseEvent, useCallback, useContext, useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { useSelector } from "react-redux"
+import { ViewListSetterContext } from "@/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/context/viewsListContext"
+import {
+  DragIconAndLabelProps,
+  ViewItemShape,
+} from "@/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/interface"
+import {
+  applyOptionStyle,
+  labelAndDragIconWrapperStyle,
+  labelWrapperStyle,
+} from "@/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/style"
+import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector"
+import { Trigger } from "@/utils/trigger"
+
+interface optionIconProps {
+  isSelected: boolean
+  onClick: (e: MouseEvent<HTMLDivElement>) => void
+}
+
+const OptionIcon: FC<optionIconProps> = ({ isSelected, onClick }) => {
+  return <div css={applyOptionStyle(isSelected)} onClick={onClick} />
+}
+
+export const DragIconAndLabel: FC<DragIconAndLabelProps> = (props) => {
+  const { index, label, isSelected } = props
+  const { widgetDisplayName, attrPath, handleUpdateCurrentViewIndex } =
+    useContext(ViewListSetterContext)
+
+  const { t } = useTranslation()
+  const executionResult = useSelector(getExecutionResult)
+
+  const currentViews = useMemo(() => {
+    return get(executionResult, `${widgetDisplayName}.${attrPath}.${index}`, {})
+  }, [attrPath, executionResult, index, widgetDisplayName])
+
+  const otherViewKeys = useMemo(() => {
+    const allViews = get(
+      executionResult,
+      `${widgetDisplayName}.${attrPath}`,
+      [],
+    ) as ViewItemShape[]
+    return allViews
+      .map((views, i) => views.key || i)
+      .filter((_key, i) => i != index)
+  }, [attrPath, executionResult, index, widgetDisplayName])
+
+  const isDuplicationKey = useMemo(() => {
+    return otherViewKeys.some((viewKey) => viewKey == currentViews.key)
+  }, [otherViewKeys, currentViews])
+
+  const handleChangeCurrentView = useCallback(
+    (e: MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation()
+      handleUpdateCurrentViewIndex(index)
+    },
+    [handleUpdateCurrentViewIndex, index],
+  )
+
+  return (
+    <span css={labelAndDragIconWrapperStyle}>
+      {/* <DragPointIcon css={moveIconStyle} id="dragIcon" /> */}
+      <div css={labelWrapperStyle}>
+        <OptionIcon isSelected={isSelected} onClick={handleChangeCurrentView} />
+        <span style={{ maxWidth: "147px" }}>{label}</span>
+        {isDuplicationKey && (
+          <Trigger
+            trigger="hover"
+            showArrow={false}
+            position="bottom"
+            content={`${t("widget.container.key_duplicated")}`}
+          >
+            <div>Warning Icon</div>
+            {/* <WarningCircleIcon
+              color={globalColor(`--${IMPAKTAPPSPrefix}-orange-03`)}
+            /> */}
+          </Trigger>
+        )}
+      </div>
+    </span>
+  )
+}
+
+DragIconAndLabel.displayName = "DragIconAndLabel"

package/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/header.tsx

@@ -0,0 +1,28 @@
+import { FC } from "react"
+import { useTranslation } from "react-i18next"
+import {
+  HeaderLabelStyle,
+  HeaderWrapperStyle,
+} from "@/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/style"
+import { Button } from "@mui/material"
+
+export interface HeaderProps {
+  labelName: string
+  addAction: () => void
+  hasAddAction: boolean
+}
+
+export const Header: FC<HeaderProps> = (props) => {
+  const { t } = useTranslation()
+  const { labelName, addAction, hasAddAction } = props
+  return (
+    <div css={HeaderWrapperStyle}>
+      <span css={HeaderLabelStyle}>{labelName}</span>
+      {hasAddAction && (
+        <Button onClick={addAction}>
+         {t("editor.inspect.setter_content.column_setter.new")} 
+        </Button>
+      )}
+    </div>
+  )
+}

package/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/index.tsx

@@ -0,0 +1,238 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { get } from "lodash-es";
+import { FC, memo, useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useDispatch, useSelector, useStore } from "react-redux";
+import { ViewListSetterProvider } from "@/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/context/viewsListContext";
+import { Header } from "@/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/header";
+import {
+  ViewItemShape,
+  ViewSetterProps,
+} from "@/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/interface";
+import { ListBody } from "@/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/listBody";
+import {
+  setterPublicWrapper,
+  viewSetterWrapperStyle,
+} from "@/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/style";
+import { generateNewViewItem } from "@/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/utils/generateNewOptions";
+import {
+  getComponentMap,
+  searchComponentFromMap,
+} from "@/redux/currentApp/components/componentsSelector";
+import { componentsActions } from "@/redux/currentApp/components/componentsSlice";
+import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector";
+import  { RootState } from "@/store";
+import { newGenerateChildrenComponentNode } from "@/utils/generators/generateComponentNode";
+import { BasicContainerConfig } from "@/widgetLibrary/BasicContainer/BasicContainer";
+import { ComponentMapNode } from "@/utils/generators/interface";
+
+const ViewsSetter: FC<ViewSetterProps> = memo((props: ViewSetterProps) => {
+  const {
+    value,
+    attrName,
+    widgetDisplayName,
+    childrenSetter,
+    handleUpdateExecutionResult,
+    handleUpdateMultiAttrDSL,
+    handleUpdateOtherMultiAttrDSL,
+    componentNode,
+  } = props;
+  const { t } = useTranslation();
+  const executionResult = useSelector(getExecutionResult);
+  const dispatch = useDispatch();
+ const store = useStore();
+  const targetComponentProps = useSelector<RootState, Record<string, any>>(
+    (rootState) => {
+      const executionTree = getExecutionResult(rootState);
+      return get(executionTree, widgetDisplayName, {});
+    }
+  );
+
+  const linkWidgetDisplayName = useMemo(() => {
+    return get(targetComponentProps, "linkWidgetDisplayName", "") as string;
+  }, [targetComponentProps]);
+
+  const allViews = useMemo(() => {
+    return get(
+      executionResult,
+      `${widgetDisplayName}.${attrName}`,
+      []
+    ) as ViewItemShape[];
+  }, [attrName, executionResult, widgetDisplayName]);
+
+  const allViewsKeys = useMemo(() => {
+    return value.map((view) => view.key);
+  }, [value]);
+
+  const updateMultiAttrDSL = useCallback(
+    (updateSlice: Record<string, unknown>) => {
+      handleUpdateMultiAttrDSL?.(updateSlice);
+      if (linkWidgetDisplayName) {
+        if (Array.isArray(linkWidgetDisplayName)) {
+          linkWidgetDisplayName.forEach((linkDisplayName) => {
+            handleUpdateOtherMultiAttrDSL?.(linkDisplayName, updateSlice);
+          });
+        } else {
+          handleUpdateOtherMultiAttrDSL?.(linkWidgetDisplayName, updateSlice);
+          const linkWidgetLinkedDisplayName = get(
+            executionResult,
+            `${linkWidgetDisplayName}.linkWidgetDisplayName`,
+            []
+          );
+          linkWidgetLinkedDisplayName &&
+            Array.isArray(linkWidgetLinkedDisplayName) &&
+            linkWidgetLinkedDisplayName.forEach((name) => {
+              name !== widgetDisplayName &&
+                handleUpdateOtherMultiAttrDSL?.(name, updateSlice);
+            });
+        }
+      }
+    },
+    [
+      executionResult,
+      handleUpdateMultiAttrDSL,
+      handleUpdateOtherMultiAttrDSL,
+      linkWidgetDisplayName,
+      widgetDisplayName,
+    ]
+  );
+
+  const handleUpdateDsl = useCallback(
+    (attrName: string, value: any) => {
+      handleUpdateMultiAttrDSL?.({
+        [attrName]: value,
+      });
+      if (linkWidgetDisplayName) {
+        if (Array.isArray(linkWidgetDisplayName)) {
+          linkWidgetDisplayName.forEach((linkDisplayName) => {
+            handleUpdateOtherMultiAttrDSL?.(linkDisplayName, {
+              [attrName]: value,
+            });
+          });
+        } else {
+          handleUpdateOtherMultiAttrDSL?.(linkWidgetDisplayName, {
+            [attrName]: value,
+          });
+          const linkWidgetLinkedDisplayName = get(
+            executionResult,
+            `${linkWidgetDisplayName}.linkWidgetDisplayName`,
+            []
+          );
+          linkWidgetLinkedDisplayName &&
+            Array.isArray(linkWidgetLinkedDisplayName) &&
+            linkWidgetLinkedDisplayName.forEach((name) => {
+              name !== widgetDisplayName &&
+                handleUpdateOtherMultiAttrDSL?.(name, {
+                  [attrName]: value,
+                });
+            });
+        }
+      }
+    },
+    [
+      handleUpdateMultiAttrDSL,
+      linkWidgetDisplayName,
+      handleUpdateOtherMultiAttrDSL,
+      executionResult,
+      widgetDisplayName,
+    ]
+  );
+
+  const _componentNode = useMemo(() => {
+    if (
+      componentNode.type === "CONTAINER_WIDGET" ||
+      componentNode.type === "GridCONTAINER_WIDGET"
+    ) {
+      return componentNode;
+    }
+    const finalNode = searchComponentFromMap(
+      getComponentMap(store.getState() as RootState),
+      linkWidgetDisplayName
+    );
+    if (
+      finalNode?.type === "CONTAINER_WIDGET" ||
+      componentNode.type === "GridCONTAINER_WIDGET"
+    )
+      return finalNode;
+    return {} as ComponentMapNode;
+  }, [componentNode, linkWidgetDisplayName]);
+  const handleAddViewItem = useCallback(() => {
+    const newItem = generateNewViewItem(allViewsKeys);
+    const newChildrenNodes = newGenerateChildrenComponentNode(
+      BasicContainerConfig,
+      _componentNode?.displayName
+    );
+    handleUpdateMultiAttrDSL?.({
+      [attrName]: [...value, newItem],
+    });
+
+    if (linkWidgetDisplayName) {
+      if (Array.isArray(linkWidgetDisplayName)) {
+        linkWidgetDisplayName.forEach((linkDisplayName) => {
+          handleUpdateOtherMultiAttrDSL?.(linkDisplayName, {
+            [attrName]: [...value, newItem],
+          });
+        });
+      } else {
+        handleUpdateOtherMultiAttrDSL?.(linkWidgetDisplayName, {
+          [attrName]: [...value, newItem],
+        });
+        const linkWidgetLinkedDisplayName = get(
+          executionResult,
+          `${linkWidgetDisplayName}.linkWidgetDisplayName`,
+          []
+        );
+        linkWidgetLinkedDisplayName &&
+          Array.isArray(linkWidgetLinkedDisplayName) &&
+          linkWidgetLinkedDisplayName.forEach((name) => {
+            name !== widgetDisplayName &&
+              handleUpdateOtherMultiAttrDSL?.(name, {
+                [attrName]: [...value, newItem],
+              });
+          });
+      }
+    }
+    dispatch(componentsActions.addComponentReducer([newChildrenNodes]));
+  }, [
+    _componentNode?.displayName,
+    allViewsKeys,
+    attrName,
+    dispatch,
+    executionResult,
+    handleUpdateMultiAttrDSL,
+    handleUpdateOtherMultiAttrDSL,
+    linkWidgetDisplayName,
+    value,
+    widgetDisplayName,
+  ]);
+
+  return (
+    <ViewListSetterProvider
+      viewsList={value}
+      childrenSetter={childrenSetter || []}
+      widgetDisplayName={widgetDisplayName}
+      attrPath={attrName}
+      handleUpdateDsl={handleUpdateDsl}
+      handleUpdateMultiAttrDSL={updateMultiAttrDSL}
+      handleUpdateExecutionResult={handleUpdateExecutionResult}
+      handleUpdateOtherMultiAttrDSL={handleUpdateOtherMultiAttrDSL}
+      componentNode={_componentNode}
+    >
+      <div css={setterPublicWrapper}>
+        <div css={viewSetterWrapperStyle}>
+          <Header
+            labelName={t("editor.inspect.setter_content.view_setter.views")}
+            addAction={handleAddViewItem}
+            hasAddAction
+          />
+          <ListBody />
+        </div>
+      </div>
+    </ViewListSetterProvider>
+  );
+});
+
+ViewsSetter.displayName = "ViewsSetter";
+
+export default ViewsSetter;

package/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/interface.ts

@@ -0,0 +1,28 @@
+
+import { BaseSetter } from "@/page/App/components/InspectPanel/PanelSetters/interface"
+import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface"
+import { ComponentMapNode } from "@/utils/generators/interface"
+
+export interface ViewItemShape {
+  id: string
+  key: string
+  label: string
+  disabled?: string
+  hidden?: string
+  xs?:number
+  sm?:number,
+  md?:number,
+  lg?:number
+}
+
+export interface ViewSetterProps extends BaseSetter {
+  value: ViewItemShape[]
+  childrenSetter?: PanelFieldConfig[]
+  componentNode: ComponentMapNode
+}
+
+export interface DragIconAndLabelProps {
+  index: number
+  label?: string
+  isSelected: boolean
+}