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

Merge branch 'master' into bugfix/noid/reorder-flicker

Browse Source
This commit is contained in:
Jakob
2020-02-04 12:07:10 +01:00
committed by GitHub
parent 7e7e1e4c97 3bb47cf6fe
commit 2ed1572f8b
56 changed files with 719 additions and 1143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/components/ActivityEntry.vue
View File

@@ -22,35 +22,95 @@
<template>
<div v-if="activity" class="activity">
<img :src="activity.icon" class="activity--icon">
<div class="activity--message" v-html="parseMessage(activity)" />
<div class="activity--timestamp">
{{ getTime(activity.datetime) }}
<div class="activity--header">
<img :src="activity.icon" class="activity--icon">
<RichText class="activity--subject" :text="message.subject" :arguments="message.parameters" />
<div class="activity--timestamp">
{{ getTime(activity.datetime) }}
</div>
</div>
<p v-if="activity.message" class="activity--message">
{{ activity.message }}
</p>
</div>
</template>
<script>
import RichText from '@juliushaertl/vue-richtext'
import { UserBubble } from '@nextcloud/vue'
const InternalLink = {
name: 'InternalLink',
functional: true,
props: {
href: {
type: String,
default: '',
},
name: {
type: String,
default: '',
},
},
render(createElement, context) {
return createElement('a', { attrs: { href: context.props.href }, style: { 'font-weight': 600 } }, context.props.name)
},
}
export default {
name: 'ActivityEntry',
components: {
RichText,
},
props: {
activity: {
type: Object,
default: null,
},
},
methods: {
getTime(timestamp) {
return OC.Util.relativeModifiedDate(timestamp)
},
parseMessage(activity) {
const subject = activity.subject_rich[0]
const parameters = JSON.parse(JSON.stringify(activity.subject_rich[1]))
computed: {
message() {
const subject = this.activity.subject_rich[0]
const parameters = JSON.parse(JSON.stringify(this.activity.subject_rich[1]))
if (parameters.after && typeof parameters.after.id === 'string' && parameters.after.id.startsWith('dt:')) {
const dateTime = parameters.after.id.substr(3)
parameters.after.name = window.moment(dateTime).format('L LTS')
}
return OCA.Activity.RichObjectStringParser.parseMessage(subject, parameters)
Object.keys(parameters).map(function(key, index) {
const { type } = parameters[key]
switch (type) {
case 'highlight':
parameters[key] = {
component: InternalLink,
props: {
href: parameters[key].link,
name: parameters[key].name,
},
}
break
case 'user':
parameters[key] = {
component: UserBubble,
props: {
user: parameters[key].id,
displayName: parameters[key].name,
},
}
break
default:
parameters[key] = `{${key}}`
}
})
return {
subject, parameters,
}
},
},
methods: {
getTime(timestamp) {
return OC.Util.relativeModifiedDate(timestamp)
},
},
}
@@ -58,8 +118,11 @@ export default {
<style scoped lang="scss">
.activity {
display: flex;
padding: 10px;
.activity--header {
display: flex;
padding: 10px;
}
.activity--icon {
width: 16px;
@@ -67,14 +130,19 @@ export default {
flex-shrink: 0;
flex-grow: 0;
}
.activity--message {
.activity--subject {
margin-left: 10px;
}
.activity--message {
margin-left: 44px;
color: var(--color-text-light);
margin-bottom: 10px;
}
.activity--timestamp {
flex-grow: 1;
color: var(--color-text-maxcontrast);
text-align: right;
font-size: 0.8em;
width: 25%;
padding: 1px;
}
}

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

@@ -62,8 +62,7 @@ import SharingTabSidebar from './SharingTabSidebar'
import TagsTabSidebar from './TagsTabSidebar'
import DeletedTabSidebar from './DeletedTabSidebar'
import TimelineTabSidebar from './TimelineTabSidebar'
import { AppSidebar } from '@nextcloud/vue/dist/Components/AppSidebar'
import { AppSidebarTab } from '@nextcloud/vue/dist/Components/AppSidebarTab'
import { AppSidebar, AppSidebarTab } from '@nextcloud/vue'
export default {
name: 'BoardSidebar',

6
src/components/board/SharingTabSidebar.vue
View File

@@ -58,11 +58,7 @@
</template>
<script>
import { Avatar } from '@nextcloud/vue/dist/Components/Avatar'
import { Multiselect } from '@nextcloud/vue/dist/Components/Multiselect'
import { Actions } from '@nextcloud/vue/dist/Components/Actions'
import { ActionButton } from '@nextcloud/vue/dist/Components/ActionButton'
import { ActionCheckbox } from '@nextcloud/vue/dist/Components/ActionCheckbox'
import { Avatar, Multiselect, Actions, ActionButton, ActionCheckbox } from '@nextcloud/vue'
import { CollectionList } from 'nextcloud-vue-collections'
import { mapGetters } from 'vuex'
import { getCurrentUser } from '@nextcloud/auth'

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

@@ -82,8 +82,7 @@
import { mapGetters } from 'vuex'
import { Container, Draggable } from 'vue-smooth-dnd'
import { Actions } from '@nextcloud/vue/dist/Components/Actions'
import { ActionButton } from '@nextcloud/vue/dist/Components/ActionButton'
import { Actions, ActionButton } from '@nextcloud/vue'
import CardItem from '../cards/CardItem'
export default {

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

@@ -66,7 +66,7 @@
import { mapGetters } from 'vuex'
import Color from '../../mixins/color'
import { ColorPicker } from '@nextcloud/vue/dist/Components/ColorPicker'
import { ColorPicker } from '@nextcloud/vue'
export default {
name: 'TagsTabSidebar',

2
src/components/boards/BoardItem.vue
View File

@@ -45,7 +45,7 @@
</template>
<script>
import { Avatar } from '@nextcloud/vue/dist/Components/Avatar'
import { Avatar } from '@nextcloud/vue'
export default {
name: 'BoardItem',

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

@@ -144,18 +144,11 @@
</template>
<script>
import { Avatar } from '@nextcloud/vue/dist/Components/Avatar'
import { Multiselect } from '@nextcloud/vue/dist/Components/Multiselect'
import { AppSidebar } from '@nextcloud/vue/dist/Components/AppSidebar'
import { AppSidebarTab } from '@nextcloud/vue/dist/Components/AppSidebarTab'
import { DatetimePicker } from '@nextcloud/vue/dist/Components/DatetimePicker'
import { Avatar, Actions, ActionButton, Multiselect, AppSidebar, AppSidebarTab, DatetimePicker } from '@nextcloud/vue'
import { mapState, mapGetters } from 'vuex'
import VueEasymde from 'vue-easymde/dist/VueEasyMDE.common'
import { Actions } from '@nextcloud/vue/dist/Components/Actions'
import { ActionButton } from '@nextcloud/vue/dist/Components/ActionButton'
import Color from '../../mixins/color'
import { CollectionList } from 'nextcloud-vue-collections'
import CardSidebarTabAttachments from './CardSidebarTabAttachments'
import CardSidebarTabComments from './CardSidebarTabComments'
import CardSidebarTabActivity from './CardSidebarTabActivity'

262
src/components/card/CardSidebarTabComments.vue
View File

@@ -7,43 +7,18 @@
</span>
</div>
<div class="comment-form">
<form @submit.prevent="createComment()">
<EditorContent :editor="editor"
:placeholder="t('deck', 'New comment') + ' ...'"
class="editor__content"
required />
<input v-tooltip="t('deck', 'Save')"
class="icon-confirm"
type="submit"
value="">
</form>
</div>
<CommentForm v-model="newComment" @submit="createComment" />
<div v-show="showSuggestions" ref="suggestions" class="suggestion-list">
<template v-if="hasResults">
<div
v-for="(user, index) in filteredUsers"
:key="user.uid"
:class="{ 'is-selected': navigatedUserIndex === index }"
class="suggestion-list__item"
@click="selectUser(user)">
{{ user.displayname }}
</div>
</template>
<div v-else class="suggestion-list__item is-empty">
{{ t('deck', 'No users found') }}
</div>
</div>
<ul v-if="comments[card.id] && comments[card.id].length > 0" id="commentsFeed">
<CommentItem v-for="comment in comments[card.id]"
<ul v-if="getCommentsForCard(card.id).length > 0" id="commentsFeed">
<CommentItem v-for="comment in getCommentsForCard(card.id)"
:key="comment.id"
:comment="comment"
@doReload="loadComments" />
<a @click="loadMore">
{{ t('deck', 'Load More') }}
</a>
<InfiniteLoading :identifier="card.id" @infinite="infiniteHandler">
<div slot="spinner" class="icon-loading" />
<div slot="no-more" />
<div slot="no-results" />
</InfiniteLoading>
</ul>
<div v-else-if="isLoading" class="icon icon-loading" />
<div v-else class="emptycontent">
@@ -54,21 +29,19 @@
</template>
<script>
import Fuse from 'fuse.js'
import tippy from 'tippy.js'
import { Editor, EditorContent } from 'tiptap'
import { Mention } from 'tiptap-extensions'
import { mapState } from 'vuex'
import { mapState, mapGetters } from 'vuex'
import { Avatar } from '@nextcloud/vue'
import CommentItem from './CommentItem'
import CommentForm from './CommentForm'
import InfiniteLoading from 'vue-infinite-loading'
export default {
name: 'CardSidebarTabComments',
components: {
Avatar,
CommentItem,
EditorContent,
CommentForm,
InfiniteLoading,
},
props: {
card: {
@@ -80,110 +53,19 @@ export default {
return {
newComment: '',
isLoading: false,
limit: 20,
offset: 0,
editor: new Editor({
extensions: [
new Mention({
// a list of all suggested items
items: () => {
return this.currentBoard.users
},
// is called when a suggestion starts
onEnter: ({
items, query, range, command, virtualNode,
}) => {
this.query = query
this.filteredUsers = items
this.suggestionRange = range
this.renderPopup(virtualNode)
// we save the command for inserting a selected mention
// this allows us to call it inside of our custom popup
// via keyboard navigation and on click
this.insertMention = command
},
// is called when a suggestion has changed
onChange: ({
items, query, range, virtualNode,
}) => {
this.query = query
this.filteredUsers = items
this.suggestionRange = range
this.navigatedUserIndex = 0
this.renderPopup(virtualNode)
},
// is called when a suggestion is cancelled
onExit: () => {
// reset all saved values
this.query = null
this.filteredUsers = []
this.suggestionRange = null
this.navigatedUserIndex = 0
this.destroyPopup()
},
// is called on every keyDown event while a suggestion is active
onKeyDown: ({ event }) => {
// pressing up arrow
if (event.keyCode === 38) {
this.upHandler()
return true
}
// pressing down arrow
if (event.keyCode === 40) {
this.downHandler()
return true
}
// pressing enter
if (event.keyCode === 13) {
this.enterHandler()
return true
}
return false
},
// is called when a suggestion has changed
// this function is optional because there is basic filtering built-in
// you can overwrite it if you prefer your own filtering
// in this example we use fuse.js with support for fuzzy search
onFilter: (items, query) => {
if (!query) {
return items
}
const fuse = new Fuse(items, {
threshold: 0.2,
keys: ['uid', 'displayname'],
})
return fuse.search(query)
},
}),
],
content: '',
onUpdate: ({ getHTML }) => {
this.newComment = getHTML().replace(/(<p>|<\/p>)/g, '')
},
}),
query: null,
suggestionRange: null,
filteredUsers: [],
navigatedUserIndex: 0,
insertMention: () => {},
observer: null,
}
},
computed: {
...mapState({
comments: state => state.comment.comments,
currentBoard: state => state.currentBoard,
}),
hasResults() {
return this.filteredUsers.length
...mapGetters([
'getCommentsForCard',
'hasMoreComments',
]),
members() {
return this.currentBoard.users
},
showSuggestions() {
return this.query || this.hasResults
},
},
watch: {
'card': {
@@ -193,96 +75,36 @@ export default {
},
},
},
created() {
},
methods: {
loadComments() {
this.isLoading = true
this.card.limit = this.limit
this.card.offset = this.offset
this.$store.dispatch('listComments', this.card).then(response => {
this.isLoading = false
})
async infiniteHandler($state) {
await this.loadMore()
if (this.hasMoreComments(this.card.id)) {
$state.loaded()
} else {
$state.complete()
}
},
createComment() {
async loadComments() {
this.isLoading = true
await this.$store.dispatch('fetchComments', { cardId: this.card.id })
this.isLoading = false
if (this.card.commentsUnread > 0) {
await this.$store.dispatch('markCommentsAsRead', this.card.id)
}
},
async createComment(content) {
const commentObj = {
cardId: this.card.id,
comment: this.newComment,
comment: content,
}
this.$store.dispatch('createComment', commentObj)
this.loadComments()
await this.$store.dispatch('createComment', commentObj)
this.newComment = ''
this.editor.setContent('')
await this.loadComments()
},
loadMore() {
this.offset = this.offset + this.limit
this.loadComments()
},
// navigate to the previous item
// if it's the first item, navigate to the last one
upHandler() {
this.navigatedUserIndex = ((this.navigatedUserIndex + this.filteredUsers.length) - 1) % this.filteredUsers.length
},
// navigate to the next item
// if it's the last item, navigate to the first one
downHandler() {
this.navigatedUserIndex = (this.navigatedUserIndex + 1) % this.filteredUsers.length
},
enterHandler() {
const user = this.filteredUsers[this.navigatedUserIndex]
if (user) {
this.selectUser(user)
}
},
// we have to replace our suggestion text with a mention
// so it's important to pass also the position of your suggestion text
selectUser(user) {
this.insertMention({
range: this.suggestionRange,
attrs: {
id: user.uid,
label: user.displayname,
},
})
this.editor.focus()
},
// renders a popup with suggestions
// tiptap provides a virtualNode object for using popper.js (or tippy.js) for popups
renderPopup(node) {
if (this.popup) {
return
}
this.popup = tippy(node, {
content: this.$refs.suggestions,
trigger: 'mouseenter',
interactive: true,
placement: 'bottom-start',
inertia: true,
duration: [400, 200],
showOnInit: true,
})
// we have to update tippy whenever the DOM is updated
if (MutationObserver) {
this.observer = new MutationObserver(() => {
this.popup.popperInstance.scheduleUpdate()
})
this.observer.observe(this.$refs.suggestions, {
childList: true,
subtree: true,
characterData: true,
})
}
},
destroyPopup() {
if (this.popup) {
this.popup.destroy()
this.popup = null
}
if (this.observer) {
this.observer.disconnect()
}
async loadMore() {
this.isLoading = true
await this.$store.dispatch('fetchMore', { cardId: this.card.id })
this.isLoading = false
},
},
}

193
src/components/card/CommentForm.vue Normal file
View File

@@ -0,0 +1,193 @@
<!--
- @copyright Copyright (c) 2020 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="comment-form">
<form @submit.prevent="submit">
<At ref="at"
v-model="commentText"
:members="members"
name-key="primaryKey"
:tab-select="true">
<template v-slot:item="s">
<Avatar class="atwho-li--avatar" :user="s.item.uid" :size="24" />
<span class="atwho-li--name" v-text="s.item.displayname" />
</template>
<template v-slot:embeddedItem="scope">
<span>
<UserBubble v-if="scope.current.primaryKey"
:data-mention-id="scope.current.primaryKey"
:user="scope.current.primaryKey"
:display-name="scope.current.displayname" />
</span>
</template>
<div ref="contentEditable"
contenteditable
@keydown.enter="handleKeydown"
@paste="onPaste"
@blur="error = null"
@input="validate" />
</At>
<input v-tooltip="t('deck', 'Save')"
class="icon-confirm"
type="submit"
value=""
:disabled="commentText.length === null || error">
<slot />
</form>
<p v-if="error">
{{ error }}
</p>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { UserBubble, Avatar } from '@nextcloud/vue'
import At from 'vue-at'
import { rawToParsed } from '../../helpers/mentions'
export default {
name: 'CommentForm',
components: {
At,
Avatar,
UserBubble,
},
props: {
value: {
type: String,
default: '',
},
},
data() {
return {
commentText: this.value,
error: null,
}
},
computed: {
...mapState({
currentBoard: state => state.currentBoard,
}),
members() {
return this.currentBoard.users
},
},
watch: {
value(val) {
this.commentText = val
},
},
methods: {
validate() {
this.error = null
const content = this.contentEditableToParsed()
if (content.length === 0) {
this.error = t('deck', 'The comment cannot be empty.')
}
if (content.length > 1000) {
this.error = t('deck', 'The comment cannot be longer than 1000 characters.')
}
return this.error === null ? content : null
},
submit() {
const content = this.validate()
if (content) {
this.$emit('input', content)
this.$emit('submit', content)
}
},
/**
* All credits for this go to the talk app
* https://github.com/nextcloud/spreed/blob/e69740b372e17eec4541337b47baa262a5766510/src/components/NewMessageForm/NewMessageForm.vue#L100-L143
*/
contentEditableToParsed() {
if (!this.$refs.contentEditable) {
return
}
const node = this.$refs.contentEditable.cloneNode(true)
const mentions = node.querySelectorAll('span[data-at-embedded]')
mentions.forEach(mention => {
// FIXME Adding a space after the mention should be improved to
// do it or not based on the next element instead of always
// adding it.
// FIXME user names can contain spaces, in that case they need to be wrapped @"user name" [a-zA-Z0-9\ _\.@\-']+
const mentionValue = mention.firstElementChild.attributes['data-mention-id'].value
mention.replaceWith(' @' + mentionValue + ' ')
})
return rawToParsed(node.innerHTML)
},
/**
* Emits the submit event when enter is pressed (look
* at the v-on in the template) unless shift is pressed:
* in this case a new line will be created.
*
* @param {object} event the event object;
*/
handleKeydown(event) {
// Prevent submit event when vue-at panel is open, as that should
// just select the mention from the panel.
if (this.atwho) {
return
}
// TODO: add support for CTRL+ENTER new line
if (!(event.shiftKey)) {
event.preventDefault()
this.submit()
}
},
onPaste(e) {
e.preventDefault()
const text = e.clipboardData.getData('text/plain')
document.execCommand('insertText', false, text)
},
},
}
</script>
<style scoped lang="scss">
@import "../../css/comments";
.atwho-wrap {
width: 100%;
& > div[contenteditable] {
width: 100%;
&::v-deep > span > div {
vertical-align: middle;
}
}
}
.comment-form::v-deep .atwho-li {
height: 32px;
}
.atwho-li--avatar {
margin-right: 10px;
}
</style>

94
src/components/card/CommentItem.vue
View File

@@ -1,12 +1,12 @@
<template>
<li class="comment">
<template v-if="!edit">
<template>
<div class="comment--header">
<Avatar :user="comment.actorId" />
<span class="has-tooltip username">
{{ comment.actorDisplayName }}
</span>
<Actions @click.stop.prevent>
<Actions v-show="canEdit && !edit">
<ActionButton icon="icon-rename" @click="showUpdateForm()">
{{ t('deck', 'Update') }}
</ActionButton>
@@ -14,29 +14,39 @@
{{ t('deck', 'Delete') }}
</ActionButton>
</Actions>
<Actions v-if="edit">
<ActionButton icon="icon-close" @click="hideUpdateForm" />
</Actions>
</div>
<!-- FIXME: Check if input is sanitized -->
<p class="comment--content" v-html="comment.message" /><p />
<RichText v-show="!edit"
ref="richTextElement"
class="comment--content"
:text="richText"
:arguments="richArgs"
:autolink="true" />
<CommentForm v-if="edit" v-model="commentMsg" @submit="updateComment" />
</template>
<form v-else @submit.prevent="updateComment">
<input v-model="commentMsg"
type="text"
autofocus
required>
<input v-tooltip="t('deck', 'Save')"
class="icon-confirm"
type="submit"
value="">
<input type="submit"
value=""
class="icon-close"
@click.stop.prevent="hideUpdateForm">
</form>
</li>
</template>
<script>
import { Avatar, Actions, ActionButton } from '@nextcloud/vue'
import { Avatar, Actions, ActionButton, UserBubble } from '@nextcloud/vue'
import RichText from '@juliushaertl/vue-richtext'
import CommentForm from './CommentForm'
import { getCurrentUser } from '@nextcloud/auth'
const AtMention = {
name: 'AtMention',
functional: true,
render(createElement, context) {
const { user, displayName } = context.props
return createElement(
'span',
{ attrs: { 'data-at-embedded': true, 'contenteditable': false } },
[createElement(UserBubble, { props: { user, displayName }, attrs: { 'data-mention-id': user } })]
)
},
}
export default {
name: 'CommentItem',
@@ -44,6 +54,8 @@ export default {
Avatar,
Actions,
ActionButton,
CommentForm,
RichText,
},
props: {
comment: {
@@ -58,23 +70,57 @@ export default {
}
},
computed: {
canEdit() {
return this.comment.actorId === getCurrentUser().uid
},
richText() {
let message = this.parsedMessage
this.comment.mentions.forEach((mention, index) => {
// FIXME: currently only [a-z\-_0-9] are allowed inside of placeholders
message = message.split('@' + mention.mentionId + '').join(`{user-${mention.mentionId}}`)
})
return message
},
richArgs() {
const mentions = [...this.comment.mentions]
const result = mentions.reduce(function(result, item, index) {
const itemKey = 'user-' + item.mentionId
result[itemKey] = {
component: AtMention,
props: {
user: item.mentionId,
displayName: item.mentionDisplayName,
},
}
return result
}, {})
return result
},
parsedMessage() {
const div = document.createElement('div')
div.innerHTML = this.comment.message
return (div.textContent || div.innerText || '')
},
},
methods: {
showUpdateForm() {
this.commentMsg = this.comment.message
this.commentMsg = this.$refs.richTextElement.$el.innerHTML
this.edit = true
},
hideUpdateForm() {
this.commentMsg = ''
this.edit = false
},
updateComment() {
async updateComment() {
const data = {
comment: this.commentMsg,
cardId: this.comment.cardId,
commentId: this.comment.id,
}
this.$store.dispatch('updateComment', data)
await this.$store.dispatch('updateComment', data)
this.hideUpdateForm()
},
deleteComment(commentId) {
@@ -90,4 +136,8 @@ export default {
<style scoped lang="scss">
@import "../../css/comments";
.comment--content::v-deep a {
text-decoration: underline;
}
</style>

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

@@ -39,9 +39,8 @@
</template>
<script>
import Avatar from '@nextcloud/vue/dist/Components/Avatar'
import PopoverMenu from '@nextcloud/vue/dist/Components/PopoverMenu'
import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
import { Avatar, PopoverMenu, Tooltip } from '@nextcloud/vue'
export default {
name: 'AvatarList',
components: {

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

@@ -22,7 +22,9 @@
<template>
<div class="badges">
<div v-if="card.description" class="card-comments icon icon-edit" />
<div v-if="card.description" class="icon icon-edit" />
<div v-if="card.commentsUnread > 0" class="icon icon-comment" />
<div v-if="card.duedate" :class="dueIcon">
<span>{{ dueTime }}</span>

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

@@ -98,10 +98,7 @@
</template>
<script>
import { Modal } from '@nextcloud/vue/dist/Components/Modal'
import { Actions } from '@nextcloud/vue/dist/Components/Actions'
import { ActionButton } from '@nextcloud/vue/dist/Components/ActionButton'
import { Multiselect } from '@nextcloud/vue/dist/Components/Multiselect'
import { Modal, Actions, ActionButton, Multiselect } from '@nextcloud/vue'
import ClickOutside from 'vue-click-outside'
import { mapState, mapGetters } from 'vuex'
import axios from '@nextcloud/axios'

2
src/components/navigation/AppNavigation.vue
View File

@@ -69,7 +69,7 @@
import axios from '@nextcloud/axios'
import { mapGetters } from 'vuex'
import ClickOutside from 'vue-click-outside'
import { Multiselect } from '@nextcloud/vue/dist/Components/Multiselect'
import { Multiselect } from '@nextcloud/vue'
import AppNavigationAddBoard from './AppNavigationAddBoard'
import AppNavigationBoardCategory from './AppNavigationBoardCategory'

3
src/components/navigation/AppNavigationAddBoard.vue
View File

@@ -47,7 +47,8 @@
</template>
<script>
import { ColorPicker } from '@nextcloud/vue/dist/Components/ColorPicker'
import { ColorPicker } from '@nextcloud/vue'
export default {
name: 'AppNavigationAddBoard',
components: { ColorPicker },

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

@@ -77,9 +77,8 @@
</template>
<script>
import { PopoverMenu } from '@nextcloud/vue/dist/Components/PopoverMenu'
import { PopoverMenu, ColorPicker } from '@nextcloud/vue'
import ClickOutside from 'vue-click-outside'
import { ColorPicker } from '@nextcloud/vue/dist/Components/ColorPicker'
export default {
name: 'AppNavigationBoard',