First ui view of preview images for items

Users can choose to not show them via ui settings

modules/webapp/src/main/elm/Api.elm

@@ -30,6 +30,7 @@ module Api exposing
     , deleteSource
     , deleteTag
     , deleteUser
+    , fileURL
     , getAttachmentMeta
     , getCollective
     , getCollectiveSettings
@@ -59,6 +60,7 @@ module Api exposing
     , getUsers
     , itemDetail
     , itemIndexSearch
+    , itemPreviewURL
     , itemSearch
     , login
     , loginSession
@@ -1501,6 +1503,16 @@ deleteAllItems flags ids receive =
 --- Item
 
 
+itemPreviewURL : String -> String
+itemPreviewURL itemId =
+    "/api/v1/sec/item/" ++ itemId ++ "/preview"
+
+
+fileURL : String -> String
+fileURL attachId =
+    "/api/v1/sec/attachment/" ++ attachId
+
+
 setAttachmentName :
     Flags
     -> String

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

@@ -10,6 +10,7 @@ module Comp.ItemCardList exposing
     , view
     )
 
+import Api
 import Api.Model.HighlightEntry exposing (HighlightEntry)
 import Api.Model.ItemLight exposing (ItemLight)
 import Api.Model.ItemLightGroup exposing (ItemLightGroup)
@@ -230,7 +231,18 @@ viewItem cfg settings item =
          ]
             ++ DD.draggable ItemDDMsg item.id
         )
-        [ div [ class "content" ]
+        [ if fieldHidden Data.Fields.PreviewImage then
+            span [ class "invisible" ] []
+
+          else
+            div [ class "image" ]
+                [ img
+                    [ class "preview-image"
+                    , src (Api.itemPreviewURL item.id)
+                    ]
+                    []
+                ]
+        , div [ class "content" ]
             [ case cfg.selection of
                 Data.ItemSelection.Active ids ->
                     div [ class "header" ]

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

@@ -1464,6 +1464,9 @@ resetField flags item tagger field =
         Data.Fields.Direction ->
             Cmd.none
 
+        Data.Fields.PreviewImage ->
+            Cmd.none
+
 
 resetHiddenFields :
     UiSettings

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

@@ -1,5 +1,6 @@
 module Comp.ItemDetail.View exposing (view)
 
+import Api
 import Api.Model.Attachment exposing (Attachment)
 import Comp.AttachmentMeta
 import Comp.DatePicker
@@ -320,7 +321,7 @@ renderAttachmentView : UiSettings -> Model -> Int -> Attachment -> Html Msg
 renderAttachmentView settings model pos attach =
     let
         fileUrl =
-            "/api/v1/sec/attachment/" ++ attach.id
+            Api.fileURL attach.id
 
         attachName =
             Maybe.withDefault "No name" attach.name

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

@@ -19,6 +19,7 @@ type Field
     | Date
     | DueDate
     | Direction
+    | PreviewImage
 
 
 all : List Field
@@ -33,6 +34,7 @@ all =
         , Date
         , DueDate
         , Direction
+        , PreviewImage
         ]
 
 
@@ -71,6 +73,9 @@ fromString str =
         "direction" ->
             Just Direction
 
+        "preview" ->
+            Just PreviewImage
+
         _ ->
             Nothing
 
@@ -105,6 +110,9 @@ toString field =
         Direction ->
             "direction"
 
+        PreviewImage ->
+            "preview"
+
 
 label : Field -> String
 label field =
@@ -136,6 +144,9 @@ label field =
         Direction ->
             "Direction"
 
+        PreviewImage ->
+            "Preview Image"
+
 
 fromList : List String -> List Field
 fromList strings =

modules/webapp/src/main/webjar/docspell.css

@@ -93,6 +93,15 @@
     padding: 0.8em;
 }
 
+.default-layout .ui.card div.image {
+    background: #fff;
+}
+.default-layout img.preview-image {
+    max-width: 200px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
 .default-layout .menu .item.active a.right-tab-icon-link {
     position: relative;
     right: -8px;