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() {
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No matching day values found.
+
+
+
+
+
+ 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 {