From acc2ef57e90f9c1bdb14183140a32609b1aafab8 Mon Sep 17 00:00:00 2001 From: Chaitanya674 Date: Wed, 6 Mar 2024 18:32:09 +0530 Subject: [PATCH] feat(wes-create-run.ts): added a dropdown to lit-wes added a dropdown in design and made a function in ecc-client-lit-ga4gh-wes which set the options for the workflow type and workflow version but the function is having trouble in accessing the form-data so commented please check the function fix #180 --- .../wes-create-run/wes-create-run.ts | 77 ++++++++++++++++++- .../src/components/form/form.styles.ts | 4 + .../src/components/form/form.ts | 47 ++++++++++- 3 files changed, 124 insertions(+), 4 deletions(-) diff --git a/packages/ecc-client-lit-ga4gh-wes/src/components/wes-create-run/wes-create-run.ts b/packages/ecc-client-lit-ga4gh-wes/src/components/wes-create-run/wes-create-run.ts index 3244b7e7..5248ab2c 100644 --- a/packages/ecc-client-lit-ga4gh-wes/src/components/wes-create-run/wes-create-run.ts +++ b/packages/ecc-client-lit-ga4gh-wes/src/components/wes-create-run/wes-create-run.ts @@ -21,7 +21,8 @@ interface Field { | "array" | "switch" | "file" - | "group"; + | "group" + | "select"; fieldOptions?: { required?: boolean; default?: string | boolean; @@ -29,6 +30,7 @@ interface Field { accept?: string; returnIfEmpty?: string; tooltip?: string; + options?: Array<{ label: string; value: string }>; }; arrayOptions?: { defaultInstances?: number; @@ -62,21 +64,23 @@ export class WESCreateRun extends LitElement { { key: "workflow_type", label: "Type", - type: "text", + type: "select", fieldOptions: { required: true, tooltip: "The type of workflow language and must be CWL or WDL currently.", + options: [], }, }, { key: "workflow_type_version", label: "Type version", - type: "text", + type: "select", fieldOptions: { required: true, tooltip: "The version of the workflow language submitted and must be one supported by this WES instance.", + options: [], }, }, { @@ -129,6 +133,73 @@ export class WESCreateRun extends LitElement { }, ]; + // async connectedCallback() { + // super.connectedCallback(); + // await this.updateDropdownOptions(); + // } + + // async updateDropdownOptions() { + // try { + // const serviceInfoResponse = await fetch(`${this.baseURL}/service-info`); + // if (!serviceInfoResponse.ok) { + // throw new Error( + // `Error fetching service info: ${serviceInfoResponse.statusText}` + // ); + // } + + // const serviceInfo = await serviceInfoResponse.json(); + + // const workflowTypeDropdown = this.fields.find( + // (field) => field.key === "workflow_type" + // ); + // if ( + // workflowTypeDropdown && + // workflowTypeDropdown.fieldOptions && + // serviceInfo && + // serviceInfo.workflow_type_versions + // ) { + // const workflowTypeOptions = Object.keys( + // serviceInfo.workflow_type_versions + // ).map((key) => ({ + // label: key, + // value: key, + // })); + // workflowTypeDropdown.fieldOptions.options = workflowTypeOptions; + // } + + // const selectedWorkflowType = this.fields + // .find((field) => field.key === "workflow_type") + // ?.toString(); + // console.log(selectedWorkflowType); + // const workflowTypeVersionDropdown = this.fields.find( + // (field) => field.key === "workflow_type_version" + // ); + + // if ( + // selectedWorkflowType && + // workflowTypeVersionDropdown && + // workflowTypeVersionDropdown.fieldOptions && + // serviceInfo && + // serviceInfo.workflow_type_versions && + // serviceInfo.workflow_type_versions[selectedWorkflowType] + // ) { + // const versionsObject = + // serviceInfo.workflow_type_versions[selectedWorkflowType]; + // const dynamicKeys = Object.keys(versionsObject); + + // const firstVersionSet = versionsObject[dynamicKeys[0]]; + + // workflowTypeVersionDropdown.fieldOptions.options = + // firstVersionSet.workflow_type_version.map((version: string) => ({ + // label: version, + // value: version, + // })); + // } + // } catch (error) { + // console.error(error); + // } + // } + async submitForm(form: any) { Object.keys(form).forEach((key) => { this.form.append(key, form[key]); diff --git a/packages/ecc-utils-design/src/components/form/form.styles.ts b/packages/ecc-utils-design/src/components/form/form.styles.ts index e1d7d32b..16e47c0d 100644 --- a/packages/ecc-utils-design/src/components/form/form.styles.ts +++ b/packages/ecc-utils-design/src/components/form/form.styles.ts @@ -12,6 +12,10 @@ const styles = css` margin-top: 0.5rem; margin-bottom: 0.5rem; } + form sl-dropdown { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } form sl-switch { margin-top: 0.5rem; margin-bottom: 0.5rem; diff --git a/packages/ecc-utils-design/src/components/form/form.ts b/packages/ecc-utils-design/src/components/form/form.ts index 6989818e..e8ac45a0 100644 --- a/packages/ecc-utils-design/src/components/form/form.ts +++ b/packages/ecc-utils-design/src/components/form/form.ts @@ -1,5 +1,8 @@ import { html, LitElement, TemplateResult } from "lit"; import { property, state } from "lit/decorators.js"; +import "@shoelace-style/shoelace/dist/components/dropdown/dropdown.js"; +import "@shoelace-style/shoelace/dist/components/menu/menu.js"; +import "@shoelace-style/shoelace/dist/components/menu-item/menu-item.js"; import "@shoelace-style/shoelace/dist/components/input/input.js"; import "@shoelace-style/shoelace/dist/components/button/button.js"; import "@shoelace-style/shoelace/dist/components/switch/switch.js"; @@ -29,7 +32,8 @@ interface Field { | "array" | "switch" | "file" - | "group"; + | "group" + | "select"; fieldOptions?: { required?: boolean; default?: string | boolean; @@ -37,6 +41,7 @@ interface Field { accept?: string; returnIfEmpty?: string; tooltip?: string; + options?: Array<{ label: string; value: string }>; }; arrayOptions?: { defaultInstances?: number; @@ -201,6 +206,46 @@ export default class EccUtilsDesignForm extends LitElement { `; } + if (field.type === "select" && field.fieldOptions?.options) { + if (!_.get(this.form, path) && !this.hasUpdated) { + _.set( + this.form, + path, + field.fieldOptions?.default || + field.fieldOptions?.options[0]?.value || + "" + ); + } + + return html` + + ${field.label} + + ${field.fieldOptions?.options.map( + (option) => html` + + ${option.label} + + ` + )} + + + `; + } + if (!_.get(this.form, path)) { if (field.fieldOptions?.default && !this.hasUpdated) { _.set(this.form, path, field.fieldOptions.default);