Max/SolidScribe
1
0
Fork 0
Code Issues 24 Pull Requests Releases Wiki Activity

Searching, url indexing

Browse Source 
* Added a help page
* Cleaned up home and login pages
* Menu is hidden when on notes section of app
* Added username to login data
* Notes now change to the color selected for the note
* Note save function has a 500ms debounce to prevent spamming
* Solr results now displays content from notes, tags and attachments
* All note data is now indexed in solr
* Notes containing URLs are now scraped and put into tag solr index
* Attachments that are removed from note are deleted when url is removed
* Minor little tweaks and fixes all over the place
This commit is contained in:
Max G
2019-07-24 18:06:50 +00:00
parent e52ae65a42
commit b0a8071b41
16 changed files with 571 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
client/src/App.vue
View File

@@ -1,14 +1,25 @@
<template>
<div id="app">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<div>
<router-link class="ui button" to="/">Home</router-link>
<router-link v-if="loggedIn" class="ui button" to="/notes">Notes</router-link>
<router-link v-if="!loggedIn" class="ui button" to="/login">Login</router-link>
<div v-if="loggedIn" v-on:click="destroyLoginToken" class="ui button">Logout</div>
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<!-- Hide this menu on the notes page -->
<div class="ui basic segment" v-if="this.$router.currentRoute.path != '/notes'">
<div class="ui container">
<div class="ui tabular menu">
<router-link class="item" exact-active-class="active" to="/">Home</router-link>
<router-link v-if="loggedIn" exact-active-class="active" class="item" to="/notes">Notes</router-link>
<router-link class="item" exact-active-class="active" to="/help">Help</router-link>
<router-link v-if="!loggedIn" exact-active-class="active" class="item" to="/login">Login</router-link>
<div v-if="loggedIn" v-on:click="destroyLoginToken" class="item">Logout</div>
</div>
</div>
</div>
<router-view/>
</div>
</template>
@@ -28,8 +39,13 @@ export default {
//Puts token into state on page load
let token = localStorage.getItem('loginToken')
let username = localStorage.getItem('username')
if(token){
this.$store.commit('setLoginToken', token)
this.$store.commit('setLoginToken', {token, username})
} else {
this.$store.commit('destroyLoginToken')
this.$router.push({'path':'/'})
}
},
mounted: function(){

2
client/src/assets/semantic-helper.css
View File

@@ -9,7 +9,7 @@
.ck-content {
font-family: 'Open Sans' !important;
font-size: 1.3rem !important;
background: white;
background-color: rgba(255, 255, 255, 0);
height: 100%;
overflow: hidden;
}

122
client/src/components/HelloWorld.vue
View File

@@ -1,121 +1,13 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
<li>
<a
href="http://marvin.local/solr"
target="_self"
>
solr
</a>
</li>
</ul>
</div>
<div class="ui basic segment">
<div class="ui container">
<h1>Welcome</h1>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your mother fucking Vue App'
}
}
name: 'WelcomePage'
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
</script>

30
client/src/components/HelpPage.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<div class="ui basic segment">
<div class="ui container">
<h2>Block formatting</h2>
<p>The following block formatting options are available:</p>
<p> Bulleted list – Start a line with * or - followed by a space.</p>
<p> Numbered list – Start a line with 1. or 1) followed by a space.</p>
<p> Headings – Start a line with # or ## or ### followed by a space to create a heading 1, heading 2 or heading 3 (up to heading 6 if options defines more headings).</p>
<p> Block quote – Start a line with > followed by a space.</p>
<h2>Inline formatting</h2>
<p>The following inline formatting options are available:<p>
<p>Bold – Type **text** or __text__,</p>
<p>Italic – Type *text* or _text_,</p>
<p>Code – Type `text`.</p>
</div>
</div>
</template>
<script>
export default {
name: 'HelpPage'
}
</script>

54
client/src/components/InputNotes.vue
View File

@@ -1,5 +1,5 @@
<template>
<div id="InputNotes" class="master-note-edit" :class="[ 'position-'+position ]" @keyup.esc="close" :style="{'background-color':color}">
<div id="InputNotes" class="master-note-edit" :class="[ 'position-'+position ]" @keyup.esc="close" :style="{'background-color':color, 'color':fontColor}">
<div v-if="fancyInput == 1" class="textarea-height no-flow">
@@ -45,26 +45,6 @@
<note-tag-edit :noteId="noteid" :key="'tags-for-note-'+noteid"/>
<div class="ui segment" v-if="false">
Block formatting
The following block formatting options are available:
<p> Bulleted list – Start a line with * or - followed by a space.</p>
<p> Numbered list – Start a line with 1. or 1) followed by a space.</p>
<p> Headings – Start a line with # or ## or ### followed by a space to create a heading 1, heading 2 or heading 3 (up to heading 6 if options defines more headings).</p>
<p> Block quote – Start a line with > followed by a space.</p>
Inline formatting
The following inline formatting options are available:
Bold – Type **text** or __text__,
Italic – Type *text* or _text_,
Code – Type `text`.
</div>
</div>
</template>
@@ -86,12 +66,14 @@
noteText: '',
statusText: 'Save',
lastNoteHash: null,
saveDebounce: null, //Prevent save from being called numerous times quickly
lastSaved: 0,
updated: 'Never',
editDebounce: null,
keyPressesCounter: 0,
fancyInput: 0, //Default to basic text edit. Upgrade if set to 1
color: '#FFF',
fontColor: '#000',
editor: DecoupledEditor,
editorConfig: {
@@ -141,9 +123,11 @@
//Grab the color of the button clicked
const style = getComputedStyle(event.target)
this.color = style['background-color']
this.fontColor = '#FFF'
if(this.color == "rgb(255, 255, 255)" || this.color == '#FFF'){
this.color = null
this.fontColor = '#000'
}
this.lastNoteHash = 0 //Update hash to force note update on next save
@@ -161,6 +145,13 @@
vm.noteText = response.data.text
vm.updated = response.data.updated
vm.lastNoteHash = vm.hashString(response.data.text)
vm.color = response.data.color
this.fontColor = '#FFF'
if(this.color == "rgb(255, 255, 255)" || this.color == '#FFF' || this.color == null){
this.color = null
this.fontColor = '#000'
}
if(response.data.raw_input == 1){
this.fancyInput = 1
@@ -241,16 +232,21 @@
}
let vm = this
//Only save every 1 second
clearTimeout(this.saveDebounce)
this.saveDebounce = setTimeout(() => {
//Only notify user if saving - may help with debugging in the future
vm.statusText = 'Saving'
axios.post('/api/notes/update', postData).then( response => {
vm.statusText = 'Save'
vm.updated = Math.round((+new Date)/1000)
//Only notify user if saving - may help with debugging in the future
vm.statusText = 'Saving'
axios.post('/api/notes/update', postData).then( response => {
vm.statusText = 'Save'
vm.updated = Math.round((+new Date)/1000)
//Update last saved note hash
vm.lastNoteHash = vm.hashString(vm.noteText)
})
}, 500)
//Update last saved note hash
vm.lastNoteHash = vm.hashString(vm.noteText)
})
},
hashString(text){
var hash = 0;

41
client/src/components/Login.vue
View File

@@ -1,21 +1,24 @@
<template>
<div>
<h3>{{getRudeMessage}}</h3>
<p>Login</p>
<div class="ui container">
<h3>Login</h3>
<p>Begin the login process by typing your username or email.</p>
<p>To create an account, type in the username you want to use followed by the password.</p>
<p>You will remain logged in on this browser, until you log out.</p>
<div class="ui segment" v-on:keyup.enter="submit">
<div class="field">
<div class="ui input">
<input v-model="username" type="text" name="email" placeholder="E-mail address" autofocus>
<div class="ui large form">
<div class="field">
<div class="ui input">
<input v-model="username" type="text" name="email" placeholder="Username or E-mail address" autofocus>
</div>
</div>
</div>
<div class="field">
<div class="ui input">
<input v-model="password" type="password" name="password" placeholder="Password">
<div class="field" v-if="username.length > 0">
<div class="ui input">
<input v-model="password" type="password" name="password" placeholder="Password">
</div>
</div>
<div :class="{ 'disabled':(username.length == 0 || password.length == 0)}" v-on:click="submit" class="ui massive compact fluid green submit button">Login</div>
</div>
<div v-on:click="submit" class="ui teal submit button">Login</div>
</div>
@@ -39,11 +42,16 @@
}
},
methods: {
validate(){
console.log('Validate this bitch')
},
submit(){
//Both fields are required
if(this.username <= 0){
return false
}
if(this.password <= 0){
return false
}
let vm = this
let data = {
@@ -57,7 +65,8 @@
if(response.data.success){
const token = response.data.token
vm.$store.commit('setLoginToken', token)
const username = response.data.username
vm.$store.commit('setLoginToken', {token, username})
//Redirect user to notes section after login
this.$router.push('/notes')

42
client/src/components/NoteTitleDisplayCard.vue
View File

@@ -2,12 +2,24 @@
<div class="ui clickable segment" @click="onClick(note.id)" :style="{'background-color':color, 'color':fontColor}">
<h3>{{note.text}}</h3>
<p>Edited: {{$helpers.timeAgo(note.updated)}}</p>
<!-- Display highlights from solr results -->
<div v-if="note.note_highlights.length > 0" class="term-usage">
<p>Note Text</p>
<div class="usage-row" v-for="highlight in note.note_highlights" v-html="highlight"></div>
</div>
<div v-if="note.attachment_highlights.length > 0" class="term-usage">
<p>Note URL Text</p>
<div class="usage-row" v-for="highlight in note.attachment_highlights" v-html="highlight"></div>
</div>
<div v-if="note.tag_highlights.length > 0" class="term-usage">
Tag
<div class="ui icon large label" v-for="highlight in note.tag_highlights" v-html="highlight"></div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'NoteTitleDisplayCard',
@@ -20,23 +32,29 @@
}
},
beforeMount(){
this.note = this.data
if(this.note.color != null && this.note.color != '#FFF'){
this.color = this.note.color
this.fontColor = '#FFF'
}
},
mounted() {
},
methods: {
yup(){
}
}
}
</script>
<style type="text/css" scoped>
.suggestion-box {
<style type="text/css">
.term-usage {
border: 1px solid #DDD;
padding: 10px;
}
.term-usage em {
color: green;
background-color: white;
font-weight: bold;
}
.usage-row + .usage-row {
padding: 8px 0 0;
border-top: 1px solid #DDD;
margin: 8px 0 0;
}
</style>

29
client/src/components/SearchBar.vue
View File

@@ -16,7 +16,7 @@
<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>
</div>
@@ -33,7 +33,16 @@
<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>
<div class="ui nine wide column">
<router-link class="ui basic button" to="/help">Help</router-link>
<div class="ui right floated basic button"
data-tooltip="Log Out" data-position="left center"
v-on:click="destroyLoginToken">{{username}}</div>
</div>
</div>
@@ -57,9 +66,10 @@
v-for="note in notes"
:onClick="openNote"
:data="note"
:key="note.id + note.color"
:key="note.id + note.color + searchTerm + note.note_highlights.length + note.attachment_highlights.length + note.tag_highlights.length"
/>
</div>
</div>
</div>
</div>
@@ -83,6 +93,7 @@
},
data () {
return {
username:'',
initComponent: true,
commonTags: [],
searchTerm: '',
@@ -95,16 +106,22 @@
activeNoteId2: null,
//Position determines how note is Positioned
activeNote1Position: 0,
activeNote2Position: 0
activeNote2Position: 0,
}
},
beforeMount(){
this.$bus.$on('close_active_note', position => {
this.closeNote(position)
})
},
mounted() {
let username = this.$store.getters.getUsername
this.username = this.ucWords(username)
this.search()
},
methods: {
openNote(id){
@@ -171,6 +188,7 @@
vm.commonTags = response.data.tags
vm.notes = response.data.notes
vm.highlights = response.data.highlights
})
},
searchKeyUp(){
@@ -202,6 +220,9 @@
this.searchTerm = ''
this.searchTags = []
this.search()
},
destroyLoginToken() {
this.$store.commit('destroyLoginToken')
}
}
}

8
client/src/router/index.js
View File

@@ -4,6 +4,7 @@ import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'
import Notes from '@/components/Notes'
import HelpPage from '@/components/HelpPage'
Vue.use(Router)
@@ -23,6 +24,11 @@ export default new Router({
path: '/notes',
name: 'Notes',
component: Notes
}
},
{
path: '/help',
name: 'Help',
component: HelpPage
},
]
})

21
client/src/stores/mainStore.js
View File

@@ -8,39 +8,54 @@ export default new Vuex.Store({
state: {
count: 0,
message: 'Get out me yard ya wankers',
token: null
token: null,
username: null
},
mutations: {
increment (state) {
state.count++
},
setLoginToken(state, token){
setLoginToken(state, userData){
console.log(userData)
const username = userData.username
const token = userData.token
localStorage.removeItem('loginToken') //We only want one login token per computer
localStorage.setItem('loginToken', token)
localStorage.removeItem('username') //We only want one login token per computer
localStorage.setItem('username', username)
//Set default token to axios, every request will have header
axios.defaults.headers.common['Authorization'] = token
state.token = token
state.username = username
},
destroyLoginToken(state){
//Remove login token from local storage and from headers
localStorage.removeItem('loginToken')
localStorage.removeItem('username')
delete axios.defaults.headers.common['Authorization']
state.token = null
state.username = null
}
},
getters: {
getRudeMessage: state => {
return state.message
},
getUsername: state => {
return state.username
},
getLoginToken: state => {
return state.token
},
getLoggedIn: state => {
let weIn = (state.token !== null && state.token.length > 0)
let weIn = (state.token !== null && state.token != undefined && state.token.length > 0)
return weIn
}
}