* Fixed a bunch of little bugs

* Added more options to attachment page and filters
* Much better rendering and updating on attachment page
* Math bug is fixed with better string parsing fixes #14
* Icons are limited to 4 per note
* If an image is visible on note preview it will not appear in images preview
* Touched up text algorithm to better display note titles

client/index.html

@@ -8,7 +8,7 @@
     <link rel="shortcut icon" href="/api/static/assets/favicon.ico" type="image/x-icon"/>
 
     <meta name="theme-color" content="#000" />
-    <link rel="manifest" href="/api/static/assets/manifest.webmanifest">
+    <link rel="manifest" href="/api/static/assets/manifest.json">
 
     <title>Notes</title>
   </head>

client/src/assets/semantic-helper.css

@@ -55,6 +55,9 @@ body {
 	background-color: var(--background_color);
 	border-color: var(--border_color);
 }
+.ui.icon.input > i.icon {
+	color: var(--text_color);
+}
 div.ui.basic.green.label {
 	background-color: var(--background_color) !important;
 }

client/src/components/AttachmentDisplayCard.vue

@@ -98,7 +98,12 @@
 			</div>
 
 			<div class="ten wide column">
-				<textarea ref="edit" class="text" v-on:blur="saveIt()" v-on:keyup="checkKeyup" v-model="text"></textarea>
+				<textarea ref="edit" class="text" v-on:blur="saveIt()" v-on:keyup="checkKeyup" 
+					v-model="text"
+					v-on:focus="showSave = true"
+				></textarea>
+
+				<div v-if="showSave" class="ui green button">Save</div>
 
 				<!-- link -->
 				<a class="link" :href="linkUrl" target="_blank">{{linkText}}</a>
@@ -139,6 +144,7 @@
 
 				unfolded:true,
 				visible: true,
+				showSave: false,
 
 				working: false,
 			}
@@ -199,6 +205,8 @@
 			},
 			saveIt(){
 
+				this.showSave = false
+
 				//Don't save text if it didn'th change
 				if(this.item.text == this.text){
 					return 

client/src/components/GlobalSiteMenu.vue

@@ -166,7 +166,7 @@
 
 			<div class="menu-section" v-if="loggedIn && $store.getters.totals && $store.getters.totals['totalFiles']">
 				<router-link class="menu-item menu-button" exact-active-class="active" to="/attachments">
-					<i class="folder open outline icon"></i>Files
+					<i class="open folder outline icon"></i>Files
 					<counter class="float-right" number-id="totalFiles" />
 				</router-link>
 			</div>
@@ -233,12 +233,14 @@
 			this.mobile = this.$store.getters.getIsUserOnMobile
 			this.collapsed = this.$store.getters.getIsUserOnMobile
 
-			// {{ totals['totalNotes'] }}
-
 			if(this.mobile){
 				this.menuOpen = false
 			}
 
+			if(this.loggedIn){
+				this.$store.dispatch('fetchAndUpdateUserTotals')
+			}
+			
 		},
 		computed: {
 			loggedIn () {

client/src/components/NoteInputPanel.vue

@@ -582,8 +582,10 @@
 
 				// simple function that trys to evaluate javascript
 				const shittyMath = (string) => {
+					//Remove all chars but math chars
+					const cleanString = String(string).replace(/[a-zA-Z\s]*/g,'')
 					try {
-						return Function('"use strict"; return (' + string + ')')();
+						return Function('"use strict"; return (' + cleanString + ')')();
 					} catch (error) {
 						console.log('Math Error: ', string)
 						return null
@@ -596,8 +598,7 @@
 					const line = node.innerText.trim()
 
 					// = sign exists and its the last character in the string
-					let equalLocation = line.indexOf('=')
-					if(equalLocation != -1 && (line.length-1) == equalLocation ){
+					if(line.indexOf('=') != -1 && (line.length-1) == line.indexOf('=')){
 
 						//Pull out everything before the formula and try to evaluate it
 						const formula = line.split('=').shift()
@@ -607,6 +608,7 @@
 						if(!isNaN(output) && output != null){
 
 							//Since there is HTML in the line, splice in the number after the = sign
+							let equalLocation = node.innerHTML.indexOf('=')
 							let newLine = node.innerHTML.slice(0, equalLocation+1).trim()
 							newLine += ` ${output}`
 							newLine += node.innerHTML.slice(equalLocation+1).trim()

client/src/components/NoteTitleDisplayCard.vue

@@ -66,9 +66,9 @@
 							<delete-button :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" :note-id="note.id" />
 						</div>
 
-						<div class="row" v-if="note.thumbs">
+						<div class="row" v-if="getThumbs.length > 0">
 							<div class="tiny-thumb-box" v-on:click="openEditAttachment">
-								<img v-for="thumb in note.thumbs.split(',').reverse()" class="tiny-thumb" :src="`/api/static/thumb_${thumb}`">
+								<img v-for="thumb in getThumbs" class="tiny-thumb" :src="`/api/static/thumb_${thumb}`">
 							</div>
 						</div>
 
@@ -118,6 +118,30 @@
 				iconColor: null,
 			}
 		},
+		computed: {
+			getThumbs(){
+				if(!this.note.thumbs){
+					return []
+				}
+
+				let notDisplaying = []
+
+				//Remove images displaying in text from the thumbnails
+				this.note.thumbs.forEach( path => {
+
+					const titleLocation = String(this.note.title).indexOf(path)
+					const subtextLocation = String(this.note.subtext).indexOf(path)
+
+					if(titleLocation != -1 || subtextLocation != -1){
+						return
+					}
+
+					notDisplaying.push(path)
+				})
+
+				return notDisplaying
+			}
+		},
 		beforeMount(){
 
 			this.note = this.data

client/src/components/SimpleAttachmentNoteComponent.vue

@@ -87,7 +87,8 @@
 
 		},
 		mounted(){
-			axios.post('/api/attachment/search', {'attachmentType':2})
+
+			axios.post('/api/attachment/search', {'attachmentType':'files', 'setSize':1000})
 			.then( ({data}) => {
 
 				//Sort files into two categories

client/src/pages/AttachmentsPage.vue

@@ -1,8 +1,8 @@
 <template>
-	<div class="ui basic segment no-fluf-segment">
+	<div class="ui basic segment no-fluf-segment" ref="content">
 		<div class="ui grid">
 
-			<div class="ui sixteen wide column">
+			<div class="ui twelve wide column">
 				<h2 class="ui header">
 					<i class="folder open outline icon"></i>
 						<div class="content">
@@ -10,13 +10,42 @@
 						<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">
-				<div class="ui green button" v-on:click="clearNote">
+				<router-link class="ui green button" to="/attachments">
 					<i class="chevron circle left icon"></i>
-					Show All Attachments
-				</div>
+					Back to All
+				</router-link>
 				<div class="ui green button" v-on:click="openNote">
 					<i class="file outline icon"></i>
 					Open Note
@@ -47,11 +76,16 @@
 	export default {
 		components: {
 			'attachment-display': require('@/components/AttachmentDisplayCard').default,
+			'counter':require('@/components/AnimatedCounterComponent.vue').default,
 		},
 		data: function(){ 
 			return {
+				loading: false,
 				attachments: [],
-				searchParams: {}
+				searchParams: {},
+				loadedAttachmentsOffset: 0,
+				loadingBatchTimeout: null,
+				allLoaded: false,
 			}
 		},
 		beforeCreate: function(){
@@ -59,40 +93,107 @@
 			// 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.openNoteAttachments()
 			this.searchAttachments()
 		},
+		beforeDestroy(){
+
+			//Remove scroll event on destroy
+			window.removeEventListener('scroll', this.onScroll)
+		},
 		watch:{
 			$route (to, from){
-				//Open or close notes on route change
-				this.openNoteAttachments()
+
+				//Reset everything on route change
+				this.reset()
+				//Params are handled by search function
 				this.searchAttachments()
 			}
 		},
 		methods: {
-			openNoteAttachments(){
-				if(this.$route.params && this.$route.params.id){
-					const inputNoteId = this.$route.params.id
-					this.searchParams['noteId'] = inputNoteId
-				}
-			},
 			openNote(){
 				const noteId = this.searchParams['noteId']
 				this.$router.push('/notes/open/'+noteId)
 			},
-			clearNote(){
-				this.$router.push('/attachments/')
-				delete this.searchParams.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.attachments = results.data
+
+					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
 				})
 			},
 		}

client/src/router/index.js

@@ -73,8 +73,14 @@ export default new Router({
     },
     {
       path: '/attachments/note/:id',
-      name: 'Attachments',
-      meta: {title:'Attachments'},
+      name: 'Attachments for Note',
+      meta: {title:'Attachments for Note'},
+      component: AttachmentsPage
+    },
+    {
+      path: '/attachments/type/:type',
+      name: 'Attachments by Type',
+      meta: {title:'Attachments by Type'},
       component: AttachmentsPage
     },
   ]

server/helpers/ProcessText.js

@@ -40,13 +40,19 @@ ProcessText.deduceNoteTitle = (inString) => {
 
 	//Remove inline styles that may be added by editor
 	inString = inString.replace(/style=".*?"/g,'')
+	// inString = inString.replace('</a>','')
+
+	//Emergency ending tag if truncated. This will help regex find all the lines
+	inString += '</end>'
 
 	//Match full line and closing tag or just closing tag
-	let lines = inString.match(/[<[a-zA-Z0-9]+>(.*?)<\/[a-zA-Z0-9]+>|<\/[a-zA-Z0-9>]+?>/g)
+	let lines = inString.match(/[<[a-zA-Z0-9]+>(.*?)<\/[a-zA-Z0-9]+>|<\/[a-zA-Z0-9>]+?>/gms)
 	if(lines == null){ lines = [inString] }
 	//.match(/[^\r\n]+/g) //Match return or newline
 
+	// console.log('----------------')
 	// console.log(lines)
+	// console.log('----------------')
 
 	let finalLines = []
 
@@ -129,6 +135,7 @@ ProcessText.deduceNoteTitle = (inString) => {
 
 			//Cut the string down to character limit
 			const cutString = lines[i].substring(0, lines[i].length+charLimit)
+
 			//Find last space and cut off everything after it
 			let cleanCutString = cutString.substring(0, cutString.lastIndexOf(' '))
 

server/models/Attachment.js

@@ -43,7 +43,7 @@ Attachment.textSearch = (userId, searchTerm) => {
 	})
 }
 
-Attachment.search = (userId, noteId, attachmentType) => {
+Attachment.search = (userId, noteId, attachmentType, offset, setSize) => {
 	return new Promise((resolve, reject) => {
 
 		let params = [userId]
@@ -54,13 +54,20 @@ Attachment.search = (userId, noteId, attachmentType) => {
 			params.push(noteId)
 		}
 
-		if(Number.isInteger(attachmentType)){
-			query += 'AND attachment_type = ? '
-			params.push(attachmentType)
+		if(attachmentType == 'links'){
+			query += 'AND attachment_type = 1 '
+		}
+		if(attachmentType == 'files'){
+			query += 'AND attachment_type > 1 '
 		}
 
+
 		query += 'ORDER BY last_indexed DESC '
 
+		const limitOffset = parseInt(offset, 10) || 0 //Either parse int, or use zero
+		const parsedSetSize = parseInt(setSize, 10) || 20 //Either parse int, or use zero
+		query += ` LIMIT ${limitOffset}, ${parsedSetSize}`
+
 		db.promise()
 			.query(query, params)
 			.then((rows, fields) => {

server/models/Note.js

@@ -593,6 +593,15 @@ Note.search = (userId, searchQuery, searchTags, fastFilters) => {
 					note.attachment_highlights = []
 					note.tag_highlights = []
 
+					//Limit number of attachment thumbs to 4
+					if(note.thumbs){
+						//Convert comma delimited string to array
+						let thumbArray = note.thumbs.split(',').reverse()
+						//Limit array to 4 or size of array
+						thumbArray.length = Math.min(thumbArray.length, 4)
+						note.thumbs = thumbArray
+					}
+
 					//Push in search highlights
 					if(highlights && highlights[note.id]){
 						note['note_highlights'] = [highlights[note.id]]

server/routes/attachmentController.js

@@ -18,7 +18,7 @@ router.use(function setUserId (req, res, next) {
 })
 
 router.post('/search', function (req, res) {
-	Attachment.search(userId, req.body.noteId, req.body.attachmentType)
+	Attachment.search(userId, req.body.noteId, req.body.attachmentType, req.body.offset, req.body.setSize)
 	.then( data => res.send(data) )
 })