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

Merge pull request #5280 from nextcloud/bugfix/multiple

Browse Source
This commit is contained in:
Julius Härtl
2023-11-13 15:16:52 +01:00
committed by GitHub
parent 05020b08b8 29d5913e8b
commit 3ef2bcee3b
13 changed files with 307 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/Dashboard/DeckWidgetToday.php
View File

@@ -80,6 +80,6 @@ class DeckWidgetToday implements IWidget {
* @inheritDoc
*/
public function load(): void {
\OCP\Util::addScript('deck', 'dashboard');
\OCP\Util::addScript('deck', 'deck-dashboard');
}
}

2
lib/Dashboard/DeckWidgetTomorrow.php
View File

@@ -80,6 +80,6 @@ class DeckWidgetTomorrow implements IWidget {
* @inheritDoc
*/
public function load(): void {
\OCP\Util::addScript('deck', 'dashboard');
\OCP\Util::addScript('deck', 'deck-dashboard');
}
}

6
src/App.vue
View File

@@ -194,4 +194,10 @@ export default {
width: 100%;
}
.modal__card {
height: 100vh;
max-height: calc(100vh - 120px);
overflow: auto;
}
</style>

5
src/components/ActivityEntry.vue
View File

@@ -25,7 +25,7 @@
<div class="activity--header">
<img :src="activity.icon" class="activity--icon">
<NcRichText class="activity--subject" :text="message.subject" :arguments="message.parameters" />
<div class="activity--timestamp">
<div class="activity--timestamp" :title="formatReadableDate(activity.datetime)">
{{ relativeDate(activity.datetime) }}
</div>
</div>
@@ -39,6 +39,7 @@ import { NcRichText, NcUserBubble } from '@nextcloud/vue'
import moment from '@nextcloud/moment'
import DOMPurify from 'dompurify'
import relativeDate from '../mixins/relativeDate.js'
import formatReadableDate from '../mixins/readableDate.js'
const InternalLink = {
name: 'InternalLink',
@@ -62,7 +63,7 @@ export default {
components: {
NcRichText,
},
mixins: [relativeDate],
mixins: [relativeDate, formatReadableDate],
props: {
activity: {
type: Object,

17
src/components/ActivityList.vue
View File

@@ -84,7 +84,20 @@ export default {
params.append('object_id', '' + this.objectId)
params.append('limit', ACTIVITY_FETCH_LIMIT)
const response = await axios.get(generateOcsUrl(`apps/activity/api/v2/activity/${this.filter}`) + '?' + params)
const response = await axios.get(
generateOcsUrl(`apps/activity/api/v2/activity/${this.filter}`) + '?' + params,
{
validateStatus: (status) => {
return (status >= 200 && status < 300) || status === 304
},
},
)
if (response.status === 304) {
this.endReached = true
return []
}
let activities = response.data.ocs.data
if (this.filter === 'deck') {
// We need to manually filter activities here, since currently we use two different types and there is no way
@@ -95,7 +108,7 @@ export default {
})
}
this.activities.push(...activities)
if (response.data.ocs.meta.statuscode === 304 || activities.length === 0) {
if (activities.length === 0) {
this.endReached = true
return []
}

2
src/components/board/Stack.vue
View File

@@ -217,7 +217,7 @@ export default {
})
},
dragHandleSelector() {
return this.canEdit ? null : '.no-drag'
return this.canEdit && !this.showArchived ? null : '.no-drag'
},
cardDetailsInModal: {
get() {

2
src/components/board/TagsTabSidebar.vue
View File

@@ -130,7 +130,7 @@ export default {
return true
},
labelsSorted() {
return [...this.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
return [...this.labels].sort((a, b) => a.title.localeCompare(b.title))
},
},

12
src/components/card/CardSidebar.vue
View File

@@ -39,13 +39,7 @@
{{ t('deck', 'Open in bigger view') }}
</NcActionButton>
<NcActionButton v-for="action in cardActions"
:key="action.label"
:close-after-click="true"
:icon="action.icon"
@click="action.callback(cardRichObject)">
{{ action.label }}
</NcActionButton>
<CardMenuEntries :card="currentCard" :hide-details-entry="true" />
</template>
<NcAppSidebarTab id="details"
@@ -104,6 +98,7 @@ import ActivityIcon from 'vue-material-design-icons/LightningBolt.vue'
import { showError } from '@nextcloud/dialogs'
import { getLocale } from '@nextcloud/l10n'
import CardMenuEntries from '../cards/CardMenuEntries.vue'
const capabilities = window.OC.getCapabilities()
@@ -121,6 +116,7 @@ export default {
AttachmentIcon,
CommentIcon,
HomeIcon,
CardMenuEntries,
},
mixins: [relativeDate],
props: {
@@ -239,7 +235,7 @@ section.app-sidebar__tab--active {
right: 0;
max-width: calc(100% - #{$modal-padding * 2});
padding: 0 14px;
max-height: 100%;
height: auto;
overflow: initial;
user-select: text;
-webkit-user-select: text;

6
src/components/card/CardSidebarTabDetails.vue
View File

@@ -119,8 +119,10 @@ export default {
this.initialize()
},
methods: {
descriptionChanged(newDesc) {
this.$store.dispatch('updateCardDesc', { ...this.card, description: newDesc })
async descriptionChanged(newDesc) {
if (newDesc === this.copiedCard.description) {
return
}
this.copiedCard.description = newDesc
},
async initialize() {

20
src/components/card/Description.vue
View File

@@ -187,17 +187,26 @@ export default {
mounted() {
this.setupEditor()
},
beforeDestroy() {
this?.editor?.destroy()
async beforeDestroy() {
await this.destroyEditor()
},
methods: {
async setupEditor() {
this?.editor?.destroy()
await this.destroyEditor()
this.descriptionLastEdit = 0
this.description = this.card.description
this.editor = await window.OCA.Text.createEditor({
el: this.$refs.editor,
content: this.card.description,
readOnly: !this.canEdit,
onLoaded: () => {
this.descriptionLastEdit = 0
},
onUpdate: ({ markdown }) => {
if (this.description === markdown) {
this.descriptionLastEdit = 0
return
}
this.description = markdown
this.updateDescription()
},
@@ -207,6 +216,10 @@ export default {
})
},
async destroyEditor() {
await this.saveDescription()
this?.editor?.destroy()
},
addKeyListeners() {
this.$refs.markdownEditor.easymde.codemirror.on('keydown', (a, b) => {
if (this.keyExitState === 0 && (b.key === 'Meta' || b.key === 'Alt')) {
@@ -287,6 +300,7 @@ export default {
return
}
this.descriptionSaving = true
await this.$store.dispatch('updateCardDesc', { ...this.card, description: this.description })
this.$emit('change', this.description)
this.descriptionLastEdit = 0
this.descriptionSaving = false

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

@@ -44,9 +44,8 @@
tabindex="0"
class="editable"
:aria-label="t('deck', 'Edit card title')"
@click.stop="startEditing(card)"
@keydown.enter.stop.prevent="startEditing(card)">
{{ card.title }}
<span @click.stop="startEditing(card)">{{ card.title }}</span>
</h3>
<form v-else-if="editing"
v-click-outside="cancelEdit"
@@ -299,7 +298,9 @@ export default {
padding-left: 4px;
align-self: center;
&.editable {
cursor: text;
span {
cursor: text;
}
&:focus {
outline: 2px solid var(--color-border-dark);

196
src/components/cards/CardMenu.vue
View File

@@ -21,206 +21,24 @@
-->
<template>
<div v-if="card" class="card-menu">
<div @click.stop.prevent>
<NcActions>
<NcActionButton v-if="showArchived === false && !isCurrentUserAssigned"
icon="icon-user"
:close-after-click="true"
@click="assignCardToMe()">
{{ t('deck', 'Assign to me') }}
</NcActionButton>
<NcActionButton v-if="showArchived === false && isCurrentUserAssigned"
icon="icon-user"
:close-after-click="true"
@click="unassignCardFromMe()">
{{ t('deck', 'Unassign myself') }}
</NcActionButton>
<NcActionButton icon="icon-checkmark" :close-after-click="true" @click="changeCardDoneStatus()">
{{ card.done ? t('deck', 'Mark as not done') : t('deck', 'Mark as done') }}
</NcActionButton>
<NcActionButton icon="icon-external" :close-after-click="true" @click="modalShow=true">
{{ t('deck', 'Move card') }}
</NcActionButton>
<NcActionButton icon="icon-settings-dark" :close-after-click="true" @click="openCard">
<CardBulletedIcon slot="icon" :size="20" decorative />
{{ t('deck', 'Card details') }}
</NcActionButton>
<NcActionButton :close-after-click="true" @click="archiveUnarchiveCard()">
<template #icon>
<ArchiveIcon :size="20" decorative />
</template>
{{ card.archived ? t('deck', 'Unarchive card') : t('deck', 'Archive card') }}
</NcActionButton>
<NcActionButton v-if="showArchived === false"
icon="icon-delete"
:close-after-click="true"
@click="deleteCard()">
{{ t('deck', 'Delete card') }}
</NcActionButton>
</NcActions>
</div>
<NcModal v-if="modalShow" :title="t('deck', 'Move card to another board')" @close="modalShow=false">
<div class="modal__content">
<h3>{{ t('deck', 'Move card to another board') }}</h3>
<NcMultiselect v-model="selectedBoard"
:placeholder="t('deck', 'Select a board')"
:options="activeBoards"
:max-height="100"
label="title"
@select="loadStacksFromBoard" />
<NcMultiselect v-model="selectedStack"
:placeholder="t('deck', 'Select a list')"
:options="stacksFromBoard"
:max-height="100"
label="title">
<span slot="noOptions">
{{ t('deck', 'List is empty') }}
</span>
</NcMultiselect>
<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
{{ t('deck', 'Move card') }}
</button>
<button @click="modalShow=false">
{{ t('deck', 'Cancel') }}
</button>
</div>
</NcModal>
<div v-if="card" class="card-menu" @click.stop.prevent>
<NcActions>
<CardMenuEntries :card="card" />
</NcActions>
</div>
</template>
<script>
import { NcModal, NcActions, NcActionButton, NcMultiselect } from '@nextcloud/vue'
import { mapGetters, mapState } from 'vuex'
import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
import CardBulletedIcon from 'vue-material-design-icons/CardBulleted.vue'
import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
import { getCurrentUser } from '@nextcloud/auth'
import { showUndo } from '@nextcloud/dialogs'
import '@nextcloud/dialogs/dist/index.css'
import { NcActions } from '@nextcloud/vue'
import CardMenuEntries from './CardMenuEntries.vue'
export default {
name: 'CardMenu',
components: { NcActions, NcActionButton, NcModal, NcMultiselect, ArchiveIcon, CardBulletedIcon },
components: { NcActions, CardMenuEntries },
props: {
card: {
type: Object,
default: null,
},
},
data() {
return {
modalShow: false,
selectedBoard: '',
selectedStack: '',
stacksFromBoard: [],
}
},
computed: {
...mapGetters([
'isArchived',
'boards',
]),
...mapState({
showArchived: state => state.showArchived,
currentBoard: state => state.currentBoard,
}),
canEdit() {
if (this.currentBoard) {
return this.$store.getters.canEdit
}
const board = this.$store.getters.boards.find((item) => item.id === this.card.boardId)
return !!board?.permissions?.PERMISSION_EDIT
},
isBoardAndStackChoosen() {
if (this.selectedBoard === '' || this.selectedStack === '') {
return false
}
return true
},
isCurrentUserAssigned() {
return this.card.assignedUsers.find((item) => item.type === 0 && item.participant.uid === getCurrentUser()?.uid)
},
activeBoards() {
return this.$store.getters.boards.filter((item) => item.deletedAt === 0 && item.archived === false)
},
boardId() {
return this.card?.boardId ? this.card.boardId : this.$route.params.id
},
},
methods: {
openCard() {
const boardId = this.card?.boardId ? this.card.boardId : this.$route.params.id
this.$router.push({ name: 'card', params: { id: boardId, cardId: this.card.id } }).catch(() => {})
},
deleteCard() {
this.$store.dispatch('deleteCard', this.card)
showUndo(t('deck', 'Card deleted'), () => this.$store.dispatch('cardUndoDelete', this.card))
},
changeCardDoneStatus() {
this.$store.dispatch('changeCardDoneStatus', { ...this.card, done: !this.card.done })
},
archiveUnarchiveCard() {
this.$store.dispatch('archiveUnarchiveCard', { ...this.card, archived: !this.card.archived })
},
assignCardToMe() {
this.$store.dispatch('assignCardToUser', {
card: this.card,
assignee: {
userId: getCurrentUser()?.uid,
type: 0,
},
})
},
unassignCardFromMe() {
this.$store.dispatch('removeUserFromCard', {
card: this.card,
assignee: {
userId: getCurrentUser()?.uid,
type: 0,
},
})
},
async moveCard() {
this.copiedCard = Object.assign({}, this.card)
this.copiedCard.stackId = this.selectedStack.id
this.$store.dispatch('moveCard', this.copiedCard)
if (parseInt(this.boardId) === parseInt(this.selectedStack.boardId)) {
await this.$store.commit('addNewCard', { ...this.copiedCard })
}
this.modalShow = false
},
async loadStacksFromBoard(board) {
try {
const url = generateUrl('/apps/deck/stacks/' + board.id)
const response = await axios.get(url)
this.stacksFromBoard = response.data
} catch (err) {
return err
}
},
},
}
</script>
<style lang="scss" scoped>
.modal__content {
width: 25vw;
min-width: 250px;
min-height: 120px;
text-align: center;
margin: 20px 20px 100px 20px;
.multiselect {
margin-bottom: 10px;
}
}
.modal__content button {
float: right;
margin-top: 50px;
}
</style>

243
src/components/cards/CardMenuEntries.vue Normal file
View File

@@ -0,0 +1,243 @@
<!--
- @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
-
- @author Julius Härtl <jus@bitgrid.net>
-
- @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>
<NcActionButton v-if="!hideDetailsEntry" :close-after-click="true" @click="openCard">
<CardBulletedIcon slot="icon" :size="20" decorative />
{{ t('deck', 'Card details') }}
</NcActionButton>
<NcActionButton v-if="canEdit && !isCurrentUserAssigned"
icon="icon-user"
:close-after-click="true"
@click="assignCardToMe()">
{{ t('deck', 'Assign to me') }}
</NcActionButton>
<NcActionButton v-if="canEdit && isCurrentUserAssigned"
icon="icon-user"
:close-after-click="true"
@click="unassignCardFromMe()">
{{ t('deck', 'Unassign myself') }}
</NcActionButton>
<NcActionButton v-if="canEdit"
icon="icon-checkmark"
:close-after-click="true"
@click="changeCardDoneStatus()">
{{ card.done ? t('deck', 'Mark as not done') : t('deck', 'Mark as done') }}
</NcActionButton>
<NcActionButton v-if="canEdit"
icon="icon-external"
:close-after-click="true"
@click="modalShow=true">
{{ t('deck', 'Move card') }}
</NcActionButton>
<NcActionButton v-for="action in cardActions"
:key="action.label"
:close-after-click="true"
:icon="action.icon"
@click="action.callback(cardRichObject)">
{{ action.label }}
</NcActionButton>
<NcActionButton v-if="canEditBoard" :close-after-click="true" @click="archiveUnarchiveCard()">
<template #icon>
<ArchiveIcon :size="20" decorative />
</template>
{{ card.archived ? t('deck', 'Unarchive card') : t('deck', 'Archive card') }}
</NcActionButton>
<NcActionButton v-if="canEdit"
icon="icon-delete"
:close-after-click="true"
@click="deleteCard()">
{{ t('deck', 'Delete card') }}
</NcActionButton>
<NcModal v-if="modalShow" :title="t('deck', 'Move card to another board')" @close="modalShow=false">
<div class="modal__content">
<h3>{{ t('deck', 'Move card to another board') }}</h3>
<NcMultiselect v-model="selectedBoard"
:placeholder="t('deck', 'Select a board')"
:options="activeBoards"
:max-height="100"
label="title"
@select="loadStacksFromBoard" />
<NcMultiselect v-model="selectedStack"
:placeholder="t('deck', 'Select a list')"
:options="stacksFromBoard"
:max-height="100"
label="title">
<span slot="noOptions">
{{ t('deck', 'List is empty') }}
</span>
</NcMultiselect>
<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
{{ t('deck', 'Move card') }}
</button>
<button @click="modalShow=false">
{{ t('deck', 'Cancel') }}
</button>
</div>
</NcModal>
</div>
</template>
<script>
import { NcModal, NcActionButton, NcMultiselect } from '@nextcloud/vue'
import { mapGetters, mapState } from 'vuex'
import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
import CardBulletedIcon from 'vue-material-design-icons/CardBulleted.vue'
import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
import { getCurrentUser } from '@nextcloud/auth'
import { showUndo } from '@nextcloud/dialogs'
import '@nextcloud/dialogs/dist/index.css'
export default {
name: 'CardMenuEntries',
components: { NcActionButton, NcModal, NcMultiselect, ArchiveIcon, CardBulletedIcon },
props: {
card: {
type: Object,
default: null,
},
hideDetailsEntry: {
type: Boolean,
default: false,
},
},
data() {
return {
modalShow: false,
selectedBoard: '',
selectedStack: '',
stacksFromBoard: [],
}
},
computed: {
...mapGetters([
'isArchived',
'boards',
'cardActions',
]),
...mapState({
showArchived: state => state.showArchived,
currentBoard: state => state.currentBoard,
}),
canEdit() {
return !this.card.archived
},
canEditBoard() {
if (this.currentBoard) {
return this.$store.getters.canEdit
}
const board = this.$store.getters.boards.find((item) => item.id === this.card.boardId)
return !!board?.permissions?.PERMISSION_EDIT
},
isBoardAndStackChoosen() {
if (this.selectedBoard === '' || this.selectedStack === '') {
return false
}
return true
},
isCurrentUserAssigned() {
return this.card.assignedUsers.find((item) => item.type === 0 && item.participant.uid === getCurrentUser()?.uid)
},
activeBoards() {
return this.$store.getters.boards.filter((item) => item.deletedAt === 0 && item.archived === false)
},
boardId() {
return this.card?.boardId ? this.card.boardId : this.$route.params.id
},
},
methods: {
openCard() {
const boardId = this.card?.boardId ? this.card.boardId : this.$route.params.id
this.$router.push({ name: 'card', params: { id: boardId, cardId: this.card.id } }).catch(() => {})
},
deleteCard() {
this.$store.dispatch('deleteCard', this.card)
showUndo(t('deck', 'Card deleted'), () => this.$store.dispatch('cardUndoDelete', this.card))
},
changeCardDoneStatus() {
this.$store.dispatch('changeCardDoneStatus', { ...this.card, done: !this.card.done })
},
archiveUnarchiveCard() {
this.$store.dispatch('archiveUnarchiveCard', { ...this.card, archived: !this.card.archived })
},
assignCardToMe() {
this.$store.dispatch('assignCardToUser', {
card: this.card,
assignee: {
userId: getCurrentUser()?.uid,
type: 0,
},
})
},
unassignCardFromMe() {
this.$store.dispatch('removeUserFromCard', {
card: this.card,
assignee: {
userId: getCurrentUser()?.uid,
type: 0,
},
})
},
async moveCard() {
this.copiedCard = Object.assign({}, this.card)
this.copiedCard.stackId = this.selectedStack.id
this.$store.dispatch('moveCard', this.copiedCard)
if (parseInt(this.boardId) === parseInt(this.selectedStack.boardId)) {
await this.$store.commit('addNewCard', { ...this.copiedCard })
}
this.modalShow = false
},
async loadStacksFromBoard(board) {
try {
const url = generateUrl('/apps/deck/stacks/' + board.id)
const response = await axios.get(url)
this.stacksFromBoard = response.data
} catch (err) {
return err
}
},
},
}
</script>
<style lang="scss" scoped>
.modal__content {
width: 25vw;
min-width: 250px;
min-height: 120px;
text-align: center;
margin: 20px 20px 100px 20px;
.multiselect {
margin-bottom: 10px;
}
}
.modal__content button {
float: right;
margin-top: 50px;
}
</style>