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

package/src/components/ChangesModal/ErrorsTab.tsx

@@ -1,49 +0,0 @@
-import { List, Tag } from "antd";
-import { TServerErrorItem } from "./ChangesModal";
-
-const formatField = (field: string) => {
-  const parts = field.split(".");
-  if (parts[0] === "new" && parts.length >= 3) {
-    const idx = Number(parts[1]);
-    return `New #${isNaN(idx) ? parts[1] : idx + 1}: ${parts.slice(2).join(".")}`;
-  }
-  if (parts[0] === "updated" && parts.length >= 3) {
-    const id = parts[1];
-    return `Updated ${id}: ${parts.slice(2).join(".")}`;
-  }
-  return field;
-};
-
-const ErrorsTab = ({
-                     serverErrors,
-                   }: {
-  serverErrors: TServerErrorItem[],
-}) => {
-  if (serverErrors.length === 0) {
-    return <div>No errors</div>;
-  }
-
-  return (
-    [
-      <p key='errors-header'>Please fix the following errors and repeat import</p>,
-      <List
-        key='errors-list'
-        size="small"
-        dataSource={serverErrors}
-        renderItem={(err, idx) => (
-          <List.Item key={idx}>
-            <div style={{ display: "flex", flexDirection: "column", gap: 4, width: "100%" }}>
-              {err.field && <div>
-                <Tag color="error">{formatField(err.field)}</Tag>
-              </div>}
-              <div>{err.message}</div>
-              {err.field && <div style={{ color: "#999" }}>({err.field})</div>}
-            </div>
-          </List.Item>
-        )}
-      />,
-    ]
-  );
-};
-
-export default ErrorsTab;

package/src/components/ChangesModal/NewRecordsTab.tsx

@@ -1,48 +0,0 @@
-import { ProColumns } from "@ant-design/pro-components";
-import { TDiffResult } from "../Table/useImportExport";
-import ProTable from "@ant-design/pro-table";
-import useColumnsSets, { TColumnsSet } from "../Table/useColumnsSets";
-
-export type TCreatedRecordsColumnsConfig<Entity> = {
-  columnsSets?: TColumnsSet<Entity>[],
-  columns: ProColumns<Entity>[],
-}
-
-function NewRecordsTab<Entity>({
-                                 created,
-                                 createdRecordsColumnsConfig,
-                               }: {
-  created: TDiffResult<Entity>['created'],
-  createdRecordsColumnsConfig: TCreatedRecordsColumnsConfig<Entity>,
-}) {
-  const { columns, columnsSets } = createdRecordsColumnsConfig;
-
-  const {
-    columnsSetSelect,
-    columnsState,
-  } = useColumnsSets<Entity>({
-    columns,
-    columnsSets,
-  });
-
-  if (!created.length) {
-    return <p>No new records found.</p>
-  }
-
-  return [
-    <h3 key='new-records-header'>New Records (Local Comparing)</h3>,
-    <ProTable<Entity>
-      key='new-records-data'
-      dataSource={created}
-      columns={columns}
-      columnsState={columnsState}
-      toolBarRender={(...args) => [
-        columnsSetSelect?.() || null,
-      ]}
-      rowKey={(record, index) => index}
-      search={false}
-    />,
-  ];
-}
-
-export default NewRecordsTab;

package/src/components/ChangesModal/ResultsTab.tsx

@@ -1,28 +0,0 @@
-import { CheckCircleOutlined, SyncOutlined } from "@ant-design/icons";
-
-type TImportStatistic = {
-  created: number;
-  updated: number;
-}
-
-const ResultsTab = ({
-  importStatistic
-                    }: {
-  importStatistic: TImportStatistic
-}) => {
-  return [
-    <h3 key='results-header'>Import Results</h3>,
-    <div key='results-data' style={{ display: "flex", gap: "16px", alignItems: "center" }}>
-      <div style={{ display: "flex", alignItems: "center" }}>
-        <CheckCircleOutlined style={{ color: "#52c41a", marginRight: "8px" }} />
-        <span>Created: {importStatistic.created}</span>
-      </div>
-      <div style={{ display: "flex", alignItems: "center" }}>
-        <SyncOutlined style={{ color: "#1890ff", marginRight: "8px" }} />
-        <span>Updated: {importStatistic.updated}</span>
-      </div>
-    </div>
-  ]
-}
-
-export default ResultsTab;

package/src/components/ChangesModal/index.ts

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

package/src/components/Comment/Comment.tsx

@@ -1,53 +0,0 @@
-import dayjs from "dayjs";
-import { createStyles } from "antd-style";
-import CommentAvatar from "./CommentAvatar";
-
-export interface AuthorProps {
-  id: string;
-  name: string;
-}
-
-interface CommentProps {
-  key: string;
-  content: string;
-  author: AuthorProps;
-  date: string;
-}
-
-const useStyles = createStyles(() => {
-  return {
-    /**
-     * Styles for the ant-descriptions component to show edit icon on hover
-     */
-    commentStyles: {
-      display: 'flex',
-      alignItems: 'flex-start',
-      gap: '10px'
-    }
-  }
-})
-
-const Comment: React.FC<CommentProps> = ({
-  content,
-  author,
-  date,
-  ...rest
-}) => {
-  const { styles } = useStyles();
-
-  return (
-    <div
-      className={styles.commentStyles}
-      {...rest}
-    >
-      <CommentAvatar author={author} />
-      <div>
-        <strong>{author.name}</strong>
-        <p>{content}</p>
-        <small style={{ color: '#888' }}>{dayjs(date).format('DD.MM.YYYY HH:mm')}</small>
-      </div>
-    </div>
-  );
-};
-
-export default Comment;

package/src/components/Comment/CommentAvatar.tsx

@@ -1,34 +0,0 @@
-import { Avatar } from "antd";
-import { AuthorProps } from "./Comment";
-import React from "react";
-
-interface CommentProps {
-  author: AuthorProps;
-}
-
-const ColorList = [
-  '#f56a00',
-  '#7265e6',
-  '#ffbf00',
-  '#00a2ae',
-  '#b45d7e',
-  '#ace665',
-  '#6e3aaf',
-  '#54ae00'
-];
-
-const getColorByAuthor = (authorId: string) => {
-  return ColorList[parseInt(authorId, 36) % ColorList.length]
-}
-
-const CommentAvatar: React.FC<CommentProps> = ({
-  author,
-}) => {
-  return (
-    <Avatar style={{ backgroundColor: getColorByAuthor(author.id), verticalAlign: 'middle', flexShrink: 0 }} size="large">
-      {author.name.slice(0, 1)}
-    </Avatar>
-  );
-};
-
-export default CommentAvatar;

package/src/components/Comment/CommentForm.tsx

@@ -1,36 +0,0 @@
-import React, { useState } from 'react';
-import { Form, Input, Button } from 'antd';
-
-interface CommentFormProps {
-  onSubmit: (content: string) => void;
-}
-
-const CommentForm: React.FC<CommentFormProps> = ({ onSubmit }) => {
-  const [content, setContent] = useState('');
-
-  const handleSubmit = () => {
-    if (content.trim()) {
-      onSubmit(content);
-      setContent('');
-    }
-  };
-
-  return (
-    <Form layout="vertical" onFinish={handleSubmit}>
-      <div>
-        <Form.Item label="Leave a comment:">
-          <Input.TextArea
-            value={content}
-            onChange={(e) => setContent(e.target.value)}
-            autoSize={{ minRows: 3, maxRows: 6 }}
-          />
-        </Form.Item>
-      </div>
-      <Button type="primary" htmlType="submit" style={{ width: 100 }}>
-        Send
-      </Button>
-    </Form>
-  );
-};
-
-export default CommentForm;

package/src/components/Comment/CommentFormModal.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { Modal } from 'antd';
-import CommentForm from "./CommentForm";
-
-interface CommentFormProps {
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
-  onSubmit: (content: string) => void;
-  children?: React.ReactNode;
-  title?: string;
-}
-
-const CommentFormModal: React.FC<CommentFormProps> = ({ setIsOpen, isOpen, onSubmit, children, title = 'Add comment' }) => {
-  return (
-    <Modal
-      title={title}
-      open={isOpen}
-      width={800}
-      closeIcon={true}
-      footer={null}
-      onCancel={() => {
-        setIsOpen(false);
-      }}
-    >
-      {children}
-      <CommentForm onSubmit={onSubmit} />
-    </Modal>
-  );
-};
-
-export default CommentFormModal;

package/src/components/Descriptions/Descriptions.tsx

@@ -1,351 +0,0 @@
-import { ActionType } from "@ant-design/pro-table";
-import React, { Key, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { Badge, Button, Result, Tabs, TabsProps, Tooltip } from "antd";
-import { DeleteOutlined, StopOutlined } from "@ant-design/icons";
-import { FormattedMessage, useIntl } from "react-intl";
-import { DescriptionsRefType, FieldsEdit, TDescriptionsProps, TGetOneParams } from "./descriptionTypes";
-import { PageLoading, ProDescriptions } from "@ant-design/pro-components";
-import { columnsToDescriptionItemProps, TDescriptionSection } from "./useDescriptionColumns";
-import pick from "lodash/pick";
-import safetyRun from "../../tools/safetyRun";
-import {
-  buildFieldsFromColumnsForDescriptionsDisplay,
-  buildJoinFields,
-  collectFieldsFromColumns,
-} from "../Table";
-import { RowEditableConfig } from "@ant-design/pro-utils";
-import { useForm } from "antd/es/form/Form";
-import useContentViewMode, { VIEW_MODE_TYPE } from "./useContentViewMode";
-import { createStyles } from "antd-style";
-import { debounce } from "lodash";
-import { NamePath } from "antd/lib/form/interface";
-import { FieldData } from "rc-field-form/lib/interface";
-
-const useStyles = createStyles(({css}) => {
-  return {
-    antDescriptionsStyles: css`
-      .ant-descriptions-item-content {
-        .anticon-edit {
-          opacity: 0;
-          transition: opacity 200ms;
-        }
-
-        &:hover {
-          .anticon-edit {
-              opacity: 1;
-          }
-        }
-      }
-    `
-  }
-})
-
-const DescriptionsComponent = <Entity extends Record<string | symbol, any>,
-  CreateDto = Entity,
-  UpdateDto = Entity,
-  TPathParams = object,
->(
-  {
-    mainTitle = 'General',
-    entity,
-    getOne,
-    onUpdate,
-    onCreate,
-    pathParams,
-    idColumnName = 'id',
-    entityToUpdateDto,
-    afterSave,
-    actionRef: actionRefProp,
-    editable,
-    canEdit = false,
-    fieldsEditType = FieldsEdit.Single,
-    columns,
-    params,
-    onEntityChange,
-    contentViewMode: contentViewModeProp,
-    ...rest
-  }: TDescriptionsProps<Entity,
-    CreateDto,
-    UpdateDto,
-    TPathParams>,
-  ref: React.Ref<DescriptionsRefType<Entity>>,
-) => {
-  const { styles } = useStyles();
-
-  let [form] = useForm<Entity>();
-  if (!editable?.form) {
-    editable = {
-      ...editable,
-      form,
-    }
-  }
-  form = editable.form;
-
-  const actionRefComponent = useRef<ActionType>();
-  const actionRef = actionRefProp || actionRefComponent;
-  const intl = useIntl();
-  const [data, setData] = useState<Partial<Entity> | undefined>(entity);
-  const [loading, setLoading] = useState(false);
-
-  const sections = columnsToDescriptionItemProps(columns, mainTitle);
-
-  const recalculateErrors = () => {
-    // Recalculate the error count per section (tab) after validation
-    const newErrorsPerSection = new Map<string, number>();
-    sections.forEach((section) => {
-      let errorCount = 0;
-      section.columns.forEach((column) => {
-        if (form.getFieldError(column.dataIndex as NamePath<Entity>)?.length > 0) {
-          errorCount++;
-        }
-      });
-      newErrorsPerSection.set(section.key, errorCount);
-    });
-    setErrorsPerSection(newErrorsPerSection);
-  }
-
-  const columnDataIndexToSection = sections.reduce((acc, section) => {
-    section.columns.forEach(column => {
-      if (Array.isArray(column.dataIndex)) {
-        throw new Error('We only support simple dataIndex for now');
-      }
-
-      acc.set(column.dataIndex, section);
-    })
-    return acc;
-  }, new Map<Key, TDescriptionSection<Entity>>());
-
-  const {
-    contentViewModeButton,
-    contentViewMode
-  } = useContentViewMode({
-    mode: contentViewModeProp || (sections.length > 1 ? VIEW_MODE_TYPE.TABS : VIEW_MODE_TYPE.GENERAL)
-  });
-  const [errorsPerSection, setErrorsPerSection] = useState<Map<TDescriptionSection<Entity>['key'], number>>(
-    new Map(sections.map(section => [section.key, 0]))
-  );
-
-  const handleSubmit = async () => {
-    try {
-      // Validate all fields in the form
-      const data = await form.validateFields();
-      // Let the parent component handle the submit logic
-      await onCreate(data);
-    } catch (error) {
-      console.error('Validation or submission failed:', error);
-    } finally {
-      recalculateErrors();
-    }
-  };
-
-  const handleUpdate = async () => {
-    try {
-      // Validate all fields in the form
-      const data = await form.validateFields();
-      // Let the parent component handle the update logic
-      return onSave(null, data, null);
-    } catch (error) {
-      console.error('Validation or submission failed:', error);
-      throw error;
-    } finally {
-      recalculateErrors();
-    }
-  };
-
-  useImperativeHandle(ref, () => ({
-    reset: () => {
-      setErrorsPerSection(new Map(sections.map(section => [section.key, 0])));
-      form.resetFields();
-    },
-    submit: () => handleSubmit(),
-    update: () => handleUpdate(),
-    setFieldErrors: (fields: FieldData<Entity>[]) => {
-      form.setFields(fields)
-    }
-  }));
-
-  const onValuesChange = debounce((changedValues, allValues) => {
-    let key = Object.keys(changedValues)[0];
-
-    // changedValues = {} if we clear select value
-    if (!key) {
-      const previousValues = form.getFieldsValue(true);
-      key = Object.keys(previousValues).find((field) => !(field in allValues));
-    }
-
-    form.validateFields([key])
-      .finally(() => {
-        const section = columnDataIndexToSection.get(key);
-        const dataIndexes = section.columns.map(column => {
-          return Array.isArray(column.dataIndex) ? column.dataIndex.join('.') : column.dataIndex;
-        });
-
-        const errorsNumber = form.getFieldsError(dataIndexes as NamePath<Entity>[]).reduce((acc, field) => acc + field.errors.length, 0);
-        setErrorsPerSection((prev) => {
-          const updated = new Map(prev);
-          updated.set(section.key, errorsNumber);
-          return updated;
-        });
-      });
-  }, 500);
-
-  const queryParams = useMemo(() => {
-    const join = params?.join;
-    const queryParams: TGetOneParams & TPathParams = {
-      ...(pathParams ?? {} as TPathParams),
-    };
-
-    const { joinSelect, joinFields } = buildJoinFields(join);
-    queryParams.join = joinSelect;
-    queryParams.fields = collectFieldsFromColumns(
-      columns,
-      idColumnName,
-      joinFields,
-    );
-
-    return queryParams;
-  }, [params, pathParams]);
-
-  const getKey = (index: number) =>
-    index + String(pathParams?.[idColumnName as keyof TPathParams])
-
-  const requestData = async () => {
-    if (!getOne) {
-      return;
-    }
-
-    setLoading(true);
-
-    try {
-      const record = await getOne(queryParams);
-      onEntityChange?.(record);
-      setData(record ?? undefined);
-    } catch (e) {
-      console.error(e);
-      setData(undefined);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  const onSave: RowEditableConfig<Entity>['onSave'] = async (propName, record) => {
-    try {
-      await form.validateFields();
-      if (onUpdate && entityToUpdateDto) {
-        await onUpdate({
-          ...queryParams,
-          ...{} as Partial<Entity>,
-          requestBody: entityToUpdateDto(
-            propName === null
-              ? record
-              : pick(record, [propName as keyof Entity])
-          ),
-        });
-      }
-
-      setData(record);
-      if (typeof afterSave === 'function') {
-        await afterSave(record);
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  useEffect(() => {
-    safetyRun(requestData());
-  }, [])
-
-  useEffect(() => {
-    setData(entity);
-    form.setFieldsValue(entity);
-  }, [entity])
-
-  if (loading) {
-    return <PageLoading />;
-  }
-
-  if (!data) {
-    return (
-      <Result
-        status="404"
-        title="404"
-        subTitle="The entity is not found."
-      />
-    );
-  }
-
-  const formProps = contentViewMode === VIEW_MODE_TYPE.TABS ? {
-    onValuesChange,
-  } : undefined;
-
-  const contentViewSwitcher = sections.length > 1 ? contentViewModeButton : undefined;
-  const descriptions = sections.map((section, index) => {
-    return <ProDescriptions<Entity>
-      key={getKey(index)}
-      title={section.title as React.ReactNode}
-      actionRef={actionRef}
-      size={"small"}
-      bordered
-      loading={loading}
-      style={{ marginBottom: 20 }}
-      labelStyle={{ width: '15%' }}
-      dataSource={data as Entity}
-      className={styles.antDescriptionsStyles}
-      editable={canEdit ? {
-        type: 'multiple',
-        onSave,
-        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>,
-        ...(fieldsEditType === FieldsEdit.All && {
-          editableKeys: [...buildFieldsFromColumnsForDescriptionsDisplay(columns, idColumnName)],
-          actionRender: () => [],
-        }),
-        ...editable,
-      } : undefined}
-      columns={section.columns}
-      extra={contentViewMode === VIEW_MODE_TYPE.GENERAL && index === 0 ? contentViewSwitcher : undefined}
-      formProps={formProps}
-      {...rest}
-    />;
-  });
-
-  if (contentViewMode === VIEW_MODE_TYPE.GENERAL) {
-    return descriptions;
-  }
-
-  const tabsItems: TabsProps['items'] = sections.map((section, index) => {
-    return {
-      key: getKey(index),
-      label: (
-        <Badge
-          size='small'
-          overflowCount={5}
-          count={errorsPerSection.get(section.key)}
-        >
-          {section.title as React.ReactNode}
-        </Badge>
-      ),
-      forceRender: true,
-      children: descriptions[index],
-    }
-  });
-
-  return <Tabs
-    defaultActiveKey="0"
-    items={tabsItems}
-    tabBarExtraContent={contentViewModeButton}
-  />;
-};
-
-const Descriptions = React.forwardRef(DescriptionsComponent) as <Entity extends Record<string | symbol, any>,
-  CreateDto = Entity,
-  UpdateDto = Entity,
-  TPathParams = object>(
-  props: TDescriptionsProps<Entity, CreateDto, UpdateDto, TPathParams>
-) => React.ReactElement;
-
-export default Descriptions;

package/src/components/Descriptions/DescriptionsCreateModal.tsx

@@ -1,65 +0,0 @@
-import { useEffect, useMemo } from "react";
-import { Button, Modal } from "antd";
-import { TDescriptionsCreateModalProps } from "./descriptionTypes";
-import { ProDescriptions } from "@ant-design/pro-components";
-import { columnsToDescriptionItemProps } from "./useDescriptionColumns";
-import { useForm } from "antd/es/form/Form";
-import { buildFieldsFromColumnsForDescriptionsDisplay } from "../Table";
-
-const DescriptionsCreateModal = <Entity extends Record<string | symbol, any>>({
-  idColumnName,
-  columns,
-  data,
-  onClose,
-  onSubmit,
-...rest
-}: TDescriptionsCreateModalProps<Entity>) => {
-  const sections = columnsToDescriptionItemProps(columns, 'General');
-  const [form] = useForm();
-
-  const editableKeys = useMemo(() => {
-    return [
-      ...buildFieldsFromColumnsForDescriptionsDisplay(
-        columns,
-        idColumnName,
-      ),
-    ];
-  }, [columns, idColumnName]);
-
-  useEffect(() => {
-    data ? form.setFieldsValue(data) : form.resetFields();
-  }, [data]);
-
-  return (
-    <Modal
-      open={data !== undefined}
-      onCancel={onClose}
-      width='80%'
-      footer={[
-        <Button key='submit' type="primary" onClick={async () => form.validateFields().then(onSubmit)}>Create</Button>
-      ]}
-    >
-      {sections.map((section, index) => (
-        <ProDescriptions<Entity>
-          key={index + (Array.isArray(idColumnName) ? idColumnName.join('-') : idColumnName)}
-          title={section.title as React.ReactNode}
-          size={"small"}
-          bordered
-          column={2}
-          style={{ marginBottom: 20 }}
-          labelStyle={{ width: '15%' }}
-          contentStyle={{ width: '25%' }}
-          editable={{
-            form,
-            editableKeys,
-            actionRender: () => [],
-          }}
-          columns={section.columns}
-          {...rest}
-        />
-      ))}
-    </Modal>
-  );
-};
-
-export default DescriptionsCreateModal;