feat(soffit-pwa): product page

Alwatr · Feb 8, 2023 · 090a615 · 090a615
1 parent 23f475e
commit 090a615
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 24 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -20,6 +20,7 @@
   "cSpell.words": [
     "alwatr",
     "calt",
+    "checkmark",
     "cssprop",
     "currentcolor",
     "esbuild",

diff --git a/uniquely/soffit-pwa/src/page-home.ts b/uniquely/soffit-pwa/src/page-home.ts
@@ -26,10 +26,6 @@ export class AlwatrPageHome extends AlwatrSmartElement {
       overflow-y: auto;
     }
 
-    header {
-      padding: calc(2 * var(--sys-spacing-track));
-    }
-
     .logo {
       display: block;
       width: 100%;
@@ -111,6 +107,7 @@ export class AlwatrPageHome extends AlwatrSmartElement {
     if (this.content == null) return nothing;
     yield this._boxTemplate(this.content.about);
     yield map(this.content.productList, this._boxTemplate);
+    yield this._boxTemplate(this.content.catalogue);
     yield html`<alwatr-lottery-box></alwatr-lottery-box>`;
     yield map(this.content.socialList, this._boxTemplate);
     yield html`<alwatr-supply-chain-box></alwatr-supply-chain-box>`;

diff --git a/uniquely/soffit-pwa/src/page-product.ts b/uniquely/soffit-pwa/src/page-product.ts
@@ -1,24 +1,18 @@
-import {customElement, AlwatrSmartElement, css, html} from '@alwatr/element';
+import {customElement, AlwatrSmartElement, css, html, state, map, nothing, unsafeHTML} from '@alwatr/element';
+import {contextConsumer} from '@alwatr/signal';
 
 import '@alwatr/ui-kit/button/icon-button.js';
+import '@alwatr/ui-kit/card/image-box.js';
 import '@alwatr/ui-kit/top-app-bar/top-app-bar.js';
 
-import type {IconButtonContent} from '@alwatr/ui-kit/button/icon-button.js';
-import type {TopAppBarContent} from '@alwatr/ui-kit/top-app-bar/top-app-bar.js';
+import type {ProductType, ProductPageContent} from './type.js';
 
 declare global {
   interface HTMLElementTagNameMap {
     'alwatr-page-product': AlwatrPageHome;
   }
 }
 
-const topBarContent: TopAppBarContent = {
-  type: 'center',
-  headline: 'یک عدد عنوان خوب',
-  startIcon: {icon: 'arrow-back', flipRtl: true},
-  endIconList: [{icon: 'earth-outline'}, {icon: 'ellipsis-vertical'}],
-};
-
 /**
  * Soffit Product Page
 */
@@ -36,22 +30,47 @@ export class AlwatrPageHome extends AlwatrSmartElement {
       display: flex;
       flex-wrap: wrap;
       padding: calc(2 * var(--sys-spacing-track));
-      gap: calc(2 * var(--sys-spacing-track));
+      gap: var(--sys-spacing-track);
+    }
+
+    alwatr-icon-box {
+      width: 40%;
+      flex-grow: 1;
+    }
+
+    alwatr-icon-box[wide] {
+      width: 100%;
     }
   `;
 
+  @state() content?: ProductPageContent;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    this._signalListenerList.push(
+        contextConsumer.subscribe<ProductPageContent>('product_page_content', (content) => {
+          this.content = content;
+        }),
+    );
+  }
+
   override render(): unknown {
     this._logger.logMethod('render');
-
     return html`
-      <alwatr-top-app-bar .content=${<TopAppBarContent>{...topBarContent, type: 'center'}}></alwatr-top-app-bar>
-      <alwatr-top-app-bar .content=${<TopAppBarContent>{...topBarContent, type: 'small'}}></alwatr-top-app-bar>
-      <alwatr-top-app-bar .content=${<TopAppBarContent>{...topBarContent, type: 'large'}}></alwatr-top-app-bar>
-      <main>
-        <alwatr-icon-button .content=${<IconButtonContent>{icon: 'bulb'}}></alwatr-icon-button>
-        <alwatr-icon-button .content=${<IconButtonContent>{icon: 'bulb'}}></alwatr-icon-button>
-        <alwatr-icon-button .content=${<IconButtonContent>{icon: 'bulb'}} disabled></alwatr-icon-button>
-      </main>
+      <alwatr-top-app-bar .content=${this.content?.topAppBar}></alwatr-top-app-bar>
+      <main>${this._menuTemplate()}</main>
     `;
   }
+
+  protected* _menuTemplate(): unknown {
+    this._logger.logMethodArgs('_menuTemplate', {...this.content});
+    if (this.content == null) return nothing;
+    yield map(this.content.product, this._boxTemplate);
+  }
+
+  protected _boxTemplate(box: ProductType): unknown {
+    const slot = box.slot == null ? nothing : unsafeHTML(box.slot);
+    return html`<alwatr-image-box .content=${box} ?wide=${box.wide}>${slot}</alwatr-image-box>`;
+  }
 }