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 >
2019-09-24 15:18:29 +00:00
< div
: class = " {
bookmarkslist : true ,
'bookmarkslist--gridview' : viewMode === 'grid'
2020-07-17 09:23:19 +00:00
} "
@ scroll = "onScroll" >
2020-08-25 14:01:01 +00:00
< div class = "padding" >
2021-10-13 13:57:07 +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 >
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" >
< Folder
v - if = "item.type === 'folder' && getFolder(item.id)"
: key = "item.type + item.id"
: folder = "getFolder(item.id)" / >
< Bookmark
v - if = "item.type === 'bookmark' && getBookmark(item.id)"
: key = "item.type + item.id"
: bookmark = "getBookmark(item.id)" / >
< / template >
< / template >
<!-- FOLDER VIEW WITH NORMAL SORTING -- >
2021-06-09 18:59:52 +00:00
< template v -else -if = " ( subFolders.length | | bookmarks.length ) & & ! loading " >
2020-07-23 13:12:45 +00:00
< Folder
2020-08-25 14:01:01 +00:00
v - for = "folder in subFolders"
: key = "'folder' + folder.id"
: folder = "folder" / >
< template v-if ="bookmarks.length" >
< Bookmark
v - for = "bookmark in bookmarks"
: key = "'bookmark' + bookmark.id"
: bookmark = "bookmark" / >
< / template >
2020-07-23 13:12:45 +00:00
< / template >
2020-08-25 14:01:01 +00:00
< NoBookmarks v -else -if = " ! loading " / >
2020-07-23 13:12:45 +00:00
< / template >
2020-08-25 14:01:01 +00:00
<!-- NON - FOLDER VIEW -- >
< template v -else -if = " bookmarks.length " >
< Bookmark
v - for = "bookmark in bookmarks"
: key = "'bookmark' + bookmark.id"
: bookmark = "bookmark" / >
2020-07-23 13:12:45 +00:00
< / template >
2020-08-12 11:35:32 +00:00
< NoBookmarks v -else -if = " ! loading " / >
2021-03-22 14:53:37 +00:00
< div v-if ="showLoading" class="bookmarkslist__loading" >
2020-08-25 14:01:01 +00:00
< figure class = "icon-loading" / >
< / div >
2019-09-24 15:18:29 +00:00
< / div >
< / div >
2019-07-26 18:16:37 +00:00
< / template >
< script >
2020-03-31 16:47:50 +00:00
import Bookmark from './Bookmark'
import Folder from './Folder'
import CreateBookmark from './CreateBookmark'
import CreateFolder from './CreateFolder'
import { actions } from '../store'
2020-08-12 11:35:32 +00:00
import NoBookmarks from './NoBookmarks'
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 : {
2020-08-12 11:35:32 +00:00
NoBookmarks ,
2019-08-26 12:57:02 +00:00
Bookmark ,
Folder ,
2019-08-15 13:38:39 +00:00
CreateBookmark ,
2019-12-10 21:33:54 +00:00
CreateFolder ,
2019-07-26 18:16:37 +00:00
} ,
props : {
bookmarks : {
type : Array ,
2019-12-10 21:33:54 +00:00
required : true ,
2019-08-04 21:49:07 +00:00
} ,
2021-03-22 14:53:37 +00:00
} ,
data ( ) {
return {
2021-06-09 18:59:52 +00:00
showLoading : true ,
2021-03-22 14:53:37 +00:00
loadingTimeout : null ,
}
2019-08-13 19:35:32 +00:00
} ,
computed : {
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 ( ) {
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
} ,
} ,
watch : {
loading ( state , previous ) {
if ( state && ! previous ) {
this . loadingTimeout = setTimeout ( ( ) => {
this . showLoading = true
} , 500 )
} else if ( ! state && previous ) {
clearTimeout ( this . loadingTimeout )
this . showLoading = false
}
} ,
2019-12-10 21:33:54 +00:00
} ,
2020-07-17 09:23:19 +00:00
methods : {
onScroll ( ) {
if (
this . $el . scrollHeight
< this . $el . scrollTop + this . $el . clientHeight + 500
) {
this . $store . dispatch ( actions . FETCH _PAGE )
}
} ,
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 >
2019-09-17 14:56:42 +00:00
. bookmarkslist {
2020-06-19 19:17:47 +00:00
/* 50px header; 50px breadcrumbs */
height : calc ( 100 vh - 50 px - 50 px ) ;
overflow - y : scroll ;
2019-09-17 14:56:42 +00:00
position : relative ;
}
2020-06-19 18:41:24 +00:00
2020-08-25 14:01:01 +00:00
. bookmarkslist . padding {
2020-09-11 16:58:33 +00:00
max - width : calc ( ( 250 px + 10 px + 10 px ) * 4 ) ;
2020-08-25 14:01:01 +00:00
margin : 0 auto ;
2019-08-04 21:49:07 +00:00
}
2019-08-26 22:41:52 +00:00
2019-08-26 12:57:02 +00:00
. bookmarkslist _ _empty {
2019-08-04 21:49:07 +00:00
width : 200 px ;
margin : 200 px auto ;
}
2019-08-26 22:41:52 +00:00
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 12:57:02 +00:00
. bookmarkslist _ _loading {
2020-08-15 10:14:42 +00:00
width : 100 % ;
margin : 200 px auto ;
flex - grow : 1 ;
flex - shrink : 0 ;
2019-08-04 21:49:07 +00:00
text - align : center ;
}
2019-08-24 17:10:20 +00:00
2020-08-25 14:01:01 +00:00
. bookmarkslist -- gridview . padding {
2019-08-24 17:10:20 +00:00
display : flex ;
flex - flow : wrap ;
2020-07-28 08:53:23 +00:00
align - content : start ;
2020-06-19 18:41:24 +00:00
gap : 10 px ;
padding : 0 10 px ;
2019-08-24 17:10:20 +00:00
}
2019-08-26 22:41:52 +00:00
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 >