made some changes in options

Signed-off-by: Pratiksha Sankhe <[email protected]>
elixir-cloud-aai · Aug 4, 2024 · 08adcd7 · 08adcd7
1 parent 70ccd90
commit 08adcd7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/packages/ecc-utils-design/demo/form/index.html b/packages/ecc-utils-design/demo/form/index.html
@@ -143,7 +143,7 @@
         type: "select",
         fieldOptions: {
           required: true,
-          options: [
+          selectOptions: [
             { label: "Male", value: "1" },
             { label: "Female", value: "2" },
             { label: "Don't want to disclose", value: "3" },

diff --git a/packages/ecc-utils-design/src/components/form/form.ts b/packages/ecc-utils-design/src/components/form/form.ts
@@ -39,9 +39,7 @@ export interface Field {
     accept?: string;
     returnIfEmpty?: string;
     tooltip?: string;
-  };
-  searchOptions?: {
-    options?: Array<{ label: string; value: string }>;
+    selectOptions?: Array<{ label: string; value: string }>;
   };
   arrayOptions?: {
     defaultInstances?: number;
@@ -190,14 +188,16 @@ export default class EccUtilsDesignForm extends LitElement {
           <sl-select
             class="select"
             ?required=${field.fieldOptions?.required}
-            value=${_.get(this.form, path)}
+            value=${_.get(this.form, path)?.value || ""}
             @sl-change=${(e: Event) => {
-              const { value } = e.target as HTMLSelectElement;
-              _.set(this.form, path, value);
+              const selectElement = e.target as HTMLSelectElement;
+              const { value } = selectElement;
+              const label = selectElement.selectedOptions[0].textContent;
+              _.set(this.form, path, { value, label });
               this.requestUpdate();
             }}
           >
-            ${field.searchOptions?.options?.map(
+            ${field.fieldOptions?.selectOptions?.map(
               (option) => html`
                 <sl-option value=${option.value}> ${option.label} </sl-option>
               `
@@ -524,6 +524,7 @@ export default class EccUtilsDesignForm extends LitElement {
             composed: true,
           });
           this.dispatchEvent(event);
+          console.log(this.form);
         }}
       >
         ${this.fields.map((field) => this.renderTemplate(field, "data"))}