Skip to content

Commit

Permalink
Fix template import height for smaller viewports 🐛
Browse files Browse the repository at this point in the history
  • Loading branch information
@Freymaurer
Freymaurer committed Feb 26, 2025
1 parent a134e7a commit 3a27455
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 105 deletions.
22 changes: 5 additions & 17 deletions src/Client/MainComponents/Widgets.fs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@ type Widget =
]
]
Html.div [
prop.className "p-2 max-h-[80vh] overflow-visible"
prop.className "p-2 max-h-[80vh] overflow-visible flex flex-col"
prop.children [
content
]
Expand All @@ -223,24 +223,12 @@ type Widget =
static member Templates (model: Model, importTypeStateData, dispatch, rmv: MouseEvent -> unit) =
let isProtocolSearch, setProtocolSearch = React.useState(true)
React.useEffectOnce(fun _ -> Messages.Protocol.GetAllProtocolsRequest |> Messages.ProtocolMsg |> dispatch)
let selectContent() =
Protocol.SearchContainer.Main(model, setProtocolSearch, importTypeStateData, dispatch)
let insertContent() =
Html.div [
prop.style [style.maxHeight (length.px 350); style.overflow.auto]
prop.className "flex flex-col gap-2"
prop.children (SelectiveTemplateFromDB.Main(model, true, setProtocolSearch, importTypeStateData, dispatch))
]

let content =
Html.div [
prop.children [
if isProtocolSearch then
selectContent ()
else
insertContent ()
]
]
if isProtocolSearch then
Protocol.SearchContainer.Main(model, setProtocolSearch, importTypeStateData, dispatch)
else
SelectiveTemplateFromDB.Main(model, true, setProtocolSearch, importTypeStateData, dispatch)

let prefix = WidgetLiterals.Templates
Widget.Base(content, prefix, rmv, prefix)
Expand Down
107 changes: 52 additions & 55 deletions src/Client/Pages/ProtocolTemplates/ProtocolSearch.fs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@ open Swate.Components.Shared

module private HelperProtocolSearch =

let breadcrumbEle (model: Model) setIsProtocolSearch dispatch =
let breadcrumbEle setIsProtocolSearch =
Html.button [
prop.className "btn btn-outline btn-sm"
prop.onClick (fun _ ->
setIsProtocolSearch false
UpdateModel {model with Model.PageState.SidebarPage = Routing.SidebarPage.Protocol} |> dispatch)
)
prop.children [
Html.i [ prop.className "fa-solid fa-chevron-left" ]
Html.span [
Expand All @@ -29,72 +29,69 @@ open Fable.Core

type SearchContainer =

[<ReactComponent>]
static member Main(model:Model, setProtocolSearch, importTypeStateData, dispatch, ?hasBreadCrumps) =
let hasBreadCrumps = defaultArg hasBreadCrumps false
let templates, setTemplates = React.useState(model.ProtocolState.Templates)
let config, setConfig = React.useState(TemplateFilterConfig.init)
let showTemplatesFilter, setShowTemplatesFilter = React.useState(false)
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|])
let isEmpty = model.ProtocolState.Templates |> isNull || model.ProtocolState.Templates |> Array.isEmpty
let isLoading = model.ProtocolState.Loading
static member HeaderElement(toggleShowFilter, setProtocolSearch) =
Html.div [
prop.onSubmit (fun e -> e.preventDefault())
// https://keycode.info/
prop.onKeyDown (fun k -> if k.key = "Enter" then k.preventDefault())
prop.className "flex flex-col gap-2"
prop.className [ "flex" ]
prop.children [
HelperProtocolSearch.breadcrumbEle setProtocolSearch
Html.div [
prop.className [ if hasBreadCrumps then "flex flex-row justify-between" else "flex justify-end" ]
prop.className "flex flex-row gap-2 ml-auto"
prop.children [
if hasBreadCrumps then
HelperProtocolSearch.breadcrumbEle model setProtocolSearch dispatch
Html.div [
prop.className "flex flex-row gap-2"
Daisy.dropdown [
prop.className "dropdown dropdown-bottom dropdown-end group relative z-[9999]"
prop.children [
Daisy.dropdown [
prop.className "dropdown dropdown-bottom dropdown-end group relative z-[9999]"
prop.children [
Daisy.button.a [
button.sm
button.info
prop.className "btn fa-solid fa-info"
prop.tabIndex 0
]
Daisy.dropdownContent [
Html.ul [
prop.tabIndex 0
prop.className "relative left-1/2 -translate-x-1/2 mt-2 w-64 p-3 bg-gray-800 text-white text-sm rounded-lg shadow-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-[100]"
prop.children [
Html.li [ Search.InfoField() ]
]
]
]
]
]
Daisy.button.a [
button.sm
prop.className "fa-solid fa-cog"
button.success
prop.onClick(fun _ -> not showTemplatesFilter |> setShowTemplatesFilter)
button.info
prop.className "btn fa-solid fa-info"
prop.tabIndex 0
]
Daisy.dropdownContent [
Html.ul [
prop.tabIndex 0
prop.className "relative left-1/2 -translate-x-1/2 mt-2 w-64 p-3 bg-gray-800 text-white text-sm rounded-lg shadow-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-[100]"
prop.children [
Html.li [ Search.InfoField() ]
]
]
]
]
]
Daisy.button.a [
button.sm
prop.className "fa-solid fa-cog"
button.success
prop.onClick(fun _ -> toggleShowFilter())
]
]
]
]
]

[<ReactComponent>]
static member Main(model:Model, setProtocolSearch, importTypeStateData, dispatch, ?hasBreadCrumps) =
let config, setConfig = React.useState(TemplateFilterConfig.init)
let showTemplatesFilter, setShowTemplatesFilter = React.useState(false)
let filteredTemplates =
React.useMemo(
(fun _ ->
Protocol.Search.filterTemplates (model.ProtocolState.Templates, config)
),
[|box model.ProtocolState.Templates; box config|]
)
React.useEffectOnce(fun _ -> Messages.Protocol.GetAllProtocolsRequest |> Messages.ProtocolMsg |> dispatch)
let isEmpty = model.ProtocolState.Templates |> isNull || model.ProtocolState.Templates |> Array.isEmpty
let isLoading = model.ProtocolState.Loading
Html.div [
prop.className "flex flex-col gap-2 lg:gap-4 overflow-hidden"
prop.children [
SearchContainer.HeaderElement((fun _ -> setShowTemplatesFilter (not showTemplatesFilter)), setProtocolSearch)
if showTemplatesFilter then
Protocol.Search.FileSortElement(model, config, setConfig)
if isEmpty && not isLoading then
Html.p [prop.className "text-error text-sm"; prop.text "No templates were found. This can happen if connection to the server was lost. You can try reload this site or contact a developer."]

Html.div [
prop.className "relative flex shadow-md gap-4 flex-col !m-0 !p-0"
prop.children [
if showTemplatesFilter then
Protocol.Search.FileSortElement(model, config, setConfig)
Search.SelectTemplatesButton(model, setProtocolSearch, importTypeStateData, dispatch)
Protocol.Search.Component (filteredTemplates, model, dispatch)
]
]
else
Search.SelectTemplatesButton(model, setProtocolSearch, importTypeStateData, dispatch)
Protocol.Search.Component (filteredTemplates, model, dispatch)
]
]
5 changes: 3 additions & 2 deletions src/Client/Pages/ProtocolTemplates/ProtocolSearchViewComponent.fs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -391,7 +391,7 @@ module ComponentAux =
prop.children [
if List.contains template model.ProtocolState.TemplatesSelected then
let templates = model.ProtocolState.TemplatesSelected |> Array.ofSeq
let templateIndex = Array.findIndex (fun selectedTemplate -> selectedTemplate = template) templates
let templateIndex = Array.findIndex (fun selectedTemplate -> selectedTemplate = template) templates
Daisy.button.a [
button.sm
prop.onClick (fun _ ->
Expand Down Expand Up @@ -580,7 +580,8 @@ type Search =
let maxheight = defaultArg maxheight (length.px 600)
let showIds, setShowIds = React.useState(fun _ -> [])
Html.div [
prop.style [style.overflow.auto; style.maxHeight maxheight]
prop.style [style.maxHeight maxheight]
prop.className "shrink overflow-y-auto"
prop.children [
Daisy.table [
table.zebra
Expand Down
70 changes: 39 additions & 31 deletions src/Client/Pages/ProtocolTemplates/SelectiveTemplateFromDB.fs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ open OfficeInterop.Core
type SelectiveTemplateFromDB =

/// <summary>
///
///
/// </summary>
/// <param name="adaptTableName"></param>
/// <param name="setAdaptTableName"></param>
Expand All @@ -31,7 +31,7 @@ type SelectiveTemplateFromDB =
]

/// <summary>
///
///
/// </summary>
/// <param name="model"></param>
/// <param name="dispatch"></param>
Expand All @@ -50,7 +50,7 @@ type SelectiveTemplateFromDB =
]

/// <summary>
///
///
/// </summary>
/// <param name="selectedTemplate"></param>
/// <param name="templateIndex"></param>
Expand All @@ -73,7 +73,7 @@ type SelectiveTemplateFromDB =
]

/// <summary>
///
///
/// </summary>
/// <param name="importState"></param>
/// <param name="activeTableIndex"></param>
Expand All @@ -96,7 +96,7 @@ type SelectiveTemplateFromDB =
|> ResizeArray

/// <summary>
///
///
/// </summary>
/// <param name="name"></param>
/// <param name="model"></param>
Expand All @@ -123,7 +123,7 @@ type SelectiveTemplateFromDB =
]

/// <summary>
///
///
/// </summary>
/// <param name="model"></param>
/// <param name="dispatch"></param>
Expand All @@ -136,32 +136,40 @@ type SelectiveTemplateFromDB =
{importTypeState with ImportTables = newImportTables} |> setImportTypeState
let rmvTableImport = fun index ->
{importTypeState with ImportTables = importTypeState.ImportTables |> List.filter (fun it -> it.Index <> index)} |> setImportTypeState
React.fragment [
Html.div [
SelectiveTemplateFromDB.ToProtocolSearchElement(model, setProtocolSearch, dispatch)
]
if model.ProtocolState.TemplatesSelected.Length > 0 then
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 [
prop.className "flex flex-col gap-2 lg:gap-4 overflow-hidden"
prop.children [

if model.ProtocolState.TemplatesSelected.Length > 0 then
let templates = model.ProtocolState.TemplatesSelected
for templateIndex in 0..templates.Length-1 do
let template = templates.[templateIndex]
SelectiveImportModal.TableImport(
templateIndex, template.Table, importTypeState, addTableImport, rmvTableImport, importTypeState, setImportTypeState, template.Name)
Html.div [
SelectiveTemplateFromDB.AddTemplatesFromDBToTableButton(
"Import", model, importTypeState, setImportTypeState, protocolSearchState, setProtocolSearch, dispatch)
SelectiveTemplateFromDB.ToProtocolSearchElement(model, setProtocolSearch, dispatch)
]
if model.ProtocolState.TemplatesSelected.Length > 0 then
Html.div [
prop.className "flex gap-2 flex-col shrink overflow-y-auto"
prop.children [

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
)

for templateIndex in 0..model.ProtocolState.TemplatesSelected.Length-1 do
let template = model.ProtocolState.TemplatesSelected.[templateIndex]
SelectiveImportModal.TableImport(
templateIndex, template.Table, importTypeState, addTableImport, rmvTableImport, importTypeState, setImportTypeState, template.Name)
Html.div [
SelectiveTemplateFromDB.AddTemplatesFromDBToTableButton(
"Import", model, importTypeState, setImportTypeState, protocolSearchState, setProtocolSearch, dispatch)
]
]
]
]
]

0 comments on commit 3a27455

Please sign in to comment.