ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Merge pull request #1610 from nextcloud/enh/attachment-dad-cards

Browse Source 
new mixin and component
This commit is contained in:
Julius Härtl
2020-03-29 11:50:35 +02:00
committed by GitHub
parent 6d6f8aaa7a 2d639ed470
commit fdfbcb6535
6 changed files with 374 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@@ -12604,7 +12604,7 @@
},
"mkdirp": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"dev": true,
"requires": {
@@ -13212,7 +13212,7 @@
},
"os-homedir": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
"resolved": "http://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
"integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
"dev": true
},
@@ -13229,7 +13229,7 @@
},
"os-tmpdir": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
"resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
"dev": true
},
@@ -13409,7 +13409,7 @@
},
"path-is-absolute": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
"resolved": "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
},
"path-key": {
@@ -16325,7 +16325,7 @@
},
"string_decoder": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"requires": {
"safe-buffer": "~5.1.0"

217
src/components/AttachmentDragAndDrop.vue Normal file
View File

@@ -0,0 +1,217 @@
<!--
- @copyright Copyright (c) 2020 Jakob Röhrl <jakob.roehrl@web.de>
-
- @author Jakob Röhrl <jakob.roehrl@web.de>
-
- @license GNU AGPL version 3 or any later version
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-->
<template>
<div class="attachments-drag-zone"
@dragover.prevent="!isDraggingOver && (isDraggingOver = true)"
@dragleave.prevent="isDraggingOver && (isDraggingOver = false)"
@drop.prevent="handleDropFiles">
<slot />
<transition name="fade" mode="out-in">
<div
v-show="isDraggingOver"
class="dragover">
<div class="drop-hint">
<div
class="drop-hint__icon"
:class="{
'icon-upload' : !isReadOnly,
'icon-error' : isReadOnly}" />
<h2
class="drop-hint__text">
{{ dropHintText }}
</h2>
</div>
</div>
</transition>
<Modal v-if="modalShow" :title="t('deck', 'File already exists')" @close="modalShow=false">
<div class="modal__content">
<h2>{{ t('deck', 'File already exists') }}</h2>
<p>
{{ t('deck', 'A file with the name {filename} already exists.', {filename: file.name}) }}
</p>
<p>
{{ t('deck', 'Do you want to overwrite it?') }}
</p>
<button class="primary" @click="overrideAttachment">
{{ t('deck', 'Overwrite file') }}
</button>
<button @click="modalShow=false">
{{ t('deck', 'Keep existing file') }}
</button>
</div>
</Modal>
</div>
</template>
<script>
import { Modal } from '@nextcloud/vue'
import attachmentUpload from '../mixins/attachmentUpload'
import { loadState } from '@nextcloud/initial-state'
const maxUploadSizeState = loadState('deck', 'maxUploadSize')
export default {
name: 'AttachmentDragAndDrop',
components: { Modal },
mixins: [ attachmentUpload ],
props: {
cardId: {
type: Number,
default: null,
},
},
data() {
return {
modalShow: false,
file: '',
overwriteAttachment: null,
isDraggingOver: false,
maxUploadSize: maxUploadSizeState,
}
},
computed: {
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')
}
},
},
methods: {
dragEnter() {
},
dragLeave() {
},
handleDropFiles(event) {
this.isDraggingOver = false
if (this.isReadOnly) {
return
}
this.onLocalAttachmentSelected(event.dataTransfer.files[0])
event.dataTransfer.value = ''
},
},
}
</script>
<style scoped lang="scss">
.attachments-drag-zone {
flex-grow: 1;
position: relative;
}
.dragover {
position: absolute;
background: var(--color-primary-light);
z-index: 11;
display: flex;
border-radius: var(--border-radius);
opacity: .9;
margin: auto;
.drop-hint {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
&__icon {
background-size: 32px;
background-position: center center;
height: 48px;
margin-bottom: 16px;
}
&__text {
line-height: 125%;
text-align: center;
}
}
}
.drop-upload--sidebar .dragover {
top: 20%;
left: 10%;
width: 80%;
height: 60%;
box-shadow: 0px 0px 36px var(--color-box-shadow);
}
.drop-upload--card .dragover {
border: 0;
width: 100%;
height: 100%;
top: 0;
left: 0;
h2 {
font-size: 13px;
margin: 0;
}
.drop-hint__icon {
margin: 0;
background-size: 16px;
height: 16px;
}
}
.fade {
&-enter {
opacity: 0;
}
&-enter-to {
opacity: .9;
}
&-leave {
opacity: .9;
}
&-leave-to {
opacity: 0;
}
&-enter-active,
&-leave-active {
transition: opacity 150ms ease-in-out;
}
}
.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;
}
</style>

145
src/components/card/CardSidebarTabAttachments.vue
View File

@@ -21,10 +21,7 @@
-->
<template>
<div class="attachments-drag-zone"
@dragover.prevent="!isDraggingOver && (isDraggingOver = true)"
@dragleave.prevent="isDraggingOver && (isDraggingOver = false)"
@drop.prevent="handleDropFiles">
<AttachmentDragAndDrop :card-id="card.id" class="drop-upload--sidebar">
<button class="icon-upload" @click="clickAddNewAttachmment()">
{{ t('settings', 'Upload attachment') }}
</button>
@@ -38,7 +35,7 @@
:key="attachment.id"
class="attachment"
style="display: flex;">
<a class="fileicon" :style="mimetypeForAttachment(attachment)" :href="attachmentUrl(attachment)" />
<a class="fileicon" :style="mimetypeForAttachment(attachment.extendedData.mimetype)" :href="attachmentUrl(attachment)" />
<div class="details">
<a :href="attachmentUrl(attachment)" target="_blank">
<div class="filename">
@@ -61,52 +58,17 @@
</li>
</ul>
</div>
<transition name="fade" mode="out-in">
<div
v-show="isDraggingOver"
class="dragover">
<div class="drop-hint">
<div
class="drop-hint__icon"
:class="{
'icon-upload' : !isReadOnly,
'icon-error' : isReadOnly}" />
<h2
class="drop-hint__text">
{{ dropHintText }}
</h2>
</div>
</div>
</transition>
<Modal v-if="modalShow" :title="t('deck', 'File already exists')" @close="modalShow=false">
<div class="modal__content">
<h2>{{ t('deck', 'File already exists') }}</h2>
<p>
{{ t('deck', 'A file with the name {filename} already exists.', {filename: file.name}) }}
</p>
<p>
{{ t('deck', 'Do you want to overwrite it?') }}
</p>
<button class="primary" @click="overrideAttachment">
{{ t('deck', 'Overwrite file') }}
</button>
<button @click="modalShow=false">
{{ t('deck', 'Keep existing file') }}
</button>
</div>
</Modal>
</div>
</AttachmentDragAndDrop>
</template>
<script>
import { Actions, ActionButton, Modal } from '@nextcloud/vue'
import { showError } from '@nextcloud/dialogs'
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'
const maxUploadSizeState = loadState('deck', 'maxUploadSize')
export default {
@@ -114,9 +76,9 @@ export default {
components: {
Actions,
ActionButton,
Modal,
AttachmentDragAndDrop,
},
mixins: [ relativeDate ],
mixins: [ relativeDate, attachmentUpload ],
props: {
card: {
type: Object,
@@ -153,8 +115,8 @@ export default {
return (filesize) => formatFileSize(filesize)
},
mimetypeForAttachment() {
return (attachment) => {
const url = OC.MimeType.getIconUrl(attachment.extendedData.mimetype)
return (mimetype) => {
const url = OC.MimeType.getIconUrl(mimetype)
const styles = {
'background-image': `url("${url}")`,
}
@@ -164,6 +126,9 @@ export default {
attachmentUrl() {
return (attachment) => OC.generateUrl(`/apps/deck/cards/${attachment.cardId}/attachment/${attachment.id}`)
},
cardId() {
return this.card.id
},
},
created: function() {
this.$store.dispatch('fetchAttachments', this.card.id)
@@ -190,102 +155,18 @@ export default {
clickAddNewAttachmment() {
this.$refs.localAttachments.click()
},
async onLocalAttachmentSelected(file) {
if (this.maxUploadSize > 0 && file.size > this.maxUploadSize) {
showError(
t('deck', `Failed to upload {name}`, { name: file.name }) + ' - '
+ t('deck', 'Maximum file size of {size} exceeded', { size: formatFileSize(this.maxUploadSize) })
)
event.target.value = ''
return
}
const bodyFormData = new FormData()
bodyFormData.append('cardId', this.card.id)
bodyFormData.append('type', 'deck_file')
bodyFormData.append('file', file)
try {
await this.$store.dispatch('createAttachment', { cardId: this.card.id, formData: bodyFormData })
} catch (err) {
if (err.response.data.status === 409) {
this.overwriteAttachment = err.response.data.data
this.modalShow = true
} else {
showError(err.response.data.message)
}
}
},
deleteAttachment(attachment) {
this.$store.dispatch('deleteAttachment', attachment)
},
restoreAttachment(attachment) {
this.$store.dispatch('restoreAttachment', attachment)
},
overrideAttachment() {
const bodyFormData = new FormData()
bodyFormData.append('cardId', this.card.id)
bodyFormData.append('type', 'deck_file')
bodyFormData.append('file', this.file)
this.$store.dispatch('updateAttachment', {
cardId: this.card.id,
attachmentId: this.overwriteAttachment.id,
formData: bodyFormData,
})
this.modalShow = false
},
},
}
</script>
<style scoped lang="scss">
.attachments-drag-zone {
flex-grow: 1;
}
.dragover {
position: absolute;
top: 20%;
left: 10%;
width: 80%;
height: 60%;
background: var(--color-primary-light);
z-index: 11;
display: flex;
box-shadow: 0px 0px 36px var(--color-box-shadow);
border-radius: var(--border-radius);
opacity: .9;
}
.drop-hint {
margin: auto;
&__icon {
background-size: 48px;
height: 48px;
margin-bottom: 16px;
}
}
.fade {
&-enter {
opacity: 0;
}
&-enter-to {
opacity: .9;
}
&-leave {
opacity: .9;
}
&-leave-to {
opacity: 0;
}
&-enter-active,
&-leave-active {
transition: opacity 150ms ease-in-out;
}
}
.icon-upload {
padding-left: 35px;
background-position: 10px center;

5
src/components/cards/CardItem.vue
View File

@@ -25,6 +25,7 @@
-->
<template>
<AttachmentDragAndDrop :card-id="id" class="drop-upload--card">
<div :class="{'compact': compactMode, 'current-card': currentCard, 'has-labels': card.labels && card.labels.length > 0, 'is-editing': editing}"
tag="div"
class="card"
@@ -94,6 +95,7 @@
<CardBadges :id="id" />
</div>
</div>
</AttachmentDragAndDrop>
</template>
<script>
@@ -105,10 +107,11 @@ import axios from '@nextcloud/axios'
import CardBadges from './CardBadges'
import Color from '../../mixins/color'
import labelStyle from '../../mixins/labelStyle'
import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
export default {
name: 'CardItem',
components: { Modal, CardBadges, Actions, ActionButton, Multiselect },
components: { Modal, CardBadges, Actions, ActionButton, Multiselect, AttachmentDragAndDrop },
directives: {
ClickOutside,
},

68
src/mixins/attachmentUpload.js Normal file
View File

@@ -0,0 +1,68 @@
/*
* @copyright Copyright (c) 2020 Jakob Röhrl <jakob.roehrl@web.de>
*
* @author Jakob Röhrl <jakob.roehrl@web.de>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
import { showError } from '@nextcloud/dialogs'
import { formatFileSize } from '@nextcloud/files'
export default {
methods: {
async onLocalAttachmentSelected(file) {
if (this.maxUploadSize > 0 && file.size > this.maxUploadSize) {
showError(
t('deck', `Failed to upload {name}`, { name: file.name }) + ' - '
+ t('deck', 'Maximum file size of {size} exceeded', { size: formatFileSize(this.maxUploadSize) })
)
event.target.value = ''
return
}
const bodyFormData = new FormData()
bodyFormData.append('cardId', this.cardId)
bodyFormData.append('type', 'deck_file')
bodyFormData.append('file', file)
try {
await this.$store.dispatch('createAttachment', { cardId: this.cardId, formData: bodyFormData })
} catch (err) {
if (err.response.data.status === 409) {
this.overwriteAttachment = err.response.data.data
this.modalShow = true
} else {
showError(err.response.data.message)
}
}
},
overrideAttachment() {
const bodyFormData = new FormData()
bodyFormData.append('cardId', this.cardId)
bodyFormData.append('type', 'deck_file')
bodyFormData.append('file', this.file)
this.$store.dispatch('updateAttachment', {
cardId: this.cardId,
attachmentId: this.overwriteAttachment.id,
formData: bodyFormData,
})
this.modalShow = false
},
},
}

6
src/store/card.js
View File

@@ -143,15 +143,13 @@ export default {
cardIncreaseAttachmentCount(state, cardId) {
const existingIndex = state.cards.findIndex(_card => _card.id === cardId)
if (existingIndex !== -1) {
const existingCard = state.cards.find(_card => _card.id === cardId)
Vue.set(state.cards, existingCard.attachmentCount, existingCard.attachmentCount++)
Vue.set(state.cards[existingIndex], 'attachmentCount', state.cards[existingIndex].attachmentCount + 1)
}
},
cardDecreaseAttachmentCount(state, cardId) {
const existingIndex = state.cards.findIndex(_card => _card.id === cardId)
if (existingIndex !== -1) {
const existingCard = state.cards.find(_card => _card.id === cardId)
Vue.set(state.cards, existingCard.attachmentCount, existingCard.attachmentCount--)
Vue.set(state.cards[existingIndex], 'attachmentCount', state.cards[existingIndex].attachmentCount - 1)
}
},
},