@boarteam/boar-pack-common-frontend 2.0.1

package/src/components/Inputs/SearchSelect.tsx

@@ -0,0 +1,93 @@
+import { useState, useEffect } from "react";
+import { SearchOutlined } from "@ant-design/icons";
+import { Checkbox, Empty, Input, Menu } from "antd";
+import { FilterDropdownProps } from "antd/es/table/interface";
+
+export const SearchSelect = function<T>({
+  selectedKeys,
+  setSelectedKeys,
+  filter = [],
+  limit = 7,
+  fetchItems,
+  fieldNames = {
+    value: 'id',
+    label: 'name',
+  },
+}: Pick<FilterDropdownProps, 'selectedKeys' | 'setSelectedKeys'> & {
+  filter?: string[],
+  limit?: number,
+  fetchItems: (filter: string[], limit?: number, keyword?: string) => Promise<{ data: T[] }>,
+  fieldNames?: {
+    value: string,
+    label: string,
+  },
+}) {
+  const { value: valueKey, label: labelKey } = fieldNames;
+
+  const [availableItems, setAvailableItems] = useState<T[]>([]);
+  const request = async (keyword: string) => {
+    const reqFilter = [...filter];
+    if (keyword) {
+      reqFilter.push(labelKey + '||$contL||' + keyword);
+    }
+
+    const resp = await fetchItems(reqFilter, limit, keyword);
+    setAvailableItems(resp.data);
+  }
+
+  useEffect(() => {
+    request('');
+  }, []);
+
+  return (
+    <>
+      <div className={`ant-table-filter-dropdown-search`}>
+        <Input
+          prefix={<SearchOutlined />}
+          placeholder={'Search in filters'}
+          onChange={e => request(e.target.value)}
+          className={`ant-table-filter-dropdown-search-input`}
+        />
+      </div>
+      {
+        availableItems.length === 0 
+          ? (
+            <Empty
+              image={Empty.PRESENTED_IMAGE_SIMPLE}
+              description={'Not Found'}
+              imageStyle={{
+                height: 24,
+              }}
+              style={{
+                margin: 0,
+                padding: '16px 0',
+              }}
+            />
+          )
+          : (
+              <Menu
+                selectable
+                multiple
+                prefixCls={`ant-dropdown-menu`}
+                className={'ant-dropdown-menu'}
+                onSelect={({ key }) => setSelectedKeys([...selectedKeys, key])}
+                onDeselect={({ key }) => setSelectedKeys(selectedKeys.filter(selectedKey => selectedKey !== key))}
+                // @ts-ignore
+                selectedKeys={selectedKeys}
+                items={availableItems.map(item => (
+                  {
+                    key: String(item?.[valueKey as keyof T]),
+                    label: (
+                      <>
+                        <Checkbox checked={selectedKeys?.includes(String(item?.[valueKey as keyof T]))} />
+                        <span>{String(item?.[labelKey as keyof T])}</span>
+                      </>
+                    ),
+                  }
+                ))}
+              />
+            )
+      }
+    </>
+  );
+}

package/src/components/Inputs/filterDropdowns.tsx

@@ -0,0 +1,103 @@
+import { Tag, Input, InputNumber, Space, Button } from "antd";
+import { ColumnFilterItem, FilterDropdownProps } from "antd/es/table/interface";
+import { ReactNode, useEffect, useState } from "react";
+
+export const booleanFilters: ColumnFilterItem[] = [
+  { text: <Tag color='red'>Disabled</Tag>, value: 0 },
+  { text: <Tag color='green'>Enabled</Tag>, value: 1 },
+];
+
+export function NumberFilterDropdown({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }: FilterDropdownProps) {
+  return (
+    <DynamicOptionsFilterDropdown confirm={confirm} clearFilters={clearFilters}>
+      <InputNumber
+        value={selectedKeys.length ? Number(selectedKeys[0]) : undefined}
+        onChange={(value) => setSelectedKeys(value === undefined ? [] : [value])}
+        onPressEnter={() => confirm()}
+        step={1}
+        style={{ margin: 4, width: 250 }}
+        placeholder="Please Enter"
+      />
+    </DynamicOptionsFilterDropdown>
+  )
+}
+
+export function NumberRangeFilterDropdown({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }: FilterDropdownProps) {
+  const [range, updateRange] = useState<[number, number] | undefined>(selectedKeys);
+  
+  useEffect(() => {
+    updateRange(selectedKeys);
+  }, [selectedKeys]);
+
+  useEffect(() => {
+    setSelectedKeys(range);
+  }, [range]);
+
+  return (
+    <DynamicOptionsFilterDropdown confirm={confirm} clearFilters={clearFilters}>
+      <InputNumber
+        value={range?.[0]}
+        onChange={value => updateRange(prev => ([value, prev[1]]))}
+        onPressEnter={() => confirm()}
+        step={1}
+        style={{ margin: 4, width: 250 }}
+        placeholder="From"
+      />
+      <InputNumber
+        value={range?.[1]}
+        onChange={value => updateRange(prev => ([prev[0], value]))}
+        onPressEnter={() => confirm()}
+        step={1}
+        style={{ margin: 4, width: 250 }}
+        placeholder="To"
+      />
+    </DynamicOptionsFilterDropdown>
+  )
+}
+
+export function StringFilterDropdown({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }: FilterDropdownProps) {
+  return (
+    <DynamicOptionsFilterDropdown confirm={confirm} clearFilters={clearFilters}>
+      <Input
+        value={selectedKeys.length ? String(selectedKeys[0]) : undefined}
+        onChange={(event) => setSelectedKeys(event.target.value === undefined ? [] : [event.target.value])}
+        onPressEnter={() => confirm()}
+        style={{ margin: 4, width: 250 }}
+        placeholder="Please Enter"
+      />
+    </DynamicOptionsFilterDropdown>
+  )
+}
+
+export const DynamicOptionsFilterDropdown = ({
+  children,
+  confirm, 
+  clearFilters, 
+}: Partial<FilterDropdownProps> & { children: ReactNode}) => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }} onKeyDown={(e) => e.stopPropagation()}>
+      {children}
+      <Space className="ant-table-filter-dropdown-btns">
+        <Button
+          type="link"
+          onClick={() => { 
+            clearFilters(); 
+            confirm();
+          }}
+          size="small"
+        >
+          Reset
+        </Button>
+        <Button
+          type="primary"
+          size="small"
+          onClick={() => {
+            confirm();
+          }}
+        >
+          OK
+        </Button>
+      </Space>
+    </div>
+  )
+};

package/src/components/Inputs/index.ts

@@ -0,0 +1,9 @@
+export * from './MultiStringSelect';
+export * from './NumberInputHandlingNewRecord';
+export * from './NumberSwitcher';
+export * from './Password';
+export * from './RelationSelect';
+export * from './useCheckConnection';
+export * from './filterDropdowns';
+export * from './SearchSelect';
+export * from './DateRange';

package/src/components/Inputs/useCheckConnection.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import { Button, message } from "antd";
+import { CheckOutlined, WarningOutlined } from "@ant-design/icons";
+import { green, red } from "@ant-design/colors";
+
+type TCheckConnection = {
+  defaultSuccessMessage: string;
+  defaultErrorMessage: string;
+  request: () => Promise<{
+    success: boolean;
+    message?: string;
+  }>;
+}
+
+export const useCheckConnection = ({
+  defaultSuccessMessage,
+  defaultErrorMessage,
+  request,
+}: TCheckConnection): {
+  button: React.ReactElement;
+} => {
+  const [timer, setTimer] = useState<NodeJS.Timeout | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null | undefined>(undefined);
+  const [messageApi, contextHolder] = message.useMessage();
+
+  const checkConnection = () => {
+    if (timer) {
+      clearTimeout(timer);
+      setTimer(null);
+    }
+
+    setLoading(true);
+    setError(null);
+
+    request().then(({
+      success,
+      message,
+    }) => {
+      if (success) {
+        setError(null);
+        messageApi.success(message || defaultSuccessMessage);
+      } else {
+        const err = message || defaultErrorMessage;
+        setError(err);
+        messageApi.error(err);
+      }
+    }).catch(e => {
+      console.error(e);
+    }).finally(() => {
+      setLoading(false);
+      setTimer(setTimeout(() => {
+        setError(undefined);
+      }, 3000));
+    });
+  };
+
+  let icon = null;
+  if (error === null) {
+    icon = <CheckOutlined style={{ color: green.primary }} />;
+  } else if (error !== undefined) {
+    icon = <WarningOutlined style={{ color: red.primary }} />;
+  }
+
+  const button = <>
+    {contextHolder}
+    <Button
+      size={'small'}
+      loading={loading}
+      danger={!!error}
+      icon={icon}
+      onClick={checkConnection}
+    >Test</Button>
+  </>;
+
+  return {
+    button,
+  };
+}

package/src/components/List/List.tsx

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

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

package/src/components/List/listTypes.ts

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

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

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

package/src/components/Table/BulkDeleteButton.tsx

@@ -0,0 +1,55 @@
+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>>(
+  {
+    selectedRecords,
+    lastRequest,
+    allSelected,
+    onDelete,
+  } : {
+    selectedRecords: Entity[],
+    allSelected: boolean,
+    lastRequest: [TGetAllParams & Record<string, string | number>, 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;