@boarteam/boar-pack-common-frontend 4.0.0 → 4.1.0

package/src/components/Table/tableTypes.ts

@@ -1,148 +0,0 @@
-import React, { MutableRefObject } from "react";
-import { ActionType, ProTableProps } from "@ant-design/pro-table";
-import { QueryJoin, QuerySortArr } from "@nestjsx/crud-request";
-import { Operators } from "./tableTools";
-import { TColumnsSet } from "./useColumnsSets";
-import { ColumnStateType } from "@ant-design/pro-table/es/typing";
-import { RowEditableConfig } from "@ant-design/pro-utils";
-import { ProColumns } from "@ant-design/pro-components";
-import { TImportResponse, TRelationalFields } from "../ChangesModal";
-export type IWithId = {
-  id: string | number,
-}
-export type TGetAllParams = {
-  /**
-   * Selects resource fields. <a href="https://github.com/nestjsx/crud/wiki/Requests#select" target="_blank">Docs</a>
-   */
-  fields?: Array<string>,
-  /**
-   * Adds search condition. <a href="https://github.com/nestjsx/crud/wiki/Requests#search" target="_blank">Docs</a>
-   */
-  s?: string,
-  /**
-   * Adds filter condition. <a href="https://github.com/nestjsx/crud/wiki/Requests#filter" target="_blank">Docs</a>
-   */
-  filter?: Array<string>,
-  /**
-   * Adds OR condition. <a href="https://github.com/nestjsx/crud/wiki/Requests#or" target="_blank">Docs</a>
-   */
-  or?: Array<string>,
-  /**
-   * Adds sort by field. <a href="https://github.com/nestjsx/crud/wiki/Requests#sort" target="_blank">Docs</a>
-   */
-  sort?: Array<string>,
-  /**
-   * Adds relational resources. <a href="https://github.com/nestjsx/crud/wiki/Requests#join" target="_blank">Docs</a>
-   */
-  join?: Array<string>,
-  /**
-   * Limit amount of resources. <a href="https://github.com/nestjsx/crud/wiki/Requests#limit" target="_blank">Docs</a>
-   */
-  limit?: number,
-  /**
-   * Offset amount of resources. <a href="https://github.com/nestjsx/crud/wiki/Requests#offset" target="_blank">Docs</a>
-   */
-  offset?: number,
-  /**
-   * Page portion of resources. <a href="https://github.com/nestjsx/crud/wiki/Requests#page" target="_blank">Docs</a>
-   */
-  page?: number,
-  /**
-   * Reset cache (if was enabled). <a href="https://github.com/nestjsx/crud/wiki/Requests#cache" target="_blank">Docs</a>
-   */
-  cache?: number,
-}
-export type TFilters = {
-  [key: string]: number | string | boolean | (string | number | boolean)[] | null;
-}
-
-export type TGetRequestParams = {
-  baseFilters?: TFilters;
-  join?: QueryJoin | QueryJoin[];
-};
-export type TGetAllRequestParams = TGetRequestParams & {
-  keyword?: string;
-}
-export type TFilterParams = {
-  current?: number;
-  pageSize?: number;
-  sortMap?: { [key: string]: string };
-} & TGetAllRequestParams;
-export type TSort = {
-  [key: string]: 'ascend' | 'descend' | null,
-};
-export type TSearchableColumn = {
-  field: string | string[],
-  searchField?: string | null,
-  operator: typeof Operators[keyof typeof Operators],
-  filterField?: string,
-  filterOperator?: typeof Operators[keyof typeof Operators],
-  numeric?: boolean,
-  uuid?: boolean,
-}
-
-interface BaseProps<Entity,
-  CreateDto,
-  UpdateDto,
-  TEntityParams = {},
-  TPathParams = {}> extends ProTableProps<Entity, TEntityParams & TFilterParams> {
-  getAll: ({}: TGetAllParams & TPathParams) => Promise<{ data: Entity[] }>;
-  pathParams: TPathParams;
-  idColumnName?: string & keyof Entity | (string & keyof Entity)[];
-  createNewDefaultParams?: Partial<Entity>;
-  editableRecord?: Partial<Entity>;
-  defaultSort?: QuerySortArr;
-  searchableColumns?: TSearchableColumn[];
-  viewOnly?: boolean;
-  columnsSets?: TColumnsSet<Entity>[];
-  popupCreation?: boolean;
-  columnsState?: ColumnStateType;
-  columnsSetSelect?: () => React.ReactNode;
-  editPopupTitle?: string;
-  createPopupTitle?: string;
-  descriptionsMainTitle?: ProColumns<Entity>['title'] | null;
-}
-
-export interface EditableProps<Entity, CreateDto, UpdateDto, TPathParams = {}, ImportRequestParams = {}> {
-  actionRef?: MutableRefObject<ActionType | undefined>;
-  editable?: RowEditableConfig<Entity>;
-  afterSave?: (record: Entity) => Promise<void>;
-  onCreate?: ({}: { requestBody: CreateDto } & TPathParams) => Promise<Entity>;
-  exportUrl?: string;
-  exportParams?: {
-    [key: string]: string | number
-  };
-  onUpdate: ({}: Partial<Entity> & {
-    requestBody: UpdateDto,
-    index?: number,
-  } & TPathParams) => Promise<Entity>;
-  onDelete: ({}: Partial<Entity> & TPathParams) => Promise<void>;
-  entityToCreateDto: (entity: Entity) => CreateDto;
-  entityToUpdateDto: (entity: Entity) => UpdateDto;
-  onUpdateMany: ({}: Partial<Entity> & {
-    requestBody: { updateValues: Partial<UpdateDto>[], records: Entity[] }
-  } & TPathParams) => Promise<void>,
-  onDeleteMany: ({}: Partial<Entity> & { requestBody: { records: Entity[] } } & TPathParams) => Promise<void>,
-  importConfig?: {
-    onImport?: (params: ImportRequestParams) => Promise<TImportResponse>;
-    relationalFields?: TRelationalFields,
-    changedRecordsColumnsConfig: ProColumns<Entity>[],
-    createdRecordsColumnsConfig: ProColumns<Entity>[],
-  }
-}
-
-// Conditional type to merge base and editable props conditionally
-type ConditionalProps<Entity,
-  CreateDto,
-  UpdateDto,
-  TEntityParams,
-  TPathParams> = { viewOnly: true } extends { viewOnly: boolean }
-  ? BaseProps<Entity, CreateDto, UpdateDto, TEntityParams, TPathParams> & Partial<EditableProps<Entity, CreateDto, UpdateDto, TPathParams>>
-  : BaseProps<Entity, CreateDto, UpdateDto, TEntityParams, TPathParams> & EditableProps<Entity, CreateDto, UpdateDto, TPathParams>;
-
-// Main type
-export type TTableProps<Entity,
-  CreateDto,
-  UpdateDto,
-  TEntityParams = {},
-  TPathParams = {}> = ConditionalProps<Entity, CreateDto, UpdateDto, TEntityParams, TPathParams>

package/src/components/Table/useBulkEditing.tsx

@@ -1,128 +0,0 @@
-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!]) as React.Key[],
-    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/useColumnsSets.tsx

@@ -1,142 +0,0 @@
-import { ColumnsState, ProColumns } from "@ant-design/pro-components";
-import React, { useMemo, useState } from "react";
-import { Select } from "antd";
-import { ColumnStateType } from "@ant-design/pro-table/es/typing";
-import { TIndexableRecord } from "./tableTools";
-import QuestionMarkHint from "../QuestionMarkHint/QuestionMarkHint";
-import { SettingOutlined } from "@ant-design/icons";
-
-export type TColumnsSet<Entity> = {
-  name: string,
-  columns: (keyof Entity)[],
-}
-
-type TUseColumnsSetsParams<Entity> = {
-  columns: ProColumns<Entity>[],
-  columnsSets?: TColumnsSet<Entity>[],
-  defaultColumnState?: string;
-}
-
-export type TColumnsStates = Record<string, ColumnsState>;
-
-type TUseColumnsSetsResult<Entity> = {
-  columnsSetSelect: () => React.ReactNode,
-  chosenColumnsSet: TColumnsStates | undefined,
-  setChosenColumnsSet: React.Dispatch<React.SetStateAction<TColumnsStates | undefined>>,
-  setChosenColumnsSetByName: (value: string) => void,
-  columnsState: ColumnStateType,
-}
-
-type TColumnsState = Partial<Record<string, ColumnsState>>;
-
-function getColumnsStates<T>(
-  columns: TIndexableRecord[],
-  shownCols: Set<keyof T>,
-  state: TColumnsState = {},
-): {state: Record<string, ColumnsState>, someColumnsShown: boolean} {
-  let someColumnsShown = false;
-  columns.forEach(col => {
-    const idx = Array.isArray(col.dataIndex) ? col.dataIndex.join(',') : col.dataIndex;
-    let childrenColumnsShown = false;
-    if ('children' in col && Array.isArray(col.children)) {
-      const { someColumnsShown } = getColumnsStates(col.children, shownCols, state);
-      if (someColumnsShown) {
-        childrenColumnsShown = true;
-      }
-    }
-
-    if (idx) {
-      if (shownCols.has(idx as keyof T) || childrenColumnsShown) {
-        someColumnsShown = true;
-      } else {
-        state[idx as string] = { show: false };
-      }
-    }
-  }, state);
-
-  return { state, someColumnsShown };
-}
-
-export default function useColumnsSets<Entity>({
-  columns,
-  columnsSets,
-  defaultColumnState,
-}: TUseColumnsSetsParams<Entity>): TUseColumnsSetsResult<Entity> {
-  const columnsSetsByName: Map<string, TColumnsStates> = useMemo(
-    () => new Map<string, TColumnsStates>(
-      columnsSets?.map(({
-        name,
-        columns: columnsSet
-      }) => [
-        name,
-        getColumnsStates<Entity>(columns as TIndexableRecord[], new Set(columnsSet)).state,
-      ])
-    ), [columns]
-  );
-
-  const [chosenSetName, setChosenSetName] = useState<string | undefined>(
-    defaultColumnState || columnsSets?.[0].name || undefined
-  );
-  const [chosenColumnsSet, setChosenColumnsSet] = useState<TColumnsStates | undefined>(
-    columnsSetsByName.get(chosenSetName || '') || undefined
-  );
-
-  const setChosenColumnsSetByName = (value: string) => {
-    setChosenSetName(value);
-    setChosenColumnsSet(columnsSetsByName.get(value));
-  }
-
-  const options = Array.from(columnsSetsByName.keys()).map(name => ({
-    value: name,
-    label: name,
-  }));
-
-  const columnsSetSelect = () => columnsSetsByName.size > 1 ? <>
-    <Select
-      key="columnsSetSelect"
-      style={{ width: 200 }}
-      value={chosenSetName}
-      onChange={(value: string) => setChosenColumnsSetByName(value)}
-      options={options}
-    />
-    <QuestionMarkHint intlPrefix={'tables.columnsSetSelect'} values={{
-      gearIcon: <SettingOutlined />,
-    }} />
-  </> : null;
-
-  const columnsState = {
-    value: chosenColumnsSet,
-    // value contains only hidden columns and one which is just changed
-    onChange: (value: TColumnsStates) => {
-      const checkParentVisibility = (columns: TIndexableRecord[]) => {
-        let someColumnsShown = false;
-
-        columns.forEach(col => {
-          const idx = Array.isArray(col.dataIndex) ? col.dataIndex.join(',') : col.dataIndex as string;
-          if (idx && value[idx]?.show) {
-            someColumnsShown = true;
-          }
-
-          if ('children' in col && Array.isArray(col.children)) {
-            const someChildColumnsShown = checkParentVisibility(col.children);
-            if (someChildColumnsShown) {
-              value[idx] = { show: true };
-            }
-          }
-        });
-
-        return someColumnsShown;
-      };
-      checkParentVisibility(columns as TIndexableRecord[]);
-      setChosenColumnsSet(value);
-    },
-  };
-
-  return {
-    columnsSetSelect,
-    chosenColumnsSet,
-    setChosenColumnsSet,
-    setChosenColumnsSetByName,
-    columnsState,
-  }
-}

package/src/components/Table/useCreation.tsx

@@ -1,114 +0,0 @@
-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";
-import { DescriptionsRefType } from "../Descriptions";
-import { ApiError } from '../../tools'
-
-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: 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: Entity, descriptionsRef: MutableRefObject<DescriptionsRefType<Entity>>) => {
-    try {
-      await onCreate?.({
-        ...pathParams,
-        requestBody: entityToCreateDto({
-          ...pathParams,
-          ...data,
-        })
-      });
-      setCreatePopupData(undefined);
-      await actionRef?.current?.reload();
-    } catch (e: any) {
-      console.error(e);
-
-      // Handle common error
-      if (e.body && e.body.statusCode && e.body.errors) {
-        const error = e as ApiError;
-        const { statusCode, errors } = error.body;
-        // Validation error. Highlight corresponding form fields
-        if (statusCode === 400) {
-          const formErrors = errors.map(error => ({
-            name: error.field,
-            errors: [error.message],
-          }));
-
-          // @ts-ignore
-          descriptionsRef.current.setFieldErrors(formErrors);
-        }
-      }
-    }
-  };
-
-  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

@@ -1,86 +0,0 @@
-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";
-import { isRecordNew } from "./useCreation";
-
-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) {
-      if (isRecordNew(row)) return;
-      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,
-  };
-}