SolidScribe/client/src/pages/AttachmentsPage.vue

209 lines
4.9 KiB
Vue
Raw Normal View History

<template>
<div class="ui basic segment no-fluf-segment" ref="content">
<div class="ui grid">
<div class="ui twelve wide column">
<h2 class="ui header">
<i class="folder open outline icon"></i>
<div class="content">
2020-02-01 22:21:22 +00:00
Files
<div class="sub header">Uploaded Files and Websites from notes.</div>
</div>
</h2>
<!-- subnav -->
<router-link
exact-active-class="green"
class="ui basic button"
to="/attachments">
<i class="open folder outline icon"></i>
All
</router-link>
<router-link
v-if="$store.getters.totals && $store.getters.totals['linkFiles']"
exact-active-class="green"
class="ui basic button"
to="/attachments/type/links">
<i class="linkify icon"></i>
Links
</router-link>
<router-link
v-if="$store.getters.totals && $store.getters.totals['otherFiles']"
exact-active-class="green"
class="ui basic button"
to="/attachments/type/files">
<i class="copy icon"></i>
Other Files
</router-link>
</div>
<div class="four wide bottom aligned column">
<i v-if="loading" class="green sync alternate loading icon"></i>
</div>
2020-02-01 22:21:22 +00:00
<div class="sixteen wide column" v-if="searchParams.noteId">
<router-link class="ui green button" to="/attachments">
2020-02-01 22:21:22 +00:00
<i class="chevron circle left icon"></i>
Back to All
</router-link>
2020-02-01 22:21:22 +00:00
<div class="ui green button" v-on:click="openNote">
<i class="file outline icon"></i>
2020-02-01 22:21:22 +00:00
Open Note
</div>
</div>
2020-02-01 22:21:22 +00:00
<div class="sixteen wide column" v-if="searchParams['noteId'] && attachments.length == 0">
<h3>There are no attachments for this note.</h3>
<h3>Attachments are links or files added to the note.</h3>
</div>
<div class="sixteen wide column">
<attachment-display
v-for="item in attachments"
:item="item"
:key="item.id"
:search-params="searchParams"
/>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
components: {
'attachment-display': require('@/components/AttachmentDisplayCard').default,
'counter':require('@/components/AnimatedCounterComponent.vue').default,
},
data: function(){
return {
loading: false,
attachments: [],
searchParams: {},
loadedAttachmentsOffset: 0,
loadingBatchTimeout: null,
allLoaded: false,
}
},
beforeCreate: function(){
//
// Perform Login check
//
this.$parent.loginGateway()
},
mounted: function(){
//Load more attachments on scroll
window.addEventListener('scroll', this.onScroll)
//Mount notes on load if note ID is set
this.searchAttachments()
},
beforeDestroy(){
//Remove scroll event on destroy
window.removeEventListener('scroll', this.onScroll)
},
2020-02-01 22:21:22 +00:00
watch:{
$route (to, from){
//Reset everything on route change
this.reset()
//Params are handled by search function
2020-02-01 22:21:22 +00:00
this.searchAttachments()
}
},
methods: {
2020-02-01 22:21:22 +00:00
openNote(){
const noteId = this.searchParams['noteId']
this.$router.push('/notes/open/'+noteId)
},
onScroll(){
clearTimeout(this.loadingBatchTimeout)
this.loadingBatchTimeout = setTimeout(() => {
//Distance to bottom of page
const bottomOfWindow =
Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)
+ window.innerHeight
//height of page
const offsetHeight = this.$refs.content.clientHeight
//Determine percentage down the page
const percentageDown = Math.round( (bottomOfWindow/offsetHeight)*100 )
//If greater than 80 of the way down the page, load the next batch
if(percentageDown >= 80){
this.searchAttachments()
}
}, 50)
},
reset(){
this.attachments = []
this.loading = false
this.allLoaded = false
this.loadedAttachmentsOffset = 0
},
searchAttachments (){
if(this.loading || this.allLoaded){
return
}
delete this.searchParams.attachmentType
delete this.searchParams.noteId
//Set attchment type if in URL
if(this.$route.params.type){
this.searchParams.attachmentType = this.$route.params.type
}
//Set noteId in if in URL
if(this.$route.params.id){
this.searchParams.noteId = this.$route.params.id
}
//Offset of attchments to load
this.searchParams.offset = this.loadedAttachmentsOffset
if(this.allLoaded){
return
}
this.loading = true
axios.post('/api/attachment/search', this.searchParams)
.then( results => {
this.loading = false
if(results.data.length == 0){
this.allLoaded = true
return
}
//Load up the results
this.attachments.push(...results.data)
//Grab the next batch
this.loadedAttachmentsOffset += results.data.length
})
},
}
}
</script>
<style type="text/css" scoped>
.attachment-display-area {
width: 100%;
margin-top: 15px;
box-sizing: border-box;
padding: 0 5%;
}
</style>