Fix quantity ordered scope for SQLite: use pathname column instead of recursive CTE

SQLite's Arel visitor wraps CTE branches in extra parentheses, making
the UNION ALL inside recursive CTEs invalid. Also SQLite lacks LPAD()
and CAST(... AS BINARY). Fix by using the existing pathname column for
ordering on SQLite, which already encodes the hierarchical path.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

DESIGN.md

@@ -1,34 +0,0 @@
-DESIGN
-======
-
-Below is a list of design decisions. The justification is to be consulted
-whenever a change is considered, to avoid regressions.
-
-### Data type for DB storage of numeric values (`decimal` vs `float`)
-
-* among database engines supported (by Rails), SQLite offers storage of
-  `decimal` data type with the lowest precision, equal to the precision of
-  `REAL` type (double precision float value, IEEE 754), but in a floating point
-  format,
-    * decimal types in other database engines offer greater precision, but store
-      data in a fixed point format,
-* biology-related values differ by several orders of magnitude; storing them in
-  fixed point format would only make sense if required precision would be
-  greater than that offered by floating point format,
-    * even then, fixed point would mean either bigger memory requirements or
-      worse precision for numbers close to scale limit,
-        * for a fixed point format to use the same 8 bytes of storage as IEEE
-          754, precision would need to be limited to 18 digits (4 bytes/9 digits)
-          and scale approximately half of that - 9,
-    * double precision floating point guarantees 15 digits of precision, which
-      is more than enough for all expected use cases,
-        * single precision floating point only guarntees 6 digits of precision,
-          which is estimated to be too low for some use cases (e.g. storing
-          latitude/longitude with a resolution grater than 100m)
-* double precision floating point (IEEE 754) is a standard that ensures
-  compatibility with all database engines,
-    * the same data format is used internally by Ruby as a `Float`; it
-      guarantees no conversions between storage and computation,
-    * as a standard with hardware implementations ensures both: computing
-      efficiency and hardware/3rd party library compatibility as opposed to Ruby
-      custom `BigDecimal` type

app/assets/images/pictograms/alert-outline.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path fill="#ffffff" d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>

app/assets/images/pictograms/check-circle-outline.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path fill="#ffffff" d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></svg>

app/assets/stylesheets/application.css

@@ -18,14 +18,10 @@
 /* Strive for simplicity:
  * * style elements/tags only - if possible,
  * * replace element/tag name with class name - if element has to be styled
- * differently depending on context (e.g. <form>; <a> as link/button),
+ * differently depending on context (e.g. form)
- * * styles with multiple selectors should have all selectors with same
- * specificity, to allow proper rule specificity vs order management.
  *
- * NOTE: style in a modular way, similar to how CSS @scope would be used,
+ * NOTE: Style in a modular way, similar to how CSS @scope would be used,
- * to make transition easier once @scope is widely available. */
+ * to make transition easier once @scope is widely available */
-/* TODO: review styles with multiple selectors and try to convert them to the same
- * specificity. */
 :root {
   --color-focus-gray: #f3f3f3;
   --color-border-gray: #dddddd;
@@ -57,28 +53,12 @@
 :focus-visible {
   outline: none;
 }
-/* NOTE: move to higher priority layer instead of using !important? */
-/* TODO: add CSS @layer requirements in README */
-[disabled] {
-  border-color: var(--color-border-gray) !important;
-  color: var(--color-border-gray) !important;
-  /* NOTE: cannot set cursor when `pointer-events: none`; can be fixed by setting
-   * `cursor` on wrapping element.
-  cursor: not-allowed; */
-  fill: var(--color-border-gray) !important;
-  pointer-events: none !important;
-}
-/* Styles set `display` without distinguishing between [hidden] elements, making
- * them visible. */
-[hidden] {
-  display: none !important;
-}
 
 
 /* Color coding of input controls' background:
- *  blue - target for interaction with pointer,
+ *  blue - target for interaction with pointer
- *  gray - target for interaction with keyboard,
+ *  gray - target for interaction with keyboard
- *  red - destructive, non-undoable action.
+ *  red - destructive, non-undoable action
  */
 button,
 details,
@@ -93,17 +73,56 @@ input,
 select {
   text-align: inherit;
 }
+a,
+button,
+input[type=submit] {
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+}
+/* [hidden] submit controls cannot have `display` set as it makes them visible */
+.button,
+button:not([hidden]),
+input[type=submit]:not([hidden]),
+.tab {
+  align-items: center;
+  color: var(--color-gray);
+  display: flex;
+  fill: var(--color-gray);
+  font-weight: bold;
+}
+.button,
+button,
+input[type=submit] {
+  font-size: 0.8rem;
+  padding: 0.6em 0.5em;
+  width: fit-content;
+}
+input:not([type=submit]):not([type=checkbox]),
+select,
+summary,
+textarea {
+  padding: 0.2em 0.4em;
+}
+.button,
+button,
 input,
 select,
 summary,
 textarea {
-  border: 1px solid var(--color-gray);
+  border: solid 1px var(--color-gray);
   border-radius: 0.25em;
-  padding: 0.2em 0.4em;
 }
+[name=cancel],
+.auxiliary {
+  border-color: var(--color-border-gray);
+  color: var(--color-nav-gray);
+  fill: var(--color-nav-gray);
+}
+input[type=checkbox],
 svg,
 textarea {
-  margin: 0;
+  margin: 0
 }
 input[type=checkbox] {
   accent-color: var(--color-blue);
@@ -111,20 +130,17 @@ input[type=checkbox] {
   -webkit-appearance: none;
   display: flex;
   height: 1.1em;
-  margin: 0;
-  padding: 0;
   width: 1.1em;
 }
 input[type=checkbox]:checked {
   appearance: checkbox;
   -webkit-appearance: checkbox;
 }
-/* Hide spin buttons of <input type=number>. */
+/* Hide spin buttons in input number fields */
-/* TODO: add spin buttons inside <input type=number>: before (-) and after (+) input. */
+/* TODO: add spin buttons inside input[number]: before (-) and after (+) input */
 input[type=number] {
   appearance: textfield;
   -moz-appearance: textfield;
-  text-align: end;
 }
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
@@ -133,108 +149,37 @@ input::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-/* Text color of table form controls:
- *  - black for row/table forms,
- *  - inherited for internal (column specific) buttons/forms. */
-table input,
-table select,
-table summary,
-table textarea {
-  border-color: var(--color-border-gray);
-}
-table input,
-table select,
-table textarea {
-  padding-block: 0.375em;
-}
-table form input,
-table form select,
-table form summary,
-table form textarea {
-  color: inherit;
-}
-input:focus-visible,
-select:focus-visible,
-select:focus-within,
-/* TODO: how to achieve `summary:focus-within` for `::details-content`? */
-summary:focus-visible,
-textarea:focus-visible {
-  accent-color: var(--color-dark-blue);
-  background-color: var(--color-focus-gray);
-  color: black;
-}
-input:hover,
-select:hover,
-summary:hover,
-textarea:hover {
-  border-color: var(--color-blue);
-  outline: 1px solid var(--color-blue);
-}
-select:hover,
-summary:hover {
-  color: black;
-  cursor: pointer;
-}
-/* TODO: style <details>/<summary> focus to match <select> as much as possible.
-summary:focus-visible::before,
-summary:hover::before {
-  background-color: black;
-}
- */
-input:invalid,
-select:invalid,
-textarea:invalid {
-  border-color: var(--color-red);
-  outline-color: var(--color-red);
-}
-
-/* `.button`: button-styled <a>, <button>, <input type=submit>.
- * `.link`: any other <a>.
- * `.tab`: tab-styled <a>.
- */
-.button,
-.link,
-.tab {
-  cursor: pointer;
-  text-decoration: none;
-  white-space: nowrap;
-}
-.button,
-.tab {
-  align-items: center;
-  color: var(--color-gray);
-  display: flex;
-  fill: var(--color-gray);
-  font-weight: bold;
-}
-.button {
-  border: 1px solid var(--color-gray);
-  border-radius: 0.25em;
-  font-size: 0.8rem;
-  padding: 0.6em 0.5em;
-  width: fit-content;
-}
-[name=cancel],
-.auxiliary {
-  border-color: var(--color-border-gray);
-  color: var(--color-nav-gray);
-  fill: var(--color-nav-gray);
-}
 .button > svg,
-.tab > svg {
+.tab > svg,
+button > svg {
   height: 1.4em;
   width: 1.4em;
 }
 .button > svg:not(:last-child),
-.tab > svg:not(:last-child) {
+.tab > svg:not(:last-child),
+button > svg:not(:last-child) {
   margin-right: 0.2em;
 }
+/* TODO: move normal non-button links (<a>:hover/:focus) styling here (i.e.
+ * page-wide, top-level) and remove from table.items - as the style should be
+ * same everywhere */
 .button:focus-visible,
-.tab:focus-visible,
+button:focus-visible,
-.tab:hover {
+input[type=submit]:focus-visible {
   background-color: var(--color-focus-gray);
 }
-.button:hover {
+input:focus-visible,
+select:focus-visible,
+select:focus-within,
+/* TODO: how to achieve summary:focus-within for ::details-content? */
+summary:focus-visible,
+textarea:focus-visible {
+  accent-color: var(--color-dark-blue);
+  background-color: var(--color-focus-gray);
+}
+.button:hover,
+button:hover,
+input[type=submit]:hover {
   background-color: var(--color-blue);
   border-color: var(--color-blue);
   color: white;
@@ -244,17 +189,23 @@ textarea:invalid {
   background-color: var(--color-red);
   border-color: var(--color-red);
 }
-table .button {
+input:hover,
-  border-color: var(--color-border-gray);
+select:hover,
-  color: var(--color-table-gray);
+summary:hover,
-  font-weight: normal;
+textarea:hover {
-  height: 100%;
+  border-color: var(--color-blue);
-  padding: 0.4em;
+  outline: solid 1px var(--color-blue);
+}
+select:hover,
+summary:hover {
+  cursor: pointer;
+}
+input:invalid,
+select:invalid,
+textarea:invalid {
+  border-color: var(--color-red);
+  outline: solid 1px var(--color-red);
 }
-/* TODO: move normal, non-button links (<a>:hover/:focus) styling here (i.e.
- * page-wide, top-level) and remove from `table.items` - as the style should be
- * same everywhere. */
-/* TODO: apply link class to non-button/-tab links. Add light underscore for links? */
 input[type=text]:read-only,
 textarea:read-only {
   border: none;
@@ -262,8 +213,8 @@ textarea:read-only {
 }
 
 
-/* NOTE: collapse gaps around empty rows (`topside`) once possible with
+/* NOTE: collapse gaps around empty rows (`topside`) once possible
- * `grid-collapse` property and remove alternative `grid-template-areas`.
+ * with grid-collapse property and remove alternative grid-template
  * https://github.com/w3c/csswg-drafts/issues/5813 */
 body {
   display: grid;
@@ -296,14 +247,18 @@ header {
   margin-inline-start: 4%;
 }
 .navigation > .tab {
-  border-bottom: 2px solid var(--color-nav-gray);
+  border-bottom: solid 2px var(--color-nav-gray);
   flex: 1;
   font-size: 1rem;
   justify-content: center;
   padding-block: 0.4em;
 }
+.navigation > .tab:hover,
+.navigation > .tab:focus-visible {
+  background-color: var(--color-focus-gray);
+}
 .navigation > .tab.active {
-  border-bottom: 4px solid var(--color-blue);
+  border-bottom: solid 4px var(--color-blue);
   color: var(--color-blue);
   fill: var(--color-blue);
 }
@@ -335,7 +290,7 @@ header {
 
 #flashes {
   display: grid;
-  row-gap: 0.4em;
+  gap: 0.2em;
   grid-template-columns: 1fr auto auto auto 1fr;
   left: 0;
   pointer-events: none;
@@ -351,17 +306,13 @@ header {
   display: grid;
   grid-column: 2/5;
   grid-template-columns: subgrid;
-  line-height: 2.2em;
   pointer-events: auto;
 }
-.flash:before {
-  filter: invert();
-  height: 1.4em;
-  margin: 0 0.5em;
-  width: 1.4em;
-}
 .flash.alert:before {
   content: url('pictograms/alert-outline.svg');
+  height: 1.4em;
+  margin: 0 0.5em;
+  width: 1.4em;
 }
 .flash.alert {
   border-color: var(--color-red);
@@ -369,24 +320,35 @@ header {
 }
 .flash.notice:before {
   content: url('pictograms/check-circle-outline.svg');
+  height: 1.4em;
+  margin: 0 0.5em;
+  width: 1.4em;
 }
 .flash.notice {
   border-color: var(--color-blue);
   background-color: var(--color-blue);
 }
-.flash svg {
+.flash > div {
-  cursor: pointer;
+  grid-column: 2;
-  fill: white;
-  height: 2.2em;
-  opacity: 0.6;
-  padding: 0.4em 0.5em;
-  width: 2.4em;
 }
-.flash svg:hover {
+/* NOTE: currently flash button inherits some unnecessary styles from generic
+ * button. */
+.flash > button {
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font-size: 1.4em;
+  font-weight: bold;
+  grid-column: 3;
+  opacity: 0.6;
+  padding: 0.2em 0.4em;
+}
+.flash > button:hover {
   opacity: 1;
 }
 
 
+/* TODO: Hover over invalid should work like in measurements (thin vs thick border) */
 .labeled-form {
   align-items: center;
   display: grid;
@@ -403,7 +365,7 @@ header {
 .labeled-form label.required {
   font-weight: bold;
 }
-/* Don't style `label.error + input` if case already covered by `input:invalid`. */
+/* Don't style `label.error + input` if case already covered by input:invalid */
 .labeled-form label.error {
   color: var(--color-red);
 }
@@ -423,146 +385,180 @@ header {
 .labeled-form .auxiliary {
   grid-column: 3;
   /* If more buttons are needed, `grid-row` can be replaced with
-   * `reading-flow: grid-columns` to ensure proper [tabindex] order. */
+   * `reading-flow: grid-columns` to ensure proper tabindex order */
   grid-row: 1;
   height: 100%;
   padding-block: 0;
 }
 
-.tabular-form table {
-  border: none;
-}
-.tabular-form table td {
-  border: none;
-  text-align: left;
-  vertical-align: middle;
-}
-.tabular-form table td:first-child {
-  color: inherit;
-}
 
-
+/* TODO: remove .items class (?) and make 'form table' work properly */
-.items-table {
+table.items {
   border-spacing: 0;
-  border: 1px solid var(--color-border-gray);
+  border: solid 1px var(--color-border-gray);
   border-radius: 0.25em;
   font-size: 0.85rem;
   text-align: left;
 }
-.items-table thead {
+table:not(:has(tr)) {
+  display: none;
+}
+table.items thead {
   font-size: 0.8rem;
 }
-.items-table thead,
+table.items thead,
-.items-table tbody tr:hover {
+table.items tbody tr:hover {
   background-color: var(--color-focus-gray);
 }
-.items-table th {
+table.items th {
   padding-block: 0.75em;
   text-align: center;
 }
-.items-table th,
+table.items th,
-.items-table td {
+table.items td {
   padding-inline: 1em 0;
 }
-/* For <a> to fill <td> completely, we use an `::after` pseudoelement. */
+/* For <a> to fill <td> completely, we use an ::after pseudoelement. */
-.items-table td.link {
+table.items td.link {
   padding: 0;
   position: relative;
 }
-.items-table td.link a {
+table.items td.link a {
   color: inherit;
   font: inherit;
 }
-.items-table td.link a::after {
+table.items td.link a::after {
   content: '';
   inset: 0;
   position: absolute;
 }
-.items-table td:first-child {
+table.items td:first-child {
   padding-inline-start: calc(1em + var(--depth) * 0.8em);
 }
-.items-table td:has(input, select, textarea) {
+table.items td:has(input, select, textarea) {
   padding-inline-start: calc(0.6em - 0.9px);
 }
-.items-table td:first-child:has(input, select, textarea) {
+table.items td:first-child:has(input, select, textarea) {
   padding-inline-start: calc(0.6em + var(--depth) * 0.8em - 0.9px);
 }
-.items-table th:last-child {
+table.items th:last-child {
   padding-inline-end: 0.4em;
 }
-.items-table td:last-child {
+table.items td:last-child {
   padding-inline-end: 0.1em;
 }
-.items-table td {
+table.items td {
-  border-top: 1px solid var(--color-border-gray);
+  border-top: solid 1px var(--color-border-gray);
   height: 2.4em;
   padding-block: 0.1em;
 }
-.items-table .actions {
+table.items .actions {
   display: flex;
   gap: 0.4em;
   justify-content: end;
 }
-.items-table .actions.centered {
+table.items .actions.centered {
   justify-content: center;
 }
-.items-table tr.dropzone {
+table.items tr.dropzone {
   position: relative;
 }
-.items-table tr.dropzone::after {
+table.items tr.dropzone::after {
   content: '';
   inset: 1px 0 0 0;
   position: absolute;
-  outline: 2px dashed var(--color-blue);
+  outline: dashed 2px var(--color-blue);
   outline-offset: -1px;
   z-index: var(--z-index-table-row-outline);
 }
-.items-table td.handle {
+table.items td.handle {
   cursor: move;
 }
-.items-table tr.form td {
+table.items tr.form td {
   vertical-align: top;
 }
 
-/* TODO: replace `:hover:focus-visible` combos with proper LOVE style order. */
+/* TODO: replace :hover:focus-visible combos with proper LOVE stye order */
-/* TODO: update table styling: simplify selectors, deduplicate, remove non-font rem. */
+/* TODO: Update table styling: simplify selectors, deduplicate, remove non-font rem. */
-.items-table td.link a:hover,
+table.items td.link a:hover,
-.items-table td.link a:focus-visible,
+table.items td.link a:focus-visible,
-.items-table td.link a:hover:focus-visible {
+table.items td.link a:hover:focus-visible {
   text-decoration: underline;
   text-decoration-thickness: 0.05rem;
   text-underline-offset: 0.2rem;
 }
-.items-table td.link a:hover {
+table.items td.link a:hover {
   color: var(--color-blue);
 }
-.items-table td.link a:focus-visible {
+table.items td.link a:focus-visible {
   text-decoration-color: var(--color-gray);
 }
-.items-table td.link a:hover:focus-visible {
+table.items td.link a:hover:focus-visible {
   color: var(--color-dark-blue);
 }
 
-.items-table td:not(:first-child),
+table.items td:not(:first-child),
 .grayed {
   color: var(--color-table-gray);
   fill: var(--color-table-gray);
 }
-.items-table svg {
+table.items svg {
   height: 1rem;
   vertical-align: middle;
   width: 1rem;
 }
-.items-table svg:last-child {
+table.items svg:last-child {
   height: 1.2rem;
   width: 1.2rem;
 }
-.items-table td.svg {
+table.items td.svg {
   text-align: center;
 }
-.items-table td.number {
+table.items td.number {
   text-align: right;
 }
+table.items .button,
+table.items button,
+table.items input[type=submit] {
+  font-weight: normal;
+  height: 100%;
+  padding: 0.4em;
+}
+table.items input:not([type=submit]):not([type=checkbox]),
+table.items select,
+table.items textarea {
+  padding-block: 0.375em;
+}
+/* TODO: find a way (layers?) to style inputs differently while making sure
+ * hover works properly without using :not(:hover) selectors here. */
+table.items .button:not(:hover),
+table.items button:not(:hover),
+table.items input:not(:hover),
+table.items select:not(:hover),
+table.items textarea:not(:hover) {
+  border-color: var(--color-border-gray);
+}
+table.items .button:not(:hover),
+table.items button:not(:hover),
+table.items input[type=submit]:not(:hover),
+table.items select:not(:hover) {
+  color: var(--color-table-gray);
+}
+table.items select:focus-within,
+table.items select:focus-visible {
+  color: black;
+}
+form table.items {
+  border: none;
+}
+form table.items td {
+  border: none;
+  text-align: left;
+  vertical-align: middle;
+}
+form table.items td:first-child {
+  color: inherit;
+}
 
 
 .centered {
@@ -590,18 +586,22 @@ header {
   font-size: 0.9rem;
   text-align: center;
 }
-.hmin50 {
-  min-width: 50%;
-}
-.italic {
-  color: var(--color-gray);
-  font-style: italic;
-}
 .vflex {
   display: flex;
   gap: 0.8em;
   flex-direction: column;
 }
+[disabled] {
+/* label:has(input[disabled]) {
+ * TODO: disabled checkbox blue square focus removal; disabled label styling;
+ * focused label styling (currently only checkbox has focus)
+ * */
+  border-color: var(--color-border-gray) !important;
+  color: var(--color-border-gray) !important;
+  cursor: not-allowed;
+  fill: var(--color-border-gray) !important;
+  pointer-events: none;
+}
 
 
 details {
@@ -612,12 +612,12 @@ summary {
   align-items: center;
   color: var(--color-gray);
   display: flex;
-  gap: 0.4em;
+  gap: 0.2em;
   height: 100%;
   white-space: nowrap;
 }
 summary::before {
-  background-color: currentColor;
+  background-color: #000;
   content: "";
   height: 1em;
   mask-image: url('pictograms/chevron-down.svg');
@@ -629,7 +629,7 @@ summary:has(.button) {
   padding-inline-end: 0;
 }
 summary .button {
-  border: 1px solid var(--color-border-gray);
+  border: solid 1px var(--color-border-gray);
   border-radius: inherit;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
@@ -640,15 +640,15 @@ summary span {
   width: 100%;
 }
 details[open] summary::before {
-  transform: scaleY(-1);
+  transform: rotate(180deg);
 }
 summary::marker {
   padding-left: 0.25em;
 }
-/* NOTE: use `details[open]::details-content` once widely available. */
+/* NOTE: use details[open]::details-content once widely available */
 details[open] ul {
   background: white;
-  border: 1px solid var(--color-border-gray);
+  border: solid 1px var(--color-border-gray);
   border-radius: 0.25em;
   box-shadow: 1px 1px 3px var(--color-border-gray);
   margin: -1px 0 0 0;
@@ -670,15 +670,3 @@ li input[type=checkbox] {
 li::marker {
   content: '';
 }
-
-#measurement_form {
-  min-width: 66%;
-  width: max-content;
-}
-/*
- * TODO:
- * * disable <label> containing disabled checkbox: `label:has(input[disabled])`,
- * * disabled label styling,
- * * focused label styling (currently only checkbox has focus),
- * * disabled checkbox blue square focus removal.
- * */

app/controllers/measurements_controller.rb

@@ -1,7 +1,13 @@
 class MeasurementsController < ApplicationController
+  before_action except: :index do
+    raise AccessForbidden unless current_user.at_least(:active)
+  end
+
   def index
-    @measurements = []
+    readouts = current_user.readouts.includes(:quantity, :unit).order(created_at: :desc)
-    #@measurements = current_user.units.ordered.includes(:base, :subunits)
+    @measurements = readouts.group_by(&:created_at).map do |created_at, grouped|
+      Measurement.new(created_at: created_at, readouts: grouped)
+    end
   end
 
   def new
@@ -9,8 +15,33 @@ class MeasurementsController < ApplicationController
   end
 
   def create
+    timestamp = Time.current
+    @readouts = readout_params.map do |rp|
+      r = current_user.readouts.new(rp)
+      r.created_at = timestamp
+      r
+    end
+
+    if @readouts.all?(&:valid?)
+      Readout.transaction { @readouts.each(&:save!) }
+      @measurement = Measurement.new(readouts: @readouts, created_at: timestamp)
+      flash.now[:notice] = t('.success')
+    else
+      render :new, status: :unprocessable_entity
+    end
   end
 
   def destroy
+    @measurement = Measurement.new(id: params[:id].to_i,
+                                   created_at: Time.at(params[:id].to_i))
+    current_user.readouts.where(created_at: @measurement.created_at).delete_all
+    @measurements_empty = current_user.readouts.empty?
+    flash.now[:notice] = t('.success')
+  end
+
+  private
+
+  def readout_params
+    params.require(:readouts).map { |r| r.permit(:quantity_id, :value, :unit_id) }
   end
 end

app/helpers/application_helper.rb

@@ -12,12 +12,6 @@ module ApplicationHelper
       labeled_field_for(method, options) { super }
     end
 
-    def submit(value = nil, options = {})
-      value, options = nil, value if value.is_a?(Hash)
-      options[:class] = @template.class_names('button', options[:class])
-      super
-    end
-
     private
 
     def labeled_field_for(method, options)
@@ -102,28 +96,20 @@ module ApplicationHelper
 
     def number_field(method, options = {})
       attr_type = object.type_for_attribute(method)
-      case attr_type.type
+      if attr_type.type == :decimal
-      when :decimal
         options[:value] = object.public_send(method)&.to_scientific
         options[:step] ||= BigDecimal(10).power(-attr_type.scale)
         options[:max] ||= BigDecimal(10).power(attr_type.precision - attr_type.scale) -
           options[:step]
         options[:min] = options[:min] == :step ? options[:step] : options[:min]
         options[:min] ||= -options[:max]
-        options[:size] ||= attr_type.precision / 2
-      when :float
-        options[:size] ||= 6
       end
       super
     end
 
     def button(value = nil, options = {}, &block)
-      # #button does not use #objectify_options/@default_options
+      # button does not use #objectify_options
-      value, options = nil, value if value.is_a?(Hash)
+      options.merge!(@options.slice(:form))
-      options = options.merge(
-        @default_options.slice(:form),
-        class: @template.class_names('button', options[:class])
-      )
       super
     end
 
@@ -152,14 +138,12 @@ module ApplicationHelper
   end
 
   def tabular_form_with(**options, &block)
-    extra_options = {builder: TabularFormBuilder, class: 'tabular-form',
+    extra_options = {builder: TabularFormBuilder, html: {autocomplete: 'off'}}
-                     html: {autocomplete: 'off'}}
     form_with(**merge_attributes(options, extra_options), &block)
   end
 
   def svg_tag(source, label = nil, options = {})
-    label, options = nil, label if label.is_a? Hash
+    svg_tag = tag.svg(options) do
-    svg_tag = tag.svg(**options) do
       tag.use(href: "#{image_path(source + ".svg")}#icon")
     end
     label.blank? ? svg_tag : svg_tag + tag.span(label)
@@ -228,8 +212,9 @@ module ApplicationHelper
       # Conversion of flash to Array only required because of Devise
       Array(messages).map do |message|
         tag.div class: "flash #{entry}" do
-          tag.span(sanitize(message)) +
+          # TODO: change button text to svg to make it aligned vertically
-            svg_tag('pictograms/close-outline', {onclick: "this.parentElement.remove()"})
+          tag.div(sanitize(message)) + tag.button(sanitize("×"), tabindex: -1,
+                                                  onclick: "this.parentElement.remove();")
         end
       end
     end.join.html_safe

app/helpers/quantities_helper.rb

@@ -1,9 +1,9 @@
 module QuantitiesHelper
-  def quantities_check_boxes(quantities)
+  def quantities_check_boxes
     # Closing <details> on focusout event depends on relatedTarget for internal
     # actions being non-null. To ensure this, all top-layer elements of
     # ::details-content must accept focus, e.g. <label> needs tabindex="-1" */
-    collection_check_boxes(nil, :quantity, quantities, :id, :to_s_with_depth,
+    collection_check_boxes(nil, :quantity, @quantities, :id, :to_s_with_depth,
                            include_hidden: false) do |b|
       content_tag :li, b.label(tabindex: -1) { b.check_box + b.text }
     end

app/models/measurement.rb

@@ -1,3 +1,17 @@
 class Measurement
   include ActiveModel::Model
+
+  attr_accessor :readouts, :created_at
+
+  def id
+    created_at.to_i
+  end
+
+  def to_param
+    id.to_s
+  end
+
+  def persisted?
+    true
+  end
 end

app/models/quantity.rb

@@ -15,8 +15,8 @@ class Quantity < ApplicationRecord
     errors.add(:parent, :descendant_reference) if ancestor_of?(parent)
   end
   validates :name, presence: true, uniqueness: {scope: [:user_id, :parent_id]},
-    length: {maximum: type_for_attribute(:name).limit}
+    length: {maximum: type_for_attribute(:name).limit || Float::INFINITY}
-  validates :description, length: {maximum: type_for_attribute(:description).limit}
+  validates :description, length: {maximum: type_for_attribute(:description).limit || Float::INFINITY}
 
   # Update :depths of progenies after parent change
   before_save if: :parent_changed? do
@@ -61,18 +61,26 @@ class Quantity < ApplicationRecord
 
   # Return: ordered [sub]hierarchy
   scope :ordered, ->(root: nil, include_root: true) {
-    numbered = Arel::Table.new('numbered')
+    if connection.adapter_name =~ /mysql/i
-
+      numbered = Arel::Table.new('numbered')
-    self.model.with(numbered: numbered(:parent_id, :name)).with_recursive(arel_table.name => [
+      self.model.with(numbered: numbered(:parent_id, :name)).with_recursive(arel_table.name => [
-      numbered.project(
+        numbered.project(
-        numbered[Arel.star],
+          numbered[Arel.star],
-        numbered.cast(numbered[:child_number], 'BINARY').as('path')
+          numbered.cast(numbered[:child_number], 'BINARY').as('path')
-      ).where(numbered[root && include_root ? :id : :parent_id].eq(root)),
+        ).where(numbered[root && include_root ? :id : :parent_id].eq(root)),
-      numbered.project(
+        numbered.project(
-        numbered[Arel.star],
+          numbered[Arel.star],
-        arel_table[:path].concat(numbered[:child_number])
+          arel_table[:path].concat(numbered[:child_number])
-      ).join(arel_table).on(numbered[:parent_id].eq(arel_table[:id]))
+        ).join(arel_table).on(numbered[:parent_id].eq(arel_table[:id]))
-    ]).order(arel_table[:path])
+      ]).order(arel_table[:path])
+    elsif root.nil?
+      # SQLite: pathname column already stores the full hierarchical path
+      order(:pathname)
+    else
+      root_pathname = unscoped.where(id: root).pick(:pathname)
+      scope = order(:pathname).where("pathname LIKE ?", "#{root_pathname}#{PATHNAME_DELIMITER}%")
+      include_root ? scope.or(where(id: root)) : scope
+    end
   }
 
   # TODO: extract named functions to custom Arel extension

app/views/default/units/index.html.erb

@@ -8,7 +8,7 @@
     class: 'tools-area' %>
 </div>
 
-<table class="main-area items-table">
+<table class="main-area items">
   <thead>
     <tr>
       <th><%= Unit.human_attribute_name(:symbol) %></th>

app/views/measurements/_form.html.erb

@@ -1,37 +1,28 @@
 <%= tabular_form_with model: Measurement.new, id: :measurement_form,
-  class: 'topside-area vflex centered',
+  class: 'topside-area vflex', html: {onkeydown: 'formProcessKey(event)'} do |form| %>
-  html: {onkeydown: 'formProcessKey(event)'} do |form| %>
+  <table class="items centered">
-
+    <tbody id="readouts"></tbody>
-  <table class="items-table centered">
-    <tbody id="readouts">
-      <%= tabular_fields_for @measurement do |form| %>
-        <tr class="italic">
-          <td class="hexpand hmin50"><%= t '.taken_at_html' %></td>
-          <td colspan="3" class="number">
-            <%= form.datetime_field :taken_at, required: true %>
-          </td>
-        </tr>
-      <% end %>
-    </tbody>
   </table>
 
-  <%# TODO: right-click selection; unnecessary with hierarchical tags? %>
+  <div class="hflex">
-  <details id="quantity_select" class="centered hexpand" open
+    <%# TODO: right-click selection %>
-           onkeydown="detailsProcessKey(event)">
+    <details id="quantity_select" class="hexpand" open
-    <summary autofocus>
+             onkeydown="detailsProcessKey(event)">
-      <!-- TODO: Set content with CSS when span empty to avoid duplication -->
+      <summary autofocus>
-      <span data-prompt="<%= t('.select_quantity') %>">
+        <!-- TODO: Set content with CSS when span empty to avoid duplication -->
-        <%= t('.select_quantity') %>
+        <span data-prompt="<%= t('.select_quantity') %>">
-      </span>
+          <%= t('.select_quantity') %>
-      <%= image_button_tag t(:apply), "update", name: nil, disabled: true,
+        </span>
-        formaction: new_readout_path, formmethod: :get, formnovalidate: true,
+        <%= image_button_tag t(:apply), "update", name: nil, disabled: true,
-        data: {turbo_stream: true} %>
+          formaction: new_readout_path, formmethod: :get, formnovalidate: true,
-    </summary>
+          data: {turbo_stream: true} %>
-    <ul><%= quantities_check_boxes(@quantities) %></ul>
+      </summary>
-  </details>
+      <ul><%= quantities_check_boxes %></ul>
+    </details>
+    <%= form.button id: :create_measurement_button, disabled: true -%>
+  </div>
 
   <div class="hflex reverse">
-    <%= form.button id: :create_measurement_button, disabled: true -%>
     <%= image_link_to t(:cancel), "close-outline", measurements_path, name: :cancel,
       class: 'dangerous', onclick: render_turbo_stream('form_close') %>
   </div>

app/views/measurements/_measurement.html.erb

@@ -0,0 +1,14 @@
+<%= tag.tr id: dom_id(measurement) do %>
+  <td><%= l measurement.created_at, format: :short %></td>
+  <td>
+    <% measurement.readouts.each do |readout| %>
+      <span><%= readout.quantity.name %>: <%= readout.value %> <%= readout.unit %></span>
+    <% end %>
+  </td>
+  <% if current_user.at_least(:active) %>
+    <td class="actions">
+      <%= image_button_to t('.destroy'), 'delete-outline', measurement_path(measurement),
+        method: :delete %>
+    </td>
+  <% end %>
+<% end %>

app/views/measurements/create.turbo_stream.erb

@@ -0,0 +1,5 @@
+<%= turbo_stream.update :flashes %>
+<%= turbo_stream.remove :measurement_form %>
+<%= turbo_stream.remove :no_items %>
+<%= turbo_stream.enable :new_measurement_link %>
+<%= turbo_stream.prepend :measurements, @measurement %>

app/views/measurements/destroy.turbo_stream.erb

@@ -0,0 +1,3 @@
+<%= turbo_stream.update :flashes %>
+<%= turbo_stream.remove @measurement %>
+<%= turbo_stream.append(:measurements, render_no_items) if @measurements_empty %>

app/views/quantities/index.html.erb

@@ -8,10 +8,9 @@
     class: 'tools-area' %>
 </div>
 
-<%# TODO: remove? form can be inserted directly, e.g. at the end of index %>
 <%= tag.div class: 'main-area', id: :quantity_form %>
 
-<table class="main-area items-table">
+<table class="main-area items">
   <thead>
     <tr>
       <th><%= Quantity.human_attribute_name(:name) %></th>

app/views/readouts/_form.html.erb

@@ -1,24 +1,25 @@
 <%# TODO: add readout reordering by dragging %>
 <%= tabular_fields_for 'readouts[]', readout do |form| %>
   <%- tag.tr id: dom_id(readout.quantity, :new, :readout) do %>
-    <td>
-      <%# TODO: add grayed readout index (in separate column?) %>
-      <%= readout.quantity.relative_pathname(@superquantity) %>
-    </td>
-    <td>
-      <%= form.number_field :value, required: true, autofocus: readout_counter == 0 %>
-    </td>
-    <td>
-      <%= form.hidden_field :quantity_id %>
-      <%= form.collection_select :unit_id, @user_units, :id,
-        ->(u){ sanitize('&emsp;' * (u.base_id ? 1 : 0) + u.symbol) },
-        {prompt: '', disabled: '', selected: ''}, required: true %>
-    </td>
     <td class="actions">
       <%# TODO: change to _link_ after giving up displaying relative paths %>
       <%= image_button_tag '', 'delete-outline', class: 'dangerous', name: nil,
         formaction: discard_readouts_path(readout.quantity),
         formmethod: :get, formnovalidate: true, data: {turbo_stream: true} %>
     </td>
+    <td>
+      <%= readout.quantity.relative_pathname(@superquantity) %>
+    </td>
+    <td>
+      <%= form.number_field :value, required: true,
+        size: readout.type_for_attribute(:value).precision / 2,
+        autofocus: readout_counter == 0 %>
+    </td>
+    <td>
+      <%= form.hidden_field :quantity_id %>
+      <%= form.collection_select :unit_id, @user_units, :id,
+        ->(u){ sanitize('&emsp;' * (u.base_id ? 1 : 0) + u.symbol) },
+        {prompt: t('.select_unit'), disabled: '', selected: ''}, required: true %>
+    </td>
   <% end %>
 <% end %>

app/views/units/index.html.erb

@@ -7,10 +7,9 @@
     class: 'tools-area' %>
 </div>
 
-<%# TODO: remove? form can be inserted directly, e.g. at the end of index %>
 <%= tag.div id: :unit_form %>
 
-<table class="main-area items-table">
+<table class="main-area items">
   <thead>
     <tr>
       <th><%= Unit.human_attribute_name(:symbol) %></th>

app/views/users/index.html.erb

@@ -1,4 +1,4 @@
-<table class="main-area items-table" id="users">
+<table class="main-area items" id="users">
   <thead>
     <tr>
       <th><%= User.human_attribute_name(:email) %></th>

app/views/users/profiles/new.html.erb

@@ -10,6 +10,7 @@
 
   <%= f.submit t(:register), data: {turbo: false} %>
 
+  <%# TODO: fix button text color after change link -> button %>
   <%= image_button_tag t(:resend_confirmation), 'email-sync-outline',
     class: 'auxiliary', formaction: user_confirmation_path, formnovalidate: true,
     data: {validate: f.field_id(:email)} %>

config/locales/en.yml

@@ -85,10 +85,18 @@ en:
     navigation: Measurements
     no_items: There are no measurements taken. You can Add some now.
     form:
-      select_quantity: select quantities...
+      select_quantity: select the measured quantities...
-      taken_at_html: Measurement taken at 
     index:
       new_measurement: Add measurement
+    create:
+      success: Measurement saved.
+    destroy:
+      success: Measurement deleted.
+    measurement:
+      destroy: Delete
+  readouts:
+    form:
+      select_unit: ...
   quantities:
     navigation: Quantities
     no_items: There are no configured quantities. You can Add some or Import from defaults.

db/migrate/20250121230456_create_readouts.rb

@@ -1,14 +1,10 @@
 class CreateReadouts < ActiveRecord::Migration[7.2]
   def change
     create_table :readouts do |t|
-      # Reference :user through :quantity (:measurement may be NULL).
+      t.references :user, null: false, foreign_key: true
-      t.references :measurement, foreign_key: true
       t.references :quantity, null: false, foreign_key: true
-      # :category + :value + :unit as a separate table? (NumericValue, TextValue)
-      t.integer :category, null: false, default: 0
-      t.float :value, null: false, limit: Float::MANT_DIG
       t.references :unit, foreign_key: true
-      # Move to Measurement?
+      t.decimal :value, null: false, precision: 30, scale: 15
       #t.references :collector, foreign_key: true
       #t.references :device, foreign_key: true
 

test/system/users_test.rb

@@ -229,7 +229,7 @@ class UsersTest < ApplicationSystemTestCase
       user = User.find_by_email!(first(:link).text)
       inject_button_to first('td:not(.link)'), "update status", user_path(user), method: :patch,
         params: {user: {status: User.statuses.keys.sample}}, data: {turbo: false}
-      execute_script("arguments[0].click()", find_button("update status"))
+      click_on "update status"
     end
     assert_title 'The change you wanted was rejected (422)'
   end