SolidScribe/client/src/pages/AttachmentsPage.vue

<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">
						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>

			<div class="sixteen wide column" v-if="searchParams.noteId">
				<router-link class="ui green button" to="/attachments">
					<i class="chevron circle left icon"></i>
					Back to All
				</router-link>
				<div class="ui green button" v-on:click="openNote">
					<i class="file outline icon"></i>
					Open Note
				</div>
			</div>

			<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)
		},
		watch:{
			$route (to, from){

				//Reset everything on route change
				this.reset()
				//Params are handled by search function
				this.searchAttachments()
			}
		},
		methods: {
			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>