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

fix: Adapt to new nextcloud vue version

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2024-02-08 10:12:57 +01:00
parent 2e3b169b69
commit e1de6d317b
26 changed files with 252 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
cypress/e2e/cardFeatures.js
View File

@@ -69,11 +69,13 @@ describe('Card', function() {
.first().click()
cy.get('.modal-mask.card-selector .card-title').should('be.visible').click().type(newCardTitle)
cy.get('.modal-mask.card-selector .multiselect-board').should('be.visible').click()
cy.get('.modal-mask.card-selector .multiselect-board li:contains("' + boardData.title + '")').should('be.visible').click()
cy.get('.vs__dropdown-menu [data-cy="board-select-title"]:contains("' + boardData.title + '")').should('be.visible').click()
cy.wait('@getBoard', { timeout: 7000 })
cy.get('.modal-mask.card-selector .multiselect-list').should('be.visible').click()
cy.get('.modal-mask.card-selector .multiselect-list li').eq(0).should('be.visible').click()
cy.get('.vs__dropdown-menu span[title="TestList"]').should('be.visible').click()
cy.get('.modal-mask.card-selector button.button-vue--vue-primary').should('be.visible').click()
cy.wait('@save', { timeout: 7000 })
@@ -101,13 +103,13 @@ describe('Card', function() {
})
cy.get('.modal__card').should('be.visible')
cy.get('.app-sidebar-header__maintitle').contains('Hello world')
cy.get('.app-sidebar-header__mainname').contains('Hello world')
})
it('Attachment from files app', () => {
cy.get('.card:contains("Hello world")').should('be.visible').click()
cy.get('.modal__card').should('be.visible')
cy.get('.app-sidebar-tabs__tab [data-id="attachments"]').click()
cy.get('#tab-button-attachments').click()
cy.get('button.icon-upload').should('be.visible')
cy.get('button.icon-folder').should('be.visible')
.click()
@@ -118,11 +120,11 @@ describe('Card', function() {
cy.get('.attachment-list .basename').contains('welcome.txt')
})
it('Shows the modal with the editor', () => {
it.only('Shows the modal with the editor', () => {
cy.get('.card:contains("Hello world")').should('be.visible').click()
cy.intercept({ method: 'PUT', url: '**/apps/deck/cards/*' }).as('save')
cy.get('.modal__card').should('be.visible')
cy.get('.app-sidebar-header__maintitle').contains('Hello world')
cy.get('.app-sidebar-header__mainname').contains('Hello world')
cy.get('.modal__card .ProseMirror h1').contains('Hello world').should('be.visible')
cy.get('.modal__card .ProseMirror h1')
.click()
@@ -229,20 +231,13 @@ describe('Card', function() {
cy.get(`.card:contains("${newCardTitle}")`).should('be.visible').click()
cy.get('#app-sidebar-vue [data-test="tag-selector"]').should('be.visible').click()
cy.get('.multiselect__option:contains("Action needed")').should('be.visible').click()
cy.get('.vs__dropdown-menu .tag:contains("Action needed")').should('be.visible').click()
cy.get('.vs__selected .tag:contains("Action needed")').should('be.visible')
cy.get('.vs__dropdown-menu .tag:contains("Later")').should('be.visible').click()
cy.get('[data-test="tag-selector"] .selector-wrapper--icon').click()
cy.get('.multiselect__option:contains("Action needed")').should('not.be.visible')
cy.get('[data-test="tag-selector"] .multiselect__tags .tag:contains("Action needed")')
.should('be.visible')
cy.get(`.card:contains("${newCardTitle}")`).find('.labels li:contains("Action needed")')
.should('be.visible')
cy.get('#app-sidebar-vue [data-test="tag-selector"]').should('be.visible').click()
cy.get('.multiselect__option:contains("Later")').should('be.visible').click()
cy.get('.multiselect__option:contains("Action needed")').should('be.visible').click()
cy.get('.vs__selected .tag:contains("Action needed")').should('be.visible')
cy.get('.vs__selected .tag:contains("Action needed")')
.parent().find('button').click()
cy.get(`.card:contains("${newCardTitle}")`).find('.labels li:contains("Later")')
.should('be.visible')

3
cypress/e2e/sharingFeatures.js
View File

@@ -38,7 +38,10 @@ describe('Board', function() {
cy.get('.board-title').contains(board.title)
cy.shareBoardWithUi(recipient.userId)
cy.intercept({ method: 'PUT', url: '**/apps/deck/boards/*/acl/*' }).as('setAcl')
cy.get(`[data-cy="acl-participant:${recipient.userId}"]`).find('[data-cy="action:permission-edit"]').click()
cy.wait('@setAcl')
cy.login(recipient)
cy.visit(`/apps/deck/#/board/${boardId}`)

9
cypress/support/commands.js
View File

@@ -107,11 +107,14 @@ Cypress.Commands.add('getNavigationEntry', (boardTitle) => {
})
Cypress.Commands.add('shareBoardWithUi', (userId) => {
cy.intercept({ method: 'GET', url: `**/ocs/v2.php/apps/files_sharing/api/v1/sharees?search=${userId}*` }).as('fetchRecipients')
cy.get('[aria-label="Open details"]').click()
cy.get('.app-sidebar').should('be.visible')
cy.get('.multiselect__input').type(`${userId}`)
cy.get('.multiselect__content .multiselect__element').first().contains(userId)
cy.get('.multiselect__input').type('{enter}')
cy.get('.select input').type(`${userId}`)
cy.wait('@fetchRecipients', { timeout: 7000 })
cy.get('.vs__dropdown-menu .option').first().contains(userId)
cy.get('.select input').type('{enter}')
cy.get('.shareWithList').contains(userId)
})

4
src/App.vue
View File

@@ -200,11 +200,13 @@ export default {
background-image: url('../img/color_picker.svg');
}
.multiselect {
.v-select {
width: 100%;
}
.modal__card {
width: 100%;
min-width: 100%;
height: 100vh;
max-height: calc(100vh - 120px);
overflow: auto;

31
src/CardMoveDialog.vue
View File

@@ -2,21 +2,20 @@
<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"
<NcSelect v-model="selectedBoard"
:input-label="t('deck', 'Select a board')"
: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')"
@option:selected="loadStacksFromBoard" />
<NcSelect v-model="selectedStack"
:disabled="stacksFromBoard.length === 0"
:placeholder="stacksFromBoard.length === 0 ? t('deck', 'No lists available') : t('deck', 'Select a list')"
:input-label="t('deck', 'Select a list')"
:options="stacksFromBoard"
:max-height="100"
label="title">
<span slot="noOptions">
{{ t('deck', 'List is empty') }}
</span>
</NcMultiselect>
label="title" />
<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
{{ t('deck', 'Move card') }}
@@ -29,14 +28,14 @@
</template>
<script>
import { NcModal, NcMultiselect } from '@nextcloud/vue'
import { NcModal, NcSelect } from '@nextcloud/vue'
import { generateUrl } from '@nextcloud/router'
import axios from '@nextcloud/axios'
import { subscribe, unsubscribe } from '@nextcloud/event-bus'
export default {
name: 'CardMoveDialog',
components: { NcModal, NcMultiselect },
components: { NcModal, NcSelect },
data() {
return {
card: null,
@@ -92,11 +91,15 @@ export default {
width: 25vw;
min-width: 250px;
min-height: 120px;
text-align: center;
margin: 20px 20px 100px 20px;
.multiselect {
margin-bottom: 10px;
h3 {
font-weight: bold;
text-align: center;
}
.select {
margin-bottom: 12px;
}
}

12
src/CardSelector.vue
View File

@@ -24,12 +24,12 @@
<NcModal class="card-selector" @close="close">
<div id="modal-inner" :class="{ 'icon-loading': loading }">
<h3>{{ title }}</h3>
<NcMultiselect v-model="selectedBoard"
<NcSelect v-model="selectedBoard"
:placeholder="t('deck', 'Select a board')"
:options="boards"
:disabled="loading"
label="title"
@select="fetchCardsFromBoard">
@option:selected="fetchCardsFromBoard">
<template slot="singleLabel" slot-scope="props">
<span>
<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
@@ -42,9 +42,9 @@
<span>{{ props.option.title }}</span>
</span>
</template>
</NcMultiselect>
</NcSelect>
<NcMultiselect v-model="selectedCard"
<NcSelect v-model="selectedCard"
:placeholder="t('deck', 'Select a card')"
:options="cardsFromBoard"
:disabled="loading || selectedBoard === ''"
@@ -62,14 +62,14 @@
<script>
import { generateUrl } from '@nextcloud/router'
import { NcModal, NcMultiselect } from '@nextcloud/vue'
import { NcModal, NcSelect } from '@nextcloud/vue'
import axios from '@nextcloud/axios'
export default {
name: 'CardSelector',
components: {
NcModal,
NcMultiselect,
NcSelect,
},
props: {
title: {

2
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" :title="formatReadableDate(activity.datetime)">
<div class="activity--timestamp" :name="formatReadableDate(activity.datetime)">
{{ relativeDate(activity.datetime) }}
</div>
</div>

2
src/components/AttachmentDragAndDrop.vue
View File

@@ -41,7 +41,7 @@
</div>
</transition>
<NcModal v-if="modalShow" :title="t('deck', 'File already exists')" @close="modalShow=false">
<NcModal v-if="modalShow" :name="t('deck', 'File already exists')" @close="modalShow=false">
<div class="modal__content">
<h2>{{ t('deck', 'File already exists') }}</h2>
<p>

8
src/components/Controls.vue
View File

@@ -89,14 +89,14 @@
<NcPopover container=".board-action-buttons__filter"
:placement="'bottom-end'"
:aria-label="t('deck', 'Active filters')"
:title="t('deck', 'Active filters')"
:name="t('deck', 'Active filters')"
:tooltip="t('deck', 'Active filters')"
@show="filterVisible=true"
@hide="filterVisible=false">
<!-- We cannot use NcActions here are the popover trigger does not update on reactive icons -->
<NcButton slot="trigger"
ref="filterPopover"
:title="t('deck', 'Apply filter')"
:name="t('deck', 'Apply filter')"
class="filter-button"
:type="isFilterActive ? 'primary' : 'tertiary'">
<template #icon>
@@ -203,7 +203,7 @@
</div>
<NcActions :aria-label="t('deck', 'View Modes')"
:title="t('deck', 'Toggle View Modes')">
:name="t('deck', 'Toggle View Modes')">
<NcActionButton @click="toggleShowArchived">
<template #icon>
<ArchiveIcon :size="20" decorative />
@@ -231,7 +231,7 @@
<NcActions>
<NcActionButton icon="icon-menu-sidebar"
:aria-label="t('deck', 'Open details')"
:title="t('deck', 'Details')"
:name="t('deck', 'Details')"
@click="toggleDetailsView" />
</NcActions>
</div>

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

@@ -23,7 +23,7 @@
<template>
<NcAppSidebar v-if="board != null"
:actions="[]"
:title="board.title"
:name="board.title"
@close="closeSidebar">
<NcAppSidebarTab id="sharing"
:order="0"

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

@@ -1,8 +1,8 @@
<template>
<div>
<NcMultiselect v-if="canShare"
<NcSelect v-if="canShare"
v-model="addAcl"
:placeholder="t('deck', 'Share board with a user, group or team …')"
:input-label="t('deck', 'Share board with a user, group or team …')"
:options="formatedSharees"
:user-select="true"
label="displayName"
@@ -11,14 +11,14 @@
track-by="multiselectKey"
:internal-search="false"
@input="clickAddAcl"
@search-change="asyncFind">
@search="(search, loading) => asyncFind(search, loading)">
<template #noOptions>
{{ isSearching ? t('deck', 'Searching for users, groups and teams …') : t('deck', 'No participants found') }}
</template>
<template #noResult>
{{ isSearching ? t('deck', 'Searching for users, groups and teams …') : t('deck', 'No participants found') }}
</template>
</NcMultiselect>
</NcSelect>
<ul id="shareWithList"
class="shareWithList">
@@ -88,7 +88,7 @@
</template>
<script>
import { NcAvatar, NcMultiselect, NcActions, NcActionButton, NcActionCheckbox, NcRelatedResourcesPanel } from '@nextcloud/vue'
import { NcAvatar, NcSelect, NcActions, NcActionButton, NcActionCheckbox, NcRelatedResourcesPanel } from '@nextcloud/vue'
import { CollectionList } from 'nextcloud-vue-collections'
import { mapGetters, mapState } from 'vuex'
import { getCurrentUser } from '@nextcloud/auth'
@@ -103,7 +103,7 @@ export default {
NcActions,
NcActionButton,
NcActionCheckbox,
NcMultiselect,
NcSelect,
CollectionList,
NcRelatedResourcesPanel,
},
@@ -170,7 +170,7 @@ export default {
},
},
mounted() {
this.asyncFind('')
this.asyncFind('', () => {})
},
methods: {
debouncedFind: debounce(async function(query) {
@@ -178,8 +178,10 @@ export default {
await this.$store.dispatch('loadSharees', query)
this.isSearching = false
}, 300),
async asyncFind(query) {
async asyncFind(query, loading) {
loading(true)
await this.debouncedFind(query)
loading(false)
},
async clickAddAcl() {
this.addAclForAPI = {

25
src/components/card/AssignmentSelector.vue
View File

@@ -3,19 +3,19 @@
<div class="selector-wrapper--icon">
<AccountMultiple :size="20" />
</div>
<NcMultiselect v-if="canEdit"
<NcSelect v-if="canEdit"
v-model="assignedUsers"
class="selector-wrapper--selector"
:disabled="assignables.length === 0"
:multiple="true"
:options="formatedAssignables"
:user-select="true"
:auto-limit="false"
:placeholder="t('deck', 'Assign a user to this card…')"
:aria-label-combobox="t('deck', 'Assign a user to this card…')"
:placeholder="t('deck', 'Select a user to assign to this card…')"
label="displayname"
track-by="multiselectKey"
@select="onSelect"
@remove="onRemove">
@option:selected="onSelect"
@option:deselected="onRemove">
<template #tag="scope">
<div class="avatarlist--inline">
<NcAvatar :user="scope.option.uid"
@@ -25,7 +25,7 @@
:disable-menu="true" />
</div>
</template>
</NcMultiselect>
</NcSelect>
<div v-else class="avatar-list--readonly">
<NcAvatar v-for="option in assignedUsers"
:key="option.primaryKey"
@@ -39,14 +39,14 @@
<script>
import { defineComponent } from 'vue'
import { NcAvatar, NcMultiselect } from '@nextcloud/vue'
import { NcAvatar, NcSelect } from '@nextcloud/vue'
import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
export default defineComponent({
name: 'AssignmentSelector',
components: {
AccountMultiple,
NcMultiselect,
NcSelect,
NcAvatar,
},
props: {
@@ -117,11 +117,12 @@ export default defineComponent({
this.assignedUsers = []
}
},
onSelect(user) {
this.$emit('select', user)
onSelect(options) {
const addition = options.filter((item) => !this.card.assignedUsers.find((user) => user.participant.primaryKey === item.primaryKey))
this.$emit('select', addition[0])
},
onRemove(user) {
this.$emit('remove', user)
onRemove(removed) {
this.$emit('remove', removed)
},
},
})

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

@@ -23,7 +23,7 @@
<template>
<NcAppSidebar v-if="currentBoard && currentCard"
:active="tabId"
:title="title"
:name="title"
:subtitle="subtitle"
:subtitle-tooltip="subtitleTooltip"
:title-editable="titleEditable"

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

@@ -178,14 +178,13 @@ export default {
},
async addLabelToBoardAndCard(name) {
const newLabel = await this.$store.dispatch('addLabelToCurrentBoardAndCard', {
await this.$store.dispatch('addLabelToCurrentBoardAndCard', {
card: this.copiedCard,
newLabel: {
title: name,
color: this.randomColor(),
},
})
this.copiedCard.labels.push(newLabel)
},
removeLabelFromCard(removedLabel) {

2
src/components/card/DueDateSelector.vue
View File

@@ -66,7 +66,7 @@
<div class="due-actions">
<NcButton v-if="!card.archived"
type="tertiary"
:title="t('deck', 'Not completed')"
:name="t('deck', 'Not completed')"
@click="changeCardDoneStatus()">
<template #icon>
<ClearIcon :size="20" />

50
src/components/card/TagSelector.vue
View File

@@ -3,46 +3,48 @@
<div class="selector-wrapper--icon">
<TagMultiple :size="20" />
</div>
<NcMultiselect :value="assignedLabels"
<NcSelect :value="assignedLabels"
class="selector-wrapper--selector"
:multiple="true"
:disabled="disabled"
:options="labelsSorted"
:placeholder="t('deck', 'Assign a tag to this card…')"
:aria-label-combobox="t('deck', 'Assign a tag to this card…')"
:placeholder="t('deck', 'Select or create a tag…')"
:taggable="true"
:close-on-select="false"
label="title"
track-by="id"
tag-position="bottom"
@select="onSelect"
@remove="onRemove"
@tag="onNewTag">
@option:selected="onSelect"
@option:deselected="onRemove"
@option:created="onNewTag">
<template #option="scope">
<div v-if="!scope.option?.isTag" :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">
{{ scope.option.title }}
<div v-if="!scope?.isTag" :style="{ backgroundColor: '#' + scope.color, color: textColor(scope.color)}" class="tag">
{{ scope.title }}
</div>
<div v-else>
{{ t('deck', 'Create a new tag:') }} <div class="tag">
{{ scope.option.label }}
{{ scope.label }}
</div>
</div>
</template>
<template #tag="scope">
<div :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">
{{ scope.option.title }}
<template #selected-option="scope">
<div :style="{ backgroundColor: '#' + scope.color, color: textColor(scope.color)}" class="tag">
{{ scope.title }}
</div>
</template>
</NcMultiselect>
</NcSelect>
</div>
</template>
<script>
import { NcMultiselect } from '@nextcloud/vue'
import { NcSelect } from '@nextcloud/vue'
import Color from '../../mixins/color.js'
import TagMultiple from 'vue-material-design-icons/TagMultiple.vue'
export default {
name: 'TagSelector',
components: { TagMultiple, NcMultiselect },
components: { TagMultiple, NcSelect },
mixins: [Color],
props: {
card: {
@@ -61,20 +63,22 @@ export default {
computed: {
labelsSorted() {
return [...this.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
.filter(label => this.card.labels.findIndex((l) => l.id === label.id) === -1)
},
assignedLabels() {
return [...this.card.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
},
},
methods: {
onSelect(newLabel) {
this.$emit('select', newLabel)
onSelect(options) {
const addedLabel = options.filter(option => !this.card.labels.includes(option))
this.$emit('select', addedLabel[0])
},
onRemove(removedLabel) {
this.$emit('remove', removedLabel)
},
async onNewTag(name) {
this.$emit('newtag', name)
async onNewTag(option) {
this.$emit('newtag', option.title)
},
},
}
@@ -83,17 +87,17 @@ export default {
<style lang="scss" scoped>
@import '../../css/selector';
.multiselect--active {
z-index: 10022;
.v-select:deep(.vs__selected) {
padding-left: 0 !important;
}
.tag {
flex-grow: 0;
flex-shrink: 1;
overflow: hidden;
padding: 0px 5px;
border-radius: 15px;
font-size: 85%;
padding: 3px 12px;
display: inline-block;
border-radius: var(--border-radius-pill);
margin-right: 3px;
}
</style>

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

@@ -22,7 +22,10 @@
<template>
<div class="avatars">
<div class="avatar-list" @click.stop="togglePopover">
<div>
<NcPopover>
<template #trigger="{ attrs }">
<button class="avatar-list" v-bind="attrs" @click.stop>
<div v-if="popover.length > 0">
<AccountMultiple class="avatardiv more-avatars" :size="24" />
</div>
@@ -48,11 +51,23 @@
:disable-="true"
:size="32" />
</div>
</button>
</template>
<div>
<div v-for="user in users"
:key="user.id"
class="avatar-list-entry">
<NcAvatar :user="user.participant.uid"
:display-name="user.participant.displayname"
:disable-menu="true"
:is-no-user="user.type !== 0"
:size="32" />
<div class="avatar-list-entry__label">
{{ user.participant.displayname }}
</div>
<div v-show="popoverVisible" class="popovermenu menu-right">
<NcPopoverMenu :menu="popover" />
<slot />
</div>
</div>
</NcPopover>
</div>
<div class="avatar-print-list">
@@ -70,7 +85,7 @@
</template>
<script>
import { NcAvatar, NcPopoverMenu, Tooltip } from '@nextcloud/vue'
import { NcAvatar, NcPopover, Tooltip } from '@nextcloud/vue'
import { generateUrl } from '@nextcloud/router'
import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
@@ -78,7 +93,7 @@ export default {
name: 'AvatarList',
components: {
NcAvatar,
NcPopoverMenu,
NcPopover,
AccountMultiple,
},
directives: {
@@ -172,8 +187,12 @@ export default {
.avatar-list {
float: right;
display: inline-flex;
padding-right: $avatar-offset;
flex-direction: row-reverse;
padding: 0;
padding-right: $avatar-offset;
margin: 0;
border: 0;
background: transparent;
& > div {
height: 32px;
@@ -199,6 +218,15 @@ export default {
}
.avatar-list-entry {
display: flex;
padding: 6px 12px;
&__label {
padding: 4px 12px;
}
}
.popovermenu {
display: block;
margin: 40px -6px;

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

@@ -68,7 +68,7 @@
tag="ul"
class="labels"
@click.stop="openCard">
<li v-for="label in labelsSorted" :key="label.id" :style="labelStyle(label)">
<li v-for="label in labelsSorted" :key="label?.id ?? label?.title" :style="labelStyle(label)">
<span @click.stop="applyLabelFilter(label)">{{ label.title }}</span>
</li>
</transition-group>

2
src/components/cards/badges/DueDate.vue
View File

@@ -23,7 +23,7 @@
<template>
<div v-if="card" class="duedate" :data-due-state="dueState">
<transition name="zoom">
<div v-if="card.duedate || card.done" class="due" :title="absoluteDate">
<div v-if="card.duedate || card.done" class="due" :name="absoluteDate">
<CheckCircle v-if="card.done" :size="16" />
<Clock v-else-if="overdue" :size="16" />
<ClockOutline v-else :size="16" />

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

@@ -23,7 +23,7 @@
<template>
<NcAppNavigation :class="{'icon-loading': loading}">
<template #list>
<NcAppNavigationItem :title="t('deck', 'Upcoming cards')"
<NcAppNavigationItem :name="t('deck', 'Upcoming cards')"
:exact="true"
to="/">
<template #icon>
@@ -61,7 +61,7 @@
<AppNavigationAddBoard v-if="canCreate" />
</template>
<template #footer>
<NcAppNavigationSettings :title="t('deck', 'Deck settings')">
<NcAppNavigationSettings :name="t('deck', 'Deck settings')">
<NcButton @click="showHelp = true">
{{ t('deck', 'Keyboard shortcuts') }}
</NcButton>
@@ -97,14 +97,14 @@
</label>
</div>
<NcMultiselect v-if="isAdmin"
<NcSelect v-if="isAdmin"
v-model="groupLimit"
:class="{'icon-loading-small': groupLimitDisabled}"
open-direction="bottom"
:options="groups"
:multiple="true"
:disabled="groupLimitDisabled"
:placeholder="t('deck', 'Limit board creation to some groups')"
:input-label="t('deck', 'Limit board creation to some groups')"
label="displayname"
track-by="id"
@input="updateConfig" />
@@ -121,7 +121,7 @@
import axios from '@nextcloud/axios'
import { mapGetters } from 'vuex'
import ClickOutside from 'vue-click-outside'
import { NcAppNavigation, NcAppNavigationItem, NcAppNavigationSettings, NcMultiselect, NcButton } from '@nextcloud/vue'
import { NcAppNavigation, NcAppNavigationItem, NcAppNavigationSettings, NcSelect, NcButton } from '@nextcloud/vue'
import AppNavigationAddBoard from './AppNavigationAddBoard.vue'
import AppNavigationBoardCategory from './AppNavigationBoardCategory.vue'
import { loadState } from '@nextcloud/initial-state'
@@ -144,7 +144,7 @@ export default {
NcButton,
AppNavigationAddBoard,
AppNavigationBoardCategory,
NcMultiselect,
NcSelect,
NcAppNavigationItem,
ArchiveIcon,
CalendarIcon,

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

@@ -21,7 +21,7 @@
-->
<template>
<NcAppNavigationItem v-if="!editing"
:title="t('deck', 'Add board')"
:name="t('deck', 'Add board')"
icon="icon-add"
@click.prevent.stop="startCreateBoard" />
<div v-else class="board-create">

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

@@ -21,7 +21,7 @@
-->
<template>
<NcAppNavigationItem v-if="!editing"
:title="!deleted ? board.title : undoText"
:name="!deleted ? board.title : undoText"
:loading="loading"
:to="routeTo"
:undo="deleted"
@@ -29,10 +29,9 @@
@undo="unDelete">
<NcAppNavigationIconBullet slot="icon" :color="board.color" />
<NcAppNavigationCounter v-if="board.acl.length"
slot="counter"
class="icon-shared"
style="opacity: 0.5" />
<template #counter>
<AccountIcon v-if="board.acl.length > 0" />
</template>
<template v-if="!deleted" slot="actions">
<template v-if="!isDueSubmenuActive">
@@ -113,7 +112,7 @@
</NcActionButton>
</template>
<NcActionButton v-else-if="!board.archived && board.acl.length > 0"
:title="t('deck', 'Due date reminders')"
:name="t('deck', 'Due date reminders')"
:icon="dueDateReminderIcon"
@click="isDueSubmenuActive=true">
{{ dueDateReminderText }}
@@ -144,20 +143,21 @@
</template>
<script>
import { NcAppNavigationIconBullet, NcAppNavigationCounter, NcAppNavigationItem, NcColorPicker, NcActions, NcActionButton } from '@nextcloud/vue'
import { NcAppNavigationIconBullet, NcAppNavigationItem, NcColorPicker, NcActions, NcActionButton } from '@nextcloud/vue'
import ClickOutside from 'vue-click-outside'
import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
import CloneIcon from 'vue-material-design-icons/ContentDuplicate.vue'
import AccountIcon from 'vue-material-design-icons/Account.vue'
export default {
name: 'AppNavigationBoard',
components: {
NcAppNavigationIconBullet,
NcAppNavigationCounter,
NcAppNavigationItem,
NcColorPicker,
NcActions,
NcActionButton,
AccountIcon,
ArchiveIcon,
CloneIcon,
},

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

@@ -21,7 +21,7 @@
-->
<template>
<NcAppNavigationItem v-if="boards.length > 0"
:title="text"
:name="text"
:to="to"
:exact="true"
:allow-collapse="collapsible"

22
src/directives/focus.js Normal file
View File

@@ -0,0 +1,22 @@
/**
*
* @param el
* @param binding
*/
function focusElement(el, binding) {
// If directive has bound value
if (binding.value !== undefined && !binding.value) return
// Focus the element
el.focus()
}
// Register a global custom directive called `v-focus`
export default {
bind(el, binding, vnode) {
// When the component of the element gets activated
vnode.context.$on('hook:activated', () => focusElement(el, binding))
},
// When the bound element is inserted into the DOM...
inserted: focusElement,
}

30
src/init-reference.js
View File

@@ -19,29 +19,28 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { registerWidget, registerCustomPickerElement, NcCustomPickerRenderResult } from '@nextcloud/vue/dist/Components/NcRichText.js'
import { Tooltip } from '@nextcloud/vue'
import Vue from 'vue'
import CardReferenceWidget from './views/CardReferenceWidget.vue'
import BoardReferenceWidget from './views/BoardReferenceWidget.vue'
import CommentReferenceWidget from './views/CommentReferenceWidget.vue'
import { registerWidget, registerCustomPickerElement, NcCustomPickerRenderResult } from '@nextcloud/vue/dist/Functions/registerReference.js'
import { translate, translatePlural } from '@nextcloud/l10n'
import './shared-init.js'
const prepareVue = (Vue) => {
Vue.prototype.t = translate
Vue.prototype.n = translatePlural
Vue.prototype.OC = window.OC
Vue.prototype.OCA = window.OCA
Vue.directive('tooltip', Tooltip)
Vue.directive('focus', {
inserted(el) {
el.focus()
},
})
}
registerWidget('deck-card', (el, { richObjectType, richObject, accessible }) => {
registerWidget('deck-card', async (el, { richObjectType, richObject, accessible }) => {
const { default: Vue } = await import('vue')
prepareVue(Vue)
const { default: CardReferenceWidget } = await import('./views/CardReferenceWidget.vue')
// trick to change the wrapper element size, otherwise it always is 100%
// which is not very nice with a simple card
el.parentNode.style['max-width'] = '400px'
@@ -58,7 +57,10 @@ registerWidget('deck-card', (el, { richObjectType, richObject, accessible }) =>
}).$mount(el)
})
registerWidget('deck-board', (el, { richObjectType, richObject, accessible }) => {
registerWidget('deck-board', async (el, { richObjectType, richObject, accessible }) => {
const { default: Vue } = await import('vue')
prepareVue(Vue)
const { default: BoardReferenceWidget } = await import('./views/BoardReferenceWidget.vue')
el.parentNode.style['max-width'] = '400px'
el.parentNode.style['margin-left'] = '0'
el.parentNode.style['margin-right'] = '0'
@@ -73,7 +75,11 @@ registerWidget('deck-board', (el, { richObjectType, richObject, accessible }) =>
}).$mount(el)
})
registerWidget('deck-comment', (el, { richObjectType, richObject, accessible }) => {
registerWidget('deck-comment', async (el, { richObjectType, richObject, accessible }) => {
const { default: Vue } = await import('vue')
prepareVue(Vue)
const { default: CommentReferenceWidget } = await import('./views/CommentReferenceWidget.vue')
el.parentNode.style['max-width'] = '400px'
el.parentNode.style['margin-left'] = '0'
el.parentNode.style['margin-right'] = '0'
@@ -89,9 +95,9 @@ registerWidget('deck-comment', (el, { richObjectType, richObject, accessible })
})
registerCustomPickerElement('create-new-deck-card', async (el, { providerId, accessible }) => {
const { default: Vue } = await import(/* webpackChunkName: "reference-picker-lazy" */'vue')
const { default: Vue } = await import('vue')
Vue.mixin({ methods: { t, n } })
const { default: CreateNewCardCustomPicker } = await import(/* webpackChunkName: "reference-picker-lazy" */'./views/CreateNewCardCustomPicker.vue')
const { default: CreateNewCardCustomPicker } = await import('./views/CreateNewCardCustomPicker.vue')
const Element = Vue.extend(CreateNewCardCustomPicker)
const vueElement = new Element({
propsData: {

28
src/views/CreateNewCardCustomPicker.vue
View File

@@ -15,40 +15,40 @@
<div class="selector-wrapper--icon">
<DeckIcon :size="20" />
</div>
<NcMultiselect v-model="selectedBoard"
<NcSelect v-model="selectedBoard"
:placeholder="t('deck', 'Select a board')"
:options="boards"
:disabled="loading"
label="title"
class="selector-wrapper--selector multiselect-board"
@select="onSelectBoard">
<template slot="singleLabel" slot-scope="props">
@option:selected="onSelectBoard">
<template #selected-option="option">
<span>
<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
<span>{{ props.option.title }}</span>
<span :style="{ 'backgroundColor': '#' + option.color }" class="board-bullet" />
<span data-cy="board-select-title">{{ option.title }}</span>
</span>
</template>
<template slot="option" slot-scope="props">
<template #option="option">
<span>
<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
<span>{{ props.option.title }}</span>
<span :style="{ 'backgroundColor': '#' + option.color }" class="board-bullet" />
<span data-cy="board-select-title">{{ option.title }}</span>
</span>
</template>
</NcMultiselect>
</NcSelect>
</div>
<div class="col selector-wrapper">
<div class="selector-wrapper--icon">
<FormatColumnsIcon :size="20" />
</div>
<NcMultiselect v-model="selectedStack"
<NcSelect v-model="selectedStack"
:placeholder="t('deck', 'Select a list')"
:options="stacksFromBoard"
:max-height="100"
:disabled="loading || !selectedBoard"
class="selector-wrapper--selector multiselect-list"
label="title"
@select="onSelectStack" />
@option:selected="onSelectStack" />
</div>
</div>
@@ -117,7 +117,7 @@
import { generateUrl } from '@nextcloud/router'
import {
NcButton,
NcMultiselect,
NcSelect,
NcEmptyContent,
NcLoadingIcon,
} from '@nextcloud/vue'
@@ -148,7 +148,7 @@ export default {
TagSelector,
AssignmentSelector,
NcButton,
NcMultiselect,
NcSelect,
NcEmptyContent,
NcLoadingIcon,
},
@@ -373,7 +373,7 @@ h2 {
gap: 12px;
}
.multiselect {
.v-select {
min-width: auto !important;
}