1- import { onMount , onCleanup , createSignal , createResource , Switch , Match , For , Show } from "solid-js" ;
1+ import {
2+ onMount ,
3+ onCleanup ,
4+ createSignal ,
5+ createResource ,
6+ Switch ,
7+ Match ,
8+ For ,
9+ Show ,
10+ } from "solid-js" ;
211import { useParams } from "@solidjs/router" ;
312
413import { FormEditor } from "@bpmn-io/form-js-editor" ;
5- import Drawer from ' @corvu/drawer' // 'corvu/drawer'
14+ import Drawer from " @corvu/drawer" ; // 'corvu/drawer'
615
716import FilterFormComponentsModule from "./formJsExtensions/FilterFormComponentsModule" ;
817import CustomFormFieldsModule from "./formJsExtensions/customFormFields" ;
918
1019import { saveFormSchema } from "../../api/screener" ;
1120import { fetchScreenerBenefit } from "../../api/benefit" ;
12- import { extractFormPaths , extractJsonSchemaPaths } from "../../utils/formSchemaUtils" ;
21+ import {
22+ extractFormPaths ,
23+ extractJsonSchemaPaths ,
24+ } from "../../utils/formSchemaUtils" ;
1325import Loading from "../Loading" ;
1426
1527import type { Benefit , BenefitDetail } from "../../types" ;
1628
17-
1829import "@bpmn-io/form-js/dist/assets/form-js.css" ;
1930import "@bpmn-io/form-js-editor/dist/assets/form-js-editor.css" ;
2031
21-
2232function FormEditorView ( { project, formSchema, setFormSchema } ) {
2333 const [ isUnsaved , setIsUnsaved ] = createSignal ( false ) ;
2434 const [ isSaving , setIsSaving ] = createSignal ( false ) ;
@@ -31,7 +41,7 @@ function FormEditorView({ project, formSchema, setFormSchema }) {
3141 if ( ! benefitDetails ?. length ) return [ ] ;
3242 const screenerId = params . projectId ;
3343 return Promise . all (
34- benefitDetails . map ( b => fetchScreenerBenefit ( screenerId , b . id ) )
44+ benefitDetails . map ( ( b ) => fetchScreenerBenefit ( screenerId , b . id ) )
3545 ) ;
3646 }
3747 ) ;
@@ -51,8 +61,8 @@ function FormEditorView({ project, formSchema, setFormSchema }) {
5161 formEditor = new FormEditor ( {
5262 container,
5363 additionalModules : [
54- FilterFormComponentsModule ,
55- CustomFormFieldsModule
64+ // FilterFormComponentsModule,
65+ CustomFormFieldsModule ,
5666 ] ,
5767 } ) ;
5868
@@ -108,7 +118,10 @@ function FormEditorView({ project, formSchema, setFormSchema }) {
108118 </ div >
109119 </ Match >
110120 < Match when = { isSaving ( ) } >
111- < div onClick = { handleSave } class = "btn-default btn-gray cursor-not-allowed" >
121+ < div
122+ onClick = { handleSave }
123+ class = "btn-default btn-gray cursor-not-allowed"
124+ >
112125 Saving...
113126 </ div >
114127 </ Match >
@@ -126,9 +139,9 @@ function FormEditorView({ project, formSchema, setFormSchema }) {
126139 ) ;
127140}
128141
129-
130142const FormValidationDrawer = ( { formSchema, benefits } ) => {
131- const formOutputs = ( ) => formSchema ( ) ? extractFormPaths ( formSchema ( ) ) : [ ] ;
143+ const formOutputs = ( ) =>
144+ formSchema ( ) ? extractFormPaths ( formSchema ( ) ) : [ ] ;
132145
133146 // Extract expected inputs from all benefits' checks
134147 const expectedInputs = ( ) => {
@@ -138,7 +151,7 @@ const FormValidationDrawer = ({ formSchema, benefits }) => {
138151 for ( const benefit of allBenefits ) {
139152 for ( const check of benefit . checks || [ ] ) {
140153 const paths = extractJsonSchemaPaths ( check . inputDefinition ) ;
141- paths . forEach ( p => pathSet . add ( p ) ) ;
154+ paths . forEach ( ( p ) => pathSet . add ( p ) ) ;
142155 }
143156 }
144157 return Array . from ( pathSet ) ;
@@ -148,10 +161,10 @@ const FormValidationDrawer = ({ formSchema, benefits }) => {
148161 const formOutputSet = ( ) => new Set ( formOutputs ( ) ) ;
149162
150163 const satisfiedInputs = ( ) =>
151- expectedInputs ( ) . filter ( p => formOutputSet ( ) . has ( p ) ) ;
164+ expectedInputs ( ) . filter ( ( p ) => formOutputSet ( ) . has ( p ) ) ;
152165
153166 const missingInputs = ( ) =>
154- expectedInputs ( ) . filter ( p => ! formOutputSet ( ) . has ( p ) ) ;
167+ expectedInputs ( ) . filter ( ( p ) => ! formOutputSet ( ) . has ( p ) ) ;
155168
156169 return (
157170 < Drawer side = "right" >
@@ -173,7 +186,11 @@ const FormValidationDrawer = ({ formSchema, benefits }) => {
173186 fixed inset-0 z-50
174187 data-transitioning:transition-colors data-transitioning:duration-500
175188 data-transitioning:ease-[cubic-bezier(0.32,0.72,0,1)]"
176- style = { { 'background-color' : `rgb(0 0 0 / ${ 0.5 * props . openPercentage } )` } }
189+ style = { {
190+ "background-color" : `rgb(0 0 0 / ${
191+ 0.5 * props . openPercentage
192+ } )`,
193+ } }
177194 />
178195 < Drawer . Content
179196 class = "
@@ -189,8 +206,17 @@ const FormValidationDrawer = ({ formSchema, benefits }) => {
189206
190207 { /* Form Outputs Section */ }
191208 < div class = "mt-4 mr-10 px-4 pb-10" >
192- < h3 class = "text-lg font-semibold text-gray-700 mb-2" > Form Outputs</ h3 >
193- < For each = { formOutputs ( ) } fallback = { < p class = "text-gray-500 italic text-sm" > No form fields defined yet.</ p > } >
209+ < h3 class = "text-lg font-semibold text-gray-700 mb-2" >
210+ Form Outputs
211+ </ h3 >
212+ < For
213+ each = { formOutputs ( ) }
214+ fallback = {
215+ < p class = "text-gray-500 italic text-sm" >
216+ No form fields defined yet.
217+ </ p >
218+ }
219+ >
194220 { ( path ) => (
195221 < div class = "py-2 px-3 mb-2 bg-white rounded border border-gray-300 font-mono text-sm" >
196222 { path }
@@ -201,8 +227,17 @@ const FormValidationDrawer = ({ formSchema, benefits }) => {
201227
202228 { /* Missing Inputs Section */ }
203229 < div class = "mt-4 mr-10 px-4" >
204- < h3 class = "text-lg font-semibold text-red-900 mb-2" > Missing Inputs</ h3 >
205- < For each = { missingInputs ( ) } fallback = { < p class = "text-gray-500 italic text-sm" > All required inputs are satisfied!</ p > } >
230+ < h3 class = "text-lg font-semibold text-red-900 mb-2" >
231+ Missing Inputs
232+ </ h3 >
233+ < For
234+ each = { missingInputs ( ) }
235+ fallback = {
236+ < p class = "text-gray-500 italic text-sm" >
237+ All required inputs are satisfied!
238+ </ p >
239+ }
240+ >
206241 { ( path ) => (
207242 < div class = "py-2 px-3 mb-2 bg-red-50 rounded border border-red-300 font-mono text-sm text-red-800" >
208243 { path }
@@ -213,8 +248,17 @@ const FormValidationDrawer = ({ formSchema, benefits }) => {
213248
214249 { /* Satisfied Inputs Section */ }
215250 < div class = "mt-4 mr-10 px-4" >
216- < h3 class = "text-lg font-semibold text-green-900 mb-2" > Satisfied Inputs</ h3 >
217- < For each = { satisfiedInputs ( ) } fallback = { < p class = "text-gray-500 italic text-sm" > No inputs satisfied yet.</ p > } >
251+ < h3 class = "text-lg font-semibold text-green-900 mb-2" >
252+ Satisfied Inputs
253+ </ h3 >
254+ < For
255+ each = { satisfiedInputs ( ) }
256+ fallback = {
257+ < p class = "text-gray-500 italic text-sm" >
258+ No inputs satisfied yet.
259+ </ p >
260+ }
261+ >
218262 { ( path ) => (
219263 < div class = "py-2 px-3 mb-2 bg-green-50 rounded border border-green-300 font-mono text-sm text-green-800" >
220264 { path }
@@ -227,7 +271,7 @@ const FormValidationDrawer = ({ formSchema, benefits }) => {
227271 </ >
228272 ) }
229273 </ Drawer >
230- )
231- }
274+ ) ;
275+ } ;
232276
233277export default FormEditorView ;
0 commit comments