From 7a3bf62de13d605da159752a9efab0e3af7ec8cf Mon Sep 17 00:00:00 2001 From: lorenzofox3 Date: Thu, 21 Mar 2024 10:45:10 +0100 Subject: [PATCH] improve single page app --- .../cart/cart-product-item.component.js | 4 ++-- apps/restaurant-cashier/cart/cart.page.js | 5 ++++- apps/restaurant-cashier/components/ui-icon.component.js | 1 + apps/restaurant-cashier/dashboard/dashboard.page.js | 5 ++++- .../products/edit/edit-product.page.js | 9 ++++++--- .../products/list/product-list-item.component.js | 4 ++-- .../products/list/product-list.page.js | 5 ++++- apps/restaurant-cashier/products/new/new-product.page.js | 5 ++++- apps/restaurant-cashier/readme.md | 1 - apps/restaurant-cashier/router/page-outlet.component.js | 5 +++-- apps/restaurant-cashier/users/me.page.js | 5 ++++- apps/restaurant-cashier/utils/components.js | 2 -- 12 files changed, 34 insertions(+), 17 deletions(-) delete mode 100644 apps/restaurant-cashier/utils/components.js diff --git a/apps/restaurant-cashier/cart/cart-product-item.component.js b/apps/restaurant-cashier/cart/cart-product-item.component.js index 2d03a39..cc83f4b 100644 --- a/apps/restaurant-cashier/cart/cart-product-item.component.js +++ b/apps/restaurant-cashier/cart/cart-product-item.component.js @@ -1,8 +1,8 @@ import { compose } from '../utils/functions.js'; -import { reactiveProps } from '../utils/components.js'; import { withView } from '@cofn/view'; +import { withProps } from '@cofn/controllers'; -const compositionPipeline = compose([reactiveProps(['product']), withView]); +const compositionPipeline = compose([withProps(['product']), withView]); export const CartProductItem = compositionPipeline(({ html, $host }) => { return ({ properties: { product } }) => { diff --git a/apps/restaurant-cashier/cart/cart.page.js b/apps/restaurant-cashier/cart/cart.page.js index 1bbc73c..7eb65bb 100644 --- a/apps/restaurant-cashier/cart/cart.page.js +++ b/apps/restaurant-cashier/cart/cart.page.js @@ -33,5 +33,8 @@ export const loadPage = ({ define }) => { 'app-cart-product-list', withCartController(withView(CartProductList)), ); - return template.content.cloneNode(true); + return { + title: 'Current cart', + content: template.content.cloneNode(true), + }; }; diff --git a/apps/restaurant-cashier/components/ui-icon.component.js b/apps/restaurant-cashier/components/ui-icon.component.js index 667dfd8..ac5bd55 100644 --- a/apps/restaurant-cashier/components/ui-icon.component.js +++ b/apps/restaurant-cashier/components/ui-icon.component.js @@ -15,6 +15,7 @@ svg { `; +// todo add script to cherry pick the icons used const spriteURL = `/node_modules/bootstrap-icons/bootstrap-icons.svg`; export const UIIcon = function* ({ $host, $root }) { diff --git a/apps/restaurant-cashier/dashboard/dashboard.page.js b/apps/restaurant-cashier/dashboard/dashboard.page.js index 7bad9ef..4369b23 100644 --- a/apps/restaurant-cashier/dashboard/dashboard.page.js +++ b/apps/restaurant-cashier/dashboard/dashboard.page.js @@ -24,5 +24,8 @@ export const loadPage = ({ define }) => { define('app-top-items-chart', chart(TopItemsChart)); define('app-top-items-revenue-chart', chart(TopItemsRevenueChart)); - return template.content.cloneNode(true); + return { + title: 'Dashboard', + content: template.content.cloneNode(true), + }; }; diff --git a/apps/restaurant-cashier/products/edit/edit-product.page.js b/apps/restaurant-cashier/products/edit/edit-product.page.js index 9f66ce6..e65b809 100644 --- a/apps/restaurant-cashier/products/edit/edit-product.page.js +++ b/apps/restaurant-cashier/products/edit/edit-product.page.js @@ -1,10 +1,10 @@ import { createElement } from '../../utils/dom.js'; import { productListService } from '../product-list.service.js'; import { fromForm } from '../product-list.model.js'; -import { reactiveProps } from '../../utils/components.js'; import { withView } from '@cofn/view'; import { ImageUploader } from '../image-uploader/image-uploader.component.js'; import { compose } from '../../utils/functions.js'; +import { withProps } from '@cofn/controllers'; export const loadPage = async ({ define, state }) => { define('app-edit-product', EditProductForm); define('app-image-uploader', ImageUploader, { @@ -23,10 +23,13 @@ export const loadPage = async ({ define, state }) => { }); const el = createElement('app-edit-product'); el.product = product; - return el; + return { + title: `Edit ${product.title}`, + content: el, + }; }; -const wrapComponent = compose([reactiveProps(['product']), withView]); +const wrapComponent = compose([withProps(['product']), withView]); const EditProductForm = wrapComponent(({ html, router, $host }) => { return ({ properties: { product } }) => html` diff --git a/apps/restaurant-cashier/products/list/product-list-item.component.js b/apps/restaurant-cashier/products/list/product-list-item.component.js index 5df7ae6..2dee868 100644 --- a/apps/restaurant-cashier/products/list/product-list-item.component.js +++ b/apps/restaurant-cashier/products/list/product-list-item.component.js @@ -1,8 +1,8 @@ import { withView } from '@cofn/view'; import { compose } from '../../utils/functions.js'; -import { reactiveProps } from '../../utils/components.js'; +import { withProps } from '@cofn/controllers'; -const compositionPipeline = compose([reactiveProps(['product']), withView]); +const compositionPipeline = compose([withProps(['product']), withView]); export const ProductListItem = compositionPipeline(({ html, $host }) => { const onclickHandler = (ev) => { diff --git a/apps/restaurant-cashier/products/list/product-list.page.js b/apps/restaurant-cashier/products/list/product-list.page.js index 5886286..409a6fb 100644 --- a/apps/restaurant-cashier/products/list/product-list.page.js +++ b/apps/restaurant-cashier/products/list/product-list.page.js @@ -19,5 +19,8 @@ export const loadPage = async ({ define, state }) => { if (state?.sku) { element.setAttribute('target-sku', state.sku); } - return element; + return { + title: 'Products', + content: element, + }; }; diff --git a/apps/restaurant-cashier/products/new/new-product.page.js b/apps/restaurant-cashier/products/new/new-product.page.js index 2687f4c..eac3377 100644 --- a/apps/restaurant-cashier/products/new/new-product.page.js +++ b/apps/restaurant-cashier/products/new/new-product.page.js @@ -87,5 +87,8 @@ export const loadPage = async ({ router }) => { 'image-uploaded', ({ detail }) => (form.querySelector('[name=image]').value = detail.url), ); - return page; + return { + title: 'New product', + content: page, + }; }; diff --git a/apps/restaurant-cashier/readme.md b/apps/restaurant-cashier/readme.md index 4e2c4b6..38291d2 100644 --- a/apps/restaurant-cashier/readme.md +++ b/apps/restaurant-cashier/readme.md @@ -10,4 +10,3 @@ It solves most of the problematics you can get while building a single page app: * form and custom validation * user preferences management (theme, animation) * advanced components (select list, file upload with drag and drop) - diff --git a/apps/restaurant-cashier/router/page-outlet.component.js b/apps/restaurant-cashier/router/page-outlet.component.js index c56ac05..2ca8b18 100644 --- a/apps/restaurant-cashier/router/page-outlet.component.js +++ b/apps/restaurant-cashier/router/page-outlet.component.js @@ -23,7 +23,7 @@ export const PageOutlet = pageOutlet(function* ({ $host, preferencesService }) { const { page } = yield; if (page) { const { motion } = preferencesService.getState(); - const autofocusElement = page.querySelector('[autofocus]'); + const autofocusElement = page.content.querySelector('[autofocus]'); if ( !document.startViewTransition || motion?.computed === motionSettings.reduced @@ -44,6 +44,7 @@ export const PageOutlet = pageOutlet(function* ({ $host, preferencesService }) { } function updateDOM({ page }) { - $host.replaceChildren(page); + $host.replaceChildren(page.content); + document.title = page.title; } }); diff --git a/apps/restaurant-cashier/users/me.page.js b/apps/restaurant-cashier/users/me.page.js index 2fe60d0..0762e72 100644 --- a/apps/restaurant-cashier/users/me.page.js +++ b/apps/restaurant-cashier/users/me.page.js @@ -21,5 +21,8 @@ export const loadPage = async ({ define, preferencesService }) => { withPreferencesController(withView(PreferencesComponent)), ); - return template.content.cloneNode(true); + return { + title: 'Settings', + content: template.content.cloneNode(true), + }; }; diff --git a/apps/restaurant-cashier/utils/components.js b/apps/restaurant-cashier/utils/components.js deleted file mode 100644 index 461d138..0000000 --- a/apps/restaurant-cashier/utils/components.js +++ /dev/null @@ -1,2 +0,0 @@ -import { withProps } from '@cofn/controllers'; -export const reactiveProps = withProps;