@boarteam/boar-pack-common-frontend 2.4.1 → 2.5.0

package/src/components/Table/useBulkEditing.tsx

@@ -0,0 +1,128 @@
+import { message, Popover, Space } from "antd";
+import { QuestionCircleTwoTone } from "@ant-design/icons";
+import _ from "lodash";
+import BulkEditButton from "./BulkEditButton";
+import { ActionType, ProTableProps } from "@ant-design/pro-table";
+import BulkDeleteButton from "./BulkDeleteButton";
+import { MutableRefObject, useState } from "react";
+import { TGetAllParams } from "./tableTypes";
+
+export function useBulkEditing<Entity, TPathParams, UpdateDto, U>({
+  actionRef,
+  columns,
+  idColumnName,
+  onDeleteMany,
+  onUpdateMany,
+  entityToUpdateDto,
+  pathParams,
+}: {
+  actionRef?: MutableRefObject<ActionType | undefined>;
+  columns: ProTableProps<Entity, U>['columns'],
+  idColumnName?: string & keyof Entity | (string & keyof Entity)[];
+  onDeleteMany: ({}: Partial<Entity> & {
+    requestBody: { records: Entity[] }
+  } & TPathParams) => Promise<void>,
+  onUpdateMany: ({}: Partial<Entity> & {
+    requestBody: { updateValues: Partial<UpdateDto>[], records: Entity[] }
+  } & TPathParams) => Promise<void>,
+  entityToUpdateDto: (entity: Entity) => UpdateDto;
+  pathParams: TPathParams,
+}) {
+  const [allSelected, setAllSelected] = useState(false);
+  const [selectedRecords, setSelectedRecords] = useState<Entity[]>([]);
+  const [lastRequest, setLastRequest] = useState<[TGetAllParams & TPathParams, any] | []>([]);
+  const [messageApi, contextHolder] = message.useMessage();
+
+  const bulkEditButton = <BulkEditButton<Entity, TPathParams>
+    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();
+    })}
+  />;
+
+  const bulkDeleteButton = <BulkDeleteButton<Entity, TPathParams>
+    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();
+    })}
+  />;
+
+  const rowSelection: ProTableProps<Entity, U>['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);
+    },
+  };
+
+  return {
+    rowSelection,
+    setSelectedRecords,
+    setLastRequest,
+    messagesContext: contextHolder,
+    bulkEditButton,
+    bulkDeleteButton,
+  }
+}

package/src/components/Table/useCreation.tsx

@@ -0,0 +1,96 @@
+import { MutableRefObject, useState } from 'react';
+import { Button } from 'antd';
+import { ActionType } from "@ant-design/pro-table";
+import { PlusOutlined } from "@ant-design/icons";
+import { FormattedMessage } from "react-intl";
+import type { SizeType } from "antd/es/config-provider/SizeContext";
+import { CreateEntityModal, CreateEntityModalProps } from "./CreateEntityModal";
+
+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;
+}
+
+export function useCreation<Entity, CreateDto, TPathParams = {}>({
+  title,
+  mainTitle,
+  columns,
+  idColumnName,
+  onCreate,
+  pathParams,
+  entityToCreateDto,
+  actionRef,
+  createButtonSize,
+  popupCreation,
+  createNewDefaultParams,
+}: {
+  actionRef?: MutableRefObject<ActionType | undefined>;
+  pathParams: TPathParams;
+  entityToCreateDto: (entity: Partial<Entity>) => CreateDto;
+  onCreate?: ({}: { requestBody: CreateDto } & TPathParams) => Promise<Entity>;
+  createButtonSize: SizeType;
+  popupCreation?: boolean;
+  createNewDefaultParams?: Partial<Entity>;
+} & Omit<CreateEntityModalProps<Entity>, 'onSubmit' | 'onCancel' | 'entity'>) {
+  const [createPopupData, setCreatePopupData] = useState<Partial<Entity> | undefined>();
+
+  const onCreateSubmit = async (data: Partial<Entity>) => {
+    try {
+      await onCreate?.({
+        ...pathParams,
+        requestBody: entityToCreateDto({
+          ...pathParams,
+          ...data,
+        })
+      });
+      setCreatePopupData(undefined);
+      await actionRef?.current?.reload();
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const createButton = <Button
+    size={createButtonSize}
+    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>;
+
+  const modal = <CreateEntityModal<Entity, CreateDto, Entity, TPathParams>
+    entity={createPopupData}
+    title={title}
+    mainTitle={mainTitle}
+    columns={columns}
+    idColumnName={idColumnName}
+    onCancel={() => {
+      setCreatePopupData(undefined);
+    }}
+    onSubmit={onCreateSubmit}
+  />;
+
+  return {
+    creationModal: modal,
+    createButton,
+  };
+}

package/src/components/Table/useEditableTable.tsx

@@ -0,0 +1,84 @@
+import { EditableProps } from "./tableTypes";
+import type { RowEditableConfig } from "@ant-design/pro-utils";
+import { flushSync } from "react-dom";
+import { Button, Tooltip } from "antd";
+import { DeleteOutlined, StopOutlined } from "@ant-design/icons";
+import { FormattedMessage, useIntl } from "react-intl";
+import React, { useState } from "react";
+
+export function useEditableTable<Entity, CreateDto, UpdateDto, TPathParams = {}>(
+  {
+    actionRef,
+    pathParams,
+    onCreate,
+    onUpdate,
+    onDelete,
+    entityToCreateDto,
+    entityToUpdateDto,
+    afterSave,
+    editable,
+  }: {
+    pathParams: TPathParams,
+  } & EditableProps<Entity, CreateDto, UpdateDto, TPathParams>
+) {
+  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
+  const intl = useIntl();
+
+  const editableConfig: RowEditableConfig<Entity> = {
+    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,
+  }
+
+  return {
+    editableConfig,
+  };
+}

package/src/components/Table/ContentViewModeButton.tsx

@@ -1,27 +0,0 @@
-import { Button, Tooltip } from "antd";
-import { AppstoreOutlined, UnorderedListOutlined } from "@ant-design/icons";
-export enum VIEW_MODE_TYPE {
-    TABS = 'tabs',
-    GENERAL = 'general'
-}
-
-interface ContentViewModeButtonProps {
-    contentViewMode: VIEW_MODE_TYPE;
-    setContentViewMode: (mode: VIEW_MODE_TYPE) => void;
-}
-
-const ContentViewModeButton: React.FC<ContentViewModeButtonProps> = ({ contentViewMode, setContentViewMode }) => {
-    return (
-        <Tooltip
-            title={contentViewMode === VIEW_MODE_TYPE.TABS ? 'Switch to general view' : 'Switch to tabs view'}
-            key="viewModeToggle">
-            <Button
-                type="text"
-                icon={contentViewMode === VIEW_MODE_TYPE.TABS ? <UnorderedListOutlined/> :
-                    <AppstoreOutlined/>}
-                onClick={() => setContentViewMode(contentViewMode === VIEW_MODE_TYPE.TABS ? VIEW_MODE_TYPE.GENERAL : VIEW_MODE_TYPE.TABS)}
-            />
-        </Tooltip>);
-};
-
-export default ContentViewModeButton;