DriverForm update

src/pages/DriverForm.tsx

@@ -6,6 +6,7 @@ import {
   Table,
   ActionIcon,
   Modal,
+  Checkbox,
 } from "@mantine/core";
 import { DateInput } from "@mantine/dates";
 import { useForm } from "@mantine/form";
@@ -41,10 +42,10 @@ const DriverForm = () => {
 
   const driverForm = useForm({
     initialValues: {
-      fullname: "Попов Спиридон Семенович",
+      fullname: "",
-      snils: "11122233344",
+      snils: "",
       birthday: null,
-      iin: "123456789123",
+      iin: "",
     },
   });
 
@@ -166,6 +167,52 @@ const DriverForm = () => {
     return new Date(year, month - 1, day); // Month is 0-indexed in Date
   }
 
+  const Driver = ({ driver }: { driver: any }) => {
+    const [opened, setOpened] = useState(false)
+
+    return (
+      <>
+        <Table.Tr onClick={() => setOpened(!opened)}>
+          <Table.Td>{driver.fullname}</Table.Td>
+          <Table.Td>{driver.snils}</Table.Td>
+          <Table.Td>{driver.birthday}</Table.Td>
+          <Table.Td>{driver.iin}</Table.Td>
+          <Table.Td>
+            <ActionIcon color="blue" onClick={() => handleEditDriver(driver)} style={{ marginRight: "10px" }}>
+              <IconEdit />
+            </ActionIcon>
+            <ActionIcon color="red" onClick={() => handleDeleteDriver(driver.id)}>
+              <IconTrash />
+            </ActionIcon>
+          </Table.Td>
+        </Table.Tr>
+
+        {driver.license && Array.isArray(driver.license) && driver.license.map(dr => (
+          <Table.Tr>
+            <Table.Td>{dr}</Table.Td>
+          </Table.Tr>
+        ))}
+      </>
+    )
+
+    return (
+      <Table.Tr onClick={() => setOpened(!opened)}>
+        <Table.Td>{driver.fullname}</Table.Td>
+        <Table.Td>{driver.snils}</Table.Td>
+        <Table.Td>{driver.birthday}</Table.Td>
+        <Table.Td>{driver.iin}</Table.Td>
+        <Table.Td>
+          <ActionIcon color="blue" onClick={() => handleEditDriver(driver)} style={{ marginRight: "10px" }}>
+            <IconEdit />
+          </ActionIcon>
+          <ActionIcon color="red" onClick={() => handleDeleteDriver(driver.id)}>
+            <IconTrash />
+          </ActionIcon>
+        </Table.Td>
+      </Table.Tr>
+    )
+  }
+
   return (
     <div>
       <h2>Водители</h2>
@@ -182,20 +229,7 @@ const DriverForm = () => {
         </Table.Thead>
         <Table.Tbody>
           {drivers.map((driver) => (
-            <Table.Tr key={driver.id}>
+            <Driver key={driver.id} driver={driver} />
-              <Table.Td>{driver.fullname}</Table.Td>
-              <Table.Td>{driver.snils}</Table.Td>
-              <Table.Td>{driver.birthday}</Table.Td>
-              <Table.Td>{driver.iin}</Table.Td>
-              <Table.Td>
-                <ActionIcon color="blue" onClick={() => handleEditDriver(driver)} style={{ marginRight: "10px" }}>
-                  <IconEdit />
-                </ActionIcon>
-                <ActionIcon color="red" onClick={() => handleDeleteDriver(driver.id)}>
-                  <IconTrash />
-                </ActionIcon>
-              </Table.Td>
-            </Table.Tr>
           ))}
         </Table.Tbody>
       </Table>
@@ -238,16 +272,6 @@ const DriverForm = () => {
           <TextInput label="ФИО" {...driverForm.getInputProps("fullname")} required />
           <TextInput label="СНИЛС" {...driverForm.getInputProps("snils")} required />
           <TextInput label="ИНН" {...driverForm.getInputProps("iin")} required />
-          {/* <DateInput
-            label="Дата рождения"
-            placeholder="ДД.MM.ГГГГ"
-            defaultLevel='month'
-            valueFormat='DD.MM.YYYY'
-            required
-            dateParser={parseDDMMYYYY}
-            locale="ru"
-            {...driverForm.getInputProps("birthday")}
-          /> */}
           <MaskedDateInput
             label="Дата рождения"
             required
@@ -258,6 +282,26 @@ const DriverForm = () => {
           </Button>
         </form>
       </Modal>
+
+      <Modal opened={licenseModalOpened} onClose={() => setLicenseModalOpened(false)} title="Добавить / Редактировать водительские права">
+        <form onSubmit={licenseForm.onSubmit(handleAddLicense)}>
+          <TextInput label="Серия и номер" {...licenseForm.getInputProps("series_number")} required />
+          <MaskedDateInput
+            label="Дата выдачи"
+            required
+            {...licenseForm.getInputProps("form_date")}
+          />
+          <MaskedDateInput
+            label="Срок действия"
+            required
+            {...licenseForm.getInputProps("to_date")}
+          />
+          <Checkbox defaultChecked label="Действующее" {...licenseForm.getInputProps("is_actual")} style={{ marginTop: "10px" }}/>
+          <Button fullWidth mt="md" type="submit">
+            Сохранить
+          </Button>
+        </form>
+      </Modal>
     </div>
   );
 };