procode-vs-template 1.0.0

package/src/Widgets/GridToolBar/Components/Setting/ColumnChooser/ColumnChooser.tsx

@@ -0,0 +1,274 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import _ from "lodash";
+import { ChooserColumn } from "../../../data/setting";
+import ColumnChooserView from "./ColumnChooserView";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+export type ColumnChooserProps = {
+  uiElementGroupData: Record<string, any>;
+  toggleColumnChooser: boolean;
+  columns: ChooserColumn[];
+  config: { uiElementGroupId: string };
+  onChooserClick: () => void;
+  onModelUpdate: (
+    callBack: ((args: any) => void) | null,
+    fieldName: string,
+    value: any
+  ) => void;
+  setToggleColumnChooser: (status: boolean) => void;
+  setTogglePopup: (status: boolean) => void;
+};
+
+const ColumnChooser = (props: ColumnChooserProps) => {
+  const [searchInput, setSearchInput] = useState("");
+
+  const popupChooserRef = useRef<HTMLDivElement>(null);
+
+  const searchedColumns = useMemo(
+    () =>
+      props.uiElementGroupData?.setting?.columnChooser?.allColumns?.filter(
+        (c: ChooserColumn) =>
+          c.label.toLowerCase().includes(searchInput?.toLowerCase())
+      ),
+    [
+      searchInput,
+      JSON.stringify(
+        props.uiElementGroupData?.setting?.columnChooser?.allColumns
+      ),
+    ]
+  );
+
+  const selectedColumns = useMemo(() => {
+    const sColumns = _.cloneDeep(
+      props.uiElementGroupData?.setting?.columnChooser?.selectedColumns
+    );
+
+    return sColumns?.sort((a: ChooserColumn, b: ChooserColumn) => {
+      return (a.order ?? 0) - (b.order ?? 0);
+    });
+  }, [
+    JSON.stringify(
+      props.uiElementGroupData?.setting?.columnChooser?.selectedColumns
+    ),
+  ]);
+
+  useEffect(() => {
+    if (props.toggleColumnChooser) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [props.toggleColumnChooser]);
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      popupChooserRef.current &&
+      !popupChooserRef.current.contains(event.target as Node) &&
+      (event.target as Node).textContent !== "Column Chooser"
+    ) {
+      props.onChooserClick();
+    }
+  };
+
+  const onFieldAddOrRemove = (id: number) => {
+    const allColumns = _.cloneDeep(
+      props.uiElementGroupData.setting.columnChooser.allColumns
+    );
+    const sColumns = _.cloneDeep(
+      props.uiElementGroupData.setting.columnChooser.selectedColumns
+    );
+    const sColumn = allColumns.find((a: ChooserColumn) => a.id === id);
+
+    let selectedColumns: ChooserColumn[] = [];
+    if (sColumn.selected) {
+      selectedColumns = sColumns?.filter((a: ChooserColumn) => a.id !== id);
+      selectedColumns = selectedColumns.map((s, index: number) => {
+        s.order = index + 1;
+        return s;
+      });
+    } else {
+      selectedColumns = [
+        ...sColumns,
+        { ...sColumn, selected: true, order: sColumns.length },
+      ];
+    }
+
+    allColumns.forEach((column: ChooserColumn) => {
+      if (column.id === id) {
+        column.selected = !column.selected;
+      }
+    });
+
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      setting: {
+        ...props.uiElementGroupData.setting,
+        columnChooser: {
+          ...props.uiElementGroupData.setting.columnChooser,
+          allColumns: allColumns,
+          selectedColumns,
+        },
+      },
+    };
+
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+  };
+
+  const excludeIncludeToCard = (id: number) => {
+    const selectedColumns = _.cloneDeep(
+      props.uiElementGroupData.setting.columnChooser.selectedColumns
+    );
+    selectedColumns.forEach((column: ChooserColumn) => {
+      if (column.id === id) {
+        column.includeInCard = !column.includeInCard;
+      }
+    });
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      setting: {
+        ...props.uiElementGroupData.setting,
+        columnChooser: {
+          ...props.uiElementGroupData.setting.columnChooser,
+          selectedColumns: selectedColumns,
+        },
+      },
+    };
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+  };
+
+  const toggleFreeze = (id: number) => {
+    const selectedColumns = _.cloneDeep(
+      props.uiElementGroupData.setting.columnChooser.selectedColumns
+    );
+    const freezeIndex = selectedColumns.findIndex(
+      (column: ChooserColumn) => column.id === id
+    );
+    selectedColumns.forEach((column: ChooserColumn, index: number) => {
+      if (index <= freezeIndex) {
+        column.isFreezed = true;
+      } else {
+        column.isFreezed = column.primary || false;
+      }
+    });
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      setting: {
+        ...props.uiElementGroupData.setting,
+        columnChooser: {
+          ...props.uiElementGroupData.setting.columnChooser,
+          selectedColumns: selectedColumns,
+        },
+      },
+    };
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+  };
+
+  const onChooserApply = () => {
+    const updatedColumnChooser = {
+      ...props.uiElementGroupData.setting.columnChooser,
+      appliedColumns: _.cloneDeep(selectedColumns),
+    };
+
+    const updatedSetting = {
+      ...props.uiElementGroupData.setting,
+      columnChooser: updatedColumnChooser,
+    };
+
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      setting: updatedSetting,
+    };
+    props.setToggleColumnChooser(false);
+    props.setTogglePopup(false);
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+  };
+
+  const onChooserRestore = () => {
+    const updatedColumnChooser = {
+      ...props.uiElementGroupData.setting.columnChooser,
+      allColumns: _.cloneDeep(props.columns),
+      selectedColumns: _.cloneDeep(props.columns).filter((c) => c.selected),
+    };
+
+    const updatedSetting = {
+      ...props.uiElementGroupData.setting,
+      columnChooser: updatedColumnChooser,
+    };
+
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      setting: updatedSetting,
+    };
+
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+  };
+
+  const onFieldDragEnd = (result: any) => {
+    if (!result.destination) return;
+    if (result.destination.index === result.source.index) return;
+
+    const clonedSelectedColumns = _.cloneDeep(selectedColumns);
+    const movedItem = clonedSelectedColumns.splice(result.source.index, 1)[0];
+    clonedSelectedColumns.splice(result.destination.index, 0, movedItem);
+    clonedSelectedColumns.forEach((column: ChooserColumn, index: number) => {
+      column.order = index + 1;
+    });
+
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      setting: {
+        ...props.uiElementGroupData.setting,
+        columnChooser: {
+          ...props.uiElementGroupData.setting.columnChooser,
+          selectedColumns: clonedSelectedColumns,
+        },
+      },
+    };
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+  };
+
+  return (
+    <ColumnChooserView
+      popupChooserRef={popupChooserRef}
+      allColumns={searchedColumns ?? []}
+      selectedColumns={selectedColumns ?? []}
+      onFieldAddOrRemove={onFieldAddOrRemove}
+      excludeIncludeToCard={excludeIncludeToCard}
+      toggleFreeze={toggleFreeze}
+      onChooserApply={onChooserApply}
+      onChooserRestore={onChooserRestore}
+      onFieldDragEnd={onFieldDragEnd}
+      searchInput={searchInput}
+      setSearchInput={setSearchInput}
+    />
+  );
+};
+export default ColumnChooser;

package/src/Widgets/GridToolBar/Components/Setting/ColumnChooser/ColumnChooserView.tsx

@@ -0,0 +1,154 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Button } from "@progress/kendo-react-buttons";
+import {
+  Checkbox,
+  TextBox,
+  InputClearValue,
+  InputSeparator,
+} from "@progress/kendo-react-inputs";
+import DragDropContainer from "./DragDropContext";
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+
+import React from "react";
+import { ChooserColumn } from "../../../data/setting";
+import FactoryRenderer from "../../../../../Renderer";
+
+export type ColumnChooserViewProps = {
+  popupChooserRef: any;
+  allColumns: ChooserColumn[];
+  selectedColumns: ChooserColumn[];
+  searchInput: string;
+  onFieldAddOrRemove: (id: number) => void;
+  excludeIncludeToCard: (id: number) => void;
+  toggleFreeze: (id: number) => void;
+  onChooserApply: () => void;
+  onChooserRestore: () => void;
+  onFieldDragEnd: (result: any) => void;
+  setSearchInput: (searchKey: string) => void;
+};
+
+const ColumnChooserView: React.FC<ColumnChooserViewProps> = (props) => {
+  return (
+    <div className="tmpl-columnchooser-popup" ref={props.popupChooserRef}>
+      <div className="tmpl-chooser-header">
+        <h2>Column Chooser</h2>
+        <div>
+          <Button
+            className="tmpl-button"
+            title="Clear Filter"
+            onClick={props.onChooserRestore}
+          >
+            Restore
+          </Button>
+          <Button
+            className="tmpl-button"
+            title="Clear Filter"
+            onClick={props.onChooserApply}
+          >
+            Apply
+          </Button>
+        </div>
+      </div>
+      <div className="tmpl-chooser-body">
+        <div>
+          <div className="tmpl-search-container">
+            <TextBox
+              className="tmpl-search tmpl-input"
+              value={props.searchInput}
+              placeholder="Type here to search . . ."
+              onChange={(e) => props.setSearchInput(e.target.value as string)}
+              suffix={() =>
+                props.searchInput ? (
+                  <>
+                    <InputSeparator />
+                    <InputClearValue onClick={() => props.setSearchInput("")}>
+                      <FactoryRenderer
+                        name="close"
+                        uiElementType="WIDGET"
+                        widgetType="ICON"
+                        fillMode="clear"
+                        title=""
+                      />
+                    </InputClearValue>
+                  </>
+                ) : (
+                  <></>
+                )
+              }
+            />
+          </div>
+          {props.allColumns.map((column) => (
+            <Checkbox
+              key={column.id}
+              className="tmpl-column tmpl-checkbox"
+              label={column.label}
+              disabled={column.primary}
+              checked={column.primary ? true : column.selected}
+              onChange={() => {
+                if (column.primary !== true) {
+                  props.onFieldAddOrRemove(column.id);
+                }
+              }}
+            />
+          ))}
+        </div>
+        <div>
+          <div className="tmpl-title">
+            <p>
+              {props.selectedColumns.length > 0
+                ? `${props.selectedColumns.length} Column(s) Selected`
+                : `No fields selected`}
+            </p>
+          </div>
+          <DragDropContext onDragEnd={props.onFieldDragEnd}>
+            <Droppable droppableId="droppable">
+              {(provided: any) => (
+                <div {...provided.droppableProps} ref={provided.innerRef}>
+                  {props.selectedColumns.map((column, index) =>
+                    column.primary ? (
+                      <DragDropContainer
+                        key={column.id}
+                        column={column}
+                        excludeIncludeToCard={props.excludeIncludeToCard}
+                        toggleFreeze={props.toggleFreeze}
+                        onFieldAddOrRemove={props.onFieldAddOrRemove}
+                      />
+                    ) : (
+                      <Draggable
+                        key={column.id}
+                        draggableId={column.id.toString()}
+                        index={index}
+                      >
+                        {(provided: any) => (
+                          <div
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                            style={{
+                              userSelect: "none",
+                              ...provided.draggableProps.style,
+                            }}
+                          >
+                            <DragDropContainer
+                              column={column}
+                              excludeIncludeToCard={props.excludeIncludeToCard}
+                              toggleFreeze={props.toggleFreeze}
+                              onFieldAddOrRemove={props.onFieldAddOrRemove}
+                            />
+                          </div>
+                        )}
+                      </Draggable>
+                    )
+                  )}
+                  {provided.placeholder}
+                </div>
+              )}
+            </Droppable>
+          </DragDropContext>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ColumnChooserView;

package/src/Widgets/GridToolBar/Components/Setting/ColumnChooser/DragDropContext.tsx

@@ -0,0 +1,76 @@
+import { Checkbox, RadioButton } from "@progress/kendo-react-inputs";
+import { Icon } from "@progress/kendo-react-common";
+import { ChooserColumn } from "../../../data/setting";
+import FactoryRenderer from "../../../../../Renderer";
+
+type DragDropContainer = {
+  column: ChooserColumn;
+  excludeIncludeToCard: (id: number) => void;
+  toggleFreeze: (id: number) => void;
+  onFieldAddOrRemove: (id: number) => void;
+};
+
+const DragDropContainer = ({
+  column,
+  excludeIncludeToCard,
+  toggleFreeze,
+  onFieldAddOrRemove,
+}: DragDropContainer) => {
+  return (
+    <div className="tmpl-chooser-setting-container" key={column.id}>
+      <div className="tmpl-chooser-setting-label">
+        <Icon name="drag" />
+        <p>{column.label}</p>
+      </div>
+
+      <div>
+        <Checkbox
+          className="tmpl-include-card tmpl-checkbox"
+          label="Include in card"
+          checked={column.includeInCard}
+          onChange={() => {
+            excludeIncludeToCard(column.id);
+          }}
+        />
+        <div>
+          <RadioButton
+            label="Freeze"
+            className="tmpl-radio"
+            disabled={column.primary}
+            checked={column.primary === true ? true : column.isFreezed}
+            onClick={() => {
+              if (column.primary !== true) {
+                toggleFreeze(column.id);
+              }
+            }}
+          />
+        </div>
+
+        {column.primary !== true ? (
+          <FactoryRenderer
+            name="close"
+            uiElementType="WIDGET"
+            widgetType="ICON"
+            fillMode="clear"
+            title=""
+            onClick={() => {
+              if (column.primary !== true) {
+                onFieldAddOrRemove(column.id);
+              }
+            }}
+          />
+        ) : (
+          <FactoryRenderer
+            name="close"
+            uiElementType="WIDGET"
+            widgetType="ICON"
+            fillMode="clear"
+            title=""
+            widgetStyle={{ inline: { visibility: "hidden" } }}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+export default DragDropContainer;

package/src/Widgets/GridToolBar/Components/Setting/Setting.tsx

@@ -0,0 +1,116 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useRef, useState } from "react";
+import SettingView from "./SettingView";
+import ColumnChooser from "./ColumnChooser/ColumnChooser";
+
+import SettingPopup from "./SettingPopup";
+import { ChooserColumn } from "../../data/setting";
+
+export enum DataWidgetType {
+  CARD = "CARD",
+  GRID = "GRID",
+}
+
+export type SettingProps = {
+  visible: boolean;
+  disabled: boolean;
+  disableColumnChooser: boolean;
+  disabledDisplayWidgetType: boolean;
+  columns: ChooserColumn[];
+  uiElementGroupData: Record<string, any>;
+  config: { uiElementGroupId: string };
+  onModelUpdate: (
+    callBack: ((args: any) => void) | null,
+    fieldName: string,
+    value: any
+  ) => void;
+};
+
+const Setting = (props: SettingProps) => {
+  const [togglePopup, setTogglePopup] = useState(false);
+  const [toggleColumnChooser, setToggleColumnChooser] = useState(false);
+
+  const popupRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (togglePopup) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [togglePopup]);
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (popupRef.current && !popupRef.current.contains(event.target as Node)) {
+      setTogglePopup(false);
+    }
+  };
+
+  const onSettingClick = () => {
+    setTogglePopup((prevToggle) => !prevToggle);
+  };
+
+  const onChooserClick = () => {
+    setToggleColumnChooser(
+      (prevToggleColumnChooser) => !prevToggleColumnChooser
+    );
+  };
+
+  const onWidgetTypeClick = () => {
+    const updatedSetting = {
+      ...props.uiElementGroupData?.setting,
+      activeDataWidgetType:
+        props.uiElementGroupData?.setting?.activeDataWidgetType ===
+        DataWidgetType.GRID
+          ? DataWidgetType.CARD
+          : DataWidgetType.GRID,
+    };
+
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      setting: updatedSetting,
+      processing: true,
+    };
+
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+    setTogglePopup(false);
+  };
+
+  return props.visible ? (
+    <div className="tmpl-setting-container" ref={popupRef}>
+      <SettingView disabled={props.disabled} onSettingClick={onSettingClick} />
+      {togglePopup && !props.disabled && (
+        <SettingPopup
+          activeDataWidgetType={
+            props.uiElementGroupData?.setting?.activeDataWidgetType
+          }
+          onSettingClick={onSettingClick}
+          onChooserClick={onChooserClick}
+          onWidgetTypeClick={onWidgetTypeClick}
+        />
+      )}
+      {toggleColumnChooser && !props.disabled && (
+        <ColumnChooser
+          uiElementGroupData={props.uiElementGroupData}
+          toggleColumnChooser={toggleColumnChooser}
+          columns={props.columns}
+          config={props.config}
+          onChooserClick={onChooserClick}
+          onModelUpdate={props.onModelUpdate}
+          setToggleColumnChooser={setToggleColumnChooser}
+          setTogglePopup={setTogglePopup}
+        />
+      )}
+    </div>
+  ) : (
+    <></>
+  );
+};
+export default Setting;

package/src/Widgets/GridToolBar/Components/Setting/SettingPopup.tsx

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { DataWidgetType } from "./Setting";
+
+type SettingPopupProps = {
+  activeDataWidgetType: DataWidgetType;
+  onSettingClick: () => void;
+  onChooserClick: () => void;
+  onWidgetTypeClick: () => void;
+};
+
+const SettingPopup = (props: SettingPopupProps) => {
+  return (
+    <div className="tmpl-setting-popup">
+      <div onClick={props.onChooserClick}>Column Chooser</div>
+      <div onClick={props.onWidgetTypeClick}>
+        {props.activeDataWidgetType === DataWidgetType.CARD
+          ? "Change To Grid View"
+          : "Change To Card View"}
+      </div>
+    </div>
+  );
+};
+export default SettingPopup;

package/src/Widgets/GridToolBar/Components/Setting/SettingView.tsx

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import FactoryRenderer from "../../../../Renderer";
+
+export type SettingViewProps = {
+  disabled: boolean;
+  onSettingClick: () => void;
+};
+
+const SettingView = (props: SettingViewProps) => {
+  return (
+    <FactoryRenderer
+      disabled={props.disabled}
+      rootStyle={{ className: "tmpl-setting" }}
+      widgetStyle={{ className: "tmpl-button", inline: { width: "100%" }  }}
+      onClick={props.onSettingClick}
+      title="Setting"
+      name="setting"
+      uiElementType="WIDGET"
+      widgetType="ICON"
+    />
+  );
+};
+export default SettingView;