Skip to content

Commit

Permalink
Generalize Advanced search component
Browse files Browse the repository at this point in the history
  • Loading branch information
@kMutagene
kMutagene committed Jun 2, 2020
1 parent 1851b28 commit 53685ee
Show file tree
Hide file tree
Showing 10 changed files with 333 additions and 108 deletions.
2 changes: 1 addition & 1 deletion src/Client/Client.fsproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@
<Compile Include="CustomComponents\AnnotationTableMissingWarning.fs" />
<Compile Include="CustomComponents\Navbar.fs" />
<Compile Include="CustomComponents\Loading.fs" />
<Compile Include="CustomComponents\PaginatedTable.fs" />
<Compile Include="CustomComponents\AdvancedSearch.fs" />
<Compile Include="CustomComponents\AutocompleteSearch.fs" />
<Compile Include="CustomComponents\PaginatedTable.fs" />
<Compile Include="Views\BaseView.fs" />
<Compile Include="Views\LandingPageView.fs" />
<Compile Include="Views\AdvancedSearchView.fs" />
Expand Down
186 changes: 131 additions & 55 deletions src/Client/CustomComponents/AdvancedSearch.fs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,11 @@ let createOntologyDropdownItem (model:Model) (dispatch:Msg -> unit) (ont: DbDoma
Text.span [] [ont.Name |> str]
]

let createAdvancedTermSearchResultList (model:Model) (dispatch: Msg -> unit) =
let createAdvancedTermSearchResultRows (model:Model) (dispatch: Msg -> unit) (suggestionUsedHandler: DbDomain.Term -> Msg) =
if model.AdvancedSearchState.AdvancedSearchTermResults.Length > 0 then
model.AdvancedSearchState.AdvancedSearchTermResults
|> Array.map (fun sugg ->
tr [OnClick (fun _ -> sugg.Name |> AdvancedSearchResultUsed |> AdvancedSearch |> dispatch)
tr [OnClick (fun _ -> sugg |> suggestionUsedHandler |> dispatch)
colorControl model.SiteStyleState.ColorMode
Class "suggestion"
] [
Expand All @@ -61,27 +61,26 @@ let createAdvancedTermSearchResultList (model:Model) (dispatch: Msg -> unit) =
td [Style [Color "red"]] [if sugg.IsObsolete then str "obsolete"]
td [Style [FontWeight "light"]] [small [] [str sugg.Accession]]
])
|> List.ofArray
else
[
[|
tr [] [
td [] [str "No terms found matching your input."]
]
]
|]


let advancedTermSearchComponent (model:Model) (dispatch: Msg -> unit) =
form [
OnSubmit (fun e -> e.preventDefault())
OnKeyDown (fun k -> if (int k.keyCode) = 13 then k.preventDefault())
] [
Label.label [Label.Size Size.IsLarge; Label.Props [Style [Color model.SiteStyleState.ColorMode.Accent]]][ str "Ontology term search"]
br []
Field.div [] [
Label.label [] [ str "Ontology"]
Label.label [Label.Props [Style [Color model.SiteStyleState.ColorMode.Accent]]] [ str "Ontology"]
Help.help [] [str "Only search terms in the selected ontology"]
Field.div [] [
Dropdown.dropdown [Dropdown.IsActive model.AdvancedSearchState.HasOntologyDropdownVisible] [
Dropdown.dropdown [
Dropdown.IsActive model.AdvancedSearchState.HasOntologyDropdownVisible
] [
Dropdown.trigger [] [
Button.button [Button.OnClick (fun _ -> ToggleOntologyDropdown |> AdvancedSearch |> dispatch)] [
span [] [
Expand All @@ -92,7 +91,7 @@ let advancedTermSearchComponent (model:Model) (dispatch: Msg -> unit) =
Fa.i [Fa.Solid.AngleDown] []
]
]
Dropdown.menu [Props[colorControl model.SiteStyleState.ColorMode]] [
Dropdown.menu [Props[colorControl model.SiteStyleState.ColorMode];] [
Dropdown.content [] (
model.PersistentStorageState.SearchableOntologies
|> Array.map snd
Expand All @@ -103,13 +102,13 @@ let advancedTermSearchComponent (model:Model) (dispatch: Msg -> unit) =
]
]
Field.div [] [
Label.label [] [ str "Starts with:"]
Label.label [Label.Props [Style [Color model.SiteStyleState.ColorMode.Accent]]] [ str "Starts with:"]
Help.help [] [str "The term name must start with this string"]
Field.div [] [
Control.div [] [
Input.input [
Input.Placeholder "Enter starts with text"
Input.Size IsMedium
Input.Size IsSmall
Input.Props [ExcelColors.colorControl model.SiteStyleState.ColorMode]
Input.OnChange (fun e ->
{model.AdvancedSearchState.AdvancedSearchOptions
Expand All @@ -124,13 +123,13 @@ let advancedTermSearchComponent (model:Model) (dispatch: Msg -> unit) =
]
]
Field.div [] [
Label.label [] [ str "Must contain:"]
Label.label [Label.Props [Style [Color model.SiteStyleState.ColorMode.Accent]]] [ str "Must contain:"]
Help.help [] [str "The term name must contain any of these space-separated words (at any position)"]
Field.div [] [
Control.div [] [
Input.input [
Input.Placeholder "Enter contains text"
Input.Size IsMedium
Input.Size IsSmall
Input.Props [ExcelColors.colorControl model.SiteStyleState.ColorMode]
Input.OnChange (fun e ->
{model.AdvancedSearchState.AdvancedSearchOptions
Expand All @@ -145,13 +144,13 @@ let advancedTermSearchComponent (model:Model) (dispatch: Msg -> unit) =
]
]
Field.div [] [
Label.label [] [ str "Ends with:"]
Label.label [Label.Props [Style [Color model.SiteStyleState.ColorMode.Accent]]] [ str "Ends with:"]
Help.help [] [str "The term must end with this string"]
Field.div [] [
Control.div [] [
Input.input [
Input.Placeholder "enter ends with text"
Input.Size IsMedium
Input.Size IsSmall
Input.Props [ExcelColors.colorControl model.SiteStyleState.ColorMode]
Input.OnChange (fun e ->
{model.AdvancedSearchState.AdvancedSearchOptions
Expand All @@ -166,14 +165,14 @@ let advancedTermSearchComponent (model:Model) (dispatch: Msg -> unit) =
]
]
Field.div [] [
Label.label [] [ str "Definition must contain:"]
Label.label [Label.Props [Style [Color model.SiteStyleState.ColorMode.Accent]]] [ str "Definition must contain:"]
Help.help [] [str "The definition of the term must contain any of these space-separated words (at any position)"]
Field.body [] [
Field.div [] [
Control.div [] [
Input.input [
Input.Placeholder "enter definition must contain text"
Input.Size IsMedium
Input.Size IsSmall
Input.Props [ExcelColors.colorControl model.SiteStyleState.ColorMode]
Input.OnChange (fun e ->
{model.AdvancedSearchState.AdvancedSearchOptions
Expand All @@ -188,55 +187,132 @@ let advancedTermSearchComponent (model:Model) (dispatch: Msg -> unit) =
]
]
]
Field.div [] [
Control.div [] [
Button.button [
let isValid = isValidAdancedSearchOptions model.AdvancedSearchState.AdvancedSearchOptions
if isValid then
Button.CustomClass "is-success"
Button.IsActive true
else
Button.CustomClass "is-danger"
Button.Props [Disabled (not isValid)]
Button.IsFullWidth
Button.OnClick (fun _ -> model.AdvancedSearchState.AdvancedSearchOptions |> GetNewAdvancedTermSearchResults |> Request |> Api |> dispatch)
] [ str "Start advanced search"]
]

let advancedSearchResultTable (model:Model) (dispatch: Msg -> unit) =
Field.div [Field.Props [] ] [
Label.label [] [str "Results:"]
if model.AdvancedSearchState.ShowAdvancedSearchResults then
if model.AdvancedSearchState.HasAdvancedSearchResultsLoading then
Loading.loadingComponent
else
Button.buttonComponent model.SiteStyleState.ColorMode true "Change search options" (fun _ -> ResetAdvancedSearchOptions |> AdvancedSearch |> dispatch)
PaginatedTable.paginatedTableComponent
model
dispatch
(createAdvancedTermSearchResultRows
model
dispatch
(AdvancedSearchResultSelected >> AdvancedSearch)
)
]

let advancedSearchSelectedResultDisplay (model:Model) (result:DbDomain.Term) =
Container.container [] [
Heading.h4 [] [str "Selected Result:"]
Table.table [Table.IsFullWidth] [
thead [] []
tbody [] [
tr [
colorControl model.SiteStyleState.ColorMode
Class "suggestion"
] [
td [Class (Tooltip.ClassName + " " + Tooltip.IsTooltipRight + " " + Tooltip.IsMultiline);Tooltip.dataTooltip result.Definition] [
Fa.i [Fa.Solid.InfoCircle] []
]
td [] [
b [] [str result.Name]
]
td [Style [Color "red"]] [if result.IsObsolete then str "obsolete"]
td [Style [FontWeight "light"]] [small [] [str result.Accession]]
]
]
]
Field.div [Field.Props [] ] [
Label.label [] [str "Results:"]
]
]

let advancedSearchModal (model:Model) (dispatch: Msg -> unit) (resultHandler: DbDomain.Term -> Msg) =
Modal.modal [Modal.IsActive model.AdvancedSearchState.HasModalVisible] [
let advancedSearchModal (model:Model) (id:string) (dispatch: Msg -> unit) (resultHandler: DbDomain.Term -> Msg) =
Modal.modal [
Modal.IsActive (
model.AdvancedSearchState.HasModalVisible
&& model.AdvancedSearchState.ModalId = id
)
Modal.Props [
colorControl model.SiteStyleState.ColorMode
Id id
]
] [
Modal.background [] []
Modal.Card.card [] [
Modal.Card.head [] [
Modal.close [Modal.Close.Size IsLarge; Modal.Close.OnClick (fun _ -> ToggleModal |> AdvancedSearch |> dispatch)] []
Heading.h2 [] [
Modal.Card.card [Props [colorControl model.SiteStyleState.ColorMode]] [
Modal.Card.head [Props [colorControl model.SiteStyleState.ColorMode]] [
Modal.close [Modal.Close.Size IsLarge; Modal.Close.OnClick (fun _ -> ToggleModal id |> AdvancedSearch |> dispatch)] []
Heading.h4 [Heading.Props [Style [Color model.SiteStyleState.ColorMode.Accent]]] [
str "Advanced Search"
]
]
Modal.Card.body [] [
advancedTermSearchComponent model dispatch
Modal.Card.body [Props [colorControl model.SiteStyleState.ColorMode]] [
if (not model.AdvancedSearchState.ShowAdvancedSearchResults) then
advancedTermSearchComponent model dispatch
else
match model.AdvancedSearchState.SelectedResult with
|None -> advancedSearchResultTable model dispatch
|Some r -> advancedSearchSelectedResultDisplay model r

]
Modal.Card.foot [] [
Field.div [] [
Control.div [] [
Button.button [ let hasText = model.AdvancedSearchState.SelectedResult.IsSome
if hasText then
Button.CustomClass "is-success"
Button.IsActive true
else
form [
OnSubmit (fun e -> e.preventDefault())
OnKeyDown (fun k -> if (int k.keyCode) = 13 then k.preventDefault())
] [
Field.div [Field.HasAddons;Field.IsExpanded] [
Control.div [Control.IsExpanded] [
if (not model.AdvancedSearchState.ShowAdvancedSearchResults) then
Button.button [
let isValid = isValidAdancedSearchOptions model.AdvancedSearchState.AdvancedSearchOptions
if isValid then
Button.CustomClass "is-success"
Button.IsActive true
else
Button.CustomClass "is-danger"
Button.Props [Disabled (not isValid)]
Button.IsFullWidth
Button.OnClick (fun _ -> StartAdvancedSearch |> AdvancedSearch |> dispatch)
] [ str "Start advanced search"]
else
Button.button [ let hasText = model.AdvancedSearchState.SelectedResult.IsSome
if hasText then
Button.CustomClass "is-success"
Button.IsActive true
else
Button.CustomClass "is-danger"
Button.Props [Disabled true]
Button.IsFullWidth
Button.OnClick (fun _ ->
ResetAdvancedSearchState |> AdvancedSearch |> dispatch;
model.AdvancedSearchState.SelectedResult.Value |> resultHandler |> dispatch)
] [
str "Confirm"

]
]
Control.div [Control.IsExpanded] [
Button.button [
Button.CustomClass "is-danger"
Button.Props [Disabled true]
Button.IsFullWidth
Button.OnClick (fun _ -> model.AdvancedSearchState.SelectedResult.Value |> resultHandler |> dispatch)
Button.IsFullWidth
Button.OnClick (fun _ -> ResetAdvancedSearchOptions |> AdvancedSearch |> dispatch)

] [
str "Confirm"

] [
str "Reset"
]
]
Control.div [Control.IsExpanded] [
Button.button [
Button.CustomClass "is-danger"
Button.IsFullWidth
Button.OnClick (fun _ -> ResetAdvancedSearchState |> AdvancedSearch |> dispatch)

] [
str "Cancel"
]
]
]
]
Expand Down

0 comments on commit 53685ee

Please sign in to comment.