mirror of
https://github.com/TheAnachronism/docspell.git
synced 2025-06-22 02:18:26 +00:00
Improve item detail view
- Separate page (permalink) for item details - Use available space and hide search menu - Disable item navigation links if there is nothing to go to - Show notes more prominently and allow to hide them
This commit is contained in:
Eike Kettner
@ -3,11 +3,11 @@ module Page.Home.Data exposing
|
||||
, Msg(..)
|
||||
, ViewMode(..)
|
||||
, emptyModel
|
||||
, itemNav
|
||||
)
|
||||
|
||||
import Api.Model.ItemDetail exposing (ItemDetail)
|
||||
import Api.Model.ItemLightList exposing (ItemLightList)
|
||||
import Comp.ItemDetail
|
||||
import Comp.ItemList
|
||||
import Comp.SearchMenu
|
||||
import Http
|
||||
@ -17,7 +17,6 @@ type alias Model =
|
||||
{ searchMenuModel : Comp.SearchMenu.Model
|
||||
, itemListModel : Comp.ItemList.Model
|
||||
, searchInProgress : Bool
|
||||
, itemDetailModel : Comp.ItemDetail.Model
|
||||
, viewMode : ViewMode
|
||||
}
|
||||
|
||||
@ -26,7 +25,6 @@ emptyModel : Model
|
||||
emptyModel =
|
||||
{ searchMenuModel = Comp.SearchMenu.emptyModel
|
||||
, itemListModel = Comp.ItemList.emptyModel
|
||||
, itemDetailModel = Comp.ItemDetail.emptyModel
|
||||
, searchInProgress = False
|
||||
, viewMode = Listing
|
||||
}
|
||||
@ -38,10 +36,22 @@ type Msg
|
||||
| ItemListMsg Comp.ItemList.Msg
|
||||
| ItemSearchResp (Result Http.Error ItemLightList)
|
||||
| DoSearch
|
||||
| ItemDetailMsg Comp.ItemDetail.Msg
|
||||
| ItemDetailResp (Result Http.Error ItemDetail)
|
||||
|
||||
|
||||
type ViewMode
|
||||
= Listing
|
||||
| Detail
|
||||
|
||||
|
||||
itemNav : String -> Model -> { prev : Maybe String, next : Maybe String }
|
||||
itemNav id model =
|
||||
let
|
||||
prev =
|
||||
Comp.ItemList.prevItem model.itemListModel id
|
||||
|
||||
next =
|
||||
Comp.ItemList.nextItem model.itemListModel id
|
||||
in
|
||||
{ prev = Maybe.map .id prev
|
||||
, next = Maybe.map .id next
|
||||
}
|
||||
|
||||
@ -1,21 +1,22 @@
|
||||
module Page.Home.Update exposing (update)
|
||||
|
||||
import Api
|
||||
import Browser.Navigation as Nav
|
||||
import Comp.ItemDetail
|
||||
import Comp.ItemList
|
||||
import Comp.SearchMenu
|
||||
import Data.Flags exposing (Flags)
|
||||
import Page exposing (Page(..))
|
||||
import Page.Home.Data exposing (..)
|
||||
import Util.Update
|
||||
|
||||
|
||||
update : Flags -> Msg -> Model -> ( Model, Cmd Msg )
|
||||
update flags msg model =
|
||||
update : Nav.Key -> Flags -> Msg -> Model -> ( Model, Cmd Msg )
|
||||
update key flags msg model =
|
||||
case msg of
|
||||
Init ->
|
||||
Util.Update.andThen1
|
||||
[ update flags (SearchMenuMsg Comp.SearchMenu.Init)
|
||||
, update flags (ItemDetailMsg Comp.ItemDetail.Init)
|
||||
[ update key flags (SearchMenuMsg Comp.SearchMenu.Init)
|
||||
, doSearch flags
|
||||
]
|
||||
model
|
||||
@ -45,7 +46,7 @@ update flags msg model =
|
||||
cmd =
|
||||
case mitem of
|
||||
Just item ->
|
||||
Api.itemDetail flags item.id ItemDetailResp
|
||||
Page.set key (ItemDetailPage item.id)
|
||||
|
||||
Nothing ->
|
||||
Cmd.none
|
||||
@ -57,7 +58,7 @@ update flags msg model =
|
||||
m =
|
||||
{ model | searchInProgress = False, viewMode = Listing }
|
||||
in
|
||||
update flags (ItemListMsg (Comp.ItemList.SetResults list)) m
|
||||
update key flags (ItemListMsg (Comp.ItemList.SetResults list)) m
|
||||
|
||||
ItemSearchResp (Err _) ->
|
||||
( { model | searchInProgress = False }, Cmd.none )
|
||||
@ -65,58 +66,6 @@ update flags msg model =
|
||||
DoSearch ->
|
||||
doSearch flags model
|
||||
|
||||
ItemDetailMsg m ->
|
||||
let
|
||||
( m2, c2, nav ) =
|
||||
Comp.ItemDetail.update flags m model.itemDetailModel
|
||||
|
||||
newModel =
|
||||
{ model | itemDetailModel = m2 }
|
||||
|
||||
newCmd =
|
||||
Cmd.map ItemDetailMsg c2
|
||||
in
|
||||
case nav of
|
||||
Comp.ItemDetail.NavBack ->
|
||||
doSearch flags newModel
|
||||
|
||||
Comp.ItemDetail.NavPrev ->
|
||||
case Comp.ItemList.prevItem model.itemListModel m2.item.id of
|
||||
Just n ->
|
||||
( newModel, Cmd.batch [ newCmd, Api.itemDetail flags n.id ItemDetailResp ] )
|
||||
|
||||
Nothing ->
|
||||
( newModel, newCmd )
|
||||
|
||||
Comp.ItemDetail.NavNext ->
|
||||
case Comp.ItemList.nextItem model.itemListModel m2.item.id of
|
||||
Just n ->
|
||||
( newModel, Cmd.batch [ newCmd, Api.itemDetail flags n.id ItemDetailResp ] )
|
||||
|
||||
Nothing ->
|
||||
( newModel, newCmd )
|
||||
|
||||
Comp.ItemDetail.NavNextOrBack ->
|
||||
case Comp.ItemList.nextItem model.itemListModel m2.item.id of
|
||||
Just n ->
|
||||
( newModel, Cmd.batch [ newCmd, Api.itemDetail flags n.id ItemDetailResp ] )
|
||||
|
||||
Nothing ->
|
||||
doSearch flags newModel
|
||||
|
||||
Comp.ItemDetail.NavNone ->
|
||||
( newModel, newCmd )
|
||||
|
||||
ItemDetailResp (Ok item) ->
|
||||
let
|
||||
m =
|
||||
{ model | viewMode = Detail }
|
||||
in
|
||||
update flags (ItemDetailMsg (Comp.ItemDetail.SetItem item)) m
|
||||
|
||||
ItemDetailResp (Err _) ->
|
||||
( model, Cmd.none )
|
||||
|
||||
|
||||
doSearch : Flags -> Model -> ( Model, Cmd Msg )
|
||||
doSearch flags model =
|
||||
|
||||
@ -42,7 +42,7 @@ view model =
|
||||
Html.map ItemListMsg (Comp.ItemList.view model.itemListModel)
|
||||
|
||||
Detail ->
|
||||
Html.map ItemDetailMsg (Comp.ItemDetail.view model.itemDetailModel)
|
||||
div [] []
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
22
modules/webapp/src/main/elm/Page/ItemDetail/Data.elm
Normal file
22
modules/webapp/src/main/elm/Page/ItemDetail/Data.elm
Normal file
@ -0,0 +1,22 @@
|
||||
module Page.ItemDetail.Data exposing (Model, Msg(..), emptyModel)
|
||||
|
||||
import Api.Model.ItemDetail exposing (ItemDetail)
|
||||
import Comp.ItemDetail
|
||||
import Http
|
||||
|
||||
|
||||
type alias Model =
|
||||
{ detail : Comp.ItemDetail.Model
|
||||
}
|
||||
|
||||
|
||||
emptyModel : Model
|
||||
emptyModel =
|
||||
{ detail = Comp.ItemDetail.emptyModel
|
||||
}
|
||||
|
||||
|
||||
type Msg
|
||||
= Init String
|
||||
| ItemDetailMsg Comp.ItemDetail.Msg
|
||||
| ItemResp (Result Http.Error ItemDetail)
|
||||
39
modules/webapp/src/main/elm/Page/ItemDetail/Update.elm
Normal file
39
modules/webapp/src/main/elm/Page/ItemDetail/Update.elm
Normal file
@ -0,0 +1,39 @@
|
||||
module Page.ItemDetail.Update exposing (update)
|
||||
|
||||
import Api
|
||||
import Browser.Navigation as Nav
|
||||
import Comp.ItemDetail
|
||||
import Data.Flags exposing (Flags)
|
||||
import Page.ItemDetail.Data exposing (Model, Msg(..))
|
||||
|
||||
|
||||
update : Nav.Key -> Flags -> Maybe String -> Msg -> Model -> ( Model, Cmd Msg )
|
||||
update key flags next msg model =
|
||||
case msg of
|
||||
Init id ->
|
||||
let
|
||||
( lm, lc ) =
|
||||
Comp.ItemDetail.update key flags next Comp.ItemDetail.Init model.detail
|
||||
in
|
||||
( { model | detail = lm }
|
||||
, Cmd.batch [ Api.itemDetail flags id ItemResp, Cmd.map ItemDetailMsg lc ]
|
||||
)
|
||||
|
||||
ItemDetailMsg lmsg ->
|
||||
let
|
||||
( lm, lc ) =
|
||||
Comp.ItemDetail.update key flags next lmsg model.detail
|
||||
in
|
||||
( { model | detail = lm }
|
||||
, Cmd.map ItemDetailMsg lc
|
||||
)
|
||||
|
||||
ItemResp (Ok item) ->
|
||||
let
|
||||
lmsg =
|
||||
Comp.ItemDetail.SetItem item
|
||||
in
|
||||
update key flags next (ItemDetailMsg lmsg) model
|
||||
|
||||
ItemResp (Err err) ->
|
||||
( model, Cmd.none )
|
||||
19
modules/webapp/src/main/elm/Page/ItemDetail/View.elm
Normal file
19
modules/webapp/src/main/elm/Page/ItemDetail/View.elm
Normal file
@ -0,0 +1,19 @@
|
||||
module Page.ItemDetail.View exposing (view)
|
||||
|
||||
import Comp.ItemDetail
|
||||
import Html exposing (..)
|
||||
import Html.Attributes exposing (..)
|
||||
import Page.ItemDetail.Data exposing (Model, Msg(..))
|
||||
|
||||
|
||||
type alias ItemNav =
|
||||
{ prev : Maybe String
|
||||
, next : Maybe String
|
||||
}
|
||||
|
||||
|
||||
view : ItemNav -> Model -> Html Msg
|
||||
view inav model =
|
||||
div [ class "ui fluid container item-detail-page" ]
|
||||
[ Html.map ItemDetailMsg (Comp.ItemDetail.view inav model.detail)
|
||||
]
|
||||
Reference in New Issue
Block a user