ELFA/database-apps

Fork 0

Create a shopping list app #22

New issue

Closed

opened 2026-10-12 13:25:31 +02:00 by michielbdejong · 2 comments

michielbdejong commented

2026-10-12 13:25:31 +02:00

Owner

Rename the 'react' app to 'expenses-react', and reuse it as the starting point for 'shopping-list-react'.
Also rename the other expenses apps to have the 'expenses-' prefix.

This app should explore the use of a hidden 'position' attribute on shopping list items, and the user should be able to drag items up and down in the list. Other than the experiment of how to store an array of items in Nextgraph ORM, this app doesn't need a lot of functionality, you don't need to include the categories that the expenses app has, and a shopping list item can just be a single text field and a 'remove' (-) button.

for the ordering, use drag-and-drop html UI

under last item there should be an empty item where users can add an item, just like in google keep lists

Rename the 'react' app to 'expenses-react', and reuse it as the starting point for 'shopping-list-react'. Also rename the other expenses apps to have the 'expenses-' prefix. This app should explore the use of a hidden 'position' attribute on shopping list items, and the user should be able to drag items up and down in the list. Other than the experiment of how to store an array of items in Nextgraph ORM, this app doesn't need a lot of functionality, you don't need to include the categories that the expenses app has, and a shopping list item can just be a single text field and a 'remove' (-) button. for the ordering, use drag-and-drop html UI under last item there should be an empty item where users can add an item, just like in google keep lists

shopping-list-demo.webm

393 KiB

michielbdejong referenced this issue from a pull request that will close it,

2026-10-12 13:54:18 +02:00

Add React shopping list and prefix expense app names #25

michielbdejong closed this issue

2026-10-12 13:54:35 +02:00

michielbdejong referenced this issue from a commit

2026-10-12 13:54:36 +02:00

Merge pull request #25: Add React shopping list

michielbdejong commented

2026-10-12 14:05:57 +02:00

Author

Owner

Shopping list screencast: adding items, editing Milk to Oat milk, dragging Apples to the top, removing Bread, and adding Rice.

Watch/download the screencast

Recorded using the app’s in-memory test engine; this demonstrates the UI and ORM integration, not native wallet persistence or network synchronization. Implemented and merged in #25.

Shopping list screencast: adding items, editing Milk to Oat milk, dragging Apples to the top, removing Bread, and adding Rice. [Watch/download the screencast](https://git.elfaconsortium.eu/attachments/a5f4f2b0-b0e1-4e2d-80c5-f37a885622b0) Recorded using the app’s in-memory test engine; this demonstrates the UI and ORM integration, not native wallet persistence or network synchronization. Implemented and merged in #25.

michielbdejong commented

2026-10-12 14:23:36 +02:00

Author

Owner

Each shopping item is a separate RDF record. The ShEx schema is:

PREFIX ex: <did:ng:z:>
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>

ex:ShoppingListItemShape {
  a [ex:ShoppingListItem] ;
  ex:title xsd:string ;
  ex:position xsd:integer ;
}

Example:

Item	`title`	`position`
Apples	`"Apples"`	0
Oat milk	`"Oat milk"`	1
Coffee	`"Coffee"`	2

Each record has a unique RDF subject ID (@id) and belongs to the selected NextGraph graph (@graph). The UI hides position and sorts by it. Dragging rewrites positions as consecutive integers through the ORM.

If two entries have the same position (for example after concurrent edits), both remain visible and their RDF subject IDs provide a deterministic tie-breaker: clients with the same records display the same order. Equal positions are not automatically rewritten merely by reading the list. The next actual reorder assigns consecutive positions to all currently visible items; concurrent writes can still introduce ties again.

The list is represented by individual records with ordering metadata, rather than an RDF collection or a stored array.

Each shopping item is a separate RDF record. The ShEx schema is: ```shex PREFIX ex: <did:ng:z:> PREFIX xsd: <http://www.w3.org/2001/XMLSchema#> ex:ShoppingListItemShape { a [ex:ShoppingListItem] ; ex:title xsd:string ; ex:position xsd:integer ; } ``` Example: | Item | `title` | `position` | |---|---|---:| | Apples | `"Apples"` | 0 | | Oat milk | `"Oat milk"` | 1 | | Coffee | `"Coffee"` | 2 | Each record has a unique RDF subject ID (`@id`) and belongs to the selected NextGraph graph (`@graph`). The UI hides `position` and sorts by it. Dragging rewrites positions as consecutive integers through the ORM. If two entries have the same `position` (for example after concurrent edits), both remain visible and their RDF subject IDs provide a deterministic tie-breaker: clients with the same records display the same order. Equal positions are not automatically rewritten merely by reading the list. The next actual reorder assigns consecutive positions to all currently visible items; concurrent writes can still introduce ties again. The list is represented by individual records with ordering metadata, rather than an RDF collection or a stored array.

~~michielbdejong referenced this issue 2026-10-12 14:54:23 +02:00~~

Build all app schemas at runtime and persist schema edits #29

michielbdejong referenced this issue

2026-10-12 15:24:32 +02:00

Use variable-length string positions for the shopping list #30

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

ELFA/database-apps#22

No description provided.

Rows
Columns