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

package/src/components/Table/Table.tsx

@@ -1,294 +0,0 @@
-import ProTable, { ActionType } from "@ant-design/pro-table";
-import { useEffect, useRef, useState } from "react";
-import { Modal } from "antd";
-import { TFilterParams, TFilters, TSort, TTableProps } from "./tableTypes";
-import useColumnsSets from "./useColumnsSets";
-import { createStyles } from "antd-style";
-import { Descriptions } from "../Descriptions";
-import { KEY_SYMBOL, useCreation } from "./useCreation";
-import { getTableDataQueryParams } from "./getTableDataQueryParams";
-import { useEditableTable } from "./useEditableTable";
-import { useBulkEditing } from "./useBulkEditing";
-import { useImportExport } from "./useImportExport";
-import { ChangesModal } from "../ChangesModal";
-import { ProColumns } from "@ant-design/pro-components";
-
-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> = {},
-  TImportRequest = { // TODO: Add to Table types
-    new?: Array<Entity>,
-    modified?: Array<Entity>,
-  },
->(
-  {
-    getAll,
-    onCreate,
-    onUpdate,
-    onUpdateMany,
-    onDelete,
-    onDeleteMany,
-    exportUrl,
-    exportParams,
-    pathParams,
-    idColumnName = 'id',
-    entityToCreateDto,
-    entityToUpdateDto,
-    createNewDefaultParams,
-    editableRecord,
-    afterSave,
-    actionRef: actionRefProp,
-    editable,
-    defaultSort = ['createdAt', 'DESC'],
-    searchableColumns = [],
-    viewOnly = false,
-    columns = [],
-    columnsSets,
-    columnsState: managedColumnsState,
-    columnsSetSelect: managedColumnsSetSelect,
-    popupCreation = false,
-    toolBarRender,
-    params,
-    editPopupTitle,
-    createPopupTitle,
-    descriptionsMainTitle,
-    importConfig,
-    ...rest
-  }: TTableProps<Entity,
-    CreateDto,
-    UpdateDto,
-    TEntityParams,
-    TPathParams>
-) => {
-  const actionRefComponent = useRef<ActionType>();
-  const actionRef = actionRefProp || actionRefComponent;
-  const [updatePopupData, setUpdatePopupData] = useState<Partial<Entity> | undefined>();
-  const { styles } = useStyles();
-  const flatColumns: ProColumns<Entity>[] = [];
-  columns.forEach((column) => {
-    if (column.children && column.children.length > 0) {
-      flatColumns.push(...column.children);
-    } else {
-      flatColumns.push(column);
-    }
-  });
-
-  const {
-    editableConfig,
-  } = useEditableTable<Entity, CreateDto, UpdateDto, TPathParams>({
-    actionRef,
-    pathParams,
-    onCreate,
-    onUpdate,
-    onDelete,
-    entityToCreateDto,
-    entityToUpdateDto,
-    afterSave,
-    editable,
-    onDeleteMany,
-    onUpdateMany,
-  });
-
-  const {
-    rowSelection,
-    setSelectedRecords,
-    setLastRequest,
-    bulkEditButton,
-    bulkDeleteButton,
-    messagesContext,
-  } = useBulkEditing<Entity, TPathParams, UpdateDto, TEntityParams & TFilterParams>({
-    actionRef,
-    columns,
-    idColumnName,
-    onDeleteMany,
-    onUpdateMany,
-    entityToUpdateDto,
-    pathParams,
-  });
-
-  const {
-    creationModal,
-    createButton,
-  } = useCreation<Entity, CreateDto, TPathParams>({
-    title: createPopupTitle,
-    mainTitle: descriptionsMainTitle,
-    columns: columns,
-    idColumnName: idColumnName,
-    onCreate,
-    pathParams,
-    entityToCreateDto,
-    actionRef,
-    createButtonSize: rest.size,
-    popupCreation,
-    createNewDefaultParams,
-  });
-
-  const {
-    exportButton,
-    importButton,
-    setLastQueryParams,
-    diffResult,
-    setDiffResult,
-  } = useImportExport<Entity, TPathParams>({
-    columns: flatColumns,
-    exportUrl,
-    exportParams,
-    changedRecordsColumnsConfig: importConfig?.changedRecordsColumnsConfig,
-    relationalFields: importConfig?.relationalFields,
-  })
-
-  useEffect(() => {
-    setUpdatePopupData(editableRecord);
-    actionRef?.current?.reload();
-  }, [editableRecord, 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 queryParams = getTableDataQueryParams({
-      params,
-      sort,
-      filters,
-      pathParams,
-      defaultSort,
-      searchableColumns,
-      columns,
-      idColumnName,
-      columnsState,
-    });
-
-    const result = await getAll(queryParams);
-
-    setSelectedRecords([]);
-    setLastRequest([
-      queryParams,
-      result,
-    ]);
-    setLastQueryParams(queryParams);
-    return result;
-  }
-
-  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,
-        },
-      }}
-      scroll={{
-        x: 'max-content',
-      }}
-      bordered
-      search={false}
-      editable={editableConfig}
-      toolBarRender={toolBarRender === false ? false : (...args) => [
-        columnsSetSelect?.() || null,
-        !viewOnly && onUpdateMany
-          ? bulkEditButton
-          : null,
-        !viewOnly && onDeleteMany
-          ? bulkDeleteButton
-          : null,
-        !viewOnly && createButton || null,
-        !viewOnly && importConfig?.onImport && importButton || null,
-        exportUrl && exportButton || null,
-        ...toolBarRender && toolBarRender(...args) || [],
-      ]}
-      columns={columns}
-      defaultSize='small'
-      columnsState={columnsState}
-      params={params}
-      {
-        ...(
-          !viewOnly && (onUpdateMany || onDeleteMany)
-            ? { rowSelection }
-            : {}
-        )
-      }
-      {...rest}
-    />
-
-    {creationModal}
-
-    <Modal
-      title={editPopupTitle}
-      open={updatePopupData !== undefined}
-      width='80%'
-      closeIcon={true}
-      footer={null}
-      onCancel={() => {
-        actionRef?.current?.reload();
-        setUpdatePopupData(undefined);
-      }}
-    >
-      <Descriptions<Entity, CreateDto, UpdateDto, TPathParams>
-        mainTitle={descriptionsMainTitle}
-        columns={columns ?? []}
-        entity={updatePopupData}
-        canEdit={true}
-        onUpdate={onUpdate}
-        entityToUpdateDto={entityToUpdateDto}
-      />
-    </Modal>
-    <ChangesModal<
-        Entity,
-        TImportRequest
-      >
-      {...(diffResult && { changes: diffResult })}
-      onCommit={importConfig?.onImport}
-      onClose={() => {
-        actionRef.current?.reload();
-        setDiffResult(undefined);
-      }}
-      originRecordsColumnsConfig={flatColumns}
-      changedRecordsColumnsConfig={importConfig?.changedRecordsColumnsConfig}
-      createdRecordsColumnsConfig={{
-        columnsSets,
-        columns: importConfig?.createdRecordsColumnsConfig
-      }}
-      relationalFields={importConfig?.relationalFields}
-    />
-    {messagesContext}
-  </>);
-};
-
-export default Table;

package/src/components/Table/getTableDataQueryParams.ts

@@ -1,79 +0,0 @@
-import { TFilterParams, TFilters, TGetAllParams, TSearchableColumn, TSort } from "./tableTypes";
-import { applyKeywordToSearch, buildJoinFields, collectFieldsFromColumns, getFiltersSearch } from "./tableTools";
-import { QuerySortArr } from "@nestjsx/crud-request";
-import { ProColumns } from "@ant-design/pro-components";
-import { ColumnStateType } from "@ant-design/pro-table/es/typing";
-
-export function getTableDataQueryParams<Entity, TPathParams extends Record<string, string | number> = {}>({
-  params,
-  sort = {},
-  filters = {},
-  pathParams,
-  defaultSort,
-  searchableColumns,
-  columns = [],
-  idColumnName = 'id',
-  columnsState,
-}: {
-  params: TFilterParams,
-  sort?: TSort,
-  filters?: TFilters,
-  pathParams: TPathParams,
-  defaultSort?: QuerySortArr,
-  searchableColumns?: TSearchableColumn[],
-  columns?: ProColumns<Entity>[],
-  idColumnName?: string | string[];
-  columnsState?: ColumnStateType;
-}): TGetAllParams & TPathParams {
-  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,
-  ) || [];
-
-  return queryParams;
-}

package/src/components/Table/index.ts

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

package/src/components/Table/tableTools.ts

@@ -1,244 +0,0 @@
-import { CondOperator, QueryJoin, SCondition } from "@nestjsx/crud-request";
-import { validate as uuidValidate } from 'uuid';
-import { IWithId, TFilters, TSearchableColumn } from "./tableTypes";
-import React, { Key } from "react";
-import { TColumnsStates } from "./useColumnsSets";
-
-export function getFiltersSearch({
-  baseFilters = {},
-  filters = {},
-  searchableColumns,
-}: {
-  baseFilters?: TFilters,
-  filters?: TFilters,
-  searchableColumns: TSearchableColumn[],
-}): SCondition {
-  const filterKeys = new Set(Object.keys(filters).concat(Object.keys(baseFilters)));
-  const search: SCondition = { '$and': [] };
-  searchableColumns.forEach((col) => {
-    const colDataIndex = Array.isArray(col.field) ? col.field.join('.') : col.field;
-    const field = col.filterField || colDataIndex;
-    let operator = col.filterOperator || col.operator;
-    let value = filters[colDataIndex] || baseFilters[colDataIndex];
-    filterKeys.delete(colDataIndex);
-    if (
-      value === '' ||
-      value === undefined ||
-      col.numeric && !Number.isFinite(Number(value)) ||
-      col.uuid && (typeof value !== 'string' || !uuidValidate(value))
-    ) {
-      return;
-    }
-
-    switch (operator) {
-      case Operators.between:
-        if (Array.isArray(value)) {
-          if (value?.[0] === undefined) {
-            operator = Operators.lowerOrEquals;
-            value = value?.[1];
-          } else if (value?.[1] === undefined) {
-            operator = Operators.greaterOrEquals;
-            value = value?.[0];
-          }
-        }
-        break;
-
-      case Operators.isNull:
-        if (Array.isArray(value)) {
-          value = value[0];
-        }
-
-        if (value !== true) {
-          operator = Operators.notNull;
-          value = true;
-        }
-        break;
-
-      case Operators.notNull:
-        if (Array.isArray(value)) {
-          value = value[0];
-        }
-
-        if (value !== true) {
-          operator = Operators.isNull;
-          value = true;
-        }
-        break;
-
-      case Operators.in:
-      case Operators.inLow:
-        if (Array.isArray(value) && value.length === 1 && value[0] === null) {
-          operator = Operators.isNull;
-          value = true;
-        }
-        break;
-
-      case Operators.equals:
-        if (Array.isArray(value) && value.length === 1 && value[0] === null || value === null) {
-          operator = Operators.isNull;
-          value = true;
-        }
-        break;
-
-    }
-
-    search.$and?.push({ [field]: { [operator]: value } });
-  });
-
-  if (filterKeys.size) {
-    throw new Error(`Some filters are not defined in searchableColumns: ${Array.from(filterKeys).join(', ')}`);
-  }
-
-  return search;
-}
-
-export const Operators = {
-  containsLow: CondOperator.CONTAINS_LOW,
-  contains: CondOperator.CONTAINS,
-  equals: CondOperator.EQUALS,
-  in: CondOperator.IN,
-  inLow: CondOperator.IN_LOW,
-  between: CondOperator.BETWEEN,
-  greaterOrEquals: CondOperator.GREATER_THAN_EQUALS,
-  lowerOrEquals: CondOperator.LOWER_THAN_EQUALS,
-  isNull: CondOperator.IS_NULL,
-  notNull: CondOperator.NOT_NULL,
-  starts: CondOperator.STARTS,
-} as const;
-
-export function applyKeywordToSearch(
-  filterSearch: SCondition,
-  searchableColumns: TSearchableColumn[],
-  columnsState?: TColumnsStates,
-  keyword?: string,
-): SCondition {
-  if (!keyword) {
-    return filterSearch;
-  }
-
-  const keywordSearches: SCondition[] = [];
-  keyword.split(' ').forEach((word) => {
-    const keywordSearch: SCondition = { $or: [] };
-    searchableColumns!.forEach((col) => {
-      if (col.searchField === null) {
-        return;
-      }
-
-      const dataIndex = Array.isArray(col.field) ? col.field.join(',') : col.field;
-      if (columnsState?.[dataIndex] && !columnsState[dataIndex].show) {
-        return;
-      }
-
-      const field = col.searchField || (Array.isArray(col.field) ? col.field.join('.') : col.field);
-      const operator = col.operator;
-
-      const wrongNumeric = col.numeric && !Number.isFinite(Number(word));
-      const wrongUuid = col.uuid && (typeof word !== 'string' || !uuidValidate(word));
-
-      if (!wrongNumeric && !wrongUuid) {
-        keywordSearch.$or.push({ [field]: { [operator]: word } });
-      }
-    });
-
-    keywordSearches.push(keywordSearch);
-  });
-
-  if (!Array.isArray(filterSearch.$and)) {
-    throw new Error('Bad format of filter search');
-  }
-
-  return {
-    $and: [...filterSearch.$and, ...keywordSearches]
-  }
-}
-
-export type TIndexableRecord = {
-  dataIndex?: Key | Key[];
-  children?: TIndexableRecord[] | React.ReactNode;
-  editable?: boolean | ((...args: any[]) => boolean);
-};
-
-export function collectFieldsFromColumns<T>(
-  columns: TIndexableRecord[] | undefined,
-  idColumnName: string | string[],
-  joinFields: Set<string> = new Set,
-  fields: Set<string> = new Set
-): string[] {
-  return [Array.from(buildFieldsFromColumns<T>(columns, idColumnName, joinFields, fields)).join(',')];
-}
-
-export function buildFieldsFromColumnsForDescriptionsDisplay<T>(
-  columns: TIndexableRecord[] | undefined,
-  idColumnName: string | string[],
-  fields: Set<string> = new Set,
-): Set<string> {
-  columns?.forEach(col => {
-    if ('children' in col && Array.isArray(col.children)) {
-      buildFieldsFromColumnsForDescriptionsDisplay(col.children, idColumnName, fields);
-    }
-    if (col.editable !== false) {
-      fields.add(String(Array.isArray(col.dataIndex) ? col.dataIndex[0] : col.dataIndex));
-    }
-  });
-
-  return fields;
-}
-
-export function buildFieldsFromColumns<T>(
-  columns: TIndexableRecord[] | undefined,
-  idColumnName: string | string[],
-  joinFields: Set<string> = new Set,
-  fields: Set<string> = new Set
-): Set<string> {
-  columns?.forEach(col => {
-    if ('children' in col && Array.isArray(col.children)) {
-      buildFieldsFromColumns(col.children, idColumnName, joinFields, fields);
-    }
-
-    // skip id column because it is always included by backend
-    // and join fields because they are included by join
-
-    const dataIndex = Array.isArray(col.dataIndex) ? col.dataIndex[0] : col.dataIndex;
-    if (typeof dataIndex !== 'string') {
-      return;
-    }
-
-    if (!dataIndex || (Array.isArray(idColumnName) ? idColumnName.includes(dataIndex) : dataIndex === idColumnName) || joinFields.has(dataIndex)) {
-      return;
-    }
-
-    fields.add(dataIndex);
-  });
-
-  return fields;
-}
-
-export function withNumericId<T extends IWithId>(entity: T): T & { id: number } {
-  return {
-    ...entity,
-    id: Number(entity.id),
-  };
-}
-
-export function buildJoinFields(join?: QueryJoin | QueryJoin[]) {
-  const joinFields = new Set<string>();
-  let joinSelect: string[] = [];
-  if (join) {
-    let joinArr = join;
-    if (!Array.isArray(joinArr)) {
-      joinArr = [joinArr];
-    }
-    joinSelect = joinArr.map(relation => {
-      joinFields.add(relation.field);
-      let res = relation.field;
-      if (relation.select) {
-        res += `||${relation.select.join(',')}`;
-      }
-      return res;
-    });
-  }
-  return {
-    joinSelect,
-    joinFields,
-  };
-}