Select list/tile view and store to ui settings

Issue: #526
This commit is contained in:
eikek
2021-12-13 14:49:22 +01:00
parent 05843876cc
commit 1eb1db730c
20 changed files with 850 additions and 75 deletions

View File

@ -27,7 +27,6 @@ module Page.Home.Data exposing
import Api
import Api.Model.BasicResult exposing (BasicResult)
import Api.Model.ItemLight exposing (ItemLight)
import Api.Model.ItemLightList exposing (ItemLightList)
import Api.Model.SearchStats exposing (SearchStats)
import Browser.Dom as Dom
@ -40,6 +39,7 @@ import Comp.PowerSearchInput
import Comp.PublishItems
import Comp.SearchMenu
import Data.Flags exposing (Flags)
import Data.ItemArrange exposing (ItemArrange)
import Data.ItemNav exposing (ItemNav)
import Data.ItemQuery as Q
import Data.Items
@ -66,6 +66,8 @@ type alias Model =
, scrollToCard : Maybe String
, searchStats : SearchStats
, powerSearchInput : Comp.PowerSearchInput.Model
, viewMenuOpen : Bool
, itemRowsOpen : Set String
}
@ -133,6 +135,8 @@ init flags viewMode =
, viewMode = viewMode
, searchStats = Api.Model.SearchStats.empty
, powerSearchInput = Comp.PowerSearchInput.init
, viewMenuOpen = False
, itemRowsOpen = Set.empty
}
@ -230,6 +234,10 @@ type Msg
| TogglePublishCurrentQueryView
| PublishViewMsg Comp.PublishItems.Msg
| RefreshView
| ToggleViewMenu
| ToggleShowGroups
| ToggleArrange ItemArrange
| ToggleExpandCollapseRows
type SearchType

View File

@ -144,16 +144,40 @@ update mId key flags texts settings msg model =
( v, _ ) ->
v
itemRows =
case result.toggleOpenRow of
Just rid ->
if Set.member rid model.itemRowsOpen then
Set.remove rid model.itemRowsOpen
else
Set.insert rid model.itemRowsOpen
Nothing ->
model.itemRowsOpen
in
withSub
( { model
| itemListModel = result.model
, viewMode = nextView
, itemRowsOpen = itemRows
, dragDropData = DD.DragDropData result.dragModel Nothing
}
, Cmd.batch [ Cmd.map ItemCardListMsg result.cmd, searchMsg ]
)
ToggleExpandCollapseRows ->
let
itemRows =
if Set.isEmpty model.itemRowsOpen then
Set.singleton "all"
else
Set.empty
in
noSub ( { model | itemRowsOpen = itemRows, viewMenuOpen = False }, Cmd.none )
ItemSearchResp scroll (Ok list) ->
let
noff =
@ -923,6 +947,29 @@ update mId key flags texts settings msg model =
_ ->
noSub ( model, Cmd.none )
ToggleViewMenu ->
noSub ( { model | viewMenuOpen = not model.viewMenuOpen }, Cmd.none )
ToggleShowGroups ->
let
newSettings =
{ settings | itemSearchShowGroups = not settings.itemSearchShowGroups }
cmd =
Api.saveClientSettings flags newSettings (ClientSettingsSaveResp newSettings)
in
noSub ( { model | viewMenuOpen = False }, cmd )
ToggleArrange am ->
let
newSettings =
{ settings | itemSearchArrange = am }
cmd =
Api.saveClientSettings flags newSettings (ClientSettingsSaveResp newSettings)
in
noSub ( { model | viewMenuOpen = False }, cmd )
--- Helpers

View File

@ -19,7 +19,7 @@ import Comp.SearchMenu
import Comp.SearchStatsView
import Data.Flags exposing (Flags)
import Data.Icons as Icons
import Data.ItemQuery as Q
import Data.ItemArrange
import Data.ItemSelection
import Data.SearchMode
import Data.UiSettings exposing (UiSettings)
@ -182,7 +182,7 @@ itemsBar texts flags settings model =
SelectView svm ->
[ editMenuBar texts model svm ]
PublishView query ->
PublishView _ ->
[ defaultMenuBar texts flags settings model ]
@ -248,6 +248,12 @@ defaultMenuBar texts flags settings model =
, Html.map PowerSearchMsg
(Comp.PowerSearchInput.viewResult [] model.powerSearchInput)
]
isCardView =
settings.itemSearchArrange == Data.ItemArrange.Cards
isListView =
settings.itemSearchArrange == Data.ItemArrange.List
in
MB.view
{ end =
@ -293,6 +299,61 @@ defaultMenuBar texts flags settings model =
, ( "bg-gray-200 dark:bg-bluegray-600", selectActive model )
]
}
, MB.Dropdown
{ linkIcon = "fa fa-grip-vertical"
, label = ""
, linkClass =
[ ( S.secondaryBasicButton, True )
]
, toggleMenu = ToggleViewMenu
, menuOpen = model.viewMenuOpen
, items =
[ { icon =
if settings.itemSearchShowGroups then
i [ class "fa fa-check-square font-thin" ] []
else
i [ class "fa fa-square font-thin" ] []
, label = texts.showItemGroups
, attrs =
[ href "#"
, onClick ToggleShowGroups
]
}
, { icon =
if isListView then
i [ class "fa fa-check" ] []
else
i [ class "fa fa-list" ] []
, label = texts.listView
, attrs =
[ href "#"
, onClick (ToggleArrange Data.ItemArrange.List)
]
}
, { icon =
if isCardView then
i [ class "fa fa-check" ] []
else
i [ class "fa fa-th-large" ] []
, label = texts.tileView
, attrs =
[ href "#"
, onClick (ToggleArrange Data.ItemArrange.Cards)
]
}
, { icon = i [ class "fa fa-compress" ] []
, label = texts.expandCollapseRows
, attrs =
[ href "#"
, classList [ ( "hidden", not isListView ) ]
, onClick ToggleExpandCollapseRows
]
}
]
}
]
, start =
[ MB.CustomElement <|
@ -469,13 +530,16 @@ itemCardList texts flags settings model =
Api.itemBasePreviewURL item.id
viewCfg sel =
Comp.ItemCardList.ViewConfig
model.scrollToCard
sel
previewUrl
previewUrlFallback
(.id >> Api.fileURL)
(.id >> ItemDetailPage)
{ current = model.scrollToCard
, selection = sel
, previewUrl = previewUrl
, previewUrlFallback = previewUrlFallback
, attachUrl = .id >> Api.fileURL
, detailPage = .id >> ItemDetailPage
, arrange = settings.itemSearchArrange
, showGroups = settings.itemSearchShowGroups
, rowOpen = \id -> Set.member "all" model.itemRowsOpen || Set.member id model.itemRowsOpen
}
itemViewCfg =
case model.viewMode of
@ -486,7 +550,7 @@ itemCardList texts flags settings model =
viewCfg Data.ItemSelection.Inactive
in
[ Html.map ItemCardListMsg
(Comp.ItemCardList.view2 texts.itemCardList
(Comp.ItemCardList.view texts.itemCardList
itemViewCfg
settings
flags

View File

@ -17,7 +17,10 @@ import Comp.PowerSearchInput
import Comp.SearchMenu
import Comp.SharePasswordForm
import Data.Flags exposing (Flags)
import Data.ItemArrange exposing (ItemArrange)
import Http
import Page.Home.Data exposing (Msg(..))
import Set exposing (Set)
import Util.Html exposing (KeyCode)
@ -50,6 +53,12 @@ type alias Model =
, initialized : Bool
, contentSearch : Maybe String
, searchMode : SearchBarMode
, viewMode :
{ menuOpen : Bool
, showGroups : Bool
, arrange : ItemArrange
, rowsOpen : Set String
}
}
@ -66,6 +75,12 @@ emptyModel flags =
, initialized = False
, contentSearch = Nothing
, searchMode = SearchBarContent
, viewMode =
{ menuOpen = False
, showGroups = True
, arrange = Data.ItemArrange.Cards
, rowsOpen = Set.empty
}
}
@ -100,3 +115,6 @@ type Msg
| ToggleSearchBar
| SetContentSearch String
| ContentSearchKey (Maybe KeyCode)
| ToggleViewMenu
| ToggleArrange ItemArrange
| ToggleShowGroups

View File

@ -11,6 +11,7 @@ import Comp.Basic as B
import Comp.MenuBar as MB
import Comp.PowerSearchInput
import Data.Flags exposing (Flags)
import Data.ItemArrange
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick, onInput)
@ -108,6 +109,43 @@ view texts flags model =
, handler = onClick ResetSearch
, attrs = [ href "#" ]
}
, MB.Dropdown
{ linkIcon = "fa fa-grip-vertical"
, label = ""
, linkClass =
[ ( S.secondaryBasicButton, True )
]
, toggleMenu = ToggleViewMenu
, menuOpen = model.viewMode.menuOpen
, items =
[ { icon =
if model.viewMode.showGroups then
i [ class "fa fa-check-square font-thin" ] []
else
i [ class "fa fa-square font-thin" ] []
, label = texts.showItemGroups
, attrs =
[ href "#"
, onClick ToggleShowGroups
]
}
, { icon = i [ class "fa fa-list" ] []
, label = texts.listView
, attrs =
[ href "#"
, onClick (ToggleArrange Data.ItemArrange.List)
]
}
, { icon = i [ class "fa fa-th-large" ] []
, label = texts.tileView
, attrs =
[ href "#"
, onClick (ToggleArrange Data.ItemArrange.Cards)
]
}
]
}
]
, rootClasses = "mb-2 pt-1 dark:bg-bluegray-700 items-center text-sm"
}

View File

@ -17,6 +17,7 @@ import Html.Attributes exposing (..)
import Messages.Page.Share exposing (Texts)
import Page exposing (Page(..))
import Page.Share.Data exposing (Model, Msg(..))
import Set
view : Texts -> UiSettings -> Flags -> String -> Model -> Html Msg
@ -29,9 +30,12 @@ view texts settings flags shareId model =
, previewUrlFallback = \item -> Api.shareItemBasePreviewURL item.id
, attachUrl = .id >> Api.shareFileURL
, detailPage = \item -> ShareDetailPage shareId item.id
, arrange = model.viewMode.arrange
, showGroups = model.viewMode.showGroups
, rowOpen = \id -> Set.member id model.viewMode.rowsOpen
}
in
div []
[ Html.map ItemListMsg
(Comp.ItemCardList.view2 texts.itemCardList viewCfg settings flags model.itemListModel)
(Comp.ItemCardList.view texts.itemCardList viewCfg settings flags model.itemListModel)
]

View File

@ -19,6 +19,7 @@ import Data.ItemQuery as Q
import Data.SearchMode
import Data.UiSettings exposing (UiSettings)
import Page.Share.Data exposing (..)
import Set
import Util.Html
import Util.Maybe
import Util.Update
@ -161,16 +162,31 @@ update flags settings shareId msg model =
ItemListMsg lm ->
let
( im, ic, linkTarget ) =
result =
Comp.ItemCardList.update flags lm model.itemListModel
searchMsg =
Maybe.map Util.Update.cmdUnit (linkTargetMsg linkTarget)
Maybe.map Util.Update.cmdUnit (linkTargetMsg result.linkTarget)
|> Maybe.withDefault Cmd.none
vm =
model.viewMode
itemRows =
case result.toggleOpenRow of
Just rid ->
if Set.member rid vm.rowsOpen then
Set.remove rid vm.rowsOpen
else
Set.insert rid vm.rowsOpen
Nothing ->
vm.rowsOpen
in
noSub
( { model | itemListModel = im }
, Cmd.batch [ Cmd.map ItemListMsg ic, searchMsg ]
( { model | itemListModel = result.model, viewMode = { vm | rowsOpen = itemRows } }
, Cmd.batch [ Cmd.map ItemListMsg result.cmd, searchMsg ]
)
ToggleSearchBar ->
@ -196,6 +212,36 @@ update flags settings shareId msg model =
ContentSearchKey _ ->
noSub ( model, Cmd.none )
ToggleShowGroups ->
let
vm =
model.viewMode
next =
{ vm | showGroups = not vm.showGroups, menuOpen = False }
in
noSub ( { model | viewMode = next }, Cmd.none )
ToggleViewMenu ->
let
vm =
model.viewMode
next =
{ vm | menuOpen = not vm.menuOpen }
in
noSub ( { model | viewMode = next }, Cmd.none )
ToggleArrange am ->
let
vm =
model.viewMode
next =
{ vm | arrange = am, menuOpen = False }
in
noSub ( { model | viewMode = next }, Cmd.none )
noSub : ( Model, Cmd Msg ) -> UpdateResult
noSub ( m, c ) =