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

new mixin and component

Browse Source 
Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>
This commit is contained in:
Jakob Röhrl
2020-03-17 11:11:27 +01:00
committed by Julius Härtl
parent 6d6f8aaa7a
commit 67083b8fce
5 changed files with 340 additions and 153 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"

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

@@ -0,0 +1,188 @@
<!--
- @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;
}
.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;
}
.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>

92
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">
<button class="icon-upload" @click="clickAddNewAttachmment()">
{{ t('settings', 'Upload attachment') }}
</button>
@@ -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,
@@ -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,50 +155,13 @@ 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>

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

@@ -25,75 +25,77 @@
-->
<template>
<div :class="{'compact': compactMode, 'current-card': currentCard, 'has-labels': card.labels && card.labels.length > 0, 'is-editing': editing}"
tag="div"
class="card"
@click="openCard">
<div class="card-upper">
<h3 v-if="showArchived || !canEdit">
{{ card.title }}
</h3>
<h3 v-else-if="!editing">
<span @click.stop="startEditing(card)">{{ card.title }}</span>
</h3>
<AttachmentDragAndDrop :card-id="id">
<div :class="{'compact': compactMode, 'current-card': currentCard, 'has-labels': card.labels && card.labels.length > 0, 'is-editing': editing}"
tag="div"
class="card"
@click="openCard">
<div class="card-upper">
<h3 v-if="showArchived || !canEdit">
{{ card.title }}
</h3>
<h3 v-else-if="!editing">
<span @click.stop="startEditing(card)">{{ card.title }}</span>
</h3>
<form v-if="editing"
v-click-outside="cancelEdit"
class="dragDisabled"
@keyup.esc="cancelEdit"
@submit.prevent="finishedEdit(card)">
<input v-model="copiedCard.title" type="text" autofocus>
<input type="button" class="icon-confirm" @click="finishedEdit(card)">
</form>
<form v-if="editing"
v-click-outside="cancelEdit"
class="dragDisabled"
@keyup.esc="cancelEdit"
@submit.prevent="finishedEdit(card)">
<input v-model="copiedCard.title" type="text" autofocus>
<input type="button" class="icon-confirm" @click="finishedEdit(card)">
</form>
<Actions v-if="canEdit && !editing" @click.stop.prevent>
<ActionButton v-if="showArchived === false" icon="icon-user" @click="assignCardToMe()">
{{ t('deck', 'Assign to me') }}
</ActionButton>
<ActionButton icon="icon-archive" @click="archiveUnarchiveCard()">
{{ t('deck', (showArchived ? 'Unarchive card' : 'Archive card')) }}
</ActionButton>
<ActionButton v-if="showArchived === false" icon="icon-delete" @click="deleteCard()">
{{ t('deck', 'Delete card') }}
</ActionButton>
<ActionButton icon="icon-external" @click.stop="modalShow=true">
{{ t('deck', 'Move card') }}
</ActionButton>
<ActionButton icon="icon-settings-dark" @click="openCard">
{{ t('deck', 'Card details') }}
</ActionButton>
</Actions>
<Modal v-if="modalShow" title="Move card to another board" @close="modalShow=false">
<div class="modal__content">
<Multiselect v-model="selectedBoard"
:placeholder="t('deck', 'Select a board')"
:options="boards"
label="title"
@select="loadStacksFromBoard" />
<Multiselect v-model="selectedStack"
:placeholder="t('deck', 'Select a stack')"
:options="stacksFromBoard"
label="title" />
<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
<Actions v-if="canEdit && !editing" @click.stop.prevent>
<ActionButton v-if="showArchived === false" icon="icon-user" @click="assignCardToMe()">
{{ t('deck', 'Assign to me') }}
</ActionButton>
<ActionButton icon="icon-archive" @click="archiveUnarchiveCard()">
{{ t('deck', (showArchived ? 'Unarchive card' : 'Archive card')) }}
</ActionButton>
<ActionButton v-if="showArchived === false" icon="icon-delete" @click="deleteCard()">
{{ t('deck', 'Delete card') }}
</ActionButton>
<ActionButton icon="icon-external" @click.stop="modalShow=true">
{{ t('deck', 'Move card') }}
</button>
<button @click="modalShow=false">
{{ t('deck', 'Cancel') }}
</button>
</div>
</Modal>
</ActionButton>
<ActionButton icon="icon-settings-dark" @click="openCard">
{{ t('deck', 'Card details') }}
</ActionButton>
</Actions>
<Modal v-if="modalShow" title="Move card to another board" @close="modalShow=false">
<div class="modal__content">
<Multiselect v-model="selectedBoard"
:placeholder="t('deck', 'Select a board')"
:options="boards"
label="title"
@select="loadStacksFromBoard" />
<Multiselect v-model="selectedStack"
:placeholder="t('deck', 'Select a stack')"
:options="stacksFromBoard"
label="title" />
<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
{{ t('deck', 'Move card') }}
</button>
<button @click="modalShow=false">
{{ t('deck', 'Cancel') }}
</button>
</div>
</Modal>
</div>
<ul v-if="card.labels && card.labels.length > 0" class="labels" @click="openCard">
<li v-for="label in card.labels" :key="label.id" :style="labelStyle(label)">
<span>{{ label.title }}</span>
</li>
</ul>
<div v-show="!compactMode" class="card-controls compact-item" @click="openCard">
<CardBadges :id="id" />
</div>
</div>
<ul v-if="card.labels && card.labels.length > 0" class="labels" @click="openCard">
<li v-for="label in card.labels" :key="label.id" :style="labelStyle(label)">
<span>{{ label.title }}</span>
</li>
</ul>
<div v-show="!compactMode" class="card-controls compact-item" @click="openCard">
<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
},
},
}