refactor: streamline camera form handling and update types for better consistency

src/pages/Manager/Device/Camera/components/CameraFormModal.tsx

@@ -17,18 +17,6 @@ const CAMERA_TYPES = [
   { label: 'GENERIC', value: 'GENERIC' },
 ];
 
-interface CameraFormValues {
-  name: string;
-  type: string;
-  account: string;
-  password: string;
-  ipAddress: string;
-  rtspPort: number;
-  httpPort: number;
-  stream: number;
-  channel: number;
-}
-
 interface CameraFormModalProps {
   open: boolean;
   onCancel: () => void;
@@ -44,22 +32,17 @@ const CameraFormModal: React.FC<CameraFormModalProps> = ({
   isOnline = true,
   editingCamera,
 }) => {
-  const [form] = Form.useForm<CameraFormValues>();
+  const [form] = Form.useForm<MasterModel.Camera>();
   const isEditMode = !!editingCamera;
 
   // Populate form when editing
   useEffect(() => {
     if (open && editingCamera) {
       form.setFieldsValue({
-        name: editingCamera.name || '',
+        ...editingCamera,
-        type: editingCamera.cate_id || 'HIKVISION',
+        cate_id: editingCamera.cate_id || 'HIKVISION',
-        account: editingCamera.username || '',
+        rtsp_port: editingCamera.rtsp_port || 554,
-        password: editingCamera.password || '',
+        http_port: editingCamera.http_port || 80,
-        ipAddress: editingCamera.ip || '',
-        rtspPort: editingCamera.rtsp_port || 554,
-        httpPort: editingCamera.http_port || 80,
-        stream: editingCamera.stream || 0,
-        channel: editingCamera.channel || 0,
       });
     } else if (open) {
       form.resetFields();
@@ -69,19 +52,12 @@ const CameraFormModal: React.FC<CameraFormModalProps> = ({
   const handleSubmit = async () => {
     try {
       const values = await form.validateFields();
-      // Convert form values to MasterModel.Camera format
+      // Values already in MasterModel.Camera format
       const camera: MasterModel.Camera = {
-        // Keep existing ID when editing, generate new ID when creating
+        ...editingCamera,
+        ...values,
+        // Ensure ID is set for new cameras
         id: editingCamera?.id || `cam_${Date.now()}`,
-        name: values.name,
-        cate_id: values.type,
-        ip: values.ipAddress,
-        rtsp_port: values.rtspPort,
-        http_port: values.httpPort,
-        stream: values.stream,
-        channel: values.channel,
-        username: values.account,
-        password: values.password,
       };
       onSubmit(camera);
       form.resetFields();
@@ -114,9 +90,10 @@ const CameraFormModal: React.FC<CameraFormModalProps> = ({
         form={form}
         layout="vertical"
         initialValues={{
-          type: 'HIKVISION',
+          cate_id: 'HIKVISION',
-          rtspPort: 554,
+          ip: '192.168.1.10',
-          httpPort: 80,
+          rtsp_port: 554,
+          http_port: 80,
           stream: 0,
           channel: 0,
         }}
@@ -131,7 +108,7 @@ const CameraFormModal: React.FC<CameraFormModalProps> = ({
 
         <Form.Item
           label="Loại"
-          name="type"
+          name="cate_id"
           rules={[{ required: true, message: 'Vui lòng chọn loại' }]}
         >
           <Select options={CAMERA_TYPES} />
@@ -139,7 +116,7 @@ const CameraFormModal: React.FC<CameraFormModalProps> = ({
 
         <Form.Item
           label="Tài khoản"
-          name="account"
+          name="username"
           rules={[{ required: true, message: 'Vui lòng nhập tài khoản' }]}
         >
           <Input placeholder="nhập tài khoản" autoComplete="off" />
@@ -158,7 +135,7 @@ const CameraFormModal: React.FC<CameraFormModalProps> = ({
 
         <Form.Item
           label="Địa chỉ IP"
-          name="ipAddress"
+          name="ip"
           rules={[{ required: true, message: 'Vui lòng nhập địa chỉ IP' }]}
         >
           <Input placeholder="192.168.1.10" />
@@ -168,7 +145,7 @@ const CameraFormModal: React.FC<CameraFormModalProps> = ({
           <Col span={12}>
             <Form.Item
               label="Cổng RTSP"
-              name="rtspPort"
+              name="rtsp_port"
               rules={[{ required: true, message: 'Vui lòng nhập cổng RTSP' }]}
             >
               <InputNumber style={{ width: '100%' }} min={0} max={65535} />
@@ -177,7 +154,7 @@ const CameraFormModal: React.FC<CameraFormModalProps> = ({
           <Col span={12}>
             <Form.Item
               label="Cổng HTTP"
-              name="httpPort"
+              name="http_port"
               rules={[{ required: true, message: 'Vui lòng nhập cổng HTTP' }]}
             >
               <InputNumber style={{ width: '100%' }} min={0} max={65535} />

src/pages/Manager/Device/Camera/components/ConfigCameraV6.tsx

@@ -24,10 +24,7 @@ const RECORDING_MODES = [
 interface CameraV6Props {
   thing: MasterModel.Thing | null;
   cameraConfig?: MasterModel.CameraV6 | null;
-  onSubmit?: (config: {
+  onSubmit?: (config: MasterModel.CameraV6) => void;
-    recordingMode: MasterModel.CameraV6['record_type'];
-    selectedAlerts: string[];
-  }) => void;
   isOnline?: boolean;
 }
 
@@ -41,7 +38,7 @@ const CameraV6: React.FC<CameraV6Props> = ({
   const { initialState } = useModel('@@initialState');
   const [selectedAlerts, setSelectedAlerts] = useState<string[]>([]);
   const [recordingMode, setRecordingMode] =
-    useState<MasterModel.CameraV6['record_type']>('none');
+    useState<MasterModel.CameraRecordType>('none');
   const [alarmConfig, setAlarmConfig] = useState<MasterModel.Alarm[] | null>(
     null,
   );
@@ -115,8 +112,9 @@ const CameraV6: React.FC<CameraV6Props> = ({
 
   const handleSubmitConfig = () => {
     onSubmit?.({
-      recordingMode,
+      ...cameraConfig,
-      selectedAlerts,
+      record_type: recordingMode,
+      record_alarm_list: recordingMode === 'alarm' ? selectedAlerts : [],
     });
   };
 

src/pages/Manager/Device/Camera/index.tsx

@@ -22,7 +22,6 @@ const CameraConfigPage = () => {
   const [cameraConfig, setCameraConfig] = useState<MasterModel.CameraV6 | null>(
     null,
   );
-  const [mqttConnected, setMqttConnected] = useState(false);
   const [isOnline, setIsOnline] = useState(false);
   const [editingCamera, setEditingCamera] = useState<MasterModel.Camera | null>(
     null,
@@ -43,18 +42,15 @@ const CameraConfigPage = () => {
     });
 
     const unConnect = mqttClient.onConnect(() => {
-      console.log('MQTT Connected successfully!');
+      // MQTT connected
-      setMqttConnected(true);
     });
 
     const unError = mqttClient.onError((error) => {
       console.error('MQTT Error:', error);
-      setMqttConnected(false);
     });
 
     const unClose = mqttClient.onClose(() => {
-      console.log('MQTT Connection closed');
+      // MQTT connection closed
-      setMqttConnected(false);
     });
 
     return () => {
@@ -140,6 +136,11 @@ const CameraConfigPage = () => {
 
   // Core function to send camera config via MQTT
   const sendCameraConfig = (configPayload: MasterModel.CameraV6) => {
+    // Skip sending for gmsv5
+    if (thing?.metadata?.type === 'gmsv5') {
+      return true;
+    }
+
     // Check if device is online
     if (!isOnline) {
       message.error('Thiết bị đang ngoại tuyến, không thể gửi cấu hình');
@@ -230,44 +231,20 @@ const CameraConfigPage = () => {
   };
 
   // Handle recording config submission from ConfigCameraV6
-  const handleSubmitConfig = (configPayload: {
+  const handleSubmitConfig = (configPayload: MasterModel.CameraV6) => {
-    recordingMode: MasterModel.CameraV6['record_type'];
+    if (sendCameraConfig(configPayload)) {
-    selectedAlerts: string[];
-  }) => {
-    // Chỉ gửi record_alarm_list khi record_type = alarm
-    const fullConfig: MasterModel.CameraV6 = {
-      cams: cameraConfig?.cams || [],
-      record_type: configPayload.recordingMode,
-      ...(configPayload.recordingMode === 'alarm' && {
-        record_alarm_list: configPayload.selectedAlerts,
-      }),
-    };
-
-    if (sendCameraConfig(fullConfig)) {
       // Update local state
-      setCameraConfig(fullConfig);
+      setCameraConfig(configPayload);
     }
   };
 
   // Helper function to determine which camera component to render
   const renderCameraRecordingComponent = () => {
-    const thingType = thing?.metadata?.type;
+    if (thing?.metadata?.type === 'gmsv5') {
-
-    if (thingType === 'gmsv5') {
       return <ConfigCameraV5 thing={thing} />;
     }
 
-    if (thingType === 'spole' || thingType === 'gmsv6') {
+    // Default: gmsv6, spole, and other types
-      return (
-        <ConfigCameraV6
-          thing={thing}
-          cameraConfig={cameraConfig}
-          onSubmit={handleSubmitConfig}
-          isOnline={isOnline}
-        />
-      );
-    }
-
     return (
       <ConfigCameraV6
         thing={thing}

src/services/master/typings/camera.d.ts

@@ -16,8 +16,10 @@ declare namespace MasterModel {
     cams?: Camera[];
   }
 
+  type CameraRecordType = 'none' | 'alarm' | 'all';
+
   interface CameraV6 extends CameraV5 {
-    record_type?: 'none' | 'alarm' | 'all';
+    record_type?: CameraRecordType;
     record_alarm_list?: string[];
   }