bruno
f53205bc45
- page_editor_embed.html incluait seulement _page_editor_scripts.html : window.FlowDeckDB etait undefined dans l'iframe -> une base ouverte en side peek restait a « Loading database... ». Include _database_table_scripts.html ajoute (meme traitement que page_editor.html). - Le panneau #db-side-peek n'existait que dans _database_table.html : hors page dediee, openPageInSidePeek etait un no-op. Desormais cree a la demande par ensureDbPeek (database_table.js) ; markup unique retire du partial. - .database-table-container : plafond 1100px retire (regle heritee de Library) + max-width 100% pour .db-first et database-page-title : le tableau prend la largeur du document, plus de barre de scroll parasite sous le tableau. - Tests: test_embed_editor_can_render_inline_databases. Suite 1265/0 (-n auto) + ruff 0. Bump VERSION/main.py 7.50.1, CHANGELOG, WORKLOAD, OpenAPI.
132 lines
7.4 KiB
HTML
132 lines
7.4 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>
|
||
|
||
<!-- Le panneau de peek (#db-side-peek) est créé à la demande par
|
||
database_table.js (ensureDbPeek) : une seule source de markup pour
|
||
la page de base et les bases embarquées dans un document. -->
|
||
</div>
|