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

package/src/components/Descriptions/descriptionTypes.ts

@@ -1,74 +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;
-  update: () => Promise<any>;
-  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/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 };
-}

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>({
-  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,141 +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([value as any])}
-            />,
-            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([event.target.checked as any])}
-        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 [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>
-  )
-};