GHHub/src/views/products/Detail/CopyProducts.jsx

import { useState, useEffect } from 'react';
import { App, Form, Modal, DatePicker, Divider, Switch } from 'antd';
import { isEmpty, objectMapper } from '@/utils/commons';
import { useTranslation } from 'react-i18next';

import DeptSelector from '@/components/DeptSelector';
import ProductsTypesSelector from '@/components/ProductsTypesSelector';
import VendorSelector from '@/components/VendorSelector';
import dayjs from 'dayjs';
import arraySupport from 'dayjs/plugin/arraySupport';
import { copyAgencyDataAction } from '@/stores/Products/Index';

import useAuthStore from '@/stores/Auth';
import RequireAuth from '@/components/RequireAuth';
import { PERM_PRODUCTS_MANAGEMENT } from '@/config';

dayjs.extend(arraySupport);

export const CopyProductsForm = ({ action, initialValues, onFormInstanceReady, source, ...props }) => {
  const { t } = useTranslation();
  const [form] = Form.useForm();

  const isPermitted = useAuthStore((state) => state.isPermitted);

  useEffect(() => {
    onFormInstanceReady(form);
  }, []);

  const onValuesChange = (changeValues, allValues) => {};
  return (
    <Form layout='horizontal' form={form} name='form_in_modal' initialValues={initialValues} onValuesChange={onValuesChange} >
      {action === '#' && <Form.Item name='agency' label={`${t('products:CopyFormMsg.target')}${t('products:Vendor')}`} rules={[{ required: true, message: t('products:CopyFormMsg.requiredVendor') }]}>
        <VendorSelector mode={null} placeholder={t('products:Vendor')} />
      </Form.Item>}
      <Form.Item name={`products_types`} label={t('products:ProductType')} >
        <ProductsTypesSelector maxTagCount={1} mode={'multiple'} placeholder={t('All')} />
      </Form.Item>
      {action === '#' && <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
        <Form.Item name={`dept`} label={t('products:Dept')} rules={[{ required: false, message: t('products:CopyFormMsg.requiredDept') }]}>
          <DeptSelector isLeaf={true} />
        </Form.Item>
      </RequireAuth>}
      <Form.Item name={'source_use_year'} label={`${t('products:CopyFormMsg.Source')}${t('products:UseYear')}`} initialValue={dayjs([source.sourceYear, 1, 1])} rules={[{ required: true,}]}>
        <DatePicker picker='year' allowClear />
      </Form.Item>
      <Form.Item name={'target_use_year'} label={`${t('products:CopyFormMsg.target')}${t('products:UseYear')}`} rules={[{ required: true,}]}>
        <DatePicker picker='year' allowClear  />
        {/* disabledDate={(current) => current <= dayjs([source.sourceYear, 12, 31])} */}
      </Form.Item>
      <Form.Item name={'with_quote'} label={`${t('products:CopyFormMsg.withQuote')}`}>
        <Switch checkedChildren={t('Yes')} unCheckedChildren={t('No')} />
      </Form.Item>
    </Form>
  );
};
const formValuesMapper = (values) => {
  const destinationObject = {
    'agency': {
      key: 'target_agency',
      transform: (value) => {
        return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '';
      },
    },
    'source_use_year': [{ key: 'source_use_year', transform: (arrVal) => (arrVal ? arrVal.format('YYYY') : '') }],
    'target_use_year': [{ key: 'target_use_year', transform: (arrVal) => (arrVal ? arrVal.format('YYYY') : '') }],
    'products_types': {
      key: 'products_types',
      transform: (value) => {
        return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '-1';
      },
    },
    'dept': {
      key: 'dept',
      transform: (value) => {
        return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '';
      },
    },
    'with_quote': { key: 'with_quote', transform: (value) => (value ? 1 : 0) },
  };
  let dest = {};
  const { agency, year, ...omittedValue } = values;
  dest = { ...omittedValue, ...objectMapper(values, destinationObject) };
  for (const key in dest) {
    if (Object.prototype.hasOwnProperty.call(dest, key)) {
      dest[key] = typeof dest[key] === 'string' ? (dest[key] || '').trim() : dest[key];
    }
  }
  // omit empty
  // Object.keys(dest).forEach((key) => (dest[key] == null || dest[key] === '' || dest[key].length === 0) && delete dest[key]);
  return dest;
};
/**
 *
 */
export const CopyProductsFormModal = ({ source, action = '#' | 'o', open, onSubmit, onCancel, initialValues, loading, copyModalVisible, setCopyModalVisible }) => {
  const { t } = useTranslation();
  const { notification, message } = App.useApp();
  const [formInstance, setFormInstance] = useState();

  const [copyLoading, setCopyLoading] = useState(false);
  const handleCopyAgency = async (param) => {
    param.target_agency = isEmpty(param.target_agency) ? source.sourceAgency.travel_agency_id : param.target_agency;
    setCopyLoading(true);
    console.log(param);
    const toID = param.target_agency;
    const success = await copyAgencyDataAction({...param, source_agency: source.sourceAgency.travel_agency_id});
    setCopyLoading(false);
    success ? message.success(t('Success')) : message.error(t('Failed'));

    if (typeof onSubmit === 'function') {
      onSubmit(param);
    }
    // setCopyModalVisible(false);
    // navigate(`/products/${toID}/${searchValues.use_year || 'all'}/${searchValues.audit_state || 'all'}/edit`);
  };
  return (
    <Modal
      width={600}
      open={open}
      title={`${t('Copy')}${t('products:#')}${t('products:Offer')}`}
      okText='确认'
      // cancelText='Cancel'
      okButtonProps={{
        autoFocus: true,
      }}
      confirmLoading={copyLoading}
      onCancel={() => {
        onCancel();
        formInstance?.resetFields();
      }}
      destroyOnClose
      onOk={async () => {
        try {
          const values = await formInstance?.validateFields();
          // formInstance?.resetFields();
          const dest = formValuesMapper(values);
          handleCopyAgency(dest);
        } catch (error) {
          console.log('Failed:', error);
        }
      }}>
      <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
        <div className='py-2'>
          {t('products:CopyFormMsg.Source')}: {source.sourceAgency.travel_agency_name}
          <Divider type={'vertical'} />
          {source.sourceYear}
        </div>
      </RequireAuth>
      <CopyProductsForm action={action}
        source={source}
        initialValues={initialValues}
        onFormInstanceReady={(instance) => {
          setFormInstance(instance);
        }}
      />
    </Modal>
  );
};
export default CopyProductsFormModal;