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

package/src/components/List/List.tsx

@@ -1,266 +0,0 @@
-import { ActionType } from "@ant-design/pro-table";
-import React, { useEffect, useRef, useState } from "react";
-import { Button, Tooltip } from "antd";
-import { DeleteOutlined, PlusOutlined, StopOutlined } from "@ant-design/icons";
-import { FormattedMessage, useIntl } from "react-intl";
-import { flushSync } from "react-dom";
-import { ProList } from "@ant-design/pro-components";
-import { getNewId, KEY_SYMBOL } from "../Table";
-import { createStyles } from "antd-style";
-import { TListProps } from "./listTypes";
-import {
-  applyKeywordToSearch,
-  buildJoinFields, collectFieldsFromColumns,
-  getFiltersSearch,
-  TFilterParams,
-  TFilters,
-  TGetAllParams,
-  TSort
-} from "../Table";
-// import DescriptionsCreateModal from "../Descriptions/DescriptionsCreateModal";
-
-const useStyles = createStyles(() => {
-  return {
-    list: {
-      '.ant-pro-list-row-editable .ant-form-item': {
-        width: '100%',
-      },
-      '.ant-pro-checkcard-body': {
-        padding: '12px !important',
-      }
-    }
-  }
-})
-
-const List = <Entity extends Record<string | symbol, any>,
-  CreateDto = Entity,
-  UpdateDto = Entity,
-  TEntityParams = {},
-  TPathParams extends Record<string, string | number> = {},
-  TKey = string,
-  >(
-  {
-    getAll,
-    onCreate,
-    onUpdate,
-    onDelete,
-    pathParams,
-    idColumnName = 'id',
-    entityToCreateDto,
-    entityToUpdateDto,
-    createNewDefaultParams,
-    afterSave,
-    actionRef: actionRefProp,
-    editable,
-    defaultSort = ['createdAt', 'DESC'],
-    searchableColumns = [],
-    viewOnly = false,
-    columns = [],
-    // columnsSets,
-    popupCreation = false,
-    toolBarRender,
-    metas,
-    ...rest
-  }: TListProps<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 [editableData, setEditableData] = useState<(Entity)[]>([]);
-  const intl = useIntl();
-
-  useEffect(() => {
-    actionRef?.current?.reload();
-  }, [JSON.stringify(pathParams)]);
-
-  const request = async (
-    params: TFilterParams,
-    sort: TSort = {},
-    filters: TFilters = {},
-  ) => {
-    const {
-      current,
-      pageSize,
-      keyword,
-      baseFilters,
-      join,
-      sortMap,
-    } = 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,
-      searchableColumns,
-    });
-    search = applyKeywordToSearch(search, searchableColumns!, null, keyword);
-    queryParams.s = JSON.stringify(search);
-
-    const { joinSelect, joinFields } = buildJoinFields(join);
-    queryParams.join = joinSelect;
-
-    queryParams.fields = columns && collectFieldsFromColumns(
-      columns,
-      idColumnName,
-      joinFields,
-    ) || [];
-
-    return getAll(queryParams);
-  }
-
-  const createButton = <Button
-    size='middle'
-    type="primary"
-    key="create"
-    onClick={() => {
-      // if (popupCreation) {
-      //   setCreatePopupData(createNewDefaultParams);
-      // } else {
-        const newId = getNewId();
-        actionRef?.current?.addEditRecord({
-          [idColumnName]: newId,
-          [KEY_SYMBOL]: newId,
-          ...createNewDefaultParams,
-        }, {
-          position: 'top',
-        });
-      // }
-    }}
-  >
-    <PlusOutlined /> <FormattedMessage id={'table.newButton'} />
-  </Button>;
-
-  return (<>
-    <ProList<Entity>
-      className={useStyles().styles.list}
-      actionRef={actionRef}
-      // todo: fix ts
-      // @ts-ignore
-      request={request}
-      rowKey={record => record[KEY_SYMBOL] ?? record[idColumnName]}
-      bordered
-      search={false}
-      options={{
-        fullScreen: true,
-        reload: true,
-        search: {
-          allowClear: true,
-        },
-      }}
-      editable={{
-        type: 'multiple',
-        editableKeys,
-        onChange: setEditableRowKeys,
-        onValuesChange(entity, data) {
-          setEditableData(data);
-        },
-        async onSave(
-          id,
-          record,
-          origin,
-          newLine,
-        ) {
-          const data = editableData.find(entity => entity[idColumnName] === id) || record;
-          if (newLine) {
-            await onCreate?.({
-              ...pathParams,
-              requestBody: entityToCreateDto(data)
-            });
-          } else {
-            await onUpdate({
-              ...pathParams,
-              ...{ [idColumnName]: String(id) } as Record<keyof Entity, string>,
-              requestBody: entityToUpdateDto({
-                ...pathParams,
-                ...data,
-              }),
-            })
-          }
-
-          if (typeof afterSave === 'function') {
-            await afterSave(data);
-          }
-
-          flushSync(() => {
-            actionRef?.current?.reload();
-          });
-        },
-        async onCancel(
-          id,
-          record,
-          origin,
-        ) {
-          editableData.forEach(entity => {
-            if (entity[idColumnName] === id) {
-              Object.assign(entity, origin);
-            }
-          })
-        },
-        async onDelete(id) {
-          await onDelete({ ...{ [idColumnName]: String(id) } as Record<keyof Entity, string>, ...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) || [],
-        !viewOnly && createButton || null,
-      ]}
-      grid={{ gutter: 16, column: 1 }}
-      metas={metas}
-      {...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 ?? []}*/}
-    {/*/>*/}
-  </>);
-};
-
-export default List;

package/src/components/List/index.ts

@@ -1,3 +0,0 @@
-export * from './List';
-export { default as List } from './List';
-export * from './listTypes';

package/src/components/List/listTypes.ts

@@ -1,31 +0,0 @@
-import { MutableRefObject } from "react";
-import { ActionType } from "@ant-design/pro-table";
-import { QuerySortArr } from "@nestjsx/crud-request";
-import { RowEditableConfig } from "@ant-design/pro-utils";
-import { ProListProps } from "@ant-design/pro-components";
-import { TFilterParams, TGetAllParams, TSearchableColumn } from "../Table";
-
-export interface TListProps<
-  Entity,
-  CreateDto,
-  UpdateDto,
-  TEntityParams = {},
-  TPathParams = {}
-  > extends ProListProps<Entity, TEntityParams & TFilterParams> {
-  getAll: ({}: TGetAllParams & TPathParams) => Promise<{ data: Entity[] }>,
-  onCreate?: ({}: { requestBody: CreateDto } & TPathParams) => Promise<Entity>,
-  onUpdate: ({}: Record<keyof Entity, string> & { requestBody: UpdateDto } & TPathParams) => Promise<Entity>,
-  onDelete: ({}: Record<keyof Entity, string> & TPathParams) => Promise<void>,
-  pathParams: TPathParams,
-  idColumnName?: string & keyof Entity,
-  entityToCreateDto: (entity: Entity) => CreateDto,
-  entityToUpdateDto: (entity: Entity) => UpdateDto,
-  createNewDefaultParams?: Partial<Entity>,
-  afterSave?: (record: Entity) => Promise<void>,
-  actionRef?: MutableRefObject<ActionType | undefined>,
-  editable?: RowEditableConfig<Entity>,
-  defaultSort?: QuerySortArr,
-  searchableColumns?: TSearchableColumn[],
-  popupCreation?: boolean,
-  viewOnly?: boolean,
-}

package/src/components/QuestionMarkHint/QuestionMarkHint.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-import { Popover } from "antd";
-import { QuestionCircleTwoTone } from "@ant-design/icons";
-import { PrimitiveType } from "intl-messageformat";
-import { useIntl } from "react-intl";
-
-export const QuestionMarkHint: React.FC<{
-  intlPrefix: string,
-  values?: Record<string, PrimitiveType | React.ReactElement>
-}> = ({
-  intlPrefix,
-  values,
-}) => {
-  const intl = useIntl();
-  return (
-    <Popover
-      content={(
-        <div
-          style={{
-            maxWidth: 300,
-          }}
-        >{intl.formatMessage({ id: `${intlPrefix}.hint.message` }, values)}</div>
-      )}
-      title={intl.formatMessage({ id: `${intlPrefix}.hint.title` })}
-      trigger={['hover', 'click']}
-      zIndex={1080}
-    >
-      <QuestionCircleTwoTone />
-    </Popover>
-  )
-}
-
-export default QuestionMarkHint;

package/src/components/QuestionMarkHint/index.ts

@@ -1 +0,0 @@
-export * from './QuestionMarkHint';

package/src/components/Table/BulkDeleteButton.tsx

@@ -1,55 +0,0 @@
-import { Button, Popconfirm } from "antd";
-import { LoadingOutlined } from "@ant-design/icons";
-import { TGetAllParams } from "./tableTypes";
-import { createStyles } from "antd-style";
-import { useState } from "react";
-
-const useStyles = createStyles(() => {
-  return {
-    popconfirm: {
-      '.ant-popconfirm-description': {
-        marginTop: '0 !important',
-      },
-    }
-  }
-})
-
-const BulkDeleteButton = <Entity extends Record<string | symbol, any>, TPathParams>(
-  {
-    selectedRecords,
-    lastRequest,
-    allSelected,
-    onDelete,
-  } : {
-    selectedRecords: Entity[],
-    allSelected: boolean,
-    lastRequest: [TGetAllParams & TPathParams, any] | [],
-    onDelete: () => Promise<void>
-  }) => {
-  const { styles } = useStyles();
-  const [loading, setLoading] = useState(false);
-  const recordsCount = allSelected ? lastRequest[1].total : selectedRecords.length;
-
-  return (<>
-    <Popconfirm
-      overlayClassName={styles.popconfirm}
-      title={false}
-      description={`Are you sure you want to delete ${recordsCount} ${recordsCount === 1 ? 'record' : 'records'}?`}
-      onConfirm={() => {
-        setLoading(true);
-        onDelete().finally(() => setLoading(false));
-      }}
-      okText="Yes"
-      cancelText="No"
-    >
-      <Button
-        disabled={recordsCount === 0}
-      >
-        {recordsCount > 0 ? `Delete ${recordsCount} ${recordsCount === 1 ? 'Record' : 'Records'}` : 'Bulk Delete'}
-        {loading && <LoadingOutlined />}
-      </Button>
-    </Popconfirm>
-  </>);
-};
-
-export default BulkDeleteButton;

package/src/components/Table/BulkEditButton.tsx

@@ -1,160 +0,0 @@
-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: any[]) => !editableKeys.has(column.dataIndex as string) ? '(This field will not be changed)' : (column.render as Function)(...params),
-              editable: false,
-              title: (
-                <Checkbox
-                  checked={editableKeys.has(column.dataIndex as string)}
-                  onChange={e => handleCheckboxChange(column.dataIndex as string, e.target.checked)}
-                >
-                  {column.title as React.ReactNode}
-                </Checkbox>
-              ),
-            }))}
-          />
-        )
-      })}
-    </Modal>
-  );
-}
-
-const BulkEditButton = <Entity extends Record<string | symbol, any>, TPathParams>(
-  {
-    selectedRecords,
-    lastRequest,
-    allSelected,
-    columns,
-    idColumnName,
-    onSubmit,
-  } : {
-    selectedRecords: Entity[],
-    lastRequest: [TGetAllParams & TPathParams, 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/CreateEntityModal.tsx

@@ -1,85 +0,0 @@
-import { ProColumns } from "@ant-design/pro-components";
-import { Button, Modal } from "antd";
-import { MutableRefObject, useRef } from "react";
-import { Descriptions, DescriptionsRefType } from "../Descriptions";
-import { buildFieldsFromColumnsForDescriptionsDisplay } from "./tableTools";
-
-export interface CreateEntityModalProps<Entity> {
-  /** Whether the modal is visible */
-  open?: boolean;
-  /** The entity (or partial entity) data to edit */
-  entity: Partial<Entity> | undefined;
-  /** Modal title */
-  title: string;
-  /** Main title for the Descriptions component */
-  mainTitle?: ProColumns<Entity>['title'] | null;
-  /** Table columns used to render the fields */
-  columns: any[];
-  /** Column key (or keys) used as an ID */
-  idColumnName: string | string[];
-  /** Called when the modal is cancelled (closed) */
-  onCancel: () => void;
-  /**
-   * Called when the form is submitted.
-   * Receives the validated form data.
-   */
-  onSubmit: (data: any, descriptionsRef: MutableRefObject<DescriptionsRefType<Entity>>) => Promise<void>;
-}
-
-export function CreateEntityModal<
-  Entity,
-  CreateDto = Entity,
-  UpdateDto = Entity,
-  TPathParams = object
->({
-  entity,
-  open = entity !== undefined,
-  title,
-  mainTitle,
-  columns,
-  idColumnName,
-  onCancel,
-  onSubmit,
-}: CreateEntityModalProps<Entity>) {
-  const descriptionsRef = useRef<DescriptionsRefType<Entity>>(null);
-
-  // Calculate the editable keys from the columns and idColumnName
-  const editableKeys = [...buildFieldsFromColumnsForDescriptionsDisplay(columns, idColumnName)];
-
-  return (
-    <Modal
-      title={title}
-      open={open}
-      width="80%"
-      closeIcon={true}
-      footer={[
-        <Button key="submit" type="primary" onClick={() => descriptionsRef.current?.submit()}>
-          Create
-        </Button>,
-      ]}
-      onCancel={() => {
-        descriptionsRef.current?.reset();
-        onCancel();
-      }}
-    >
-      <Descriptions<Entity, CreateDto, UpdateDto, TPathParams>
-        ref={descriptionsRef}
-        mainTitle={mainTitle}
-        columns={columns ?? []}
-        entity={entity}
-        size="small"
-        bordered
-        column={2}
-        style={{ marginBottom: 20 }}
-        labelStyle={{ width: '15%' }}
-        contentStyle={{ width: '25%' }}
-        canEdit={true}
-        onCreate={(data) => onSubmit(data, descriptionsRef)}
-        editable={{
-          editableKeys,
-          actionRender: () => [],
-        }}
-      />
-    </Modal>
-  );
-}

package/src/components/Table/DeleteButton.tsx

@@ -1,44 +0,0 @@
-import { Popconfirm, Tooltip } from "antd";
-import { DeleteOutlined, LoadingOutlined } from "@ant-design/icons";
-import { createStyles } from "antd-style";
-import { useState } from "react";
-import { useIntl } from "react-intl";
-
-const useStyles = createStyles(() => {
-  return {
-    popconfirm: {
-      '.ant-popconfirm-description': {
-        marginTop: '0 !important',
-      },
-    }
-  }
-})
-
-const DeleteButton = (
-  {
-    onDelete,
-  }: {
-    onDelete: () => Promise<void>
-  }) => {
-  const {styles} = useStyles();
-  const [loading, setLoading] = useState(false);
-  const intl = useIntl();
-
-  return (<a key="deleteButton">
-      {!loading && <Popconfirm
-        overlayClassName={styles.popconfirm}
-        title={false}
-        description={intl.formatMessage({id: "table.deletePopconfirmMessage"})}
-        onConfirm={() => {
-          setLoading(true);
-          onDelete().finally(() => setLoading(false));
-        }}>
-        <Tooltip title={intl.formatMessage({id: "table.deleteText"})}>
-          <DeleteOutlined/>
-        </Tooltip>
-      </Popconfirm>}
-      {loading && <LoadingOutlined/>}
-    </a>
-  );
-};
-export default DeleteButton;