working for group docs - path

/*import { ArrowLeftOutlined } from '@ant-design/icons';
import { pdf } from '@react-pdf/renderer';
import { Button, Card } from 'antd';
import React, { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import { Link, useParams } from 'react-router-dom';
import withLoadStatus from '../../../components/common/withLoadStatus';
import DocumentExport from '../../../components/DocumentExport';
import DocumentForm from '../../../components/forms/DocumentForm';
import useExportToFiles from '../../../hooks/useExportToFiles';
import { getFiles } from '../../../store/file/fileActions';
import { selectFiles } from '../../../store/file/fileSlice';
import {
  getGroupDocuments,
  updateGroupDocument,
  getNotesForDocumentImport,
  getDocumentLocationDetails,
} from '../../../store/group/groupActions';
import { selectGroupDocuments, selectGroupNotes } from '../../../store/group/groupSlice';
import { selectUser } from '../../../store/user/userSlice';

const Edit = ({ isLoading }) => {
  const { assetId, documentId } = useParams();
  const { t } = useTranslation();
  const groupDocuments = useSelector(selectGroupDocuments);
  const currentUser = useSelector(selectUser);
  const groupNotes = useSelector(selectGroupNotes);
  const { exportDocument } = useExportToFiles(assetId);
  const files = useSelector(selectFiles);
  const dispatch = useDispatch();
  const [hasChanges, setHasChanges] = useState(false);
  const [locationDetails, setLocationDetails] = useState(null);

  useEffect(() => {
    dispatch(getFiles({ parentId: assetId, skipParams: true }));
    dispatch(getNotesForDocumentImport(assetId));
    dispatch(getGroupDocuments(assetId));

    const fetchLocationDetails = async () => {
      try {
        const response = await dispatch(getDocumentLocationDetails(assetId)).unwrap(); // Dohvaćanje detalja o lokaciji
        setLocationDetails(response.locationDetails || {}); // Čuvanje detalja o lokaciji
      } catch (error) {
        console.error('Greška prilikom preuzimanja lokacijskih detalja:', error);
        setLocationDetails({ name: 'Unknown Location', image_url: null }); // Fallback vrednost
      }
    };

    fetchLocationDetails();
  }, [assetId, dispatch]);

  const specificDocument = useMemo(() => {
    return groupDocuments.find((document) => document.id === parseInt(documentId));
  }, [groupDocuments, documentId]);

  const translations = {
    updatedBy: t('note.audit.updatedBy'),
  };

  const handleExportNote = async () => {
    const element = (
      <DocumentExport
        document={specificDocument}
        tenant={currentUser.tenant}
        translations={translations}
        locationDetails={locationDetails}
      />
    );
    const pdfBlob = await pdf(element).toBlob();

    const url = URL.createObjectURL(pdfBlob);
    window.open(url, '_blank');

    exportDocument(specificDocument, pdfBlob, files);
  };

  return (
    <Card
      title={
        <div className='flex items-center justify-between'>
          <div className='flex flex-row gap-3'>
            <Link to={-1}>
              <ArrowLeftOutlined />
            </Link>
            {t('document.edit.title')}
          </div>
          <Button
            type='primary'
            htmlType='button'
            loading={isLoading}
            onClick={handleExportNote}
            disabled={hasChanges}
          >
            {t('button.exportDocument')}
          </Button>
        </div>
      }
    >

      {locationDetails?.name && (
        <div style={{ marginBottom: '16px', color: '#6c757d', fontSize: '12px' }}>
          <p>{`${t('document.audit.location')}: ${locationDetails.name}`}</p>
          {locationDetails.image_url && (
            <img
              src={locationDetails.image_url}
              alt='Location'
              style={{ width: '100px', height: 'auto', marginTop: '8px' }}
            />
          )}
        </div>
      )}
      <DocumentForm
        parentId={assetId}
        contextId={documentId}
        document={specificDocument?.content}
        isEditing={true}
        updateAction={updateGroupDocument}
        contextNotes={groupNotes || []}
        getContextNotes={getNotesForDocumentImport}
        hasChanges={hasChanges}
        setHasChanges={setHasChanges}
        fetchDocuments={getGroupDocuments}
      />
    </Card>
  );
};

export default withLoadStatus(Edit); */

import { ArrowLeftOutlined } from '@ant-design/icons';
import { pdf } from '@react-pdf/renderer';
import { Button, Card } from 'antd';
import React, { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import { Link, useLocation, useParams } from 'react-router-dom';
import withLoadStatus from '../../../components/common/withLoadStatus';
import DocumentExport from '../../../components/DocumentExport';
import DocumentForm from '../../../components/forms/DocumentForm';
import useExportToFiles from '../../../hooks/useExportToFiles';
import { getFiles } from '../../../store/file/fileActions';
import { selectFiles } from '../../../store/file/fileSlice';
import {
  getGroupDocuments,
  updateGroupDocument,
  getNotesForDocumentImport,
  getDocumentLocationDetails,
  getCompanyAssets,
} from '../../../store/group/groupActions';
import { selectGroupDocuments, selectGroupNotes } from '../../../store/group/groupSlice';
import { selectUser } from '../../../store/user/userSlice';

const Edit = ({ isLoading }) => {
  const { assetId, documentId, companyId } = useParams(); // Dohvati i companyId
  const { t } = useTranslation();
  const location = useLocation();
  const dispatch = useDispatch();

  const groupDocuments = useSelector(selectGroupDocuments);
  const currentUser = useSelector(selectUser);
  const groupNotes = useSelector(selectGroupNotes);
  const files = useSelector(selectFiles);
  const [assetTree, setAssetTree] = useState([]); // Dodaj stanje za assetTree
  const [hasChanges, setHasChanges] = useState(false);
  const [locationDetails, setLocationDetails] = useState(null);

  const { exportDocument } = useExportToFiles(assetId);

  // Funkcija za dohvaćanje "assets"
  useEffect(() => {
    const fetchAssets = async () => {
      try {
        const response = await dispatch(getCompanyAssets(companyId)).unwrap();
        console.log('Fetched Assets:', response.assets); // Debug log
        setAssetTree(response.assets);
      } catch (error) {
        console.error('Error fetching assets:', error);
      }
    };

    fetchAssets();
  }, [companyId, dispatch]);

  // Funkcija za generiranje cijele putanje
  const generatePath = () => {
    const pathSnippets = location.pathname.split('/').filter((i) => i);

    const typeMappings = {
      companies: 'Company',
      groups: 'Group',
      assets: 'Asset',
      workspaces: 'Workspace',
    };

    let pathNames = [];

    pathSnippets.forEach((snippet, index, array) => {
      const type = array[index - 1]; // Tip prethodnog segmenta rute
      const id = snippet;

      let name = '';
      switch (type) {
        case 'companies': {
          // Dohvaćanje kompanije iz locationDetails ili companyDetails
          const company = locationDetails?.parent || { name: 'Unknown Company' };
          if (company) name = `${company.name} (${typeMappings[type]})`;
          break;
        }
        case 'groups':
        case 'assets':
        case 'workspaces': {
          const asset = assetTree.find((asset) => asset.id === +id);
          if (asset) name = `${asset.name} (${typeMappings[type]})`;
          break;
        }
        default:
          break;
      }

      if (name) {
        pathNames.push(name);
      }
    });

    return pathNames.reverse().join(' -> '); // Reverse za hijerarhijski prikaz
  };

  // Dohvaćanje datoteka, bilješki i dokumenata
  useEffect(() => {
    dispatch(getFiles({ parentId: assetId, skipParams: true }));
    dispatch(getNotesForDocumentImport(assetId));
    dispatch(getGroupDocuments(assetId));

    const fetchLocationDetails = async () => {
      try {
        const response = await dispatch(getDocumentLocationDetails(assetId)).unwrap();
        setLocationDetails(response.locationDetails || {});
      } catch (error) {
        console.error('Greška prilikom preuzimanja lokacijskih detalja:', error);
        setLocationDetails({ name: 'Unknown Location', image_url: null });
      }
    };

    fetchLocationDetails();
  }, [assetId, dispatch]);

  const specificDocument = useMemo(() => {
    return groupDocuments.find((document) => document.id === parseInt(documentId));
  }, [groupDocuments, documentId]);

  const translations = {
    updatedBy: t('note.audit.updatedBy'),
  };

  const completePath = generatePath(); // Generiranje cijele putanje

  const handleExportNote = async () => {
    const element = (
      <DocumentExport
        document={specificDocument}
        tenant={currentUser.tenant}
        translations={translations}
        locationDetails={locationDetails}
        completePath={completePath} // Prosljeđivanje putanje
      />
    );
    const pdfBlob = await pdf(element).toBlob();

    const url = URL.createObjectURL(pdfBlob);
    window.open(url, '_blank');

    exportDocument(specificDocument, pdfBlob, files);
  };

  return (
    <Card
      title={
        <div className='flex items-center justify-between'>
          <div className='flex flex-row gap-3'>
            <Link to={-1}>
              <ArrowLeftOutlined />
            </Link>
            {t('document.edit.title')}
          </div>
          <Button
            type='primary'
            htmlType='button'
            loading={isLoading}
            onClick={handleExportNote}
            disabled={hasChanges}
          >
            {t('button.exportDocument')}
          </Button>
        </div>
      }
    >
      {/* Prikaz informacija o lokaciji */}
      {locationDetails?.name && (
        <div style={{ marginBottom: '16px', color: '#6c757d', fontSize: '12px' }}>
          <p>{`${t('document.audit.location')}: ${locationDetails.name}`}</p>
          {locationDetails.image_url && (
            <img
              src={locationDetails.image_url}
              alt='Location'
              style={{ width: '100px', height: 'auto', marginTop: '8px' }}
            />
          )}
        </div>
      )}
      {/* Prikaz generirane putanje */}
      {completePath && (
        <div style={{ marginBottom: '16px', color: '#6c757d', fontSize: '12px' }}>
          <p>{`${t('document.audit.path')}: ${completePath}`}</p>
        </div>
      )}
      <DocumentForm
        parentId={assetId}
        contextId={documentId}
        document={specificDocument?.content}
        isEditing={true}
        updateAction={updateGroupDocument}
        contextNotes={groupNotes || []}
        getContextNotes={getNotesForDocumentImport}
        hasChanges={hasChanges}
        setHasChanges={setHasChanges}
        fetchDocuments={getGroupDocuments}
      />
    </Card>
  );
};

export default withLoadStatus(Edit);