Start search by pressing enter and not on each stroke

This reduces (unecessary) requests and eases the restless list
rendering. Throttling is still in place to avoid too many requests
when e.g. holding the enter-key.
This commit is contained in:
Eike Kettner
2020-06-22 00:35:11 +02:00
parent 6c8abf4cd7
commit 5e77ff0fc5
5 changed files with 103 additions and 33 deletions

View File

@ -20,6 +20,7 @@ import Data.Items
import Data.UiSettings exposing (UiSettings)
import Http
import Throttle exposing (Throttle)
import Util.Html exposing (KeyCode(..))
type alias Model =
@ -83,6 +84,7 @@ type Msg
| UpdateThrottle
| SetBasicSearch String
| SearchTypeMsg (Comp.FixedDropdown.Msg SearchType)
| KeyUpMsg (Maybe KeyCode)
type SearchType

View File

@ -10,6 +10,7 @@ import Page exposing (Page(..))
import Page.Home.Data exposing (..)
import Throttle
import Time
import Util.Html exposing (KeyCode(..))
import Util.Update
@ -177,6 +178,12 @@ update key flags settings msg model =
, Cmd.none
)
KeyUpMsg (Just Enter) ->
update key flags settings DoSearch model
KeyUpMsg _ ->
withSub ( model, Cmd.none )
--- Helpers
@ -218,6 +225,6 @@ withSub ( m, c ) =
( m
, c
, Throttle.ifNeeded
(Time.every 150 (\_ -> UpdateThrottle))
(Time.every 500 (\_ -> UpdateThrottle))
m.throttle
)

View File

@ -11,6 +11,7 @@ import Html.Attributes exposing (..)
import Html.Events exposing (onClick, onInput)
import Page exposing (Page(..))
import Page.Home.Data exposing (..)
import Util.Html
view : Flags -> UiSettings -> Model -> Html Msg
@ -165,12 +166,22 @@ viewSearchBar flags model =
span [ class "hidden invisible" ] []
]
]
, div [ class "ui category search item" ]
[ div [ class "ui action input" ]
[ input
, div [ class "item" ]
[ div [ class "ui left icon right action input" ]
[ i
[ classList
[ ( "search link icon", not model.searchInProgress )
, ( "loading spinner icon", model.searchInProgress )
]
, href "#"
, onClick DoSearch
]
[]
, input
[ type_ "text"
, placeholder "Search "
, onInput SetBasicSearch
, Util.Html.onKeyUpCode KeyUpMsg
, Maybe.map value searchInput
|> Maybe.withDefault (value "")
]
@ -180,19 +191,6 @@ viewSearchBar flags model =
(Just searchTypeItem)
model.searchTypeDropdown
)
, a
[ class "ui basic icon button"
, href "#"
, onClick DoSearch
]
[ i
[ classList
[ ( "search link icon", not model.searchInProgress )
, ( "loading spinner icon", model.searchInProgress )
]
]
[]
]
]
]
]
@ -205,6 +203,14 @@ hasMoreSearch model =
Comp.SearchMenu.getItemSearch model.searchMenuModel
is_ =
{ is | allNames = Nothing, fullText = Nothing }
case model.searchType of
BasicSearch ->
{ is | allNames = Nothing }
ContentSearch ->
{ is | fullText = Nothing }
ContentOnlySearch ->
Debug.todo "implement"
in
is_ /= Api.Model.ItemSearch.empty