fab0b3873f
* Added more options to attachment page and filters * Much better rendering and updating on attachment page * Math bug is fixed with better string parsing fixes #14 * Icons are limited to 4 per note * If an image is visible on note preview it will not appear in images preview * Touched up text algorithm to better display note titles
121 lines
2.5 KiB
Vue
121 lines
2.5 KiB
Vue
<style type="text/css" scoped>
|
|
|
|
.img-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.img-row {
|
|
height: 30vh;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.img-row:last-child {
|
|
/* There's no science in using "10" here. In all my testing, this delivered the best results. */
|
|
flex-grow: 10;
|
|
}
|
|
|
|
.img-row > img {
|
|
max-height: calc(100% - 10px);
|
|
min-width: calc(100% - 10px);
|
|
max-width: calc(100% - 10px);
|
|
object-fit: cover;
|
|
vertical-align: bottom;
|
|
/*padding: 5px;*/
|
|
box-shadow: 0px 2px 2px 1px rgba(34,36,38,0.3);
|
|
cursor: pointer;
|
|
}
|
|
|
|
</style>
|
|
|
|
<template>
|
|
<div>
|
|
|
|
<div v-if="uploadedToNote.length > 0">
|
|
<h2>Images Uploaded to Note</h2>
|
|
<div class="ui fluid green button" v-on:click="$router.push('/attachments/note/'+noteId)">
|
|
Manage Files on this Note
|
|
<i class="chevron circle right icon"></i>
|
|
</div>
|
|
<p></p>
|
|
<div class="img-container">
|
|
<div v-for="file in uploadedToNote" class="img-row" v-on:click="onFileClick(file)">
|
|
<img :src="`/api/static/thumb_${file.file_location}`">
|
|
</div>
|
|
|
|
<!-- extra row helps it display properly -->
|
|
<div class="img-row"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Add images to note -->
|
|
<div v-if="files.length > 0">
|
|
<h2>All other Images</h2>
|
|
<div class="ui fluid green button" v-on:click="$router.push('/attachments')">
|
|
Manage All Files
|
|
<i class="chevron circle right icon"></i>
|
|
</div>
|
|
<p></p>
|
|
<div class="img-container">
|
|
<div v-for="file in files" class="img-row" v-on:click="onFileClick(file)">
|
|
<img :src="`/api/static/thumb_${file.file_location}`">
|
|
</div>
|
|
|
|
<!-- extra row helps it display properly -->
|
|
<div class="img-row"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import axios from 'axios'
|
|
|
|
export default {
|
|
name: 'SimpleAttachmentNoteComponent',
|
|
props: [ 'noteId', 'squireEditor' ],
|
|
data () {
|
|
return {
|
|
files: [],
|
|
uploadedToNote: [],
|
|
}
|
|
},
|
|
beforeMount(){
|
|
|
|
},
|
|
mounted(){
|
|
|
|
axios.post('/api/attachment/search', {'attachmentType':'files', 'setSize':1000})
|
|
.then( ({data}) => {
|
|
|
|
//Sort files into two categories
|
|
data.forEach(file => {
|
|
if(file['note_id'] == this.noteId){
|
|
this.uploadedToNote.push(file)
|
|
} else {
|
|
this.files.push(file)
|
|
}
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
onFileClick(file){
|
|
|
|
const imageCode = `<img alt="image" src="/api/static/thumb_${file.file_location}">`
|
|
|
|
this.$bus.$emit('new_file_upload', {noteId: this.noteId, imageCode})
|
|
|
|
if(this.$store.getters.getIsUserOnMobile){
|
|
this.close()
|
|
}
|
|
},
|
|
close() {
|
|
this.$emit('close');
|
|
},
|
|
}
|
|
}
|
|
</script>
|