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" />
@@ -52,8 +53,8 @@
     <Compile Include="Modals\CytoscapeView.fs" />
     <Compile Include="Modals\MoveColumn.fs" />
     <Compile Include="Modals\UpdateColumn.fs" />
-    <Compile Include="Modals\SelectiveImportModal.fs" />
     <Compile Include="Modals\SelectiveTemplateFromDB.fs" />
+    <Compile Include="Modals\SelectiveImportModal.fs" />
     <Compile Include="Modals\ModalProvider.fs" />
     <Compile Include="Spreadsheet\IO.fs" />
     <Compile Include="Spreadsheet\Types.fs" />

src/Client/MainComponents/Widgets.fs

@@ -4,8 +4,8 @@ open Feliz
 open Feliz.DaisyUI
 open Browser.Types
 open LocalStorage.Widgets
-open Modals.Template
-open Shared.DTOs.SelectedColumnsModalDto
+open Modals
+open SelectedColumns
 
 module private InitExtensions =
 

src/Client/Modals/ModalElements.fs

@@ -1,11 +1,11 @@
-module Modals.ModalElements
+module Modals
 
 open Feliz
 open Feliz.DaisyUI
 open Model
 open Messages
 open Shared
-open Shared.DTOs.SelectedColumnsModalDto
+open SelectedColumns
 
 open ARCtrl
 open JsonImport
@@ -14,6 +14,20 @@ 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 [
@@ -106,78 +120,3 @@ type ModalElements =
             prop.onClick (fun _ -> setSelector targetselector)
             prop.text (string targetselector)
         ]
-
-    static member RadioPluginsBox(boxName, icon, importType: TableJoinOptions, radioData: (TableJoinOptions * string)[], setImportType: TableJoinOptions -> unit) =
-        let myradio(target: TableJoinOptions, txt: string) =
-            let isChecked = importType = target
-            ModalElements.RadioPlugin("importType", txt, isChecked, fun (b: bool) -> if b then setImportType target)
-        ModalElements.Box (boxName, icon, React.fragment [
-            Html.div [
-                for i in 0..radioData.Length-1 do
-                    myradio(radioData.[i])
-            ]
-        ])
-
-    static member checkBox(columns: CompositeColumn [], index, selectionInformation: SelectedColumns, setSelectedColumns: SelectedColumns -> unit) =
-        Html.div [
-            prop.style [style.display.flex; style.justifyContent.center]
-            prop.children [
-                Daisy.checkbox [
-                    prop.type'.checkbox
-                    prop.style [
-                        style.height(length.perc 100)
-                    ]
-                    prop.isChecked
-                        (if selectionInformation.Columns.Length > 0 then
-                            selectionInformation.Columns.[index]
-                        else true)
-                    prop.onChange (fun (b: bool) ->
-                        if columns.Length > 0 then
-                            let selectedData = selectionInformation.Columns
-                            selectedData.[index] <- b
-                            {selectionInformation with Columns = selectedData} |> setSelectedColumns)
-                ]
-            ]
-        ]
-
-    static member TableWithImportColumnCheckboxes(table: ArcTable, ?selectionInformation: SelectedColumns, ?setSelectedColumns: SelectedColumns -> unit) =
-        let columns = table.Columns
-        let displayCheckBox =
-            //Determine whether to display checkboxes or not
-            selectionInformation.IsSome && setSelectedColumns.IsSome                    
-        Daisy.table [
-            prop.children [
-                Html.thead [
-                    Html.tr [
-                        for i in 0..columns.Length-1 do                            
-                            Html.th [
-                                Html.label [
-                                    prop.className "join flex flex-row centered gap-2"
-                                    prop.children [
-                                        if displayCheckBox then
-                                            ModalElements.checkBox(columns, i, selectionInformation.Value, setSelectedColumns.Value)
-                                        Html.text (columns.[i].Header.ToString())
-                                        Html.div [
-                                            prop.onClick (fun e ->
-                                                if columns.Length > 0 && selectionInformation.IsSome then
-                                                    let selectedData = selectionInformation.Value.Columns
-                                                    selectedData.[i] <- not selectedData.[i]
-                                                    {selectionInformation.Value with Columns = selectedData} |> setSelectedColumns.Value)
-                                        ]
-                                    ]
-                                ]
-                            ]
-                    ]
-                ]
-
-                Html.tbody [
-                    for ri in 0 .. (table.RowCount-1) do
-                        let row = table.GetRow(ri, true)
-                        Html.tr [
-                            for c in row do
-                                Html.td (c.ToString())
-                        ]
-                ]
-            ]
-        ]
-

src/Client/Modals/ModalProvider.fs

@@ -23,9 +23,9 @@ type ModalProvider =
         | TableModals.TermDetails term ->
             Modals.TermModal.Main (term, dispatch)
         | TableModals.SelectiveTemplateImportFromDB ->
-            Modals.Template.SelectiveTemplateFromDBModal.Main (model, dispatch)
+            Modals.SelectiveTemplateFromDBModal.Main (model, dispatch)
         | TableModals.SelectiveFileImport arcfile ->
-            Modals.Import.SelectiveImportModal.Main (arcfile, dispatch)
+            Modals.SelectiveImportModal.Main (arcfile, dispatch)
         | TableModals.BatchUpdateColumnValues (columnIndex, column) ->
             Modals.UpdateColumn.Main (columnIndex, column, dispatch)
         | TableModals.TableCellContext (mouseX, mouseY, ci, ri) ->

src/Client/Modals/SelectiveImportModal.fs

@@ -1,19 +1,16 @@
-namespace Modals.Import
+namespace Modals
 
 open Feliz
 open Feliz.DaisyUI
 open Model
 open Messages
 open Shared
-open Shared.DTOs.SelectedColumnsModalDto
+open SelectedColumns
 
 open ARCtrl
 open JsonImport
 open Components
 
-open Modals
-open Modals.ModalElements
-
 type SelectiveImportModal =
 
     static member private MetadataImport(isActive: bool, setActive: bool -> unit, disArcFile: ArcFilesDiscriminate) =
@@ -80,17 +77,17 @@ type SelectiveImportModal =
                     prop.className "overflow-x-auto"
                     prop.children [
                         if isActive then
-                            ModalElements.TableWithImportColumnCheckboxes(table0, selectedColumns, setSelectedColumns)
+                            SelectiveTemplateFromDBModal.TableWithImportColumnCheckboxes(table0, selectedColumns, setSelectedColumns)
                         else
-                            ModalElements.TableWithImportColumnCheckboxes(table0)
+                            SelectiveTemplateFromDBModal.TableWithImportColumnCheckboxes(table0)
                     ]
                 ]
             ]
         ],
         className = [if isActive then "!bg-primary !text-primary-content"])
 
     [<ReactComponent>]
-    static member Main(import: ArcFiles, dispatch, rmv) =
+    static member Main (import: ArcFiles, dispatch, rmv) =
         let state, setState = React.useState(SelectiveImportModalState.init)
         let tables, disArcfile =
             match import with
@@ -131,7 +128,7 @@ type SelectiveImportModal =
                                 Components.DeleteButton(props=[prop.onClick rmv])
                             ]
                         ]
-                        ModalElements.RadioPluginsBox(
+                        SelectiveTemplateFromDBModal.RadioPluginsBox(
                             "Import Type",
                             "fa-solid fa-cog",
                             state.ImportType,