Добавлены скелеты страниц "Дело скважины"

src/pages/WellCase/HistoryTable.jsx

@@ -0,0 +1,73 @@
+import { memo, useEffect, useState } from 'react'
+import { Empty, Timeline } from 'antd'
+import moment from 'moment'
+
+import { useWell } from '@asb/context'
+import DownloadLink from '@components/DownloadLink'
+import LoaderPortal from '@components/LoaderPortal'
+import { invokeWebApiWrapperAsync } from '@components/factory'
+// import { makeColumn, makeDateColumn, Table } from '@components/Table'
+import { formatDate } from '@utils'
+import { UserView } from '@asb/components/views'
+
+// const columns = [
+//     makeColumn('Файл', 'file', {
+//         render: (file) => (
+//             <DownloadLink file={file} />
+//         ),
+//     }),
+//     makeDateColumn('Дата загрузки', 'date', undefined, undefined, {
+//         defaultSortOrder: 'descend',
+//     }),
+// ]
+
+export const HistoryTable = memo(({ users, category }) => {
+    const [isLoading, setIsLoading] = useState(false)
+    const [files, setFiles] = useState([])
+
+    const [well] = useWell()
+
+    useEffect(() => {
+        invokeWebApiWrapperAsync(
+            async () => {
+                const files = [{ uploadDate: moment().format(), id: 0, idWell: 0 }]
+                files.sort((a, b) => moment(a.uploadDate) - moment(b.uploadDate))
+                const fileSource = files.map((file) => ({
+                    file,
+                    date: file.uploadDate,
+                    user: users.find(({ id }) => id === file.idAuthor) ?? null,
+                }))
+                setFiles(fileSource) // Получаем список файлов и записываем в state
+            },
+            setIsLoading,
+            `Не удалось загрузить историю файлов категории "${category.caption}"`,
+        )
+    }, [well, category])
+
+    return (
+        <LoaderPortal show={isLoading}>
+            {files.length > 0 ? (
+                <Timeline reverse style={{ marginLeft: 20 }}>
+                    {files.map(({ date, user, file }) => (
+                        <Timeline.Item>
+                            {formatDate(date)}
+                            <UserView user={user} style={{ marginLeft: 10 }} />
+                            <DownloadLink file={file} />
+                        </Timeline.Item>
+                    ))}
+                </Timeline>
+            ) : (
+                <Empty />
+            )}
+            {/* <Table
+                bordered
+                size={'small'}
+                dataSource={files}
+                columns={columns}
+            /> */}
+        </LoaderPortal>
+    )
+})
+
+export default HistoryTable
+

src/pages/WellCase/WellCaseEditor.jsx

@@ -0,0 +1,22 @@
+import { memo, useCallback, useState } from 'react'
+import { Modal, Transfer } from 'antd'
+
+import { useWell } from '@asb/context'
+
+export const WellCaseEditor = memo(({ show, onClose }) => {
+    const [users, setUsers] = useState([])
+
+    const [well] = useWell()
+
+    const onModalOk = useCallback(() => {
+        onClose(true)
+    }, [])
+
+    return (
+        <Modal visible={show} onCancel={() => onClose(false)} onOk={onModalOk}>
+            <Transfer />
+        </Modal>
+    )
+})
+
+export default WellCaseEditor

src/pages/WellCase/index.jsx

@@ -0,0 +1,92 @@
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { Button } from 'antd'
+
+import { useWell } from '@asb/context'
+import { UserView } from '@components/views'
+import DownloadLink from '@components/DownloadLink'
+import LoaderPortal from '@components/LoaderPortal'
+import { invokeWebApiWrapperAsync } from '@components/factory'
+import { makeColumn, makeDateColumn, makeTextColumn, Table } from '@components/Table'
+import { delay, wrapPrivateComponent } from '@utils'
+
+import WellCaseEditor from './WellCaseEditor'
+import { HistoryTable } from './HistoryTable'
+
+const columns = [
+    makeTextColumn('Категория', 'caption'),
+    makeColumn('Файл', 'file', {
+        render: (file) => file ? (
+            <DownloadLink file={file} />
+        ) : (
+            <span>Файл не загружен</span>
+        ),
+    }),
+    makeDateColumn('Дата загрузки', 'uploadDate'),
+    makeColumn('Ответственные', 'responsible', {
+        render: (responsible) => responsible.map((user) => (
+            <UserView user={user} />
+        )),
+    }),
+]
+
+const WellCase = memo(() => {
+    const [isLoading, setIsLoading] = useState(false)
+    const [categories, setCategories] = useState([])
+    const [canEdit, setCanEdit] = useState(false)
+    const [showEdit, setShowEdit] = useState(false)
+    const [users, setUsers] = useState([])
+
+    const [well] = useWell()
+
+    const updateTable = useCallback(() => {
+        invokeWebApiWrapperAsync(
+            async () => {
+                await delay(1000)
+                const categories = [{ responsible: [{}] }]
+
+                setCanEdit(true)
+                const showingCategories = categories.filter((cat) => cat.responsible && cat.responsible?.length > 0)
+                setCategories(showingCategories)
+            },
+            setIsLoading,
+            'Не удалось загрузить список категорий',
+        )
+    }, [well])
+
+    const onEditClose = useCallback((changed = false) => {
+        setShowEdit(false)
+        if (changed) updateTable()
+    }, [updateTable])
+
+    const expandable = useMemo(() => ({
+        expandedRowRender: (category) => (
+            <HistoryTable users={users} category={category} />
+        )
+    }), [users])
+
+    useEffect(() => updateTable(), [updateTable])
+
+    return (
+        <>
+            <LoaderPortal show={isLoading}>
+                {canEdit && (
+                    <Button onClick={() => setShowEdit(true)}>Редактировать</Button>
+                )}
+                <Table
+                    bordered
+                    size={'small'}
+                    dataSource={categories}
+                    columns={columns}
+                    expandable={expandable}
+                />
+            </LoaderPortal>
+            <WellCaseEditor users={users} show={showEdit} onClose={onEditClose} />
+        </>
+    )
+})
+
+export default wrapPrivateComponent(WellCase, {
+    title: 'Дело скважины',
+    route: 'well_case',
+    requirements: [],
+})