bblaz/lonc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Mark Gone action for stock items and enhance expiration and location filtering system

Browse Source
This commit is contained in:
Blaž Bregar
2026-04-06 21:34:02 +02:00
parent 34664be951
commit b11485a336
4 changed files with 625 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/labels/label-create-page.js
+37 -3
View File
@@ -59,7 +59,7 @@ export function renderLabelCreatePage() {
×
</button>
<template x-if="suggestions.length">
<div class="list-group shadow-sm position-absolute start-0 end-0 z-3 mt-1">
<div class="list-group shadow-sm position-absolute start-0 end-0 z-3 mt-1 search-suggestions-picker">
<template x-for="item in suggestions" :key="item.id">
<button class="list-group-item list-group-item-action" type="button" @click="pickSuggestion(item)">
<div class="fw-semibold" x-text="item.name"></div>
@@ -319,7 +319,7 @@ export function renderLabelCreatePage() {
placeholder="30"
autocomplete="off"
/>
<template x-if="expireDaysPickerOpen">
<template x-if="expireDaysPickerOpen && !isCompactExpireDaysLayout()">
<div class="shadow-sm position-absolute start-0 end-0 z-3 mt-1 quantity-unit-picker expiration-days-picker">
<template x-if="filteredExpireDayOptions.length">
<div class="expiration-days-grid">
@@ -327,6 +327,8 @@ export function renderLabelCreatePage() {
<button
class="btn btn-outline-secondary btn-sm expiration-days-option"
type="button"
@mousedown.prevent
@touchstart.prevent="pickExpireDays(days)"
@click="pickExpireDays(days)"
:class="{ 'active': form.expireDays === days }"
>
@@ -353,6 +355,24 @@ export function renderLabelCreatePage() {
/>
</div>
</div>
<template x-if="isCompactExpireDaysLayout()">
<div class="expiration-days-inline mt-2">
<div class="small text-body-secondary mb-2">Quick picks</div>
<div class="expiration-days-grid expiration-days-grid-inline">
<template x-for="days in filteredExpireDayOptions" :key="days">
<button
class="btn btn-outline-secondary btn-sm expiration-days-option"
type="button"
@touchstart.prevent="pickExpireDays(days)"
@click="pickExpireDays(days)"
:class="{ 'active': form.expireDays === days }"
>
<span class="fw-semibold" x-text="days"></span>
</button>
</template>
</div>
</div>
</template>
<div class="row g-2 mt-1">
<div class="col-5">
<div class="small text-body-secondary">Days</div>
@@ -672,6 +692,11 @@ export function labelCreatePageData(store) {
this.quantityUnitPickerOpen = true;
},
openExpireDaysPicker() {
if (this.isCompactExpireDaysLayout()) {
this.expireDaysPickerOpen = false;
return;
}
this.expireDaysPickerOpen = true;
},
onLocationInput() {
@@ -701,10 +726,16 @@ export function labelCreatePageData(store) {
this.quantityUnitPickerOpen = false;
},
onExpireDaysInput() {
this.expireDaysPickerOpen = true;
if (!this.isCompactExpireDaysLayout()) {
this.expireDaysPickerOpen = true;
}
this.syncExpireDateFromDays();
},
handleExpireDaysFocusOut(event) {
if (this.isCompactExpireDaysLayout()) {
return;
}
const nextTarget = event.relatedTarget;
if (nextTarget && this.$refs.expireDaysPicker?.contains(nextTarget)) {
return;
@@ -712,6 +743,9 @@ export function labelCreatePageData(store) {
this.expireDaysPickerOpen = false;
},
isCompactExpireDaysLayout() {
return window.matchMedia('(max-width: 575.98px)').matches;
},
pickQuantityUnit(unit) {
this.form.uom = unit;
this.quantityUnitPickerOpen = false;