Update multiselect

rewiringamerica · Sep 14, 2023 · f34d4af · f34d4af
1 parent 1ed5797
commit f34d4af
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 74 deletions.
diff --git a/src/calculator-form.ts b/src/calculator-form.ts
@@ -88,7 +88,8 @@ const HOUSEHOLD_SIZE_OPTIONS: OptionParam[] = [1, 2, 3, 4, 5, 6, 7, 8].map(
 // }
 
 export const formTemplate = (
-  [zip, ownerStatus, projects, householdIncome, taxFiling, householdSize]: Array<string>,
+  [zip, ownerStatus, householdIncome, taxFiling, householdSize]: Array<string>,
+  projects: Array<string>,
   onSubmit: (e: SubmitEvent) => void,
 ) => html`
   <form @submit=${onSubmit}>
@@ -145,7 +146,6 @@ export const formTemplate = (
           id: 'projects',
           options: PROJECT_OPTIONS,
           currentValues: projects,
-          tabIndex: 0,
         })}
       </label>
     </div>

diff --git a/src/calculator.ts b/src/calculator.ts
@@ -74,8 +74,8 @@ export class RewiringAmericaCalculator extends LitElement {
   @property({ type: String, attribute: 'owner-status' })
   ownerStatus: OwnerStatus = 'homeowner';
 
-  @property({ type: String, attribute: 'projects'})
-  projects: string = 'heating'
+  @property({ type: Array, attribute: 'projects'})
+  projects: string[] = ['heating']
 
   @property({ type: String, attribute: 'household-income' })
   householdIncome: string = '0';
@@ -114,7 +114,6 @@ export class RewiringAmericaCalculator extends LitElement {
     task: async ([
       zip,
       owner_status,
-      projects,
       household_income,
       tax_filing,
       household_size,
@@ -126,7 +125,6 @@ export class RewiringAmericaCalculator extends LitElement {
       const query = new URLSearchParams({
         zip,
         owner_status,
-        projects,
         household_income,
         tax_filing,
         household_size,
@@ -142,7 +140,6 @@ export class RewiringAmericaCalculator extends LitElement {
     args: () => [
       this.zip,
       this.ownerStatus,
-      this.projects,
       this.householdIncome,
       this.taxFiling,
       this.householdSize,
@@ -160,11 +157,11 @@ export class RewiringAmericaCalculator extends LitElement {
                 [
                   this.zip,
                   this.ownerStatus,
-                  this.projects,
                   this.householdIncome,
                   this.taxFiling,
                   this.householdSize,
                 ],
+                this.projects,
                 (event: SubmitEvent) => this.submit(event),
               )}
         </div>

diff --git a/src/select.ts b/src/select.ts
@@ -19,19 +19,18 @@ export interface SelectParam {
 export interface MultiSelectParam {
   id: string;
   label?: string;
-  currentValues: string;
+  currentValues: string[];
   options: OptionParam[];
   helpText?: string;
   placeholder?: string;
   maxOptionsVisible?: number;
-  tabIndex?: number;
 }
 
 export const option = ({ label, value }: OptionParam, selected: boolean) =>
   html` <option value="${value}" ?selected=${selected}>${label}</option> `;
 
-export const multioption = ({ label, value }: OptionParam, selected: boolean) =>
-  html` <sl-option value="${value}" ?selected=${selected}>${label}</sl-option> `;
+export const multioption = ({ label, value }: OptionParam) =>
+  html` <sl-option value="${value}" >${label}</sl-option> `;
 
 export const select = ({
   id,
@@ -63,21 +62,20 @@ export const multiselect = ({
   helpText,
   placeholder,
   maxOptionsVisible,
-  tabIndex,
 }: MultiSelectParam) => {
   return html`
     <div>
       <sl-select
         id="${id}"
         name="${id}"
         label="${ifDefined(label)}"
-        value="${currentValues}"
+        value="${currentValues.join(' ')}"
         help-text="${ifDefined(helpText)}"
         placeholder="${ifDefined(placeholder)}"
         max-options-visible="${ifDefined(maxOptionsVisible)}"
-        tabindex="${ifDefined(tabIndex)}"
+        multiple
       >
-        ${options.map(o => multioption(o, o.value === currentValues))}
+        ${options.map(o => multioption(o))}
       </sl-select>
       <span class="focus"></span>
     </div>