@boarteam/boar-pack-common-frontend 2.0.1

package/src/components/Table/BulkEditButton.tsx

@@ -0,0 +1,160 @@
+import { ProColumns } from "@ant-design/pro-table";
+import React, { useEffect, useState } from "react";
+import { Button, Checkbox, Modal, Popconfirm } from "antd";
+import { LoadingOutlined } from "@ant-design/icons";
+import { columnsToDescriptionItemProps } from "../Descriptions";
+import { useForm } from "antd/lib/form/Form";
+import { ProDescriptions } from "@ant-design/pro-components";
+import { TGetAllParams } from "./tableTypes";
+import { createStyles } from "antd-style";
+
+type TBulkEditConfig<Entity> = { type: 'records', value: Entity[], count: number } | { type: 'query', value: Record<string, any>, count: number } | null;
+
+const useStyles = createStyles(() => {
+  return {
+    popconfirm: {
+      '.ant-popconfirm-description': {
+        marginTop: '0 !important',
+      },
+    }
+  }
+})
+
+const BulkEditDialog =  <Entity extends Record<string | symbol, any>>(
+  {
+    columns,
+    idColumnName,
+    config,
+    onClose,
+    onSubmit,
+  }: {
+    idColumnName: string & keyof Entity | (string & keyof Entity)[],
+    columns: ProColumns<Entity>[],
+    config: TBulkEditConfig<Entity>,
+    onClose: () => void,
+    onSubmit: (value: Partial<Entity>) => Promise<void>
+  }) => {
+  const [loading, setLoading] = useState(false);
+  const sections = columnsToDescriptionItemProps(columns, 'General');
+  const { styles } = useStyles();
+
+  const [editableKeys, setEditableKeys] = useState<Set<string>>(new Set);
+
+  const [form] = useForm();
+  useEffect(() => {
+    setEditableKeys(new Set);
+    form.resetFields();
+  }, [config]);
+
+  const handleCheckboxChange = (dataIndex: string, checked: boolean) => {
+    setEditableKeys(prev => {
+      const next = new Set(prev);
+      checked ? next.add(dataIndex) : next.delete(dataIndex);
+      return next;
+    });
+  };
+
+  const handleUpdate = async () => {
+    await form.validateFields();
+    setLoading(true);
+    await onSubmit(form.getFieldsValue()).finally(() => setLoading(false));
+    onClose();
+  };
+
+  return (
+    <Modal
+      title={`Updating ${config?.count} ${config?.count === 1 ? 'record' : 'records'}...`}
+      open={config !== null}
+      onCancel={onClose}
+      width='80%'
+      footer={[
+        <Popconfirm
+          overlayClassName={styles.popconfirm}
+          title={false}
+          description={`Are you sure you want to update ${config?.count} ${config?.count === 1 ? 'record' : 'records'}?`}
+          onConfirm={() => handleUpdate()}
+          okText="Yes"
+          cancelText="No"
+        >
+          <Button key='submit' type="primary">Update {loading && <LoadingOutlined />}</Button>
+        </Popconfirm>
+      ]}
+    >
+      {sections.map((section) => {
+        return (
+          <ProDescriptions<Entity>
+            extra={'Click on the field first and then type a new desired value.'}
+            key={Array.isArray(idColumnName) ? idColumnName.join('-') : idColumnName}
+            title={section.title as React.ReactNode}
+            size={"small"}
+            bordered
+            column={3}
+            style={{ marginBottom: 20 }}
+            labelStyle={{ width: '15%' }}
+            contentStyle={{ width: '25%' }}
+            editable={{
+              form,
+              editableKeys: [...editableKeys],
+              actionRender: () => [],
+            }}
+            columns={section.columns.filter(column => column?.editable === undefined).map(column => ({
+              ...column,
+              render: (...params) => !editableKeys.has(column.dataIndex) ? '(This field will not be changed)' : column.render(...params),
+              editable: false,
+              title: (
+                <Checkbox
+                  checked={editableKeys.has(column.dataIndex)}
+                  onChange={e => handleCheckboxChange(column.dataIndex, e.target.checked)}
+                >
+                  {column.title}
+                </Checkbox>
+              ),
+            }))}
+          />
+        )
+      })}
+    </Modal>
+  );
+}
+
+const BulkEditButton = <Entity extends Record<string | symbol, any>>(
+  {
+    selectedRecords,
+    lastRequest,
+    allSelected,
+    columns,
+    idColumnName,
+    onSubmit,
+  } : {
+    selectedRecords: Entity[],
+    lastRequest: [TGetAllParams & Record<string, string | number>, any] | [],
+    idColumnName: string & keyof Entity | (string & keyof Entity)[],
+    allSelected: boolean,
+    columns: ProColumns<Entity>[],
+    onSubmit: (value: Partial<Entity>) => Promise<void>
+  }) => {
+  const [bulkEditConfig, setBulkEditConfig] = useState<TBulkEditConfig<Entity>>(null);
+  const recordsCount = allSelected ? lastRequest[1].total : selectedRecords.length;
+
+  return (<>
+    <Button
+      disabled={recordsCount === 0}
+      onClick={() => setBulkEditConfig(
+        !allSelected
+          ? { type: 'records', value: selectedRecords, count: selectedRecords.length }
+          : { type: 'query', value: lastRequest[0], count: lastRequest[1].total }
+      )}
+    >
+      {recordsCount > 0 ? `Edit ${recordsCount} ${recordsCount === 1 ? 'Record' : 'Records'}` : 'Bulk Edit'}
+    </Button>
+    <BulkEditDialog<Entity>
+      config={bulkEditConfig}
+      onClose={() => setBulkEditConfig(null)}
+      columns={columns}
+      idColumnName={idColumnName}
+      onSubmit={onSubmit}
+    />
+  </>);
+};
+
+export default BulkEditButton;

package/src/components/Table/Table.tsx

@@ -0,0 +1,400 @@
+import ProTable, { ActionType } from "@ant-design/pro-table";
+import React, { useEffect, useRef, useState } from "react";
+import { Button, Popover, Space, Tooltip, message } from "antd";
+import { DeleteOutlined, PlusOutlined, QuestionCircleTwoTone, StopOutlined } from "@ant-design/icons";
+import { FormattedMessage, useIntl } from "react-intl";
+import { flushSync } from "react-dom";
+import { applyKeywordToSearch, buildJoinFields, collectFieldsFromColumns, getFiltersSearch } from "./tableTools";
+import { TFilterParams, TFilters, TGetAllParams, TSort, TTableProps } from "./tableTypes";
+import useColumnsSets from "./useColumnsSets";
+import DescriptionsCreateModal from "../Descriptions/DescriptionsCreateModal";
+import BulkEditButton from "./BulkEditButton";
+import _ from "lodash";
+import BulkDeleteButton from "./BulkDeleteButton";
+import { createStyles } from "antd-style";
+
+let creatingRecordsCount = 0;
+
+export const KEY_SYMBOL = Symbol('key');
+const NEW_RECORD = 'NEW_RECORD';
+
+export function getNewId(): string {
+  return NEW_RECORD + creatingRecordsCount++;
+}
+
+export function isRecordNew(record: Record<string | symbol, any>): boolean {
+  return record[KEY_SYMBOL]?.startsWith?.(NEW_RECORD) || record.id?.startsWith?.(NEW_RECORD) || false;
+}
+
+const useStyles = createStyles(() => {
+  return {
+    table: {
+      '.ant-pro-table-alert': {
+        display: 'none',
+      },
+    }
+  }
+})
+
+const Table = <Entity extends Record<string | symbol, any>,
+  CreateDto = Entity,
+  UpdateDto = Entity,
+  TEntityParams = {},
+  TPathParams extends Record<string, string | number> = {},
+  TKey = string,
+  >(
+  {
+    getAll,
+    onCreate,
+    onUpdate,
+    onUpdateMany,
+    onDelete,
+    onDeleteMany,
+    pathParams,
+    idColumnName = 'id',
+    entityToCreateDto,
+    entityToUpdateDto,
+    createNewDefaultParams,
+    afterSave,
+    actionRef: actionRefProp,
+    editable,
+    defaultSort = ['createdAt', 'DESC'],
+    searchableColumns = [],
+    viewOnly = false,
+    columns = [],
+    columnsSets,
+    columnsState: managedColumnsState,
+    columnsSetSelect: managedColumnsSetSelect,
+    popupCreation = false,
+    toolBarRender,
+    params,
+    ...rest
+  }: TTableProps<Entity,
+    CreateDto,
+    UpdateDto,
+    TEntityParams,
+    TPathParams>
+) => {
+  const actionRefComponent = useRef<ActionType>();
+  const actionRef = actionRefProp || actionRefComponent;
+  const [createPopupData, setCreatePopupData] = useState<Partial<Entity> | undefined>();
+  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
+  const [selectedRecords, setSelectedRecords] = useState<Entity[]>([]);
+  const [lastRequest, setLastRequest] = useState<[TGetAllParams & TPathParams, any] | []>([]);
+  const [allSelected, setAllSelected] = useState(false);
+  const { styles } = useStyles();
+  const [messageApi, contextHolder] = message.useMessage();
+
+  const intl = useIntl();
+
+  useEffect(() => {
+    actionRef?.current?.reload();
+  }, [JSON.stringify(pathParams), JSON.stringify(params)]);
+
+  const {
+    columnsSetSelect: localColumnsSetSelect,
+    columnsState: localColumnsState,
+  } = useColumnsSets<Entity>({
+    columns,
+    columnsSets,
+  });
+
+  const columnsState = managedColumnsState ?? localColumnsState;
+  const columnsSetSelect = managedColumnsSetSelect ?? localColumnsSetSelect;
+
+  const request = async (
+    params: TFilterParams,
+    sort: TSort = {},
+    filters: TFilters = {},
+  ) => {
+    const {
+      current,
+      pageSize,
+      keyword,
+      baseFilters,
+      join,
+      sortMap,
+      ...filtersFromSearchForm
+    } = params;
+
+    const queryParams: TGetAllParams & TPathParams = {
+      ...pathParams,
+      page: current,
+      limit: pageSize,
+    };
+
+    const sortBy = Object
+      .entries(sort)
+      .reduce<string[]>(
+        (data: string[], [key, direction]) => {
+          data.push(`${sortMap?.[key] || key},${direction === 'ascend' ? 'ASC' : 'DESC'}`);
+          return data;
+        },
+        []
+      );
+    if (!sortBy.length && defaultSort) {
+      sortBy.push(defaultSort.join(','));
+    }
+    queryParams.sort = sortBy;
+
+    let search = getFiltersSearch({
+      baseFilters,
+      filters: {
+        ...filters,
+        ...filtersFromSearchForm,
+      },
+      searchableColumns,
+    });
+    search = applyKeywordToSearch(search, searchableColumns!, columnsState.value!, keyword);
+    queryParams.s = JSON.stringify(search);
+
+    const { joinSelect, joinFields } = buildJoinFields(join);
+    queryParams.join = joinSelect;
+
+    queryParams.fields = columns && collectFieldsFromColumns(
+      columns,
+      idColumnName,
+      joinFields,
+    ) || [];
+
+    const result = await getAll(queryParams);
+
+    setSelectedRecords([]);
+    setLastRequest([
+      queryParams,
+      result,
+    ]);
+    return result;
+  }
+
+  const createButton = <Button
+    size={rest.size}
+    type="primary"
+    key="create"
+    onClick={() => {
+      if (popupCreation) {
+        setCreatePopupData(createNewDefaultParams);
+      } else {
+        actionRef?.current?.addEditRecord({
+          [KEY_SYMBOL]: getNewId(),
+          ...createNewDefaultParams,
+        }, {
+          position: 'top',
+        });
+      }
+    }}
+  >
+    <PlusOutlined /> <FormattedMessage id={'table.newButton'} />
+  </Button>;
+
+  return (<>
+    <ProTable<Entity, TEntityParams & TFilterParams>
+      actionRef={actionRef}
+      className={styles.table}
+      request={request}
+      rowKey={record => record[KEY_SYMBOL] ?? (Array.isArray(idColumnName) ? idColumnName.map(colName => record[colName]).join('-') : record[idColumnName])}
+      options={{
+        fullScreen: true,
+        reload: true,
+        search: {
+          allowClear: true,
+        },
+        density: true,
+        setting: {
+          draggable: false,
+          checkable: true,
+          checkedReset: true,
+          listsHeight: 500,
+        },
+      }}
+      bordered
+      search={false}
+      editable={{
+        type: 'multiple',
+        editableKeys,
+        onChange: setEditableRowKeys,
+        async onSave(
+          id,
+          record,
+          origin,
+          newLine,
+        ) {
+          if (newLine) {
+            await onCreate?.({
+              ...pathParams,
+              requestBody: entityToCreateDto(record),
+            });
+          } else {
+            await onUpdate({
+              ...pathParams,
+              ...record,
+              requestBody: entityToUpdateDto({
+                ...pathParams,
+                ...record,
+              }),
+            })
+          }
+
+          if (typeof afterSave === 'function') {
+            await afterSave(record);
+          }
+
+          flushSync(() => {
+            actionRef?.current?.reload();
+          });
+        },
+        async onCancel(
+          id,
+          record,
+          origin,
+        ) {
+          if (record) {
+            Object.assign(record, origin);
+          }
+        },
+        async onDelete(id, row) {
+          await onDelete({ ...row, ...pathParams });
+        },
+        deletePopconfirmMessage: intl.formatMessage({ id: 'table.deletePopconfirmMessage' }),
+        onlyAddOneLineAlertMessage: intl.formatMessage({ id: 'table.onlyAddOneLineAlertMessage' }),
+        cancelText: <Tooltip title={intl.formatMessage({ id: 'table.cancelText' })}><StopOutlined /></Tooltip>,
+        deleteText: <Tooltip title={intl.formatMessage({ id: 'table.deleteText' })}><DeleteOutlined /></Tooltip>,
+        saveText: <Button size={"small"} type={"primary"}><FormattedMessage id={'table.saveText'} /></Button>,
+        ...editable,
+      }}
+      toolBarRender={(...args) => [
+        ...toolBarRender && toolBarRender(...args) || [],
+        columnsSetSelect?.() || null,
+        !viewOnly && onUpdateMany
+          ? (
+            <BulkEditButton
+              selectedRecords={selectedRecords}
+              lastRequest={lastRequest}
+              allSelected={allSelected}
+              columns={columns}
+              idColumnName={idColumnName}
+              // @ts-ignore
+              onSubmit={values => onUpdateMany({
+                ...pathParams,
+                ...lastRequest[0],
+                requestBody: {
+                  updateValues: _.pickBy(
+                    // @ts-ignore
+                    entityToUpdateDto({
+                      ...pathParams,
+                      ...values,
+                    }),
+                    (value, key) =>  _.has(values, key),
+                  ),
+                  records: allSelected ? [] : selectedRecords,
+                },
+              }).then(() => {
+                messageApi.open({
+                  type: 'success',
+                  content: 'Operation Successful',
+                });
+                actionRef?.current?.reload();
+              })}
+            />
+          )
+          : <></>,
+        !viewOnly && onDeleteMany
+          ? (
+            <BulkDeleteButton
+              selectedRecords={selectedRecords}
+              lastRequest={lastRequest}
+              allSelected={allSelected}
+              // @ts-ignore
+              onDelete={() => onDeleteMany({
+                ...pathParams,
+                ...lastRequest[0],
+                requestBody: {
+                  records: allSelected ? [] : selectedRecords,
+                },
+              }).then(() => {
+                messageApi.open({
+                  type: 'success',
+                  content: 'Operation Successful',
+                });
+                actionRef?.current?.reload();
+              })}
+            />
+          )
+          : <></>,
+        !viewOnly && createButton || null,
+      ]}
+      columns={columns}
+      defaultSize='small'
+      columnsState={columnsState}
+      params={params}
+      {
+        ...(
+          !viewOnly && (onUpdateMany || onDeleteMany)
+            ? {
+              rowSelection: {
+                selectedRowKeys: selectedRecords.map(record => Array.isArray(idColumnName) ? idColumnName.map(colName => record[colName]).join('-') : record[idColumnName]),
+                selections: [
+                  {
+                    key: 'all',
+                    text: (
+                      <Space>
+                        Select ALL
+                        <Popover
+                          content={(
+                            <div style={{ width: '100%' }}>
+                              This includes records from ALL pages of the table.
+                            </div>
+                          )}
+                          title={'Select All'}
+                          trigger={['hover', 'click']}
+                          zIndex={1080}
+                        >
+                          <QuestionCircleTwoTone />
+                        </Popover>
+                      </Space>
+                    ),
+                    onSelect: () => {
+                      setSelectedRecords(lastRequest[1].data);
+                      setAllSelected(true);
+                    },
+                  },
+                ],
+                onChange: (rowKeys, records) => {
+                  setSelectedRecords(records);
+                  allSelected && setAllSelected(false);
+                },
+              }
+            }
+            : {}
+        )
+      }
+      {...rest}
+    />
+    <DescriptionsCreateModal<Entity>
+      data={createPopupData}
+      onClose={() => setCreatePopupData(undefined)}
+      onSubmit={async (data) => {
+        try {
+          await onCreate?.({
+            ...pathParams,
+            requestBody: entityToCreateDto({
+              ...pathParams,
+              ...data,
+            })
+          });
+          actionRef?.current?.reload();
+          setCreatePopupData(undefined);
+        }
+        catch (e) {
+          console.error(e);
+        }
+      }}
+      idColumnName={idColumnName}
+      columns={columns ?? []}
+    />
+    {contextHolder}
+  </>);
+};
+
+export default Table;
+

package/src/components/Table/index.ts

@@ -0,0 +1,6 @@
+export * from './Table';
+export { default as Table } from './Table'
+export * from './tableTools';
+export * from './tableTypes';
+export * from './useColumnsSets';
+export { default as useColumnsSets } from './useColumnsSets';