attach files in description
Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>
This commit is contained in:
Jakob Röhrl
committed by
Julius Härtl
Julius Härtl
parent
4d7940e14d
commit
ce0d2a0d41
@@ -207,8 +207,4 @@ export default {
|
||||
margin: 20px 20px 60px 20px;
|
||||
}
|
||||
|
||||
.modal__content button {
|
||||
float: right;
|
||||
margin: 40px 3px 3px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -21,54 +21,87 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="attachment-list">
|
||||
<ul>
|
||||
<li v-for="attachment in attachments"
|
||||
:key="attachment.id"
|
||||
class="attachment">
|
||||
<a class="fileicon" :style="mimetypeForAttachment(attachment.extendedData.mimetype)" :href="attachmentUrl(attachment)" />
|
||||
<div class="details">
|
||||
<a :href="attachmentUrl(attachment)" target="_blank">
|
||||
<div class="filename">
|
||||
<span class="basename">{{ attachment.data }}</span>
|
||||
</div>
|
||||
<span class="filesize">{{ formattedFileSize(attachment.extendedData.filesize) }}</span>
|
||||
<span class="filedate">{{ relativeDate(attachment.createdAt*1000) }}</span>
|
||||
<span class="filedate">{{ attachment.createdBy }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<Actions v-if="selectable">
|
||||
<ActionButton icon="icon-confirm" @click="$emit('selectAttachment', attachment)">
|
||||
{{ t('deck', 'Add this attachment') }}
|
||||
</ActionButton>
|
||||
</Actions>
|
||||
<Actions v-if="removable">
|
||||
<ActionButton v-if="attachment.deletedAt === 0" icon="icon-delete" @click="$emit('deleteAttachment', attachment)">
|
||||
{{ t('deck', 'Delete Attachment') }}
|
||||
</ActionButton>
|
||||
<AttachmentDragAndDrop :card-id="cardId" class="drop-upload--sidebar">
|
||||
<button class="icon-upload" @click="clickAddNewAttachmment()">
|
||||
{{ t('deck', 'Upload attachment') }}
|
||||
</button>
|
||||
<input ref="localAttachments"
|
||||
type="file"
|
||||
style="display: none;"
|
||||
multiple
|
||||
@change="handleUploadFile">
|
||||
<div class="attachment-list">
|
||||
<ul>
|
||||
<li v-for="attachment in uploadQueue" :key="attachment.name" class="attachment">
|
||||
<a class="fileicon" :style="mimetypeForAttachment('none')" />
|
||||
<div class="details">
|
||||
<a>
|
||||
<div class="filename">
|
||||
<span class="basename">{{ attachment.name }}</span>
|
||||
</div>
|
||||
<progress :value="attachment.progress" max="100" />
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<ActionButton v-else icon="icon-history" @click="$emit('restoreAttachment', attachment)">
|
||||
{{ t('deck', 'Restore Attachment') }}
|
||||
</ActionButton>
|
||||
</Actions>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="attachment-list">
|
||||
<ul>
|
||||
<li v-for="attachment in attachments"
|
||||
:key="attachment.id"
|
||||
class="attachment">
|
||||
<a class="fileicon" :style="mimetypeForAttachment(attachment.extendedData.mimetype)" :href="attachmentUrl(attachment)" />
|
||||
<div class="details">
|
||||
<a :href="attachmentUrl(attachment)" target="_blank">
|
||||
<div class="filename">
|
||||
<span class="basename">{{ attachment.data }}</span>
|
||||
</div>
|
||||
<span class="filesize">{{ formattedFileSize(attachment.extendedData.filesize) }}</span>
|
||||
<span class="filedate">{{ relativeDate(attachment.createdAt*1000) }}</span>
|
||||
<span class="filedate">{{ attachment.createdBy }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<Actions v-if="selectable">
|
||||
<ActionButton icon="icon-confirm" @click="$emit('selectAttachment', attachment)">
|
||||
{{ t('deck', 'Add this attachment') }}
|
||||
</ActionButton>
|
||||
</Actions>
|
||||
<Actions v-if="removable">
|
||||
<ActionButton v-if="attachment.deletedAt === 0" icon="icon-delete" @click="$emit('deleteAttachment', attachment)">
|
||||
{{ t('deck', 'Delete Attachment') }}
|
||||
</ActionButton>
|
||||
|
||||
<ActionButton v-else icon="icon-history" @click="$emit('restoreAttachment', attachment)">
|
||||
{{ t('deck', 'Restore Attachment') }}
|
||||
</ActionButton>
|
||||
</Actions>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</AttachmentDragAndDrop>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Actions, ActionButton } from '@nextcloud/vue'
|
||||
import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
|
||||
import relativeDate from '../../mixins/relativeDate'
|
||||
import { formatFileSize } from '@nextcloud/files'
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
import { mapState } from 'vuex'
|
||||
import { loadState } from '@nextcloud/initial-state'
|
||||
import attachmentUpload from '../../mixins/attachmentUpload'
|
||||
const maxUploadSizeState = loadState('deck', 'maxUploadSize')
|
||||
|
||||
export default {
|
||||
name: 'AttachmentList',
|
||||
components: {
|
||||
Actions,
|
||||
ActionButton,
|
||||
AttachmentDragAndDrop,
|
||||
},
|
||||
mixins: [relativeDate],
|
||||
mixins: [relativeDate, attachmentUpload],
|
||||
|
||||
props: {
|
||||
cardId: {
|
||||
type: Number,
|
||||
@@ -83,6 +116,15 @@ export default {
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
modalShow: false,
|
||||
file: '',
|
||||
overwriteAttachment: null,
|
||||
isDraggingOver: false,
|
||||
maxUploadSize: maxUploadSizeState,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
attachments() {
|
||||
return [...this.$store.getters.attachmentsByCard(this.cardId)].sort((a, b) => b.id - a.id)
|
||||
@@ -102,14 +144,45 @@ export default {
|
||||
formattedFileSize() {
|
||||
return (filesize) => formatFileSize(filesize)
|
||||
},
|
||||
...mapState({
|
||||
currentBoard: state => state.currentBoard,
|
||||
}),
|
||||
isReadOnly() {
|
||||
return !this.$store.getters.canEdit
|
||||
},
|
||||
dropHintText() {
|
||||
if (this.isReadOnly) {
|
||||
return t('deck', 'This board is read only')
|
||||
} else {
|
||||
return t('deck', 'Drop your files to upload')
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
|
||||
created() {
|
||||
this.$store.dispatch('fetchAttachments', this.cardId)
|
||||
},
|
||||
methods: {
|
||||
handleUploadFile(event) {
|
||||
const files = event.target.files ?? []
|
||||
for (const file of files) {
|
||||
this.onLocalAttachmentSelected(file)
|
||||
}
|
||||
event.target.value = ''
|
||||
},
|
||||
clickAddNewAttachmment() {
|
||||
this.$refs.localAttachments.click()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.icon-upload {
|
||||
padding-left: 35px;
|
||||
background-position: 10px center;
|
||||
}
|
||||
|
||||
.attachment-list {
|
||||
&.selector {
|
||||
padding: 10px;
|
||||
|
||||
@@ -633,7 +633,6 @@ export default {
|
||||
width: 25vw;
|
||||
min-width: 250px;
|
||||
min-height: 120px;
|
||||
text-align: center;
|
||||
margin: 20px 20px 60px 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
@@ -21,118 +21,27 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<AttachmentDragAndDrop :card-id="card.id" class="drop-upload--sidebar">
|
||||
<button class="icon-upload" @click="clickAddNewAttachmment()">
|
||||
{{ t('deck', 'Upload attachment') }}
|
||||
</button>
|
||||
<input ref="localAttachments"
|
||||
type="file"
|
||||
style="display: none;"
|
||||
multiple
|
||||
@change="handleUploadFile">
|
||||
<div class="attachment-list">
|
||||
<ul>
|
||||
<li v-for="attachment in uploadQueue" :key="attachment.name" class="attachment">
|
||||
<a class="fileicon" :style="mimetypeForAttachment('none')" />
|
||||
<div class="details">
|
||||
<a>
|
||||
<div class="filename">
|
||||
<span class="basename">{{ attachment.name }}</span>
|
||||
</div>
|
||||
<progress :value="attachment.progress" max="100" />
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<AttachmentList
|
||||
:card-id="card.id"
|
||||
:removable="true"
|
||||
@deleteAttachment="deleteAttachment"
|
||||
@restoreAttachment="restoreAttachment" />
|
||||
</ul>
|
||||
</div>
|
||||
</AttachmentDragAndDrop>
|
||||
<AttachmentList
|
||||
:card-id="card.id"
|
||||
:removable="true"
|
||||
@deleteAttachment="deleteAttachment"
|
||||
@restoreAttachment="restoreAttachment" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import { loadState } from '@nextcloud/initial-state'
|
||||
import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
|
||||
import attachmentUpload from '../../mixins/attachmentUpload'
|
||||
import AttachmentList from './AttachmentList'
|
||||
const maxUploadSizeState = loadState('deck', 'maxUploadSize')
|
||||
|
||||
export default {
|
||||
name: 'CardSidebarTabAttachments',
|
||||
components: {
|
||||
AttachmentDragAndDrop,
|
||||
AttachmentList,
|
||||
},
|
||||
mixins: [ attachmentUpload ],
|
||||
props: {
|
||||
card: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
modalShow: false,
|
||||
file: '',
|
||||
overwriteAttachment: null,
|
||||
isDraggingOver: false,
|
||||
maxUploadSize: maxUploadSizeState,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
currentBoard: state => state.currentBoard,
|
||||
}),
|
||||
isReadOnly() {
|
||||
return !this.$store.getters.canEdit
|
||||
},
|
||||
dropHintText() {
|
||||
if (this.isReadOnly) {
|
||||
return t('deck', 'This board is read only')
|
||||
} else {
|
||||
return t('deck', 'Drop your files to upload')
|
||||
}
|
||||
},
|
||||
attachments() {
|
||||
return [...this.$store.getters.attachmentsByCard(this.card.id)].sort((a, b) => b.id - a.id)
|
||||
},
|
||||
mimetypeForAttachment() {
|
||||
return (mimetype) => {
|
||||
const url = OC.MimeType.getIconUrl(mimetype)
|
||||
const styles = {
|
||||
'background-image': `url("${url}")`,
|
||||
}
|
||||
return styles
|
||||
}
|
||||
},
|
||||
cardId() {
|
||||
return this.card.id
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
card(newCard) {
|
||||
this.$store.dispatch('fetchAttachments', newCard.id)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('fetchAttachments', this.card.id)
|
||||
},
|
||||
methods: {
|
||||
handleUploadFile(event) {
|
||||
const files = event.target.files ?? []
|
||||
for (const file of files) {
|
||||
this.onLocalAttachmentSelected(file)
|
||||
}
|
||||
event.target.value = ''
|
||||
},
|
||||
clickAddNewAttachmment() {
|
||||
this.$refs.localAttachments.click()
|
||||
},
|
||||
deleteAttachment(attachment) {
|
||||
this.$store.dispatch('deleteAttachment', attachment)
|
||||
},
|
||||
@@ -142,94 +51,3 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.icon-upload {
|
||||
padding-left: 35px;
|
||||
background-position: 10px center;
|
||||
}
|
||||
|
||||
.attachment-list {
|
||||
&.selector {
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
width: 30%;
|
||||
max-width: 500px;
|
||||
min-width: 200px;
|
||||
max-height: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #eee;
|
||||
z-index: 2;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 3px darkgray;
|
||||
overflow: scroll;
|
||||
}
|
||||
h3.attachment-selector {
|
||||
margin: 0 0 10px;
|
||||
padding: 0;
|
||||
.icon-close {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
li.attachment {
|
||||
display: flex;
|
||||
padding: 3px;
|
||||
min-height: 44px;
|
||||
|
||||
&.deleted {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.fileicon {
|
||||
display: inline-block;
|
||||
min-width: 32px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-size: contain;
|
||||
}
|
||||
.details {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
min-width: 0;
|
||||
flex-basis: 50%;
|
||||
line-height: 110%;
|
||||
padding: 2px;
|
||||
}
|
||||
.filename {
|
||||
width: 70%;
|
||||
display: flex;
|
||||
.basename {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.extension {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
.filesize, .filedate {
|
||||
font-size: 90%;
|
||||
color: darkgray;
|
||||
}
|
||||
.app-popover-menu-utils {
|
||||
position: relative;
|
||||
right: -10px;
|
||||
button {
|
||||
height: 32px;
|
||||
width: 42px;
|
||||
}
|
||||
}
|
||||
button.icon-history {
|
||||
width: 44px;
|
||||
}
|
||||
progress {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user