bruno
50273fcb1a
Alpine 3.14.9 evaluates x-data expressions before Alpine.data() registration, causing 'pages is not defined', 'emptyRows is not defined', etc. Solution: pure vanilla JS DOM rendering (same pattern as Library fix). - _database_table.html: static DOM with IDs only, no Alpine directives - _database_table_scripts.html: vanilla JS state, render, cell editing, modals - Removes all x-data, x-for, x-show, x-model from database table
70 lines
3.2 KiB
HTML
70 lines
3.2 KiB
HTML
<!-- ═══════════ Database Table View (Notion-style) — Vanilla JS ═══════════ -->
|
|
<div id="db-table-container" class="database-table-container">
|
|
<!-- View Selector Bar -->
|
|
<div id="db-view-bar" class="db-view-bar">
|
|
<div class="db-view-tabs">
|
|
<button id="db-view-tab-table" class="db-view-tab active">
|
|
{{ fd_icon("grid",14) }} Table
|
|
</button>
|
|
<button id="db-view-add-btn" class="db-view-add" title="Add a view">
|
|
{{ fd_icon("plus",14) }}
|
|
</button>
|
|
<div id="db-add-view-dropdown" class="db-dropdown" style="display:none">
|
|
<div class="db-dropdown-header">Add a new view</div>
|
|
<div class="db-dropdown-item">{{ fd_icon("grid",14) }} Table</div>
|
|
<div class="db-dropdown-item">{{ fd_icon("grid",14) }} Board</div>
|
|
<div class="db-dropdown-item">{{ fd_icon("list",14) }} List</div>
|
|
<div class="db-dropdown-item">{{ fd_icon("calendar",14) }} Calendar</div>
|
|
</div>
|
|
</div>
|
|
<div class="db-view-actions">
|
|
<button id="db-filter-btn" class="db-btn-icon" title="Filter">{{ fd_icon("search",14) }}</button>
|
|
<button id="db-new-btn" class="db-btn-new">
|
|
<span class="db-new-icon">{{ fd_icon("plus",12) }}</span> New
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Database Table -->
|
|
<div id="db-table-wrapper" class="db-table-wrapper">
|
|
<table id="db-table" class="db-table">
|
|
<thead id="db-thead"></thead>
|
|
<tbody id="db-tbody"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Add Property Modal -->
|
|
<div id="db-prop-modal" class="db-modal-overlay" style="display:none">
|
|
<div class="db-modal">
|
|
<div class="db-modal-header">
|
|
<h3>Add a property</h3>
|
|
<button id="db-prop-modal-close">{{ fd_icon("x",14) }}</button>
|
|
</div>
|
|
<div class="db-modal-body">
|
|
<div class="db-modal-field">
|
|
<label>Name</label>
|
|
<input id="db-prop-name-input" type="text" placeholder="Property name" />
|
|
</div>
|
|
<div class="db-modal-field">
|
|
<label>Type</label>
|
|
<select id="db-prop-type-select">
|
|
<option value="text">Text</option>
|
|
<option value="number">Number</option>
|
|
<option value="select">Select</option>
|
|
<option value="multi_select">Multi-select</option>
|
|
<option value="date">Date</option>
|
|
<option value="checkbox">Checkbox</option>
|
|
<option value="url">URL</option>
|
|
<option value="email">Email</option>
|
|
<option value="phone">Phone</option>
|
|
</select>
|
|
</div>
|
|
<div class="db-modal-actions">
|
|
<button id="db-prop-cancel" class="db-btn-cancel">Cancel</button>
|
|
<button id="db-prop-create" class="db-btn-create">Create</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|