@@ -3,9 +3,10 @@ import React from 'react'
33import Spinner from 'part:@sanity/components/loading/spinner'
44import styles from './styles/DocumentsPane.css'
55import { StateLink , IntentLink , withRouterHOC } from 'part:@sanity/base/router'
6- import { Item } from 'part:@sanity/components/lists/default'
6+ import SortIcon from 'part:@sanity/base/sort-icon'
7+
78import ListView from './ListView'
8- import { partition } from 'lodash'
9+ import { partition , uniqBy } from 'lodash'
910import VisibilityOffIcon from 'part:@sanity/base/visibility-off-icon'
1011import EditIcon from 'part:@sanity/base/edit-icon'
1112import QueryContainer from 'part:@sanity/base/query-container'
@@ -21,18 +22,43 @@ import Snackbar from 'part:@sanity/components/snackbar/default'
2122
2223const NOOP = ( ) => { } // eslint-disable-line
2324
24- function readListLayoutSettings ( ) {
25- return JSON . parse ( window . localStorage . getItem ( 'desk-tool.listlayout-settings' ) || '{}' )
25+ const LOCALSTORAGE_KEY = 'desk-tool.documents-pane-settings'
26+
27+ function readSettings ( ) {
28+ return JSON . parse ( window . localStorage . getItem ( LOCALSTORAGE_KEY ) || '{}' )
2629}
2730
28- function writeListLayoutSettings ( settings ) {
29- window . localStorage . setItem ( 'desk-tool.listlayout-settings' , JSON . stringify ( settings ) )
31+ function writeSettings ( settings ) {
32+ window . localStorage . setItem ( LOCALSTORAGE_KEY , JSON . stringify ( settings ) )
3033}
3134
3235function getDocumentKey ( document ) {
3336 return getPublishedId ( document . _id )
3437}
3538
39+ function toGradientOrderClause ( orderBy ) {
40+ return orderBy . map (
41+ ordering => [ ordering . field , ordering . direction ]
42+ . filter ( Boolean )
43+ . join ( ' ' )
44+ ) . join ( ', ' )
45+ }
46+
47+ const ORDER_BY_UPDATED_AT = {
48+ title : 'Last edited' ,
49+ name : 'updatedAt' ,
50+ by : [ { field : '_updatedAt' , direction : 'desc' } ]
51+ }
52+
53+ const ORDER_BY_CREATED_AT = {
54+ title : 'Created' ,
55+ name : 'createdAt' ,
56+ by : [ { field : '_createdAt' , direction : 'desc' } ]
57+ }
58+
59+ const DEFAULT_SELECTED_ORDERING_OPTION = ORDER_BY_UPDATED_AT
60+ const DEFAULT_ORDERING_OPTIONS = [ ORDER_BY_UPDATED_AT , ORDER_BY_CREATED_AT ]
61+
3662function removePublishedWithDrafts ( documents ) {
3763
3864 const [ draftIds , publishedIds ] = partition ( documents . map ( doc => doc . _id ) , isDraftId )
@@ -50,57 +76,61 @@ function removePublishedWithDrafts(documents) {
5076 . filter ( doc => ! ( isPublishedId ( doc . _id ) && doc . hasDraft ) )
5177}
5278
79+ function writeSettingsForType ( type , settings ) {
80+ writeSettings ( Object . assign ( readSettings ( ) , {
81+ [ type ] : settings
82+ } ) )
83+ }
84+
5385export default withRouterHOC ( class DocumentsPane extends React . PureComponent {
5486 static propTypes = {
5587 selectedType : PropTypes . string ,
5688 selectedDocumentId : PropTypes . string ,
5789 schemaType : PropTypes . object ,
5890 isCollapsed : PropTypes . bool ,
59- router : PropTypes . shape ( {
60- state : PropTypes . shape ( {
61- selectType : PropTypes . string ,
62- selectedType : PropTypes . string
63- } )
64- } )
91+ router : PropTypes . object
6592 }
6693
6794 static defaultProps = {
6895 loading : false ,
6996 isCollapsed : false ,
7097 published : [ ] ,
7198 drafts : [ ] ,
72- onSetSorting : NOOP ,
7399 onSetListLayout : NOOP
74100 }
75101
76- state = {
77- listLayoutSettings : readListLayoutSettings ( ) ,
78- sorting : '_updatedAt desc' ,
79- menuIsOpen : false
80- }
81-
82- static contextTypes = {
83- __internalRouter : PropTypes . object
102+ handleSetListLayout = listLayout => {
103+ this . setState ( prevState => ( {
104+ settings : {
105+ ...prevState . settings ,
106+ listLayout : listLayout . key
107+ }
108+ } ) , this . writeSettings )
84109 }
85110
86-
87- handleSetListLayout = listLayout => {
88- const { selectedType} = this . props . router . state
89- const nextSettings = Object . assign ( readListLayoutSettings ( ) , {
90- [ selectedType ] : listLayout
91- } )
92- writeListLayoutSettings ( nextSettings )
93- this . setState ( { listLayoutSettings : nextSettings } )
111+ constructor ( props ) {
112+ super ( )
113+ const settings = readSettings ( )
114+ this . state = {
115+ settings : ( settings && settings [ props . selectedType ] ) || {
116+ listLayout : 'default' ,
117+ ordering : DEFAULT_SELECTED_ORDERING_OPTION
118+ } ,
119+ menuIsOpen : false
120+ }
94121 }
95122
96- getListLayoutForType ( typeName ) {
97- return this . state . listLayoutSettings [ typeName ] || 'default'
123+ handleSetOrdering = ordering => {
124+ this . setState ( prevState => ( {
125+ settings : {
126+ ...prevState . settings ,
127+ ordering : ordering . name
128+ }
129+ } ) , this . writeSettings )
98130 }
99131
100- handleSetSorting = sorting => {
101- this . setState ( {
102- sorting : sorting
103- } )
132+ writeSettings ( ) {
133+ writeSettingsForType ( this . props . selectedType , this . state . settings )
104134 }
105135
106136 handleToggleMenu = ( ) => {
@@ -115,31 +145,52 @@ export default withRouterHOC(class DocumentsPane extends React.PureComponent {
115145 } )
116146 }
117147
118- handleGoToCreateNew = ( ) => {
119- const { selectedType} = this . props
148+ getOrderingOptions ( selectedType ) {
120149 const type = schema . get ( selectedType )
121- const url = this . context . __internalRouter . resolveIntentLink ( 'create' , {
122- type : type . name
123- } )
124- this . context . __internalRouter . navigateUrl ( url )
150+
151+ const optionsWithDefaults = type . orderings
152+ ? type . orderings . concat ( DEFAULT_ORDERING_OPTIONS )
153+ : DEFAULT_ORDERING_OPTIONS
154+
155+ return uniqBy ( optionsWithDefaults , 'name' )
156+ . map ( option => {
157+ return {
158+ ...option ,
159+ icon : option . icon || SortIcon ,
160+ title : < span > Sort by < b > { option . title } </ b > </ span >
161+ }
162+ } )
163+ }
164+
165+ handleGoToCreateNew = ( ) => {
166+ const { selectedType, router} = this . props
167+ router . navigateIntent ( 'create' , { type : selectedType } )
125168 }
126169
127170 renderDocumentsPaneMenu = ( ) => {
171+ const { selectedType} = this . props
172+ const type = schema . get ( selectedType )
128173 return (
129174 < DocumentsPaneMenu
130175 onSetListLayout = { this . handleSetListLayout }
131- onSetSorting = { this . handleSetSorting }
176+ onSetOrdering = { this . handleSetOrdering }
132177 onGoToCreateNew = { this . handleGoToCreateNew }
133178 onMenuClose = { this . handleCloseMenu }
134179 onClickOutside = { this . handleCloseMenu }
135180 isOpen = { this . state . menuIsOpen }
181+ orderingOptions = { this . getOrderingOptions ( selectedType ) }
182+ type = { type }
136183 />
137184 )
138185 }
139186
140187 renderDocumentPaneItem = ( item , index , options = { } ) => {
141188 const { selectedType, selectedDocumentId} = this . props
142- const listLayout = this . getListLayoutForType ( selectedType )
189+ const { settings} = this . state
190+
191+ const ordering = this . getOrderingOptions ( selectedType )
192+ . find ( option => option . name === settings . ordering )
193+
143194 const type = schema . get ( selectedType )
144195 const linkState = {
145196 selectedDocumentId : getPublishedId ( item . _id ) ,
@@ -158,7 +209,8 @@ export default withRouterHOC(class DocumentsPane extends React.PureComponent {
158209 < div className = { isSelected ? styles . selectedItem : styles . item } >
159210 < Preview
160211 value = { item }
161- layout = { listLayout }
212+ ordering = { ordering }
213+ layout = { settings . listLayout }
162214 type = { type }
163215 />
164216 < div className = { styles . itemStatus } >
@@ -194,16 +246,17 @@ export default withRouterHOC(class DocumentsPane extends React.PureComponent {
194246
195247 render ( ) {
196248 const {
197- router,
198249 selectedDocumentId,
199250 schemaType,
200251 isCollapsed
201252 } = this . props
202253
254+ const { settings} = this . state
255+ const currentOrderingOption = this . getOrderingOptions ( schemaType . name )
256+ . find ( option => option . name === settings . ordering ) || DEFAULT_SELECTED_ORDERING_OPTION
203257
204258 const params = { type : schemaType . name , draftsPath : `${ DRAFTS_FOLDER } }
205- const query = `*[_type == $type] | order(${ this . state . sorting }
206-
259+ const query = `*[_type == $type] | order(${ toGradientOrderClause ( currentOrderingOption . by ) }
207260 return (
208261 < Pane
209262 { ...this . props }
@@ -218,9 +271,9 @@ export default withRouterHOC(class DocumentsPane extends React.PureComponent {
218271 params = { params }
219272 type = { schemaType }
220273 selectedId = { selectedDocumentId }
221- listLayout = { this . getListLayoutForType ( schemaType . name ) }
274+ settings = { settings }
222275 >
223- { ( { result, loading, error, onRetry, type, listLayout } ) => {
276+ { ( { result, loading, error, onRetry, type} ) => {
224277 if ( error ) {
225278 return (
226279 < Snackbar
@@ -264,7 +317,7 @@ export default withRouterHOC(class DocumentsPane extends React.PureComponent {
264317 items = { items }
265318 getItemKey = { getDocumentKey }
266319 renderItem = { this . renderDocumentPaneItem }
267- listLayout = { listLayout }
320+ listLayout = { settings . listLayout }
268321 />
269322 ) }
270323
0 commit comments