1- import { useState , useEffect } from "react" ;
2-
31import { Form , Input , InputNumber , Button , Select } from "antd" ;
42import { MinusCircleOutlined , PlusOutlined } from "@ant-design/icons" ;
53
6- import { Vendor , VendorMetadata , ListDevicesRequest , ListDevicesResponse , Device } from "@api/grpc-web/api_pb" ;
7- import DeviceProfileStore from "../../stores/DeviceProfileStore" ;
4+ import { Vendor , VendorMetadata } from "@api/grpc-web/api_pb" ;
85import { slugify } from "../helpers" ;
96
107interface IProps {
@@ -15,21 +12,6 @@ interface IProps {
1512
1613function VendorForm ( props : IProps ) {
1714 const [ form ] = Form . useForm ( ) ;
18- const [ devices , setDevices ] = useState < Device [ ] > ( [ ] ) ;
19-
20- useEffect ( ( ) => {
21- if ( ! props . update ) {
22- return ;
23- }
24-
25- const v = props . initialValues ;
26-
27- const req = new ListDevicesRequest ( ) ;
28- req . setVendorDir ( v . getDir ( ) ) ;
29- DeviceProfileStore . listDevices ( req , ( resp : ListDevicesResponse ) => {
30- setDevices ( resp . getResultList ( ) ) ;
31- } ) ;
32- } , [ props . initialValues ] ) ;
3315
3416 const onFinish = ( values : Vendor . AsObject ) => {
3517 const v = Object . assign ( props . initialValues . toObject ( ) , values ) ;
@@ -42,7 +24,6 @@ function VendorForm(props: IProps) {
4224 vendor . setName ( v . name ) ;
4325 vendor . setLoraAllianceVendorId ( v . loraAllianceVendorId ) ;
4426 vendor . setOuisList ( v . ouisList ) ;
45- vendor . setDevicesList ( v . devicesList ) ;
4627
4728 vendorMetadata . setHomepage ( v . metadata ?. homepage || "" ) ;
4829 vendor . setMetadata ( vendorMetadata ) ;
@@ -58,36 +39,30 @@ function VendorForm(props: IProps) {
5839 form . setFieldsValue ( {
5940 dir : slugify ( e . target . value ) ,
6041 } ) ;
61- }
62-
42+ } ;
6343
6444 return (
65- < Form
66- layout = "vertical"
67- initialValues = { props . initialValues . toObject ( ) }
68- onFinish = { onFinish }
69- form = { form }
70- >
45+ < Form layout = "vertical" initialValues = { props . initialValues . toObject ( ) } onFinish = { onFinish } form = { form } >
7146 < Form . Item label = "Name" name = "name" rules = { [ { required : true , message : "Please enter a name!" } ] } >
7247 < Input onChange = { onChangeName } placeholder = "Vendor Name" />
7348 </ Form . Item >
74- < Form . Item label = "Directory name" name = "dir" rules = { [
75- { required : true , message : "Please enter a directory name!" } ,
76- { pattern : / ^ [ \w - ] + $ / g, message : "The directory name can only contain a-z, A-Z, 0-9 and - characters!" } ,
77- ] } >
49+ < Form . Item
50+ label = "Directory name"
51+ name = "dir"
52+ rules = { [
53+ { required : true , message : "Please enter a directory name!" } ,
54+ { pattern : / ^ [ \w - ] + $ / g, message : "The directory name can only contain a-z, A-Z, 0-9 and - characters!" } ,
55+ ] }
56+ >
7857 < Input disabled = { props . update } placeholder = "vendor-name" />
7958 </ Form . Item >
80- < Form . Item label = "LoRa Alliance Vendor ID" name = "loraAllianceVendorId" tooltip = "This ID is provided by the LoRa Alliance." >
59+ < Form . Item
60+ label = "LoRa Alliance Vendor ID"
61+ name = "loraAllianceVendorId"
62+ tooltip = "This ID is provided by the LoRa Alliance."
63+ >
8164 < InputNumber min = { 0 } />
8265 </ Form . Item >
83- < Form . Item label = "Devices" name = "devicesList" >
84- < Select mode = "multiple" options = { devices . map ( ( v ) => {
85- return {
86- label : v . getFile ( ) ,
87- value : v . getFile ( ) ,
88- } ;
89- } ) } />
90- </ Form . Item >
9166 < Form . List name = "ouisList" >
9267 { ( fields , { add, remove } ) => (
9368 < >
@@ -96,12 +71,10 @@ function VendorForm(props: IProps) {
9671 { ...restField }
9772 label = "OUI"
9873 name = { [ name ] }
99- rules = { [ { required : true , message : ' Please enter an OUI!' } ] }
74+ rules = { [ { required : true , message : " Please enter an OUI!" } ] }
10075 key = { key }
10176 >
102- < Input addonAfter = {
103- < MinusCircleOutlined onClick = { ( ) => remove ( name ) } />
104- } />
77+ < Input addonAfter = { < MinusCircleOutlined onClick = { ( ) => remove ( name ) } /> } />
10578 </ Form . Item >
10679 ) ) }
10780 < Form . Item >
0 commit comments