Revise part12 and part13

part12/ElmHub.elm

@@ -35,8 +35,8 @@ type alias Model =
 
 
 type alias SearchOptions =
-    { sort : String
+    { minStars : Int
-    , ascending : Bool
+    , minStarsError : Maybe String
     , searchInDescription : Bool
     , userFilter : String
     }
@@ -55,8 +55,8 @@ initialModel =
     , results = []
     , errorMessage = Nothing
     , options =
-        { sort = "stars"
+        { minStars = 0
-        , ascending = False
+        , minStarsError = Nothing
         , searchInDescription = True
         , userFilter = ""
         }
@@ -80,12 +80,12 @@ viewOptions opts =
     -- Debug.log "viewOptions was called" <|
     div [ class "search-options" ]
         [ div [ class "search-option" ]
-            [ label [ class "top-label" ] [ text "Sort by" ]
+            [ label [ class "top-label" ] [ text "Minimum Stars" ]
-            , select [ onChange SetSort, value opts.sort ]
+            , input
-                [ option [ value "stars" ] [ text "Stars" ]
+                [ onBlurWithTargetValue SetMinStars
-                , option [ value "forks" ] [ text "Forks" ]
+                , defaultValue (toString opts.minStars)
-                , option [ value "updated" ] [ text "Updated" ]
                 ]
+                []
             ]
         , div [ class "search-option" ]
             [ label [ class "top-label" ] [ text "Owned by" ]
@@ -97,10 +97,8 @@ viewOptions opts =
                 ]
                 []
             ]
-        , label [ class "search-option" ]
+        , div [ class "search-option" ]
-            [ input [ type' "checkbox", checked opts.ascending, onCheck SetAscending ] []
+            [ viewMinStarsError opts.minStarsError ]
-            , text "Sort ascending"
-            ]
         , label [ class "search-option" ]
             [ input [ type' "checkbox", checked opts.searchInDescription, onCheck SetSearchInDescription ] []
             , text "Search in description"
@@ -108,6 +106,16 @@ viewOptions opts =
         ]
 
 
+viewMinStarsError : Maybe String -> Html msg
+viewMinStarsError message =
+    case message of
+        Nothing ->
+            text " "
+
+        Just errorMessage ->
+            div [ class "stars-error" ] [ text errorMessage ]
+
+
 type Msg
     = Search
     | Options OptionsMsg
@@ -155,6 +163,11 @@ update msg model =
             ( model, Cmd.none )
 
 
+onBlurWithTargetValue : (String -> msg) -> Attribute msg
+onBlurWithTargetValue toMsg =
+    on "blur" (Json.Decode.map toMsg targetValue)
+
+
 tableConfig : Table.Config SearchResult Msg
 tableConfig =
     Table.config
@@ -185,11 +198,16 @@ nameColumn =
 updateOptions : OptionsMsg -> SearchOptions -> SearchOptions
 updateOptions optionsMsg options =
     case optionsMsg of
-        SetSort sort ->
+        SetMinStars minStarsStr ->
-            { options | sort = sort }
+            case String.toInt minStarsStr of
+                Ok minStars ->
+                    { options | minStars = minStars, minStarsError = Nothing }
 
-        SetAscending ascending ->
+                Err _ ->
-            { options | ascending = ascending }
+                    { options
+                        | minStarsError =
+                            Just "Please enter an integer!"
+                    }
 
         SetSearchInDescription searchInDescription ->
             { options | searchInDescription = searchInDescription }
@@ -233,11 +251,16 @@ viewErrorMessage errorMessage =
             text ""
 
 
-viewSearchResult : SearchResult -> Html Msg
+viewStars : SearchResult -> Table.HtmlDetails Msg
+viewStars result =
+    Table.HtmlDetails []
+        [ span [ class "star-count" ] [ text (toString result.stars) ] ]
+
+
+viewSearchResult : SearchResult -> Table.HtmlDetails Msg
 viewSearchResult result =
-    li []
+    Table.HtmlDetails []
-        [ span [ class "star-count" ] [ text (toString result.stars) ]
+        [ a [ href ("https://github.com/" ++ result.name), target "_blank" ]
-        , a [ href ("https://github.com/" ++ result.name), target "_blank" ]
             [ text result.name ]
         , button [ class "hide-result", onClick (DeleteById result.id) ]
             [ text "X" ]
@@ -245,8 +268,7 @@ viewSearchResult result =
 
 
 type OptionsMsg
-    = SetSort String
+    = SetMinStars String
-    | SetAscending Bool
     | SetSearchInDescription Bool
     | SetUserFilter String
 
@@ -294,17 +316,11 @@ getQueryString model =
             else
                 "+in:name"
            )
+        ++ "+stars:>="
+        ++ (toString model.options.minStars)
         ++ "+language:elm"
         ++ (if String.isEmpty model.options.userFilter then
                 ""
             else
                 "+user:" ++ model.options.userFilter
            )
-        ++ "&sort="
-        ++ model.options.sort
-        ++ "&order="
-        ++ (if model.options.ascending then
-                "asc"
-            else
-                "desc"
-           )

part12/style.css

@@ -91,6 +91,14 @@ button:focus, input:focus {
   outline: none;
 }
 
+.stars-error {
+  background-color: #FF9632;
+  font-size: 16px;
+  padding: 10px;
+  margin-right: 24px;
+  border-radius: 10px;
+}
+
 .error {
   background-color: #FF9632;
   padding: 20px;
@@ -137,3 +145,17 @@ button:focus, input:focus {
   display: block;
   color: #555;
 }
+
+th {
+  text-align: left;
+  cursor: pointer;
+}
+
+th:hover {
+  color: rgb(96, 181, 204);
+}
+
+th, td {
+  font-size: 18px;
+  padding-right: 20px;
+}

part13/ElmHub.elm

@@ -193,11 +193,16 @@ viewErrorMessage errorMessage =
             text ""
 
 
-viewSearchResult : SearchResult -> Html Msg
+viewStars : SearchResult -> Table.HtmlDetails Msg
+viewStars result =
+    Table.HtmlDetails []
+        [ span [ class "star-count" ] [ text (toString result.stars) ] ]
+
+
+viewSearchResult : SearchResult -> Table.HtmlDetails Msg
 viewSearchResult result =
-    li []
+    Table.HtmlDetails []
-        [ span [ class "star-count" ] [ text (toString result.stars) ]
+        [ a [ href ("https://github.com/" ++ result.name), target "_blank" ]
-        , a [ href ("https://github.com/" ++ result.name), target "_blank" ]
             [ text result.name ]
         , button [ class "hide-result", onClick (DeleteById result.id) ]
             [ text "X" ]

part13/ElmHubCss.elm

@@ -145,4 +145,18 @@ css =
           --   display: block;
           --   color: #555;
           -- }
+          --
+          -- th {
+          --   text-align: left;
+          --   cursor: pointer;
+          -- }
+          --
+          -- th:hover {
+          --   color: rgb(96, 181, 204);
+          -- }
+          --
+          -- th, td {
+          --   font-size: 18px;
+          --   padding-right: 20px;
+          -- }
         ]