@boarteam/boar-pack-common-frontend 2.10.0 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boarteam/boar-pack-common-frontend",
-  "version": "2.10.0",
+  "version": "3.1.0",
   "description": "Common frontend package for Boar Pack",
   "repository": "git@github.com:boarteam/boar-pack.git",
   "author": "Andrew Balakirev <balakirev.andrey@gmail.com>",
@@ -26,7 +26,8 @@
   },
   "dependencies": {
     "@nestjsx/crud-request": "^5.0.0-alpha.3",
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
+    "uuid": "^11.1.0"
   },
   "devDependencies": {
     "@ant-design/icons": "^4.8.3",
@@ -46,5 +47,5 @@
   "scripts": {
     "yalc:push": "yalc push"
   },
-  "gitHead": "103534abbe12f409d96c929dd462837ec83b4ee7"
+  "gitHead": "008e1d42d47532005e1af1909d40befdebff5197"
 }

package/src/components/Comment/Comment.tsx

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,5 @@
+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,6 +1,6 @@
 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 { Badge, Button, Form, 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";
@@ -21,7 +21,7 @@ import { debounce } from "lodash";
 import { NamePath } from "antd/lib/form/interface";
 import { FieldData } from "rc-field-form/lib/interface";
 
-const useStyles = createStyles(({css}) => {
+const useStyles = createStyles(({ css }) => {
   return {
     antDescriptionsStyles: css`
       .ant-descriptions-item-content {
@@ -62,6 +62,7 @@ const DescriptionsComponent = <Entity extends Record<string | symbol, any>,
     columns,
     params,
     onEntityChange,
+    conditionalFieldsConfig,
     ...rest
   }: TDescriptionsProps<Entity,
     CreateDto,
@@ -80,13 +81,36 @@ const DescriptionsComponent = <Entity extends Record<string | symbol, any>,
   }
   form = editable.form;
 
+  const watchedValue = conditionalFieldsConfig
+    ? Form.useWatch(conditionalFieldsConfig.field, form)
+    : undefined;
+
+  const filteredColumns = React.useMemo(() => {
+    if (!conditionalFieldsConfig) {
+      return columns;
+    }
+
+    const { field, deps } = conditionalFieldsConfig;
+    const depsList = deps[watchedValue as string];
+
+    if (!depsList?.length) {
+      return columns;
+    }
+
+    // Always include the watched field itself
+    return columns.filter(col => {
+      const idx = col.dataIndex as string;
+      return idx === field || depsList.includes(idx);
+    });
+  }, [columns, watchedValue, conditionalFieldsConfig]);
+
   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 sections = columnsToDescriptionItemProps(filteredColumns, mainTitle);
 
   const columnDataIndexToSection = sections.reduce((acc, section) => {
     section.columns.forEach(column => {

package/src/components/Descriptions/descriptionTypes.ts

@@ -35,7 +35,15 @@ export enum FieldsEdit {
   All = 'all'
 }
 
+export interface ConditionalFieldsConfig {
+  /** Which field to watch */
+  field: string;
+  /** Map of watched-value → array of dataIndex you want to show */
+  deps: Record<string, string[]>;
+}
+
 export type TDescriptionsProps<Entity, CreateDto, UpdateDto, TPathParams = object> = {
+  conditionalFieldsConfig?: ConditionalFieldsConfig;
   mainTitle?: ProColumns<Entity>['title'] | null,
   entity?: Partial<Entity>,
   getOne?: ({}: TGetOneParams & TPathParams) => Promise<Entity | null>,

package/src/components/Table/CreateEntityModal.tsx

@@ -1,7 +1,7 @@
 import { ProColumns } from "@ant-design/pro-components";
 import { Button, Modal } from "antd";
 import { MutableRefObject, useRef } from "react";
-import { Descriptions, DescriptionsRefType } from "../Descriptions";
+import { ConditionalFieldsConfig, Descriptions, DescriptionsRefType } from "../Descriptions";
 import { buildFieldsFromColumnsForDescriptionsDisplay } from "./tableTools";
 
 export interface CreateEntityModalProps<Entity> {
@@ -24,6 +24,8 @@ export interface CreateEntityModalProps<Entity> {
    * Receives the validated form data.
    */
   onSubmit: (data: any, descriptionsRef: MutableRefObject<DescriptionsRefType<Entity>>) => Promise<void>;
+  /** Configuration for conditional fields */
+  conditionalFieldsConfig?: ConditionalFieldsConfig
 }
 
 export function CreateEntityModal<
@@ -40,6 +42,7 @@ export function CreateEntityModal<
   idColumnName,
   onCancel,
   onSubmit,
+  conditionalFieldsConfig,
 }: CreateEntityModalProps<Entity>) {
   const descriptionsRef = useRef<DescriptionsRefType<Entity>>(null);
 
@@ -79,6 +82,7 @@ export function CreateEntityModal<
           editableKeys,
           actionRender: () => [],
         }}
+        conditionalFieldsConfig={conditionalFieldsConfig}
       />
     </Modal>
   );

package/src/components/Table/Table.tsx

@@ -55,6 +55,7 @@ const Table = <Entity extends Record<string | symbol, any>,
     columnsState: managedColumnsState,
     columnsSetSelect: managedColumnsSetSelect,
     popupCreation = false,
+    conditionalFieldsConfig,
     toolBarRender,
     params,
     editPopupTitle,
@@ -120,6 +121,7 @@ const Table = <Entity extends Record<string | symbol, any>,
     createButtonSize: rest.size,
     popupCreation,
     createNewDefaultParams,
+    conditionalFieldsConfig,
   });
 
   const { exportButton, importButton, setLastQueryParams } = useImportExport<TPathParams>({

package/src/components/Table/tableTools.ts

@@ -1,4 +1,5 @@
 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";
@@ -20,7 +21,12 @@ export function getFiltersSearch({
     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))) {
+    if (
+      value === '' ||
+      value === undefined ||
+      col.numeric && !Number.isFinite(Number(value)) ||
+      col.uuid && (typeof value !== 'string' || !uuidValidate(value))
+    ) {
       return;
     }
 
@@ -126,7 +132,10 @@ export function applyKeywordToSearch(
       const field = col.searchField || (Array.isArray(col.field) ? col.field.join('.') : col.field);
       const operator = col.operator;
 
-      if (!col.numeric || Number.isFinite(Number(word))) {
+      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 } });
       }
     });
@@ -146,6 +155,7 @@ export function applyKeywordToSearch(
 export type TIndexableRecord = {
   dataIndex?: Key | Key[];
   children?: TIndexableRecord[] | React.ReactNode;
+  editable?: false;
 };
 
 export function collectFieldsFromColumns<T>(
@@ -166,7 +176,9 @@ export function buildFieldsFromColumnsForDescriptionsDisplay<T>(
     if ('children' in col && Array.isArray(col.children)) {
       buildFieldsFromColumnsForDescriptionsDisplay(col.children, idColumnName, fields);
     }
-    fields.add(String(Array.isArray(col.dataIndex) ? col.dataIndex[0] : col.dataIndex));
+    if (col.editable !== false) {
+      fields.add(String(Array.isArray(col.dataIndex) ? col.dataIndex[0] : col.dataIndex));
+    }
   });
 
   return fields;
@@ -186,7 +198,11 @@ export function buildFieldsFromColumns<T>(
     // skip id column because it is always included by backend
     // and join fields because they are included by join
 
-    const dataIndex = String(Array.isArray(col.dataIndex) ? col.dataIndex[0] : col.dataIndex);
+    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;
     }

package/src/components/Table/tableTypes.ts

@@ -6,6 +6,7 @@ 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 { ConditionalFieldsConfig } from "../Descriptions";
 
 export type IWithId = {
   id: string | number,
@@ -53,7 +54,7 @@ export type TGetAllParams = {
   cache?: number,
 }
 export type TFilters = {
-  [key: string]: number | string | boolean | (string | number)[] | null;
+  [key: string]: number | string | boolean | (string | number | boolean)[] | null;
 }
 
 export type TGetRequestParams = {
@@ -78,6 +79,7 @@ export type TSearchableColumn = {
   filterField?: string,
   filterOperator?: typeof Operators[keyof typeof Operators],
   numeric?: boolean,
+  uuid?: boolean,
 }
 
 interface BaseProps<Entity,
@@ -95,6 +97,7 @@ interface BaseProps<Entity,
   viewOnly?: boolean;
   columnsSets?: TColumnsSet<Entity>[];
   popupCreation?: boolean;
+  conditionalFieldsConfig?: ConditionalFieldsConfig;
   columnsState?: ColumnStateType;
   columnsSetSelect?: () => React.ReactNode;
   editPopupTitle?: string;

package/src/components/Table/useColumnsSets.tsx

@@ -33,19 +33,28 @@ function getColumnsStates<T>(
   columns: TIndexableRecord[],
   shownCols: Set<keyof T>,
   state: TColumnsState = {},
-): Record<string, ColumnsState> {
+): {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)) {
-      getColumnsStates(col.children, shownCols, state);
+      const { someColumnsShown } = getColumnsStates(col.children, shownCols, state);
+      if (someColumnsShown) {
+        childrenColumnsShown = true;
+      }
     }
 
-    if (idx && !shownCols.has(idx as keyof T)) {
-      state[idx as string] = { show: false };
+    if (idx) {
+      if (shownCols.has(idx as keyof T) || childrenColumnsShown) {
+        someColumnsShown = true;
+      } else {
+        state[idx as string] = { show: false };
+      }
     }
   }, state);
 
-  return state as Record<string, ColumnsState>;
+  return { state, someColumnsShown };
 }
 
 export default function useColumnsSets<Entity>({
@@ -60,7 +69,7 @@ export default function useColumnsSets<Entity>({
         columns: columnsSet
       }) => [
         name,
-        getColumnsStates<Entity>(columns, new Set(columnsSet))
+        getColumnsStates<Entity>(columns as TIndexableRecord[], new Set(columnsSet)).state,
       ])
     ), [columns]
   );
@@ -97,7 +106,30 @@ export default function useColumnsSets<Entity>({
 
   const columnsState = {
     value: chosenColumnsSet,
-    onChange: setChosenColumnsSet,
+    // 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 {

package/src/components/Table/useCreation.tsx

@@ -32,10 +32,11 @@ export function useCreation<Entity, CreateDto, TPathParams = {}>({
   createButtonSize,
   popupCreation,
   createNewDefaultParams,
+  conditionalFieldsConfig,
 }: {
   actionRef?: MutableRefObject<ActionType | undefined>;
   pathParams: TPathParams;
-  entityToCreateDto: (entity: Partial<Entity>) => CreateDto;
+  entityToCreateDto: (entity: Entity) => CreateDto;
   onCreate?: ({}: { requestBody: CreateDto } & TPathParams) => Promise<Entity>;
   createButtonSize: SizeType;
   popupCreation?: boolean;
@@ -43,7 +44,7 @@ export function useCreation<Entity, CreateDto, TPathParams = {}>({
 } & Omit<CreateEntityModalProps<Entity>, 'onSubmit' | 'onCancel' | 'entity'>) {
   const [createPopupData, setCreatePopupData] = useState<Partial<Entity> | undefined>();
 
-  const onCreateSubmit = async (data: Partial<Entity>, descriptionsRef: MutableRefObject<DescriptionsRefType<Entity>>) => {
+  const onCreateSubmit = async (data: Entity, descriptionsRef: MutableRefObject<DescriptionsRefType<Entity>>) => {
     try {
       await onCreate?.({
         ...pathParams,
@@ -105,6 +106,7 @@ export function useCreation<Entity, CreateDto, TPathParams = {}>({
       setCreatePopupData(undefined);
     }}
     onSubmit={onCreateSubmit}
+    conditionalFieldsConfig={conditionalFieldsConfig}
   />;
 
   return {