Menu Editor CRUD Block for Vue

Edit DISHES and SECTIONS. A dish has an id, a name, a section, a price in whole euros, a diet list of v, vg and gf, and a sold flag. The editor, the counts, the printed card and the status line are all derived from that one list, so nothing is typed twice. New dish ids come from a counter held in state.

The price field takes whole euros from 0 to 999. It updates the card as you type and the polite line announces the new price when you leave the field. Anything else, such as letters or a number too large, is refused with its reason and the field goes back to the dish's real price. The card writes the price with a euro sign in a left-to-right run, so it reads the same in right-to-left layouts.

A vegan dish is always veggie. Turning Vegan on turns Veggie on too, and turning Veggie off turns Vegan off, so the card can never print VG without V. The toggles are real toggle buttons with a pressed state, and the polite line says which marks the dish now has.

Move up and Move down swap a dish with its neighbour inside its section; a dish already first or last says so instead of moving. Focus stays on the button you used, so you can press it again, and the card follows. Dishes cannot move between sections: add one to the section you want.

Dishes live in state in this tab and a reload brings the original nine back; nothing is printed or published. In your app send each change from rename, price, diet, sold, move, add and remove to your API, and render the card from what the server returns. Keep Undo as an optimistic step that calls your restore endpoint.

The card moves under the editor, as the editor stays first. Each dish puts its name and actions on one line and the price, dietary marks and Sold out switch on the line under it, wrapping if they must. Both panes scroll inside their own frames, so the page stays short.