SolidScribe/client/src/components/AttachmentDisplayCard.vue

<style type="text/css" scoped>

	.attachment-display-card {
		width: 100%;
		padding: 10px;
		display: inline-block;
		border: 1px solid;
		border-color: var(--border_color);
		border-radius: 4px;
		margin: 0 0 15px;
		max-height: 10000px;
	}

		.attachment-image {
			max-width: 100%;
			height: auto;
			max-height: 300px;
		}
		.image-placeholder {
			width: 100%;
			height: 100%;
			max-height: 100px;
		}
		.image-placeholder:after {
			content: 'No Image';
			display: block;
			width: 20px;
			height: 20px;
			background:
			green;
			position: absolute;
			top: 0;
			left: 0;
		}


		.text {
			width: 100%;
			/*height: 100%;*/
			background: transparent;
			border: none;
			border-top: 1px solid;
			border-bottom: 1px solid;
			border-color: var(--border_color);
			font-size: 1.2em;
			line-height: 1.3em;
			/*margin: 0 0 10px;*/
			padding: 10px 0 10px;
			
			color: var(--text_color);
			overflow: hidden;
			resize: none;
			/*transition: height 0.4s ease; This breaks the resize */
		}
		.link {
			font-size: 1.4em;
			margin: 20px 0 20px;
			display: inline-block;
			white-space: nowrap;
		    overflow:hidden;
		    text-overflow: ellipsis;
		    width: 100%;
		    line-height: 1.4em;
		}
	.flip-out {
		animation: flip-out-hor-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
		overflow: hidden;
		transition: max-height 0.3s ease;
		max-height: 0;
	}
	@keyframes flip-out-hor-top {
		0% {
			transform: rotateX(0);
			opacity: 1;
		}
		100% {
			transform: rotateX(70deg);
			opacity: 0;
		}
	}

</style>

<template>
	<div class="attachment-display-card" :class="{ 'flip-out':!unfolded }" v-if="visible">
		<div class="ui stackable grid">

			<!-- image and text -->
			<div class="six wide center aligned middle aligned column">
				<a :href="linkUrl" target="_blank" >
					<img v-if="item.file_location" class="attachment-image" :src="`/api/static/thumb_${item.file_location}`">
					<span v-else>
						<img class="image-placeholder" loading="lazy" src="/api/static/assets/marketing/void.svg">
						No Image
					</span>
					
				</a>
			</div>

			<div class="ten wide column">
				<textarea ref="edit" class="text" v-on:blur="saveIt()" v-on:keyup="checkKeyup" 
					v-model="text"
					v-on:focus="showSave = true"
				></textarea>

				<div v-if="showSave" class="ui green button">Save</div>

				<!-- link -->
				<a class="link" :href="linkUrl" target="_blank">{{linkText}}</a>

				<!-- Buttons -->
				<div class="ui small compact basic button" v-on:click="openNote">
					<i class="file outline icon"></i>
					Open Note
				</div>
				<div class="ui small compact basic button" v-on:click="openEditAttachments" 
				:class="{ 'disabled':this.searchParams.noteId }">
					<i class="folder open outline icon"></i>
					Note Files
				</div>
				<div class="ui small compact basic icon button" v-on:click="deleteAttachment">
					<i v-if="!working" class="trash alternate outline icon"></i>
					<i v-if="working" class="purple spinner loading icon icon"></i>
				</div>

			</div>

		</div>
	</div>
</template>
<script>
	import axios from 'axios'

	export default {

		props: [ 'item', 'searchParams' ],
		data: function(){ 
			return {
				text: '',
				type: null,

				linkText: 'Link',
				linkUrl:null,

				unfolded:true,
				visible: true,
				showSave: false,

				working: false,
			}
		},
		beforeCreate: function(){
		},
		mounted: function(){
			this.text = this.item.text
			this.type = this.item.attachment_type


			//1 = URL, 2 = image, >= 3 files
			if(this.type == 1 && this.item.url != null){
				this.linkText = this.item.url
				this.linkUrl = this.item.url
			}
			if(this.type == 2){
				this.linkText = 'Download'
				this.linkUrl = `/api/static/${this.item.file_location}`
			}

			this.$nextTick(() => {
				this.checkKeyup()
			})
		},
		methods: {
			checkKeyup(){
				let elm = this.$refs.edit
				if(elm){
					elm.style.height = '0'
					elm.style.height = elm.scrollHeight +'px'
				}
			},
			openNote(){
				const noteId = this.item.note_id
				this.$router.push('/notes/open/'+noteId)
				this.$bus.$emit('open_note', noteId)
			},
			openEditAttachments(){
				const noteId = this.item.note_id
				this.$router.push('/attachments/note/'+noteId)
			},
			deleteAttachment(){

				//No double clicks
				if(this.working){ return }

				this.working = true
				axios.post('/api/attachment/delete', {'attachmentId':this.item.id})
				.then( ({data}) => {
					if(data){
						this.unfolded = false
						setTimeout( () => {
							this.visible = false
							this.$store.dispatch('fetchAndUpdateUserTotals')
						}, 600)
					}
				})
			},
			saveIt(){

				this.showSave = false

				//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>