2020-09-21 12:25:50 +00:00
<!--
- Copyright ( c ) 2020. The Nextcloud Bookmarks contributors .
-
- This file is licensed under the Affero General Public License version 3 or later . See the COPYING file .
-- >
2019-07-26 18:16:37 +00:00
< template >
2022-12-12 19:29:03 +00:00
< div : class = " {
bookmarkslist : true ,
'bookmarkslist--gridview' : viewMode === 'grid'
} " >
2022-06-24 11:01:29 +00:00
< div v-if ="$route.name === routes.ARCHIVED && bookmarks.length" class="bookmarkslist__description" >
{ {
t ( 'bookmarks' , 'Bookmarks to files on the web like photos or PDFs will automatically be saved to your Nextcloud files, so you can still find them even when the link goes offline.' )
} }
< / div >
< div v-if ="$route.name === routes.UNAVAILABLE && bookmarks.length" class="bookmarkslist__description" >
{ {
t ( 'bookmarks' , 'Bookmarked links are checked regularly and the ones that cannot be reached are listed here.' )
} }
< / div >
< div v-if ="$route.name === routes.SHARED_FOLDERS && bookmarks.length" class="bookmarkslist__description" >
{ {
t ( 'bookmarks' , 'You can share bookmark folders with others. All folders shared with you are listed here.' )
} }
< / div >
< div v-if ="$route.name === routes.DUPLICATED && bookmarks.length" class="bookmarkslist__description" >
{ {
t ( 'bookmarks' , 'One bookmark can be in multiple folders at once. Updating it will update all copies. All duplicated bookmarks are listed here for convenience.' )
} }
< / div >
2022-07-02 13:10:24 +00:00
< VirtualScroll :reached-end ="reachedEnd" @load-more ="loadMore" >
2020-08-25 14:01:01 +00:00
< CreateBookmark v -if = " newBookmark " / >
< CreateFolder v -if = " newFolder " / >
< template v-if ="$route.name === routes.FOLDER || $route.name === routes.HOME" >
<!-- FOLDER VIEW WITH CUSTOM SORTING -- >
< template v-if ="sortOrder === 'index' && children.length" >
< template v-for ="item in children" >
2022-12-12 19:29:03 +00:00
< Folder v -if = " item.type = = = ' folder ' & & getFolder ( item.id ) "
2020-08-25 14:01:01 +00:00
: key = "item.type + item.id"
: folder = "getFolder(item.id)" / >
2022-12-12 19:29:03 +00:00
< Bookmark v -if = " item.type = = = ' bookmark ' & & getBookmark ( item.id ) "
2020-08-25 14:01:01 +00:00
: key = "item.type + item.id"
: bookmark = "getBookmark(item.id)" / >
< / template >
< / template >
<!-- FOLDER VIEW WITH NORMAL SORTING -- >
2022-07-02 13:10:24 +00:00
< template v -else -if = " ( subFolders.length | | bookmarks.length ) & & ! loading " >
2022-12-12 19:29:03 +00:00
< Folder v -for = " folder in subFolders "
2020-08-25 14:01:01 +00:00
: key = "'folder' + folder.id"
: folder = "folder" / >
< template v-if ="bookmarks.length" >
2022-12-12 19:29:03 +00:00
< Bookmark v -for = " bookmark in bookmarks "
2020-08-25 14:01:01 +00:00
: key = "'bookmark' + bookmark.id"
: bookmark = "bookmark" / >
< / template >
2020-07-23 13:12:45 +00:00
< / template >
2022-07-24 11:37:27 +00:00
< NoBookmarks v -else -if = " ! loading & & ( allBookmarksCount > 0 || isPublic ) " / >
2022-06-24 11:01:29 +00:00
< FirstRun v -else -if = " ! loading " / >
2020-07-23 13:12:45 +00:00
< / template >
2020-08-25 14:01:01 +00:00
<!-- NON - FOLDER VIEW -- >
2022-02-16 12:57:35 +00:00
< template v -else -if = " subFolders.length | | bookmarks.length " >
2022-12-12 19:29:03 +00:00
< Folder v -for = " folder in subFolders "
2022-02-16 12:57:35 +00:00
: key = "'folder' + folder.id"
: folder = "folder" / >
2022-12-12 19:29:03 +00:00
< Bookmark v -for = " bookmark in bookmarks "
2020-08-25 14:01:01 +00:00
: key = "'bookmark' + bookmark.id"
: bookmark = "bookmark" / >
2020-07-23 13:12:45 +00:00
< / template >
2022-07-24 11:37:27 +00:00
< NoBookmarks v -else -if = " ! loading & & ( allBookmarksCount > 0 || isPublic ) " / >
2022-06-24 11:01:29 +00:00
< FirstRun v -else -if = " ! loading " / >
< / VirtualScroll >
2019-09-24 15:18:29 +00:00
< / div >
2019-07-26 18:16:37 +00:00
< / template >
< script >
2022-12-12 19:29:03 +00:00
import Bookmark from './Bookmark.vue'
import Folder from './Folder.vue'
import CreateBookmark from './CreateBookmark.vue'
import CreateFolder from './CreateFolder.vue'
import { actions , mutations } from '../store/index.js'
import NoBookmarks from './NoBookmarks.vue'
import FirstRun from './FirstRun.vue'
import VirtualScroll from './VirtualScroll.vue'
import { privateRoutes } from '../router.js'
2019-07-26 18:16:37 +00:00
2020-03-31 16:47:50 +00:00
export default {
2019-08-13 19:35:32 +00:00
name : 'BookmarksList' ,
2019-07-26 18:16:37 +00:00
components : {
2022-06-24 11:01:29 +00:00
CreateFolder ,
CreateBookmark ,
VirtualScroll ,
2022-02-16 13:40:08 +00:00
FirstRun ,
2020-08-12 11:35:32 +00:00
NoBookmarks ,
2019-08-26 12:57:02 +00:00
Bookmark ,
Folder ,
2019-07-26 18:16:37 +00:00
} ,
2021-03-22 14:53:37 +00:00
data ( ) {
return {
loadingTimeout : null ,
}
2019-08-13 19:35:32 +00:00
} ,
computed : {
2022-02-20 13:29:14 +00:00
bookmarks ( ) {
return this . $store . state . bookmarks
} ,
2022-06-24 11:01:29 +00:00
reachedEnd ( ) {
return this . $store . state . fetchState . reachedEnd
} ,
2022-02-16 13:40:08 +00:00
allBookmarksCount ( ) {
return this . $store . state . countsByFolder [ - 1 ]
} ,
2020-07-23 13:12:45 +00:00
children ( ) {
if ( this . $route . name !== this . routes . HOME && this . $route . name !== this . routes . FOLDER ) {
return [ ]
}
const folderId = this . $route . params . folder || '-1'
if ( ! folderId ) return [ ]
return this . $store . getters . getFolderChildren ( folderId )
} ,
subFolders ( ) {
2022-02-16 12:57:35 +00:00
if ( this . $route . name === this . routes . SHARED _FOLDERS ) {
return Object . keys ( this . $store . state . sharedFoldersById )
. map ( folderId => this . $store . getters . getFolder ( folderId ) [ 0 ] )
}
2020-03-28 17:15:59 +00:00
if ( this . $route . name !== this . routes . HOME && this . $route . name !== this . routes . FOLDER ) {
2019-09-24 15:18:29 +00:00
return [ ]
2019-08-20 14:19:21 +00:00
}
2019-09-24 15:18:29 +00:00
const folderId = this . $route . params . folder || '-1'
if ( ! folderId ) return [ ]
const folder = this . $store . getters . getFolder ( folderId ) [ 0 ]
2020-08-25 18:49:02 +00:00
if ( ! folder ) return [ ]
2020-07-23 13:12:45 +00:00
this . $store . dispatch ( actions . LOAD _SHARES _OF _FOLDER , folderId )
2019-09-24 15:18:29 +00:00
return folder . children
2019-08-04 21:49:07 +00:00
} ,
2019-08-13 19:35:32 +00:00
newBookmark ( ) {
2019-09-24 15:18:29 +00:00
return this . $store . state . displayNewBookmark
2019-08-04 21:49:07 +00:00
} ,
2019-08-15 13:38:39 +00:00
newFolder ( ) {
2019-09-24 15:18:29 +00:00
return this . $store . state . displayNewFolder
2019-08-24 17:10:20 +00:00
} ,
viewMode ( ) {
2019-09-24 15:18:29 +00:00
return this . $store . state . viewMode
2019-12-10 21:33:54 +00:00
} ,
2020-07-28 08:53:23 +00:00
sortOrder ( ) {
return this . $store . state . settings . sorting
} ,
2021-03-22 14:53:37 +00:00
loading ( ) {
2021-06-09 18:59:52 +00:00
return this . $store . state . loading . bookmarks || this . $store . state . loading . folders
2021-03-22 14:53:37 +00:00
} ,
} ,
2020-07-17 09:23:19 +00:00
methods : {
2022-06-24 11:01:29 +00:00
loadMore ( ) {
if ( this . $route . name === privateRoutes . SHARED _FOLDERS ) {
this . $store . commit ( mutations . REACHED _END )
return
2020-07-17 09:23:19 +00:00
}
2022-06-24 11:01:29 +00:00
this . $store . dispatch ( actions . FETCH _PAGE )
2020-07-17 09:23:19 +00:00
} ,
2020-07-28 08:53:23 +00:00
getFolder ( id ) {
return this . $store . getters . getFolder ( id ) [ 0 ]
} ,
getBookmark ( id ) {
return this . $store . getters . getBookmark ( id )
} ,
2020-07-17 09:23:19 +00:00
} ,
2019-09-24 15:18:29 +00:00
}
2019-07-26 18:16:37 +00:00
< / script >
2019-08-04 21:49:07 +00:00
< style >
2021-10-13 13:57:07 +00:00
. bookmarkslist _ _description {
width : 100 % ;
margin : 10 px auto ;
flex - grow : 1 ;
flex - shrink : 0 ;
text - align : center ;
}
2019-08-26 18:07:25 +00:00
. folder -- gridview ,
. bookmark -- gridview ,
2020-08-25 14:17:28 +00:00
. bookmarkslist -- gridview . create - folder ,
. bookmarkslist -- gridview . create - bookmark {
2020-08-25 14:01:01 +00:00
width : 250 px ;
2019-08-24 17:10:20 +00:00
height : 200 px ;
align - items : flex - end ;
2020-06-15 10:48:26 +00:00
background : var ( -- color - main - background ) ;
2019-08-24 17:10:20 +00:00
border : 1 px solid var ( -- color - border ) ;
2019-08-26 00:03:46 +00:00
box - shadow : # efefef7d 0 px 0 13 px 0 px inset ;
2019-08-26 18:07:25 +00:00
border - radius : var ( -- border - radius ) ;
2019-08-24 17:10:20 +00:00
}
2019-08-04 21:49:07 +00:00
< / style >