First simple item detail version for a share

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

@@ -68,9 +68,7 @@ module Data.Icons exposing
     , tag2
     , tagIcon
     , tagIcon2
-    , tags
     , tags2
-    , tagsIcon
     , tagsIcon2
     )
 
@@ -361,16 +359,6 @@ tagIcon2 classes =
     i [ class (tag2 ++ " " ++ classes) ] []
 
 
-tags : String
-tags =
-    "tags icon"
-
-
-tagsIcon : String -> Html msg
-tagsIcon classes =
-    i [ class (tags ++ " " ++ classes) ] []
-
-
 tags2 : String
 tags2 =
     "fa fa-tags"

modules/webapp/src/main/elm/Messages/Page/ShareDetail.elm

@@ -1,20 +1,28 @@
 module Messages.Page.ShareDetail exposing (..)
 
 import Messages.Comp.SharePasswordForm
+import Messages.DateFormat
+import Messages.UiLanguage exposing (UiLanguage(..))
 
 
 type alias Texts =
     { passwordForm : Messages.Comp.SharePasswordForm.Texts
+    , formatDateLong : Int -> String
+    , formatDateShort : Int -> String
     }
 
 
 gb : Texts
 gb =
     { passwordForm = Messages.Comp.SharePasswordForm.gb
+    , formatDateLong = Messages.DateFormat.formatDateLong English
+    , formatDateShort = Messages.DateFormat.formatDateShort English
     }
 
 
 de : Texts
 de =
     { passwordForm = Messages.Comp.SharePasswordForm.de
+    , formatDateLong = Messages.DateFormat.formatDateLong German
+    , formatDateShort = Messages.DateFormat.formatDateShort German
     }

modules/webapp/src/main/elm/Page/ShareDetail/View.elm

@@ -1,9 +1,12 @@
 module Page.ShareDetail.View exposing (viewContent, viewSidebar)
 
+import Api
 import Api.Model.VersionInfo exposing (VersionInfo)
 import Comp.Basic as B
 import Comp.SharePasswordForm
 import Data.Flags exposing (Flags)
+import Data.Icons as Icons
+import Data.ItemTemplate as IT exposing (ItemTemplate)
 import Data.UiSettings exposing (UiSettings)
 import Html exposing (..)
 import Html.Attributes exposing (..)
@@ -11,6 +14,8 @@ import Messages.Page.ShareDetail exposing (Texts)
 import Page exposing (Page(..))
 import Page.ShareDetail.Data exposing (..)
 import Styles as S
+import Util.CustomField
+import Util.Item
 
 
 viewSidebar : Texts -> Bool -> Flags -> UiSettings -> Model -> Html Msg
@@ -55,7 +60,7 @@ mainContent texts flags settings shareId model =
         , class S.content
         ]
         [ itemHead texts shareId model
-        , div [ class "flex flex-col sm:flex-row" ]
+        , div [ class "flex flex-col sm:flex-row sm:space-x-4 relative h-full" ]
             [ itemData texts model
             , itemPreview texts flags settings model
             ]
@@ -64,16 +69,92 @@ mainContent texts flags settings shareId model =
 
 itemData : Texts -> Model -> Html Msg
 itemData texts model =
-    div [ class "flex" ]
+    let
-        []
+        boxStyle =
+            "mb-4 sm:mb-6 max-w-sm"
+
+        headerStyle =
+            "py-2 bg-blue-50 hover:bg-blue-100 dark:bg-bluegray-700 dark:hover:bg-opacity-100 dark:hover:bg-bluegray-600 text-lg font-medium rounded-lg"
+
+        showTag tag =
+            div
+                [ class "flex ml-2 mt-1 font-semibold hover:opacity-75"
+                , class S.basicLabel
+                ]
+                [ i [ class "fa fa-tag mr-2" ] []
+                , text tag.name
+                ]
+
+        showField =
+            Util.CustomField.renderValue2
+                [ ( S.basicLabel, True )
+                , ( "flex ml-2 mt-1 font-semibold hover:opacity-75", True )
+                ]
+                Nothing
+    in
+    div [ class "flex flex-col pr-2 sm:w-1/3" ]
+        [ div [ class boxStyle ]
+            [ div [ class headerStyle ]
+                [ Icons.dateIcon2 "mr-2 ml-2"
+                , text "Date"
+                ]
+            , div [ class "text-lg ml-2" ]
+                [ Util.Item.toItemLight model.item
+                    |> IT.render IT.dateLong (templateCtx texts)
+                    |> text
+                ]
+            ]
+        , div [ class boxStyle ]
+            [ div [ class headerStyle ]
+                [ Icons.tagsIcon2 "mr-2 ml-2"
+                , text "Tags & Fields"
+                ]
+            , div [ class "flex flex-row items-center flex-wrap font-medium my-1" ]
+                (List.map showTag model.item.tags ++ List.map showField model.item.customfields)
+            ]
+        , div [ class boxStyle ]
+            [ div [ class headerStyle ]
+                [ Icons.correspondentIcon2 "mr-2 ml-2"
+                , text "Correspondent"
+                ]
+            , div [ class "text-lg ml-2" ]
+                [ Util.Item.toItemLight model.item
+                    |> IT.render IT.correspondent (templateCtx texts)
+                    |> text
+                ]
+            ]
+        , div [ class boxStyle ]
+            [ div [ class headerStyle ]
+                [ Icons.concernedIcon2 "mr-2 ml-2"
+                , text "Concerning"
+                ]
+            , div [ class "text-lg ml-2" ]
+                [ Util.Item.toItemLight model.item
+                    |> IT.render IT.concerning (templateCtx texts)
+                    |> text
+                ]
+            ]
+        ]
 
 
-{-| Using ItemDetail Model to be able to reuse SingleAttachment component
--}
 itemPreview : Texts -> Flags -> UiSettings -> Model -> Html Msg
 itemPreview texts flags settings model =
-    div [ class "flex flex-grow" ]
+    let
-        []
+        id =
+            List.head model.item.attachments
+                |> Maybe.map .id
+                |> Maybe.withDefault ""
+    in
+    div
+        [ class "flex flex-grow"
+        , style "min-height" "500px"
+        ]
+        [ embed
+            [ src (Data.UiSettings.pdfUrl settings flags (Api.shareFileURL id))
+            , class " h-full w-full mx-0 py-0"
+            ]
+            []
+        ]
 
 
 itemHead : Texts -> String -> Model -> Html Msg
@@ -84,7 +165,7 @@ itemHead texts shareId model =
                 [ text model.item.name
                 ]
             ]
-        , div [ class "flex flex-row items-center justify-end" ]
+        , div [ class "flex flex-row items-center justify-end mb-2 sm:mb-0" ]
             [ B.secondaryBasicButton
                 { label = "Close"
                 , icon = "fa fa-times"
@@ -106,3 +187,11 @@ passwordContent texts flags versionInfo model =
         [ Html.map PasswordMsg
             (Comp.SharePasswordForm.view texts.passwordForm flags versionInfo model.passwordModel)
         ]
+
+
+templateCtx : Texts -> IT.TemplateContext
+templateCtx texts =
+    { dateFormatLong = texts.formatDateLong
+    , dateFormatShort = texts.formatDateShort
+    , directionLabel = \_ -> ""
+    }

modules/webapp/src/main/elm/Styles.elm

@@ -325,7 +325,7 @@ border2 =
 
 header1 : String
 header1 =
-    " text-3xl mt-3 mb-5 font-semibold tracking-wide break-all"
+    " text-3xl mt-3 mb-3 sm:mb-5 font-semibold tracking-wide break-all"
 
 
 header2 : String

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

@@ -8,14 +8,49 @@
 module Util.Item exposing
     ( concTemplate
     , corrTemplate
+    , toItemLight
     )
 
+import Api.Model.Attachment exposing (Attachment)
+import Api.Model.AttachmentLight exposing (AttachmentLight)
+import Api.Model.ItemDetail exposing (ItemDetail)
 import Api.Model.ItemLight exposing (ItemLight)
 import Data.Fields
 import Data.ItemTemplate as IT exposing (ItemTemplate)
 import Data.UiSettings exposing (UiSettings)
 
 
+toItemLight : ItemDetail -> ItemLight
+toItemLight detail =
+    { id = detail.id
+    , name = detail.name
+    , state = detail.state
+    , date = Maybe.withDefault detail.created detail.itemDate
+    , dueDate = detail.dueDate
+    , source = detail.source
+    , direction = Just detail.direction
+    , corrOrg = detail.corrOrg
+    , corrPerson = detail.corrPerson
+    , concPerson = detail.concPerson
+    , concEquipment = detail.concEquipment
+    , folder = detail.folder
+    , attachments = List.indexedMap toAttachmentLight detail.attachments
+    , tags = detail.tags
+    , customfields = detail.customfields
+    , notes = detail.notes
+    , highlighting = []
+    }
+
+
+toAttachmentLight : Int -> Attachment -> AttachmentLight
+toAttachmentLight index attach =
+    { id = attach.id
+    , position = index
+    , name = attach.name
+    , pageCount = Nothing
+    }
+
+
 corrTemplate : UiSettings -> ItemTemplate
 corrTemplate settings =
     let