jamsch0/groceries
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

Add support for adding 'loose' items to transactions
All checks were successful
Docker Image CI / build (push) Successful in 3m45s
Details

Browse Source
This commit is contained in:
James Chapman
2024-10-12 02:36:38 +01:00
parent dfcab40d70
commit 47d13ba922
13 changed files with 178 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
Groceries/wwwroot/css/main.css
View File

@ -249,6 +249,7 @@ html:has(.modal[open]) {
/* HACK: should probably be a .button--icon */
.modal__close-button {
justify-content: center;
padding: 0 !important;
margin-block: -1rem;
width: 2rem;
@ -402,6 +403,11 @@ html:has(.modal[open]) {
padding: 0.75rem 1.5rem;
}
.table__paginator > nav {
display: flex;
gap: 1rem;
}
/*@media (prefers-color-scheme: dark) {
.table__header {
background-color: rgb(55, 65, 81);
@ -447,7 +453,8 @@ html:has(.modal[open]) {
/* Button */
.button {
display: inline-block;
display: inline-flex;
align-items: center;
text-decoration: none;
appearance: none;
background-color: rgb(255, 255, 255);
@ -457,7 +464,7 @@ html:has(.modal[open]) {
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
padding: 0.5rem 1rem;
padding: 0.5rem 0.75rem;
cursor: pointer;
}
@ -483,9 +490,64 @@ html:has(.modal[open]) {
opacity: 50%;
}
/* Button group */
.button-group {
display: flex;
gap: 1rem;
}
.button-group > .button:not(:nth-child(1 of .button)) {
border-start-start-radius: 0;
border-end-start-radius: 0;
border-inline-start: 1px solid;
}
.button-group > .button:not(:nth-last-child(1 of .button)) {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
/* Dropdown */
.dropdown__toggle {
anchor-name: --dropdown-toggle;
}
.dropdown__toggle::after {
content: "";
display: inline-block;
border-block-start: 0.3rem solid;
border-block-end: 0;
border-inline: 0.3rem solid transparent;
}
.dropdown__toggle::after:not(:empty) {
margin-inline-start: 0.375rem;
}
.dropdown:has(> :popover-open) > .dropdown__toggle[popovertarget] {
outline: none;
filter: brightness(0.85);
}
.dropdown__menu {
position-anchor: --dropdown-toggle;
inset: calc(anchor(end) + 0.125rem) anchor(end) auto auto;
padding-block: 0.5rem;
border: 1px solid rgb(209, 213, 219);
border-radius: 0.375rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.dropdown__item {
border-block-start: 1px solid rgb(229, 231, 235);
border-block-end: none;
border-inline: none;
border-radius: 0;
}
.dropdown__item:first-child {
border-block-start: none;
}
/* Form field */

17
Groceries/wwwroot/js/controllers/transaction-item-form.js
View File

@ -1,7 +1,7 @@
import { Controller } from "/lib/hotwired/stimulus/dist/stimulus.js";
export default class TransactionItemFormController extends Controller {
static targets = ["barcodeButton", "barcodeData", "barcodeFormat", "barcodeFormField", "brand", "option", "price", "quantity"];
static targets = ["barcodeButton", "barcodeData", "barcodeFormat", "barcodeFormField", "brand", "option"];
#scanning = false;
#scanIntervalId;
@ -35,10 +35,11 @@ export default class TransactionItemFormController extends Controller {
}
setPriceAndQuantity(event) {
const { brand, name } = event.target.form.elements;
const { brand, name, price, quantity, unit } = event.target.form.elements;
if (!brand.value || !name.value) {
this.priceTarget.value = "";
this.quantityTarget.value = "1";
price.value = "";
quantity.value = !unit.value ? "1" : "";
return;
}
@ -47,11 +48,11 @@ export default class TransactionItemFormController extends Controller {
option.value === name.value);
if (option != null) {
if (!this.priceTarget.value) {
this.priceTarget.value = option.getAttribute("data-price");
if (!price.value) {
price.value = option.getAttribute("data-price");
}
if (!this.quantityTarget.value || this.quantityTarget.value === "1") {
this.quantityTarget.value = option.getAttribute("data-quantity") || "1";
if (quantity.value || (!unit.value && quantity.value === "1")) {
quantity.value = option.getAttribute("data-quantity") || (!unit.value ? "1" : "");
}
}
}