Enable selection of terms to import into excel

src/Client/Client.fsproj

@@ -23,6 +23,7 @@
     <Compile Include="OfficeInterop\InteropLogging.fs" />
     <Compile Include="OfficeInterop\ExcelUtil.fs" />
     <Compile Include="OfficeInterop\OfficeInterop.fs" />
+    <Compile Include="States\SelectedColumns.fs" />
     <Compile Include="States\DataAnnotator.fs" />
     <Compile Include="States\ARCitect.fs" />
     <Compile Include="States\SpreadsheetInterface.fs" />
@@ -35,6 +36,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" />
@@ -51,6 +53,7 @@
     <Compile Include="Modals\CytoscapeView.fs" />
     <Compile Include="Modals\MoveColumn.fs" />
     <Compile Include="Modals\UpdateColumn.fs" />
+    <Compile Include="Modals\SelectiveTemplateFromDB.fs" />
     <Compile Include="Modals\SelectiveImportModal.fs" />
     <Compile Include="Modals\ModalProvider.fs" />
     <Compile Include="Spreadsheet\IO.fs" />
@@ -90,7 +93,6 @@
     <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\TemplateFromFile.fs" />
     <Compile Include="Pages\ProtocolTemplates\ProtocolView.fs" />
     <Compile Include="Pages\FilePicker\FilePickerView.fs" />

src/Client/MainComponents/Widgets.fs

@@ -4,6 +4,8 @@ open Feliz
 open Feliz.DaisyUI
 open Browser.Types
 open LocalStorage.Widgets
+open Modals
+open SelectedColumns
 
 module private InitExtensions =
 
@@ -211,6 +213,8 @@ type Widget =
     [<ReactComponent>]
     static member Templates (model: Model, dispatch, rmv: MouseEvent -> unit) =
         let templates, setTemplates = React.useState(model.ProtocolState.Templates)
+        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 config, setConfig = React.useState(TemplateFilterConfig.init)
         let filteredTemplates = Protocol.Search.filterTemplates (templates, config)
         React.useEffectOnce(fun _ -> Messages.Protocol.GetAllProtocolsRequest |> Messages.ProtocolMsg |> dispatch)
@@ -223,12 +227,12 @@ type Widget =
         let insertContent() =
             [
                 Html.div [
-                    Protocol.TemplateFromDB.addFromDBToTableButton model dispatch
+                    SelectiveTemplateFromDBModal.displaySelectedProtocolElements(model, selectedColumns, setSelectedColumns, dispatch)
                 ]
                 Html.div [
                     prop.style [style.maxHeight (length.px 350); style.overflow.auto]
                     prop.children [
-                        Protocol.TemplateFromDB.displaySelectedProtocolEle model dispatch
+                        SelectiveTemplateFromDBModal.displaySelectedProtocolElements(model, selectedColumns, setSelectedColumns, dispatch)
                     ]
                 ]
             ]

src/Client/Modals/ModalElements.fs

@@ -0,0 +1,122 @@
+module Modals
+
+open Feliz
+open Feliz.DaisyUI
+open Model
+open Messages
+open Shared
+open SelectedColumns
+
+open ARCtrl
+open JsonImport
+open Components
+open Fable.React.Helpers
+
+type ModalElements =
+
+    static member LogicContainer (children: ReactElement list) =
+        Html.div [
+        //     prop.className "border-l-4 border-transparent px-4 py-2 shadow-md"
+        //     prop.style [
+        //         let rndVal = rnd.Next(30,70)
+        //         let colorArr = [|NFDIColors.LightBlue.Lighter10; NFDIColors.Mint.Lighter10;|]
+        //         style.custom("borderImageSlice", "1")
+        //         style.custom("borderImageSource", $"linear-gradient({colorArr.[if order then 0 else 1]} {100-rndVal}%%, {colorArr.[if order then 1 else 0]})")
+        //         order <- not order
+        //     ]
+            prop.className "relative flex p-4 animated-border shadow-md gap-4 flex-col" //experimental
+            prop.children children
+        ]
+
+    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)
+        ]

src/Client/Modals/ModalProvider.fs

@@ -22,6 +22,8 @@ type ModalProvider =
             Modals.ResetTable.Main dispatch
         | TableModals.TermDetails term ->
             Modals.TermModal.Main (term, dispatch)
+        | TableModals.SelectiveTemplateImportFromDB ->
+            Modals.SelectiveTemplateFromDBModal.Main (model, dispatch)
         | TableModals.SelectiveFileImport arcfile ->
             Modals.SelectiveImportModal.Main (arcfile, dispatch)
         | TableModals.BatchUpdateColumnValues (columnIndex, column) ->