InstallerRobot/web-server/views/documents.ejs

<%- include('partials/page-start') %>

<section class="page">
  <div class="page-header">
    <div>
      <h1>Tài liệu</h1>
      <p>Lưu trữ và tra cứu tài liệu giới thiệu, hướng dẫn sử dụng, quy trình và tài liệu kỹ thuật.</p>
    </div>
    <div class="page-actions">
      <button class="btn btn-primary" type="button" data-modal-open="createDocumentModal">
        <span class="material-symbols-outlined">note_add</span>
        Thêm tài liệu
      </button>
    </div>
  </div>

  <div class="page-filters">
    <label class="filter-field">
      <span>Nhóm tài liệu</span>
      <select data-filter-select data-filter-column="category" data-filter-table="documentsTable">
        <option value="">Tất cả</option>
        <% documentCategories.forEach((category) => { %>
          <option value="<%= category.id %>"><%= category.label %></option>
        <% }) %>
      </select>
    </label>
    <label class="filter-field wide">
      <span>Tìm kiếm</span>
      <input type="search" placeholder="Tìm theo tiêu đề, mô tả, tác giả..." data-table-search="documentsTable">
    </label>
  </div>

  <section class="table-panel">
    <div class="table-wrap">
      <table id="documentsTable" class="data-table documents-table">
        <thead>
          <tr>
            <th>Tài liệu</th>
            <th>Nhóm</th>
            <th>File đính kèm</th>
            <th>Cập nhật</th>
            <th>Người tạo</th>
            <th class="action-col">Thao tác</th>
          </tr>
        </thead>
        <tbody>
          <% if (documents.length === 0) { %>
            <tr>
              <td colspan="6" class="table-empty">Chưa có tài liệu. Bấm Thêm tài liệu để tạo nội dung đầu tiên.</td>
            </tr>
          <% } %>
          <% documents.forEach((item) => { %>
            <tr
              data-search="<%= `${item.title} ${item.summary} ${item.createdBy} ${helpers.documentCategoryLabel(item.category)}`.toLowerCase() %>"
              data-category="<%= item.category %>"
            >
              <td class="document-title-cell">
                <a class="table-title" href="/documents/<%= item.id %>"><%= item.title %></a>
                <span class="table-subtitle"><%= item.summary || (item.hasContent ? 'Có nội dung đọc trực tiếp' : 'Tài liệu đính kèm') %></span>
              </td>
              <td><span class="badge badge-info"><%= helpers.documentCategoryLabel(item.category) %></span></td>
              <td>
                <% if (item.filePath) { %>
                  <span class="document-file-name" title="<%= item.originalFileName %>"><%= item.originalFileName %></span>
                  <span class="table-subtitle"><%= item.fileSize %></span>
                <% } else { %>
                  <span class="table-subtitle">Không có file</span>
                <% } %>
              </td>
              <td><%= item.updatedAt %></td>
              <td><%= item.createdBy %></td>
              <td class="action-col">
                <div class="action-group">
                  <a class="icon-button subtle" href="/documents/<%= item.id %>" title="Đọc tài liệu" aria-label="Đọc tài liệu <%= item.title %>">
                    <span class="material-symbols-outlined">visibility</span>
                  </a>
                  <% if (item.filePath) { %>
                    <a class="icon-button subtle" href="/documents/<%= item.id %>/file?download=1" title="Tải file" aria-label="Tải file <%= item.title %>">
                      <span class="material-symbols-outlined">download</span>
                    </a>
                  <% } %>
                  <form method="post" action="/documents/<%= item.id %>/delete" data-confirm-submit="Xóa tài liệu <%= item.title %> và file đính kèm?">
                    <button class="icon-button danger" type="submit" title="Xóa tài liệu" aria-label="Xóa tài liệu <%= item.title %>">
                      <span class="material-symbols-outlined">delete</span>
                    </button>
                  </form>
                </div>
              </td>
            </tr>
          <% }) %>
        </tbody>
      </table>
    </div>
    <div class="page-pager">
      <span>Hiển thị <%= documents.length %> tài liệu</span>
      <div>
        <button type="button" disabled>Trước</button>
        <span>Trang 1 / 1</span>
        <button type="button" disabled>Sau</button>
      </div>
    </div>
  </section>
</section>

<div id="createDocumentModal" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="createDocumentModalTitle">
  <div class="modal-content wide">
    <div class="modal-header">
      <div>
        <h3 id="createDocumentModalTitle">Thêm tài liệu</h3>
        <p>Nhập nội dung để đọc trực tiếp, đính kèm file, hoặc sử dụng cả hai.</p>
      </div>
      <button class="icon-button subtle" type="button" data-modal-close aria-label="Đóng">
        <span class="material-symbols-outlined">close</span>
      </button>
    </div>
    <form class="modal-form" method="post" action="/documents" enctype="multipart/form-data">
      <div class="form-stack">
        <div class="form-grid">
          <label class="form-field">
            <span>Tiêu đề</span>
            <input type="text" name="title" maxlength="200" required placeholder="Ví dụ: Hướng dẫn cài đặt Robot">
          </label>
          <label class="form-field">
            <span>Nhóm tài liệu</span>
            <select name="category" required>
              <% documentCategories.forEach((category) => { %>
                <option value="<%= category.id %>"><%= category.label %></option>
              <% }) %>
            </select>
          </label>
        </div>
        <label class="form-field">
          <span>Mô tả ngắn</span>
          <textarea name="summary" rows="3" maxlength="1000" placeholder="Nội dung chính và đối tượng sử dụng tài liệu này."></textarea>
        </label>
        <label class="form-field">
          <span>Nội dung đọc trực tiếp</span>
          <textarea name="content" rows="8" maxlength="500000" placeholder="Nhập nội dung hướng dẫn tại đây. Xuống dòng và khoảng trắng sẽ được giữ nguyên khi hiển thị."></textarea>
        </label>
        <label class="form-field">
          <span>File đính kèm</span>
          <input
            type="file"
            name="documentFile"
            accept=".pdf,.doc,.docx,.odt,.rtf,.txt,.md,.png,.jpg,.jpeg,.webp,.ppt,.pptx,.xls,.xlsx"
          >
          <small>Hỗ trợ PDF, Word, OpenDocument, text/Markdown, ảnh, PowerPoint và Excel; tối đa 50 MB mặc định.</small>
        </label>
      </div>
      <div class="modal-actions">
        <button class="btn btn-secondary" type="button" data-modal-close>Hủy</button>
        <button class="btn btn-primary" type="submit">
          <span class="material-symbols-outlined">save</span>
          Lưu tài liệu
        </button>
      </div>
    </form>
  </div>
</div>

<%- include('partials/page-end') %>