stari kod za DocumentForm 79-17

old DocumentForm.jsx:

import { DeleteOutlined, ExclamationCircleOutlined, CommentOutlined } from '@ant-design/icons';
import { App, Button, Checkbox, Collapse, Divider, Form, Input, Modal, Timeline, Tree } from 'antd';
import Title from 'antd/es/typography/Title';
import { isEmpty, isEqual, some } from 'lodash';
import React, { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import ReactQuill from 'react-quill-new';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { useFileDrawer } from '../../context/FileDrawerContext';
import { getDocumentTypes } from '../../store/group/groupActions';
import { parseQuillText } from '../../utils';
import { decodeDetails } from '../../utils/pdfUtils';
import withLoadStatus from '../common/withLoadStatus';

const modules = {
  clipboard: {
    matchVisual: false,
  },
  toolbar: {
    container: [
      ['bold', 'italic', 'underline', 'strike'], // Bold, Italic, Underline, Strikethrough
      [{ header: [1, 2, 3, 4, 5, 6, false] }], // Heading sizes
      [{ align: [] }], // Alignment
      [{ list: 'ordered' }, { list: 'bullet' }], // Ordered & unordered lists
      [{ indent: '-1' }, { indent: '+1' }], // Indent & Outdent
      ['clean'], // Clear formatting
    ],
  },
};

const normalizeValue = (value) => {
  return value === '<p><br></p>' ? '' : value;
};

const DocumentForm = ({
  startLoading,
  stopLoading,
  isLoading,
  parentId,
  contextId,
  contextNotes,
  getContextNotes,
  document,
  isEditing,
  updateAction,
  createAction,
  hasChanges,
  setHasChanges,
  fetchDocuments,
}) => {
  const { t } = useTranslation();
  const { modal } = App.useApp();

  const [selectedDocument, setSelectedDocument] = useState(document || { noteRefs: [] });
  const [selectedNotes, setSelectedNotes] = useState([]);
  const [selectedFiles, setSelectedFiles] = useState({});
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const [form] = Form.useForm();

  const [initialFieldValues, setInitialFieldValues] = useState(null);
  const [importedNotes, setImportedNotes] = useState([]);
  const [header, setHeader] = useState(selectedDocument?.header || '');
  const [footer, setFooter] = useState(selectedDocument?.footer || '');
  const { openDrawer } = useFileDrawer();

  const handleFormChange = () => {
    if (initialFieldValues) {
      const currentFieldValues = form.getFieldsValue();

      // Normalize values for header and footer
      const normalizedCurrentValues = {
        ...currentFieldValues,
        header: normalizeValue(currentFieldValues.header),
        footer: normalizeValue(currentFieldValues.footer),
      };

      const normalizedInitialValues = {
        ...initialFieldValues,
        header: normalizeValue(initialFieldValues.header),
        footer: normalizeValue(initialFieldValues.footer),
      };

      const hasDifferences = some(
        normalizedCurrentValues,
        (value, key) => value !== normalizedInitialValues[key],
      );

      setHasChanges(hasDifferences);
    }
  };

  useEffect(() => {
    const hasDifferences = !isEqual(selectedDocument.noteRefs, document?.noteRefs || []);

    setHasChanges(hasDifferences);
  }, [selectedDocument.noteRefs, document?.noteRefs]);

  const handleCancel = () => {
    form.resetFields();
    setHasChanges(false);

    if (isEditing) {
      if (document.noteRefs && document.details) {
        const decodedDetails = decodeDetails(document.details);
        const noteRefsMap = new Map(document.noteRefs.map((note) => [note.id, note]));

        const detailedNotes = decodedDetails.map(({ id, note, files, note_activities }) => {
          const noteRef = noteRefsMap.get(id) || {};

          return {
            ...noteRef,
            id,
            note: note || '',
            files: files || [],
            subject: noteRef.subject || '',
            note_activities: note_activities || [],
          };
        });

        setImportedNotes(detailedNotes);
      }
    } else {
      setImportedNotes([]);
    }
  };

  useEffect(() => {
    const headerKeys = document?.noteRefs?.map((ref) => `header-${ref.id}`) || [];

    const headerValues = headerKeys.reduce((acc, key) => {
      const headerId = key.split('header-')[1];
      const matchingNoteRef = document.noteRefs.find((ref) => ref.id === headerId);
      const noteValue = matchingNoteRef?.note || form.getFieldValue(key) || '';
      acc[key] = noteValue;

      return acc;
    }, {});

    form.setFieldsValue({
      name: document?.name || form.getFieldValue('name') || '',
      header: document?.header || form.getFieldValue('header') || '',
      footer: document?.footer || form.getFieldValue('footer') || '',
      ...headerValues,
    });

    setInitialFieldValues({
      name: document?.name || form.getFieldValue('name') || '',
      header: document?.header || form.getFieldValue('header') || '',
      footer: document?.footer || form.getFieldValue('footer') || '',
      ...headerValues,
    });
  }, [form, document?.name, document?.footer, document?.header, document?.noteRefs]);

  useEffect(() => {
    if (selectedDocument.noteRefs && selectedDocument.details) {
      const decodedDetails = decodeDetails(selectedDocument.details);
      const noteRefsMap = new Map(selectedDocument.noteRefs.map((note) => [note.id, note]));

      const detailedNotes = decodedDetails.map(({ id, note, files, note_activities }) => {
        const noteRef = noteRefsMap.get(id) || {};

        return {
          ...noteRef,
          id,
          note: note || '',
          files: files || [],
          subject: noteRef.subject || '',
          note_activities: note_activities || [],
        };
      });

      setImportedNotes(detailedNotes);
    }
  }, [selectedDocument]);

  const handleQuillChange = (key, content) => {
    if (key === 'header') {
      setHeader(content);
    } else if (key === 'footer') {
      setFooter(content);
    } else {
      // Update the notes state for specific note ID
      setImportedNotes((prevNotes) =>
        prevNotes.map((note) => (note.id === key ? { ...note, note: content } : note)),
      );
    }
  };

  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = async () => {
    await dispatch(getContextNotes(parentId));
    setIsModalOpen(true);
  };

  const handleOk = () => {
    // Create an array to hold the note references with selected files
    const newNoteRefs = contextNotes
      .filter((note) => selectedNotes.includes(note.id)) // Filter notes based on selected notes
      .map((note) => ({
        ...note, // Spread the whole note object
        files: note.files.filter((file) => selectedFiles[note.id]?.includes(file.id)), // Filter files based on selected file IDs
      }));

    const existingNotes = decodeDetails(selectedDocument.details) || [];

    // Combine existing notes with new notes, ensuring uniqueness based on id
    const combinedNotes = [
      ...existingNotes,
      ...newNoteRefs.map((note) => ({
        id: note.id,
        note: note.note,
        files: note.files,
        note_activities: note.note_activities,
      })),
    ];

    // Create the new details string from the combined notes
    const updatedDetails = !isEmpty(combinedNotes)
      ? `<ul>${combinedNotes
          .map(
            (note) =>
              `<li data-note-id="${note.id}" data-note-text="${note.note}">${note.note}
              ${
                !isEmpty(note.files) &&
                `<ul>${note.files
                  .map((file) => {
                    return `<li data-file-name="${file.name}" data-file-description="${
                      file.description || ''
                    }" data-file-url="${file.url}" data-file-mime_type="${file.mime_type}">${
                      file.name
                    }</li>`;
                  })
                  .join('')}</ul>`
              }
              ${
                !isEmpty(note.note_activities) &&
                `<ul>${note.note_activities
                  .map((activity) => {
                    return `<li data-comment-id="${activity.id}" data-comment-subject="${activity.subject}" data-comment-created_by="${activity.created_by}" data-comment-completed_at="${activity.completed_at}">${activity.comment}</li>`;
                  })
                  .join('')}</ul>`
              }
          </li>`,
          )
          .join('')}</ul>`
      : '';

    // Set the selectedDocument with the noteRefs
    setSelectedDocument((prevDocument) => ({
      ...prevDocument,
      noteRefs: [...(prevDocument.noteRefs || []), ...newNoteRefs],
      details: updatedDetails,
    }));

    setIsModalOpen(false);
    setSelectedNotes([]);
    setSelectedFiles({});
  };

  const handleModalCancel = () => {
    setIsModalOpen(false);
    setSelectedNotes([]);
    setSelectedFiles({});
  };

  const handleNoteCheckboxChange = (noteId) => {
    const isNoteSelected = selectedNotes.includes(noteId);
    const updatedSelectedNotes = isNoteSelected
      ? selectedNotes.filter((id) => id !== noteId) // Uncheck if already selected
      : [...selectedNotes, noteId]; // Check if not selected

    // Update the selected files based on note selection
    const updatedSelectedFiles = { ...selectedFiles };

    if (isNoteSelected) {
      // If note is being unchecked, remove all files
      delete updatedSelectedFiles[noteId];
    } else {
      // If note is being checked, select all files
      const filesToSelect = contextNotes
        .find((note) => note.id === noteId)
        ?.files.map((file) => file.id); // Use file.id
      if (filesToSelect) {
        updatedSelectedFiles[noteId] = filesToSelect; // Add all file IDs
      }
    }

    // Update selected files to ensure files are selected based on their notes
    selectedNotes.forEach((selectedNoteId) => {
      // Initialize array if it doesn't exist
      if (!updatedSelectedFiles[selectedNoteId]) {
        updatedSelectedFiles[selectedNoteId] = [];
      }
    });

    setSelectedNotes(updatedSelectedNotes);
    setSelectedFiles(updatedSelectedFiles);
  };

  const handleFileCheckboxChange = (noteId, fileId) => {
    // Change fileName to fileId
    const updatedSelectedFiles = {
      ...selectedFiles,
      [noteId]: selectedFiles[noteId]
        ? selectedFiles[noteId].includes(fileId) // Change to fileId
          ? selectedFiles[noteId].filter((id) => id !== fileId) // Change to fileId
          : [...(selectedFiles[noteId] || []), fileId] // Change to fileId
        : [fileId], // Change to fileId
    };

    // Update the selected notes if files are being checked and the note is not already selected
    const updatedSelectedNotes = Object.keys(updatedSelectedFiles).reduce((acc, id) => {
      if (updatedSelectedFiles[id].length > 0 && !acc.includes(id)) {
        acc.push(id); // Add noteId if at least one file is selected
      }
      return acc;
    }, selectedNotes);

    setSelectedFiles(updatedSelectedFiles);
    setSelectedNotes(updatedSelectedNotes);
  };

  const items = contextNotes.map((note) => {
    const totalFiles = note.files.length;
    const selectedFileCount = selectedFiles[note.id]?.length || 0;

    // Determine if the note checkbox should be indeterminate
    const isIntermediate = selectedFileCount > 0 && selectedFileCount < totalFiles;

    return {
      key: note.id,
      label: (
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Checkbox
            checked={selectedNotes.includes(note.id)}
            indeterminate={isIntermediate} // Set indeterminate based on file selection state
            onChange={() => handleNoteCheckboxChange(note.id)}
            onClick={(e) => e.stopPropagation()}
          />
          <Title level={4} style={{ margin: '0 0 0 8px' }}>
            {note.subject}
          </Title>
        </div>
      ),
      children: (
        <div style={{ paddingLeft: '20px' }}>
          <p>{parseQuillText(note.note)}</p>
          <div>
            {note.files.map((file) => (
              <Checkbox
                key={file.id}
                checked={selectedFiles[note.id]?.includes(file.id)}
                onChange={() => handleFileCheckboxChange(note.id, file.id)}
              >
                {file.name}
              </Checkbox>
            ))}
          </div>
        </div>
      ),
    };
  });

  const treeData = useMemo(() => {
    // Ensure selectedDocument is not null or undefined before accessing noteRefs
    if (!selectedDocument || !selectedDocument.noteRefs) return [];

    // Map through all noteRefs and create a unique tree structure for each note's files
    return selectedDocument.noteRefs.map((note) => ({
      noteId: note.id,
      files: note.files.map((file) => ({
        title: file.name,
        key: file.id,
        ...file,
      })),
    }));
  }, [selectedDocument]);

  const handleFileClick = (fileId, noteId) => {
    if (Array.isArray(fileId) && fileId.length === 1) {
      const fileToDownload = selectedDocument.noteRefs
        .flatMap((note) => note.files)
        .find((file) => file.id === fileId[0]);

      if (fileToDownload) {
        openDrawer({
          file: { ...fileToDownload },
          parentId: noteId,
        });
      }
    }
  };

  const handleSubmit = async (values) => {
    startLoading();
    const response = await dispatch(getDocumentTypes()).unwrap();

    const details = !isEmpty(importedNotes)
      ? `<ul>${importedNotes
          .map(
            (note) => `<li data-note-id="${note.id}" data-note-text="${note.note}">${note.note}
          ${
            !isEmpty(note.files) &&
            `<ul>${note.files
              .map((file) => {
                return `<li data-file-name="${file.name}" data-file-description="${
                  file.description || ''
                }" data-file-url="${file.url}" data-file-mime_type="${file.mime_type}">${
                  file.name
                }</li>`;
              })
              .join('')}</ul>`
          }
          ${
            !isEmpty(note.note_activities) &&
            `<ul>${note.note_activities
              .map(
                (activity) =>
                  `<li data-comment-id="${activity.id}" data-comment-subject="${activity.subject}" data-comment-created_by="${activity.created_by}" data-comment-completed_at="${activity.completed_at}">${activity.comment}</li>`,
              )
              .join('')}</ul>`
          }
        </li>`,
          )
          .join('')}</ul>`
      : '';

    const updatedNoteRefs = importedNotes.map((note) => ({
      ...note,
      note: note.note || '',
    }));

    const { name } = values;

    const document = {
      name,
      header,
      footer,
      details,
      type: response,
      noteRefs: updatedNoteRefs,
      link: 'link',
      version: selectedDocument.version || 1,
    };

    if (isEditing) {
      await dispatch(
        updateAction({
          parentId,
          contextId,
          document,
          successMessage: t('notifications.company.notes.update'),
        }),
      ).unwrap();
    } else {
      await dispatch(
        createAction({
          contextId,
          document,
          successMessage: t('notifications.company.notes.create'),
        }),
      ).unwrap();
    }

    await dispatch(fetchDocuments(contextId)).unwrap();
    stopLoading();
    setHasChanges(false);
    if (!isEditing) navigate(-1);
  };

  const showCommentDeleteConfirm = (noteId) => {
    modal.confirm({
      title: t('document.form.deleteModalTitle'),
      icon: <ExclamationCircleOutlined />,
      content: t('document.form.deleteModalContent'),
      okText: t('button.delete'),
      okType: 'danger',
      cancelText: t('button.cancel'),
      onOk() {
        handleDeleteNoteComment(noteId);
      },
    });
  };

  const handleDeleteNoteComment = (noteId) => {
    const existingNotes = decodeDetails(selectedDocument.details) || [];

    const updatedNoteRefs = selectedDocument.noteRefs.map((note) => {
      if (note.id === noteId) {
        return {
          ...note,
          note_activities: [],
        };
      }
      return note;
    });

    const updatedExistingNotes = existingNotes.map((note) => {
      if (note.id === noteId) {
        return {
          ...note,
          note_activities: [],
        };
      }
      return note;
    });

    const updatedDetails = `<ul>${updatedExistingNotes
      .map(
        (note) => `<li data-note-id="${note.id}" data-note-text="${note.note}">${note.note}
        ${
          !isEmpty(note.files) &&
          `<ul>${note.files
            .map((file) => {
              return `<li data-file-name="${file.name}" data-file-description="${
                file.description || ''
              }" data-file-url="${file.url}" data-file-mime_type="${file.mime_type}">${
                file.name
              }</li>`;
            })
            .join('')}</ul>`
        }
        ${
          !isEmpty(note.note_activities) &&
          `<ul>${note.note_activities
            .map((activity) => {
              return `<li data-comment-id="${activity.id}" data-comment-subject="${activity.subject}" data-comment-created_by="${activity.created_by}" data-comment-completed_at="${activity.completed_at}">${activity.comment}</li>`;
            })
            .join('')}</ul>`
        }
      </li>`,
      )
      .join('')}</ul>`;

    setSelectedDocument({
      ...selectedDocument,
      noteRefs: updatedNoteRefs,
      details: updatedDetails,
    });
  };

  const showDeleteConfirm = (noteId) => {
    modal.confirm({
      title: t('document.form.deleteModalTitle'),
      icon: <ExclamationCircleOutlined />,
      content: t('document.form.deleteModalContent'),
      okText: t('button.delete'),
      okType: 'danger',
      cancelText: t('button.cancel'),
      onOk() {
        handleDeleteNote(noteId);
      },
    });
  };

  const handleDeleteNote = (noteId) => {
    const existingNotes = decodeDetails(selectedDocument.details) || [];

    const updatedNoteRefs = selectedDocument.noteRefs.filter((note) => note.id !== noteId);

    const updatedExistingNotes = existingNotes.filter((note) => note.id !== noteId);

    const updatedDetails = `<ul>${updatedExistingNotes
      .map(
        (note) => `<li data-note-id="${note.id}" data-note-text="${note.note}">${note.note}
        ${
          !isEmpty(note.files) &&
          `<ul>${note.files
            .map((file) => {
              return `<li data-file-name="${file.name}" data-file-description="${
                file.description || ''
              }" data-file-url="${file.url}" data-file-mime_type="${file.mime_type}">${
                file.name
              }</li>`;
            })
            .join('')}</ul>`
        }
        ${
          !isEmpty(note.note_activities) &&
          `<ul>${note.note_activities
            .map((activity) => {
              return `<li data-comment-id="${activity.id}" data-comment-subject="${activity.subject}" data-comment-created_by="${activity.created_by}" data-comment-completed_at="${activity.completed_at}">${activity.comment}</li>`;
            })
            .join('')}</ul>`
        }
      </li>`,
      )
      .join('')}</ul>`;

    setSelectedDocument({
      ...selectedDocument,
      noteRefs: updatedNoteRefs,
      details: updatedDetails,
    });
  };

  const formatedActivities = (note) => {
    return note.note_activities
      ?.slice()
      .sort((a, b) => new Date(b.completed_at) - new Date(a.completed_at))
      .map((activity) => ({
        dot: <CommentOutlined />,
        children: (
          <div>
            <div>{activity.comment}</div>
            <div className='mt-3 text-xs'>
              {new Date(activity.completed_at).toLocaleString()} - {activity.created_by}
            </div>
          </div>
        ),
      }));
  };

  return (
    <Form
      name='document'
      form={form}
      labelCol={{
        xs: { span: 24 },
        md: { span: 6 },
      }}
      wrapperCol={{
        xs: { span: 24 },
        md: { span: 18 },
      }}
      labelAlign='left'
      layout='horizontal'
      initialValues={{
        remember: true,
      }}
      onValuesChange={handleFormChange}
      onFinish={handleSubmit}
      autoComplete='on'
      className='max-w-[60rem]'
    >
      <Modal
        title={t('document.form.modalTitle')}
        open={isModalOpen}
        onOk={handleOk}
        okText='Import'
        onCancel={handleModalCancel}
      >
        <Collapse items={items} expandIconPosition='end' />
      </Modal>

      <Title level={2}>{t('document.form.headerInfo')}</Title>
      <Form.Item
        label={t('document.form.documentInputLabel')}
        tooltip={t('document.form.documentInputTooltip')}
        name='name'
        className='custom-form-item'
        validateTrigger='onBlur'
        initialValue={document?.name || ''}
        rules={[
          {
            required: true,
            message: 'Please input the document name!',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label={t('document.form.headerInputLabel')}
        tooltip={t('document.form.headerInputTooltip')}
        name='header'
        className='custom-form-item'
        validateTrigger='onBlur'
        initialValue={document?.header || ''}
      >
        <ReactQuill
          theme='snow'
          placeholder={'Your header text goes here...'}
          value={header}
          onChange={(content) => handleQuillChange('header', content)}
          modules={modules}
        />
      </Form.Item>
      <Divider />

      <div className='flex justify-between'>
        <Title level={2} className='inline-block w-full'>
          {t('document.form.details')}
        </Title>
        <div className='my-6 flex w-full justify-end'>
          <Button type='primary' onClick={showModal}>
            {t('button.importNotes')}
          </Button>
        </div>
      </div>

      {importedNotes?.map((note, index) => {
        // Find the corresponding tree data for the current note
        const currentTreeData = treeData.find((data) => data.noteId === note.id)?.files || [];

        return (
          <div key={note.id}>
            {index !== 0 && <Divider />}
            <div className='mb-2 flex items-center justify-end'>
              <Button
                type='text'
                danger
                onClick={() => showDeleteConfirm(note.id)}
                icon={<DeleteOutlined />}
              >
                {t('button.delete')}
              </Button>
            </div>

            <Form.Item
              label={note.subject} // Access subject directly from importedNotes
              tooltip={t('document.form.headerInputTooltip')}
              name={`header-${note.id}`}
              className='custom-form-item'
              validateTrigger='onBlur'
              initialValue={note.note || ''}
            >
              <ReactQuill
                theme='snow'
                placeholder='Your text goes here...'
                value={note.note || ''}
                onChange={(content) => handleQuillChange(note.id, content)}
                modules={modules}
              />
            </Form.Item>

            {!isEmpty(currentTreeData) && (
              <Form.Item label={t('document.form.attachedFilesInputLabel')} key={note.id}>
                <Tree
                  className='-ml-6'
                  treeData={currentTreeData}
                  height={300}
                  onSelect={(fileId) => handleFileClick(fileId, note.id)}
                />
              </Form.Item>
            )}

            {!isEmpty(formatedActivities(note)) && (
              <>
                <div className='mb-2 flex items-center justify-end'>
                  <Button
                    type='text'
                    danger
                    onClick={() => showCommentDeleteConfirm(note.id)}
                    icon={<DeleteOutlined />}
                  >
                    {t('button.delete')}
                  </Button>
                </div>
                <Form.Item label='Comments' key={note.id}>
                  <Timeline
                    className='max-h-[15rem] overflow-y-auto px-5 pt-1'
                    items={formatedActivities(note)}
                  />
                </Form.Item>
              </>
            )}
          </div>
        );
      })}
      <Divider />

      <Title level={2}>{t('document.form.footerInfo')}</Title>
      <Form.Item
        label={t('document.form.footerInputLabel')}
        tooltip={t('document.form.footerInputTooltip')}
        name='footer'
        className='custom-form-item'
        validateTrigger='onBlur'
        initialValue={document?.footer || ''}
      >
        <ReactQuill
          theme='snow'
          placeholder='Your footer text goes here...'
          value={footer}
          onChange={(content) => handleQuillChange('footer', content)}
          modules={modules}
        />
      </Form.Item>

      <Form.Item
        wrapperCol={{
          xs: { offset: 0, span: 24 },
          md: { offset: 6, span: 18 },
        }}
      >
        <Button
          type='primary'
          htmlType='submit'
          className='w-full md:w-auto'
          loading={isLoading}
          disabled={!hasChanges}
        >
          {isEditing ? t('button.update') : t('button.create')}
        </Button>
        <Button htmlType='button' className='mt-2 w-full md:ml-3 md:w-auto' onClick={handleCancel}>
          {t('button.cancel')}
        </Button>
      </Form.Item>
    </Form>
  );
};

export default withLoadStatus(DocumentForm);