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

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/Comment/index.ts

@@ -1,5 +0,0 @@
-export * from './Comment';
-export * from './CommentAvatar';
-export * from './CommentForm';
-export * from './CommentFormModal';
-export { default as Comment } from './Comment';

package/src/components/Descriptions/Descriptions.tsx

@@ -1,328 +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 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 {
-      // 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);
-    }
-  };
-
-  useImperativeHandle(ref, () => ({
-    reset: () => {
-      setErrorsPerSection(new Map(sections.map(section => [section.key, 0])));
-      form.resetFields();
-    },
-    submit: () => handleSubmit(),
-    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(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;

package/src/components/Descriptions/descriptionTypes.ts

@@ -1,73 +0,0 @@
-import React, { MutableRefObject } from "react";
-import { ActionType } from "@ant-design/pro-table";
-import { RowEditableConfig } from "@ant-design/pro-utils";
-import { QueryJoin } from "@nestjsx/crud-request";
-import { ProColumns } from "@ant-design/pro-components";
-import { ProDescriptionsProps } from "@ant-design/pro-descriptions";
-import { FieldData } from "rc-field-form/lib/interface";
-import { VIEW_MODE_TYPE } from "./useContentViewMode";
-
-export type TGetOneParams = {
-  /**
-   * Selects resource fields. <a href="https://github.com/nestjsx/crud/wiki/Requests#select" target="_blank">Docs</a>
-   */
-  fields?: Array<string>,
-  /**
-   * Adds relational resources. <a href="https://github.com/nestjsx/crud/wiki/Requests#join" target="_blank">Docs</a>
-   */
-  join?: Array<string>,
-  /**
-   * Reset cache (if was enabled). <a href="https://github.com/nestjsx/crud/wiki/Requests#cache" target="_blank">Docs</a>
-   */
-  cache?: number,
-}
-export type TDescriptionGetRequestParams = {
-  join?: QueryJoin | QueryJoin[];
-};
-
-export type DescriptionsRefType<Entity> = {
-  reset: () => void;
-  submit: () => void;
-  setFieldErrors: (fields: FieldData<Entity>[]) => void;
-};
-
-export enum FieldsEdit {
-  Single = 'single',
-  All = 'all'
-}
-
-export type TDescriptionsProps<Entity, CreateDto, UpdateDto, TPathParams = object> = {
-  mainTitle?: ProColumns<Entity>['title'] | null,
-  entity?: Partial<Entity>,
-  getOne?: ({}: TGetOneParams & TPathParams) => Promise<Entity | null>,
-  onUpdate?: ({}: Partial<Entity> & {
-    requestBody: UpdateDto,
-    index?: number,
-  } & TPathParams) => Promise<Entity>,
-  onCreate?: (data: Partial<Entity>) => Promise<void>;
-  onDelete?: ({}: Partial<Entity> & TPathParams) => Promise<void>,
-  pathParams?: TPathParams,
-  idColumnName?: string & keyof Entity,
-  entityToUpdateDto?: (entity: Entity) => UpdateDto,
-  createNewDefaultParams?: Partial<Entity>,
-  afterSave?: (record: Entity) => Promise<void>,
-  actionRef?: MutableRefObject<ActionType | undefined>,
-  editable?: RowEditableConfig<Entity>,
-  canEdit?: boolean,
-  fieldsEditType?: FieldsEdit,
-  params?: TDescriptionGetRequestParams,
-  columns: ProColumns<Entity>[],
-  onEntityChange?: (entity: Entity | null) => void;
-  contentViewMode?: VIEW_MODE_TYPE,
-  ref?: React.Ref<DescriptionsRefType<Entity>>,
-} & Omit<ProDescriptionsProps<Entity>, 'columns'>;
-
-export type TDescriptionsCreateModalProps<Entity> = Omit<ProDescriptionsProps<Entity>, 'columns'> & {
-  modalTitle?: string,
-  mainTitle?: ProColumns<Entity>['title'] | null,
-  idColumnName: string & keyof Entity | (string & keyof Entity)[],
-  columns: ProColumns<Entity>[],
-  data: Partial<Entity> | undefined,
-  onSubmit: (data: Entity) => Promise<void>,
-  onClose: () => void,
-}

package/src/components/Descriptions/index.ts

@@ -1,5 +0,0 @@
-export * from './Descriptions';
-export { default as Descriptions } from './Descriptions';
-export * from './DescriptionsCreateModal';
-export * from './descriptionTypes';
-export * from './useDescriptionColumns';

package/src/components/Descriptions/useContentViewMode.tsx

@@ -1,28 +0,0 @@
-import { Button, Tooltip } from "antd";
-import { AppstoreOutlined, MenuOutlined } from "@ant-design/icons";
-import { useState } from "react";
-
-export enum VIEW_MODE_TYPE {
-  TABS = 'tabs',
-  GENERAL = 'general'
-}
-
-export default function useContentViewMode({
-  mode,
-}: {
-  mode?: VIEW_MODE_TYPE;
-} = {}) {
-  const [contentViewMode, setContentViewMode] = useState<VIEW_MODE_TYPE>(mode || VIEW_MODE_TYPE.GENERAL);
-
-  const contentViewModeButton = <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 ? <MenuOutlined /> : <AppstoreOutlined />}
-      onClick={() => setContentViewMode(contentViewMode === VIEW_MODE_TYPE.TABS ? VIEW_MODE_TYPE.GENERAL : VIEW_MODE_TYPE.TABS)}
-    />
-  </Tooltip>;
-
-  return { contentViewMode, contentViewModeButton };
-}