feat: wip UI upload attachments

2026-02-17 05:10:31 +00:00 · 2024-05-28 23:34:51 +02:00
parent fcd61c6159
commit cfdbcea9c0
49 changed files with 286 additions and 67 deletions
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooter.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooter.tsx
@@ -7,6 +7,7 @@ import { CLASSES } from '@/constants/classes';
 import { Row, Col, Paper } from '@/components';
 import { CreditNoteFormFooterLeft } from './CreditNoteFormFooterLeft';
 import { CreditNoteFormFooterRight } from './CreditNoteFormFooterRight';
+import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmentButton';

 /**
 * Credit note form footer.
@@ -18,6 +19,7 @@ export default function CreditNoteFormFooter() {
        <Row>
          <Col md={8}>
            <CreditNoteFormFooterLeft />
+            <UploadAttachmentButton />
          </Col>

          <Col md={4}>
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/utils.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/utils.tsx
@@ -8,7 +8,6 @@ import {
  defaultFastFieldShouldUpdate,
  transformToForm,
  repeatValue,
-  transactionNumber,
  formattedAmount,
  orderingLinesIndexes,
 } from '@/utils';
@@ -21,6 +20,10 @@ import {
 } from '@/containers/Entries/utils';
 import { useCurrentOrganization } from '@/hooks/state';
 import { getEntriesTotal } from '@/containers/Entries/utils';
+import {
+  transformAttachmentsToForm,
+  transformAttachmentsToRequest,
+} from '@/containers/Attachments/utils';

 export const MIN_LINES_NUMBER = 1;

@@ -51,6 +54,7 @@ export const defaultCreditNote = {
  exchange_rate: 1,
  currency_code: '',
  entries: [...repeatValue(defaultCreditNoteEntry, MIN_LINES_NUMBER)],
+  attachments: []
 };

 /**
@@ -71,9 +75,12 @@ export function transformToEditForm(creditNote) {
    updateItemsEntriesTotal,
  )(initialEntries);

+  const attachment = transformAttachmentsToForm(creditNote);
+
  return {
    ...transformToForm(creditNote, defaultCreditNote),
    entries,
+    attachment,
  };
 }

@@ -103,11 +110,13 @@ export const filterNonZeroEntries = (entries) => {
 */
 export const transformFormValuesToRequest = (values) => {
  const entries = filterNonZeroEntries(values.entries);
+  const attachments = transformAttachmentsToRequest(values);

  return {
    ...values,
    entries: transformEntriesToSubmit(entries),
    open: false,
+    attachments,
  };
 };

--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooter.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooter.tsx
@@ -7,6 +7,7 @@ import { CLASSES } from '@/constants/classes';
 import { Row, Col, Paper } from '@/components';
 import { EstimateFormFooterLeft } from './EstimateFormFooterLeft';
 import { EstimateFormFooterRight } from './EstimateFormFooterRight';
+import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmentButton';

 /**
 * Estimate form footer.
@@ -18,6 +19,7 @@ export default function EstiamteFormFooter() {
        <Row>
          <Col md={8}>
            <EstimateFormFooterLeft />
+            <UploadAttachmentButton />
          </Col>

          <Col md={4}>
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/utils.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/utils.tsx
@@ -18,6 +18,10 @@ import {
 } from '@/containers/Entries/utils';
 import { useCurrentOrganization } from '@/hooks/state';
 import { getEntriesTotal } from '@/containers/Entries/utils';
+import {
+  transformAttachmentsToForm,
+  transformAttachmentsToRequest,
+} from '@/containers/Attachments/utils';

 export const MIN_LINES_NUMBER = 1;

@@ -56,6 +60,7 @@ export const defaultEstimate = {
  exchange_rate: 1,
  currency_code: '',
  entries: [...repeatValue(defaultEstimateEntry, MIN_LINES_NUMBER)],
+  attachments: []
 };

 const ERRORS = {
@@ -78,9 +83,12 @@ export const transformToEditForm = (estimate) => {
    updateItemsEntriesTotal,
  )(initialEntries);

+  const attachments = transformAttachmentsToForm(estimate);
+
  return {
    ...transformToForm(estimate, defaultEstimate),
    entries,
+    attachments,
  };
 };

@@ -150,6 +158,8 @@ export const transfromsFormValuesToRequest = (values) => {
  const entries = values.entries.filter(
    (item) => item.item_id && item.quantity,
  );
+  const attachments = transformAttachmentsToRequest(values);
+
  return {
    ...omit(values, ['estimate_number_manually', 'estimate_number']),
    // The `estimate_number_manually` will be presented just if the auto-increment
@@ -160,6 +170,7 @@ export const transfromsFormValuesToRequest = (values) => {
    entries: entries.map((entry) => ({
      ...transformToForm(entry, defaultEstimateEntryReq),
    })),
+    attachments,
  };
 };

--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooter.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooter.tsx
@@ -7,7 +7,7 @@ import { CLASSES } from '@/constants/classes';
 import { Paper, Row, Col } from '@/components';
 import { InvoiceFormFooterLeft } from './InvoiceFormFooterLeft';
 import { InvoiceFormFooterRight } from './InvoiceFormFooterRight';
-import { UploadAttachmentButton } from './UploadAttachmentButton';
+import { UploadAttachmentButton } from '../../../Attachments/UploadAttachmentButton';

 export default function InvoiceFormFooter() {
  return (
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/UploadAttachmentButton.module.scss
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/UploadAttachmentButton.module.scss
@@ -1,18 +0,0 @@
-
-.popover :global .bp4-popover-content{
-  min-width: 450px;
-}
-
-
-.attachmentButton:not([class*=bp4-intent-]) {
-  &,
-  &:hover{
-    background-color: #fff;
-  }
-  border: 1px solid rgb(206, 212, 218);
-}
-
-.attachmentField :global .bp4-label{
-  font-weight: 500;
-  font-size: 12px;
-}
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/UploadAttachmentButton.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/UploadAttachmentButton.tsx
@@ -1,55 +0,0 @@
-// @ts-nocheck
-import clsx from 'classnames';
-import { Field, useFormikContext } from 'formik';
-import {
-  Button,
-  Classes,
-  Popover,
-  PopoverInteractionKind,
-} from '@blueprintjs/core';
-import { FFormGroup } from '@/components';
-import { UploadAttachmentsPopoverContent } from './UploadAttachmentsPopoverContent';
-import styles from './UploadAttachmentButton.module.scss';
-
-function UploadAttachmentButtonButtonContentField() {
-  return (
-    <Field name={'attachments'}>
-      {({ form: { setFieldValue }, field: { value } }) => (
-        <UploadAttachmentsPopoverContent
-          value={value}
-          onChange={(value) => {
-            setFieldValue('attachments', value);
-          }}
-        />
-      )}
-    </Field>
-  );
-}
-
-export function UploadAttachmentButton() {
-  const { values } = useFormikContext();
-  const uploadedFiles = values?.attachments?.length || 0;
-
-  return (
-    <FFormGroup
-      name={'attachments'}
-      label={'Attachments'}
-      className={styles.attachmentField}
-    >
-      <Popover
-        interactionKind={PopoverInteractionKind.CLICK}
-        popoverClassName={clsx(styles.popover, Classes.POPOVER_CONTENT_SIZING)}
-        placement={'top-start'}
-        content={<UploadAttachmentButtonButtonContentField />}
-      >
-        <Button className={styles.attachmentButton}>
-          {uploadedFiles > 0 ? (
-            <>Upload attachments ({uploadedFiles})</>
-          ) : (
-            <>Upload attachments</>
-          )}
-        </Button>
-      </Popover>
-    </FFormGroup>
-  );
-}
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/UploadAttachmentPopoverContent.module.scss
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/UploadAttachmentPopoverContent.module.scss
@@ -1,49 +0,0 @@
-
-.content {
-}
-
-.hintText{
-  display: flex;
-  font-size: 12px;
-  margin-top: 6px;
-  color: #8F99A8;
-  justify-content: space-between;
-}
-
-.attachments{
-  margin-top: 12px;
-}
-
-.attachmentItem{
-  border: 1px solid #D3D8DE;
-  border-radius: 3px;
-  padding: 6px 10px;
-  justify-content: space-between;
-}
-
-.attachmentFilenameText{
-  color: #404854;
-}
-
-.attachmentSizeText{
-  font-size: 12px;
-  color: #738091;
-}
-
-.attachmentContent{
-  padding-left: 8px;
-}
-
-.attachmentIcon{
-  color: #8F99A8;
-}
-
-.label{
-  font-size: 12px;
-  margin-bottom: 4px;
-}
-
-.dropzoneRoot{
-  min-height: 140px;
-  padding: 10px;
-}
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/UploadAttachmentsPopoverContent.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/UploadAttachmentsPopoverContent.tsx
@@ -1,193 +0,0 @@
-// @ts-nocheck
-import { useState } from 'react';
-import { isEmpty } from 'lodash';
-import { Button, Intent, Text, Spinner } from '@blueprintjs/core';
-import { Box, Group, Icon, Stack } from '@/components';
-import { ImportDropzoneField } from '@/containers/Import/ImportDropzoneFile';
-import { useUncontrolled } from '@/hooks/useUncontrolled';
-import {
-  useDeleteAttachment,
-  useUploadAttachments,
-} from '@/hooks/query/attachments';
-import { formatBytes } from './utils';
-import styles from './UploadAttachmentPopoverContent.module.scss';
-
-interface AttachmentFileCommon {
-  originName: string;
-  key: string;
-  size: number;
-  mimeType: string;
-}
-interface AttachmentFileLoaded extends AttachmentFileCommon {}
-interface AttachmentFileLoading extends AttachmentFileCommon {
-  _loading: boolean;
-}
-type AttachmentFile = AttachmentFileLoaded | AttachmentFileLoading;
-
-interface UploadAttachmentsPopoverContentProps {
-  initialValue?: AttachmentFile[];
-  value?: AttachmentFile[];
-  onChange?: (value: AttachmentFile[]) => void;
-}
-
-/**
- * Uploads and list the attachments with ability to delete particular attachment.
- * @param {UploadAttachmentsPopoverContentProps}
- */
-export function UploadAttachmentsPopoverContent({
-  initialValue,
-  value,
-  onChange,
-}: UploadAttachmentsPopoverContentProps) {
-  // Controlled/uncontrolled value state.
-  const [localFiles, handleFilesChange] = useUncontrolled<AttachmentFile[]>({
-    finalValue: [],
-    initialValue,
-    value,
-    onChange: onChange,
-  });
-  // Stops loading of the given attachment key and updates it to new key,
-  // that came from the server-side after uploading is done.
-  const stopLoadingAttachment = (
-    localFiles: AttachmentFile[],
-    internalKey: string,
-    newKey: string,
-  ) => {
-    return localFiles.map((localFile) => {
-      if (localFile.key === internalKey) {
-        return {
-          ...localFile,
-          key: newKey,
-          _loading: false,
-        };
-      }
-      return localFile;
-    });
-  };
-  // Uploads the attachments.
-  const { mutateAsync: uploadAttachments } = useUploadAttachments({
-    onSuccess: (data, variables, context) => {
-      const newLocalFiles = stopLoadingAttachment(
-        localFiles,
-        data.config.data.get('internalKey'),
-        data.data.data.key,
-      );
-      handleFilesChange(newLocalFiles);
-    },
-  });
-  // Deletes the attachment.
-  const { mutateAsync: deleteAttachment } = useDeleteAttachment();
-
-  // Deletes the attachment of the given file key.
-  const DeleteButton = ({ fileKey }: { fileKey: string }) => {
-    const [loading, setLoading] = useState<boolean>(false);
-
-    const handleClick = () => {
-      setLoading(true);
-      deleteAttachment(fileKey).then(() => {
-        const updatedFiles = localFiles.filter(
-          (file, i) => file.key !== fileKey,
-        );
-        handleFilesChange(updatedFiles);
-        setLoading(false);
-      });
-    };
-    return (
-      <Button
-        small
-        minimal
-        intent={Intent.DANGER}
-        loading={loading}
-        disabled={loading}
-        onClick={handleClick}
-      >
-        <Icon icon={'trash-16'} iconSize={16} />
-      </Button>
-    );
-  };
-  // Handle change dropzone.
-  const handleChangeDropzone = (file: File) => {
-    const formData = new FormData();
-    const key = Date.now().toString();
-
-    formData.append('file', file);
-    formData.append('internalKey', key);
-
-    handleFilesChange([
-      {
-        originName: file.name,
-        size: file.size,
-        key,
-        _loading: true,
-      },
-      ...localFiles,
-    ]);
-    uploadAttachments(formData);
-  };
-
-  return (
-    <div className={styles.content}>
-      <div>
-        <Text className={styles.label}>Attach documents</Text>
-        <Stack spacing={0}>
-          <ImportDropzoneField
-            uploadIcon={null}
-            value={null}
-            title={''}
-            classNames={{ root: styles.dropzoneRoot }}
-            onChange={handleChangeDropzone}
-          />
-          <Group className={styles.hintText}>
-            <Box>Formats: CSV, XLSX</Box>
-            <Box>Maximum: 25MB</Box>
-          </Group>
-        </Stack>
-
-        {!isEmpty(localFiles) && (
-          <Stack spacing={8} className={styles.attachments}>
-            {localFiles.map((localFile: AttachmentFile, index: number) => (
-              <Group
-                position={'space-between'}
-                className={styles.attachmentItem}
-                key={index}
-              >
-                <Group spacing={16} className={styles.attachmentContent}>
-                  {localFile._loading ? (
-                    <Spinner size={20} />
-                  ) : (
-                    <Icon
-                      icon={'media'}
-                      iconSize={16}
-                      className={styles.attachmentIcon}
-                    />
-                  )}
-                  <Stack spacing={2}>
-                    <Text className={styles.attachmentFilenameText}>
-                      {localFile.originName}
-                    </Text>
-                    {localFile._loading ? (
-                      <Text>Loading...</Text>
-                    ) : (
-                      <Text className={styles.attachmentSizeText}>
-                        {formatBytes(localFile.size)}
-                      </Text>
-                    )}
-                  </Stack>
-                </Group>
-
-                {!localFile._loading && (
-                  <Group spacing={0}>
-                    <Button small minimal>
-                      View
-                    </Button>
-                    <DeleteButton fileKey={localFile.key} />
-                  </Group>
-                )}
-              </Group>
-            ))}
-          </Stack>
-        )}
-      </div>
-    </div>
-  );
-}
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFooter.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFooter.tsx
@@ -7,6 +7,7 @@ import { CLASSES } from '@/constants/classes';
 import { Row, Col, Paper } from '@/components';
 import { PaymentReceiveFormFootetLeft } from './PaymentReceiveFormFootetLeft';
 import { PaymentReceiveFormFootetRight } from './PaymentReceiveFormFootetRight';
+import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmentButton';

 /**
 * Payment receive form footer.
@@ -18,6 +19,7 @@ export default function PaymentReceiveFormFooter() {
        <Row>
          <Col md={8}>
            <PaymentReceiveFormFootetLeft />
+            <UploadAttachmentButton />
          </Col>

          <Col md={4}>
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.tsx
@@ -9,13 +9,16 @@ import { AppToaster } from '@/components';
 import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
 import {
  defaultFastFieldShouldUpdate,
-  transactionNumber,
  transformToForm,
  safeSumBy,
  orderingLinesIndexes,
  formattedAmount,
 } from '@/utils';
 import { useCurrentOrganization } from '@/hooks/state';
+import {
+  transformAttachmentsToForm,
+  transformAttachmentsToRequest,
+} from '@/containers/Attachments/utils';

 // Default payment receive entry.
 export const defaultPaymentReceiveEntry = {
@@ -39,11 +42,12 @@ export const defaultPaymentReceive = {
  // Holds the payment number that entered manually only.
  payment_receive_no_manually: '',
  statement: '',
-  full_amount: '', 
+  full_amount: '',
  currency_code: '',
  branch_id: '',
  exchange_rate: 1,
  entries: [],
+  attachments: []
 };

 export const defaultRequestPaymentEntry = {
@@ -74,6 +78,7 @@ export const transformToEditForm = (paymentReceive, paymentReceiveEntries) => ({
      payment_amount: paymentReceiveEntry.payment_amount || '',
    })),
  ],
+  attachments: transformAttachmentsToForm(paymentReceive),
 });

 /**
@@ -155,6 +160,8 @@ export const transformFormToRequest = (form) => {
      ...pick(entry, Object.keys(defaultRequestPaymentEntry)),
    }));

+  const attachments = transformAttachmentsToRequest(form);
+
  return {
    ...omit(form, ['payment_receive_no_manually', 'payment_receive_no']),
    // The `payment_receive_no_manually` will be presented just if the auto-increment
@@ -163,6 +170,7 @@ export const transformFormToRequest = (form) => {
      payment_receive_no: form.payment_receive_no,
    }),
    entries: orderingLinesIndexes(entries),
+    attachments,
  };
 };

--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooter.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooter.tsx
@@ -7,6 +7,7 @@ import { CLASSES } from '@/constants/classes';
 import { Paper, Row, Col } from '@/components';
 import { ReceiptFormFooterLeft } from './ReceiptFormFooterLeft';
 import { ReceiptFormFooterRight } from './ReceiptFormFooterRight';
+import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmentButton';

 export default function ReceiptFormFooter({}) {
  return (
@@ -15,6 +16,7 @@ export default function ReceiptFormFooter({}) {
        <Row>
          <Col md={8}>
            <ReceiptFormFooterLeft />
+            <UploadAttachmentButton />
          </Col>

          <Col md={4}>
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/utils.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/utils.tsx
@@ -18,6 +18,10 @@ import {
 } from '@/containers/Entries/utils';
 import { useCurrentOrganization } from '@/hooks/state';
 import { getEntriesTotal } from '@/containers/Entries/utils';
+import {
+  transformAttachmentsToForm,
+  transformAttachmentsToRequest,
+} from '@/containers/Attachments/utils';

 export const MIN_LINES_NUMBER = 1;

@@ -56,6 +60,7 @@ export const defaultReceipt = {
  exchange_rate: 1,
  currency_code: '',
  entries: [...repeatValue(defaultReceiptEntry, MIN_LINES_NUMBER)],
+  attachments: [],
 };

 const ERRORS = {
@@ -81,9 +86,12 @@ export const transformToEditForm = (receipt) => {
    updateItemsEntriesTotal,
  )(initialEntries);

+  const attachments = transformAttachmentsToForm(receipt);
+
  return {
    ...transformToForm(receipt, defaultReceipt),
    entries,
+    attachments,
  };
 };

@@ -142,6 +150,7 @@ export const transformFormValuesToRequest = (values) => {
  const entries = values.entries.filter(
    (item) => item.item_id && item.quantity,
  );
+  const attachments = transformAttachmentsToRequest(values);

  return {
    ...omit(values, ['receipt_number_manually', 'receipt_number']),
@@ -152,6 +161,7 @@ export const transformFormValuesToRequest = (values) => {
      ...transformToForm(entry, defaultReceiptEntryReq),
    })),
    closed: false,
+    attachments,
  };
 };