123 lines
2.6 KiB
Vue
123 lines
2.6 KiB
Vue
|
<style type="text/css" scoped>
|
||
|
|
|
||
|
|
.attachment-display-card {
|
||
|
|
width: 100%;
|
||
|
|
padding: 0 0 20px;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.attachment-image {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 150px;
|
||
|
|
float: left;
|
||
|
|
margin: 0 15px 0 0;
|
||
|
|
}
|
||
|
|
.image-placeholder {
|
||
|
|
width: 150px;
|
||
|
|
height: 60px;
|
||
|
|
border: 1px solid #DDD;
|
||
|
|
float: left;
|
||
|
|
margin: 0 15px 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.text {
|
||
|
|
width: 100%;
|
||
|
|
background: transparent;
|
||
|
|
border: none;
|
||
|
|
border-bottom: 1px solid;
|
||
|
|
font-size: 1.4em;
|
||
|
|
margin: 0 0 10px;
|
||
|
|
line-height: 1.4em;
|
||
|
|
}
|
||
|
|
.link {
|
||
|
|
font-size: 1.4em;
|
||
|
|
margin: 0 0 5px;
|
||
|
|
display: inline-block;
|
||
|
|
white-space:nowrap;
|
||
|
|
overflow:hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
width: calc(100% - 180px);
|
||
|
|
line-height: 1.4em;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="attachment-display-card">
|
||
|
|
|
||
|
|
|
||
|
|
<input class="text" v-on:blur="saveIt()" v-model="text"></input>
|
||
|
|
|
||
|
|
<div v-if="item.attachment_type == 1">
|
||
|
|
<div class="image-holder" v-if="item.file_location">
|
||
|
|
<a v-if="item.file_location" :href="item.url" target="_blank">
|
||
|
|
<img class="attachment-image" :src="`/api/static/${item.file_location}`">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div v-else class="image-placeholder"></div>
|
||
|
|
|
||
|
|
<a class="link" v-if="item.url" :href="item.url" target="_blank">{{item.url}}</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="item.attachment_type == 2">
|
||
|
|
<div class="image-holder" v-if="item.file_location">
|
||
|
|
<a v-if="item.file_location && item.type != 1" :href="`/api/static/${item.file_location}`" target="_blank">
|
||
|
|
<img class="attachment-image" :src="`/api/static/${item.file_location}`">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div v-else class="image-placeholder"></div>
|
||
|
|
|
||
|
|
<a class="link" v-if="item.file_location && item.type != 1" :href="`/api/static/${item.file_location}`" target="_blank">Download</a>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="ui small compact basic button" v-on:click="openNote">
|
||
|
|
Open Note
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import axios from 'axios'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
|
||
|
|
props: [ 'item' ],
|
||
|
|
data: function(){
|
||
|
|
return {
|
||
|
|
things: [],
|
||
|
|
text: '',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
beforeCreate: function(){
|
||
|
|
},
|
||
|
|
mounted: function(){
|
||
|
|
this.text = this.item.text
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
openNote(){
|
||
|
|
const noteId = this.item.note_id
|
||
|
|
this.$router.push('/notes/open/'+noteId)
|
||
|
|
},
|
||
|
|
saveIt(){
|
||
|
|
|
||
|
|
//Don't save text if it didn'th change
|
||
|
|
if(this.item.text == this.text){
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
const data = {
|
||
|
|
'attachmentId': this.item.id,
|
||
|
|
'updatedText': this.text,
|
||
|
|
'noteId': this.item.note_id
|
||
|
|
}
|
||
|
|
|
||
|
|
//Save it, and don't think about it.
|
||
|
|
axios.post('/api/attachment/update', data)
|
||
|
|
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|