diff options
author | Yorhel <git@yorhel.nl> | 2020-11-02 13:40:09 +0100 |
---|---|---|
committer | Yorhel <git@yorhel.nl> | 2020-11-02 13:40:11 +0100 |
commit | ddc4b6779acc962addd7f0dfd31df70d77fff113 (patch) | |
tree | 94c1a74504eff881380e5e66e12a35cf3988e498 | |
parent | ff3738db5ef84abf93a97724fe4bc397878e57e3 (diff) |
Advsearch: Add dropdown to change nesting type + styling fixes
NOW we're really getting somewhere!
-rw-r--r-- | data/style.css | 10 | ||||
-rw-r--r-- | elm/AdvSearch/Fields.elm | 68 | ||||
-rw-r--r-- | elm/AdvSearch/Main.elm | 2 |
3 files changed, 51 insertions, 29 deletions
diff --git a/data/style.css b/data/style.css index c477ca9b..85ab464e 100644 --- a/data/style.css +++ b/data/style.css @@ -1114,16 +1114,18 @@ p.filselect i { font-style: normal } /****** Advanced Search *******/ -.advsearch { max-width: 800px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center } +.advsearch { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center } .advsearch .advnest { display: flex } -.advsearch .advnest > div:nth-child(1) { width: 30px } -.advsearch .advnest > div:nth-child(2) { border-left: 1px dashed $border$ } +.advsearch .advnest > div:nth-child(1) { flex: 0 0 35px; } +.advsearch .advnest > div:nth-child(2) { flex: 1; border-left: 1px dashed $border$ } +.advsearch .elm_dd_input { margin: 5px; width: 150px } +.advsearch .elm_dd_input.elm_dd_noarrow { width: 13px } .advsearch .advrow { display: flex; flex-wrap: wrap } -.advsearch .advrow > * { margin: 5px; width: 150px } .advsearch .advheader { box-sizing: border-box; background-color: $_blendbg$; padding: 3px; width: 100%; margin-bottom: 2px } .advsearch .advheader > h3 { text-align: center; font-weight: bold; font-size: inherit; margin-bottom: 3px } .advsearch .advheader .opts { display: flex; justify-content: space-between } .advsearch .advheader .opts > * { margin: 0 } +.advsearch input.submit { margin-top: 5px } diff --git a/elm/AdvSearch/Fields.elm b/elm/AdvSearch/Fields.elm index ac3f6d0b..79015359 100644 --- a/elm/AdvSearch/Fields.elm +++ b/elm/AdvSearch/Fields.elm @@ -27,6 +27,7 @@ type NestMsg = NAddToggle Bool | NAdd Int | NField Int FieldMsg + | NType NestType Bool nestInit : NestType -> FieldType -> Data -> (Data, NestModel) @@ -51,6 +52,7 @@ nestUpdate dat msg model = Just f -> let (ndat, nf, nc) = fieldUpdate dat m f in (ndat, { model | fields = modidx n (always nf) model.fields }, Cmd.map (NField n) nc) + NType n _ -> (dat, { model | ntype = n }, Cmd.none) nestToQuery : NestModel -> Maybe Query @@ -74,9 +76,16 @@ nestFromQuery ntype ftype dat q = _ -> Nothing --- TODO: Dropdown to display & switch between and/or +nestFieldView : Field -> Html FieldMsg +nestFieldView (fid, fdd, fm) = + let (flbl, fcont, fbody) = fieldView (fid,fdd,fm) + in div [ class "advnest" ] + [ div [ class "elm_dd_input", style "width" "40px" ] [ DD.view fdd Api.Normal flbl fcont ] + , fbody ] + + -- TODO: Buttons to move and remove fields -nestView : NestModel -> Html NestMsg +nestView : NestModel -> (Html NestMsg, () -> List (Html NestMsg), Html NestMsg) nestView model = let isNest (_,(_,_,f)) = @@ -86,13 +95,17 @@ nestView model = list = List.indexedMap (\a b -> (a,b)) model.fields nests = List.filter isNest list plains = List.filter (not << isNest) list - plainsV = List.map (\(i,f) -> Html.map (NField i) (fieldView f)) plains + + pView (fid, fdd, fm) = + let (flbl, fcont, fbody) = fieldView (fid,fdd,fm) + in div [ class "elm_dd_input" ] [ DD.view fdd Api.Normal flbl fcont ] + pViews = List.map (\(i,f) -> Html.map (NField i) (pView f)) plains + nViews = List.map (\(i,f) -> Html.map (NField i) (nestFieldView f)) nests add = - div [ class "elm_dd_input elm_dd_noarrow", style "width" "13px" ] + div [ class "elm_dd_input elm_dd_noarrow" ] [ DD.view model.add Api.Normal (text "+") <| \() -> - [ div [ class "advheader" ] - [ h3 [] [ text "Add filter" ] ] + [ div [ class "advheader" ] [ h3 [] [ text "Add filter" ] ] , ul [] <| List.map (\(n,f) -> if f.ftype /= model.ftype || f.title == "" then text "" @@ -101,15 +114,19 @@ nestView model = ] ] - sel = div [] [ text <| if model.ntype == NAnd then "And" else "Or" ] - in - div [ class "advnest" ] - [ sel - , div [] - <| div [ class "advrow" ] (if List.isEmpty nests then plainsV ++ [add] else plainsV) - :: List.map (\(i,f) -> Html.map (NField i) (fieldView f)) nests - ++ (if List.isEmpty nests then [] else [add]) - ] + lbl = text <| if model.ntype == NAnd then "And" else "Or" + cont () = + [ ul [] + [ li [] [ linkRadio (model.ntype == NAnd) (NType NAnd) [ text "And" ] ] + , li [] [ linkRadio (model.ntype == NOr ) (NType NOr ) [ text "Or" ] ] + ] + ] + body = + div [] + <| div [ class "advrow" ] (pViews ++ if List.isEmpty nests then [add] else []) + :: nViews + ++ (if List.isEmpty nests then [] else [add]) + in (lbl, cont, body) @@ -183,9 +200,11 @@ fieldUpdate : Data -> FieldMsg -> Field -> (Data, Field, Cmd FieldMsg) fieldUpdate dat msg_ (num, dd, model) = let maps f m = (dat, (num, dd, (f m)), Cmd.none) -- Simple version: update function returns a Model mapf fm fc (d,m,c) = (d, (num, dd, (fm m)), Cmd.map fc c) -- Full version: update function returns (Data, Model, Cmd) + mapc fm fc (d,m,c) = (d, (num, DD.toggle dd False, (fm m)), Cmd.map fc c) -- Full version that also closes the DD (Ugly hack...) in case (msg_, model) of + (FSNest (NType a b), FMNest m) -> mapc FMNest FSNest (nestUpdate dat (NType a b) m) (FSNest msg, FMNest m) -> mapf FMNest FSNest (nestUpdate dat msg m) - (FSLang msg, FMLang m) -> maps FMLang (AS.update msg m) + (FSLang msg, FMLang m) -> maps FMLang (AS.update msg m) (FSOLang msg, FMOLang m) -> maps FMOLang (AS.update msg m) (FSPlatform msg, FMPlatform m) -> maps FMPlatform (AS.update msg m) (FSLength msg, FMLength m) -> maps FMLength (AS.update msg m) @@ -193,16 +212,17 @@ fieldUpdate dat msg_ (num, dd, model) = _ -> (dat, (num, dd, model), Cmd.none) -fieldView : Field -> Html FieldMsg +fieldView : Field -> (Html FieldMsg, () -> List (Html FieldMsg), Html FieldMsg) fieldView (_, dd, model) = - let v f (lbl,cont) = div [ class "elm_dd_input" ] [ DD.view dd Api.Normal (Html.map f lbl) <| \() -> List.map (Html.map f) (cont ()) ] + let vf f (lbl,cont,body) = (Html.map f lbl, \() -> List.map (Html.map f) (cont ()), Html.map f body) + vs f (lbl,cont) = vf f (lbl,cont,text "") in case model of - FMCustom m -> v FSCustom (text "Unrecognized query", \() -> [text ""]) -- TODO: Display the Query - FMNest m -> Html.map FSNest (nestView m) - FMLang m -> v FSLang (AS.langView False m) - FMOLang m -> v FSOLang (AS.langView True m) - FMPlatform m -> v FSPlatform (AS.platformView m) - FMLength m -> v FSLength (AS.lengthView m) + FMCustom m -> vs FSCustom (text "Unrecognized query", \() -> [text ""]) -- TODO: Display the Query + FMNest m -> vf FSNest (nestView m) + FMLang m -> vs FSLang (AS.langView False m) + FMOLang m -> vs FSOLang (AS.langView True m) + FMPlatform m -> vs FSPlatform (AS.platformView m) + FMLength m -> vs FSLength (AS.lengthView m) fieldToQuery : Field -> Maybe Query diff --git a/elm/AdvSearch/Main.elm b/elm/AdvSearch/Main.elm index 6ac77813..c536ef83 100644 --- a/elm/AdvSearch/Main.elm +++ b/elm/AdvSearch/Main.elm @@ -95,6 +95,6 @@ update msg model = view : Model -> Html Msg view model = div [ class "advsearch" ] [ input [ type_ "hidden", id "f", name "f", value <| Maybe.withDefault "" <| Maybe.map (\v -> JE.encode 0 (encodeQuery v)) (fieldToQuery model.query) ] [] - , Html.map Field (fieldView model.query) + , Html.map Field (nestFieldView model.query) , input [ type_ "submit", class "submit", value "Search" ] [] ] |