171 lines
4.2 KiB
Vue
171 lines
4.2 KiB
Vue
<template>
|
|
<div class="ui basic segment no-fluf-segment">
|
|
<div class="ui grid">
|
|
|
|
<div class="ui sixteen wide column">
|
|
<h2 class="ui header">
|
|
<i class="sticky note outline icon"></i>
|
|
<div class="content">
|
|
The Scratch Pad
|
|
<div class="sub header">One place to put random junk</div>
|
|
</div>
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="sixteen wide middle aligned column" v-if="quickNoteId > 0">
|
|
|
|
<div v-if="quickNoteId" v-on:click="openNoteEdit" class="ui compact basic button">
|
|
<i class="file outline icon"></i>
|
|
Open Note
|
|
</div>
|
|
|
|
<div class="ui compact basic right floated button shrinking" v-if="!showNewNoteConfirm" v-on:click="showNewNoteConfirm = true">
|
|
<i class="sync alternate reload icon"></i>
|
|
New Scratch Pad
|
|
</div>
|
|
<div v-if="showNewNoteConfirm" class="ui compact basic right floated button shrinking" v-on:click="showNewNoteConfirm = false">
|
|
<i class="close icon"></i>
|
|
Cancel
|
|
</div>
|
|
<div v-if="showNewNoteConfirm" class="ui compact basic right floated button shrinking" v-on:click="newQuickNote()">
|
|
<i class="green thumbs up icon"></i>
|
|
Confirm
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui sixteen wide column">
|
|
<div class="ui form">
|
|
<div class="field">
|
|
<textarea
|
|
class="quick-note-input"
|
|
rows="1"
|
|
ref="fastInput"
|
|
v-model="newText"
|
|
v-on:keydown="checkKeyup"
|
|
placeholder="Push to the top of the quick note."
|
|
></textarea>
|
|
</div>
|
|
<div class="field">
|
|
<div v-on:click="appendQuickNote" class="ui green button">Save (Enter)</div>
|
|
<div v-if="quickNoteId" class="ui right floated basic button" v-on:click="$router.push('/attachments/note/'+quickNoteId)">
|
|
<i class="folder open outline icon"></i>
|
|
Files
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="one wide column"></div>
|
|
<div class="fourteen wide column">
|
|
<div class="note-card-text" v-html="savedQuickNoteText"></div>
|
|
</div>
|
|
<div class="one wide column"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style type="text/css" scoped>
|
|
.quick-note-input {
|
|
box-sizing: border-box !important;
|
|
resize: none !important;
|
|
}
|
|
</style>
|
|
<script>
|
|
|
|
import axios from 'axios'
|
|
|
|
export default {
|
|
data: function(){
|
|
return {
|
|
newText: '',
|
|
savedQuickNoteText: '',
|
|
quickNoteId: null,
|
|
showNewNoteConfirm: false,
|
|
}
|
|
},
|
|
beforeCreate: function(){
|
|
//
|
|
// Perform Login check
|
|
//
|
|
this.$root.loginGateway()
|
|
},
|
|
beforeMount(){
|
|
|
|
this.$io.on('new_note_created', noteId => {
|
|
this.getQuickNote()
|
|
})
|
|
|
|
this.$io.on('new_note_text_saved', ({noteId, hash}) => {
|
|
this.getQuickNote()
|
|
})
|
|
},
|
|
mounted: function(){
|
|
|
|
if(this.$refs.fastInput){
|
|
//Load up note text
|
|
this.getQuickNote()
|
|
|
|
//Set focus to input pane
|
|
this.$nextTick(() => {
|
|
this.$refs.fastInput.focus()
|
|
})
|
|
}
|
|
},
|
|
computed: {
|
|
loggedIn () {
|
|
return this.$store.getters.getLoggedIn
|
|
}
|
|
},
|
|
methods: {
|
|
newQuickNote(){
|
|
|
|
this.showNewNoteConfirm = false
|
|
|
|
axios.post('/api/quick-note/new')
|
|
.then( ({data}) => {
|
|
this.savedQuickNoteText = ''
|
|
this.quickNoteId = ''
|
|
})
|
|
|
|
},
|
|
openNoteEdit(){
|
|
this.$router.push({'path':'/notes/open/'+this.quickNoteId})
|
|
},
|
|
checkKeyup(event){
|
|
|
|
let element = event.target
|
|
let padding = 0
|
|
|
|
element.style.height = 'auto';
|
|
element.style.height = (element.scrollHeight + padding) +'px';
|
|
|
|
//Enter Key submits by default
|
|
if(event.keyCode == 13){
|
|
this.appendQuickNote()
|
|
return
|
|
}
|
|
},
|
|
appendQuickNote(){
|
|
|
|
//Don't submit empty note
|
|
if(this.newText.trim() == ''){ return }
|
|
|
|
axios.post('/api/quick-note/update', { 'pushText':this.newText.trim() } )
|
|
.then( results => {
|
|
|
|
this.newText = '' //Clear text area
|
|
this.$refs.fastInput.style.height = 'auto' //Back to normal size
|
|
|
|
})
|
|
.catch(error => { this.$bus.$emit('notification', 'Failed to Update Quick Note') })
|
|
},
|
|
getQuickNote(){
|
|
axios.post('/api/quick-note/get')
|
|
.then( ({data}) => {
|
|
this.savedQuickNoteText = data.text
|
|
this.quickNoteId = data.id
|
|
})
|
|
.catch(error => { this.$bus.$emit('notification', 'Failed to Fetch Quick Note') })
|
|
},
|
|
}
|
|
}
|
|
</script> |