SolidScribe/client/src/pages/NotesPage.vue

<template>
	<div class="ui basic segment">
		
		<div class="ui equal width grid">

			<!-- <div class="ui row">{{ $store.getters.getIsUserOnMobile ? 'Mobile Device':'Normal Browser' }}</div> -->

			<!-- mobile search menu -->
			<div class="ui mobile only row">
				<!-- Small screen new note button -->
				<div class="ui four wide column">
					<div @click="createNote" class="ui fluid green icon button">
						<i class="plus icon"></i>
					</div>
				</div>

				<div class="ui twelve wide column">
					<div class="ui form">
						<input v-model="searchTerm" @keyup="searchKeyUp" @:keyup.enter="search" placeholder="Search Notes" />
					</div>
				</div>
			</div>

			<!-- search menu  -->
			<div class="ui large screen only row">

				<div class="ui two wide column">
					<div @click="createNote" class="ui fluid green button">
						<i class="plus icon"></i>
						New Note
					</div>
				</div>
				
				<div class="ui five wide column">
					<div class="ui form">
						<input v-model="searchTerm" @keyup="searchKeyUp" @:keyup.enter="search" placeholder="Search Notes" />
					</div>
				</div>

				<div class="ui nine wide column">
					
					<router-link class="ui basic button" to="/help">Help</router-link>

					<div v-on:click="toggleNightMode" class="ui basic icon button">
						<i class="eye icon"></i>&nbsp;Dark Theme: 
						<span v-if="$store.getters.getIsNightMode">On</span>
						<span v-else>Off</span>
					</div>

					<div v-on:click="toggleArchivedVisible" class="ui basic icon button">
						<i class="archive icon"></i>&nbsp;Archived:
						<span v-if="showArchived == 1">Visible</span>
						<span v-else>Hidden</span>
					</div>

					<div class="ui right floated basic button" 
					data-tooltip="Log Out" data-position="left center"
					v-on:click="destroyLoginToken"><i class="user icon"></i> {{username}}</div>
				</div>
			</div>

			<div class="ui row">

				<!-- tags display  -->
				<div class="ui two wide large screen only column" v-if="activeNoteId1 == null && activeNoteId2 == null">
					<div class="ui small basic fluid button" @click="reset">
						<i class="undo icon"></i>Reset Filters
					</div>
					<div class="ui divider"></div>
					<div class="ui section list">
						<div class="item" v-for="tag in commonTags" @click="toggleTagFilter(tag.id)">
							<div class="ui clickable basic fluid large label" :class="{ 'green':(searchTags.includes(tag.id)) }">
							{{ucWords(tag.text)}} <div class="detail">{{tag.usages}}</div>
							</div>
						</div>
					</div>
				</div>

				<!-- Note title cards  -->
				<div class="ui fourteen wide computer sixteen wide mobile column">
					<h2>
						({{notes.length}}) <fast-filters />
					</h2>
					
					<h3 v-if="searchTerm.length > 0 && notes.length == 0">No notes found. Check your spelling, try completing the word or using a different phrase.</h3>

					<h3 v-if="searchTerm.length == 0 && notes.length == 0">Create your first note. Click the "New Note" button.</h3>

					<div v-if="working"><div class="ui active inline loader"></div> Working...</div>

					<div v-if="notes !== null && !working" 
						class="note-card-display-area" 
						:class="{'one-column':(activeNoteId1 != null || activeNoteId2 != null )}
					">
						<note-title-display-card 
							v-for="note in notes" 
							:onClick="openNote"
							:data="note"
							:currently-open="(activeNoteId1 == note.id || activeNoteId2 == note.id)"
							:key="note.id + note.color + note.note_highlights.length + note.attachment_highlights.length + ' -' + note.tag_highlights.length + '-' +note.title.length + '-' +note.subtext.length"
						/>
					</div>

				</div>
			</div>
		</div>

		
		<input-notes v-if="activeNoteId1 != null" :noteid="activeNoteId1" :position="activeNote1Position" />
		<input-notes v-if="activeNoteId2 != null" :noteid="activeNoteId2" :position="activeNote2Position" />

	</div>
</template>

<script>
	
	import axios from 'axios';

	export default {
	name: 'SearchBar',
		components: {
			'input-notes': require('@/components/NoteInputPanel.vue').default,
			'note-title-display-card': require('@/components/NoteTitleDisplayCard.vue').default,
			'fast-filters': require('@/components/FastFilters.vue').default,
		},
		data () {
			return {
				username:'',
				initComponent: true,
				commonTags: [],
				searchTerm: '',
				searchTags: [],
				notes: [],
				searchDebounce: null,
				fastFilters: {},
				showArchived: 0,
				working: false,

				//Currently open notes in app
				activeNoteId1: null,
				activeNoteId2: null,
				//Position determines how note is Positioned
				activeNote1Position: 0,
				activeNote2Position: 0,
			}
		},
		beforeMount(){

			let username = this.$store.getters.getUsername
			this.username = this.ucWords(username)

			this.$bus.$on('close_active_note', position => {
				this.closeNote(position)
			})
			this.$bus.$on('note_deleted', () => {
				this.search()
			})
			this.$bus.$on('update_fast_filters', newFilter => {
				this.fastFilters = newFilter
				this.search()
			})

			//Mount notes on load if note ID is set
			if(this.$route.params && this.$route.params.id){
				const id = this.$route.params.id
				console.log('About to load note ', id)
				this.openNote(id)
			}

			
		},
		mounted() {

			this.search()

		},
		methods: {
			openNote(id){

				//Do not open same note twice
				if(this.activeNoteId1 == id || this.activeNoteId2 == id){
					return;
				}

				//1 note open
				if(this.activeNoteId1 == null && this.activeNoteId2 == null){
					this.activeNoteId1 = id
					this.activeNote1Position = 0 //Middel of page
					this.$router.push('/notes/open/'+this.activeNoteId1)
					return
				}
				//2 notes open
				if(this.activeNoteId1 != null && this.activeNoteId2 == null){
					this.activeNoteId2 = id
					this.activeNote1Position = 1 //Right side of page
					this.activeNote2Position = 2 //Left side of page
					return
				}

				//2 notes open
				if(this.activeNoteId2 != null && this.activeNoteId1 == null){
					this.activeNoteId1 = id
					this.activeNote1Position = 2 //Right side of page
					this.activeNote2Position = 1 //Left side of page
					return
				}
			},
			closeNote(position){
				//One note open, close that note
				if(position == 0){
					this.activeNoteId1 = null
					this.activeNoteId2 = null
				}
				//Right note closed, thats 1
				if(position == 1){
					this.activeNoteId1 = null
				}
				if(position == 2){
					this.activeNoteId2 = null
				}

				this.$router.push('/notes')

				this.activeNote1Position = 0
				this.activeNote2Position = 0

				this.search(false)
			},
			toggleTagFilter(tagId){

				if(this.searchTags.includes(tagId)){
					this.searchTags.splice( this.searchTags.indexOf(tagId) , 1);
				} else {
					this.searchTags.push(tagId)
				}

				this.search()
			},
			search(showLoading = true){

				//Add archived to fast filters
				this.fastFilters['archived'] = 0
				if(this.showArchived == 1){
					this.fastFilters['archived'] = 1
				}

				let postData = {
					searchQuery: this.searchTerm,
					searchTags: this.searchTags,
					fastFilters: this.fastFilters,
				}

				if(showLoading){
					this.working = true
				}
				

				//Perform search
				let vm = this
				axios.post('/api/note/search', postData).
				then(response => {
					vm.commonTags = response.data.tags
					vm.notes = response.data.notes
					vm.highlights = response.data.highlights
					this.working = false
				})
			},
			searchKeyUp(){
				let vm = this
				clearTimeout(vm.searchDebounce)
				vm.searchDebounce = setTimeout(() => {
					vm.search()
				}, 300)
			},
			createNote(event){
				const title = ''
				let vm = this

				axios.post('/api/note/create', {title})
				.then(response => {

					if(response.data && response.data.id){
						vm.openNote(response.data.id)
					}
				})
			},
			ucWords(str){
				return (str + '')
				.replace(/^(.)|\s+(.)/g, function ($1) {
					return $1.toUpperCase()
				})
			},
			reset(){
				this.searchTerm = ''
				this.searchTags = []
				this.fastFilters = {}
				this.$bus.$emit('reset_fast_filters')
				this.search()
			},
			destroyLoginToken() {
				this.$store.commit('destroyLoginToken')
				this.$router.push('/')
			},
			toggleNightMode(){
				this.$store.commit('toggleNightMode')
			},
			toggleArchivedVisible(){
				if(this.showArchived == 0){
					this.showArchived = 1
				} else {
					this.showArchived = 0
				}
				this.search()
			}
		}
	}
</script>
<style type="text/css" scoped>
	.detail {
		float: right;
	}
	.note-card-display-area {
		display: flex;
		flex-wrap: wrap;
	}
</style>