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>
(cherry picked from commit e1de6d317b)
This commit is contained in:
Julius Härtl
2024-02-08 10:12:57 +01:00
committed by Elizabeth Danzberger
parent f4e24e74a9
commit 7635423f52
26 changed files with 252 additions and 187 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 circle …')"
: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 circles …') : t('deck', 'No participants found') }}
</template>
<template #noResult>
{{ isSearching ? t('deck', 'Searching for users, groups and circles …') : 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>

46
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>
@@ -43,16 +46,28 @@
<NcAvatar v-if="user.type === 7"
:user="user.participant.uid"
:display-name="user.participant.displayname"
:tooltip-message="user.participant.displayname + ' ' + t('deck', '(Circle)')"
:tooltip-message="user.participant.displayname + ' ' + t('deck', '(Team)')"
:is-no-user="true"
: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">

19
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,23 +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 { loadState } from '@nextcloud/initial-state'
const canCreateState = loadState('deck', 'canCreate')
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;
}