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">
|
|
|
|
<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(100vh - 50px - 50px);
|
|
|
|
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((250px + 10px + 10px) * 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: 200px;
|
|
|
|
margin: 200px auto;
|
|
|
|
}
|
2019-08-26 22:41:52 +00:00
|
|
|
|
2019-08-26 12:57:02 +00:00
|
|
|
.bookmarkslist__loading {
|
2020-08-15 10:14:42 +00:00
|
|
|
width: 100%;
|
|
|
|
margin: 200px 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: 10px;
|
|
|
|
padding: 0 10px;
|
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: 250px;
|
2019-08-24 17:10:20 +00:00
|
|
|
height: 200px;
|
|
|
|
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: 1px solid var(--color-border);
|
2019-08-26 00:03:46 +00:00
|
|
|
box-shadow: #efefef7d 0px 0 13px 0px 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>
|