refactor(soffit-pwa): form template

Alwatr · Mar 19, 2023 · becacfc · becacfc
1 parent a19dd64
commit becacfc
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/uniquely/soffit-pwa/src/ui/stuff/lottery-form.ts b/uniquely/soffit-pwa/src/ui/stuff/lottery-form.ts
@@ -72,7 +72,7 @@ export class AlwatrLotteryForm extends LocalizeMixin(SignalMixin(AlwatrBaseEleme
   @property({type: Boolean, reflect: true})
     disabled = false;
 
-  async submit(): Promise<void> {
+  protected async submit(): Promise<void> {
     const bodyJson = this.getFormData();
     this._logger.logMethodArgs('submit', bodyJson);
 
@@ -91,11 +91,11 @@ export class AlwatrLotteryForm extends LocalizeMixin(SignalMixin(AlwatrBaseEleme
     }
   }
 
-  async cancel(): Promise<void> {
+  protected async cancel(): Promise<void> {
     this.dispatchEvent(new CustomEvent('form-canceled'));
   }
 
-  getFormData(): Record<string, string | number | boolean> {
+  protected getFormData(): Record<string, string | number | boolean> {
     this._logger.logMethod('getFormData');
     const data: Record<string, string> = {};
     for (const inputElement of this.renderRoot.querySelectorAll<AlwatrTextField>(
@@ -107,6 +107,14 @@ export class AlwatrLotteryForm extends LocalizeMixin(SignalMixin(AlwatrBaseEleme
   }
 
   override render(): unknown {
+    this._logger.logMethod('render');
+    return [
+      this.inputTemplate(),
+      this.partButtonTemplate(),
+    ];
+  }
+
+  protected inputTemplate(): unknown {
     this._logger.logMethod('render');
     return html`
       <alwatr-text-field
@@ -128,18 +136,28 @@ export class AlwatrLotteryForm extends LocalizeMixin(SignalMixin(AlwatrBaseEleme
       <alwatr-text-field
         .name=${'phone'}
         .type=${'tel'}
+        .placeholder=${message('phone_number')}
         outlined
         active-outline
         stated
-        .placeholder=${message('phone_number')}
       ></alwatr-text-field>
       <alwatr-radio-group
         .name=${'activity'}
         .options=${this._radioGroupOptions}
       ></alwatr-radio-group>
+    `;
+  }
+
+  protected partButtonTemplate(): unknown {
+    return html`
       <div class="button-container">
-        <alwatr-button outlined @click=${this.submit}>${message('submit_form')}</alwatr-button>
-        <alwatr-button @click=${this.cancel}>${message('cancel')}</alwatr-button>
+        <alwatr-button
+          .icon=${'checkmark-done-outline'}
+          @click=${this.submit}
+          outlined
+        >${message('submit_form')}
+        </alwatr-button>
+        <alwatr-button .icon=${'close-outline'} @click=${this.cancel}>${message('cancel')}</alwatr-button>
       </div>
     `;
   }

diff --git a/uniquely/soffit-pwa/src/ui/stuff/supply-chain-form.ts b/uniquely/soffit-pwa/src/ui/stuff/supply-chain-form.ts
@@ -20,7 +20,7 @@ declare global {
 export class AlwatrSupplyChainForm extends AlwatrLotteryForm {
   static override formId = 'supply-chain';
 
-  override render(): unknown {
+  override inputTemplate(): unknown {
     this._logger.logMethod('render');
     return html`
       <alwatr-text-field
@@ -47,10 +47,6 @@ export class AlwatrSupplyChainForm extends AlwatrLotteryForm {
         active-outline
         stated
       ></alwatr-text-field>
-      <div class="button-container">
-        <alwatr-button outlined @click=${this.submit}>${message('submit_form')}</alwatr-button>
-        <alwatr-button @click=${this.cancel}>${message('cancel')}</alwatr-button>
-      </div>
     `;
   }
 }