chore(platform): adjust list page

Author: xiejay97

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

@@ -9,18 +9,23 @@ import { useAsync, useEventCallback, useId } from '@react-devui/hooks';
 import { FormControl, FormGroup, useForm, Validators } from '@react-devui/ui';
 import { DForm, DInput, DModal, DSelect } from '@react-devui/ui';
 
+import { useAPI } from '../../../hooks';
+
 export interface AppDeviceModalProps {
-  aModelList: DSelectItem<string>[] | undefined;
+  onSuccess: () => void;
 }
 
 function DeviceModal(props: AppDeviceModalProps, ref: React.ForwardedRef<OpenModalFn<DeviceData>>): JSX.Element | null {
-  const { aModelList } = props;
+  const { onSuccess } = props;
 
+  const modelApi = useAPI('/device/model');
   const async = useAsync();
 
   const uniqueId = useId();
   const id = `app-form-${uniqueId}`;
 
+  const [modelList, setModelList] = useState<DSelectItem<string>[]>();
+
   const [visible, setVisible] = useState(false);
   const [device, setDevice] = useState<DeviceData>();
   const [form, updateForm] = useForm(
@@ -34,8 +39,23 @@ function DeviceModal(props: AppDeviceModalProps, ref: React.ForwardedRef<OpenMod
   const open = useEventCallback<OpenModalFn<DeviceData>>((device) => {
     setVisible(true);
     setDevice(device);
+
     form.reset(device ? { name: device.name, model: device.model } : undefined);
     updateForm();
+
+    if (isUndefined(modelList)) {
+      modelApi.list().subscribe({
+        next: (res) => {
+          setModelList(
+            res.resources.map((model) => ({
+              label: model.name,
+              value: model.name,
+              disabled: model.disabled,
+            }))
+          );
+        },
+      });
+    }
   });
 
   useImperativeHandle(ref, () => open, [open]);
@@ -50,6 +70,7 @@ function DeviceModal(props: AppDeviceModalProps, ref: React.ForwardedRef<OpenMod
           onOkClick={() =>
             new Promise((r) => {
               async.setTimeout(() => {
+                onSuccess();
                 r(true);
               }, 500);
             })
@@ -69,9 +90,9 @@ function DeviceModal(props: AppDeviceModalProps, ref: React.ForwardedRef<OpenMod
           <DForm.Item dFormControls={{ model: 'Please select model!' }} dLabel="Model">
             {({ model }) => (
               <DSelect
-                dFormControl={aModelList ? model : undefined}
-                dList={aModelList ?? []}
-                dLoading={isUndefined(aModelList)}
+                dFormControl={modelList ? model : undefined}
+                dList={modelList ?? []}
+                dLoading={isUndefined(modelList)}
                 dPlaceholder="Model"
                 dClearable
               />

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

@@ -152,7 +152,12 @@ export default function StandardTable(): JSX.Element | null {
           }}
         />
       )}
-      <AppDeviceModal ref={deviceModalRef} aModelList={modelList} />
+      <AppDeviceModal
+        ref={deviceModalRef}
+        onSuccess={() => {
+          setUpdateDeviceTable((n) => n + 1);
+        }}
+      />
       <AppRouteHeader>
         <AppRouteHeader.Breadcrumb
           aList={[

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

@@ -1,13 +1,11 @@
 import type { OpenModalFn } from '../../../../utils/types';
 import type { DeviceData } from '../StandardTable';
-import type { DSelectItem } from '@react-devui/ui/components/select';
 
 import { isUndefined } from 'lodash';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 
-import { useMount } from '@react-devui/hooks';
 import { EditOutlined } from '@react-devui/icons';
 import { DButton, DCard, DSeparator, DSpinner, DTable } from '@react-devui/ui';
 
@@ -21,38 +19,34 @@ export default function Detail(): JSX.Element | null {
 
   const { t } = useTranslation();
 
-  const modelApi = useAPI('/device/model');
   const deviceApi = useAPI('/device');
 
   const { id: _id } = useParams();
   const id = Number(_id!);
 
+  const [deviceLoading, setDeviceLoading] = useState(true);
   const [device, setDevice] = useState<DeviceData>();
 
-  const [modelList, setModelList] = useState<DSelectItem<string>[]>();
-
-  useMount(() => {
-    modelApi.list().subscribe({
-      next: (res) => {
-        setModelList(
-          res.resources.map((model) => ({
-            label: model.name,
-            value: model.name,
-            disabled: model.disabled,
-          }))
-        );
-      },
-    });
+  const [updateDevice, setUpdateDevice] = useState(0);
+  useEffect(() => {
+    setDeviceLoading(true);
     deviceApi.get(id).subscribe({
       next: (device) => {
+        setDeviceLoading(false);
         setDevice(device);
       },
     });
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [updateDevice]);
 
   return (
     <>
-      <AppDeviceModal ref={deviceModalRef} aModelList={modelList} />
+      <AppDeviceModal
+        ref={deviceModalRef}
+        onSuccess={() => {
+          setUpdateDevice((n) => n + 1);
+        }}
+      />
       <AppRouteHeader>
         <AppRouteHeader.Breadcrumb
           aList={[
@@ -87,6 +81,7 @@ export default function Detail(): JSX.Element | null {
           </div>
         ) : (
           <>
+            <DSpinner dVisible={deviceLoading}></DSpinner>
             <DCard>
               <DCard.Content>
                 <div className="app-title mb-3">Title 1</div>