diff --git a/src/features/labels/label-create-page.js b/src/features/labels/label-create-page.js index bdc88a1..5bfe1b0 100644 --- a/src/features/labels/label-create-page.js +++ b/src/features/labels/label-create-page.js @@ -22,6 +22,7 @@ const STOCK_LEVEL_OPTIONS = [ ]; const QUANTITY_UNIT_OPTIONS = ['g', 'ml', 'pc']; +const EXPIRATION_DAY_OPTIONS = ['3', '5', '8', '10', '15', '20', '25', '30', '45', '60', '90', '120', '150', '180']; export function renderLabelCreatePage() { return ` @@ -300,15 +301,47 @@ export function renderLabelCreatePage() {
- +
+ + +
+ days.includes(query), + ); + + if (matches.length) { + return matches; + } + + return this.expirationDayOptions; + }, get selectedLocation() { return this.locations.find( (location) => String(location.id) === String(this.form.locationId), @@ -606,6 +661,9 @@ export function labelCreatePageData(store) { openQuantityUnitPicker() { this.quantityUnitPickerOpen = true; }, + openExpireDaysPicker() { + this.expireDaysPickerOpen = true; + }, onLocationInput() { this.locationPickerOpen = true; if (this.selectedLocation && this.locationSearch !== this.selectedLocation.name) { @@ -631,10 +689,27 @@ export function labelCreatePageData(store) { this.quantityUnitPickerOpen = false; }, + onExpireDaysInput() { + this.expireDaysPickerOpen = true; + this.syncExpireDateFromDays(); + }, + handleExpireDaysFocusOut(event) { + const nextTarget = event.relatedTarget; + if (nextTarget && this.$refs.expireDaysPicker?.contains(nextTarget)) { + return; + } + + this.expireDaysPickerOpen = false; + }, pickQuantityUnit(unit) { this.form.uom = unit; this.quantityUnitPickerOpen = false; }, + pickExpireDays(days) { + this.form.expireDays = days; + this.expireDaysPickerOpen = false; + this.syncExpireDateFromDays(); + }, syncLocationSelection() { if (!this.form.locationId) { this.locationSearch = ''; diff --git a/src/styles/app.css b/src/styles/app.css index eb2c361..0c65d2c 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -182,6 +182,47 @@ body { .quantity-unit-picker { z-index: 4; + border-radius: 0.9rem; + border: 1px solid var(--lonc-border); + background: rgba(255, 255, 255, 0.96); +} + +.expiration-days-picker { + padding: 0.75rem; + min-width: 18rem; + width: max-content; + max-width: min(22rem, calc(100vw - 2rem)); +} + +.expiration-days-grid { + display: grid; + grid-template-columns: repeat(4, minmax(3.25rem, 1fr)); + gap: 0.5rem; +} + +.expiration-days-option { + padding: 0.55rem 0.4rem; + border-radius: 0.7rem; + min-height: 2.75rem; + white-space: nowrap; + line-height: 1.1; +} + +.expiration-days-option.active { + color: #fff; + background: var(--lonc-primary); + border-color: var(--lonc-primary); +} + +@media (max-width: 575.98px) { + .expiration-days-picker { + min-width: 0; + width: min(100vw - 2rem, 18rem); + } + + .expiration-days-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } } .location-level-badge {