Merge pull request #584 from nfdi4plants/Feature_Excel_EnableSelectio…

…nOfImportedTermsForTemplates

Enable selection of terms to import into excel

src/Client/Client.fsproj

@@ -35,6 +35,7 @@
     <Compile Include="Messages.fs" />
     <Compile Include="ARCitect\Interop.fs" />
     <Compile Include="ARCitect\ARCitect.fs" />
+    <Compile Include="Modals\ModalElements.fs" />
     <Compile Include="Modals\Util.fs" />
     <Compile Include="Modals\ContextMenus\Util.fs" />
     <Compile Include="Modals\ContextMenus\Base.fs" />
@@ -90,7 +91,7 @@
     <Compile Include="Pages\ProtocolTemplates\ProtocolState.fs" />
     <Compile Include="Pages\ProtocolTemplates\ProtocolSearchViewComponent.fs" />
     <Compile Include="Pages\ProtocolTemplates\ProtocolSearch.fs" />
-    <Compile Include="Pages\ProtocolTemplates\TemplateFromDB.fs" />
+    <Compile Include="Pages\ProtocolTemplates\SelectiveTemplateFromDB.fs" />
     <Compile Include="Pages\ProtocolTemplates\TemplateFromFile.fs" />
     <Compile Include="Pages\ProtocolTemplates\ProtocolView.fs" />
     <Compile Include="Pages\FilePicker\FilePickerView.fs" />

src/Client/GenericComponents.fs

@@ -10,6 +10,7 @@ module DaisyUiExtensions =
         static member active = prop.className "modal-open"
 
 type Components =
+
     static member DeleteButton(?children, ?props) =
         Daisy.button.button [
             button.square

src/Client/MainComponents/Widgets.fs

@@ -4,6 +4,9 @@ open Feliz
 open Feliz.DaisyUI
 open Browser.Types
 open LocalStorage.Widgets
+open Modals
+open Types.TableImport
+open Types.JsonImport
 
 module private InitExtensions =
 
@@ -212,6 +215,12 @@ type Widget =
     static member Templates (model: Model, dispatch, rmv: MouseEvent -> unit) =
         let templates, setTemplates = React.useState(model.ProtocolState.Templates)
         let config, setConfig = React.useState(TemplateFilterConfig.init)
+        let selectedColumnsLength =
+            if model.ProtocolState.TemplateSelected.IsSome then
+                model.ProtocolState.TemplateSelected.Value.Table.Columns.Length
+            else 0
+        let selectedColumns, setSelectedColumns = React.useState(SelectedColumns.init selectedColumnsLength)
+        let importTypeState, setImportTypeState = React.useState(SelectiveImportModalState.init)
         let filteredTemplates = Protocol.Search.filterTemplates (templates, config)
         React.useEffectOnce(fun _ -> Messages.Protocol.GetAllProtocolsRequest |> Messages.ProtocolMsg |> dispatch)
         React.useEffect((fun _ -> setTemplates model.ProtocolState.Templates), [|box model.ProtocolState.Templates|])
@@ -222,13 +231,38 @@ type Widget =
             ]
         let insertContent() =
             [
-                Html.div [
-                    Protocol.TemplateFromDB.addFromDBToTableButton model dispatch
-                ]
                 Html.div [
                     prop.style [style.maxHeight (length.px 350); style.overflow.auto]
                     prop.children [
-                        Protocol.TemplateFromDB.displaySelectedProtocolEle model dispatch
+                        SidebarComponents.SidebarLayout.LogicContainer [
+                            Html.div [
+                                SelectiveTemplateFromDBModal.ToProtocolSearchElement model dispatch
+                            ]
+                            if model.ProtocolState.TemplateSelected.IsSome then                    
+                                Html.div [
+                                    SelectiveImportModal.RadioPluginsBox(
+                                        "Import Type",
+                                        "fa-solid fa-cog",
+                                        importTypeState.ImportType,
+                                        "importType ",
+                                        [|
+                                            ARCtrl.TableJoinOptions.Headers, " Column Headers";
+                                            ARCtrl.TableJoinOptions.WithUnit, " ..With Units";
+                                            ARCtrl.TableJoinOptions.WithValues, " ..With Values";
+                                        |],
+                                        fun importType -> {importTypeState with ImportType = importType} |> setImportTypeState
+                                    )
+                                ]
+                                Html.div [
+                                    ModalElements.Box(
+                                        model.ProtocolState.TemplateSelected.Value.Name,
+                                        "",
+                                        SelectiveTemplateFromDBModal.displaySelectedProtocolElements(model, selectedColumns, setSelectedColumns, dispatch, false))
+                                ]
+                            Html.div [
+                                SelectiveTemplateFromDBModal.AddFromDBToTableButton model selectedColumns importTypeState dispatch
+                            ]
+                        ]
                     ]
                 ]
             ]

src/Client/Modals/ModalElements.fs

@@ -0,0 +1,108 @@
+namespace Modals
+
+open Feliz
+open Feliz.DaisyUI
+open Model
+open Messages
+open Shared
+open Types.TableImport
+
+open ARCtrl
+open JsonImport
+open Components
+open Fable.React.Helpers
+
+type ModalElements =
+
+    static member Button(text: string, onClickAction, buttonInput, ?isDisabled: bool) =
+        let isDisabled = defaultArg isDisabled false
+        Daisy.button.a [
+            button.success
+            button.wide
+            if isDisabled then
+                button.error
+            prop.disabled isDisabled
+            prop.onClick (fun _ -> onClickAction buttonInput)
+
+            prop.text text
+        ]
+
+    static member RadioPlugin(radioGroup: string, txt: string, isChecked, onChange: bool -> unit, ?isDisabled: bool) =
+        let isDisabled = defaultArg isDisabled false
+        Daisy.formControl [
+            Daisy.label [
+                prop.className [
+                    "cursor-pointer transition-colors"
+                    if isDisabled then
+                        "!cursor-not-allowed"
+                    else
+                        "hover:bg-base-300"
+                ]
+                prop.children [
+                    Daisy.radio [
+                        prop.disabled isDisabled
+                        radio.xs
+                        prop.name radioGroup
+                        prop.isChecked isChecked
+                        prop.onChange onChange
+                    ]
+                    Html.span [
+                        prop.className "text-sm"
+                        prop.text txt
+                    ]
+                ]
+            ]
+        ]
+
+    static member Box(title: string, icon: string, content: ReactElement, ?className: string list) =
+        Html.div [
+            prop.className [
+                "rounded shadow p-2 flex flex-col gap-2 border"
+                if className.IsSome then
+                    className.Value |> String.concat " "
+            ]
+            prop.children [
+                Html.h3 [
+                    prop.className "font-semibold gap-2 flex flex-row items-center"
+                    prop.children [
+                        Html.i [prop.className icon]
+                        Html.span title
+                    ]
+                ]
+                content
+            ]
+        ]
+
+    static member BoxWithChildren(children: ReactElement list, ?title: string, ?icon: string, ?className: string list) =
+        Html.div [
+            prop.className [
+                "rounded shadow p-2 flex flex-col gap-2 border"
+                if className.IsSome then
+                    className.Value |> String.concat " "
+            ]
+            prop.children [
+                Html.h3 [
+                    prop.className "font-semibold gap-2 flex flex-row items-center"
+                    if icon.IsSome || title.IsSome then
+                        prop.children [
+                            if icon.IsSome then
+                                Html.i [prop.className icon.Value]
+                            if title.IsSome then
+                                Html.span title.Value
+                        ]
+                    prop.children children
+                ]
+            ]
+        ]
+
+    static member SelectorButton<'a when 'a : equality> (targetselector: 'a, selector: 'a, setSelector: 'a -> unit, ?isDisabled) =
+        Daisy.button.button [
+            join.item
+            if isDisabled.IsSome then
+                prop.disabled isDisabled.Value
+            prop.style [style.flexGrow 1]
+            if (targetselector = selector) then
+                button.primary
+            prop.onClick (fun _ -> setSelector targetselector)
+            prop.text (string targetselector)
+        ]