refactor(platform): add fn to open modal

Author: xiejay97

packages/platform/src/app/routes/list/standard-table/StandardTable.tsx

@@ -62,25 +62,29 @@ export default function StandardTable(): JSX.Element | null {
   const allDeviceSelected =
     deviceTable.selected.size === 0 ? false : deviceTable.selected.size === deviceTable.list.length ? true : 'mixed';
 
-  const [paramsOfDeviceModal, setParamsOfDeviceModal] = useImmer<{
-    visible: boolean;
-    device: DeviceDoc | undefined;
-  }>();
+  const [modelList, setModelList] = useState<DSelectItem<string>[]>();
 
   const [paramsOfDeleteModal, setParamsOfDeleteModal] = useImmer<{
     visible: boolean;
     device: DeviceDoc;
   }>();
 
-  const [modelList, setModelList] = useState<DSelectItem<string>[]>();
-
+  const [paramsOfDeviceModal, setParamsOfDeviceModal] = useImmer<{
+    visible: boolean;
+    device: DeviceDoc | undefined;
+  }>();
   const [deviceForm, updateDeviceForm] = useForm(
     () =>
       new FormGroup({
         name: new FormControl('', Validators.required),
         model: new FormControl<string | null>(null, Validators.required),
       })
   );
+  const openDeviceModal = (device?: DeviceDoc) => {
+    setParamsOfDeviceModal({ visible: true, device });
+    deviceForm.reset(device ? { name: device.name, model: device.model } : undefined);
+    updateDeviceForm();
+  };
 
   useMount(() => {
     modelApi.list().subscribe({
@@ -193,9 +197,7 @@ export default function StandardTable(): JSX.Element | null {
           aActions={[
             <DButton
               onClick={() => {
-                setParamsOfDeviceModal({ visible: true, device: undefined });
-                deviceForm.reset();
-                updateDeviceForm();
+                openDeviceModal();
               }}
               dIcon={<PlusOutlined />}
             >
@@ -351,9 +353,7 @@ export default function StandardTable(): JSX.Element | null {
                             onItemClick={(action) => {
                               switch (action) {
                                 case 'edit':
-                                  setParamsOfDeviceModal({ visible: true, device: data });
-                                  deviceForm.reset({ name: data.name, model: data.model });
-                                  updateDeviceForm();
+                                  openDeviceModal(data);
                                   break;
 
                                 case 'delete':

packages/platform/src/app/routes/list/standard-table/detail/Detail.tsx

@@ -26,19 +26,24 @@ export default function Detail(): JSX.Element | null {
   const id = Number(_id!);
 
   const [device, setDevice] = useState<DeviceDoc>();
+
+  const [modelList, setModelList] = useState<DSelectItem<string>[]>();
+
   const [paramsOfEditModal, setParamsOfEditModal] = useImmer<{
     visible: boolean;
   }>();
-
-  const [deviceForm, updateDeviceForm] = useForm(
+  const [editForm, updateEditForm] = useForm(
     () =>
       new FormGroup({
         name: new FormControl('', Validators.required),
         model: new FormControl<string | null>(null, Validators.required),
       })
   );
-
-  const [modelList, setModelList] = useState<DSelectItem<string>[]>();
+  const openEditModal = (device: DeviceDoc) => {
+    setParamsOfEditModal({ visible: true });
+    editForm.reset({ name: device.name, model: device.model });
+    updateEditForm();
+  };
 
   useMount(() => {
     modelApi.list().subscribe({
@@ -65,8 +70,8 @@ export default function Detail(): JSX.Element | null {
         <AppDeviceModal
           aVisible={paramsOfEditModal.visible}
           aHeader={`${device ? 'Edit' : 'Add'} Device`}
-          aForm={deviceForm}
-          aUpdateForm={updateDeviceForm}
+          aForm={editForm}
+          aUpdateForm={updateEditForm}
           aModelList={modelList}
           onClose={() => {
             setParamsOfEditModal((draft) => {
@@ -103,9 +108,7 @@ export default function Detail(): JSX.Element | null {
               disabled={isUndefined(device)}
               onClick={() => {
                 if (!isUndefined(device)) {
-                  setParamsOfEditModal({ visible: true });
-                  deviceForm.reset({ name: device.name, model: device.model });
-                  updateDeviceForm();
+                  openEditModal(device);
                 }
               }}
               dIcon={<EditOutlined />}