bruno
c586513b03
- Page title placeholder: new pages created with empty title, CSS :empty::before shows 'New page' in gray
- Database is now inline embed within page (not full-page replacement)
- Embed block 'collection' renders database table via FlowDeckDB.renderInto()
- Open button in column 1 of each row opens page in side peek panel
- Side peek: iframe loading /pages/{id}?embed=1, close/fullscreen/resize
- DB scripts refactored as reusable DBInstance + global FlowDeckDB API
138 lines
7.7 KiB
HTML
138 lines
7.7 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>
|
||
|
||
<!-- Column Header Context Menu -->
|
||
<div id="db-col-menu" class="db-col-menu" style="display:none">
|
||
<div class="db-col-menu-header">
|
||
<span class="db-col-menu-icon" id="db-col-menu-icon">Aa</span>
|
||
<span class="db-col-menu-name" id="db-col-menu-name">Name</span>
|
||
<span class="db-col-menu-info" id="db-col-menu-info"></span>
|
||
</div>
|
||
<div class="db-col-menu-sep"></div>
|
||
<div class="db-col-menu-item" id="db-col-show-icon">
|
||
<span>😊 Show page icon</span>
|
||
<span class="db-col-menu-toggle on" id="db-col-icon-toggle">● ON</span>
|
||
</div>
|
||
<div class="db-col-menu-sep"></div>
|
||
<div class="db-col-menu-item has-sub" id="db-col-ai-autofill">
|
||
<span>✨ AI Autofill</span>
|
||
<span class="db-col-menu-hint">Now with agents</span>
|
||
<span class="db-col-menu-arrow">›</span>
|
||
</div>
|
||
<div class="db-col-menu-sub" id="db-col-ai-sub" style="display:none">
|
||
<div class="db-col-menu-item sub-item"><span>✨ Basic</span></div>
|
||
<div class="db-col-menu-subnote">Not available for this property type</div>
|
||
<div class="db-col-menu-sep"></div>
|
||
<div class="db-col-menu-item sub-item"><span>🤖 Custom Agent</span><span class="db-col-menu-tag">New</span></div>
|
||
<div class="db-col-menu-subnote">Uses advanced models to fill properties based on web search and your connected workspace.</div>
|
||
</div>
|
||
<div class="db-col-menu-sep"></div>
|
||
<div class="db-col-menu-item" id="db-col-filter"><span>≡ Filter</span></div>
|
||
<div class="db-col-menu-item has-sub" id="db-col-sort"><span>↕ Sort</span><span class="db-col-menu-arrow">›</span></div>
|
||
<div class="db-col-menu-sub" id="db-col-sort-sub" style="display:none">
|
||
<div class="db-col-menu-item sub-item"><span>↑ Sort ascending</span></div>
|
||
<div class="db-col-menu-item sub-item"><span>↓ Sort descending</span></div>
|
||
</div>
|
||
<div class="db-col-menu-item" id="db-col-group"><span>▦ Group</span></div>
|
||
<div class="db-col-menu-item has-sub" id="db-col-calc"><span>Σ Calculate</span><span class="db-col-menu-arrow">›</span></div>
|
||
<div class="db-col-menu-sub" id="db-col-calc-sub" style="display:none">
|
||
<div class="db-col-menu-item sub-item checked"><span>None</span></div>
|
||
<div class="db-col-menu-item has-sub sub-item" id="db-col-calc-count"><span>Count</span><span class="db-col-menu-arrow">›</span></div>
|
||
<div class="db-col-menu-sub" id="db-col-calc-count-sub" style="display:none">
|
||
<div class="db-col-menu-item sub-item"><span>Count all</span></div>
|
||
<div class="db-col-menu-item sub-item"><span>Count values</span></div>
|
||
<div class="db-col-menu-item sub-item"><span>Count unique values</span></div>
|
||
<div class="db-col-menu-item sub-item"><span>Count empty</span></div>
|
||
<div class="db-col-menu-item sub-item"><span>Count not empty</span></div>
|
||
</div>
|
||
<div class="db-col-menu-item has-sub sub-item" id="db-col-calc-pct"><span>Percent</span><span class="db-col-menu-arrow">›</span></div>
|
||
<div class="db-col-menu-sub" id="db-col-calc-pct-sub" style="display:none">
|
||
<div class="db-col-menu-item sub-item"><span>Percent empty</span></div>
|
||
<div class="db-col-menu-item sub-item"><span>Percent not empty</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="db-col-menu-sep"></div>
|
||
<div class="db-col-menu-item" id="db-col-freeze"><span>🧊 Freeze</span></div>
|
||
<div class="db-col-menu-item" id="db-col-wrap"><span>📝 Wrap content</span></div>
|
||
<div class="db-col-menu-sep"></div>
|
||
<div class="db-col-menu-item" id="db-col-insert-left"><span>├← Insert left</span></div>
|
||
<div class="db-col-menu-item" id="db-col-insert-right"><span>→┤ Insert right</span></div>
|
||
</div>
|
||
|
||
<!-- Side Peek Panel for Database Pages -->
|
||
<div id="db-side-peek" class="db-side-peek" style="display:none">
|
||
<div class="db-side-peek-resize" id="db-side-peek-resize"></div>
|
||
<div class="db-side-peek-header">
|
||
<button id="db-side-peek-close" class="db-side-peek-close">×</button>
|
||
<button id="db-side-peek-full" class="db-side-peek-full" title="Open full page">↗</button>
|
||
</div>
|
||
<iframe id="db-side-peek-iframe" src="" style="width:100%;height:100%;border:none"></iframe>
|
||
</div>
|
||
</div>
|