web server

web-server/views/applications.ejs

@@ -0,0 +1,114 @@
+<%- include('partials/page-start') %>
+
+<section class="page">
+  <div class="page-header">
+    <div>
+      <h1>Applications</h1>
+      <p>Danh sách app được tạo từ các package đã chọn, kèm version và ghi chú đóng gói.</p>
+    </div>
+    <div class="page-actions">
+      <a class="btn btn-secondary" href="/applications/export.csv">
+        <span class="material-symbols-outlined">download</span>
+        Export
+      </a>
+      <a class="btn btn-primary" href="/builder">
+        <span class="material-symbols-outlined">add</span>
+        Tạo App
+      </a>
+    </div>
+  </div>
+
+  <div class="page-filters">
+    <label class="filter-field">
+      <span>Status</span>
+      <select data-filter-select data-filter-column="status" data-filter-table="applicationsTable">
+        <option value="">Tất cả</option>
+        <option value="Draft">Draft</option>
+        <option value="Released">Released</option>
+        <option value="Archived">Archived</option>
+      </select>
+    </label>
+    <label class="filter-field wide">
+      <span>Search</span>
+      <input type="search" placeholder="Tìm theo tên app, code, người tạo..." data-table-search="applicationsTable">
+    </label>
+  </div>
+
+  <section class="table-panel">
+    <div class="table-wrap">
+      <table id="applicationsTable" class="data-table">
+        <thead>
+          <tr>
+            <th>Application</th>
+            <th>Version</th>
+            <th>Packages</th>
+            <th>Created date</th>
+            <th>Created by</th>
+            <th>Status</th>
+            <th>Notes</th>
+            <th class="action-col">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% if (applications.length === 0) { %>
+            <tr>
+              <td colspan="8" class="table-empty">Chưa có app trong database. Tạo app sau khi đã upload package.</td>
+            </tr>
+          <% } %>
+          <% applications.forEach((item) => { %>
+            <tr data-search="<%= `${item.name} ${item.code} ${item.version} ${item.createdBy} ${item.notes}`.toLowerCase() %>" data-status="<%= item.status %>">
+              <td>
+                <a class="table-title" href="/applications/<%= item.id %>"><%= item.name %></a>
+                <span class="table-subtitle"><%= item.code %></span>
+              </td>
+              <td><strong><%= item.version %></strong></td>
+              <td><%= item.packageCount %></td>
+              <td><%= item.createdAt %></td>
+              <td><%= item.createdBy %></td>
+              <td><span class="badge <%= helpers.statusClass(item.status) %>"><%= item.status %></span></td>
+              <td class="notes-cell"><%= item.notes %></td>
+              <td class="action-col">
+                <div class="action-group">
+                  <a class="icon-button subtle" href="/applications/<%= item.id %>" title="Xem chi tiết" aria-label="Xem chi tiết <%= item.name %>">
+                    <span class="material-symbols-outlined">visibility</span>
+                  </a>
+                  <button
+                    class="icon-button subtle"
+                    type="button"
+                    title="Sửa app"
+                    data-app-edit
+                    data-app-id="<%= item.id %>"
+                    data-app-code="<%= item.code %>"
+                    data-app-name="<%= item.name %>"
+                    data-app-version="<%= item.version %>"
+                    data-app-status="<%= item.status %>"
+                    data-app-notes="<%= item.notes %>"
+                    data-app-packages="<%= JSON.stringify(item.packages.map((pkg) => ({ packageId: pkg.packageId, selectedVersionId: pkg.selectedVersionId }))) %>"
+                  >
+                    <span class="material-symbols-outlined">edit</span>
+                  </button>
+                  <form method="post" action="/applications/<%= item.id %>/delete" data-confirm-submit="Xóa app <%= item.code %>? Thao tác này sẽ xóa thông tin đóng gói của app.">
+                    <button class="icon-button danger" type="submit" title="Xóa app" aria-label="Xóa app <%= item.name %>">
+                      <span class="material-symbols-outlined">delete</span>
+                    </button>
+                  </form>
+                </div>
+              </td>
+            </tr>
+          <% }) %>
+        </tbody>
+      </table>
+    </div>
+    <div class="page-pager">
+      <span>Showing 1-<%= applications.length %> of <%= applications.length %></span>
+      <div>
+        <button type="button" disabled>Prev</button>
+        <span>Page 1 / 1</span>
+        <button type="button" disabled>Next</button>
+      </div>
+    </div>
+  </section>
+</section>
+
+<%- include('partials/edit-app-modal') %>
+<%- include('partials/page-end') %>