';
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;
}
// ── Vues Notion : helpers partagés ──
function numOf(v) { var n = Number(v); return isFinite(n) ? n : null; }
function localAggregate(spec) {
spec = spec || {};
var gprop = findProp(spec.group_by) || null;
var sprop = spec.sub_group_by ? findProp(spec.sub_group_by) : null;
var kind = (spec.measure && spec.measure.kind) || 'count';
var mprop = (spec.measure && spec.measure.property) ? findProp(spec.measure.property) : null;
var hidden = {}; (spec.hidden_groups || []).forEach(function(k){ hidden[k] = 1; });
function mvals(members) {
var out = [];
members.forEach(function(cp){
if (!mprop) { out.push(1); return; }
var n = numOf(pageVal(cp, mprop));
if (n !== null) out.push(n);
});
return out;
}
function reduce(vals, count) {
if (kind === 'count') return count;
if (!vals.length) return 0;
if (kind === 'sum') return vals.reduce(function(a,b){ return a+b; }, 0);
if (kind === 'average' || kind === 'avg') return vals.reduce(function(a,b){ return a+b; }, 0) / vals.length;
if (kind === 'median') { var s = vals.slice().sort(function(a,b){ return a-b; }); var m = Math.floor(s.length/2); return s.length % 2 ? s[m] : (s[m-1]+s[m])/2; }
if (kind === 'min') return Math.min.apply(null, vals);
if (kind === 'max') return Math.max.apply(null, vals);
return count;
}
var buckets = {};
state.pages.forEach(function(cp){
var key;
if (!gprop) key = 'All';
else if (gprop.prop_type === 'multi_select') {
var arr = pageVal(cp, gprop);
(Array.isArray(arr) && arr.length ? arr : ['(empty)']).forEach(function(k){
k = String(k || '(empty)');
(buckets[k] = buckets[k] || []).push(cp);
});
return;
} else {
var t = textValue(gprop, pageVal(cp, gprop));
key = t ? String(t) : '(empty)';
}
(buckets[key] = buckets[key] || []).push(cp);
});
if (gprop && !spec.omit_zero && (gprop.prop_type === 'select' || gprop.prop_type === 'status')) {
parseOpts(gprop).forEach(function(o){ if (!buckets[o.name]) buckets[o.name] = []; });
}
var orderBy = (spec.order && spec.order.by) || spec.group_order || 'group_order';
var schemaOrder = gprop ? parseOpts(gprop).map(function(o){ return o.name; }) : [];
var keys = Object.keys(buckets);
keys.sort(function(a, b){
if (orderBy === 'value') return reduce(mvals(buckets[b]), buckets[b].length) - reduce(mvals(buckets[a]), buckets[a].length);
if (orderBy === 'label') return a.toLowerCase() < b.toLowerCase() ? -1 : 1;
var ia = schemaOrder.indexOf(a), ib = schemaOrder.indexOf(b);
if (ia >= 0 || ib >= 0) return (ia < 0 ? 999 : ia) - (ib < 0 ? 999 : ib);
return a.toLowerCase() < b.toLowerCase() ? -1 : 1;
});
if (String((spec.order && spec.order.direction) || '').toLowerCase() === 'desc') keys = keys.reverse();
var truncated = keys.length > 200;
keys = keys.slice(0, 200);
var groups = [], running = 0;
keys.forEach(function(k){
if (hidden[k]) return;
if (state.chartHidden && state.chartHidden[k]) return;
var members = buckets[k];
var v = reduce(mvals(members), members.length);
if (spec.cumulative && (kind === 'count' || kind === 'sum')) { running += v; v = running; }
var sub = [];
if (sprop) {
var sb = {};
members.forEach(function(cp){
var sk = textValue(sprop, pageVal(cp, sprop)) || '(empty)';
(sb[sk] = sb[sk] || []).push(cp);
});
Object.keys(sb).slice(0, 50).forEach(function(sk){
sub.push({key: sk, label: sk, value: reduce(mvals(sb[sk]), sb[sk].length)});
});
sub.sort(function(a,b){ return b.value - a.value; });
}
groups.push({key: k, label: k, color: gprop ? optColor(gprop, k) : '#8b8b8b', value: v, count: members.length,
row_ids: members.slice(0, 500).map(function(p){ return p.id; }), sub: sub});
});
var total = reduce(mvals(state.pages), state.pages.length);
var grand = groups.reduce(function(a,g){ return a + g.value; }, 0) || 1;
groups.forEach(function(g){ g.percent = g.value / grand; });
return {groups: groups, total: total, truncated: truncated, scanned: state.pages.length};
}
function fmtNum(v) {
if (v === null || v === undefined || isNaN(v)) return '—';
var a = Math.abs(v);
if (a >= 1e9) return (v/1e9).toFixed(2)+'B';
if (a >= 1e6) return (v/1e6).toFixed(2)+'M';
if (a >= 1e3) return (v/1e3).toFixed(1)+'K';
if (v === Math.round(v)) return String(Math.round(v));
return String(Math.round(v*100)/100);
}
function fmtPct(p) { return (Math.round(p*1000)/10)+'%'; }
// ── Vue Map (Leaflet, cadrage auto, plafond 100, Map by) ──
function placeProp() { return findProp(state.viewConfig.place_property) || firstPropOfTypes(['place']); }
function placeCoords(val) {
if (!val) return null;
if (typeof val === 'string') {
var m = val.match(/(-?\d+(?:\.\d+)?)\s*[,;]\s*(-?\d+(?:\.\d+)?)/);
if (m) { var la = Number(m[1]), ln = Number(m[2]);
if (la >= -90 && la <= 90 && ln >= -180 && ln <= 180) return {lat: la, lng: ln, label: val}; }
return null;
}
if (typeof val === 'object' && val.lat !== null && val.lat !== undefined && val.lat !== '' && val.lng !== null && val.lng !== undefined && val.lng !== '') {
var la2 = Number(val.lat), ln2 = Number(val.lng);
if (isFinite(la2) && isFinite(ln2)) return {lat: la2, lng: ln2, label: val.name || val.address || ''};
}
return null;
}
function renderMap() {
var pp = placeProp();
if (!pp) return '
This view needs a Place property.
';
var pts = [], nores = 0;
state.pages.forEach(function(cp){
var v = pageVal(cp, pp);
if (v === undefined || v === null || v === '') { nores++; return; }
var c = placeCoords(v);
if (c) pts.push({cp: cp, lat: c.lat, lng: c.lng, label: c.label});
else nores++;
});
var over = pts.length > 100;
var shown = pts.slice(0, 100);
var h = '
';
h += '
';
h += '';
h += ''+pts.length+' places · '+shown.length+' shown'+(nores ? ' · '+nores+' without coordinates' : '')+'';
h += '
';
if (over) h += '
'+pts.length+' places — only the first 100 are shown. Refine filters.
';
else if (mode === 'edit') h += '';
if (!widgets.length) {
h += '
';
h += '';
h += '';
h += '';
h += '
';
h += '
';
return h;
}
// Grille : lignes de 4 widgets max.
var rows = [];
widgets.forEach(function(w, i){ var r = Math.floor(i/4); (rows[r] = rows[r] || []).push({w: w, i: i}); });
rows.forEach(function(row){
h += '
';
row.forEach(function(cell){
var w = cell.w;
var title = escHtml(w.title || ('Widget '+(cell.i+1)));
h += '';
h += '≡'+title+'';
if (mode === 'edit') h += '';
else h += '';
h += '
Loading…
';
});
h += '
';
});
if (mode === 'edit' && widgets.length < 12) h += '';
h += '';
return h;
}
function dashFetchWidgets() {
var v = activeView();
if (!v) { state.dashWidgets = []; return Promise.resolve(); }
return fetch('/db/'+collectionId+'/views/'+v.id+'/widgets', {credentials:'same-origin'})
.then(function(r){ return r.ok ? r.json() : {widgets: []}; })
.then(function(d){
var ws = (d.widgets || []).map(function(w, i){ w._lid = w.id || ('l'+i); return w; });
if (!ws.length && state.viewConfig.widgets_json) {
try { var arr = typeof state.viewConfig.widgets_json === 'string' ? JSON.parse(state.viewConfig.widgets_json) : state.viewConfig.widgets_json;
ws = (arr || []).map(function(w, i){ w._lid = w.id || ('l'+i); return w; }); } catch (e) {}
}
state.dashWidgets = ws;
}).catch(function(){ state.dashWidgets = []; });
}
function dashWidgetData(w) {
var srcCid = w.source_collection_id || collectionId;
var inline = w.inline_config || {};
try { if (typeof w.inline_config_json === 'string') inline = JSON.parse(w.inline_config_json); } catch (e) {}
var gf = state.viewConfig.global_filters || [];
// Filtres globaux : par nom de propriété, ignorés si absents de la source.
function applyGlobal(rows, props) {
var names = {}; props.forEach(function(p){ names[p.name] = p; });
var extra = gf.filter(function(f){ return names[f.property]; });
if (!extra.length) return rows;
return rows.filter(function(cp){
return extra.every(function(f){
var p = names[f.property];
var t = textValue(p, pageVal(cp, p)).toLowerCase();
var ev = Array.isArray(f.value) ? f.value.join(' ').toLowerCase() : String(f.value == null ? '' : f.value).toLowerCase();
if ((f.operator||'is') === 'contains') return t.indexOf(ev) >= 0;
return t === ev;
});
});
}
if (w.source_view_id && !inline.view_type) {
return fetch('/db/'+srcCid+'/views/'+w.source_view_id+'/rows?limit=50', {credentials:'same-origin'})
.then(function(r){ return r.json(); }).then(function(d){ return {kind:'rows', rows:(d.rows||[])}; })
.catch(function(){ return {kind:'rows', rows:[]}; });
}
return fetch('/api/collections/'+srcCid+'/table-data', {credentials:'same-origin'})
.then(function(r){ return r.ok ? r.json() : null; })
.then(function(d){
if (!d) return {kind:'rows', rows:[]};
var props = d.properties || [], pages = d.pages || [];
var rows = applyGlobal(pages, props);
var vt = inline.view_type || 'table';
if (vt === 'chart' || inline.group_by) {
var gprop = props.filter(function(p){ return p.name === inline.group_by; })[0];
var bk = {};
rows.forEach(function(cp){
var pv = {}; try { pv = JSON.parse(cp.property_values_json || '{}'); } catch (e) {}
var vv = gprop ? (pv[String(gprop.id)] != null ? pv[String(gprop.id)] : pv[gprop.name]) : cp.title;
var k = (vv === undefined || vv === null || vv === '') ? '(empty)' : String(Array.isArray(vv) ? (vv[0]||'(empty)') : vv);
(bk[k] = bk[k] || []).push(cp);
});
var groups = Object.keys(bk).map(function(k){ return {label: k, value: bk[k].length, count: bk[k].length, color: '#2383E2'}; });
return {kind:'agg', groups: groups, total: rows.length};
}
return {kind:'rows', rows: rows.slice(0, 50), total: rows.length, props: props};
}).catch(function(){ return {kind:'rows', rows:[]}; });
}
function bindDashboard() {
(state.dashWidgets || []).forEach(function(w){
var slot = containerEl.querySelector('[data-dash-body="'+w._lid+'"]');
if (!slot) return;
dashWidgetData(w).then(function(d){
if (!slot.isConnected) return;
if (d.kind === 'agg') {
var max = Math.max.apply(null, d.groups.map(function(g){ return g.value; }).concat([1]));
slot.innerHTML = '
';
slot.querySelectorAll('[data-card-page]').forEach(function(el){ el.onclick = function(){ openPageInSidePeek(parseInt(el.getAttribute('data-card-page'))); }; });
}
});
});
}
// ── Vue Form + Form builder (questions ↔ propriétés, partage, preview) ──
function renderForm() {
var c = state.viewConfig || {};
var qs = state.formQs || [];
var sharing = c.sharing || {audience:'workspace'};
var scopeTxt = sharing.audience === 'web' ? 'Anyone on the web with the link can fill out this form.' : sharing.audience === 'closed' ? 'This form is closed — nobody can fill it out.' : 'Only members of this workspace can fill out this form.';
var h = '