Versioned Price List CRUD Block for Vue

Edit ITEMS (a name and a unit) and the three version constants: each has an id, a number n, a phase of draft or published, the day it takes effect (from) and one price per item, in whole cents, in the order of ITEMS. The live version is the newest published one, and a version's "history" wording is worked out from the version after it, so there is nothing to keep in step.

Open the draft, then click a price or press its pencil button. Enter or the check saves, Escape or the cross puts the old price back, and a value that isn't an amount like 28.50 keeps the check unavailable with the reason under the field in a line that is always there. Each save updates the change column and the count in the foot, and the status line offers Undo for it.

It checks that the draft differs from the live version and that the date is after 14 October, then publishes the draft as the new live version with that date, turns the old live version into history that ends the same day, and says so. A future date reads "Live from 20 Oct" and the old version "Ends 20 Oct". Undo puts it back to a draft.

A published price list is what past quotes and invoices were made from, so it is kept for good. Discard is for drafts only: it asks first, says how many changed prices go with it, and leaves the live prices untouched. On a live or old version the button is marked unavailable and pressing it explains why.

Everything lives in state in this tab and a reload restores the three versions; nothing is sent. In your app create, save and publish a draft from create, editPrice and makeLive on the server, schedule the switch on the chosen date there, and keep each published version immutable.

The unit and change columns go: the unit moves under the item's name and the change under the price. The version strip scrolls sideways inside its band, the table scrolls inside its frame, and the foot's date, Make live and Discard wrap onto their own rows.