kevisual-center-v1/src/pages/ai-agent/edit/List.tsx

import { useShallow } from 'zustand/react/shallow';
import { useAgentStore } from '../store';
import { useEffect } from 'react';
import { CardBlank } from '@/components/card/CardBlank';
import { Button, Form, Input, message, Modal, Tooltip } from 'antd';
import copy from 'copy-to-clipboard';
import { useNavigate } from 'react-router';
import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined, CaretRightOutlined } from '@ant-design/icons';
import clsx from 'clsx';
import { isObjectNull } from '@/utils/is-null';
const FormModal = () => {
  const [form] = Form.useForm();
  const containerStore = useAgentStore(
    useShallow((state) => {
      return {
        showEdit: state.showEdit,
        setShowEdit: state.setShowEdit,
        formData: state.formData,
        updateData: state.updateData,
      };
    }),
  );
  useEffect(() => {
    const open = containerStore.showEdit;
    if (open) {
      const isNull = isObjectNull(containerStore.formData);
      if (isNull) {
        form.setFieldsValue({});
      } else form.setFieldsValue(containerStore.formData);
    }
  }, [containerStore.showEdit]);
  const onFinish = async (values: any) => {
    if (!values.id) {
      message.error('Cant add data');
      return;
    }
    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 />
        </Form.Item>
        <Form.Item name='description' label='description'>
          <Input.TextArea rows={4} />
        </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 List = () => {
  const agentStore = useAgentStore(
    useShallow((state) => {
      return {
        setFormData: state.setFormData,
        setShowEdit: state.setShowEdit,
        list: state.list,
        deleteData: state.deleteData,
        getList: state.getList,
        loading: state.loading,
        publishData: state.publishData,
        updateData: state.updateData,
        formData: state.formData,
      };
    }),
  );
  useEffect(() => {
    agentStore.getList();
  }, []);
  return (
    <div className='w-full h-full bg-gray-200 p-4 '>
      <div className='h-full bg-white p-4 rounded-md'>
        <div className='flex gap-2 flex-wrap'>
          {agentStore.list.map((item) => {
            return (
              <div className='card w-[300px]' key={item.id}>
                <div className='card-title flex flex-col justify-between '>
                  {item.model} <div className='card-key'>{item.key}</div>
                </div>
                <div>
                  <div className='flex mt-2 '>
                    <Button.Group>
                      <Tooltip title='Edit'>
                        <Button
                          onClick={(e) => {
                            agentStore.setFormData(item);
                            agentStore.setShowEdit(true);
                            e.stopPropagation();
                          }}
                          icon={<EditOutlined />}></Button>
                      </Tooltip>
                      <Tooltip title='Run Chat'>
                        <Button
                          icon={<CaretRightOutlined />}
                          onClick={() => {
                            // aiStore.setData(item);
                            // aiStore.setOpen(true);
                            message.error('Not implemented');
                          }}
                        />
                      </Tooltip>
                      <Tooltip title='Delete'>
                        <Button
                          onClick={(e) => {
                            // agentStore.deleteData(item.id);
                            message.error('Not implemented');
                            e.stopPropagation();
                          }}
                          icon={<DeleteOutlined />}></Button>
                      </Tooltip>
                    </Button.Group>
                  </div>
                </div>
              </div>
            );
          })}
          {agentStore.list.length === 0 && <div className='text-center w-full'>No data</div>}
          <CardBlank className='w-[300px]' />
        </div>
      </div>
      <FormModal />
    </div>
  );
};