es-grid-template 1.2.6 → 1.2.8

package/es/grid-component/ColumnsChoose.js

@@ -536,7 +536,8 @@ export const ColumnsChoose = props => {
     trigger: "click",
     open: clicked,
     onOpenChange: handleClickChange,
-    arrow: false
+    arrow: false,
+    zIndex: 1065
   }, /*#__PURE__*/React.createElement(Tooltip, {
     arrow: false,
     title: 'Cài đặt'

package/es/grid-component/ContextMenu.js

@@ -94,7 +94,8 @@ const ContextMenu = props => {
           items: contextMenuItems,
           style: {
             minWidth: 200,
-            maxHeight: pos.viewportHeight - 20
+            maxHeight: pos.viewportHeight - 20,
+            width: 'fit-content'
           },
           rootClassName: 'popup-context-menu',
           onClick: e => {

package/es/grid-component/EditableCell.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ColumnEditType, IFormat } from "./type";
+import type { ColumnTable, IFormat } from "./type";
 import type { EditType } from "rc-master-ui";
 interface EditableCellProps<DataType> extends React.HTMLAttributes<HTMLElement> {
     t?: any;
@@ -10,7 +10,7 @@ interface EditableCellProps<DataType> extends React.HTMLAttributes<HTMLElement>
     record: DataType;
     index: number;
     format?: IFormat;
-    column: ColumnEditType<DataType>;
+    column: ColumnTable<DataType>;
     indexRow: number;
     indexCol: number;
     rowKey: any;

package/es/grid-component/EditableCell.js

@@ -267,15 +267,15 @@ const EditableCell = props => {
         const columnsTable = rr.map(colSelect => {
           return {
             title: colSelect.headerTemplate ? colSelect.headerTemplate : t ? t(colSelect.headerText) : colSelect.headerText,
-            dataIndex: colSelect.dataIndex,
+            dataIndex: colSelect.field ?? colSelect.dataIndex,
             key: colSelect.dataIndex,
             render: colSelect.template ? (text, recd, ind) => /*#__PURE__*/React.createElement(React.Fragment, null, colSelect.template?.({
               value: text,
               rowData: recd,
               column: colSelect,
-              field: colSelect.dataIndex,
+              field: colSelect.field,
               index: ind,
-              [colSelect.dataIndex]: text
+              [colSelect.field]: text
             })) : undefined,
             width: colSelect.width,
             ellipsis: true,
@@ -323,8 +323,9 @@ const EditableCell = props => {
             width: '100%',
             height: '100%'
           },
-          defaultOpen: column.field === cellEditing?.column.field,
-          autoFocus: true,
+          defaultOpen: column.field === cellEditing?.column.field
+          // autoFocus={true}
+          ,
           placeholder: t ? t('Select') : 'Select',
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
@@ -397,8 +398,10 @@ const EditableCell = props => {
           showSearch: true,
           mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
           valueSelectAble: true,
-          defaultOpen: column.field === cellEditing?.column.field,
-          autoFocus: true,
+          defaultOpen: column.field === cellEditing?.column.field
+          // autoFocus={true}
+          ,
+
           style: {
             width: '100%',
             height: '100%'
@@ -448,8 +451,9 @@ const EditableCell = props => {
             });
           },
           showSearch: true,
-          defaultOpen: column.field === cellEditing?.column.field,
-          autoFocus: true,
+          defaultOpen: column.field === cellEditing?.column.field
+          // autoFocus={true}
+          ,
           mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
           valueSelectAble: true,
           style: {
@@ -528,8 +532,9 @@ const EditableCell = props => {
           treeData: newTreeData,
           placeholder: t ? t('Select') : 'Select',
           treeDefaultExpandAll: true,
-          defaultOpen: column.field === cellEditing?.column.field,
-          autoFocus: true,
+          defaultOpen: column.field === cellEditing?.column.field
+          // autoFocus={true}
+          ,
           virtual: true,
           allowClear: true
           // maxTagTextLength={column?.editSelectSettings?.showItems}

package/es/grid-component/InternalTable.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { Resizable } from "react-resizable";
 import 'react-resizable/css/styles.css';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { addRowIdArray,
+import { addRowIdArray, findItemByKey,
 // convertFlatColumn,
 removeColumns,
 // addRowIdArray,
@@ -19,7 +19,10 @@ import useColumns from "./hooks/useColumns";
 import "./styles.scss";
 import { flatColumns2 } from "./hooks/columns";
 import Group from "./table/Group";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
 dayjs.extend(customParseFormat);
+const MySwal = withReactContent(Swal);
 
 // const ASCEND = 'ascend';
 // const DESCEND = 'descend';
@@ -77,6 +80,8 @@ const InternalTable = props => {
     groupAble,
     groupSetting,
     groupColumns,
+    commandClick,
+    commandSettings,
     ...rest
   } = props;
   const rowKey = React.useMemo(() => {
@@ -202,6 +207,126 @@ const InternalTable = props => {
     // setMergedData(newData)
     onDataChange?.(newData);
   };
+  const triggerCommandClick = args => {
+    const {
+      id,
+      rowId,
+      rowData,
+      index
+    } = args;
+    const tmpData = [...dataSource];
+    if (id === 'DELETE') {
+      // bật modal confirm
+      if (commandSettings && commandSettings.confirmDialog) {
+        MySwal.fire({
+          title: t ? t('Confirm') : 'Confirm',
+          text: t ? t('Do you want to delete item?') : 'Do you want to delete item?',
+          // icon: 'warning',
+          allowOutsideClick: false,
+          showCancelButton: true,
+          confirmButtonText: t ? t('Delete') : 'Delete',
+          cancelButtonText: t ? t('Cancel') : 'Cancel',
+          customClass: {
+            confirmButton: 'be-button btn-primary',
+            cancelButton: 'be-button btn-danger ms-1'
+          },
+          buttonsStyling: false
+        }).then(async result => {
+          if (result.value) {
+            if (!commandSettings || commandSettings && commandSettings.client !== false) {
+              // client
+
+              // kiểm tra dòng hiện tại có parent
+
+              let newData = [];
+              if (rowData?.parentId) {
+                const parent = findItemByKey(dataSource, rowKey, rowData.parentId);
+                const childData = parent?.children ? [...parent.children] : [];
+                const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
+                childData.splice(Number(findIndex), 1);
+                const newRowData = {
+                  ...parent,
+                  children: childData
+                };
+                // const newDataSource =  updateArrayByKey(tmpData, newRowData, rowKey as string)
+                newData = updateArrayByKey(tmpData, newRowData, rowKey);
+              } else {
+                tmpData.splice(Number(index), 1);
+                newData = [...tmpData];
+              }
+              if (commandClick) {
+                commandClick({
+                  id,
+                  rowId: rowData.rowId,
+                  rowData,
+                  index,
+                  // rows: [...tmpData]
+                  rows: [...newData]
+                });
+              }
+            } else {
+              // server ~~ không làm gì
+              if (commandClick) {
+                commandClick({
+                  id,
+                  rowId: rowData.rowId,
+                  rowData,
+                  index,
+                  rows: [...dataSource]
+                });
+              }
+            }
+          } else if (result.dismiss === MySwal.DismissReason.cancel) {}
+        });
+      } else {
+        // -------------------
+
+        if (!commandSettings || commandSettings && commandSettings.client !== false) {
+          // client
+
+          let newData2 = [];
+          if (rowData?.parentId) {
+            const parent = findItemByKey(dataSource, rowKey, rowData.parentId);
+            const childData = parent?.children ? [...parent.children] : [];
+            const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
+            childData.splice(Number(findIndex), 1);
+            const newRowData = {
+              ...parent,
+              children: childData
+            };
+            newData2 = updateArrayByKey(tmpData, newRowData, rowKey);
+          } else {
+            tmpData.splice(Number(index), 1);
+            newData2 = [...tmpData];
+          }
+          if (commandClick) {
+            commandClick({
+              id,
+              rowId,
+              rowData,
+              index,
+              rows: [...newData2]
+            });
+          }
+        } else {
+          // server
+          if (commandClick) {
+            commandClick({
+              id,
+              rowId,
+              rowData,
+              index,
+              rows: [...dataSource]
+            });
+          }
+        }
+      }
+    } else {
+      if (commandClick) {
+        commandClick(args);
+      }
+    }
+  };
   const triggerPaste = (pastedRows, pastedColumnsArray, newData) => {
     const handlePasteCallback = callbackData => {
       const newDataUpdate = updateData(dataSource, callbackData, rowKey);
@@ -257,7 +382,8 @@ const InternalTable = props => {
     clickHeaderToSort: clickHeaderToSort,
     groupSetting: groupSetting,
     groupAble: groupAble,
-    groupColumns: groupColumns
+    groupColumns: groupColumns,
+    commandClick: triggerCommandClick
   }));
 };
 export default InternalTable;

package/es/grid-component/TableGrid.js

@@ -20,6 +20,7 @@ import Pagination from "rc-master-ui/es/pagination";
 import ComponentSpinner from "./LoadingSpinner";
 import { ColumnsChoose } from "./ColumnsChoose";
 import useMergedState from "rc-util/es/hooks/useMergedState";
+import AdvanceFilter from "./AdvanceFilter";
 const convertFilters = filters => {
   const result = [];
   filters.forEach(({
@@ -108,6 +109,7 @@ const TableGrid = props => {
     recordDoubleClick,
     toolbarItems,
     showColumnChoose,
+    showAdvanceFilter,
     onFilter,
     selectionSettings,
     rowSelection,
@@ -399,7 +401,8 @@ const TableGrid = props => {
         style: {
           display: 'flex',
           justifyContent: 'space-between',
-          alignItems: 'center'
+          alignItems: 'center',
+          gap: '.75rem'
         }
       }, groupAble && groupToolbar?.(), toolbarItems && toolbarItems?.length > 0 && /*#__PURE__*/React.createElement("div", {
         style: {
@@ -416,7 +419,8 @@ const TableGrid = props => {
         style: {
           display: 'flex',
           justifyContent: 'space-between',
-          alignItems: 'center'
+          alignItems: 'center',
+          gap: '.75rem'
         }
       }, pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' && /*#__PURE__*/React.createElement(Pagination, _extends({
         showSizeChanger: true,
@@ -431,6 +435,11 @@ const TableGrid = props => {
         t: t,
         columnsGroup: groupColumns,
         triggerChangeColumns: triggerChangeColumns
+      }), showAdvanceFilter && /*#__PURE__*/React.createElement(AdvanceFilter, {
+        columns: columns,
+        t: t
+        // columnsGroup={groupColumns}
+        // triggerChangeColumns={triggerChangeColumns}
       }))));
     },
     expandable: {

package/es/grid-component/checkbox-control/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+type OptionType = {
+    value: any;
+    label: string;
+    [key: string]: any;
+};
+type Props<T> = {
+    options: T[];
+    value: any[];
+    onChange?: (value: any[]) => void;
+};
+declare const CheckboxControl: <T extends OptionType>(props: Props<T>) => React.JSX.Element;
+export default CheckboxControl;

package/es/grid-component/checkbox-control/index.js

@@ -0,0 +1,40 @@
+import React, { useMemo } from "react";
+import { Checkbox } from "rc-master-ui";
+const CheckboxControl = props => {
+  const {
+    options,
+    value,
+    onChange
+  } = props;
+  const selected = useMemo(() => {
+    return value ? value : [];
+  }, [value]);
+  const list = useMemo(() => {
+    return options ? options : [];
+  }, [options]);
+  const onChangeValue = val => {
+    const findIndex = selected.findIndex(it => it === val);
+    if (findIndex > -1) {
+      const newVal = selected.filter(it => it !== val);
+      onChange?.(newVal);
+    } else {
+      const newVal = [...selected, val];
+      onChange?.(newVal);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "d-flex flex-column gap-50",
+    style: {}
+  }, list.map((it, index) => {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "d-flex align-items-center"
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      checked: selected.includes(it.value),
+      type: "checkbox",
+      className: "cursor-pointer me-50",
+      onChange: () => onChangeValue(it.value)
+    }), /*#__PURE__*/React.createElement("span", null, it.label));
+  }));
+};
+export default CheckboxControl;

package/es/grid-component/hooks/columns/index.d.ts

@@ -1,9 +1,9 @@
-import type { ColumnType, IFormat } from "../../type";
+import type { ColumnTable, ColumnType, IFormat } from "../../type";
 import React from "react";
 import type { TableLocale } from "rc-master-ui/lib/table/interface";
 import type { ColumnsTable } from "../../type";
 export declare function flatColumns<RecordType>(columns: ColumnsTable<RecordType>, parentKey?: string): ColumnsTable<RecordType>;
 export declare function flatColumns2<RecordType>(columns: ColumnsTable<RecordType>): ColumnsTable<RecordType>;
 export declare const getValueCell: <T>(column: ColumnType<T>, value: any, format?: IFormat) => any;
-export declare const renderContent: (column: any, value: any, record: any, index: number, format?: IFormat) => React.JSX.Element;
+export declare const renderContent: (column: ColumnTable, value: any, record: any, index: number, format?: IFormat) => React.JSX.Element;
 export declare const renderFilter: <RecordType>(column: ColumnType<RecordType>, selectedKeys: string[], setSelectedKeys: any, confirm: any, visible: boolean, searchValue: string, setSearchValue: any, dataSourceFilter: any[], buddhistLocale: any, locale?: TableLocale, t?: any) => React.JSX.Element;

package/es/grid-component/hooks/columns/index.js

@@ -118,7 +118,12 @@ export const getValueCell = (column, value, format) => {
 export const renderContent = (column, value, record, index, format) => {
   const cellValue = value instanceof Date ? getDateString(column, value) : value;
   const content = getValueCell(column, cellValue, format);
-  return /*#__PURE__*/React.createElement(Fragment, null, column?.template ? typeof column.template === "function" ? column.template(value, record, index) : column.template : content);
+  return /*#__PURE__*/React.createElement(Fragment, null, column?.template ? typeof column.template === "function" ? column.template({
+    value,
+    index,
+    rowData: record,
+    field: column.field
+  }) : column.template : content);
 };
 export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t) => {
   const type = getTypeFilter(column);
@@ -364,8 +369,9 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
         className: 'mb-1'
       }, /*#__PURE__*/React.createElement(Select
       // options={translateOption(numberOperator, t)}
+      // options={find ? options : column.source ?? []}
       , {
-        options: find ? options : column.source ?? [],
+        options: column.source ? column.source : options ?? [],
         style: {
           width: '100%',
           marginBottom: 8

package/es/grid-component/hooks/useColumns.js

@@ -164,7 +164,10 @@ const useColumns = config => {
           // title: () => (<span>{t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title}</span>),
           ellipsis: col.ellipsis !== false,
           align: col.textAlign ?? col.align,
-          fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed
+          fixed: col.fixedType ?? col.fixed,
+          isSummary: col.isSummary ?? col.haveSum,
+          hidden: col.hidden ?? col.visible === false
+          // hidden: true
         };
         if (transformedColumn.children && transformedColumn.children?.length) {
           return {
@@ -269,7 +272,7 @@ const useColumns = config => {
             }
             return renderContent(col, value, record, rowIndex, format);
           },
-          hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? col.hidden : groupAble && groupColumns && groupColumns.includes(col.field) ? true : col.hidden
+          hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? transformedColumn.hidden : groupAble && groupColumns && groupColumns.includes(col.field) ? true : transformedColumn.hidden
         };
       });
     };

package/es/grid-component/hooks/utils.d.ts

@@ -1,7 +1,7 @@
 import type * as React from "react";
 import dayjs from "dayjs";
 import type { EditType, IColumnType, TypeFilter } from "rc-master-ui";
-import type { ColumnEditType, ColumnsType, ColumnTable, GetRowKey } from "../type";
+import type { ColumnsType, ColumnTable, GetRowKey } from "../type";
 import type { SelectionSettings } from "../type";
 import type { AnyObject } from "../type";
 import type { Key } from "react";
@@ -26,8 +26,8 @@ export declare const customWeekStartEndFormat: (value: any, weekFormat: string)
 export declare const getTypeFilter: (col: ColumnTable<any>) => TypeFilter;
 export declare const updateArrayByKey: (arr: any[], element: any, key: string) => any[];
 export declare const getDateString: <T>(column: ColumnTable<T>, value: any) => string;
-export declare const getEditType: <T>(column: ColumnEditType<T>, rowData?: any) => EditType;
-export declare const isDisable: <T>(column: ColumnEditType<T>, rowData?: any) => boolean;
+export declare const getEditType: <T>(column: ColumnTable<T>, rowData?: any) => EditType;
+export declare const isDisable: <T>(column: ColumnTable<T>, rowData?: any) => boolean;
 export declare const checkFieldKey: (key: string | undefined) => string;
 export declare const convertLabelToTitle: (data: any[]) => any[];
 export declare const convertArrayWithIndent: (inputArray: any[], parentIndent?: number) => any[];
@@ -64,8 +64,9 @@ export declare function addRows8(arr: any, n: number): {
 };
 export declare const transformColumns: <RecordType>(cols: ColumnsTable<RecordType>, convertColumns: any[], t?: any) => ColumnsTable<RecordType>;
 export declare const transformColumns1: <RecordType>(cols: ColumnsTable<RecordType>, sortMultiple?: boolean) => ColumnsTable<RecordType>;
-export declare const removeColumns: <RecordType>(columns: ColumnsTable<RecordType>, groupColumns: string[]) => ColumnsTable<RecordType>;
+export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType>[], groupColumns: string[]) => ColumnsTable<RecordType>;
 export declare const convertFlatColumn: (array: ColumnsTable) => ColumnsTable[];
 export declare const convertColumns: <RecordType>(cols: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
 export declare const checkChild: (inputArray: any[]) => boolean;
-export declare const isEditable: <RecordType>(column: ColumnEditType, rowData: RecordType) => boolean | ((rowData: any) => boolean);
+export declare const isEditable: <RecordType>(column: ColumnTable, rowData: RecordType) => boolean | ((rowData: any) => boolean);
+export declare const isArraysEqual: (arr1: any[], arr2: any[]) => boolean;

package/es/grid-component/hooks/utils.js

@@ -704,7 +704,7 @@ export const removeColumns = (columns, groupColumns) => {
     const newCol = {
       ...column
     };
-    if (newCol.children) {
+    if (newCol?.children && newCol?.children.length > 0) {
       newCol.children = removeColumns(newCol.children, groupColumns);
     }
     return newCol;
@@ -737,7 +737,7 @@ export const convertColumns = cols => {
       // title: () => (<span>{t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title}</span>),
       ellipsis: col.ellipsis !== false,
       align: col.textAlign ?? col.align,
-      fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed
+      fixed: col.fixedType ?? col.fixed
     };
     if (transformedColumn.children && transformedColumn.children?.length) {
       return {
@@ -778,4 +778,10 @@ export const isEditable = (column, rowData) => {
     return column.editEnable(rowData);
   }
   return column?.editEnable;
+};
+export const isArraysEqual = (arr1, arr2) => {
+  if (arr1.length !== arr2.length) {
+    return false;
+  }
+  return arr1.every((element, index) => element === arr2[index]);
 };

package/es/grid-component/styles.scss

@@ -205,6 +205,8 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
         border-bottom: 1px solid $tableBorderColor;
         //background: #fff;
         font-weight: 500;
+        //line-height: 23px;
+        //height: 40px;
       }
     }
 
@@ -336,10 +338,18 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 .#{$prefix}-table-wrapper {
 
   .#{$prefix}-table.#{$prefix}-table-small {
-    .#{$prefix}-table-selection-column{
-      //padding: 8px 8px;
-      //padding: 6px 8px;
+    .ui-rc-table-thead {
+      >tr >th.#{$prefix}-table-selection-column{
+        //padding-block: 7px;
+        padding: 0;
+        //padding: 6px 8px;
+      }
     }
+    //.#{$prefix}-table-selection-column{
+    //  padding-block: 7px;
+    //  padding: 0;
+    //  //padding: 6px 8px;
+    //}
   }
 
   &.grid-editable {