TheAnachronism/docspell
1
0
Fork 0
mirror of https://github.com/TheAnachronism/docspell.git synced 2025-06-23 19:08:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve document list view

Browse Source 
Replace the html table with something that has more vertical space,
but scales better horizontally. On most screens at least 6-8 entries
should be visible at once.
This commit is contained in:
Eike Kettner
2020-05-17 14:01:40 +02:00
parent 8a56cf0801
commit f45b40342c
5 changed files with 208 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
modules/webapp/src/main/elm/Comp/ItemCardList.elm Normal file
View File

@ -0,0 +1,187 @@
module Comp.ItemCardList exposing
( Model
, Msg(..)
, init
, nextItem
, prevItem
, update
, view
)
import Api.Model.ItemLight exposing (ItemLight)
import Api.Model.ItemLightGroup exposing (ItemLightGroup)
import Api.Model.ItemLightList exposing (ItemLightList)
import Data.Direction
import Data.Flags exposing (Flags)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick)
import Util.List
import Util.String
import Util.Time
type alias Model =
{ results : ItemLightList
}
type Msg
= SetResults ItemLightList
| SelectItem ItemLight
init : Model
init =
{ results = Api.Model.ItemLightList.empty
}
nextItem : Model -> String -> Maybe ItemLight
nextItem model id =
List.concatMap .items model.results.groups
|> Util.List.findNext (\i -> i.id == id)
prevItem : Model -> String -> Maybe ItemLight
prevItem model id =
List.concatMap .items model.results.groups
|> Util.List.findPrev (\i -> i.id == id)
--- Update
update : Flags -> Msg -> Model -> ( Model, Cmd Msg, Maybe ItemLight )
update _ msg model =
case msg of
SetResults list ->
let
newModel =
{ model | results = list }
in
( newModel, Cmd.none, Nothing )
SelectItem item ->
( model, Cmd.none, Just item )
--- View
view : Model -> Html Msg
view model =
div [ class "ui container" ]
(List.map viewGroup model.results.groups)
viewGroup : ItemLightGroup -> Html Msg
viewGroup group =
div [] <|
List.concat
[ [ div [ class "ui horizontal divider" ]
[ text group.name
]
]
, [ div [ class "ui one column grid" ]
(List.map viewItem group.items)
]
]
viewItem : ItemLight -> Html Msg
viewItem item =
let
dirIcon =
i [ class (Data.Direction.iconFromMaybe item.direction) ] []
corr =
List.filterMap identity [ item.corrOrg, item.corrPerson ]
|> List.map .name
|> List.intersperse ", "
|> String.concat
conc =
List.filterMap identity [ item.concPerson, item.concEquip ]
|> List.map .name
|> List.intersperse ", "
|> String.concat
dueDate =
Maybe.map Util.Time.formatDateShort item.dueDate
|> Maybe.withDefault ""
in
div [ class "column item-list" ]
[ a
[ class "ui fluid card"
, href "#"
, onClick (SelectItem item)
]
[ div [ class "content" ]
[ div [ class "header" ]
[ dirIcon
, Util.String.ellipsis 45 item.name |> text
]
, span [ class "meta" ]
[ div
[ classList
[ ( "ui blue ribbon label", True )
, ( "invisible", item.state /= "created" )
]
]
[ i [ class "exclamation icon" ] []
, text " New"
]
]
, span [ class "right floated meta" ]
[ Util.Time.formatDateShort item.date |> text
]
]
, div [ class "content" ]
[ div [ class "ui horizontal list" ]
[ div
[ class "item"
, title "Correspondent"
]
[ i [ class "envelope outline icon" ] []
, text " "
, Util.String.withDefault "-" corr |> text
]
, div
[ class "item"
, title "Concerning"
]
[ i [ class "comment outline icon" ] []
, text " "
, Util.String.withDefault "-" conc |> text
]
]
, div [ class "right floated meta" ]
[ div [ class "ui horizontal list" ]
[ div
[ class "item"
, title "Source"
]
[ text item.source
]
, div
[ class "item"
, title ("Due on " ++ dueDate)
]
[ div
[ classList
[ ( "ui basic grey label", True )
, ( "invisible hidden", item.dueDate == Nothing )
]
]
[ i [ class "bell icon" ] []
, text (" " ++ dueDate)
]
]
]
]
]
]
]