feat(soffit-form): submit form

.gitignore

@@ -19,6 +19,7 @@ Desktop.ini
 *.d.ts
 *.js
 !*.config.js
+!**/res/*.js
 dist
 build
 

ui/demo-pwa/esbuild.mjs

@@ -21,12 +21,14 @@ const srcFilename = 'alwatr-pwa';
 const cleanMode = process.argv.includes('--clean');
 const watchMode = process.argv.includes('--watch');
 const debugMode = process.argv.includes('--debug');
+const prettyMode = process.argv.includes('--pretty');
 
 logger.logOther(banner);
 
 logger.logProperty('cleanMode', cleanMode);
 logger.logProperty('watchMode', watchMode);
 logger.logProperty('debugMode', debugMode);
+logger.logProperty('prettyMode', prettyMode);
 
 if (cleanMode) {
   logger.logMethod('cleanDist');
@@ -44,7 +46,7 @@ const esbuildContext = await esbuild.context({
   format: 'esm',
   conditions: debugMode ? ['development'] : undefined,
 
-  minify: true,
+  minify: !prettyMode,
   treeShaking: true,
   sourcemap: true,
   sourcesContent: debugMode,

ui/demo-pwa/res/service-worker.js

@@ -0,0 +1 @@
+console.log('Service worker not build in development mode.')

ui/ui-kit/src/button/button.ts

@@ -6,15 +6,15 @@ import {AlwatrSurface} from '../card/surface.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'alwatr-button': AlwatrTextField;
+    'alwatr-button': AlwatrButton;
   }
 }
 
 /**
  * Alwatr outlined text field.
  */
 @customElement('alwatr-button')
-export class AlwatrTextField extends AlwatrSurface {
+export class AlwatrButton extends AlwatrSurface {
   static override styles = [
     AlwatrSurface.styles,
     css`

ui/ui-kit/src/card/icon-box.ts

@@ -33,7 +33,7 @@ export class AlwatrIconBox extends AlwatrSurface {
       :host {
         display: block;
         padding: 0;
-        transition-property: color, background-color;
+        transition-property: color, background-color, opacity;
         transition-duration: var(--sys-motion-duration-small);
         transition-timing-function: var(--sys-motion-easing-linear);
         font-family: var(--sys-typescale-body-small-font-family-name);

ui/ui-kit/src/card/surface.ts

@@ -56,6 +56,7 @@ export class AlwatrSurface extends AlwatrDummyElement {
       border-radius: var(--sys-radius-medium);
       overflow: hidden;
       overflow: clip;
+      transition: opacity var(--sys-motion-duration-small) var(--sys-motion-easing-linear);
     }
 
     :host([outlined]) {

ui/ui-kit/src/text-field/text-field.ts

@@ -46,8 +46,8 @@ export class AlwatrTextField extends AlwatrSurface {
         background-color: transparent;
       }
 
-      :host([stated][outlined]) {
-        box-shadow: none;
+      :host([stated][outlined]:hover) {
+        --_surface-elevation: var(--sys-surface-elevation-0);
       }
 
       input {
@@ -84,6 +84,8 @@ export class AlwatrTextField extends AlwatrSurface {
     `,
   ];
 
+  name = this.getAttribute('name') ?? 'unknown';
+
   @property({type: String})
     type: InputType = 'text';
 
@@ -92,6 +94,18 @@ export class AlwatrTextField extends AlwatrSurface {
 
   inputElement: HTMLInputElement | null = null;
 
+  get value(): string {
+    return this.inputElement?.value ?? '';
+  }
+  set value(val: string) {
+    if (this.inputElement != null) {
+      this.inputElement.value = val;
+    }
+    else {
+      this.updateComplete.then(() => {this.value = val;});
+    }
+  }
+
   override render(): unknown {
     this._logger.logMethod('render');
     return html`<input type=${this.type} placeholder=${ifDefined(this.placeholder)}></input>`;

uniquely/soffit-pwa/package.json

@@ -35,6 +35,7 @@
   "devDependencies": {
     "@alwatr/element": "^0.28.0",
     "@alwatr/ui-kit": "^0.28.0",
+    "@alwatr/fetch": "^0.28.0",
     "@web/dev-server": "^0.1.35",
     "@webcomponents/webcomponentsjs": "^2.7.0",
     "esbuild": "^0.17.3",

uniquely/soffit-pwa/res/config.js

@@ -0,0 +1,4 @@
+window.appConfig = {
+  api: 'http://localhost:8000',
+  token: 'YOUR_SECRET_TOKEN',
+};

uniquely/soffit-pwa/res/index.html

@@ -7,6 +7,7 @@
   <title>بازرگانی سافیت</title>
 
   <link rel="stylesheet" href="alwatr-pwa.css" />
+  <script type="module" src="config.js"></script>
   <script type="module" src="alwatr-pwa.js"></script>
 
   <meta name="color-scheme" content="light dark" />

uniquely/soffit-pwa/res/service-worker.js

@@ -0,0 +1 @@
+console.log('Service worker not build in development mode.')

uniquely/soffit-pwa/src/lottery-box.ts

@@ -1,4 +1,4 @@
-import {customElement, AlwatrSmartElement, css, html, property} from '@alwatr/element';
+import {customElement, AlwatrSmartElement, css, html, state} from '@alwatr/element';
 
 import '@alwatr/ui-kit/card/icon-box.js';
 import './lottery-form.js';
@@ -26,21 +26,46 @@ export class AlwatrLotteryBox extends AlwatrSmartElement {
     }
   `;
 
-  @property({type: Boolean})
+  @state()
     expanded = false;
 
+  @state()
+    submitted = false;
+
   override render(): unknown {
     super.render();
     return html`
-      <alwatr-icon-box .content=${_lotteryContent} elevated="3" ?stated=${!this.expanded} @click=${this._click}>
-        ${this.expanded
-          ? html`<alwatr-lottery-form></alwatr-lottery-form>`
-          : html`فرم شرکت در قرعه‌کشی میدکس`}
-      </alwatr-icon-box>
+      <alwatr-icon-box
+        .content=${_lotteryContent}
+        elevated="3"
+        ?stated=${!this.expanded}
+        ?highlight=${!this.expanded && !this.submitted}
+        @click=${this._click}
+      >${this._boxContentTemplate()}</alwatr-icon-box>
     `;
   }
 
-  _click(): void {
-    if (!this.expanded) this.expanded = true;
+
+  private _boxContentTemplate(): unknown {
+    if (this.expanded) {
+      return html`<alwatr-lottery-form @form-submitted=${this._formSubmitted}></alwatr-lottery-form>`;
+    }
+    else if (this.submitted) {
+      return html`اطلاعات شما با موفقیت ذخیره شد.`;
+    }
+    else {
+      return html`فرم شرکت در قرعه‌کشی میدکس`;
+    }
+  }
+
+  private _click(): void {
+    this._logger.logMethod('_click');
+    if (!this.expanded && !this.submitted) this.expanded = true;
+  }
+
+  private _formSubmitted(): void {
+    this._logger.logMethod('_formSubmitted');
+    this.expanded = false;
+    this.submitted = true;
   }
 }

uniquely/soffit-pwa/src/lottery-form.ts

@@ -1,15 +1,20 @@
-import {customElement, AlwatrSmartElement, css, html, map} from '@alwatr/element';
+import {customElement, AlwatrSmartElement, css, html, property} from '@alwatr/element';
+// import {fetch} from '@alwatr/fetch';
+
+// import {config} from './tech-dep/config.js';
+
+import type {AlwatrTextField} from '@alwatr/ui-kit/text-field/text-field.js';
+
 import '@alwatr/ui-kit/text-field/text-field.js';
 import '@alwatr/ui-kit/button/button.js';
+import './tech-dep/radio-group.js';
 
 declare global {
   interface HTMLElementTagNameMap {
     'alwatr-lottery-form': AlwatrLotteryForm;
   }
 }
 
-const _activityType = ['پخش کننده تایل', 'نصاب تایل', 'فروشنده و مغازه‌دار', 'پیمانکار', 'سازنده', 'سایر'];
-
 /**
  * Soffit lottery form element
  */
@@ -18,6 +23,12 @@ export class AlwatrLotteryForm extends AlwatrSmartElement {
   static override styles = css`
     :host {
       display: block;
+      transition: opacity var(--sys-motion-duration-small) var(--sys-motion-easing-linear);
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: var(--sys-surface-disabled-opacity);
     }
 
     alwatr-text-field {
@@ -72,48 +83,64 @@ export class AlwatrLotteryForm extends AlwatrSmartElement {
     }
   `;
 
+  @property({type: Boolean, reflect: true})
+    disabled = false;
+
+  async submit(): Promise<void> {
+    const bodyJson = this.getFormData();
+    this._logger.logMethodArgs('_submit', bodyJson);
+    this.disabled = true;
+    await new Promise((resolve) => setTimeout(resolve, 3_000));
+    this.disabled = false;
+    this.dispatchEvent(new CustomEvent('form-submitted'));
+    // return fetch({
+    //   url: config.api + '/',
+    //   token: config.token,
+    //   method: 'PUT',
+    //   bodyJson,
+    // });
+  }
+
+  getFormData(): Record<string, unknown> {
+    this._logger.logMethod('_getInputData');
+    const data: Record<string, string> = {};
+    for (const inputElement of this.renderRoot.querySelectorAll<AlwatrTextField>(
+        'alwatr-text-field,alwatr-radio-group',
+    )) {
+      data[inputElement.name] = inputElement.value;
+    }
+    return data;
+  }
+
   override render(): unknown {
     super.render();
     return html`
       <alwatr-text-field
-        id="code"
+        name="code"
         type="text"
         outlined
         active-outline
         stated
         placeholder="شماره قرعه‌کشی"
       ></alwatr-text-field>
       <alwatr-text-field
-        id="name"
+        name="name"
         type="text"
         outlined
         active-outline
         stated
         placeholder="نام و نام‌خانوادگی"
       ></alwatr-text-field>
       <alwatr-text-field
-        id="phone"
+        name="phone"
         type="tel"
         outlined
         active-outline
         stated
         placeholder="شماره موبایل"
       ></alwatr-text-field>
-      <fieldset>
-        <legend>نوع فعالیت:</legend>
-        ${this._radioButtonTemplate()}
-      </fieldset>
-      <alwatr-button outlined>ارسال فرم</alwatr-button>
+      <alwatr-radio-group></alwatr-radio-group>
+      <alwatr-button outlined @click=${this.submit}>ارسال فرم</alwatr-button>
     `;
   }
-
-  protected _radioButtonTemplate(): unknown {
-    return map(_activityType, (activity, index) => {
-      const id = 'activityType' + index;
-      return html`<div>
-        <input type="radio" id=${id} name="activity" value="${activity}" />
-        <label for=${id}>${activity}</label>
-      </div>`;
-    });
-  }
 }

uniquely/soffit-pwa/src/tech-dep/config.ts

@@ -0,0 +1,20 @@
+declare global {
+  // eslint-disable-next-line no-var
+  var appConfig: Record<string, string | number | boolean | undefined> | undefined;
+}
+
+const debugConfig = localStorage.getItem('DEBUG_CONFIG');
+if (debugConfig != null) {
+  globalThis.appConfig = JSON.parse(debugConfig);
+}
+
+function getConfKey<T extends string | number | boolean>(key: string): T {
+  const val = globalThis.appConfig?.[key];
+  if (val == null) throw new Error('invalid_app_config', {cause: {key, val}});
+  return val as T;
+}
+
+export const config = {
+  api: getConfKey<string>('api'),
+  token: getConfKey<string>('token'),
+};