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

Merge branch 'vue' of https://github.com/nextcloud/deck into vue

Browse Source
This commit is contained in:
Michael Weimann
2018-12-29 12:08:03 +01:00
parent d60ff00eec d2f78714a6
commit 1edb403c9a
14 changed files with 750 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Controls.vue
View File

@@ -35,6 +35,9 @@
<a href="#todo">{{ board.title }}</a>
<span style="display: inline;" class="icon-shared" />
</div>
<div class="board-actions">
<router-link :to="{name: 'board.details'}" v-tooltip="t('deck', 'Board settings')" class="icon-settings" tag="button"></router-link>
</div>
</div>
</template>
@@ -52,6 +55,9 @@ export default {
methods: {
toggleNav() {
this.$store.dispatch('toggleNav')
},
toggleSidebar: function() {
this.$store.dispatch('toggleSidebar')
}
}
}
@@ -67,4 +73,14 @@ export default {
position: static;
}
.board-actions {
flex-grow: 1;
order: 100;
display: flex;
justify-content: flex-end;
}
button.icon-settings {
width: 44px;
}
</style>

53
src/components/Sidebar.vue Normal file
View File

@@ -0,0 +1,53 @@
<!--
- @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 id="app-sidebar">
<span class="icon-close" title="Close" @click="closeSidebar">
<span class="hidden-visually">Close</span>
</span>
<router-view name="sidebar"></router-view>
</div>
</template>
<script>
export default {
name: 'Sidebar',
methods: {
closeSidebar() {
this.$router.push({ name: 'board' })
}
}
}
</script>
<style lang="scss" scoped>
.icon-close {
top: 0;
width: 44px;
height: 44px;
display: inline-block;
position: absolute;
right: 0;
}
</style>

100
src/components/board/Board.vue
View File

@@ -24,21 +24,68 @@
<div>
<Controls :board="board" />
<div v-if="board">
board {{ board.title }}<br>
<button @click="toggleSidebar">toggle sidebar</button>
<!-- example for external drop zone -->
<!-- <container :should-accept-drop="() => true" style="border:1px solid #aaa;" /> -->
<container lock-axix="y" orientation="horizontal" @drop="onDropStack">
<draggable v-for="stack in stacks" :key="stack.id" class="stack">
<h3>{{ stack.title }}</h3>
<container :get-child-payload="payload(stack.id)" group-name="stack" @drop="($event) => onDropCard(stack.id, $event)">
<draggable v-for="card in stack.cards" :key="card.id">
<card-item :id="card.id" />
</draggable>
</container>
</draggable>
</container>
</div>
<div v-else class="emptycontent">
<div class="icon icon-deck"></div>
<h2>{{ t('deck', 'Board not found')}}</h2>
<p></p>
</div>
</div>
</template>
<script>
import { Container, Draggable } from 'vue-smooth-dnd'
import { mapState } from 'vuex'
import Controls from '../Controls'
import CardItem from '../cards/CardItem'
const applyDrag = (arr, dragResult) => {
const { removedIndex, addedIndex, payload } = dragResult
if (removedIndex === null && addedIndex === null) return arr
const result = [...arr]
let itemToAdd = payload
if (removedIndex !== null) {
itemToAdd = result.splice(removedIndex, 1)[0]
}
if (addedIndex !== null) {
result.splice(addedIndex, 0, itemToAdd)
}
return result
}
const dummyCard = function(i) {
return {
id: i,
order: 0,
title: 'card ' + i,
stackId: 1
}
}
export default {
name: 'Board',
components: {
Controls
CardItem,
Controls,
Container,
Draggable
},
inject: [
'boardApi'
@@ -51,13 +98,21 @@ export default {
},
data: function() {
return {
loading: true
loading: true,
stacks: [
{ id: 1, title: 'abc', cards: [dummyCard(1), dummyCard(2), dummyCard(3), dummyCard(4), dummyCard(5)] },
{ id: 2, title: '234', cards: [dummyCard(6), dummyCard(7)] }
]
}
},
computed: {
...mapState({
board: state => state.currentBoard
})
}),
orderedCards() {
// return (stack) => _.orderBy(this.stacks[stack].cards, 'order')
}
},
created: function() {
this.boardApi.loadById(this.id)
@@ -67,8 +122,26 @@ export default {
})
},
methods: {
toggleSidebar: function() {
this.$store.dispatch('toggleSidebar')
onDropStack(dropResult) {
// TODO: persist new order in order field
this.stacks = applyDrag(this.stacks, dropResult)
},
onDropCard(stackId, dropResult) {
if (dropResult.removedIndex !== null || dropResult.addedIndex !== null) {
// TODO: persist new order in order field
const stacks = this.stacks
const stack = stacks.filter(p => p.id === stackId)[0]
const stackIndex = stacks.indexOf(stack)
const newStack = Object.assign({}, stack)
newStack.cards = applyDrag(newStack.cards, dropResult)
stacks.splice(stackIndex, 1, newStack)
this.stacks = stacks
}
},
payload(stackId) {
return index => {
return this.stacks.find(stack => stack.id === stackId).cards[index]
}
}
}
}
@@ -76,4 +149,17 @@ export default {
<style scoped>
.smooth-dnd-container.vertical {
display: flex;
flex-direction: column;
}
.smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper {
overflow: initial;
}
.smooth-dnd-container.vertical .smooth-dnd-draggable-wrapper {
height: auto;
}
</style>

77
src/components/board/BoardSidebar.vue
View File

@@ -23,9 +23,6 @@
<template>
<div class="sidebar">
<div class="sidebar-header">
<a class="icon-close" title="Close" @click="closeSidebar">
<span class="hidden-visually">Close</span>
</a>
<h3>{{ board.title }}</h3>
</div>
@@ -35,29 +32,64 @@
</li>
</ul>
<div class="tabs-container">
<ul
id="shareWithList"
class="shareWithList"
/>
<div class="tabsContainer">
<div class="tab">
<div v-if="activeTab === 'Sharing'">
<multiselect v-model="value" :options="board.sharees" />
<ul
id="shareWithList"
class="shareWithList"
>
<li>
<avatar :user="board.owner.uid" />
<span class="has-tooltip username">
{{ board.owner.displayname }}
</span>
</li>
<li v-for="acl in board.acl" :key="acl.participant.uid">
<avatar :user="acl.participant.uid" />
<span class="has-tooltip username">
{{ acl.participant.displayname }}
</span>
</li>
</ul>
</div>
<div
v-if="activeTab === 'Tags'"
id="board-detail-labels"
>
<ul class="labels">
<li v-for="label in board.labels" :key="label.id">
<span v-if="!label.edit" :style="{ backgroundColor: `#${label.color}`, color: `#${label.color || '000'}` }" class="label-title">
<span v-if="label.title">{{ label.title }}</span><i v-if="!label.title"><br></i>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
import { Avatar } from 'nextcloud-vue'
import { mapState } from 'vuex'
import Multiselect from 'vue-multiselect'
export default {
name: 'BoardSidebar',
components: {
Avatar,
Multiselect
},
props: {
board: {
type: Object,
default: function() {
return {}
}
}
},
data() {
return {
activeTab: 'shareWithList',
activeTab: 'Sharing',
tabs: [
{
name: 'Sharing',
@@ -78,11 +110,17 @@ export default {
]
}
},
computed: {
...mapState({
board: state => state.currentBoard
})
},
methods: {
closeSidebar() {
this.$store.dispatch('toggleSidebar')
},
setSelectedHeader(tabName) {
this.activeTab = tabName
this.tabs.forEach(tab => {
tab.isSelected = (tab.name === tabName)
})
@@ -112,14 +150,17 @@ export default {
margin: 15px 15px 0 15px;
li {
display: inline-block;
padding: 12px;
&.selected {
color: #000;
border-bottom: 1px solid #4d4d4d;
font-weight: 600;
}
a {
padding: 12px;
}
}
}
.tabsContainer {
.tab {
padding: 0 15px 15px;
}
}
</style>

45
src/components/card/CardSidebar.vue Normal file
View File

@@ -0,0 +1,45 @@
<!--
- @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 class="sidebar">
<div class="sidebar-header">
<h3>Card sidebar</h3>
</div>
</div>
</template>
<script>
export default {
name: 'CardSidebar',
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>

71
src/components/cards/CardBadges.vue Normal file
View File

@@ -0,0 +1,71 @@
<!--
- @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 class="badges">
<i v-if="true" class="icon icon-description" title="" />
<span v-if="true" class="due">
<i class="icon icon-badge" />
<span data-timestamp="" class="live-relative-timestamp"></span>
</span>
<div v-if="true" class="card-tasks">
<i class="icon icon-checkmark" />
<span>0/0</span>
</div>
<div v-if="true" class="card-files">
<i class="icon icon-files-dark" />
<span>1</span>
</div>
<div v-if="true" class="card-comments">
<i class="icon icon-comment" />
<span>1</span>
</div>
<div v-if="true" class="card-assigned-users">
<div class="assigned-user">
<avatar user="admin" />
</div>
</div>
</div>
</template>
<script>
import { Avatar } from 'nextcloud-vue'
export default {
name: 'CardBadges',
components: { Avatar },
props: {
id: {}
},
computed: {
compactMode() {
return false
}
}
}
</script>
<style lang="scss" scoped>
.badges {
display: flex;
flex-grow: 1;
}
</style>

131
src/components/cards/CardItem.vue Normal file
View File

@@ -0,0 +1,131 @@
<!--
- @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 @click="openCard" tag="div" class="card">
<div class="card-upper">
<h3>Card {{ id }}</h3>
<ul class="labels">
<li v-for="label in labels" :key="label.id" :style="labelStyle(label)"><span>{{ label.title }}</span></li>
</ul>
</div>
<div class="card-controls compact-item">
<card-badges />
<div v-click-outside="hidePopoverMenu">
<a class="icon-more" @click.prevent="togglePopoverMenu" />
<div :class="{open: menuOpened}" class="popovermenu">
<PopoverMenu :menu="visibilityPopover" />
</div>
</div>
</div>
</div>
</template>
<script>
import { Avatar, PopoverMenu } from 'nextcloud-vue'
import ClickOutside from 'vue-click-outside'
import CardBadges from './CardBadges'
import LabelTag from './LabelTag'
import Color from '../../mixins/color'
export default {
name: 'CardItem',
components: { PopoverMenu, CardBadges, LabelTag },
directives: {
ClickOutside
},
mixins: [Color],
props: {
id: {}
},
data() {
return {
menuOpened: false
}
},
computed: {
compactMode() {
return false
},
card() {
return this.id
},
menu() {
return []
},
labels() {
return [
{ id: 1, title: 'ToDo', color: 'aa0000' },
{ id: 2, title: 'Done', color: '33ff33' }
]
},
labelStyle() {
return (label) => {
return {
backgroundColor: '#' + label.color,
color: this.textColor(label.color)
}
}
},
visibilityPopover() {
return [
{
action: () => {},
icon: 'icon-settings-dark',
text: t('deck', 'Card details')
}
]
}
},
methods: {
openCard() {
this.$router.push({ name: 'card', params: { cardId: 123 } })
},
togglePopoverMenu() {
this.menuOpened = !this.menuOpened
},
hidePopoverMenu() {
this.menuOpened = false
}
}
}
</script>
<style lang="scss" scoped>
.card {
box-shadow: 0 0 5px #aaa;
.icon-more {
width: 44px;
}
.popovermenu {
display: none;
&.open {
display: block;
top: 44px;
}
}
.card-controls > div {
display: flex;
height: 44px;
}
}
</style>

40
src/components/cards/LabelTag.vue Normal file
View File

@@ -0,0 +1,40 @@
<!--
- @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>
<li :style="labelStyle">{{ labelObject.title }}</li>
</template>
<script>
export default {
name: 'LabelTag',
props: {
labelObject: { type: 'Object', default: () => { return { title: 'Default', color: 'aaaaaa' } } }
},
computed: {
}
}
</script>
<style lang="scss" scoped>
</style>