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

package/src/components/Descriptions/useDescriptionColumns.ts

@@ -1,42 +0,0 @@
-import { ProColumns } from "@ant-design/pro-components";
-import { ProDescriptionsItemProps } from "@ant-design/pro-descriptions";
-
-export type TDescriptionSection<T> = {
-  title: ProColumns<T>['title'] | null;
-  // 'general' is a special value for the main section including only columns without children
-  key: string | 'general';
-  columns: ProDescriptionsItemProps<T>[];
-}
-
-export function columnsToDescriptionItemProps<T>(
-  columns: ProColumns<T>[],
-  mainTitle: ProColumns<T>['title'] | null = null,
-  key: string | 'general' = 'general'
-): TDescriptionSection<T>[] {
-  const baseSection: TDescriptionSection<T> = {
-    title: mainTitle,
-    key,
-    columns: [],
-  }
-  const result: TDescriptionSection<T>[] = [baseSection];
-
-  columns.forEach((column) => {
-    if (column.valueType === 'option') {
-      return;
-    }
-
-    if (column.children) {
-      const dataIndex = String(Array.isArray(column.dataIndex) ? column.dataIndex[0] : column.dataIndex);
-      result.push(...columnsToDescriptionItemProps(column.children, column.title, dataIndex));
-    } else {
-      const {
-        children,
-        ...rest
-      } = column;
-      // @ts-ignore-next-line
-      baseSection.columns.push(rest as ProDescriptionsItemProps<T>);
-    }
-  });
-
-  return result;
-}

package/src/components/Inputs/DateRange.tsx

@@ -1,75 +0,0 @@
-// antd switch but not for boolean, for numbers 0 and 1
-import React from "react";
-import dayjs from "dayjs";
-import { DatePicker } from "antd";
-
-interface RangePickerProps extends Omit<React.ComponentProps<typeof DatePicker.RangePicker>, 'value' | 'onChange'> {
-  value? : [string | null, string | null] | null;
-  onChange? : (value?: [string | null, string | null] | null) => void;
-}
-
-export const DateRange: React.FC<RangePickerProps> = ({
-  value,
-  onChange,
-  ...props
-}) => {
-  return (
-    <DatePicker.RangePicker
-      showTime={{
-        showNow: true,
-        showHour: true,
-        showMinute: true,
-        showSecond: true,
-        showMillisecond: true,
-      }}
-      allowEmpty={[true, true]}
-      presets={[
-        {
-          label: 'Today',
-          value: [dayjs().startOf('day'), dayjs().endOf('day')],
-        },
-        {
-          label: 'Yesterday',
-          value: [dayjs().subtract(1, 'day').startOf('day'), dayjs().subtract(1, 'day').endOf('day')],
-        },
-        {
-          label: 'Last 15 minutes',
-          value: [dayjs().subtract(15, 'minute'), dayjs()],
-        },
-        {
-          label: 'Last 30 minutes',
-          value: [dayjs().subtract(30, 'minute'), dayjs()],
-        },
-        {
-          label: 'Last 1 hour',
-          value: [dayjs().subtract(1, 'hour'), dayjs()],
-        },
-        {
-          label: 'Last 24 hours',
-          value: [dayjs().subtract(1, 'day'), dayjs()],
-        },
-        {
-          label: 'Last 7 days',
-          value: [dayjs().subtract(7, 'day'), dayjs()],
-        },
-        {
-          label: 'Last 30 days',
-          value: [dayjs().subtract(30, 'day'), dayjs()],
-        },
-        {
-          label: 'This month',
-          value: [dayjs().startOf('month'), dayjs().endOf('month')],
-        },
-        {
-          label: 'Last month',
-          value: [dayjs().subtract(1, 'month').startOf('month'), dayjs().subtract(1, 'month').endOf('month')],
-        },
-      ]}
-      value={value?.map(date => dayjs(date)) as [dayjs.Dayjs, dayjs.Dayjs] | undefined}
-      onChange={(dates) => {
-        onChange?.(dates?.map(date => date?.toISOString() ?? null) as [string | null, string | null] | null);
-      }}
-      {...props}
-    />
-  );
-}

package/src/components/Inputs/MultiStringSelect.tsx

@@ -1,20 +0,0 @@
-import { Select } from "antd";
-import React from "react";
-
-export const MultiStringSelect: React.FC<{
-  value?: string[];
-  onChange?: (value: string[]) => void;
-}> = ({ value, onChange }) => {
-  return (
-    <Select<string[]>
-      dropdownStyle={{ minWidth: 200 }}
-      allowClear={true}
-      mode="tags"
-      style={{ minWidth: 200 }}
-      maxTagCount='responsive'
-      value={value}
-      onChange={onChange}
-      notFoundContent='Enter manually'
-    />
-  )
-}

package/src/components/Inputs/NumberInputHandlingNewRecord.tsx

@@ -1,11 +0,0 @@
-import React from "react";
-import { InputNumberProps } from "antd/es/input-number";
-import { InputNumber } from "antd";
-import { isRecordNew } from "../Table";
-
-export const NumberInputHandlingNewRecord: React.FC<InputNumberProps> = ({ value, onChange }) => {
-  return <InputNumber
-    value={isRecordNew({ id: value }) ? '' : value}
-    onChange={onChange}
-  />
-}

package/src/components/Inputs/NumberSwitcher.tsx

@@ -1,27 +0,0 @@
-// antd switch but not for boolean, for numbers 0 and 1
-import { Switch } from "antd";
-import React from "react";
-import { SwitchProps } from "antd/es/switch";
-
-interface NumberSwitcherProps extends Omit<SwitchProps, 'value' | 'onChange'> {
-  value?: number;
-  onChange?: (value?: number) => void;
-}
-
-export const NumberSwitch: React.FC<NumberSwitcherProps> = ({
-  value,
-  onChange,
-  ...props
-}) => {
-  return (
-    <Switch
-      checkedChildren="1"
-      unCheckedChildren="0"
-      checked={value === 1}
-      onChange={(checked) => {
-        onChange?.(checked ? 1 : 0);
-      }}
-      {...props}
-    />
-  );
-}

package/src/components/Inputs/Password.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-import { Button, Input, Tooltip } from "antd";
-import { ThunderboltOutlined } from "@ant-design/icons";
-import { Typography } from "antd";
-import { PasswordProps } from "antd/es/input/Password";
-
-const { Paragraph } = Typography;
-
-export const Password: React.FC<PasswordProps> = ({ value, onChange }) => {
-  return (
-    <Input.Group compact={true}>
-      <Input.Password
-        placeholder={'Enter password'}
-        onChange={onChange}
-        value={value}
-        style={{ width: 'calc(100% - 80px)' }}
-        autoComplete={'one-time-code'}
-      />
-      <Tooltip title="Generate password">
-        <Button
-          onClick={(e) => {
-            const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%&';
-            const pass = Array(10).fill('').map(x => chars[Math.floor(Math.random() * chars.length)]).join('');
-            // @ts-ignore
-            onChange?.(pass);
-          }}
-          icon={<ThunderboltOutlined color={'var(--ant-primary)'} />}
-        />
-      </Tooltip>
-      <Button icon={<Paragraph copyable={{ text: String(value) }} />} />
-    </Input.Group>
-  );
-}

package/src/components/Inputs/RelationSelect.tsx

@@ -1,108 +0,0 @@
-import { ProFormSelect, ProFormSelectProps } from "@ant-design/pro-components";
-import { useState } from "react";
-import { useCreation } from "../Table";
-import { Space } from "antd";
-
-type RelationSelectProps<T, CreateDto = T> = ProFormSelectProps & {
-  selectedItem: T | null | undefined,
-  onChange?: (type: T | null) => void,
-  filter?: string[],
-  fetchItems: (filter: string[], keyword?: string) => Promise<{ data: T[] }>,
-  fieldNames?: {
-    value: string,
-    label: string,
-  },
-  onCreate?: ({}: { requestBody: CreateDto }) => Promise<T>,
-  creationColumns?: any[], // TODO: any specified in the createEntityModal. Need to fix it in the both places
-  idColumnName?: string & keyof T | (string & keyof T)[],
-  createPopupTitle?: string,
-};
-
-export const RelationSelect = function <T, CreateDto = T>({
-  selectedItem,
-  onCreate,
-  creationColumns,
-  // @ts-ignore
-  idColumnName = 'id',
-  createPopupTitle = 'Add new record',
-  onChange,
-  filter = [],
-  fetchItems,
-  fieldNames = {
-    value: 'id',
-    label: 'name',
-  },
-  ...rest
-}: RelationSelectProps<T, CreateDto>) {
-  const { value: valueKey, label: labelKey } = fieldNames;
-  const [value, setValue] = useState(selectedItem ? {
-    label: selectedItem[labelKey as keyof T],
-    value: selectedItem[valueKey as keyof T],
-  } : undefined);
-
-  const {
-    creationModal,
-    createButton,
-  } = useCreation<T, CreateDto>({
-    onCreate,
-    columns: creationColumns,
-    popupCreation: !!onCreate,
-    createNewDefaultParams: {},
-    createButtonSize: 'small',
-    pathParams: {},
-    entityToCreateDto: (entity: T) => entity as unknown as CreateDto,
-    title: createPopupTitle,
-    idColumnName
-  });
-
-  const request = async ({ keyWords: keyword }: { keyWords: string }) => {
-    const reqFilter = [...filter];
-    if (keyword) {
-      reqFilter.push(labelKey + '||$contL||' + keyword);
-    }
-    const resp = await fetchItems(reqFilter, keyword);
-    return resp.data;
-  }
-
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
-      <ProFormSelect.SearchSelect
-        showSearch
-        mode={'single'}
-        request={request}
-        className='relational-select'
-        formItemProps={{
-          style: {
-            margin: 0,
-            display: 'inline-block',
-          }
-        }}
-        style={{ minWidth: 160 }}
-        placeholder='Please choose'
-        fieldProps={{
-          fieldNames: {
-            value: valueKey,
-            label: labelKey,
-          },
-          value,
-          onChange(value, row) {
-            setValue(value);
-            onChange?.(row ? value : null);
-          },
-          dropdownRender: (menu) => (
-            <>
-              {menu}
-              {onCreate && (
-                <Space style={{ padding: '0 8px 4px', display: 'flex', justifyContent: 'center' }}>
-                  {createButton}
-                </Space>
-              )}
-            </>
-          ),
-        }}
-        {...rest}
-      />
-      {creationModal}
-    </div>
-  );
-}

package/src/components/Inputs/SearchSelect.tsx

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

@@ -1,144 +0,0 @@
-import { Tag, Input, InputNumber, Space, Button, Switch, Descriptions, Checkbox, Typography } from "antd";
-import { ColumnFilterItem, FilterDropdownProps } from "antd/es/table/interface";
-import { ReactNode, useEffect, useState } from "react";
-
-const { Text } = Typography;
-
-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 SwitchFilterDropdown({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }: FilterDropdownProps) {
-  return (
-    <DynamicOptionsFilterDropdown confirm={confirm} clearFilters={clearFilters}>
-      <Descriptions
-        style={{ margin: '8px 16px', width: 200 }}
-        items={[
-          {
-            label: 'Only filled values',
-            children: <Switch
-              checked={selectedKeys.length ? Boolean(selectedKeys[0]) : undefined}
-              onChange={(value) => setSelectedKeys([Number(value)])}
-            />,
-            style: { padding: 0 },
-            contentStyle: { justifyContent: 'flex-end' },
-          }
-        ]}
-      />
-    </DynamicOptionsFilterDropdown>
-  )
-}
-
-export function CheckboxFilterDropdown({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }: FilterDropdownProps) {
-  return (
-    <DynamicOptionsFilterDropdown confirm={confirm} clearFilters={clearFilters}>
-      <Checkbox
-        checked={selectedKeys.length ? Boolean(selectedKeys[0]) : undefined}
-        onChange={(event) => setSelectedKeys([Number(event.target.checked)])}
-        indeterminate={selectedKeys.length === 0}
-        style={{ margin: '8px 16px', width: 250 }}
-      >
-        {selectedKeys.length ? (selectedKeys[0] ? 'Will show only filled values' : 'Will show only empty values') : <Text type="secondary">Click to filter</Text>}
-      </Checkbox>
-    </DynamicOptionsFilterDropdown>
-  )
-}
-
-export function NumberRangeFilterDropdown({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }: FilterDropdownProps) {
-  const toRange = (keys: React.Key[]): [number, number] | undefined =>
-    keys.length >= 2 ? [Number(keys[0]), Number(keys[1])] : undefined;
-
-  const [range, updateRange] = useState<[number, number] | undefined>(toRange(selectedKeys));
-
-  useEffect(() => {
-    updateRange(toRange(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

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

@@ -1,79 +0,0 @@
-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,
-  };
-}