DocumentForm.jsx

Go to the documentation of this file.

import { useState, useEffect, useRef } from 'react';
import Quill from 'quill';
import { useNavigate, useParams } from 'react-router-dom';
import MainLayout from '../components/Layout/MainLayout';
// import removed: TenantSelector
import AIRewordButton from '../components/AIRewordButton';
import './DocumentForm.css';
import { apiFetch } from '../lib/api';
 
function DocumentForm() {
  const navigate = useNavigate();
  const { id } = useParams();
  const [selectedTenantId, setSelectedTenantId] = useState('');
  const [form, setForm] = useState({ title: '', content: '', category: '' });
  const [loading, setLoading] = useState(false);
  const [loadingData, setLoadingData] = useState(false);
  const [error, setError] = useState('');
  const [attachments, setAttachments] = useState([]);
  const quillRefGlobal = useRef(null);
 
  useEffect(() => {
    if (id) {
      fetchDocument();
    }
  }, [id]);
 
  // Initialize Quill editor once on mount
  useEffect(() => {
    if (!quillRefGlobal.current) {
      const editor = document.getElementById('quill-editor');
      if (editor) {
        const quill = new Quill(editor, { theme: 'snow' });
        quill.enable(false); // disable until data is loaded
        quill.on('text-change', () => {
          setForm(f => ({ ...f, content: quill.root.innerHTML }));
        });
        quillRefGlobal.current = quill;
        console.log('[Quill] Editor initialized');
      } else {
        console.error('[Quill] #quill-editor not found in DOM!');
      }
    }
  }, []);
 
  const getTenantHeaders = async (baseHeaders = {}) => {
    const headers = { ...baseHeaders };
    if (selectedTenantId) {
      const token = localStorage.getItem('token');
      const tenantRes = await apiFetch('/tenants', {
        headers: {
          'Authorization': `Bearer ${token}`,
          'X-Tenant-Subdomain': 'admin'
        }
      });
      if (tenantRes.ok) {
        const data = await tenantRes.json();
        const tenants = Array.isArray(data) ? data : (data.tenants || []);
        const tenant = tenants.find(t => t.tenant_id === parseInt(selectedTenantId));
        if (tenant) {
          headers['X-Tenant-Subdomain'] = tenant.subdomain;
        }
      }
    }
    return headers;
  };
 
  // Sync Quill with fetched content
  useEffect(() => {
    if (quillRefGlobal.current && form.content !== undefined) {
      const quill = quillRefGlobal.current;
      const currentHtml = quill.root.innerHTML;
      if ((form.content || '') !== currentHtml) {
        console.log('[Quill] Syncing fetched content');
        quill.setContents([]);
        quill.clipboard.dangerouslyPasteHTML(form.content || '');
        quill.enable(true);
      }
    }
  }, [form.content]);
 
  const fetchDocument = async () => {
    setLoadingData(true);
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/documents/${id}`, {
        headers: { Authorization: `Bearer ${token}` }
      });
      if (!res.ok) throw new Error('Failed to load document');
      const data = await res.json();
 
      if (data.tenant_id && !selectedTenantId) {
        setSelectedTenantId(String(data.tenant_id));
      }
 
      setForm({
        title: data.title || '',
        content: data.content || '',
        category: data.category || '',
        attachments: data.attachments || []
      });
 
      // Apply content to Quill once loaded
      if (quillRefGlobal.current && data.content) {
        quillRefGlobal.current.clipboard.dangerouslyPasteHTML(data.content);
        quillRefGlobal.current.enable(true);
      }
    } catch (err) {
      setError(err.message || 'Error loading document');
    } finally {
      setLoadingData(false);
    }
  };
 
  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    try {
      const token = localStorage.getItem('token');
      const payload = { title: form.title, content: form.content, category: form.category };
      const url = id ? `/documents/${id}` : '/documents';
      const method = id ? 'PUT' : 'POST';
      const headers = await getTenantHeaders({
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`
      });
 
      if (!id && attachments.length) {
        payload.attachments = attachments;
      }
 
      const res = await apiFetch(url, {
        method,
        headers,
        body: JSON.stringify(payload),
      });
 
      if (!res.ok) throw new Error(`Failed to ${id ? 'update' : 'create'} document`);
      navigate('/knowledge-base');
    } catch (err) {
      console.error(err);
      setError(err.message || 'Save failed');
    } finally {
      setLoading(false);
    }
  };
 
  const handleFileChange = (ev) => {
    const file = ev.target.files && ev.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = () => {
      const data = reader.result.split(',')[1];
      setAttachments([{ filename: file.name, data }]);
    };
    reader.readAsDataURL(file);
  };
 
  const handleUploadAttachment = async () => {
    if (!id || attachments.length === 0) {
      setError('Please select a file to upload');
      return;
    }
    setLoading(true);
    setError('');
    try {
      const token = localStorage.getItem('token');
      const headers = await getTenantHeaders({
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`
      });
 
      const res = await apiFetch(`/documents/${id}/attachments`, {
        method: 'POST',
        headers,
        body: JSON.stringify({ attachments }),
      });
 
      if (!res.ok) {
        const errData = await res.json().catch(() => ({}));
        throw new Error(errData.error || 'Failed to upload attachment');
      }
 
      await fetchDocument();
      setAttachments([]);
      const fileInput = document.getElementById('attachment');
      if (fileInput) fileInput.value = '';
    } catch (err) {
      console.error(err);
      setError(err.message || 'Upload failed');
    } finally {
      setLoading(false);
    }
  };
 
  return (
    <MainLayout>
      <div className="page-content">
        <div className="page-header">
          <h2>{id ? 'Edit Document' : 'Create Document'}</h2>
          <div className="header-actions">
            <button className="btn btn-secondary" onClick={() => navigate('/knowledge-base')}>
              <span className="material-symbols-outlined">arrow_back</span>
              Back
            </button>
          </div>
        </div>
 
        {error && <div className="alert alert-error">{error}</div>}
 
      
        {loadingData ? (
          <div className="loading-state">
            <span className="material-symbols-outlined spinning">progress_activity</span>
            <p>Loading document...</p>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="document-form-container">
            <div className="form-card">
              <div className="card-header">
                <h3>
                  <span className="material-symbols-outlined">description</span>
                  Document Information
                </h3>
              </div>
              <div className="card-body">
                <div className="form-group" style={{ position: 'relative' }}>
                  <label htmlFor="title">Title *</label>
                  <input
                    id="title"
                    type="text"
                    placeholder="Enter document title"
                    value={form.title}
                    onChange={(e) => setForm({ ...form, title: e.target.value })}
                    required
                    style={{ paddingRight: 40 }}
                  />
                  <AIRewordButton
                    value={form.title}
                    onReword={(reworded) => setForm(f => ({ ...f, title: reworded }))}
                    disabled={!form.title}
                    style={{ position: 'absolute', right: 8, top: 8 }}
                  />
                </div>
                <div className="form-group">
                  <label htmlFor="category">Category</label>
                  <input
                    id="category"
                    type="text"
                    placeholder="e.g., Policy, Guide, Report"
                    value={form.category}
                    onChange={(e) => setForm({ ...form, category: e.target.value })}
                  />
                </div>
              </div>
            </div>
 
            <div className="form-card">
              <div className="card-header">
                <h3>
                  <span className="material-symbols-outlined">edit_note</span>
                  Content
                </h3>
              </div>
              <div className="card-body">
                {loadingData ? (
                  <div>Loading content...</div>
                ) : (
                  <div className="quill-wrapper" style={{ position: 'relative' }}>
                    <div id="quill-editor" />
                    <AIRewordButton
                      value={form.content}
                      onReword={(reworded) => {
                        setForm(f => ({ ...f, content: reworded }));
                        if (quillRefGlobal.current) {
                          quillRefGlobal.current.clipboard.dangerouslyPasteHTML(reworded);
                        }
                      }}
                      disabled={!form.content}
                      style={{ position: 'absolute', right: 8, top: 8, zIndex: 10 }}
                    />
                  </div>
                )}
              </div>
            </div>
 
            <div className="form-card">
              <div className="card-header">
                <h3>
                  <span className="material-symbols-outlined">attach_file</span>
                  Attachments
                </h3>
              </div>
              <div className="card-body">
                {Array.isArray(form.attachments) && form.attachments.length > 0 && (
                  <div className="existing-attachments">
                    <label>Existing Files</label>
                    <ul className="attachment-list" style={{ listStyle: 'none', padding: 0 }}>
                      {form.attachments.map(a => (
                        <li key={a.id} className="attachment-item" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem', borderBottom: '1px solid #e0e0e0' }}>
                          <span className="material-symbols-outlined" style={{ fontSize: '20px', color: '#666' }}>insert_drive_file</span>
                          <span style={{ flex: 1 }}>{a.original_filename || a.filename}</span>
                          <a
                            className="btn-icon"
                            style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: '32px', height: '32px', borderRadius: '4px', border: '1px solid #ccc', backgroundColor: '#fff', cursor: 'pointer', textDecoration: 'none', color: '#333' }}
                            href={`/documents/${id}/attachments/${a.id}/download`}
                            download
                            title="Download"
                          >
                            <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>download</span>
                          </a>
                        </li>
                      ))}
                    </ul>
                  </div>
                )}
 
                <div className="form-group" style={{ marginTop: form.attachments?.length ? '1rem' : 0 }}>
                  <label htmlFor="attachment">{id ? 'Add Another File' : 'Upload File (optional)'}</label>
                  <input id="attachment" type="file" onChange={handleFileChange} className="file-input" />
                  {attachments.length > 0 && (
                    <div className="file-selected" style={{ marginTop: '0.5rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                      <span className="material-symbols-outlined" style={{ color: 'green' }}>check_circle</span>
                      <span>Selected: {attachments[0].filename}</span>
                    </div>
                  )}
                  {id && attachments.length > 0 && (
                    <button type="button" className="btn btn-primary" style={{ marginTop: '0.75rem' }} onClick={handleUploadAttachment} disabled={loading}>
                      <span className="material-symbols-outlined">upload</span>
                      {loading ? 'Uploading...' : 'Upload Document'}
                    </button>
                  )}
                </div>
              </div>
            </div>
 
            <div className="form-actions">
              <button type="submit" className="btn btn-primary" disabled={loading || !form.title}>
                {loading ? (
                  <>
                    <span className="material-symbols-outlined spinning">progress_activity</span>
                    Saving...
                  </>
                ) : (
                  <>
                    <span className="material-symbols-outlined">save</span>
                    {id ? 'Update Document' : 'Create Document'}
                  </>
                )}
              </button>
              <button type="button" className="btn btn-secondary" onClick={() => navigate('/knowledge-base')} disabled={loading}>
                <span className="material-symbols-outlined">close</span>
                Cancel
              </button>
            </div>
          </form>
        )}
      </div>
    </MainLayout>
  );
}
 
export default DocumentForm;