From 9de6400e7822354339f2d9e6a52cca6a78874bdd Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Mon, 7 Feb 2022 22:20:44 +0500
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D1=88=D0=B0=D0=B1=D0=BB=D0=BE=D0=BD=20=D0=BD=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=BE=D0=B9=20=D0=BF=D1=80=D0=BE=D0=B3=D1=80=D0=B0=D0=BC?=
 =?UTF-8?q?=D0=BC=D1=8B=20=D0=B1=D1=83=D1=80=D0=B5=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/DrillingProgram.jsx | 352 ++++++++++++++++++++--------------
 1 file changed, 210 insertions(+), 142 deletions(-)

diff --git a/src/pages/DrillingProgram.jsx b/src/pages/DrillingProgram.jsx
index 823bebc..b19a8bf 100644
--- a/src/pages/DrillingProgram.jsx
+++ b/src/pages/DrillingProgram.jsx
@@ -1,168 +1,236 @@
-import { useEffect, useState } from 'react'
-import { FileExcelOutlined } from '@ant-design/icons'
-import { Popconfirm, Button, Tooltip, Typography } from 'antd'
+import { memo, useState } from 'react'
+import { Button, Tooltip, Layout } from 'antd'
+import { CommentOutlined, FileWordOutlined, TableOutlined, UploadOutlined } from '@ant-design/icons'
 
 import { Flex } from '@components/Grid'
+import { UserView } from  '@components/views'
 import LoaderPortal from '@components/LoaderPortal'
-import { MarkView, UserView } from  '@components/views'
-import { invokeWebApiWrapperAsync, download, formatBytes } from '@components/factory'
-import { DrillingProgramService, WellService } from '@api'
+import { invokeWebApiWrapperAsync } from '@components/factory'
+import { arrayOrDefault, formatDate } from '@utils'
+import { hasPermission } from '@utils/permissions'
+import { DrillingProgramService } from '@api'
 
-import DocumentsTemplate from '@pages/Documents/DocumentsTemplate'
+const testCategories = [
+  {
+    caption: 'Задание от геологов',
+    status: 1,
+    file: {
+      name: 'Документ 1.xlsx',
+      author: { login: 'Человек 9', company: { caption: 'Компания 9' } },
+      size: '123 кБ',
+      uploadDate: '2022-01-01T00:00:00',
+    },
+    lastApprove: '2022-01-01T00:00:00',
+    lastReject: '2022-01-01T00:00:00',
+    approved: [{
+      user: { login: 'Человек 2', company: { caption: 'Компания 2' }},
+      comment: 'Комментарий',
+    }],
+    undecided: [{ login: 'Человек 3', company: { caption: 'Компания 1' }}],
+    rejected: [],
+  }, {
+    caption: 'Профиль ствола скважины (ННБ)',
+    status: 1,
+    file: {
+      name: 'Документ 1.xlsx',
+      author: { login: 'Человек 9', company: { caption: 'Компания 9' }},
+      size: '123 кБ',
+      uploadDate: '2022-01-01T00:00:00',
+    },
+    lastApprove: '2022-01-01T00:00:00',
+    lastReject: '2022-01-01T00:00:00',
+    approved: [{
+      user: { login: 'Человек 2', company: { caption: 'Компания 2' }},
+      comment: 'Комментарий 3',
+    }],
+    undecided: [
+      { login: 'Человек 3', company: { caption: 'Компания 1' }},
+      { login: 'Человек 4', company: { caption: 'Компания 2' }},
+    ],
+    rejected: [{
+      user: { login: 'Человек 1', company: { caption: 'Компания 1' }},
+      comment: 'Комментарий 2',
+    }],
+  }, {
+    caption: 'Технологические расчёты ННБ',
+    status: 0,
+    file: {
+      name: 'Документ 1.xlsx',
+      author: { login: 'Человек 9', company: { caption: 'Компания 9' }},
+      size: '123 кБ',
+      uploadDate: '2022-01-01T00:00:00',
+    },
+    lastApprove: '2022-01-01T00:00:00',
+    lastReject: '2022-01-01T00:00:00',
+    approved: [],
+    undecided: [
+      { login: 'Человек 2', company: { caption: 'Компания 1' }},
+      { login: 'Человек 3', company: { caption: 'Компания 1' }},
+      { login: 'Человек 4', company: { caption: 'Компания 2' }},
+    ],
+    rejected: [{
+      user: { login: 'Человек 1', company: { caption: 'Компания 1' }},
+      comment: 'Комментарий 2',
+    }],
+  }, {
+    caption: 'ГГД',
+    status: 0,
+    file: {
+      name: 'Документ 1.xlsx',
+      author: { login: 'Человек 9', company: { caption: 'Компания 9' }},
+      size: '123 кБ',
+      uploadDate: '2022-01-01T00:00:00',
+    },
+    lastApprove: '2022-01-01T00:00:00',
+    lastReject: '2022-01-01T00:00:00',
+    approved: [],
+    undecided: [
+      { login: 'Человек 2', company: { caption: 'Компания 1' }},
+      { login: 'Человек 3', company: { caption: 'Компания 1' }},
+      { login: 'Человек 4', company: { caption: 'Компания 2' }},
+      { login: 'Человек 2', company: { caption: 'Компания 1' }},
+      { login: 'Человек 3', company: { caption: 'Компания 1' }},
+      { login: 'Человек 4', company: { caption: 'Компания 2' }},
+    ],
+    rejected: [{
+      user: { login: 'Человек 1', company: { caption: 'Компания 1' }},
+      comment: 'Комментарий 2',
+    }],
+  }
+]
 
-const idFileCategoryDrillingProgramItems = 13
-const { Text } = Typography
+const testProgram = {
+  name: 'Документ 1.xlsx',
+  size: '123 кБ',
+  uploadDate: '2022-01-01T00:00:00',
+}
 
-export const DrillingProgram = ({ idWell }) => {
-  const [downloadButtonEnabled, selDownloadButtonEnabled] = useState(false)
+export const DrillingProgram = memo(({ idWell }) => {
   const [showLoader, setShowLoader] = useState(false)
-  const [tooltip, setTooltip] = useState('нет файлов для формирования')
-  const [wellLabel, setWellLabel] = useState(`${idWell}`)
-  const [childKey, setChildKey] = useState()
-  const [lastUpdatedFile, setLastUpdatedFile] = useState()
+  const [categories, setCategories] = useState(testCategories)
+  const [program, setProgram] = useState(testProgram)
 
-  useEffect(() => invokeWebApiWrapperAsync(
+  const updateData = async () => await invokeWebApiWrapperAsync(
     async () => {
-      const well = await WellService.get(idWell)
-      setWellLabel(well.caption ?? `${idWell}`)
+      const categories = arrayOrDefault(await DrillingProgramService.getCategories(idWell))
+      const program = await DrillingProgramService.getProgram(idWell)
+      setCategories(categories)
+      setProgram(program)
     },
     setShowLoader,
-    `Не удалось загрузить название скважины "${idWell}"`,
-    'Получить название скважины'
-  ), [idWell])
-
-  const downloadProgram = () => invokeWebApiWrapperAsync(
-    async () => await download(`/api/well/${idWell}/drillingProgram`),
-    setShowLoader,
-    `Не удалось загрузить программу бурения для скважины "${idWell}"`,
-    'Получить программу бурения'
+    `Не удалось загрузить название скважины "${idWell}"`
   )
 
-  const openProgramPreview = () => invokeWebApiWrapperAsync(
-    async() => {
-      const filWebUrl = await DrillingProgramService.getOrCreateSharedUrl(idWell)
-      if(filWebUrl && filWebUrl.length > 0)
-        window.open(filWebUrl, '_blank')
-      else
-        throw new Error('Сервер вернул плохую ссылку')
+  // useEffect(() => updateCategories(), [idWell])
+
+  const onApprove = (category) => () => invokeWebApiWrapperAsync(
+    async () => {
+      await DrillingProgramService.approve(idWell, category)
+      await updateData()
     },
     setShowLoader,
-    'Не удалось создать быстрый просмотр программы',
-    'Создать быстрый просмотр программы'
+    `Не удалось согласовать документ для скважины "${idWell}"!`
   )
 
-  const filesUpdated = (files) => {
-    if (!files || files.length === 0) {
-      setTooltip('Нет файлов для формирования программы')
-      selDownloadButtonEnabled(false)
-      return
-    }
-
-    const isAllFilesAreExcel = files.every(fileInfo => fileInfo?.name.toLowerCase().endsWith('.xlsx'))
-    const isAnyFileMarked = files.some(file => file?.fileMarks.some(m => m?.idMarkType === 1 && !m?.isDeleted))
-
-    if (isAllFilesAreExcel && isAnyFileMarked) {
-      setTooltip('Программа доступна для скачивания')
-      selDownloadButtonEnabled(true)
-    } else {
-      setTooltip('Список файлов содержит недопустимые типы файлов')
-    }
-    const last = files.reduce((pre, cur) => pre.uploadDate > cur.uploadDate ? pre : cur)
-    setLastUpdatedFile(last)
-  }
-
-  const customColumns = [
-    {
-      title: 'Метки',
-      key: 'fileMarks',
-      render: (_, record) => renderMarksColumn(record?.id, record?.fileMarks)
+  const onReject = (category) => () => invokeWebApiWrapperAsync(
+    async () => {
+      await DrillingProgramService.reject(idWell, category)
+      await updateData()
     },
-  ]
-
-  const renderMarksColumn=(idFile, marks)=>{
-    const validMarks = marks?.filter(m => !(m?.isDeleted))
-    if(validMarks?.length)
-      return validMarks.map(mark => <MarkView mark = {mark} onDelete={() => deleteMark(mark.id)}/>)
-
-    return (
-      <Popconfirm title={'Согласовать файл?'} onConfirm={() => addMarkToFile(idFile)}>
-        <Button  type={'link'}>Согласовать</Button>
-      </Popconfirm>
-    )
-  }
-
-  const addMarkToFile = async (idFile) => {
-    const mark = {
-      idFile: idFile,
-      idMarkType: 1,
-      isDeleted: false,
-      comment: '',
-    }
-    await DrillingProgramService.createFileMark(idWell, mark)
-    selDownloadButtonEnabled(true)
-    setChildKey(Date.now())
-  }
-
-  const deleteMark = async (idMark) => {
-    await DrillingProgramService.deleteFileMark(idWell, idMark)
-    setChildKey(Date.now())
-  }
-
-  const downloadButton = (
-    <div>
-      <span>Программа бурения</span>
-      <Flex>
-        <Tooltip title={tooltip}>
-          <Button
-            type={'primary'}
-            onClick={downloadProgram}
-            disabled={!downloadButtonEnabled}
-          >
-            Сформировать и скачать
-          </Button>
-        </Tooltip>
-        <Tooltip title={'Просмотреть через GoogleDrive'}>
-          <Popconfirm
-            title={'Загрузить файл на GoogleDrive для просмотра?'}
-            onConfirm={openProgramPreview}
-            disabled={!downloadButtonEnabled}
-          >
-            <Button
-              type={'link'}
-              disabled={!downloadButtonEnabled}
-            >
-              <FileExcelOutlined />
-              Программа бурения {wellLabel}.xlsx
-            </Button>
-          </Popconfirm>
-        </Tooltip>
-      </Flex>
-    </div>
+    setShowLoader,
+    `Не удалось согласовать документ для скважины "${idWell}"!`
   )
 
-  const lastUpdatedFileView = lastUpdatedFile &&
-  <Text>
-    <b>Последнее изменние:</b>
-    &nbsp;'{lastUpdatedFile.name}'
-    &nbsp;[{formatBytes(lastUpdatedFile.size)}]
-    &nbsp;загружен: {new Date(lastUpdatedFile.uploadDate).toLocaleString()}
-    &nbsp;автор: <UserView user={lastUpdatedFile.author}/>
-  </Text>
-
   return (
     <LoaderPortal show={showLoader}>
-      <DocumentsTemplate
-        key={childKey}
-        idWell={idWell}
-        accept={'.xlsx'}
-        onChange={filesUpdated}
-        headerChild={downloadButton}
-        customColumns={customColumns}
-        beforeTable={lastUpdatedFileView}
-        idCategory={idFileCategoryDrillingProgramItems}
-      />
+      <Layout>
+        {program && (
+          <div style={{ border: '1px solid #BEBEBE' }}>
+            <div style={{ padding: '5px 10px', backgroundColor: '#F3F3F3', borderBottom: '1px solid #BEBEBE' }}>Программа бурения</div>
+            <Flex style={{ justifyContent: 'flex-start', alignItems: 'center', backgroundColor: 'white' }}>
+              <Button type={'link'} icon={<FileWordOutlined />} style={{ marginLeft: '10px' }}>{program.name}</Button>
+              <div style={{ margin: '10px' }}>Размер: {program.size}</div>
+              <div style={{ margin: '10px' }}>Загружен: {formatDate(program.uploadDate)}</div>
+            </Flex>
+          </div>
+        )}
+
+        {categories.map((category) => category && (
+          <div key={category.caption} style={{ border: '1px solid #BEBEBE', marginTop: '10px' }}>
+            <Flex style={{ width: '100%', borderBottom: '1px solid #BEBEBE' }}>
+              <div style={{ padding: '5px 10px', backgroundColor: '#F3F3F3', flex: 5, borderRight: '1px solid #BEBEBE' }}>{category.caption}</div>
+              <div style={{ padding: '5px 10px', backgroundColor: '#F3F3F3', flex: 7 }}>Согласованты</div>
+            </Flex>
+            <Flex>
+              <Flex style={{ padding: '5px 10px', backgroundColor: 'white', alignItems: 'stretch', flex: 5, borderRight: '1px solid #BEBEBE' }}>
+                <Flex style={{ flex: 10, flexDirection: 'column', alignItems: 'flex-start' }}>
+                  <Button type={'link'} icon={<FileWordOutlined />}>{category.file.name}</Button>
+                  <div style={{ marginLeft: '15px' }}>Автор: <UserView user={category.file.author}/></div>
+                  <div style={{ marginLeft: '15px' }}>Размер: {category.file.size}</div>
+                  <div style={{ marginLeft: '15px' }}>Загружен: {formatDate(category.file.uploadDate)}</div>
+                </Flex>
+                <Flex style={{ flexDirection: 'column', flex: 2 }}>
+                  <Button icon={<UploadOutlined />} style={{ margin: '5px 0 10px 0' }} title={'Загрузить'}>Загрузить</Button>
+                  <Button icon={<TableOutlined />} disabled={!category.file} title={'История'}>История</Button>
+                </Flex>
+              </Flex>
+              <Flex style={{ padding: '5px 10px', backgroundColor: 'white', alignItems: 'stretch', flex: 7 }}>
+                <div style={{ display: 'flex', flexWrap: 'wrap', flex: 6 }}>
+                  {category.undecided.map((user, i) => (
+                    <span key={i} style={{ margin: '5px 10px' }}>
+                      <UserView user={user} />
+                    </span>
+                  ))}
+                </div>
+                <Flex style={{ flex: 3, margin: '0 5px', flexDirection: 'column' }}>
+                  {category.status === 0 && hasPermission() && (
+                    <Button style={{ margin: '5px 0'}} onClick={onApprove(category)}>Согласовать</Button>
+                  )}
+                  <Flex style={{ flexDirection: 'column', padding: '10px', backgroundColor: '#EFFEEF', border: '1px solid #1FB448', flexGrow: 1 }}>
+                    <Flex style={{ justifyContent: 'space-between' }}>
+                      <span style={{ fontWeight: 800 }}>Согласовано</span>
+                      <span>{formatDate(category.lastApprove)}</span>
+                    </Flex>
+                    <div style={{ display: 'flex', flexDirection: 'column-reverse', alignItems: 'stretch', flexGrow: 1 }}>
+                      {category.approved?.map(({ comment, user }, i) => (
+                        <div key={`${i}`} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                          <UserView user={user} />
+                          <Tooltip placement={'left'} title={comment}>
+                            <CommentOutlined />
+                          </Tooltip>
+                        </div>
+                      ))}
+                    </div>
+                  </Flex>
+                </Flex>
+                <Flex style={{ flex: 3, marginLeft: '0 5px', flexDirection: 'column' }}>
+                  {category.status === 0 && hasPermission() && (
+                    <Button style={{ margin: '5px 0' }} onClick={onReject(category)}>Отклонить</Button>
+                  )}
+                  <Flex style={{ flexDirection: 'column', padding: '10px', backgroundColor: '#FEF2EF', border: '1px solid #B4661F', flexGrow: 1 }}>
+                    <Flex style={{ justifyContent: 'space-between' }}>
+                      <span style={{ fontWeight: 800 }}>Отклонено</span>
+                      <span>{formatDate(category.lastReject)}</span>
+                    </Flex>
+                    <div style={{ display: 'flex', flexDirection: 'column-reverse', alignItems: 'stretch', flexGrow: 1 }}>
+                      {category.rejected?.map(({ comment, user }, i) => (
+                        <div key={`${i}`} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                          <UserView user={user} />
+                          <Tooltip placement={'left'} title={comment}>
+                            <CommentOutlined />
+                          </Tooltip>
+                        </div>
+                      ))}
+                    </div>
+                  </Flex>
+                </Flex>
+              </Flex>
+            </Flex>
+          </div>
+        ))}
+      </Layout>
     </LoaderPortal>
   )
-}
+})
 
 export default DrillingProgram