Spaces:
Running
Running
| // Projects view — CRUD list styled like a Jira projects page. | |
| const ProjectsView = { | |
| async render(container) { | |
| container.innerHTML = ` | |
| <div class="page-head"> | |
| <div> | |
| <h1 class="page-title">Projects</h1> | |
| <div class="page-sub">Manage your projects and their structure</div> | |
| </div> | |
| <button class="btn btn-primary" id="new-project">+ Create project</button> | |
| </div> | |
| <div id="projects-body"><div class="spinner">Loading…</div></div> | |
| `; | |
| container.querySelector('#new-project').addEventListener('click', () => this.openForm()); | |
| await this.load(); | |
| }, | |
| async load() { | |
| const body = document.getElementById('projects-body'); | |
| try { | |
| const projects = await API.listProjects(); | |
| if (!projects.length) { | |
| body.innerHTML = ` | |
| <div class="empty-state"> | |
| <h3>No projects yet</h3> | |
| <p>Create your first project to get started.</p> | |
| </div>`; | |
| return; | |
| } | |
| body.innerHTML = ` | |
| <div class="table-wrap"> | |
| <table class="data"> | |
| <thead> | |
| <tr> | |
| <th style="width:60px">ID</th> | |
| <th>Name</th> | |
| <th>Note</th> | |
| <th>Created</th> | |
| <th style="width:140px;text-align:right">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| ${projects.map((p) => this.row(p)).join('')} | |
| </tbody> | |
| </table> | |
| </div>`; | |
| body.querySelectorAll('[data-edit]').forEach((b) => | |
| b.addEventListener('click', () => this.openForm(Number(b.dataset.edit))) | |
| ); | |
| body.querySelectorAll('[data-del]').forEach((b) => | |
| b.addEventListener('click', () => this.remove(Number(b.dataset.del))) | |
| ); | |
| } catch (e) { | |
| body.innerHTML = `<div class="empty-state"><h3>Failed to load</h3><p>${UI.esc(e.message)}</p></div>`; | |
| } | |
| }, | |
| row(p) { | |
| return ` | |
| <tr> | |
| <td class="muted mono">${p.id}</td> | |
| <td><strong>${UI.esc(p.name)}</strong></td> | |
| <td class="muted">${UI.esc(p.note || '—')}</td> | |
| <td class="muted">${UI.fmtDate(p.creatid)}</td> | |
| <td> | |
| <div class="row-actions"> | |
| <button class="btn btn-subtle btn-sm" data-edit="${p.id}">Edit</button> | |
| <button class="btn btn-danger btn-sm" data-del="${p.id}">Delete</button> | |
| </div> | |
| </td> | |
| </tr>`; | |
| }, | |
| async openForm(id) { | |
| let p = { name: '', note: '', struc: {} }; | |
| if (id) { | |
| try { p = await API.getProject(id); } catch (e) { return UI.toast(e.message, true); } | |
| } | |
| const strucText = typeof p.struc === 'object' ? JSON.stringify(p.struc ?? {}, null, 2) : (p.struc || ''); | |
| const modal = UI.openModal(` | |
| <div> | |
| <h2 class="modal-title">${id ? 'Edit project' : 'Create project'}</h2> | |
| <div class="field"> | |
| <label>Name *</label> | |
| <input type="text" id="f-name" value="${UI.esc(p.name)}" placeholder="Project name" /> | |
| </div> | |
| <div class="field"> | |
| <label>Note</label> | |
| <textarea id="f-note" placeholder="Short description">${UI.esc(p.note || '')}</textarea> | |
| </div> | |
| <div class="field"> | |
| <label>Structure (JSON)</label> | |
| <textarea id="f-struc" class="mono" placeholder='{ "columns": ["todo","doing","done"] }'>${UI.esc(strucText)}</textarea> | |
| </div> | |
| <div class="modal-actions"> | |
| <button class="btn btn-subtle" id="f-cancel">Cancel</button> | |
| <button class="btn btn-primary" id="f-save">${id ? 'Save' : 'Create'}</button> | |
| </div> | |
| </div> | |
| `); | |
| modal.querySelector('#f-cancel').addEventListener('click', UI.closeModal); | |
| modal.querySelector('#f-save').addEventListener('click', async () => { | |
| const name = modal.querySelector('#f-name').value.trim(); | |
| if (!name) return UI.toast('Name is required', true); | |
| const payload = { | |
| name, | |
| note: modal.querySelector('#f-note').value.trim(), | |
| struc: modal.querySelector('#f-struc').value.trim() | |
| }; | |
| try { | |
| if (id) await API.updateProject(id, payload); | |
| else await API.createProject(payload); | |
| UI.closeModal(); | |
| UI.toast(id ? 'Project updated' : 'Project created'); | |
| this.load(); | |
| } catch (e) { UI.toast(e.message, true); } | |
| }); | |
| }, | |
| async remove(id) { | |
| if (!confirm('Delete this project? Tickets linked to it will be unlinked.')) return; | |
| try { | |
| await API.deleteProject(id); | |
| UI.toast('Project deleted'); | |
| this.load(); | |
| } catch (e) { UI.toast(e.message, true); } | |
| } | |
| }; | |