';
cardProps.forEach(function(ref){
var p = findProp(ref); if (!p) return;
var v = pageVal(cp, p);
var txt = textValue(p, v);
if (!txt) return;
body += '
'+escHtml(p.name)+''+escHtml(txt.slice(0,60))+'
';
});
body += '
';
return '
'+cover+body+'
';
}
function defaultCardProps() {
return state.properties.filter(function(p){ return p.prop_type !== 'title'; }).slice(0,3).map(function(p){ return p.id; });
}
function coverHtml(cp) {
if (cp.cover_url) return '';
var mode = state.viewConfig.cover_mode || 'icon';
if (mode === 'none') return '';
if (mode === 'property') {
var p = findProp(state.viewConfig.cover_property);
if (p) {
var v = pageVal(cp, p);
var url = null;
if (Array.isArray(v) && v.length) url = (v[0] && (v[0].url||v[0].src)) || (typeof v[0]==='string'?v[0]:null);
else if (typeof v === 'string' && /^https?:\/\//.test(v)) url = v;
if (url) return '';
}
}
if (mode === 'color') {
var g = groupProp();
var key = g ? columnKeyFor(g, cp) : '';
var col = g ? optColor(g, key) : '#8b8b8b';
return '';
}
return '
';
}
function renderCalendar() {
var dp = dateProp();
if (!dp) return '
Add a Date property to use the calendar view.
';
var mode = calMode();
var cur = state.calCursor;
var h = '
';
h += '';
var title;
if (mode === 'month') title = MONTH_NAMES[cur.getMonth()]+' '+cur.getFullYear();
else if (mode === 'week') { var ws=mondayOf(cur); title = MONTH_NAMES[ws.getMonth()].slice(0,3)+' '+ws.getDate()+' \u2013 '+(function(we){return MONTH_NAMES[we.getMonth()].slice(0,3)+' '+we.getDate();})(new Date(ws.getTime()+6*864e5)); }
else title = MONTH_NAMES[cur.getMonth()]+' '+cur.getDate()+', '+cur.getFullYear();
h += '
';
return h;
}
function calWindow() {
var mode = calMode(); var cur = state.calCursor;
if (mode === 'month') {
var first = new Date(cur.getFullYear(), cur.getMonth(), 1);
var startDow = (first.getDay()+6)%7;
var start = new Date(first.getTime() - startDow*864e5);
var daysInMonth = new Date(cur.getFullYear(), cur.getMonth()+1, 0).getDate();
var totalCells = Math.ceil((startDow + daysInMonth)/7)*7;
return {start: start, days: totalCells, mode: mode, startDow: startDow, daysInMonth: daysInMonth};
}
if (mode === 'week') return {start: mondayOf(cur), days: 7, mode: mode};
return {start: new Date(cur.getFullYear(), cur.getMonth(), cur.getDate()), days: 1, mode: mode};
}
function paintCalendar(win, data) {
var body = containerEl.querySelector('#db-cal-body');
if (!body) return;
body.removeAttribute('data-cal-loading');
var today = new Date(); var todayIso = isoDay(today);
var byDate = data.byDate || {};
var h = '';
if (win.mode === 'month') {
h += '
';
CAL_DOW.forEach(function(d){ h += '
'+d+'
'; });
for (var i=0;i';
h += '
'+cellDate.getDate()+'
';
(byDate[iso]||[]).forEach(function(ev){ h += evChipHtml(ev); });
h += '
';
}
h += '';
} else if (win.mode === 'week') {
h += '
';
CAL_DOW.forEach(function(d){ h += '
'+d+'
'; });
for (var j=0;j<7;j++) {
var d2 = new Date(win.start.getTime() + j*864e5);
var iso2 = isoDay(d2);
h += '
';
h += '
'+d2.getDate()+'
';
(byDate[iso2]||[]).forEach(function(ev){ h += evChipHtml(ev); });
h += '
';
}
body.innerHTML = h;
bindCalendarCells();
}
var calSeq = 0;
function refreshCalendar() {
var win = calWindow();
var startIso = isoDay(win.start);
var endIso = isoDay(new Date(win.start.getTime() + (win.days-1)*864e5));
var seq = ++calSeq;
eventsForWindow(startIso, endIso).then(function(data){
if (seq !== calSeq) return; // a newer request won
paintCalendar(win, data);
});
}
function bindCalendarCells() {
// day cells: drop to reschedule
containerEl.querySelectorAll('[data-cal-date]').forEach(function(day){
day.addEventListener('dragover', function(e){ e.preventDefault(); this.classList.add('drop-target'); });
day.addEventListener('dragleave', function(){ this.classList.remove('drop-target'); });
day.addEventListener('drop', function(e){
e.preventDefault(); this.classList.remove('drop-target');
var pid = parseInt(e.dataTransfer.getData('text/plain'));
var cp = pageById(pid); var dp = dateProp();
if (!cp || !dp) return;
var old = pageVal(cp, dp);
var newDate = this.dataset.calDate;
var time = (old && String(old).length > 10) ? String(old).slice(10) : '';
setPageVal(cp, dp, newDate + time); render();
savePage(cp);
});
});
// event chips: open row in peek (stop drag click-through)
containerEl.querySelectorAll('.db-cal-ev, .db-cal-agenda-row').forEach(function(ev){
ev.addEventListener('dragstart', function(e){
e.dataTransfer.setData('text/plain', this.dataset.cardPage);
this.classList.add('dragging');
});
ev.addEventListener('dragend', function(){ this.classList.remove('dragging'); });
ev.addEventListener('click', function(e){
e.stopPropagation();
openPageInSidePeek(parseInt(this.dataset.cardPage));
});
ev.addEventListener('dblclick', function(e){
e.stopPropagation();
openEventEditor(parseInt(this.dataset.cardPage), this.dataset.evDate, e);
});
});
}
// ── v5.8.0: event editor popover (Repeat + Remind + time) ──
function openEventEditor(pageId, evDate, mouseEvt) {
var cp = pageById(pageId); var dp = dateProp();
if (!cp || !dp) return;
if (!state.zones) {
fetch('/db/timezones/api', {credentials:'same-origin'}).then(function(r){return r.ok?r.json():{zones:[]};})
.then(function(d){ state.zones = d.zones || []; }).catch(function(){});
}
var old = document.querySelector('.db-event-pop'); if (old) old.remove();
var pid = String(dp.id);
var rec = (metaOf(cp, '__recurrence__') || {})[pid] || null;
var rem = (metaOf(cp, '__reminder__') || {})[pid] || null;
var baseVal = String(pageVal(cp, dp) || '');
var curTime = baseVal.length >= 16 ? baseVal.slice(11,16) : '';
var pop = document.createElement('div');
pop.className = 'db-event-pop';
var freq = rec ? rec.freq : '';
var curTz = ((metaOf(cp, '__timezone__') || {})[pid]) || '';
var h = '
'+escHtml(cp.title||'Untitled')+'
';
h += '';
h += '';
h += '';
if (freq) {
h += '';
h += '';
if (rec.count != null) h += '';
if (rec.until) h += '';
}
h += '';
h += '';
h += '';
pop.innerHTML = h;
document.body.appendChild(pop);
if (mouseEvt) {
pop.style.left = Math.min(mouseEvt.clientX, window.innerWidth-300)+'px';
pop.style.top = Math.min(mouseEvt.clientY, window.innerHeight-320)+'px';
} else { pop.style.left='50%'; pop.style.top='120px'; }
var freqSel = pop.querySelector('[data-ev-freq]');
function collectDraft() {
var draft = rec ? Object.assign({}, rec) : {};
draft.freq = freqSel.value;
var iv = pop.querySelector('[data-ev-interval]');
if (iv) draft.interval = parseInt(iv.value)||1;
if (!pop.querySelector('[data-ev-interval]')) draft.interval = draft.interval || 1;
var em = pop.querySelector('[data-ev-endmode]');
if (em) {
if (em.value === 'count') { var c=pop.querySelector('[data-ev-count]'); draft.count = c ? (parseInt(c.value)||null) : null; draft.until = null; }
else if (em.value === 'until') { var u=pop.querySelector('[data-ev-until]'); draft.until = (u&&u.value) ? u.value : null; draft.count = null; }
else { draft.count = null; draft.until = null; }
}
if (!draft.freq) return null;
return draft;
}
freqSel.onchange = function(){
// re-open to reveal/hide detail rows, keeping the in-place edits
setMeta(cp, '__recurrence__', dp.id, collectDraft());
rec = (metaOf(cp, '__recurrence__') || {})[pid] || null;
pop.remove();
openEventEditor(pageId, evDate, mouseEvt);
};
var endSel = pop.querySelector('[data-ev-endmode]');
if (endSel) endSel.onchange = function(){
setMeta(cp, '__recurrence__', dp.id, collectDraft());
rec = (metaOf(cp, '__recurrence__') || {})[pid] || null;
pop.remove();
openEventEditor(pageId, evDate, mouseEvt);
};
pop.querySelector('[data-ev-save]').onclick = function(){
var base = (baseVal.slice(0,10)) || evDate || isoDay(new Date());
var t = pop.querySelector('[data-ev-time]').value;
var recDraft = collectDraft();
var tzVal = pop.querySelector('[data-ev-tz]').value;
var unit = pop.querySelector('[data-ev-remunit]').value;
var val = parseInt(pop.querySelector('[data-ev-remval]').value)||0;
setPageVal(cp, dp, t && base ? (base+'T'+t) : base);
setMeta(cp, '__recurrence__', dp.id, recDraft);
setMeta(cp, '__timezone__', dp.id, tzVal || null);
setMeta(cp, '__reminder__', dp.id, unit==='none'?null:{value:val||1, unit:unit});
pop.remove(); render(); savePage(cp);
};
setTimeout(function(){
document.addEventListener('click', function onDoc(e){ if (!pop.contains(e.target)) { pop.remove(); document.removeEventListener('click', onDoc); } }, {once:true});
}, 0);
}
// ── Gallery view ──
function renderGallery() {
var size = state.viewConfig.card_size || 'medium';
var h = '
';
state.pages.forEach(function(cp){ h += cardHtml(cp); });
h += '
+ New
';
h += '
';
return h;
}
// ── List view ──
function renderList() {
var cols = state.viewConfig.visible_properties;
var props;
if (Array.isArray(cols) && cols.length) props = cols.map(findProp).filter(Boolean);
else props = state.properties.filter(function(p){ return p.prop_type !== 'title'; }).slice(0,3);
var h = '
';
state.pages.forEach(function(cp){
h += '
';
h += ''+escHtml(cp.icon&&cp.icon!=='file'?cp.icon:'📄')+'';
h += ''+escHtml(cp.title||'Untitled')+'';
props.forEach(function(p){ h += ''+escHtml(textValue(p, pageVal(cp,p)).slice(0,40))+''; });
h += '
';
});
h += '
';
return h;
}
// ── Event binding ──
function bindEvents() {
bindViewBar();
containerEl.querySelectorAll('.db-cell-content').forEach(function(el){
el.onclick = function(e){
if (state.editingCell || e.target.closest('.db-open-btn') || e.target.closest('a')) return;
startEditCell(parseInt(this.dataset.pageId), parseInt(this.dataset.propId), this);
};
});
containerEl.querySelectorAll('.db-open-page-btn').forEach(function(btn){
btn.onclick = function(e){ e.stopPropagation(); openPageInSidePeek(parseInt(this.dataset.pageId)); };
});
containerEl.querySelectorAll('.db-ai-fill-btn').forEach(function(btn){
btn.onclick = function(e){ e.stopPropagation(); aiFillRow(parseInt(this.dataset.pageId)); };
});
containerEl.querySelectorAll('.db-row').forEach(function(row){
row.onmouseenter = function(){ this.querySelectorAll('.db-hover-only').forEach(function(el){ el.style.visibility='visible'; }); };
row.onmouseleave = function(){ this.querySelectorAll('.db-hover-only').forEach(function(el){ el.style.visibility='hidden'; }); };
});
containerEl.querySelectorAll('.db-th-content').forEach(function(el){
el.onclick = function(e){ e.stopPropagation(); showColMenu(parseInt(this.dataset.propId), this.dataset.propType, this.dataset.propName, this); };
});
containerEl.querySelectorAll('.db-col-resize-handle').forEach(bindResize);
var addProp = containerEl.querySelector('.db-show-prop-modal-btn');
if (addProp) addProp.onclick = showPropModal;
// property group collapse
containerEl.querySelectorAll('[data-group-toggle]').forEach(function(el){
el.onclick = function(){
var gi = parseInt(this.dataset.groupToggle);
state.collapsedGroups[gi] = !state.collapsedGroups[gi];
render();
};
});
// open cards / rows
containerEl.querySelectorAll('[data-card-page]').forEach(function(el){
el.addEventListener('click', function(e){
if (e.target.closest('[data-add-col]')) return;
openPageInSidePeek(parseInt(this.dataset.cardPage));
});
el.addEventListener('dragstart', function(e){
e.dataTransfer.setData('text/plain', this.dataset.cardPage);
this.classList.add('dragging');
});
el.addEventListener('dragend', function(){ this.classList.remove('dragging'); });
});
// board drop targets
containerEl.querySelectorAll('[data-drop-col]').forEach(function(zone){
zone.addEventListener('dragover', function(e){ e.preventDefault(); this.classList.add('drop-target'); });
zone.addEventListener('dragleave', function(){ this.classList.remove('drop-target'); });
zone.addEventListener('drop', function(e){
e.preventDefault(); this.classList.remove('drop-target');
var pid = parseInt(e.dataTransfer.getData('text/plain'));
var cp = pageById(pid); var g = groupProp();
if (!cp || !g) return;
var key = this.dataset.dropCol;
var val = key === '__none__' ? '' : key;
if (g.prop_type === 'person') {
var m = (state.members||[]).filter(function(x){ return (x.login||x.full_name) === key; })[0];
val = m ? [m] : [];
} else if (g.prop_type === 'multi_select') {
val = key === '__none__' ? [] : [key];
}
setPageVal(cp, g, val); render();
savePage(cp);
});
});
// board add card
containerEl.querySelectorAll('[data-add-col]').forEach(function(b){
b.onclick = function(e){ e.stopPropagation(); addNewPage(this.dataset.addCol); };
});
// calendar nav (v5.8.0: mode-aware)
function stepCursor(dir) {
var c = state.calCursor;
if (calMode() === 'month') state.calCursor = new Date(c.getFullYear(), c.getMonth()+dir, 1);
else if (calMode() === 'week') { var w = new Date(c); w.setDate(w.getDate()+7*dir); state.calCursor = w; }
else { var d = new Date(c); d.setDate(d.getDate()+dir); state.calCursor = d; }
render();
}
var prev = containerEl.querySelector('[data-cal-prev]');
if (prev) prev.onclick = function(){ stepCursor(-1); };
var next = containerEl.querySelector('[data-cal-next]');
if (next) next.onclick = function(){ stepCursor(1); };
var today = containerEl.querySelector('[data-cal-today]');
if (today) today.onclick = function(){ state.calCursor = new Date(); render(); };
containerEl.querySelectorAll('[data-cal-mode]').forEach(function(b){
b.onclick = function(){
var m = this.dataset.calMode;
if (m !== calMode()) { persistConfig({calendar_mode: m}, {silent:true}); render(); }
};
});
if (state.viewType === 'calendar' && containerEl.querySelector('#db-cal-body')) refreshCalendar();
var galAdd = containerEl.querySelector('[data-gallery-add]');
if (galAdd) galAdd.onclick = function(){ addNewPage(); };
}
function bindResize(handle) {
handle.onpointerdown = function(e) {
e.preventDefault(); e.stopPropagation();
var propId = parseInt(this.dataset.propId);
var th = this.parentElement;
var thLeft = th.getBoundingClientRect().left;
function onMove(ev) {
var newW = Math.max(60, ev.clientX - thLeft);
state.colWidths[propId] = newW;
th.style.width = newW+'px'; th.style.minWidth = newW+'px';
var colIdx = state.properties.findIndex(function(p){ return p.id === propId; });
if (colIdx >= 0) containerEl.querySelectorAll('.db-row').forEach(function(row){
var cells = row.querySelectorAll('.db-td-cell');
if (cells[colIdx]) cells[colIdx].style.minWidth = newW+'px';
});
}
function onUp() { document.removeEventListener('pointermove',onMove); document.removeEventListener('pointerup',onUp); document.body.style.cursor=''; document.body.style.userSelect=''; }
document.body.style.cursor='col-resize'; document.body.style.userSelect='none';
document.addEventListener('pointermove',onMove); document.addEventListener('pointerup',onUp);
};
}
// ── Cell editing ──
function startEditCell(pageId, propId, cellEl) {
var cp = pageById(pageId);
var prop = propsById()[String(propId)];
if (!cp || !prop || READONLY_TYPES.indexOf(prop.prop_type) >= 0) return;
var val = pageVal(cp, prop);
var t = prop.prop_type;
if (t === 'person') { openPersonPicker(cellEl, cp, prop); return; }
var input;
cellEl.innerHTML = ''; cellEl.classList.add('db-cell-editing');
if (t === 'checkbox') {
setPageVal(cp, prop, !val); render(); savePage(cp); return;
} else if (t === 'select' || t === 'status') {
input = document.createElement('select'); input.className = 'db-cell-input';
input.innerHTML = '' + parseOpts(prop).map(function(o){ return ''+escHtml(o.name)+''; }).join('');
} else if (t === 'date') {
input = document.createElement('input'); input.type = 'date'; input.className = 'db-cell-input';
input.value = val ? String(val).slice(0,10) : '';
} else if (t === 'number') {
input = document.createElement('input'); input.type = 'number'; input.className = 'db-cell-input'; input.value = val==null?'':val;
} else {
input = document.createElement('input'); input.type = 'text'; input.className = 'db-cell-input'; input.value = textValue(prop, val);
}
cellEl.appendChild(input); input.focus();
if (input.select) input.select();
state.editingCell = {pageId:pageId, propId:propId, input:input, cellEl:cellEl, prop:prop};
input.onkeydown = function(e){ if (e.key === 'Enter') commitEditCell(); else if (e.key === 'Escape') cancelEditCell(); };
input.onblur = function(){ commitEditCell(); };
}
function commitEditCell() {
if (!state.editingCell) return;
var ed = state.editingCell; state.editingCell = null;
var cp = pageById(ed.pageId); var prop = ed.prop;
var val = ed.input.value;
if (prop.prop_type === 'multi_select') val = val ? val.split(',').map(function(s){ return s.trim(); }).filter(Boolean) : [];
if (prop.prop_type === 'number' && val !== '') val = Number(val);
if (prop.prop_type === 'checkbox') val = !!val;
setPageVal(cp, prop, val);
render();
savePage(cp, ed.cellEl);
}
function cancelEditCell() { state.editingCell = null; render(); }
function openPersonPicker(cellEl, cp, prop) {
var old = document.querySelector('.db-person-picker'); if (old) old.remove();
var cur = pageVal(cp, prop); if (!Array.isArray(cur)) cur = [];
var menu = document.createElement('div');
menu.className = 'db-person-picker';
menu.innerHTML = (state.members||[]).map(function(m){
var checked = cur.some(function(x){ return String(x.id) === String(m.id); });
return '
';
optionColumns(g).forEach(function(col){
if (col.key === '__none__') return;
var lim = (state.viewConfig.wip_limits||{})[col.key] || '';
h += '';
});
h += '
Card properties
';
state.properties.filter(function(p){ return p.prop_type!=='title'; }).forEach(function(p){
var on = (state.viewConfig.card_properties||defaultCardProps()).some(function(x){ return String(x)===String(p.id); });
h += ''+escHtml(p.name)+'';
});
h += '
';
state.properties.filter(function(p){ return p.prop_type!=='title'; }).forEach(function(p){
var on = (state.viewConfig.card_properties||defaultCardProps()).some(function(x){ return String(x)===String(p.id); });
h += ''+escHtml(p.name)+'';
});
h += '
';
} else if (t === 'table') {
h += '
Assign properties to collapsible groups. Group headers appear above the table.
';
state.properties.forEach(function(p){
h += '';
});
} else {
h += '
List uses the first properties. Configure card properties in a Board or Gallery view.
';
}
h += '';
h += '
⧉ Duplicate view
';
h += '
🗑 Delete view
';
var pop = openPop(anchor, h);
// Wire name
var nameInput = pop.querySelector('[data-pop-name]');
if (nameInput) nameInput.onchange = function(){ if (v) { persistConfig({}, {name:this.value, silent:true}); render(); } };
// Wire selects / inputs
pop.querySelectorAll('[data-pop-field]').forEach(function(el){
el.onchange = function(){
var patch = {}; patch[this.dataset.popField] = this.value; persistConfig(patch);
};
});
pop.querySelectorAll('[data-wip]').forEach(function(el){
el.onchange = function(){
var limits = Object.assign({}, state.viewConfig.wip_limits || {});
if (this.value === '') delete limits[this.dataset.wip]; else limits[this.dataset.wip] = Number(this.value);
persistConfig({wip_limits: limits});
};
});
pop.querySelectorAll('[data-cardprop]').forEach(function(el){
el.onclick = function(){
var arr = (state.viewConfig.card_properties || defaultCardProps()).slice();
var id = Number(this.dataset.cardprop);
var idx = arr.findIndex(function(x){ return String(x)===String(id); });
if (idx >= 0) arr.splice(idx,1); else arr.push(id);
persistConfig({card_properties: arr});
};
});
pop.querySelectorAll('[data-groupassign]').forEach(function(el){
el.onchange = function(){
fetch('/db/properties/'+this.dataset.groupassign+'/api', {method:'PUT', headers:{'Content-Type':'application/json','X-CSRF-Token':getCsrf()}, body: JSON.stringify({group_name:this.value.trim()})})
.then(function(){ var p = findProp(this.dataset.groupassign); if (p) p.group_name = this.value.trim(); }.bind(this))
.then(function(){ render(); });
};
});
pop.querySelectorAll('[data-pop-action]').forEach(function(el){
el.onclick = function(){
var act = this.dataset.popAction; pop.remove();
if (act === 'duplicate' && v) {
fetch('/db/views/'+v.id+'/duplicate', {method:'POST', headers:{'Content-Type':'application/json','X-CSRF-Token':getCsrf()}, body:'{}'})
.then(function(r){ return r.json(); })
.then(function(d){ if (d.id) { state.views.push(d); applyView(d); render(); } });
} else if (act === 'delete' && v) {
if (!confirm('Delete this view?')) return;
fetch('/db/views/'+v.id+'/api', {method:'DELETE', headers:{'X-CSRF-Token':getCsrf()}}).then(function(){
state.views = state.views.filter(function(x){ return x.id !== v.id; });
applyView(state.views[0] || null); render();
});
}
};
});
}
function openAddViewMenu(anchor) {
var h = '
Add a view
';
['table','board','calendar','gallery','list'].forEach(function(t){
h += '
';
});
var pop = openPop(anchor, h);
pop.querySelectorAll('[data-addview]').forEach(function(el){
el.onclick = function(){
var t = this.dataset.addview; pop.remove();
fetch('/db/'+collectionId+'/views/save-as', {method:'POST', headers:{'Content-Type':'application/json','X-CSRF-Token':getCsrf()}, body: JSON.stringify({name:t.charAt(0).toUpperCase()+t.slice(1), view_type:t, config:{}})})
.then(function(r){ return r.json(); })
.then(function(d){ if (d.id) { state.views.push(d); applyView(d); render(); } });
};
});
}
// ── Init ──
function loadMembers() {
if (state.members) return Promise.resolve(state.members);
return fetch('/db/'+collectionId+'/members/api').then(function(r){ return r.json(); }).then(function(d){ state.members = (d && d.members) || []; return state.members; }).catch(function(){ state.members = []; });
}
if (!initialData) {
fetch('/api/collections/'+collectionId+'/table-data').then(function(r){ return r.json(); }).then(function(d){
state.collection = d.collection || {}; state.properties = d.properties || []; state.pages = d.pages || []; state.views = d.views || [];
ensureView().then(loadMembers).then(render);
}).catch(function(e){ console.error('[DB] load error:', e); });
} else {
ensureView().then(loadMembers).then(render);
}
}
// ── Global API ──
window.FlowDeckDB = {
/** Render a database table into a container element. */
renderInto: function(containerEl, collectionId, initialData) {
new DBInstance(containerEl, collectionId, initialData);
}
};
// ── Full-page init (when page_editor_collection.html is used) ──
var PAGE_COLLECTION_ID = window.__DB_COLLECTION_ID || 0;
if (PAGE_COLLECTION_ID > 0) {
var container = document.getElementById('db-table-container');
if (container) {
new DBInstance(container, PAGE_COLLECTION_ID, DB_CONFIG);
}
}
// ── Side peek : panneau latéral des lignes de base (vanilla JS) ──
// Le panneau vit dans _database_table.html (page de base). Une base
// EMBARQUÉE dans un document n'a pas ce markup : on le crée à la demande
// (comme mt-peek de My Tasks), sinon l'icône Open de fin de ligne était
// un no-op silencieux. Il doit être câblé SUR le document, jamais via
// container.__x : le conteneur n'a pas de x-data.
var PEEK_HTML =
'' +
'
' +
'' +
'' +
'' +
'
' +
'
' +
'
Chargement…
' +
'' +
'
';
function ensureDbPeek() {
var p = document.getElementById('db-side-peek');
if (p) return p;
p = document.createElement('div');
p.id = 'db-side-peek';
p.className = 'db-side-peek';
p.innerHTML = PEEK_HTML;
document.body.appendChild(p);
document.getElementById('db-side-peek-close').addEventListener('click', closeDbPeek);
document.getElementById('db-side-peek-full').addEventListener('click', function () {
var f = document.getElementById('db-side-peek-iframe');
// `dataset.page` et non `iframe.src` : le src porte `?embed=1`,
// la pleine page doit garder sa sidebar et sa barre.
if (f && f.dataset.page) window.location.href = '/pages/' + f.dataset.page;
});
if (window.fdWirePeekResize) window.fdWirePeekResize(p, p.querySelector('.peek-resize-handle'), closeDbPeek);
return p;
}
function closeDbPeek() {
var p = document.getElementById('db-side-peek');
if (!p) return;
p.classList.remove('open');
document.getElementById('db-side-peek-iframe').src='about:blank';
var t = document.getElementById('db-side-peek-title');
if (t) t.textContent = '';
}
window.openPageInSidePeek = function(pageId) {
if (!pageId) return;
var peekEl = ensureDbPeek();
var peekFrame = document.getElementById('db-side-peek-iframe');
var peekTitle = document.getElementById('db-side-peek-title');
var peekLoading = document.getElementById('db-side-peek-loading');
peekEl.classList.add('open');
if (peekLoading) peekLoading.style.display = '';
if (peekFrame) peekFrame.src = 'about:blank';
if (peekTitle) peekTitle.textContent = '';
resolveRowContentPage(pageId).then(function(pid){
if (!peekEl.classList.contains('open')) return;
if (peekLoading) peekLoading.style.display = 'none';
// `?embed=1` : uniquement le document edite, pas l'habillage
// (sidebar + barre) — la pleine page reste via le bouton « full ».
if (peekFrame) { peekFrame.dataset.page = pid; peekFrame.src = '/pages/'+pid+'?embed=1'; }
})
.catch(function(){
// L'échec est rendu DANS le panneau (srcdoc) : sous le build
// CSP d'Alpine les toasts ne s'affichent pas partout.
if (peekFrame) {
peekFrame.srcdoc = '
Impossible d’ouvrir le contenu de cette ligne
';
}
peekEl.classList.add('open');
toast('Impossible d’ouvrir le contenu de cette ligne', 'error');
});
};
document.addEventListener('keydown', function(e) {
var p = document.getElementById('db-side-peek');
if (e.key === 'Escape' && p && p.classList.contains('open')) closeDbPeek();
});
document.addEventListener('pointerdown', function(e) {
var p = document.getElementById('db-side-peek');
if (!p || !p.classList.contains('open')) return;
if (p.contains(e.target)) return;
if (e.target.closest('#db-table-container, .database-table-container, [id^="inline-db-"]')) return;
closeDbPeek();
});
function resolveRowContentPage(rowId){
return fetch('/db/pages/'+rowId+'/open/api')
.then(function(r){
if (!r.ok) throw new Error('HTTP ' + r.status);
return r.json();
})
.then(function(d){
if (!d || !d.page_id) throw new Error('page de contenu introuvable');
return d.page_id;
});
}
})();
}