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

Lots of little ease of use tweaks

Browse Source
This commit is contained in:
Max G
2022-02-25 02:33:49 +00:00
parent c1797474b8
commit bc44b3db9a
15 changed files with 546 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
client/src/pages/NotesPage.vue
View File

@@ -26,6 +26,10 @@
:active-tags="searchTags"
v-on:tagClick="tagId => toggleTagFilter(tagId)"
/>
<span>
Active Sessions {{ $store.getters.getActiveSessions }}
</span>
<div class="ui right floated basic shrinking icon button" v-on:click="toggleTitleView()" v-if="$store.getters.totals && $store.getters.totals['totalNotes'] > 0">
<span v-if="titleView">
@@ -51,7 +55,7 @@
</div>
<div class="sixteen wide column" v-if="searchTerm.length > 0 && !loadingInProgress">
<div class="sixteen wide column" v-if="searchTerm.length > 0 && !showLoading">
<h2 class="ui header">
<div class="content">
{{ searchResultsCount.toLocaleString() }} notes with keyword "{{ searchTerm }}"
@@ -63,11 +67,15 @@
</div>
<div v-if="fastFilters['onlyArchived'] == 1" class="sixteen wide column">
<h2>Archived Notes</h2>
<h2>
<i class="green archive icon"></i>
Archived Notes</h2>
</div>
<div class="sixteen wide column" v-if="fastFilters['onlyShowTrashed'] == 1">
<h2>Trash
<h2>
<i class="green trash alternate outline icon"></i>
Trashed Notes
<span>({{ $store.getters.totals['trashedNotes'] }})</span>
<div class="ui right floated basic button" data-tooltip="This doesn't work yet">
<i class="poo storm icon"></i>
@@ -77,7 +85,8 @@
</div>
<div class="sixteen wide column" v-if="fastFilters['onlyShowSharedNotes'] == 1">
<h2>Shared Notes</h2>
<h2><i class="green paper plane outline icon"></i>
Shared Notes</h2>
</div>
<div class="sixteen wide column" v-if="tagSuggestions.length > 0">
@@ -88,17 +97,6 @@
</div>
</div>
<!-- found attachments -->
<div class="sixteen wide column" v-if="foundAttachments.length > 0">
<h5 class="ui tiny dividing header"><i class="green folder open outline icon"></i> Files ({{ foundAttachments.length }})</h5>
<attachment-display
v-for="item in foundAttachments"
:item="item"
:key="item.id"
:search-params="{}"
/>
</div>
<!-- Note title card display -->
<div class="sixteen wide column">
@@ -130,11 +128,25 @@
</div>
<loading-icon v-if="loadingInProgress" message="Decrypting Notes" />
<div class="loading-section" v-if="showLoading">
<loading-icon message="Decrypting Notes" />
</div>
</div>
</div>
<!-- found attachments -->
<div class="sixteen wide column" v-if="foundAttachments.length > 0">
<h5 class="ui tiny dividing header"><i class="green folder open outline icon"></i> Files ({{ foundAttachments.length }})</h5>
<attachment-display
v-for="item in foundAttachments"
:item="item"
:key="item.id"
:search-params="{}"
/>
</div>
</div>
@@ -180,10 +192,10 @@
//Load up notes in batches
firstLoadBatchSize: 10, //First set of rapidly loaded notes
batchSize: 25, //Size of batch loaded when user scrolls through current batch
batchSize: 20, //Size of batch loaded when user scrolls through current batch
batchOffset: 0, //Tracks the current batch that has been loaded
loadingBatchTimeout: null, //Limit how quickly batches can be loaded
loadingInProgress: false,
showLoading: false,
scrollLoadEnabled: true,
//Clear button is not visible
@@ -329,7 +341,7 @@
//Reload page content - don't trigger if load is in progress
this.$bus.$on('note_reload', () => {
if(!this.loadingInProgress){
if(!this.showLoading){
this.reset()
}
})
@@ -342,6 +354,8 @@
//update note on visibility change
// document.addEventListener('visibilitychange', this.visibiltyChangeAction);
//Find previously stored notes, cache for 20 hours, load them and compare
},
beforeDestroy(){
window.removeEventListener('scroll', this.onScroll)
@@ -373,12 +387,29 @@
'$route.params.id': function(id){
//Open note on ID, null id will close note
this.activeNoteId1 = id
},
'$route' (to, from) {
// Reload the notes if returning to this page
if(to.fullPath == '/notes' && !from.fullPath.includes('/notes/open/')){
this.reset()
}
//Lookup tags set in URL
if(to.params.tag && this.$store.getters.totals && this.$store.getters.totals['tags'][to.params.tag]){
//Lookup tag in store by string
const tagObject = this.$store.getters.totals['tags'][to.params.tag]
//Pull key out of string and load tags for that key
this.toggleTagFilter(tagObject.id)
return
}
}
},
methods: {
onScroll(e){
console.log('Scroll')
},
toggleTitleView(){
this.titleView = !this.titleView
},
@@ -418,6 +449,10 @@
},
onScroll(e){
if(!this.scrollLoadEnabled){
return
}
clearTimeout(this.loadingBatchTimeout)
this.loadingBatchTimeout = setTimeout(() => {
@@ -427,12 +462,12 @@
const height = document.getElementById('app').scrollHeight
//Load if less than 500px from the bottom
if(((height - scrolledDown) < 500) && this.scrollLoadEnabled && !this.loadingInProgress){
if(((height - scrolledDown) < 500) && this.scrollLoadEnabled){
this.search(false, this.batchSize, true)
this.search(true, this.batchSize, true)
}
}, 30)
}, 50)
return
@@ -553,19 +588,14 @@
return new Promise((resolve, reject) => {
//Don't double load note batches
if(this.loadingInProgress){
if(this.showLoading){
console.log('Loading already in progress')
return resolve(false)
}
//Reset a lot of stuff if we are not merging batches
if(!mergeExisting){
Object.keys(this.noteSections).forEach( key => {
this.noteSections[key] = []
})
this.batchOffset = 0 // Reset batch offset if we are not merging note batches
this.batchOffset = 0 // Reset batch offset if we are not merging note batches or new set will be offset from current and overwrite current set with second batch
}
this.searchResultsCount = 0
//Remove all filter limits from previous queries
delete this.fastFilters.limitSize
@@ -593,25 +623,40 @@
}
//Perform search - or die
this.loadingInProgress = true
this.showLoading = showLoading
this.scrollLoadEnabled = false
axios.post('/api/note/search', postData)
.then(response => {
//Reset a lot of stuff if we are not merging batches
if(!mergeExisting){
Object.keys(this.noteSections).forEach( key => {
this.noteSections[key] = []
})
}
this.searchResultsCount = 0
// console.timeEnd('Fetch TitleCard Batch '+notesInNextLoad)
//Save the number of notes just loaded
this.batchOffset += response.data.notes.length
//Enable or disable scroll loading
//Enable scroll loading if endpoint retured notes
this.scrollLoadEnabled = response.data.notes.length > 0
if(response.data.total > 0){
this.searchResultsCount = response.data.total
}
this.loadingInProgress = false
this.showLoading = false
this.generateNoteCategories(response.data.notes, mergeExisting)
//cache initial notes for faster reloads
if(!mergeExisting && this.showClear == false){
const cachedNotesJson = JSON.stringify(response.data.notes)
localStorage.setItem('snippetCache', cachedNotesJson)
}
return resolve(true)
})
.catch(error => { this.$bus.$emit('notification', 'Failed to Search Notes') })
@@ -726,7 +771,7 @@
//clear out tags
this.searchTags = []
this.tagSuggestions = []
this.loadingInProgress = false
this.showLoading = false
this.searchTerm = ''
this.$bus.$emit('reset_fast_filters') //Clear out search
@@ -743,9 +788,21 @@
filter[options[index]] = 1
this.fastFilters = filter
//If notes exist in cache, load them up
let showLoading = true
const cachedNotesJson = localStorage.getItem('snippetCache')
const cachedNotes = JSON.parse(cachedNotesJson)
if(cachedNotes && cachedNotes.length > 0 && !this.showClear){
//Load cache. do not merge existing
this.generateNoteCategories(cachedNotes, false)
showLoading = false
}
//Fetch First batch of notes with new filter
this.search(true, this.firstLoadBatchSize, false)
.then( r => this.search(false, this.batchSize, true))
this.search(showLoading, this.batchSize, false)
// .then( r => this.search(false, this.batchSize, true))
}
}
}
@@ -769,4 +826,35 @@
.note-card-section + .note-card-section {
padding: 15px 0 0;
}
.loading-section {
position: fixed;
bottom: 40px;
padding: 0 10px;
right: 5px;
box-shadow: 0 1px 3px 0 #656565;
border-radius: 6px;
background-color: var(--small_element_bg_color);
opacity: 0.9;
font-size: 0.7em;
}
/*html, body {
height: 100%;
}
.wrap {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}*/
</style>