proper stock management
Former-commit-id: 8ad99ba36c2ed44192c6474bdaed3a5658467f13
This commit is contained in:
@@ -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"> {this.state.stock} in stock</span>
|
<span class="product-quantity"> {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';
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user