chore: access form

src/pages/model-access/forms/endpoints.tsx

@@ -1,36 +1,72 @@
-import SealInput from '@/components/seal-form/seal-input';
+import LabelSelector from '@/components/label-selector';
+import { LabelSelectorContext } from '@/components/label-selector/context';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
+import _ from 'lodash';
 import { FormData } from '../config/types';
 
 const Endpoints = () => {
   const intl = useIntl();
   const form = Form.useFormInstance<FormData>();
+  const endpoints = Form.useWatch('endpoints', form);
+
+  const handleEndpointsChange = (labels: Record<string, any>) => {
+    form.setFieldValue('endpoints', labels);
+  };
+
   return (
     <>
-      <Form.Item name="name" data-field="endpoints">
-        <SealInput.Input
-          required
-          label={intl.formatMessage({
-            id: 'common.table.name'
-          })}
-        />
-      </Form.Item>
-      <Form.Item name="provider" hidden>
-        <SealInput.Input
-          label={intl.formatMessage({
-            id: 'providers.table.providerName'
-          })}
-        />
-      </Form.Item>
-      <Form.Item name="description">
-        <SealInput.TextArea
-          scaleSize={true}
-          label={intl.formatMessage({
-            id: 'common.table.description'
-          })}
-        ></SealInput.TextArea>
-      </Form.Item>
+      <LabelSelectorContext.Provider
+        value={{
+          placeholder: ['Model', 'Weight'],
+          options: [
+            {
+              label: 'max_token_len',
+              value: 'max_token_len'
+            },
+            {
+              label: 'max_context_len',
+              value: 'max_context_len'
+            }
+          ]
+        }}
+      >
+        <Form.Item
+          name="endpoints"
+          data-field="endpoints"
+          rules={[
+            ({ getFieldValue }) => ({
+              validator(rule, value) {
+                if (_.keys(value).length > 0) {
+                  if (_.some(_.keys(value), (k: string) => !value[k])) {
+                    return Promise.reject(
+                      intl.formatMessage(
+                        {
+                          id: 'common.validate.value'
+                        },
+                        {
+                          name: intl.formatMessage({
+                            id: 'models.form.selector'
+                          })
+                        }
+                      )
+                    );
+                  }
+                }
+                return Promise.resolve();
+              }
+            })
+          ]}
+        >
+          <LabelSelector
+            isAutoComplete
+            label={'Endpoints'}
+            labels={endpoints}
+            btnText="Add Endpoint"
+            onChange={handleEndpointsChange}
+          ></LabelSelector>
+        </Form.Item>
+      </LabelSelectorContext.Provider>
     </>
   );
 };