forked from fixin.me/fixin.me
Add wide view and inline editing to Measurements page
The Measurements page gains a compact/wide view toggle (persisted in localStorage). The wide view is a pivot table: rows = time points, columns = quantity names (alphabetical), cells = value + delete button. Clicking a value in either view opens an inline edit panel (Turbo Stream) without leaving the page. The panel shows the quantity name, value input, unit selector, taken_at picker, and Update/Cancel buttons. Changes: - MeasurementsController: add edit/update actions; order by taken_at desc - measurements/index: compact table + wide container, view-toggle buttons - measurements/_readout: data-* attributes for JS pivot builder; edit link - measurements/_edit_panel, _edit_form, _edit_form_close, edit.turbo_stream, update.turbo_stream: inline edit views - application.js: groupMeasurements, buildWideTable (alphabetical cols), getMeasurementsView / setMeasurementsView, editMeasurementWide, readoutUnitChanged, setDefaultUnit - application.css: compact/wide visibility rules, .wide-cell flex layout, button.link reset, .items-table .form td alignment - Pictograms: view-rows.svg, view-columns.svg (view-toggle icons) - Locale: view_compact/view_wide toggle labels, edit link, update.success - Tests: system tests for compact inline edit and wide view edit panel Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -9,6 +9,143 @@ function showPage(event) {
|
||||
}
|
||||
document.addEventListener('turbo:load', showPage)
|
||||
|
||||
function groupMeasurements() {
|
||||
var tbody = document.getElementById('measurements');
|
||||
if (!tbody) return;
|
||||
var prevTakenAt = null;
|
||||
Array.from(tbody.querySelectorAll('tr[data-taken-at]'))
|
||||
.filter(function(row) { return row.style.display !== 'none' })
|
||||
.forEach(function(row) {
|
||||
var takenAt = row.dataset.takenAt;
|
||||
row.classList.toggle('grouped', takenAt !== null && takenAt === prevTakenAt);
|
||||
prevTakenAt = takenAt;
|
||||
});
|
||||
}
|
||||
|
||||
function buildWideTable() {
|
||||
var tbody = document.getElementById('measurements');
|
||||
var wideContainer = document.getElementById('measurements-wide');
|
||||
if (!tbody || !wideContainer) return;
|
||||
|
||||
var rows = Array.from(tbody.querySelectorAll('tr[data-taken-at]'));
|
||||
|
||||
if (rows.length === 0) { wideContainer.innerHTML = ''; return; }
|
||||
|
||||
// Unique quantities in alphabetical order
|
||||
var qOrder = [], qSeen = new Set();
|
||||
rows.forEach(function(r) {
|
||||
var id = r.dataset.quantityId;
|
||||
if (id && !qSeen.has(id)) { qSeen.add(id); qOrder.push({id: id, name: r.dataset.quantityName}); }
|
||||
});
|
||||
qOrder.sort(function(a, b) { return a.name.localeCompare(b.name); });
|
||||
|
||||
// Group rows by taken_at, preserving order
|
||||
var groups = [], groupMap = new Map();
|
||||
rows.forEach(function(r) {
|
||||
var key = r.dataset.takenAt || '';
|
||||
if (!groupMap.has(key)) { var g = {rows: []}; groups.push(g); groupMap.set(key, g); }
|
||||
groupMap.get(key).rows.push(r);
|
||||
});
|
||||
|
||||
// Read column headers from compact thead
|
||||
var ths = document.querySelectorAll('.measurements-compact thead th');
|
||||
var takenAtHeader = ths[3] ? ths[3].textContent : '';
|
||||
var createdAtHeader = ths[4] ? ths[4].textContent : '';
|
||||
|
||||
var table = document.createElement('table');
|
||||
table.className = 'items-table';
|
||||
|
||||
// Header
|
||||
var thead = table.createTHead();
|
||||
var hrow = thead.insertRow();
|
||||
[takenAtHeader].concat(qOrder.map(function(q) { return q.name; })).concat([createdAtHeader]).forEach(function(text) {
|
||||
var th = document.createElement('th');
|
||||
th.textContent = text;
|
||||
hrow.appendChild(th);
|
||||
});
|
||||
|
||||
// Body
|
||||
var tbodyEl = table.createTBody();
|
||||
groups.forEach(function(group) {
|
||||
var tr = tbodyEl.insertRow();
|
||||
|
||||
// Taken at
|
||||
var tdTime = tr.insertCell();
|
||||
var takenAtEl = group.rows[0].querySelector('.taken-at');
|
||||
tdTime.textContent = takenAtEl ? takenAtEl.textContent : '';
|
||||
|
||||
// One cell per quantity
|
||||
qOrder.forEach(function(q) {
|
||||
var td = tr.insertCell();
|
||||
var readoutRow = group.rows.find(function(r) { return r.dataset.quantityId === q.id; });
|
||||
if (readoutRow) {
|
||||
td.className = 'ralign';
|
||||
var wrap = document.createElement('span');
|
||||
wrap.className = 'wide-cell';
|
||||
var editLink = readoutRow.querySelector('a.link');
|
||||
if (editLink) {
|
||||
var editUrl = editLink.href + (editLink.href.includes('?') ? '&' : '?') + 'view=wide';
|
||||
var btn = document.createElement('button');
|
||||
btn.className = 'link';
|
||||
btn.type = 'button';
|
||||
btn.dataset.editUrl = editUrl;
|
||||
btn.addEventListener('click', function() { editMeasurementWide(this.dataset.editUrl); this.blur(); });
|
||||
btn.textContent = readoutRow.dataset.value;
|
||||
wrap.appendChild(btn);
|
||||
wrap.appendChild(document.createTextNode('\u00a0' + readoutRow.dataset.unit));
|
||||
} else {
|
||||
wrap.appendChild(document.createTextNode(readoutRow.dataset.value + '\u00a0' + readoutRow.dataset.unit));
|
||||
}
|
||||
var srcActions = readoutRow.querySelector('td.flex');
|
||||
if (srcActions) srcActions.querySelectorAll('form').forEach(function(f) {
|
||||
var cloned = f.cloneNode(true);
|
||||
var span = cloned.querySelector('button span');
|
||||
if (span) span.remove();
|
||||
wrap.appendChild(cloned);
|
||||
});
|
||||
td.appendChild(wrap);
|
||||
}
|
||||
});
|
||||
|
||||
// Created at (from first row of group)
|
||||
var tdCreated = tr.insertCell();
|
||||
var createdAtEl = group.rows[0].querySelector('.created-at');
|
||||
tdCreated.textContent = createdAtEl ? createdAtEl.textContent : '';
|
||||
});
|
||||
|
||||
wideContainer.innerHTML = '';
|
||||
wideContainer.appendChild(table);
|
||||
}
|
||||
|
||||
function getMeasurementsView() {
|
||||
return localStorage.getItem('measurements-view') || 'compact';
|
||||
}
|
||||
|
||||
function applyMeasurementsView(view) {
|
||||
document.body.dataset.measurementsView = view;
|
||||
if (view === 'wide') buildWideTable();
|
||||
}
|
||||
|
||||
function setMeasurementsView(view) {
|
||||
localStorage.setItem('measurements-view', view);
|
||||
applyMeasurementsView(view);
|
||||
}
|
||||
window.setMeasurementsView = setMeasurementsView
|
||||
|
||||
document.addEventListener('turbo:load', function() {
|
||||
var tbody = document.getElementById('measurements');
|
||||
if (!tbody) return;
|
||||
groupMeasurements();
|
||||
applyMeasurementsView(getMeasurementsView());
|
||||
new MutationObserver(function() {
|
||||
groupMeasurements();
|
||||
if (getMeasurementsView() === 'wide') buildWideTable();
|
||||
}).observe(tbody, {
|
||||
childList: true, subtree: true,
|
||||
attributes: true, attributeFilter: ['style']
|
||||
});
|
||||
})
|
||||
|
||||
function detailsChange(event) {
|
||||
var target = event.currentTarget
|
||||
var count = target.querySelectorAll('input:checked:not([disabled])').length
|
||||
@@ -37,6 +174,65 @@ window.detailsObserver = new MutationObserver((mutations) => {
|
||||
mutations[0].target.dispatchEvent(new Event('change', {bubbles: true}))
|
||||
});
|
||||
|
||||
function editMeasurementWide(url) {
|
||||
fetch(url, {
|
||||
headers: {
|
||||
'Accept': 'text/vnd.turbo-stream.html',
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(html => {
|
||||
Turbo.renderStreamMessage(html);
|
||||
requestAnimationFrame(() => {
|
||||
var panel = document.getElementById('measurement_edit_form');
|
||||
if (panel && panel.firstElementChild) {
|
||||
panel.scrollIntoView({behavior: 'smooth', block: 'nearest'});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
window.editMeasurementWide = editMeasurementWide
|
||||
|
||||
function readoutUnitChanged(select) {
|
||||
var button = select.closest('tr').querySelector('.set-default-unit');
|
||||
if (select.value && select.value !== select.dataset.defaultUnitId) {
|
||||
button.removeAttribute('disabled');
|
||||
button.removeAttribute('aria-disabled');
|
||||
button.removeAttribute('tabindex');
|
||||
} else {
|
||||
button.setAttribute('disabled', 'disabled');
|
||||
button.setAttribute('aria-disabled', 'true');
|
||||
button.setAttribute('tabindex', '-1');
|
||||
}
|
||||
}
|
||||
window.readoutUnitChanged = readoutUnitChanged
|
||||
|
||||
function setDefaultUnit(button) {
|
||||
var select = button.closest('tr').querySelector('select[data-default-unit-id]');
|
||||
var params = new URLSearchParams();
|
||||
params.append('quantity[default_unit_id]', select.value);
|
||||
|
||||
fetch(button.dataset.path, {
|
||||
body: params,
|
||||
headers: {
|
||||
'Accept': 'text/vnd.turbo-stream.html',
|
||||
'X-CSRF-Token': document.head.querySelector('meta[name=csrf-token]').content,
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
},
|
||||
method: 'PATCH'
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
select.dataset.defaultUnitId = select.value;
|
||||
readoutUnitChanged(select);
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then(html => Turbo.renderStreamMessage(html));
|
||||
}
|
||||
window.setDefaultUnit = setDefaultUnit
|
||||
|
||||
function formValidate(event) {
|
||||
var id = event.submitter.getAttribute("data-validate")
|
||||
if (!id) return;
|
||||
|
||||
Reference in New Issue
Block a user