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

Better formatting and tag stripping for note title display

Browse Source 
cleaned up interface a bunch
allow for opening of two notes at once
Escape closes note
Added global helper class and time ago function
Time ago function displays on main page and in note
Removed tab button creating tabbed spaces in document
Simplified save text
This commit is contained in:
Max G
2019-07-20 23:07:22 +00:00
parent 61754fe290
commit e6c16f3d37
7 changed files with 204 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,16 +1,17 @@
<template>
<div id="InputNotes" class="master-note-edit">
<div id="InputNotes" class="master-note-edit" :class="[ 'position-'+position ]" @keyup.esc="close">
<ckeditor ref="main-edit"
:editor="editor" @ready="onReady" v-model="noteText" :config="editorConfig" v-on:blur="save"></ckeditor>
<div class="ui buttons">
<div class="ui green button">{{statusText}}</div>
<div class="ui button">Delete</div>
<div v-on:click="close" class="ui button">Close</div>
<div class="ui disabled button">{{lastNoteHash}}</div>
<div class="ui disabled button">Last Update: {{updated}}</div>
<div class="ui button">Delete</div>
<div v-on:click="close" class="ui button">Close (ESC)</div>
</div>
<p>
Last Updated: {{$helpers.timeAgo(updated)}}
</p>
<div class="ui segment">
<note-tag-edit :noteId="noteid" :key="'tags-for-note-'+noteid"/>
@@ -47,7 +48,7 @@
export default {
name: 'InputNotes',
props: [ 'noteid' ],
props: [ 'noteid', 'position' ],
components:{
'note-tag-edit': require('./NoteTagEdit.vue').default
},
@@ -57,6 +58,7 @@
noteText: '',
statusText: 'Save',
lastNoteHash: null,
lastSaved: 0,
updated: 'Never',
editDebounce: null,
keyPressesCounter: 0,
@@ -120,7 +122,6 @@
onReady(editor){
let vm = this
console.log(vm)
// Insert the toolbar before the editable area.
editor.ui.getEditableElement().parentElement.insertBefore(
@@ -145,13 +146,15 @@
//Save after 20 keystrokes
vm.keyPressesCounter = (vm.keyPressesCounter + 1)
if(vm.keyPressesCounter > 30){
vm.keyPressesCounter = 0
vm.save()
}
//Optional data bindings for tab key
if( (data.keyCode == 9) && viewDocument.isFocused ){
//Insert 5 spaces to simulate tab
editor.execute( 'input', { text: " " } );
//editor.execute( 'input', { text: " " } );
evt.stop(); // Prevent executing the default handler.
data.preventDefault();
@@ -161,16 +164,14 @@
} );
},
save(){
console.log('Save, ', this.keyPressesCounter)
this.keyPressesCounter = 0
clearTimeout(this.editDebounce)
//Don't save note if its hash doesn't change
if(this.lastNoteHash == this.hashString(this.noteText)){
return
}
const postData = {
'noteId':this.currentNoteId,
@@ -178,16 +179,16 @@
}
let vm = this
//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 = 'Saved'
vm.statusText = 'Save'
vm.updated = Math.round((+new Date)/1000)
//Update last saved note hash
vm.lastNoteHash = vm.hashString(vm.noteText)
setTimeout(() => {
vm.statusText = 'Save'
}, 5000)
})
})
},
hashString(text){
var hash = 0;
@@ -202,7 +203,7 @@
return hash;
},
close(){
this.$bus.$emit('close_active_note')
this.$bus.$emit('close_active_note', this.position)
}
}
}
@@ -212,14 +213,24 @@
.master-note-edit {
position: fixed;
left: 10%;
right: 10%;
bottom: 0;
background: green;
height: 98vh;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
background: white;
height: 99vh;
box-shadow: 0px 0px 5px 2px rgba(140,140,140,1);
}
/* One note open, in the middle of the screen */
.master-note-edit.position-0 {
left: 30%;
right: 1%;
}
/* Two Notes Open, each takes up 50% of the space */
.master-note-edit.position-1 {
left: 50%;
right: 0%;
}
.master-note-edit.position-2 {
left: 0%;
right: 50%;
}
</style>

13
client/src/components/Notes.vue
View File

@@ -4,7 +4,7 @@
<search-bar />
</div>
<input-notes v-if="activeNoteId != null" :noteid="activeNoteId"></input-notes>
</div>
</template>
@@ -17,7 +17,6 @@
export default {
name: 'Notes',
components:{
'input-notes': require('./InputNotes.vue').default,
'search-bar': require('./SearchBar.vue').default
},
data () {
@@ -27,21 +26,13 @@
}
},
beforeMount(){
this.$bus.$on('close_active_note', () => {
this.activeNoteId = null
})
this.$bus.$on('open_note', openNoteId => {
this.activeNoteId = openNoteId
})
},
mounted: function() {
//this.getLatest()
},
methods: {
openNote(id){
this.activeNoteId = id
}
}
}
</script>

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

@@ -5,29 +5,45 @@
<div class="ui grid">
<!-- search menu -->
<div class="ui row">
<div @click="createNote" class="ui green button">
<i class="plus icon"></i>
New Note
</div>
<input v-model="searchTerm" @keyup="searchKeyUp" @:keyup.enter="search" placeholder="Search Notes" />
<div class="ui button" @click="reset">Reset</div>
<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>
<div class="ui row">
<div class="ui two wide column">
<div class="ui basic fluid button" @click="reset">Reset</div>
<div class="ui divider"></div>
<div class="ui clickable basic fluid large label" v-for="tag in commonTags" @click="toggleTagFilter(tag.id)"
:class="{ 'green':(searchTags.includes(tag.id)) }">
{{ucWords(tag.text)}} <div class="detail">{{tag.usages}}</div>
</div>
</div>
<div class="ui fourteen wide column">
<h2>Notes ({{notes.length}})</h2>
<div v-if="notes !== null">
<div class="ui vertical segment clickable" v-for="note in notes" v-on:click="openNote(note.id)" v-html="note.text">
<div class="ui vertical segment clickable" v-for="note in notes" v-on:click="openNote(note.id)">
<h3>{{note.text}}</h3>
<p>Edited: {{$helpers.timeAgo(note.updated)}}</p>
</div>
</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>
@@ -37,23 +53,75 @@
export default {
name: 'SearchBar',
components: {
'input-notes': require('./InputNotes.vue').default,
},
data () {
return {
initComponent: true,
commonTags: [],
searchTerm: '',
searchTags: [],
notes: null,
searchDebounce: null
notes: [],
searchDebounce: null,
//Currently open notes in app
activeNoteId1: null,
activeNoteId2: null,
//Position determines how note is Positioned
activeNote1Position: 0,
activeNote2Position: 0
}
},
beforeMount(){
this.$bus.$on('close_active_note', position => {
this.closeNote(position)
})
},
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
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
}
},
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.activeNote1Position = 0
this.activeNote2Position = 0
this.search()
},
toggleTagFilter(tagId){
if(this.searchTags.includes(tagId)){
@@ -99,10 +167,6 @@
}
})
},
openNote(noteId){
//Emit open note event
this.$bus.$emit('open_note', noteId)
},
ucWords(str){
return (str + '')
.replace(/^(.)|\s+(.)/g, function ($1) {