Display custom field values on item card

modules/webapp/src/main/elm/Comp/ItemCard.elm

@@ -25,6 +25,7 @@ import Html.Events exposing (onClick)
 import Markdown
 import Page exposing (Page(..))
 import Set exposing (Set)
+import Util.CustomField
 import Util.ItemDragDrop as DD
 import Util.List
 import Util.Maybe
@@ -360,28 +361,48 @@ mainContent cardAction cardColor isConfirmed settings _ item =
             [ Util.Time.formatDate item.date |> text
             ]
         , div [ class "meta description" ]
-            [ div
-                [ classList
-                    [ ( "ui right floated tiny labels", True )
-                    , ( "invisible hidden", item.tags == [] || fieldHidden Data.Fields.Tag )
-                    ]
-                ]
-                (List.map
-                    (\tag ->
-                        div
-                            [ classList
-                                [ ( "ui basic label", True )
-                                , ( Data.UiSettings.tagColorString tag settings, True )
-                                ]
-                            ]
-                            [ text tag.name ]
-                    )
-                    item.tags
-                )
+            [ mainTagsAndFields settings item
             ]
         ]
 
 
+mainTagsAndFields : UiSettings -> ItemLight -> Html Msg
+mainTagsAndFields settings item =
+    let
+        fieldHidden f =
+            Data.UiSettings.fieldHidden settings f
+
+        hideTags =
+            item.tags == [] || fieldHidden Data.Fields.Tag
+
+        hideFields =
+            item.customfields == [] || fieldHidden Data.Fields.CustomFields
+
+        showTag tag =
+            div
+                [ classList
+                    [ ( "ui basic label", True )
+                    , ( Data.UiSettings.tagColorString tag settings, True )
+                    ]
+                ]
+                [ i [ class "tag icon" ] []
+                , div [ class "detail" ]
+                    [ text tag.name
+                    ]
+                ]
+
+        showField fv =
+            Util.CustomField.renderValue "ui basic label" fv
+    in
+    div
+        [ classList
+            [ ( "ui right floated tiny labels", True )
+            , ( "invisible hidden", hideTags && hideFields )
+            ]
+        ]
+        (List.map showField item.customfields ++ List.map showTag item.tags)
+
+
 previewImage : UiSettings -> Attribute Msg -> Model -> ItemLight -> Html Msg
 previewImage settings cardAction model item =
     let

modules/webapp/src/main/elm/Comp/ItemDetail/View.elm

@@ -32,6 +32,7 @@ import Html.Events exposing (onCheck, onClick, onInput)
 import Markdown
 import Page exposing (Page(..))
 import Set
+import Util.CustomField
 import Util.File exposing (makeFileId)
 import Util.Folder
 import Util.List
@@ -628,30 +629,8 @@ renderTags settings model =
 renderCustomValues : UiSettings -> Model -> List (Html Msg)
 renderCustomValues settings model =
     let
-        cfIcon cv =
-            Data.CustomFieldType.fromString cv.ftype
-                |> Maybe.map (Icons.customFieldTypeIcon "")
-                |> Maybe.withDefault (i [ class "question circle outline icon" ] [])
-
-        renderBool cv =
-            if cv.value == "true" then
-                i [ class "check icon" ] []
-
-            else
-                i [ class "minus icon" ] []
-
         fieldView cv =
-            div [ class "ui secondary basic label" ]
-                [ cfIcon cv
-                , Maybe.withDefault cv.name cv.label |> text
-                , div [ class "detail" ]
-                    [ if Data.CustomFieldType.fromString cv.ftype == Just Data.CustomFieldType.Boolean then
-                        renderBool cv
-
-                      else
-                        text cv.value
-                    ]
-                ]
+            Util.CustomField.renderValue "ui secondary basic label" cv
 
         labelThenName cv =
             Maybe.withDefault cv.name cv.label

modules/webapp/src/main/elm/Data/Icons.elm

@@ -9,6 +9,7 @@ module Data.Icons exposing
     , customFieldIcon
     , customFieldType
     , customFieldTypeIcon
+    , customFieldTypeIconString
     , date
     , dateIcon
     , direction
@@ -43,7 +44,7 @@ customFieldType : CustomFieldType -> String
 customFieldType ftype =
     case ftype of
         Data.CustomFieldType.Text ->
-            "pen icon"
+            "stream icon"
 
         Data.CustomFieldType.Numeric ->
             "hashtag icon"
@@ -52,7 +53,7 @@ customFieldType ftype =
             "calendar icon"
 
         Data.CustomFieldType.Boolean ->
-            "question icon"
+            "marker icon"
 
         Data.CustomFieldType.Money ->
             "money bill icon"
@@ -64,6 +65,13 @@ customFieldTypeIcon classes ftype =
         []
 
 
+customFieldTypeIconString : String -> String -> Html msg
+customFieldTypeIconString classes ftype =
+    Data.CustomFieldType.fromString ftype
+        |> Maybe.map (customFieldTypeIcon classes)
+        |> Maybe.withDefault (i [ class "question circle outline icon" ] [])
+
+
 customField : String
 customField =
     "highlighter icon"

modules/webapp/src/main/elm/Util/CustomField.elm

@@ -0,0 +1,30 @@
+module Util.CustomField exposing (renderValue)
+
+import Api.Model.ItemFieldValue exposing (ItemFieldValue)
+import Data.CustomFieldType
+import Data.Icons as Icons
+import Html exposing (..)
+import Html.Attributes exposing (..)
+
+
+renderValue : String -> ItemFieldValue -> Html msg
+renderValue classes cv =
+    let
+        renderBool =
+            if cv.value == "true" then
+                i [ class "check icon" ] []
+
+            else
+                i [ class "minus icon" ] []
+    in
+    div [ class classes ]
+        [ Icons.customFieldTypeIconString "" cv.ftype
+        , Maybe.withDefault cv.name cv.label |> text
+        , div [ class "detail" ]
+            [ if Data.CustomFieldType.fromString cv.ftype == Just Data.CustomFieldType.Boolean then
+                renderBool
+
+              else
+                text cv.value
+            ]
+        ]