From a375acf5878169161f0001fb165f5ce292cb39ab Mon Sep 17 00:00:00 2001 From: Ben <36240171+benkyd@users.noreply.github.com> Date: Fri, 29 Apr 2022 16:59:33 +0100 Subject: [PATCH] stock mode Former-commit-id: 4d13d0bb063d9c69ab8e581f7ecc16e82236d24a --- README.md | Bin 9912 -> 10180 bytes client/public/components/checkout.mjs | 2 +- client/public/components/components.mjs | 11 ++- client/public/components/css/stock-audit.css | 12 +-- client/public/components/navbar.mjs | 6 ++ client/public/components/product-list.mjs | 30 +++--- client/public/components/product-listing.mjs | 56 ++++++++++- client/public/components/stock-audit.mjs | 91 +++++++++++++++--- .../components/super-compact-listing.mjs | 19 ++-- docs/API.md | 4 +- src/controllers/brick-controller.js | 44 +++++++++ src/controllers/set-controller.js | 44 +++++++++ src/routes/api.js | 2 + src/routes/order-router.js | 17 ++++ src/routes/stock-router.js | 63 ++++++++++++ 15 files changed, 346 insertions(+), 55 deletions(-) create mode 100644 src/routes/stock-router.js diff --git a/README.md b/README.md index de33908f8bdd02121b2d819b9b3af824598b7f70..e274abecf5c51c9edfae7cebe6bddf4ba6d45a77 100644 GIT binary patch delta 253 zcmXAjI}QRd3`D1cMdAh^rJ_Teg934eu*rTTc7u{ElpKPKAkom!(bI4VZo$~w#Gdi9 zGtb?7fBzPfH4L`Mx7T!eHE2;$x5#`iut=;Y1lC0NfFnGeicVy;==F8zIF&wgVo;*d zS*>)Y@|a`BOOafu?uMMBO4I=Zx3i-aG=OC%a3C@e7~@E+Mq$yBXF960eqGZUW3Sj* T?#b~U;!Dh+yB_iJDSnGTElM&E delta 12 UcmX@&zr%OK70%5MxSq%W04oUwLjV8( diff --git a/client/public/components/checkout.mjs b/client/public/components/checkout.mjs index 88e1fc3..bb6ebd8 100644 --- a/client/public/components/checkout.mjs +++ b/client/public/components/checkout.mjs @@ -73,7 +73,7 @@ class Checkout extends Component {
- +
diff --git a/client/public/components/components.mjs b/client/public/components/components.mjs index 371ab48..5a6532d 100644 --- a/client/public/components/components.mjs +++ b/client/public/components/components.mjs @@ -29,7 +29,7 @@ export class Component extends HTMLElement { // Override these OnMount() { } - Update() { } + Update(attributeChanged, newState) { } Render() { Component.__WARN('Render'); } OnRender() { } OnUnMount() { } @@ -78,9 +78,12 @@ export class Component extends HTMLElement { attributeChangedCallback(name, newValue) { console.log(`attribute changed: ${name} ${newValue}`); - this.setState({ ...this.state, [name]: newValue }); - this.Update(); - this.__INVOKE_RENDER(); + this.Update(Object.bind(this, name, { + ...this.state, + [name]: newValue, + })); + this.setState({ ...this.state, [name]: newValue }, false); + this.__INVOKE_RENDER(Object.bind(this)); } get getState() { diff --git a/client/public/components/css/stock-audit.css b/client/public/components/css/stock-audit.css index eb51dca..b90eb25 100644 --- a/client/public/components/css/stock-audit.css +++ b/client/public/components/css/stock-audit.css @@ -47,17 +47,11 @@ .menu-content { max-width: fit-content; - display: none; + display: flex; flex-direction: column; align-items: flex-start; - min-width: 0; - margin-top: 1em; -} - -.details-open { - display: flex; - position: static; width: auto; + margin-top: 1em; } .product-details-content-item { @@ -67,4 +61,4 @@ .menu-content-item { width: 100%; margin-bottom: 1em; -} \ No newline at end of file +} diff --git a/client/public/components/navbar.mjs b/client/public/components/navbar.mjs index 8a2152c..480fddb 100644 --- a/client/public/components/navbar.mjs +++ b/client/public/components/navbar.mjs @@ -93,6 +93,12 @@ class NavBar extends Component { const admin = e.value; if (admin) { this.root.querySelector('.stock-mode').style.display = 'flex'; + + if (localStorage.getItem('stock-mode') === 'true') { + this.root.querySelector('.stock-slider').checked = true; + } else { + this.root.querySelector('.stock-slider').checked = false; + } } else { this.root.querySelector('.stock-mode').style.display = 'none'; } diff --git a/client/public/components/product-list.mjs b/client/public/components/product-list.mjs index b889747..489c483 100644 --- a/client/public/components/product-list.mjs +++ b/client/public/components/product-list.mjs @@ -38,20 +38,22 @@ class ProductList extends Component { if (!augmentable) { return ''; } - return /* html */` -
-
- Refine results -
-
-
- Weight - Tag - -
-
-
- `; + // next time :( + // return /* html */` + //
+ //
+ // Refine results + //
+ //
+ //
+ // Weight + // Tag + // + //
+ //
+ //
+ // `; + return ''; } Render() { diff --git a/client/public/components/product-listing.mjs b/client/public/components/product-listing.mjs index 60e8da6..1975705 100644 --- a/client/public/components/product-listing.mjs +++ b/client/public/components/product-listing.mjs @@ -1,5 +1,7 @@ import { RegisterComponent, Component, SideLoad } from './components.mjs'; import { AddProductToBasket } from '../basket.mjs'; +import * as LocalStorageListener from '../localstorage-listener.mjs'; +import * as Auth from '../auth.mjs'; class ProductListing extends Component { static __IDENTIFY() { return 'product-listing'; } @@ -142,11 +144,22 @@ class ProductListing extends Component {
- +  {this.state.stock} in stock
+ ${localStorage.getItem('stock-mode') === 'true' + ? /* html */` +
+ Change Stock + + +
+ ` + : '' + } +
@@ -178,6 +191,37 @@ class ProductListing extends Component { } OnRender() { + LocalStorageListener.ListenOnKey('stock-mode', () => { + this.__INVOKE_RENDER(); + }); + + if (localStorage.getItem('stock-mode') === 'true') { + const updateStockButton = this.root.querySelector('.product-stock-mode-button'); + updateStockButton.addEventListener('click', async () => { + const input = this.root.querySelector('.product-stock-mode-input'); + const stock = parseInt(input.value); + this.state.stock = stock; + this.__INVOKE_RENDER(); + + // tell the server to update the stock + const productId = this.state.id; + const productType = this.state.type; + + const params = { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${await Auth.GetToken()}`, + }, + body: JSON.stringify({ + new_stock_level: stock, + }), + }; + + fetch(`/api/auth/staff/stock/${productType}/${productId}`, params).then(response => response.json()).then(data => console.log(data)); + }); + } + const backButton = this.root.querySelector('.back-button-svg'); backButton.addEventListener('click', () => { @@ -188,8 +232,16 @@ class ProductListing extends Component { const quantityInput = this.root.querySelector('.quantity-input'); const increaseQuantityButton = this.root.querySelector('.increase-quantity'); const reduceQuantityButton = this.root.querySelector('.reduce-quantity'); + const addToBasket = this.root.querySelector('.add-to-basket-button'); quantityInput.value = 1; + if (this.state.stock === 0) { + quantityInput.value = 0; + increaseQuantityButton.disabled = true; + reduceQuantityButton.disabled = true; + addToBasket.disabled = true; + addToBasket.innerText = 'Out of Stock'; + } quantityInput.addEventListener('change', () => { quantityInput.value = parseInt(quantityInput.value); @@ -225,8 +277,6 @@ class ProductListing extends Component { })); // add quantity to basket and then update the basket count - const addToBasket = this.root.querySelector('.add-to-basket-button'); - addToBasket.addEventListener('click', () => { // if it is a brick, get potential modifier from the drop down menu const brick = this.state.type === 'brick'; diff --git a/client/public/components/stock-audit.mjs b/client/public/components/stock-audit.mjs index d212b7c..8736664 100644 --- a/client/public/components/stock-audit.mjs +++ b/client/public/components/stock-audit.mjs @@ -12,14 +12,12 @@ class StockEditor extends Component { template: /* html */`
Stock Editor
-
+ -
+