in component outsourced
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
9b8bb8f000
commit
0659038d0b
@@ -37,11 +37,20 @@
|
||||
<span class="filedate">{{ attachment.createdBy }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<Actions>
|
||||
<ActionButton icon="icon-confirm" @click="addAttachment(attachment)">
|
||||
<Actions v-if="selectable">
|
||||
<ActionButton icon="icon-confirm" @click="this.$emit('selectAttachment', attachment)">
|
||||
{{ t('deck', 'Add this attachment') }}
|
||||
</ActionButton>
|
||||
</Actions>
|
||||
<Actions v-if="removable">
|
||||
<ActionButton v-if="attachment.deletedAt === 0" icon="icon-delete" @click="deleteAttachment(attachment)">
|
||||
{{ t('deck', 'Delete Attachment') }}
|
||||
</ActionButton>
|
||||
|
||||
<ActionButton v-else icon="icon-history" @click="restoreAttachment(attachment)">
|
||||
{{ t('deck', 'Restore Attachment') }}
|
||||
</ActionButton>
|
||||
</Actions>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -64,6 +73,18 @@ export default {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
editor: {
|
||||
type: Object,
|
||||
required: false,
|
||||
},
|
||||
selectable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
},
|
||||
removable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -94,7 +115,22 @@ export default {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
addAttachment(attachment) {
|
||||
const descString = this.editor.easymde.value()
|
||||
let embed = ''
|
||||
if (attachment.extendedData.mimetype.includes('image')) {
|
||||
embed = '!'
|
||||
}
|
||||
const attachmentString = embed + '[📎 ' + attachment.data + '](' + this.attachmentUrl(attachment) + ')'
|
||||
this.editor.easymde.value(descString + '\n' + attachmentString)
|
||||
this.modalShow = false
|
||||
},
|
||||
deleteAttachment(attachment) {
|
||||
this.$store.dispatch('deleteAttachment', attachment)
|
||||
},
|
||||
restoreAttachment(attachment) {
|
||||
this.$store.dispatch('restoreAttachment', attachment)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -183,7 +183,11 @@
|
||||
{{ t('deck', 'Cancel') }}
|
||||
</ActionButton>
|
||||
</Actions> -->
|
||||
<AttachmentList :card-id="currentCard.id" />
|
||||
<AttachmentList
|
||||
:card-id="currentCard.id"
|
||||
:selectable="true"
|
||||
:editor="$refs.markdownEditor"
|
||||
@selectAttachment="addAttachment" />
|
||||
</div>
|
||||
</Modal>
|
||||
</AppSidebar>
|
||||
@@ -372,6 +376,7 @@ export default {
|
||||
this.modalShow = true
|
||||
},
|
||||
addAttachment(attachment) {
|
||||
console.log('hier')
|
||||
const descString = this.$refs.markdownEditor.easymde.value()
|
||||
let embed = ''
|
||||
if (attachment.extendedData.mimetype.includes('image')) {
|
||||
@@ -606,88 +611,4 @@ export default {
|
||||
margin: 40px 3px 3px 0;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
@@ -43,53 +43,28 @@
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<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>
|
||||
<ActionButton v-if="attachment.deletedAt === 0" icon="icon-delete" @click="deleteAttachment(attachment)">
|
||||
{{ t('deck', 'Delete Attachment') }}
|
||||
</ActionButton>
|
||||
|
||||
<ActionButton v-else icon="icon-history" @click="restoreAttachment(attachment)">
|
||||
{{ t('deck', 'Restore Attachment') }}
|
||||
</ActionButton>
|
||||
</Actions>
|
||||
</li>
|
||||
<AttachmentList :card-id="card.id" :removable="true" />
|
||||
</ul>
|
||||
</div>
|
||||
</AttachmentDragAndDrop>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Actions, ActionButton } from '@nextcloud/vue'
|
||||
import { formatFileSize } from '@nextcloud/files'
|
||||
import relativeDate from '../../mixins/relativeDate'
|
||||
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: {
|
||||
Actions,
|
||||
ActionButton,
|
||||
AttachmentDragAndDrop,
|
||||
AttachmentList,
|
||||
},
|
||||
mixins: [ relativeDate, attachmentUpload ],
|
||||
mixins: [ attachmentUpload ],
|
||||
props: {
|
||||
card: {
|
||||
type: Object,
|
||||
@@ -122,9 +97,6 @@ export default {
|
||||
attachments() {
|
||||
return [...this.$store.getters.attachmentsByCard(this.card.id)].sort((a, b) => b.id - a.id)
|
||||
},
|
||||
formattedFileSize() {
|
||||
return (filesize) => formatFileSize(filesize)
|
||||
},
|
||||
mimetypeForAttachment() {
|
||||
return (mimetype) => {
|
||||
const url = OC.MimeType.getIconUrl(mimetype)
|
||||
@@ -134,9 +106,6 @@ export default {
|
||||
return styles
|
||||
}
|
||||
},
|
||||
attachmentUrl() {
|
||||
return (attachment) => OC.generateUrl(`/apps/deck/cards/${attachment.cardId}/attachment/${attachment.id}`)
|
||||
},
|
||||
cardId() {
|
||||
return this.card.id
|
||||
},
|
||||
@@ -156,12 +125,6 @@ export default {
|
||||
this.$refs.localAttachments.click()
|
||||
},
|
||||
|
||||
deleteAttachment(attachment) {
|
||||
this.$store.dispatch('deleteAttachment', attachment)
|
||||
},
|
||||
restoreAttachment(attachment) {
|
||||
this.$store.dispatch('restoreAttachment', attachment)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -172,19 +135,6 @@ export default {
|
||||
background-position: 10px center;
|
||||
}
|
||||
|
||||
.modal__content {
|
||||
width: 25vw;
|
||||
min-width: 250px;
|
||||
height: 120px;
|
||||
text-align: center;
|
||||
margin: 20px 20px 60px 20px;
|
||||
}
|
||||
|
||||
.modal__content button {
|
||||
float: right;
|
||||
margin: 40px 3px 3px 0;
|
||||
}
|
||||
|
||||
.attachment-list {
|
||||
&.selector {
|
||||
padding: 10px;
|
||||
|
||||
Reference in New Issue
Block a user