File "tableColumns.tsx"

Full Path: /var/www/html/gitep_front/src/shared/config/tableColumns.tsx
File size: 8.67 KB
MIME-type: text/x-java
Charset: utf-8

import {
  ApplicantColumn,
  CommonColumnsData,
  GroupRowData,
  MainRowData,
} from "@shared/modals";
import { StatusValue } from "@/entities/payment-card/model";
import {
  Applicant,
  MessageTooltip,
  Name,
  NameCol,
} from "@shared/ui/ColumnsTable";
import { CustomStatus } from "@shared/ui/Tags/tags";
import { Flex, Typography, Tooltip } from "antd";
import styles from "@shared/ui/ColumnsTable/columns-table.module.scss";
import dayjs from "dayjs";
import { formatNumber, formatWholeSum } from "../lib";

export const mainColumns: any = (id?: any) => [
  {
    title: "Назначение / Контрагент",
    dataIndex: "name",
    render: (name: GroupRowData["name"] | MainRowData["name"], record: CommonColumnsData) => {
      const { contragent } = record

      if (record?.innerGroup && record.children) {
          return (
            <Flex justify="space-between" align="center" style={{
              width: '290px', whiteSpace: 'nowrap'
            }}>
              <Tooltip placement="bottomRight" color="#344054" title={`${record.name} | ${record.contragent ? record.contragent.name : ''}`}>
                <Flex vertical>
                  <NameCol width='290px' name={record.name} record={record} id={id} />
                </Flex>
              </Tooltip>
            </Flex>
          )} 
      
      if (typeof name === "string") {
        return <NameCol width='290px' name={name} record={record} id={id} />;
      } else if (name && typeof name === "object") {
        return <Name width='290px' data={name} counterparty={contragent} />;
      }
    },
    width: 352,
    fixed: "left",
  },
  {
    title: "Сумма, ₽",
    dataIndex: "amount",
    fixed: "left",
    width: 162,
    className: 'summCell',
    render: (text: string | undefined, record: any) => {
      if (text) {
        function sumAllAmounts(rec: any) {
          let total = 0;
          for (const child of rec.children) {
              if(child.payment_type !== 'reception' && child.payment_type !=='reception_from_1c') {
                total += Number(child.amount);
              }
          }

          return total;
        }
        let fullAmount = 0;

        if( record?.children) {
          if( record?.children.length > 0 && record?.children[0]?.amount !== "0.00") {
           fullAmount = sumAllAmounts(record);
          }  else {
          fullAmount = record?.amount
        }
        } else {
          fullAmount = record?.amount
        }
        const plusSign = (record?.payment_type === 'reception' || record?.payment_type === 'reception_from_1c') ? '+ ' : '';
        return (
            <Typography.Text
              style={{
                width: '100%',
                textAlign: 'end',
                display: 'block',
                paddingRight: '13px',
                color: (record?.payment_type === 'reception' || record?.payment_type === 'reception_from_1c') ? '#52C41A' : '#101828'
              }}
            >
              {plusSign}{record?.payment_type ? formatNumber(fullAmount) : formatWholeSum(fullAmount)}
            </Typography.Text>
        );
      }
      return null;
    },
  },
  {
  title: false,
  dataIndex: "last_comment",
  render: (text: string | undefined, record: any) =>
    record?.comment ?
      <div
        style={{width: '56px'}}
        onClick={(e) => {
          e.stopPropagation();
        }}><MessageTooltip text={record?.comment} /></div>
      : null,
  width: 56,
  shouldBeDisplayed: true,
  },
  {
    title: "Статус",
    dataIndex: "status",
    render: (status: StatusValue | undefined) =>
      status ? <div style={{paddingLeft: '12px'}}><CustomStatus prefixIcon status={status} width='156'/></div> : null,
    width: 156,
  },
  {
    title: "Статья / Проект",
    dataIndex: "distributed_payments",
    render: (children: any, record: any) => {
      const firstDistribution = record?.distributions?.[0];

      const offerNumber = firstDistribution?.project?.offer_number || '';
      const objectAddres = firstDistribution?.project?.object_address || '';
      const shortDescription = firstDistribution?.project?.short_description || '';

      const fullName = [offerNumber, objectAddres, shortDescription].filter(Boolean).join(" | ");


      if (record?.innerGroup && record.children) {
        if(record.distributions.length > 1) {
          return (
            <Flex justify="space-between" align="center" style={{
              width: '460px', paddingLeft: '16px'
            }}>
              <Tooltip placement="bottomLeft" color="#344054" title={`${record.articleTitle} — ${fullName}`}>
                <Flex vertical>
                  <Typography.Text>{record.articleTitle}</Typography.Text>
                  <Typography.Text className={styles.articles}>{record.projectTitle}</Typography.Text>
                </Flex>
              </Tooltip>
            </Flex>
          );
        } else {
          return (
            <Flex justify="space-between" align="center" style={{
              width: '460px', paddingLeft: '13px'
            }}>
              <Tooltip placement="bottomLeft" color="#344054" title={`${record.articleTitle} — ${fullName}`}>
                <Flex vertical style={{ width: '380px', whiteSpace: 'nowrap' }}>
                  <Typography.Text style={{ overflow: 'hidden' , textOverflow: 'ellipsis' }}>{record.articleTitle}</Typography.Text>
                  <Typography.Text className={styles.articles}>{fullName}</Typography.Text>
                </Flex>
              </Tooltip>
            </Flex>
          );
        }
      }
      return (
        <Flex justify="space-between" style={{
          width: '461px', paddingLeft: '16px'
        }}>
          <Flex vertical style={{
            width: '462px',
          }}>
            <Typography.Text>{record?.article?.name}</Typography.Text>
            { record?.project && <Typography.Text className={styles.articles}>{fullName}</Typography.Text> }
          </Flex>
        </Flex>
      )
    },
    width: 400,
  },
  {
    title: false,
    dataIndex: "last_comment",
    render: (text: string | undefined, record: any) =>
      record?.comment ?
        <div
          style={{width: '56px'}}
          onClick={(e) => {
            e.stopPropagation();
          }}><MessageTooltip text={record?.comment} /></div>
        : null,
    width: 56,
    shouldBeDisplayed: false,
  },
  {
    title: "Заявитель",
    dataIndex: "creator",
    render: (text: ApplicantColumn | undefined, record: any) => {
      return (
        <>
          {text ?
            <div style={{
               paddingLeft: '13px'
            }} >
              <Applicant text={text} data={record} />
            </div>
            : null}
        </>
      )
    },
    width: 300,
  },
  {
    title: "Дата платежа",
    dataIndex: "payment_date",
    width: 132,
    className: 'summCell',
    render: (text: string | undefined) =>
      text ? <Typography.Text style={{
        width: '100%',
        textAlign: 'end',
        display: 'block',
        paddingRight: '13px'
      }}>{dayjs(text).format("DD.MM.YY")}</Typography.Text> : null,

  },
  {
    title: "Назначение 1С",
    dataIndex: "purpose1C",
    width: 320,
    render:(text: any, record: any) => {
      return(
      <Tooltip placement="bottomRight" color="#344054" title={record?.purpose_of_payment_1c}>
        <Flex style={{whiteSpace: 'nowrap' }}>
          <Typography.Text style={{
            width: '320px',
            textAlign: 'start',
            paddingRight: '16px',
            overflow: 'hidden' ,
            textOverflow: 'ellipsis'
          }}>{record?.purpose_of_payment_1c}</Typography.Text>
        </Flex>
      </Tooltip>
      )
    }
  },
  {
    title: "Примечание 1С",
    dataIndex: "note1C",
    width: 320,
    render:(text: any, record: any) => {
      return(
      <Tooltip placement="bottomRight" color="#344054" title={record?.purpose_of_payment_1c}>
        <Flex style={{whiteSpace: 'nowrap' }}>
          <Typography.Text style={{
            width: '320px',
            textAlign: 'start',
            paddingRight: '16px',
            overflow: 'hidden' ,
            textOverflow: 'ellipsis'
          }}>{record?.note_1c}</Typography.Text>
        </Flex>
      </Tooltip>
      )
    }
  },
  {
    title: "Счет списания 1С",
    dataIndex: "writeOffAccount1C",
    width: 320,
    render:(text: any, record: any) => {
      return(
        <Flex style={{whiteSpace: 'nowrap' }}>
          <Typography.Text style={{
            width: '320px',
            textAlign: 'start',
            paddingRight: '16px',
            overflow: 'hidden' ,
            textOverflow: 'ellipsis'
          }}>{record?.account_debit_1c}</Typography.Text>
        </Flex>
      )
    }
  },
];