proper stock management

Former-commit-id: 8ad99ba36c2ed44192c6474bdaed3a5658467f13
This commit is contained in:
Ben
2022-04-29 19:42:58 +01:00
parent 815b453738
commit 6be27d553a

View File

@@ -1,5 +1,5 @@
import { RegisterComponent, Component, SideLoad } from './components.mjs'; import { RegisterComponent, Component, SideLoad } from './components.mjs';
import { AddProductToBasket } from '../basket.mjs'; import * as Basket from '../basket.mjs';
import * as LocalStorageListener from '../local-storage-listener.mjs'; import * as LocalStorageListener from '../local-storage-listener.mjs';
import * as Auth from '../auth.mjs'; import * as Auth from '../auth.mjs';
@@ -149,6 +149,9 @@ class ProductListing extends Component {
<span class="product-quantity">&nbsp;{this.state.stock} in stock</span> <span class="product-quantity">&nbsp;{this.state.stock} in stock</span>
</div> </div>
<br>
<div class="amount-in-basket">0 In Basket</div>
${localStorage.getItem('stock-mode') === 'true' ${localStorage.getItem('stock-mode') === 'true'
? /* html */` ? /* html */`
<div class="product-stock-mode"> <div class="product-stock-mode">
@@ -233,9 +236,14 @@ class ProductListing extends Component {
const increaseQuantityButton = this.root.querySelector('.increase-quantity'); const increaseQuantityButton = this.root.querySelector('.increase-quantity');
const reduceQuantityButton = this.root.querySelector('.reduce-quantity'); const reduceQuantityButton = this.root.querySelector('.reduce-quantity');
const addToBasket = this.root.querySelector('.add-to-basket-button'); const addToBasket = this.root.querySelector('.add-to-basket-button');
this.root.querySelector('.amount-in-basket').innerText = `${Basket.GetItemAmountBasket(this.state.id)} In Basket`;
quantityInput.value = 1; quantityInput.value = 1;
if (this.state.stock === 0) { if (this.state.stock - Basket.GetItemAmountBasket(this.state.id) < 1) {
quantityInput.value = 0;
}
if (this.state.stock === 0 || parseInt(quantityInput.value) === 0) {
quantityInput.value = 0; quantityInput.value = 0;
increaseQuantityButton.disabled = true; increaseQuantityButton.disabled = true;
reduceQuantityButton.disabled = true; reduceQuantityButton.disabled = true;
@@ -246,14 +254,14 @@ class ProductListing extends Component {
quantityInput.addEventListener('change', () => { quantityInput.addEventListener('change', () => {
quantityInput.value = parseInt(quantityInput.value); quantityInput.value = parseInt(quantityInput.value);
if (quantityInput.value > this.state.stock) { if (quantityInput.value > this.state.stock + Basket.GetItemAmountBasket(this.state.id)) {
quantityInput.value = this.state.stock; quantityInput.value = this.state.stock;
} }
}); });
increaseQuantityButton.addEventListener('click', () => { increaseQuantityButton.addEventListener('click', () => {
const quantity = parseInt(quantityInput.value); const quantity = parseInt(quantityInput.value);
if (quantity < this.state.stock) { if (quantity + Basket.GetItemAmountBasket(this.state.id) < this.state.stock) {
quantityInput.value = quantity + 1; quantityInput.value = quantity + 1;
} }
}); });
@@ -282,8 +290,17 @@ class ProductListing extends Component {
const brick = this.state.type === 'brick'; const brick = this.state.type === 'brick';
const modifier = brick ? this.root.querySelector('.brick-colour-selector-select').value : undefined; const modifier = brick ? this.root.querySelector('.brick-colour-selector-select').value : undefined;
AddProductToBasket(this.state.id, this.state.type, Math.abs(parseInt(quantityInput.value)), modifier); Basket.AddProductToBasket(this.state.id, this.state.type, Math.abs(parseInt(quantityInput.value)), modifier);
this.root.querySelector('.amount-in-basket').innerText = `${Basket.GetItemAmountBasket(this.state.id)} In Basket`;
quantityInput.value = 1; quantityInput.value = 1;
if (this.state.stock - Basket.GetItemAmountBasket(this.state.id) < 1) {
quantityInput.value = 0;
quantityInput.value = 0;
increaseQuantityButton.disabled = true;
reduceQuantityButton.disabled = true;
addToBasket.disabled = true;
addToBasket.innerText = 'Out of Stock';
}
}); });
} }
} }