Reisacher-Forderung/static/assets/js/documents.js

(() => {
  const initialized = new WeakSet(), scopes = new Map(), requests = new WeakMap();
  let previewController, previewURL, returnToList = false;
  const modal = id => coreui.Modal.getOrCreateInstance(document.getElementById(id));
  async function load(host) {
    requests.get(host)?.abort();
    const controller = new AbortController(); requests.set(host, controller);
    const scope = host.dataset.documentDetail ? (scopes.get(host.dataset.documentKey) || 'invoice') : 'invoice';
    host.dataset.scope = scope; host.setAttribute('aria-busy', 'true');
    host.textContent = 'Dokumente werden geladen …';
    try {
      const url = `/app/forderungen/documents/${encodeURIComponent(host.dataset.documentKey)}?scope=${scope}&detail=${host.dataset.documentDetail === 'true'}`;
      const response = await fetch(url, {signal: controller.signal});
      if (!response.ok) throw new Error();
      const html = await response.text();
      if (!controller.signal.aborted && host.isConnected) host.innerHTML = html;
    } catch (error) {
      if (error.name !== 'AbortError' && host.isConnected) {
        host.textContent = 'Die Dokumentliste konnte nicht geladen werden. ';
        const retry = document.createElement('button'); retry.type = 'button'; retry.textContent = 'Erneut versuchen';
        retry.addEventListener('click', () => load(host)); host.append(retry);
      }
    } finally { if (requests.get(host) === controller) host.removeAttribute('aria-busy'); }
  }
  function init(root = document) {
    const hosts = [...(root.matches?.('[data-document-list]') ? [root] : []), ...root.querySelectorAll('[data-document-list]')];
    for (const host of hosts) if (!initialized.has(host)) { initialized.add(host); load(host); }
  }
  document.addEventListener('click', async event => {
    const open = event.target.closest('[data-document-open]');
    if (open) {
      event.preventDefault();
      const body = document.getElementById('documents-modal-body');
      body.querySelectorAll('[data-document-list]').forEach(host => requests.get(host)?.abort());
      const host = document.createElement('div'); host.dataset.documentList = ''; host.dataset.documentKey = open.dataset.documentOpen;
      body.replaceChildren(host); document.getElementById('documents-modal-title').textContent = `Dokumente zu Beleg ${open.dataset.documentOpen.split('_').slice(1).join('_')}`;
      modal('documents-modal').show(); init(host); return;
    }
    const filter = event.target.closest('[data-document-scope]');
    if (filter) { const host = filter.closest('[data-document-list]'); scopes.set(host.dataset.documentKey, filter.dataset.documentScope); load(host); return; }
    const forward = event.target.closest('[data-document-recipients]');
    if (forward) {
      const host = forward.closest('[data-document-list]'), target = host.querySelector('[data-document-mail]');
      requests.get(target)?.abort(); const controller = new AbortController(); requests.set(target, controller);
      target.textContent = 'Empfänger werden geladen …';
      try { const response = await fetch(forward.dataset.documentRecipients, {signal: controller.signal}); if (!response.ok) throw new Error(); const html = await response.text(); if (!controller.signal.aborted && target.isConnected) target.innerHTML = html; }
      catch (error) { if (error.name !== 'AbortError') target.textContent = 'Empfänger konnten nicht geladen werden. Bitte erneut versuchen.'; }
      return;
    }
    const link = event.target.closest('[data-document-preview]');
    if (link) {
      event.preventDefault(); previewController?.abort(); previewController = new AbortController();
      const controller = previewController, frame = document.getElementById('document-pdf-frame'), status = document.querySelector('[data-preview-status]');
      frame.removeAttribute('src'); if (previewURL) URL.revokeObjectURL(previewURL);
      returnToList = document.getElementById('documents-modal').classList.contains('show');
      if (returnToList) {
        await new Promise(resolve => {
          document.getElementById('documents-modal').addEventListener('hidden.coreui.modal', resolve, {once: true});
          modal('documents-modal').hide();
        });
      }
      if (controller.signal.aborted) return;
      modal('document-preview-modal').show(); status.textContent = 'Dokument wird geladen …';
      try { const response = await fetch(link.href, {signal: controller.signal}); if (!response.ok) throw new Error(); const blob = await response.blob(); if (controller.signal.aborted) return; previewURL = URL.createObjectURL(blob); frame.src = previewURL; status.textContent = ''; }
      catch (error) { if (error.name !== 'AbortError') status.textContent = 'Dokument konnte nicht geladen werden. Bitte zur Liste zurückkehren und erneut versuchen.'; }
    }
    if (event.target.closest('[data-document-back]')) modal('document-preview-modal').hide();
  });
  document.addEventListener('hidden.coreui.modal', event => {
    if (event.target.id === 'document-preview-modal') { previewController?.abort(); document.getElementById('document-pdf-frame').removeAttribute('src'); if (previewURL) URL.revokeObjectURL(previewURL); if (returnToList) modal('documents-modal').show(); }
  });
  document.addEventListener('DOMContentLoaded', () => init());
  document.addEventListener('htmx:load', event => init(event.detail.elt));
  document.addEventListener('htmx:afterSettle', () => init());
  window.addEventListener('pageshow', () => init());
})();