feat: use autocomplete for prescribe

src/Client/App.fs

@@ -674,11 +674,11 @@ module private Elmish =
                 xs |> calc a w |> Resolved
         )
 
+
 open Elmish
 open Shared
 
 
-
 [<Literal>]
 let private themeDef = """
 responsiveFontSizes(createTheme())

src/Client/Client.fsproj

@@ -18,6 +18,7 @@
     <Compile Include="./Components/Router.fs" />
     <Compile Include="./Components/Context.fs" />
     <Compile Include="./Components/Localization.fs" />
+    <Compile Include="./Components/Autocomplete.fs" />
     <Compile Include="./Components/ElmishSelect.fs" />
     <Compile Include="./Components/StateSelect.fs" />
     <Compile Include="./Components/SimpleSelect.fs" />

src/Client/Components/Autocomplete.fs

@@ -0,0 +1,63 @@
+namespace Components
+
+open System
+open Fable.Core
+open Fable.React
+open Feliz
+open Browser.Types
+
+
+
+module Autocomplete =
+
+    open Elmish
+    open Fable.Core.JsInterop
+
+
+    [<JSX.Component>]
+    let View (props :
+            {|
+                label : string
+                selected : string option
+                values : string []
+                updateSelected : string option -> unit
+                isLoading : bool
+//                minWidht : int
+            |}
+        ) =
+
+        let handleChange =
+            fun ev ->
+                ev?target?innerText
+                |> string
+                |> function
+                | s when s |> String.IsNullOrWhiteSpace ||
+                         s = "undefined" -> None
+                | s -> s |> Some
+                |> fun x -> Logging.log "value is none: " x.IsNone; x
+                |> props.updateSelected
+
+
+        let renderInput lbl pars =
+            JSX.jsx """
+                <TextField {...pars} label={lbl} />
+            """
+
+        JSX.jsx
+            $"""
+        import InputLabel from '@mui/material/InputLabel';
+        import TextField from '@mui/material/TextField';
+        import Autocomplete from '@mui/material/Autocomplete';
+        import FormControl from '@mui/material/FormControl';
+
+        <Autocomplete
+            sx={ {| minWidth = 300 |} }
+            id={props.label}
+            value={props.selected |> Option.defaultValue ""}
+            onChange={handleChange}
+            options={props.values}
+            renderInput={renderInput props.label}
+        >
+        </Autocomplete>
+        """
+

src/Client/Pages/GenPres.fs

@@ -156,6 +156,7 @@ module GenPres =
                 </Typography>
             </React.Fragment>
             """
+
         let modalStyle =
             {|
                 position="absolute"

src/Client/Views/Prescribe.fs

@@ -81,7 +81,7 @@ module Prescribe =
             | CloseDialog -> { state with Dialog = [] }, Cmd.none
 
             | IndicationChange s ->
-                printfn $"indication change {s}"
+                printfn $"indication change {s}, is none: {s.IsNone}"
                 match scenarios with
                 | Resolved sc ->
                     if s |> Option.isNone then
@@ -150,6 +150,7 @@ module Prescribe =
 
         let context = React.useContext(Global.context)
         let lang = context.Localization
+        let isMobile = Mui.Hooks.useMediaQuery "(max-width:1200px)"
 
         let getTerm defVal term =
             props.localizationTerms
@@ -179,6 +180,15 @@ module Prescribe =
                 isLoading = isLoading
             |})
 
+        let autoComplete isLoading lbl selected dispatch xs =
+            Components.Autocomplete.View({|
+                updateSelected = dispatch
+                label = lbl
+                selected = selected
+                values = xs
+                isLoading = isLoading
+            |})
+
         let progress =
             match props.scenarios with
             | Resolved _ -> JSX.jsx $"<></>"
@@ -323,51 +333,73 @@ module Prescribe =
             import Stack from '@mui/material/Stack';
 
             <React.Fragment>
-                <Typography sx={ {| fontSize=14 |} } color="text.secondary" gutterBottom>
-                    {Terms.``Prescribe Scenarios`` |> getTerm "Medicatie scenario's"}
-                </Typography>
-                <Stack direction={stackDirection} spacing={3} >
-
+                <Stack direction="column" spacing={3}>
+                    <Typography sx={ {| fontSize=14 |} } color="text.secondary" gutterBottom>
+                        {Terms.``Prescribe Scenarios`` |> getTerm "Medicatie scenario's"}
+                    </Typography>
                     {
                         match props.scenarios with
                         | Resolved scrs -> false, scrs.Indication, scrs.Indications
                         | _ -> true, None, [||]
                         |> fun (isLoading, sel, items) ->
-                            items
-                            |> Array.map (fun s -> s, s)
-                            |> select isLoading (Terms.``Prescribe Indications`` |> getTerm "Indicaties") sel (IndicationChange >> dispatch)
-                    }
-                    {
-                        match props.scenarios with
-                        | Resolved scrs -> false, scrs.Medication, scrs.Medications
-                        | _ -> true, None, [||]
-                        |> fun (isLoading, sel, items) ->
-                            items
-                            |> Array.map (fun s -> s, s)
-                            |> select isLoading (Terms.``Prescribe Medications`` |> getTerm "Medicatie") sel (MedicationChange >> dispatch)
-                    }
-                    {
-                        match props.scenarios with
-                        | Resolved scrs -> false, scrs.Route, scrs.Routes
-                        | _ -> true, None, [||]
-                        |> fun (isLoading, sel, items) ->
-                            items
-                            |> Array.map (fun s -> s, s)
-                            |> select isLoading (Terms.``Prescribe Routes`` |> getTerm "Routes") sel (RouteChange >> dispatch)
-                    }
-                </Stack>
-                <Stack direction="column" sx={ {| mt = 1 |} } >
-                    {
-                        match props.scenarios with
-                        | Resolved sc ->
-                            sc.Medication,
-                            sc.Scenarios
-                        | _ -> None, [||]
-                        |> fun (med, scs) ->
-                            scs
-                            |> Array.map (displayScenario med)
-                        |> unbox |> React.fragment
+                            if isMobile then
+                                items
+                                |> Array.map (fun s -> s, s)
+                                |> select isLoading (Terms.``Prescribe Indications`` |> getTerm "Indicaties") sel (IndicationChange >> dispatch)
+                            else
+                                items
+                                |> autoComplete isLoading (Terms.``Prescribe Indications`` |> getTerm "Indicaties") sel (IndicationChange >> dispatch)
                     }
+                    <Stack direction={stackDirection} spacing={3} >
+                        {
+                            match props.scenarios with
+                            | Resolved scrs -> false, scrs.Medication, scrs.Medications
+                            | _ -> true, None, [||]
+                            |> fun (isLoading, sel, items) ->
+                                if isMobile then
+                                    items
+                                    |> Array.map (fun s -> s, s)
+                                    |> select isLoading (Terms.``Prescribe Medications`` |> getTerm "Medicatie") sel (MedicationChange >> dispatch)
+                                else
+                                    items
+                                    |> autoComplete isLoading (Terms.``Prescribe Medications`` |> getTerm "Medicatie") sel (MedicationChange >> dispatch)
+
+                        }
+                        {
+                            match props.scenarios with
+                            | Resolved scrs -> false, scrs.Route, scrs.Routes
+                            | _ -> true, None, [||]
+                            |> fun (isLoading, sel, items) ->
+                                if isMobile then
+                                    items
+                                    |> Array.map (fun s -> s, s)
+                                    |> select isLoading (Terms.``Prescribe Routes`` |> getTerm "Routes") sel (RouteChange >> dispatch)
+                                else
+                                    items
+                                    |> autoComplete isLoading (Terms.``Prescribe Routes`` |> getTerm "Routes") sel (RouteChange >> dispatch)
+                                
+                        }
+
+                        <Box sx={ {| mt=2 |} }>
+                            <Button variant="text" onClick={fun _ -> None |> RouteChange |> dispatch } fullWidth startIcon={Mui.Icons.Delete} >
+                                {Terms.Delete |> getTerm "Verwijder"}
+                            </Button>
+                        </Box>
+
+                    </Stack>
+                    <Stack direction="column" >
+                        {
+                            match props.scenarios with
+                            | Resolved sc ->
+                                sc.Medication,
+                                sc.Scenarios
+                            | _ -> None, [||]
+                            |> fun (med, scs) ->
+                                scs
+                                |> Array.map (displayScenario med)
+                            |> unbox |> React.fragment
+                        }
+                    </Stack>
                 </Stack>
             </React.Fragment>
             """