Merge branch 'master' of https://git.jkhsakha.ru/HotamovFO/Web-Fuel

src/components/Forms/Driver.tsx

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { IDriver, IDriverLicense } from "../../interfaces/Driver";
+import { ActionIcon, Button, Flex, Table, Transition } from "@mantine/core";
+import { stringToSnils } from "../../utils/format";
+import { dateToDDMMYYYY } from "../../utils/date";
+import { IconEdit, IconLinkPlus, IconPlus, IconTrash } from "@tabler/icons-react";
+import DriverLicense from "./DriverLicense";
+
+interface IDriverProps {
+  driver: IDriver,
+  handleEditDriver: (driver: IDriver) => void,
+  handleDeleteDriver: (id: number) => void,
+  handleEditLicense: (license: IDriverLicense) => void,
+  handleDeleteLicense: (id: number) => void
+}
+
+const Driver = ({ driver, handleEditDriver, handleDeleteDriver, handleEditLicense, handleDeleteLicense }: IDriverProps) => {
+  const [opened, setOpened] = useState(false)
+
+  return (
+    <>
+      <Table.Tr style={{ cursor: 'pointer' }} onClick={() => setOpened(!opened)}>
+        <Table.Td>{driver.fullname}</Table.Td>
+        <Table.Td>{stringToSnils(driver.snils)}</Table.Td>
+        <Table.Td>{dateToDDMMYYYY(driver.birthday)}</Table.Td>
+        <Table.Td>{driver.iin}</Table.Td>
+        <Table.Td>
+          <ActionIcon color="blue" onClick={(e) => { e.stopPropagation(); handleEditDriver(driver); }} style={{ marginRight: "10px" }}>
+            <IconEdit />
+          </ActionIcon>
+          <ActionIcon color="red" onClick={(e) => { e.stopPropagation(); handleDeleteDriver(driver.id); }}>
+            <IconTrash />
+          </ActionIcon>
+        </Table.Td>
+      </Table.Tr>
+
+      <Transition
+        mounted={opened}
+        transition={{
+          in: { opacity: 1, transform: 'scaleY(1)' },
+          out: { opacity: 0, transform: 'scaleY(0)' },
+          common: { transformOrigin: 'top' },
+          transitionProperty: 'transform, opacity',
+        }}
+        duration={200}
+        timingFunction='ease'
+        keepMounted
+      >
+        {(transitionStyle) => (
+          <Table.Tr style={{ ...transitionStyle }}>
+            <Table.Td colSpan={5}>
+              <Flex justify='space-evenly'>
+                <Button leftSection={<IconPlus />} onClick={() => handleEditLicense({} as IDriverLicense)}>
+                  Добавить водительские права
+                </Button>
+                <Button leftSection={<IconLinkPlus />}>Привязать существующие права</Button>
+              </Flex>
+            </Table.Td>
+          </Table.Tr>
+        )}
+      </Transition>
+      {opened && driver.license && Array.isArray(driver.license) && driver.license.map((license: IDriverLicense, index) => (
+        <Table.Tr>
+          <DriverLicense
+            key={`licId-${license.id}-${index}`}
+            license={license}
+            handleDeleteLicense={handleDeleteLicense}
+            handleEditLicense={handleEditLicense}
+          />
+        </Table.Tr>
+      ))}
+    </>
+  )
+}
+
+export default Driver

src/components/Forms/DriverLicense.tsx

@@ -0,0 +1,29 @@
+import { ActionIcon, Table } from "@mantine/core"
+import { IDriverLicense } from "../../interfaces/Driver"
+import { dateToDDMMYYYY } from "../../utils/date"
+import { IconEdit, IconTrash } from "@tabler/icons-react"
+
+const DriverLicense = ({ license, handleDeleteLicense, handleEditLicense }: {
+  license: IDriverLicense,
+  handleDeleteLicense: (id: number) => void,
+  handleEditLicense: (license: IDriverLicense) => void
+}) => {
+  return (
+    <>
+      <Table.Td>{license.series_number}</Table.Td>
+      <Table.Td>{dateToDDMMYYYY(license.form_date)}</Table.Td>
+      <Table.Td>{dateToDDMMYYYY(license.to_date)}</Table.Td>
+      <Table.Td>{license.categories?.map((c) => c.name_short).join(", ")}</Table.Td>
+      <Table.Td>
+        <ActionIcon color="blue" onClick={() => handleEditLicense(license)} style={{ marginRight: "10px" }}>
+          <IconEdit />
+        </ActionIcon>
+        <ActionIcon color="red" onClick={() => handleDeleteLicense(license.id)}>
+          <IconTrash />
+        </ActionIcon>
+      </Table.Td>
+    </>
+  )
+}
+
+export default DriverLicense