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

Merge branch 'master' into bugfix/1806

Browse Source
This commit is contained in:
Jakob
2020-05-15 14:10:48 +02:00
committed by GitHub
parent a0a04e6fd9 c88ad6e968
commit dce455f95d
33 changed files with 709 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Controls.vue
View File

@@ -54,14 +54,14 @@
</div>
<div class="board-action-buttons">
<Popover>
<Actions slot="trigger" :style="filterOpacity" :title="t('deck', 'Apply filter')">
<ActionButton icon="icon-filter" />
<Actions slot="trigger" :title="t('deck', 'Apply filter')">
<ActionButton v-if="isFilterActive" icon="icon-filter_set" />
<ActionButton v-else icon="icon-filter" />
</Actions>
<template>
<div class="filter">
<h3>{{ t('deck', 'Filter by tag') }}</h3>
{{ filter }}
<div v-for="label in board.labels" :key="label.id" class="filter--item">
<input
:id="label.id"
@@ -219,11 +219,14 @@ export default {
}
return 'opacity: .5;'
},
filterOpacity() {
isFilterActive() {
if (this.filter.tags.length !== 0 || this.filter.users.length !== 0 || this.filter.due !== '') {
return 'opacity: 1;'
return true
}
return 'opacity: .5;'
return false
},
labelsSorted() {
return [...this.board.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
},
},
methods: {

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

@@ -28,7 +28,10 @@
<h3 v-if="!canManage">
{{ stack.title }}
</h3>
<h3 v-else-if="!editing" @click="startEditing(stack)">
<h3 v-else-if="!editing"
v-tooltip="stack.title"
class="stack--title"
@click="startEditing(stack)">
{{ stack.title }}
</h3>
<form v-else @submit.prevent="finishedEdit(stack)">
@@ -234,12 +237,14 @@ export default {
margin: 3px -3px;
margin-right: -10px;
margin-top: 0;
margin-bottom: 0;
margin-bottom: 3px;
background-color: var(--color-main-background-translucent);
cursor: grab;
h3, form {
flex-grow: 1;
display: flex;
cursor: inherit;
input[type=text] {
flex-grow: 1;
@@ -247,6 +252,13 @@ export default {
}
}
.stack--title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc($stack-width - 60px);
}
.stack--card-add {
position: sticky;
top: 52px;

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

@@ -1,7 +1,7 @@
<template>
<div>
<ul class="labels">
<li v-for="label in labels" :key="label.id" :class="{editing: (editingLabelId === label.id)}">
<li v-for="label in labelsSorted" :key="label.id" :class="{editing: (editingLabelId === label.id)}">
<!-- Edit Tag -->
<template v-if="editingLabelId === label.id">
<form class="label-form" @submit.prevent="updateLabel(label)">
@@ -111,6 +111,9 @@ export default {
return true
},
labelsSorted() {
return [...this.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
},
},
methods: {

5
src/components/boards/Boards.vue
View File

@@ -83,6 +83,11 @@ export default {
display: flex;
}
.board-list-row:not(.board-list-header-row):hover {
transition: background-color 0.3s ease;
background-color: var(--color-background-dark);
}
.board-list-header-row {
color: var(--color-text-lighter);
}

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

@@ -203,7 +203,9 @@ import { formatFileSize } from '@nextcloud/files'
import relativeDate from '../../mixins/relativeDate'
import AttachmentList from './AttachmentList'
const markdownIt = new MarkdownIt()
const markdownIt = new MarkdownIt({
linkify: true,
})
markdownIt.use(MarkdownItTaskLists, { enabled: true, label: true, labelAfter: true })
const capabilities = window.OC.getCapabilities()
@@ -325,7 +327,7 @@ export default {
},
},
renderedDescription() {
return markdownIt.render(this.copiedCard.description)
return markdownIt.render(this.copiedCard.description || '')
},
},
watch: {
@@ -600,15 +602,23 @@ export default {
#description-preview {
min-height: 100px;
&::v-deep {
@import "./../../css/markdown";
}
&::v-deep input {
min-height: auto;
}
&::v-deep a {
text-decoration: underline;
}
}
.modal__content {
width: 25vw;
min-width: 250px;
height: 120px;
min-height: 120px;
text-align: center;
margin: 20px 20px 60px 20px;
padding-bottom: 20px;

128
src/components/cards/CardBadges.vue
View File

@@ -34,138 +34,32 @@
<AvatarList :users="card.assignedUsers" />
<div @click.stop.prevent>
<Actions v-if="canEdit">
<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>
</div>
<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>
<CardMenu :id="id" />
</div>
</template>
<script>
import AvatarList from './AvatarList'
import { Modal, Actions, ActionButton, Multiselect } from '@nextcloud/vue'
import { mapGetters, mapState } from 'vuex'
import axios from '@nextcloud/axios'
import CardMenu from './CardMenu'
export default {
name: 'CardBadges',
components: { AvatarList, Actions, ActionButton, Modal, Multiselect },
components: { AvatarList, CardMenu },
props: {
id: {
type: Number,
default: null,
},
},
data() {
return {
modalShow: false,
selectedBoard: '',
selectedStack: '',
stacksFromBoard: [],
}
},
computed: {
...mapGetters([
'canEdit',
]),
...mapState({
showArchived: state => state.showArchived,
currentBoard: state => state.currentBoard,
}),
checkListCount() {
return (this.card.description.match(/^\s*(\*|-|(\d\.))\s+\[\s*(\s|x)\s*\](.*)$/gim) || []).length
},
checkListCheckedCount() {
return (this.card.description.match(/^\s*(\*|-|(\d\.))\s+\[\s*x\s*\](.*)$/gim) || []).length
},
compactMode() {
return false
},
card() {
return this.$store.getters.cardById(this.id)
},
isBoardAndStackChoosen() {
if (this.selectedBoard === '' || this.selectedStack === '') {
return false
}
return true
},
boards() {
return this.$store.getters.boards.filter(board => {
return board.id !== this.currentBoard.id
})
},
},
methods: {
openCard() {
this.$router.push({ name: 'card', params: { cardId: this.id } })
},
deleteCard() {
this.$store.dispatch('deleteCard', this.card)
},
archiveUnarchiveCard() {
this.$store.dispatch('archiveUnarchiveCard', { ...this.card, archived: !this.card.archived })
},
assignCardToMe() {
this.copiedCard = Object.assign({}, this.card)
this.$store.dispatch('assignCardToUser', {
card: this.copiedCard,
assignee: {
userId: OC.getCurrentUser().uid,
type: 0,
},
})
},
moveCard() {
this.copiedCard = Object.assign({}, this.card)
this.copiedCard.stackId = this.selectedStack.id
this.$store.dispatch('moveCard', this.copiedCard)
this.modalShow = false
},
async loadStacksFromBoard(board) {
try {
console.debug(board)
const url = OC.generateUrl('/apps/deck/stacks/' + board.id)
const response = await axios.get(url)
this.stacksFromBoard = response.data
} catch (err) {
return err
}
},
},
}
</script>
@@ -236,20 +130,4 @@ export default {
.fade-enter, .fade-leave-to {
opacity: 0;
}
.modal__content {
width: 25vw;
min-width: 250px;
height: 120px;
text-align: center;
margin: 20px 20px 60px 20px;
.multiselect {
margin-bottom: 10px;
}
}
.modal__content button {
float: right;
}
</style>

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

@@ -54,6 +54,8 @@
</div>
</transition>
</div>
<CardMenu v-if="!editing && compactMode" :id="id" class="right" />
</div>
<transition-group name="zoom"
tag="ul"
@@ -78,10 +80,11 @@ import CardBadges from './CardBadges'
import Color from '../../mixins/color'
import labelStyle from '../../mixins/labelStyle'
import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
import CardMenu from './CardMenu'
export default {
name: 'CardItem',
components: { CardBadges, AttachmentDragAndDrop },
components: { CardBadges, AttachmentDragAndDrop, CardMenu },
directives: {
ClickOutside,
},
@@ -137,16 +140,9 @@ export default {
return moment(this.card.duedate).format('LLLL')
},
},
watch: {
currentCard(newValue) {
if (newValue) {
this.$nextTick(() => this.$el.scrollIntoView())
}
},
},
methods: {
openCard() {
this.$router.push({ name: 'card', params: { cardId: this.id } })
this.$router.push({ name: 'card', params: { cardId: this.id } }).catch(() => {})
},
startEditing(card) {
this.copiedCard = Object.assign({}, card)
@@ -175,6 +171,10 @@ export default {
border: 1px solid var(--color-border);
}
.card:hover {
box-shadow: 0 0 5px 1px var(--color-box-shadow);
}
.card {
transition: box-shadow 0.1s ease-in-out;
box-shadow: 0 0 2px 0 var(--color-box-shadow);

171
src/components/cards/CardMenu.vue Normal file
View File

@@ -0,0 +1,171 @@
<!--
- @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>
<div @click.stop.prevent>
<Actions v-if="canEdit">
<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>
</div>
<Modal 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>
<Multiselect v-model="selectedBoard"
:placeholder="t('deck', 'Select a board')"
:options="boards"
:max-height="100"
label="title"
@select="loadStacksFromBoard" />
<Multiselect v-model="selectedStack"
:placeholder="t('deck', 'Select a stack')"
:options="stacksFromBoard"
:max-height="100"
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>
</template>
<script>
import { Modal, Actions, ActionButton, Multiselect } from '@nextcloud/vue'
import { mapGetters, mapState } from 'vuex'
import axios from '@nextcloud/axios'
export default {
name: 'CardMenu',
components: { Actions, ActionButton, Modal, Multiselect },
props: {
id: {
type: Number,
default: null,
},
},
data() {
return {
modalShow: false,
selectedBoard: '',
selectedStack: '',
stacksFromBoard: [],
}
},
computed: {
...mapGetters([
'canEdit',
]),
...mapState({
showArchived: state => state.showArchived,
currentBoard: state => state.currentBoard,
}),
card() {
return this.$store.getters.cardById(this.id)
},
isBoardAndStackChoosen() {
if (this.selectedBoard === '' || this.selectedStack === '') {
return false
}
return true
},
boards() {
return this.$store.getters.boards.filter(board => {
return board.id !== this.currentBoard.id
})
},
},
methods: {
openCard() {
this.$router.push({ name: 'card', params: { cardId: this.id } })
},
deleteCard() {
this.$store.dispatch('deleteCard', this.card)
},
archiveUnarchiveCard() {
this.$store.dispatch('archiveUnarchiveCard', { ...this.card, archived: !this.card.archived })
},
assignCardToMe() {
this.copiedCard = Object.assign({}, this.card)
this.$store.dispatch('assignCardToUser', {
card: this.copiedCard,
assignee: {
userId: OC.getCurrentUser().uid,
type: 0,
},
})
},
moveCard() {
this.copiedCard = Object.assign({}, this.card)
this.copiedCard.stackId = this.selectedStack.id
this.$store.dispatch('moveCard', this.copiedCard)
this.modalShow = false
},
async loadStacksFromBoard(board) {
try {
const url = OC.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>

39
src/components/navigation/AppNavigationBoard.vue
View File

@@ -149,26 +149,27 @@ export default {
text: t('deck', 'Edit board'),
})
}
actions.push({
action: async() => {
this.hideMenu()
this.loading = true
try {
const newBoard = await this.$store.dispatch('cloneBoard', this.board)
this.loading = false
const route = this.routeTo
route.params.id = newBoard.id
this.$router.push(route)
} catch (e) {
OC.Notification.showTemporary(t('deck', 'An error occurred'))
console.error(e)
}
},
icon: 'icon-clone',
text: t('deck', 'Clone board'),
})
if (canManage) {
actions.push({
action: async() => {
this.hideMenu()
this.loading = true
try {
const newBoard = await this.$store.dispatch('cloneBoard', this.board)
this.loading = false
const route = this.routeTo
route.params.id = newBoard.id
this.$router.push(route)
} catch (e) {
OC.Notification.showTemporary(t('deck', 'An error occurred'))
console.error(e)
}
},
icon: 'icon-clone',
text: t('deck', 'Clone board'),
})
if (!this.board.archived) {
actions.push({
action: () => {

5
src/components/navigation/AppNavigationBoardCategory.vue
View File

@@ -29,7 +29,7 @@
{{ text }}
</a>
<ul v-if="boards.length > 0">
<AppNavigationBoard v-for="board in boards" :key="board.id" :board="board" />
<AppNavigationBoard v-for="board in boardsSorted" :key="board.id" :board="board" />
</ul>
</li>
</template>
@@ -78,6 +78,9 @@ export default {
}
},
computed: {
boardsSorted() {
return [...this.boards].sort((a, b) => (a.title < b.title) ? -1 : 1)
},
collapsible() {
return this.boards.length > 0
},