kevisual-center/src/pages/app/edit/AppVersionList.tsx

import { useParams } from 'react-router';
import { useAppVersionStore } from '../store';
import { useShallow } from 'zustand/react/shallow';
import { useEffect } from 'react';
import { Button, Form, Input, Modal } from 'antd';
import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
import { isObjectNull } from '@/utils/is-null';
import { useNavigate } from 'react-router';
import { FileUpload } from '../modules/FileUpload';
const FormModal = () => {
  const [form] = Form.useForm();
  const containerStore = useAppVersionStore(
    useShallow((state) => {
      return {
        showEdit: state.showEdit,
        setShowEdit: state.setShowEdit,
        formData: state.formData,
        updateData: state.updateData,
      };
    }),
  );
  useEffect(() => {
    const open = containerStore.showEdit;
    if (open) {
      if (open) {
        const isNull = isObjectNull(containerStore.formData);
        if (isNull) {
          form.setFieldsValue({});
        } else form.setFieldsValue(containerStore.formData);
      }
    }
  }, [containerStore.showEdit]);
  const onFinish = async (values: any) => {
    containerStore.updateData(values);
  };
  const onClose = () => {
    containerStore.setShowEdit(false);
    form.resetFields();
  };
  const isEdit = containerStore.formData.id;
  return (
    <Modal
      title={isEdit ? 'Edit' : 'Add'}
      open={containerStore.showEdit}
      onClose={() => containerStore.setShowEdit(false)}
      destroyOnClose
      footer={false}
      width={800}
      onCancel={onClose}>
      <Form
        form={form}
        onFinish={onFinish}
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 20,
        }}>
        <Form.Item name='id' hidden>
          <Input />
        </Form.Item>
        <Form.Item name='key' label='key'>
          <Input disabled />
        </Form.Item>
        <Form.Item name='version' label='version'>
          <Input />
        </Form.Item>
        <Form.Item label=' ' colon={false}>
          <Button type='primary' htmlType='submit'>
            Submit
          </Button>
          <Button className='ml-2' htmlType='reset' onClick={onClose}>
            Cancel
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export const AppVersionList = () => {
  const params = useParams();
  const appKey = params.appKey;
  const versionStore = useAppVersionStore(
    useShallow((state) => {
      return {
        list: state.list,
        getList: state.getList,
        setKey: state.setKey,
        setShowEdit: state.setShowEdit,
        setFormData: state.setFormData,
        deleteData: state.deleteData,
      };
    }),
  );
  useEffect(() => {
    // fetch app version list
    if (appKey) {
      versionStore.setKey(appKey);
      versionStore.getList();
    }
  }, []);
  return (
    <div className='w-full h-full flex bg-slate-100'>
      <div className='p-2 bg-white'>
        <Button
          onClick={() => {
            versionStore.setFormData({ key: appKey });
            versionStore.setShowEdit(true);
          }}
          icon={<PlusOutlined />}
        />
      </div>
      <div>
        <FileUpload />
      </div>
      <div className='flex-grow h-full'>
        <div className='w-full h-full p-4'>
          <div className='w-full h-full rounded-lg bg-white'>
            <div className='flex gap-2 flex-wrap p-4'>
              {versionStore.list.map((item, index) => {
                return (
                  <div className='card border-t' key={index}>
                    <div>{item.version}</div>

                    <div>
                      <Button.Group>
                        <Button
                          onClick={() => {
                            versionStore.setFormData(item);
                            versionStore.setShowEdit(true);
                          }}
                          icon={<EditOutlined />}
                        />
                        <Button
                          onClick={() => {
                            versionStore.deleteData(item.id);
                          }}
                          icon={<DeleteOutlined />}
                        />
                      </Button.Group>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
      <FormModal />
    </div>
  );
};