@boarteam/boar-pack-common-frontend 2.9.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boarteam/boar-pack-common-frontend",
-  "version": "2.9.0",
+  "version": "3.0.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": "e6e2920ef9786ec27cc616c35796f64f6183a3f5"
+  "gitHead": "36339bec16a3d1966bab8df4e10f3fa0ad49f4e4"
 }

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/Table/Table.tsx

@@ -36,6 +36,7 @@ const Table = <Entity extends Record<string | symbol, any>,
     onDelete,
     onDeleteMany,
     exportUrl,
+    exportParams,
     onImport,
     pathParams,
     idColumnName = 'id',
@@ -123,6 +124,7 @@ const Table = <Entity extends Record<string | symbol, any>,
 
   const { exportButton, importButton, setLastQueryParams } = useImportExport<TPathParams>({
     exportUrl,
+    exportParams,
     onImport,
   })
 

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

@@ -53,7 +53,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 +78,7 @@ export type TSearchableColumn = {
   filterField?: string,
   filterOperator?: typeof Operators[keyof typeof Operators],
   numeric?: boolean,
+  uuid?: boolean,
 }
 
 interface BaseProps<Entity,
@@ -108,6 +109,9 @@ export interface EditableProps<Entity, CreateDto, UpdateDto, TPathParams = {}> {
   afterSave?: (record: Entity) => Promise<void>;
   onCreate?: ({}: { requestBody: CreateDto } & TPathParams) => Promise<Entity>;
   exportUrl?: string;
+  exportParams?: {
+    [key: string]: string | number
+  };
   onImport?: (event: React.ChangeEvent<HTMLInputElement>) => Promise<any>;
   onUpdate: ({}: Partial<Entity> & {
     requestBody: UpdateDto,

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

@@ -35,7 +35,7 @@ export function useCreation<Entity, CreateDto, TPathParams = {}>({
 }: {
   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 +43,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,

package/src/components/Table/useImportExport.tsx

@@ -6,9 +6,13 @@ import { Link } from "react-router-dom";
 
 export function useImportExport<TPathParams = {}>({
   exportUrl,
+  exportParams,
   onImport
 }: {
   exportUrl?: string;
+  exportParams?: {
+    [key: string]: string | number
+  }
   onImport?: (event: React.ChangeEvent<HTMLInputElement>) => Promise<any>;
 }) {
   const [isLoadingImport, setIsLoadingImport] = useState(false);
@@ -25,10 +29,15 @@ export function useImportExport<TPathParams = {}>({
       });
   }
 
-  const url = exportUrl + (lastQueryParams ? '?' + new URLSearchParams({
-    s: lastQueryParams.s,
-    sort: lastQueryParams.sort?.[0],
-  }).toString() : '');
+  const params = {
+    ...(lastQueryParams && {
+      s: lastQueryParams.s,
+      sort: lastQueryParams.sort?.[0],
+    }),
+    ...exportParams
+  }
+
+  const url = exportUrl + (Object.keys(params).length ? '?' + new URLSearchParams(params).toString() : '');
   const exportButton = <Tooltip title="Export">
     <Link to={url} target={'_blank'}>
       <Button icon={<DownloadOutlined />}/>