feat: create new card from smart picker
Signed-off-by: Luka Trovic <luka@nextcloud.com>
This commit is contained in:
Luka Trovic
committed by
Julius Härtl
Julius Härtl
parent
ba56687982
commit
12217afe65
@@ -54,6 +54,7 @@ use OCA\Deck\Notification\Notifier;
|
||||
use OCA\Deck\Reference\BoardReferenceProvider;
|
||||
use OCA\Deck\Reference\CardReferenceProvider;
|
||||
use OCA\Deck\Reference\CommentReferenceProvider;
|
||||
use OCA\Deck\Reference\CreateCardReferenceProvider;
|
||||
use OCA\Deck\Search\CardCommentProvider;
|
||||
use OCA\Deck\Search\DeckProvider;
|
||||
use OCA\Deck\Service\PermissionService;
|
||||
@@ -129,6 +130,8 @@ class Application extends App implements IBootstrap {
|
||||
$context->registerSearchProvider(CardCommentProvider::class);
|
||||
$context->registerDashboardWidget(DeckWidget::class);
|
||||
|
||||
$context->registerReferenceProvider(CreateCardReferenceProvider::class);
|
||||
|
||||
// reference widget
|
||||
$context->registerReferenceProvider(CardReferenceProvider::class);
|
||||
$context->registerReferenceProvider(BoardReferenceProvider::class);
|
||||
|
||||
@@ -82,8 +82,17 @@ class CardApiController extends ApiController {
|
||||
*
|
||||
* Get a specific card.
|
||||
*/
|
||||
public function create($title, $type = 'plain', $order = 999, $description = '', $duedate = null) {
|
||||
public function create($title, $type = 'plain', $order = 999, $description = '', $duedate = null, $labels = [], $users = []) {
|
||||
$card = $this->cardService->create($title, $this->request->getParam('stackId'), $type, $order, $this->userId, $description, $duedate);
|
||||
|
||||
foreach ($labels as $labelId) {
|
||||
$this->cardService->assignLabel($card->id, $labelId);
|
||||
}
|
||||
|
||||
foreach ($users as $user) {
|
||||
$this->assignmentService->assignUser($card->id, $user['id'], $user['type']);
|
||||
}
|
||||
|
||||
return new DataResponse($card, HTTP::STATUS_OK);
|
||||
}
|
||||
|
||||
|
||||
@@ -77,8 +77,18 @@ class CardController extends Controller {
|
||||
* @param int $order
|
||||
* @return \OCP\AppFramework\Db\Entity
|
||||
*/
|
||||
public function create($title, $stackId, $type = 'plain', $order = 999, string $description = '') {
|
||||
return $this->cardService->create($title, $stackId, $type, $order, $this->userId, $description);
|
||||
public function create($title, $stackId, $type = 'plain', $order = 999, string $description = '', $duedate = null, $labels = [], $users = []) {
|
||||
$card = $this->cardService->create($title, $stackId, $type, $order, $this->userId, $description, $duedate);
|
||||
|
||||
foreach ($labels as $label) {
|
||||
$this->assignLabel($card->id, $label);
|
||||
}
|
||||
|
||||
foreach ($users as $user) {
|
||||
$this->assignmentService->assignUser($card->id, $user['id'], $user['type']);
|
||||
}
|
||||
|
||||
return $card;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
78
lib/Reference/CreateCardReferenceProvider.php
Normal file
78
lib/Reference/CreateCardReferenceProvider.php
Normal file
@@ -0,0 +1,78 @@
|
||||
<?php
|
||||
|
||||
namespace OCA\Deck\Reference;
|
||||
|
||||
use OCA\Deck\AppInfo\Application;
|
||||
use OCP\Collaboration\Reference\ADiscoverableReferenceProvider;
|
||||
use OCP\Collaboration\Reference\IReference;
|
||||
use OCP\IL10N;
|
||||
|
||||
use OCP\IURLGenerator;
|
||||
|
||||
class CreateCardReferenceProvider extends ADiscoverableReferenceProvider {
|
||||
|
||||
public function __construct(
|
||||
private IL10N $l10n,
|
||||
private IURLGenerator $urlGenerator,
|
||||
private ?string $userId) {
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
public function getId(): string {
|
||||
return 'create-new-deck-card';
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
public function getTitle(): string {
|
||||
return $this->l10n->t('Create a new deck card');
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
public function getOrder(): int {
|
||||
return 10;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
public function getIconUrl(): string {
|
||||
return $this->urlGenerator->getAbsoluteURL(
|
||||
$this->urlGenerator->imagePath(Application::APP_ID, 'deck-dark.svg')
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
public function matchReference(string $referenceText): bool {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
public function resolveReference(string $referenceText): ?IReference {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
public function getCachePrefix(string $referenceId): string {
|
||||
return $this->userId ?? '';
|
||||
}
|
||||
|
||||
/**
|
||||
* We don't use the userId here but rather a reference unique id
|
||||
* @inheritDoc
|
||||
*/
|
||||
public function getCacheKey(string $referenceId): ?string {
|
||||
return $referenceId;
|
||||
}
|
||||
}
|
||||
@@ -22,101 +22,23 @@
|
||||
|
||||
<template>
|
||||
<NcModal class="card-selector" @close="close">
|
||||
<div class="modal-scroller">
|
||||
<div v-if="!creating && !created" id="modal-inner" :class="{ 'icon-loading': loading }">
|
||||
<h3>{{ t('deck', 'Create a new card') }}</h3>
|
||||
<NcMultiselect v-model="selectedBoard"
|
||||
:placeholder="t('deck', 'Select a board')"
|
||||
:options="boards"
|
||||
:disabled="loading"
|
||||
label="title"
|
||||
class="multiselect-board"
|
||||
@select="fetchCardsFromBoard">
|
||||
<template slot="singleLabel" slot-scope="props">
|
||||
<span>
|
||||
<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
|
||||
<span>{{ props.option.title }}</span>
|
||||
</span>
|
||||
</template>
|
||||
<template slot="option" slot-scope="props">
|
||||
<span>
|
||||
<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
|
||||
<span>{{ props.option.title }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</NcMultiselect>
|
||||
|
||||
<NcMultiselect v-model="selectedStack"
|
||||
:placeholder="t('deck', 'Select a list')"
|
||||
:options="stacksFromBoard"
|
||||
:max-height="100"
|
||||
:disabled="loading || !selectedBoard"
|
||||
class="multiselect-list"
|
||||
label="title" />
|
||||
|
||||
<input v-model="pendingTitle"
|
||||
type="text"
|
||||
:placeholder="t('deck', 'Card title')"
|
||||
:disabled="loading || !selectedStack">
|
||||
<textarea v-model="pendingDescription" :disabled="loading || !selectedStack" />
|
||||
<div class="modal-buttons">
|
||||
<button @click="close">
|
||||
{{ t('deck', 'Cancel') }}
|
||||
</button>
|
||||
<button :disabled="loading || !isBoardAndStackChoosen"
|
||||
class="primary"
|
||||
@click="select">
|
||||
{{ action }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else id="modal-inner">
|
||||
<NcEmptyContent v-if="creating">
|
||||
<template #icon>
|
||||
<NcLoadingIcon />
|
||||
</template>
|
||||
<template #title>
|
||||
{{ t('deck', 'Creating the new card …') }}
|
||||
</template>
|
||||
</NcEmptyContent>
|
||||
<NcEmptyContent v-else-if="created">
|
||||
<template #icon>
|
||||
<CardPlusOutline />
|
||||
</template>
|
||||
<template #title>
|
||||
{{ t('deck', 'Card "{card}" was added to "{board}"', { card: pendingTitle, board: selectedBoard.title }) }}
|
||||
</template>
|
||||
<template #action>
|
||||
<button class="primary" @click="openNewCard">
|
||||
{{ t('deck', 'Open card') }}
|
||||
</button>
|
||||
<button @click="close">
|
||||
{{ t('deck', 'Close') }}
|
||||
</button>
|
||||
</template>
|
||||
</NcEmptyContent>
|
||||
</div>
|
||||
</div>
|
||||
<CreateNewCardCustomPicker :title="title"
|
||||
:description="description"
|
||||
show-created-notice
|
||||
@cancel="close"
|
||||
@close="close" />
|
||||
</NcModal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
import { NcModal, NcMultiselect, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
|
||||
import CardPlusOutline from 'vue-material-design-icons/CardPlusOutline.vue'
|
||||
import axios from '@nextcloud/axios'
|
||||
import { CardApi } from './services/CardApi.js'
|
||||
|
||||
const cardApi = new CardApi()
|
||||
import { NcModal } from '@nextcloud/vue'
|
||||
import CreateNewCardCustomPicker from './views/CreateNewCardCustomPicker.vue'
|
||||
|
||||
export default {
|
||||
name: 'CardCreateDialog',
|
||||
components: {
|
||||
NcEmptyContent,
|
||||
NcModal,
|
||||
NcMultiselect,
|
||||
NcLoadingIcon,
|
||||
CardPlusOutline,
|
||||
CreateNewCardCustomPicker,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
@@ -127,139 +49,6 @@ export default {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
action: {
|
||||
type: String,
|
||||
default: t('deck', 'Create card'),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
boards: [],
|
||||
stacksFromBoard: [],
|
||||
loading: true,
|
||||
pendingTitle: '',
|
||||
pendingDescription: '',
|
||||
selectedStack: '',
|
||||
selectedBoard: '',
|
||||
creating: false,
|
||||
created: false,
|
||||
newCard: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isBoardAndStackChoosen() {
|
||||
return !(this.selectedBoard === '' || this.selectedStack === '')
|
||||
},
|
||||
},
|
||||
beforeMount() {
|
||||
this.fetchBoards()
|
||||
},
|
||||
mounted() {
|
||||
this.pendingTitle = this.title
|
||||
this.pendingDescription = this.description
|
||||
},
|
||||
methods: {
|
||||
fetchBoards() {
|
||||
axios.get(generateUrl('/apps/deck/boards')).then((response) => {
|
||||
this.boards = response.data
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
async fetchCardsFromBoard(board) {
|
||||
try {
|
||||
this.cardsFromBoard = []
|
||||
const url = generateUrl('/apps/deck/stacks/' + board.id)
|
||||
const response = await axios.get(url)
|
||||
response.data.forEach(stack => {
|
||||
this.stacksFromBoard.push(stack)
|
||||
})
|
||||
} catch (err) {
|
||||
return err
|
||||
}
|
||||
|
||||
},
|
||||
close() {
|
||||
this.$emit('close')
|
||||
this.$root.$emit('close')
|
||||
},
|
||||
async select() {
|
||||
this.creating = true
|
||||
const response = await cardApi.addCard({
|
||||
boardId: this.selectedBoard.id,
|
||||
stackId: this.selectedStack.id,
|
||||
title: this.pendingTitle,
|
||||
description: this.pendingDescription,
|
||||
})
|
||||
this.newCard = response
|
||||
this.creating = false
|
||||
this.created = true
|
||||
// We do not emit here since we want to give feedback to the user that the card was created
|
||||
// this.$root.$emit('select', createdCard)
|
||||
},
|
||||
openNewCard() {
|
||||
window.location = generateUrl('/apps/deck') + `#/board/${this.selectedBoard.id}/card/${this.newCard.id}`
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.modal-scroller {
|
||||
overflow: scroll;
|
||||
max-height: calc(80vh - 40px);
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
#modal-inner {
|
||||
width: 90vw;
|
||||
max-width: 400px;
|
||||
padding: 10px;
|
||||
min-height: 200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.multiselect-board, .multiselect-list, input, textarea {
|
||||
width: 100%;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
ul {
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
li:hover, li:focus {
|
||||
background-color: var(--color-background-dark);
|
||||
}
|
||||
|
||||
.board-bullet {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.card-selector:deep(.modal-container) {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.empty-content {
|
||||
margin-top: 5vh !important;
|
||||
|
||||
&:deep(h2) {
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -66,12 +66,7 @@ import { NcModal } from '@nextcloud/vue'
|
||||
import attachmentUpload from '../mixins/attachmentUpload.js'
|
||||
import { loadState } from '@nextcloud/initial-state'
|
||||
|
||||
let maxUploadSizeState
|
||||
try {
|
||||
maxUploadSizeState = loadState('deck', 'maxUploadSize')
|
||||
} catch (e) {
|
||||
maxUploadSizeState = -1
|
||||
}
|
||||
const maxUploadSizeState = loadState('deck', 'maxUploadSize', -1)
|
||||
|
||||
export default {
|
||||
name: 'AttachmentDragAndDrop',
|
||||
|
||||
@@ -30,7 +30,9 @@
|
||||
{{ t('deck', 'Add card') }}
|
||||
</NcActionButton>
|
||||
</NcActions>
|
||||
<CardCreateDialog v-if="showAddCardModal" @close="clickHideAddCardModel" />
|
||||
<NcModal v-if="showAddCardModal" class="card-selector" @close="clickHideAddCardModel">
|
||||
<CreateNewCardCustomPicker show-created-notice @cancel="clickHideAddCardModel" />
|
||||
</NcModal>
|
||||
</div>
|
||||
<div v-else-if="board" class="board-title">
|
||||
<div :style="{backgroundColor: '#' + board.color}" class="board-bullet" />
|
||||
@@ -218,9 +220,8 @@
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import { NcActions, NcActionButton, NcAvatar, NcButton, NcPopover } from '@nextcloud/vue'
|
||||
import { NcActions, NcActionButton, NcAvatar, NcButton, NcPopover, NcModal } from '@nextcloud/vue'
|
||||
import labelStyle from '../mixins/labelStyle.js'
|
||||
import CardCreateDialog from '../CardCreateDialog.vue'
|
||||
import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
|
||||
import FilterIcon from 'vue-material-design-icons/Filter.vue'
|
||||
import FilterOffIcon from 'vue-material-design-icons/FilterOff.vue'
|
||||
@@ -228,16 +229,18 @@ import ArrowCollapseVerticalIcon from 'vue-material-design-icons/ArrowCollapseVe
|
||||
import ArrowExpandVerticalIcon from 'vue-material-design-icons/ArrowExpandVertical.vue'
|
||||
import SessionList from './SessionList.vue'
|
||||
import { isNotifyPushEnabled } from '../sessions.js'
|
||||
import CreateNewCardCustomPicker from '../views/CreateNewCardCustomPicker.vue'
|
||||
|
||||
export default {
|
||||
name: 'Controls',
|
||||
components: {
|
||||
CreateNewCardCustomPicker,
|
||||
NcModal,
|
||||
NcActions,
|
||||
NcActionButton,
|
||||
NcButton,
|
||||
NcPopover,
|
||||
NcAvatar,
|
||||
CardCreateDialog,
|
||||
ArchiveIcon,
|
||||
FilterIcon,
|
||||
FilterOffIcon,
|
||||
|
||||
132
src/components/card/AssignmentSelector.vue
Normal file
132
src/components/card/AssignmentSelector.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div class="selector-wrapper" :aria-label="t('deck', 'Assign to users/groups/circles')">
|
||||
<div class="selector-wrapper--icon">
|
||||
<AccountMultiple :size="20" />
|
||||
</div>
|
||||
<NcMultiselect 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…')"
|
||||
label="displayname"
|
||||
track-by="multiselectKey"
|
||||
@select="onSelect"
|
||||
@remove="onRemove">
|
||||
<template #tag="scope">
|
||||
<div class="avatarlist--inline">
|
||||
<NcAvatar :user="scope.option.uid"
|
||||
:display-name="scope.option.displayname"
|
||||
:size="24"
|
||||
:is-no-user="scope.option.isNoUser"
|
||||
:disable-menu="true" />
|
||||
</div>
|
||||
</template>
|
||||
</NcMultiselect>
|
||||
<div v-else class="avatar-list--readonly">
|
||||
<NcAvatar v-for="option in assignedUsers"
|
||||
:key="option.primaryKey"
|
||||
:user="option.uid"
|
||||
:display-name="option.displayname"
|
||||
:is-no-user="option.isNoUser"
|
||||
:size="32" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue'
|
||||
import { NcAvatar, NcMultiselect } from '@nextcloud/vue'
|
||||
import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'AssignmentSelector',
|
||||
components: {
|
||||
AccountMultiple,
|
||||
NcMultiselect,
|
||||
NcAvatar,
|
||||
},
|
||||
props: {
|
||||
card: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
canEdit: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
assignables: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
assignedUsers: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formatedAssignables() {
|
||||
return this.assignables.map(item => {
|
||||
const assignable = {
|
||||
...item,
|
||||
user: item.primaryKey,
|
||||
displayName: item.displayname,
|
||||
icon: 'icon-user',
|
||||
isNoUser: false,
|
||||
multiselectKey: item.type + ':' + item.uid,
|
||||
}
|
||||
|
||||
if (item.type === 1) {
|
||||
assignable.icon = 'icon-group'
|
||||
assignable.isNoUser = true
|
||||
}
|
||||
if (item.type === 7) {
|
||||
assignable.icon = 'icon-circles'
|
||||
assignable.isNoUser = true
|
||||
}
|
||||
|
||||
return assignable
|
||||
})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
card() {
|
||||
this.initialize()
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initialize()
|
||||
},
|
||||
methods: {
|
||||
async initialize() {
|
||||
if (!this.card) {
|
||||
return
|
||||
}
|
||||
|
||||
if (this.card.assignedUsers && this.card.assignedUsers.length > 0) {
|
||||
this.assignedUsers = this.card.assignedUsers.map((item) => ({
|
||||
...item.participant,
|
||||
isNoUser: item.participant.type !== 0,
|
||||
multiselectKey: item.participant.type + ':' + item.participant.primaryKey,
|
||||
}))
|
||||
} else {
|
||||
this.assignedUsers = []
|
||||
}
|
||||
},
|
||||
onSelect(user) {
|
||||
this.$emit('select', user)
|
||||
},
|
||||
onRemove(user) {
|
||||
this.$emit('remove', user)
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../css/selector';
|
||||
</style>
|
||||
@@ -113,7 +113,7 @@ import { mapState, mapActions } from 'vuex'
|
||||
import { loadState } from '@nextcloud/initial-state'
|
||||
import attachmentUpload from '../../mixins/attachmentUpload.js'
|
||||
import { getFilePickerBuilder } from '@nextcloud/dialogs'
|
||||
const maxUploadSizeState = loadState('deck', 'maxUploadSize')
|
||||
const maxUploadSizeState = loadState('deck', 'maxUploadSize', -1)
|
||||
|
||||
const picker = getFilePickerBuilder(t('deck', 'File to share'))
|
||||
.setMultiSelect(false)
|
||||
|
||||
@@ -22,96 +22,20 @@
|
||||
|
||||
<template>
|
||||
<div v-if="copiedCard">
|
||||
<div class="section-wrapper">
|
||||
<div v-tooltip="t('deck', 'Tags')" class="section-label icon-tag">
|
||||
<span class="hidden-visually">{{ t('deck', 'Tags') }}</span>
|
||||
</div>
|
||||
<div class="section-details">
|
||||
<NcMultiselect v-model="assignedLabels"
|
||||
:multiple="true"
|
||||
:disabled="!canEdit"
|
||||
:options="labelsSorted"
|
||||
:placeholder="t('deck', 'Assign a tag to this card…')"
|
||||
:taggable="true"
|
||||
label="title"
|
||||
track-by="id"
|
||||
@select="addLabelToCard"
|
||||
@remove="removeLabelFromCard"
|
||||
@tag="addLabelToBoardAndCard">
|
||||
<template #option="scope">
|
||||
<div :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">
|
||||
{{ scope.option.title }}
|
||||
</div>
|
||||
</template>
|
||||
<template #tag="scope">
|
||||
<div :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">
|
||||
{{ scope.option.title }}
|
||||
</div>
|
||||
</template>
|
||||
</NcMultiselect>
|
||||
</div>
|
||||
</div>
|
||||
<TagSelector :card="card"
|
||||
:labels="currentBoard.labels"
|
||||
:disabled="!canEdit"
|
||||
@select="addLabelToCard"
|
||||
@remove="removeLabelFromCard"
|
||||
@newtag="addLabelToBoardAndCard" />
|
||||
|
||||
<div class="section-wrapper">
|
||||
<div v-tooltip="t('deck', 'Assign to users')" class="section-label icon-group">
|
||||
<span class="hidden-visually">{{ t('deck', 'Assign to users/groups/circles') }}</span>
|
||||
</div>
|
||||
<div class="section-details">
|
||||
<NcMultiselect v-if="canEdit"
|
||||
v-model="assignedUsers"
|
||||
:multiple="true"
|
||||
:options="formatedAssignables"
|
||||
:user-select="true"
|
||||
:auto-limit="false"
|
||||
:placeholder="t('deck', 'Assign a user to this card…')"
|
||||
label="displayname"
|
||||
track-by="multiselectKey"
|
||||
@select="assignUserToCard"
|
||||
@remove="removeUserFromCard">
|
||||
<template #tag="scope">
|
||||
<div class="avatarlist--inline">
|
||||
<NcAvatar :user="scope.option.uid"
|
||||
:display-name="scope.option.displayname"
|
||||
:size="24"
|
||||
:is-no-user="scope.option.isNoUser"
|
||||
:disable-menu="true" />
|
||||
</div>
|
||||
</template>
|
||||
</NcMultiselect>
|
||||
<div v-else class="avatar-list--readonly">
|
||||
<NcAvatar v-for="option in assignedUsers"
|
||||
:key="option.primaryKey"
|
||||
:user="option.uid"
|
||||
:display-name="option.displayname"
|
||||
:is-no-user="option.isNoUser"
|
||||
:size="32" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AssignmentSelector :card="card"
|
||||
:assignables="assignables"
|
||||
:can-edit="canEdit"
|
||||
@select="assignUserToCard"
|
||||
@remove="removeUserFromCard" />
|
||||
|
||||
<div class="section-wrapper">
|
||||
<div v-tooltip="t('deck', 'Due date')" class="section-label icon-calendar-dark">
|
||||
<span class="hidden-visually">{{ t('deck', 'Due date') }}</span>
|
||||
</div>
|
||||
<div class="section-details">
|
||||
<NcDatetimePicker v-model="duedate"
|
||||
:placeholder="t('deck', 'Set a due date')"
|
||||
type="datetime"
|
||||
:minute-step="5"
|
||||
:show-second="false"
|
||||
:lang="lang"
|
||||
:formatter="format"
|
||||
:disabled="saving || !canEdit"
|
||||
:shortcuts="shortcuts"
|
||||
:append-to-body="true"
|
||||
confirm />
|
||||
<NcActions v-if="canEdit">
|
||||
<NcActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">
|
||||
{{ t('deck', 'Remove due date') }}
|
||||
</NcActionButton>
|
||||
</NcActions>
|
||||
</div>
|
||||
</div>
|
||||
<DueDateSelector :card="card" :can-edit="canEdit && !saving" @change="updateCardDue" />
|
||||
|
||||
<div v-if="projectsEnabled" class="section-wrapper">
|
||||
<CollectionList v-if="card.id"
|
||||
@@ -120,35 +44,36 @@
|
||||
type="deck-card" />
|
||||
</div>
|
||||
|
||||
<Description :key="card.id" :card="card" @change="descriptionChanged" />
|
||||
<Description :key="card.id"
|
||||
:card="card"
|
||||
:can-edit="canEdit"
|
||||
show-attachments
|
||||
@change="descriptionChanged" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import moment from '@nextcloud/moment'
|
||||
import { NcAvatar, NcActions, NcActionButton, NcMultiselect, NcDatetimePicker } from '@nextcloud/vue'
|
||||
import { loadState } from '@nextcloud/initial-state'
|
||||
|
||||
import { CollectionList } from 'nextcloud-vue-collections'
|
||||
import Color from '../../mixins/color.js'
|
||||
import {
|
||||
getLocale,
|
||||
getDayNamesMin,
|
||||
getFirstDay,
|
||||
getMonthNamesShort,
|
||||
} from '@nextcloud/l10n'
|
||||
import Description from './Description.vue'
|
||||
import TagSelector from './TagSelector.vue'
|
||||
import AssignmentSelector from './AssignmentSelector.vue'
|
||||
import DueDateSelector from './DueDateSelector.vue'
|
||||
|
||||
export default {
|
||||
name: 'CardSidebarTabDetails',
|
||||
components: {
|
||||
DueDateSelector,
|
||||
AssignmentSelector,
|
||||
TagSelector,
|
||||
Description,
|
||||
NcMultiselect,
|
||||
NcDatetimePicker,
|
||||
NcActions,
|
||||
NcActionButton,
|
||||
NcAvatar,
|
||||
CollectionList,
|
||||
},
|
||||
mixins: [Color],
|
||||
@@ -161,68 +86,10 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
saving: false,
|
||||
assignedUsers: null,
|
||||
addedLabelToCard: null,
|
||||
copiedCard: null,
|
||||
assignedLabels: null,
|
||||
locale: getLocale(),
|
||||
projectsEnabled: loadState('core', 'projects_enabled', false),
|
||||
lang: {
|
||||
days: getDayNamesMin(),
|
||||
months: getMonthNamesShort(),
|
||||
formatLocale: {
|
||||
firstDayOfWeek: getFirstDay() === 0 ? 7 : getFirstDay(),
|
||||
},
|
||||
placeholder: {
|
||||
date: t('deck', 'Select Date'),
|
||||
},
|
||||
},
|
||||
format: {
|
||||
stringify: this.stringify,
|
||||
parse: this.parse,
|
||||
},
|
||||
shortcuts: [
|
||||
{
|
||||
text: t('deck', 'Today'),
|
||||
onClick() {
|
||||
const date = new Date()
|
||||
date.setDate(date.getDate())
|
||||
date.setHours(23)
|
||||
date.setMinutes(59)
|
||||
return date
|
||||
},
|
||||
},
|
||||
{
|
||||
text: t('deck', 'Tomorrow'),
|
||||
onClick() {
|
||||
const date = new Date()
|
||||
date.setDate(date.getDate() + 1)
|
||||
date.setHours(23)
|
||||
date.setMinutes(59)
|
||||
return date
|
||||
},
|
||||
},
|
||||
{
|
||||
text: t('deck', 'Next week'),
|
||||
onClick() {
|
||||
const date = new Date()
|
||||
date.setDate(date.getDate() + 7)
|
||||
date.setHours(23)
|
||||
date.setMinutes(59)
|
||||
return date
|
||||
},
|
||||
},
|
||||
{
|
||||
text: t('deck', 'Next month'),
|
||||
onClick() {
|
||||
const date = new Date()
|
||||
date.setDate(date.getDate() + 30)
|
||||
date.setHours(23)
|
||||
date.setMinutes(59)
|
||||
return date
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -230,29 +97,6 @@ export default {
|
||||
currentBoard: state => state.currentBoard,
|
||||
}),
|
||||
...mapGetters(['canEdit', 'assignables']),
|
||||
formatedAssignables() {
|
||||
return this.assignables.map(item => {
|
||||
const assignable = {
|
||||
...item,
|
||||
user: item.primaryKey,
|
||||
displayName: item.displayname,
|
||||
icon: 'icon-user',
|
||||
isNoUser: false,
|
||||
multiselectKey: item.type + ':' + item.uid,
|
||||
}
|
||||
|
||||
if (item.type === 1) {
|
||||
assignable.icon = 'icon-group'
|
||||
assignable.isNoUser = true
|
||||
}
|
||||
if (item.type === 7) {
|
||||
assignable.icon = 'icon-circles'
|
||||
assignable.isNoUser = true
|
||||
}
|
||||
|
||||
return assignable
|
||||
})
|
||||
},
|
||||
cardDetailsInModal: {
|
||||
get() {
|
||||
return this.$store.getters.config('cardDetailsInModal')
|
||||
@@ -261,19 +105,6 @@ export default {
|
||||
this.$store.dispatch('setConfig', { cardDetailsInModal: newValue })
|
||||
},
|
||||
},
|
||||
duedate: {
|
||||
get() {
|
||||
return this.card.duedate ? new Date(this.card.duedate) : null
|
||||
},
|
||||
async set(val) {
|
||||
this.saving = true
|
||||
await this.$store.dispatch('updateCardDue', {
|
||||
...this.copiedCard,
|
||||
duedate: val ? (new Date(val)).toISOString() : null,
|
||||
})
|
||||
this.saving = false
|
||||
},
|
||||
},
|
||||
|
||||
labelsSorted() {
|
||||
return [...this.currentBoard.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
|
||||
@@ -289,6 +120,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
descriptionChanged(newDesc) {
|
||||
this.$store.dispatch('updateCardDesc', { ...this.card, description: newDesc })
|
||||
this.copiedCard.description = newDesc
|
||||
},
|
||||
async initialize() {
|
||||
@@ -297,22 +129,15 @@ export default {
|
||||
}
|
||||
|
||||
this.copiedCard = JSON.parse(JSON.stringify(this.card))
|
||||
this.assignedLabels = [...this.card.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
|
||||
|
||||
if (this.card.assignedUsers && this.card.assignedUsers.length > 0) {
|
||||
this.assignedUsers = this.card.assignedUsers.map((item) => ({
|
||||
...item.participant,
|
||||
isNoUser: item.participant.type !== 0,
|
||||
multiselectKey: item.participant.type + ':' + item.participant.primaryKey,
|
||||
}))
|
||||
} else {
|
||||
this.assignedUsers = []
|
||||
}
|
||||
},
|
||||
|
||||
removeDue() {
|
||||
this.copiedCard.duedate = null
|
||||
this.$store.dispatch('updateCardDue', this.copiedCard)
|
||||
async updateCardDue(val) {
|
||||
this.saving = true
|
||||
await this.$store.dispatch('updateCardDue', {
|
||||
...this.copiedCard,
|
||||
duedate: val ? (new Date(val)).toISOString() : null,
|
||||
})
|
||||
this.saving = false
|
||||
},
|
||||
|
||||
assignUserToCard(user) {
|
||||
@@ -345,14 +170,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.assignedLabels.push(newLabel)
|
||||
},
|
||||
|
||||
removeLabelFromCard(removedLabel) {
|
||||
@@ -411,16 +235,6 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
overflow: hidden;
|
||||
padding: 0px 5px;
|
||||
border-radius: 15px;
|
||||
font-size: 85%;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.avatarLabel {
|
||||
padding: 6px
|
||||
}
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
{{ t('deck', 'View description') }}
|
||||
</NcActionButton>
|
||||
</NcActions>
|
||||
<NcActions v-if="canEdit">
|
||||
<NcActions v-if="canEdit && !!card.id">
|
||||
<NcActionButton v-if="descriptionEditing" @click="showAttachmentModal()">
|
||||
<template #icon>
|
||||
<PaperclipIcon :size="24" decorative />
|
||||
@@ -70,7 +70,7 @@
|
||||
@blur="saveDescription" />
|
||||
</template>
|
||||
|
||||
<NcModal v-if="modalShow" :title="t('deck', 'Choose attachment')" @close="modalShow=false">
|
||||
<NcModal v-if="modalShow && !!card.id" :title="t('deck', 'Choose attachment')" @close="modalShow=false">
|
||||
<div class="modal__content">
|
||||
<h3>{{ t('deck', 'Choose attachment') }}</h3>
|
||||
<AttachmentList :card-id="card.id"
|
||||
@@ -89,7 +89,6 @@ import AttachmentList from './AttachmentList.vue'
|
||||
import { NcActions, NcActionButton, NcModal } from '@nextcloud/vue'
|
||||
import { formatFileSize } from '@nextcloud/files'
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import PaperclipIcon from 'vue-material-design-icons/Paperclip.vue'
|
||||
|
||||
const markdownIt = new MarkdownIt({
|
||||
@@ -119,6 +118,14 @@ export default {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
canEdit: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showAttachments: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -144,13 +151,6 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
currentBoard: state => state.currentBoard,
|
||||
}),
|
||||
...mapGetters(['canEdit']),
|
||||
attachments() {
|
||||
return [...this.$store.getters.attachmentsByCard(this.id)].sort((a, b) => b.id - a.id)
|
||||
},
|
||||
mimetypeForAttachment() {
|
||||
return (mimetype) => {
|
||||
const url = OC.MimeType.getIconUrl(mimetype)
|
||||
@@ -278,7 +278,7 @@ export default {
|
||||
}
|
||||
return match
|
||||
})
|
||||
this.$store.dispatch('updateCardDesc', { ...this.card, description: updatedDescription })
|
||||
this.$emit('change', updatedDescription)
|
||||
}
|
||||
},
|
||||
async saveDescription() {
|
||||
@@ -286,10 +286,9 @@ export default {
|
||||
return
|
||||
}
|
||||
this.descriptionSaving = true
|
||||
await this.$store.dispatch('updateCardDesc', { ...this.card, description: this.description })
|
||||
this.$emit('change', this.description)
|
||||
this.descriptionLastEdit = 0
|
||||
this.descriptionSaving = false
|
||||
this.$emit('change', this.description)
|
||||
},
|
||||
updateDescription() {
|
||||
this.descriptionLastEdit = Date.now()
|
||||
@@ -368,6 +367,10 @@ h5 {
|
||||
}
|
||||
}
|
||||
|
||||
.description__text :deep(.ProseMirror) {
|
||||
padding-bottom: 44px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
@import '~easymde/dist/easymde.min.css';
|
||||
|
||||
134
src/components/card/DueDateSelector.vue
Normal file
134
src/components/card/DueDateSelector.vue
Normal file
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="selector-wrapper" :aria-label="t('deck', 'Assign a due date to this card…')">
|
||||
<div class="selector-wrapper--icon">
|
||||
<Calendar :size="20" />
|
||||
</div>
|
||||
<div class="duedate-selector">
|
||||
<NcDatetimePicker v-model="duedate"
|
||||
:placeholder="t('deck', 'Set a due date')"
|
||||
type="datetime"
|
||||
:minute-step="5"
|
||||
:show-second="false"
|
||||
:lang="lang"
|
||||
:formatter="format"
|
||||
:disabled="!canEdit"
|
||||
:shortcuts="shortcuts"
|
||||
:append-to-body="true"
|
||||
confirm />
|
||||
<NcActions v-if="canEdit">
|
||||
<NcActionButton v-if="duedate" icon="icon-delete" @click="removeDue()">
|
||||
{{ t('deck', 'Remove due date') }}
|
||||
</NcActionButton>
|
||||
</NcActions>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue'
|
||||
import { NcActionButton, NcActions, NcDatetimePicker } from '@nextcloud/vue'
|
||||
import { getDayNamesMin, getFirstDay, getMonthNamesShort } from '@nextcloud/l10n'
|
||||
import Calendar from 'vue-material-design-icons/Calendar.vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DueDateSelector',
|
||||
components: {
|
||||
Calendar,
|
||||
NcActions,
|
||||
NcActionButton,
|
||||
NcDatetimePicker,
|
||||
},
|
||||
props: {
|
||||
card: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
canEdit: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lang: {
|
||||
days: getDayNamesMin(),
|
||||
months: getMonthNamesShort(),
|
||||
formatLocale: {
|
||||
firstDayOfWeek: getFirstDay() === 0 ? 7 : getFirstDay(),
|
||||
},
|
||||
placeholder: {
|
||||
date: t('deck', 'Select Date'),
|
||||
},
|
||||
},
|
||||
format: {
|
||||
stringify: this.stringify,
|
||||
parse: this.parse,
|
||||
},
|
||||
shortcuts: [
|
||||
{
|
||||
text: t('deck', 'Today'),
|
||||
onClick() {
|
||||
const date = new Date()
|
||||
date.setDate(date.getDate())
|
||||
date.setHours(23)
|
||||
date.setMinutes(59)
|
||||
return date
|
||||
},
|
||||
},
|
||||
{
|
||||
text: t('deck', 'Tomorrow'),
|
||||
onClick() {
|
||||
const date = new Date()
|
||||
date.setDate(date.getDate() + 1)
|
||||
date.setHours(23)
|
||||
date.setMinutes(59)
|
||||
return date
|
||||
},
|
||||
},
|
||||
{
|
||||
text: t('deck', 'Next week'),
|
||||
onClick() {
|
||||
const date = new Date()
|
||||
date.setDate(date.getDate() + 7)
|
||||
date.setHours(23)
|
||||
date.setMinutes(59)
|
||||
return date
|
||||
},
|
||||
},
|
||||
{
|
||||
text: t('deck', 'Next month'),
|
||||
onClick() {
|
||||
const date = new Date()
|
||||
date.setDate(date.getDate() + 30)
|
||||
date.setHours(23)
|
||||
date.setMinutes(59)
|
||||
return date
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
duedate: {
|
||||
get() {
|
||||
return this.card.duedate ? new Date(this.card.duedate) : null
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('change', val)
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
removeDue() {
|
||||
this.duedate = null
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import '../../css/selector';
|
||||
|
||||
.duedate-selector {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
110
src/components/card/TagSelector.vue
Normal file
110
src/components/card/TagSelector.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div class="selector-wrapper" :aria-label="t('deck', 'Assign a tag to this card…')">
|
||||
<div class="selector-wrapper--icon">
|
||||
<TagMultiple :size="20" />
|
||||
</div>
|
||||
<NcMultiselect v-model="assignedLabels"
|
||||
class="selector-wrapper--selector"
|
||||
:multiple="true"
|
||||
:disabled="disabled"
|
||||
:options="labelsSorted"
|
||||
:placeholder="t('deck', 'Assign a tag to this card…')"
|
||||
:taggable="true"
|
||||
label="title"
|
||||
track-by="id"
|
||||
@select="onSelect"
|
||||
@remove="onRemove"
|
||||
@tag="onNewTag">
|
||||
<template #option="scope">
|
||||
<div :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">
|
||||
{{ scope.option.title }}
|
||||
</div>
|
||||
</template>
|
||||
<template #tag="scope">
|
||||
<div :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">
|
||||
{{ scope.option.title }}
|
||||
</div>
|
||||
</template>
|
||||
</NcMultiselect>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { NcMultiselect } 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 },
|
||||
mixins: [Color],
|
||||
props: {
|
||||
card: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
labels: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
assignedLabels: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
labelsSorted() {
|
||||
return [...this.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
card() {
|
||||
this.initialize()
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initialize()
|
||||
},
|
||||
methods: {
|
||||
async initialize() {
|
||||
if (!this.card) {
|
||||
return
|
||||
}
|
||||
|
||||
this.assignedLabels = [...this.card.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
|
||||
},
|
||||
onSelect(newLabel) {
|
||||
this.$emit('select', newLabel)
|
||||
},
|
||||
onRemove(removedLabel) {
|
||||
this.$emit('remove', removedLabel)
|
||||
},
|
||||
async onNewTag(name) {
|
||||
this.$emit('newtag', name)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../css/selector';
|
||||
|
||||
.multiselect--active {
|
||||
z-index: 10022;
|
||||
}
|
||||
|
||||
.tag {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
overflow: hidden;
|
||||
padding: 0px 5px;
|
||||
border-radius: 15px;
|
||||
font-size: 85%;
|
||||
margin-right: 3px;
|
||||
}
|
||||
</style>
|
||||
@@ -19,7 +19,7 @@
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { registerWidget } from '@nextcloud/vue/dist/Components/NcRichText.js'
|
||||
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'
|
||||
@@ -35,6 +35,11 @@ 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 }) => {
|
||||
// trick to change the wrapper element size, otherwise it always is 100%
|
||||
@@ -82,3 +87,19 @@ registerWidget('deck-comment', (el, { richObjectType, richObject, accessible })
|
||||
},
|
||||
}).$mount(el)
|
||||
})
|
||||
|
||||
registerCustomPickerElement('create-new-deck-card', async (el, { providerId, accessible }) => {
|
||||
const { default: Vue } = await import(/* webpackChunkName: "reference-picker-lazy" */'vue')
|
||||
Vue.mixin({ methods: { t, n } })
|
||||
const { default: CreateNewCardCustomPicker } = await import(/* webpackChunkName: "reference-picker-lazy" */'./views/CreateNewCardCustomPicker.vue')
|
||||
const Element = Vue.extend(CreateNewCardCustomPicker)
|
||||
const vueElement = new Element({
|
||||
propsData: {
|
||||
providerId,
|
||||
accessible,
|
||||
},
|
||||
}).$mount(el)
|
||||
return new NcCustomPickerRenderResult(vueElement.$el, vueElement)
|
||||
}, (el, renderResult) => {
|
||||
renderResult.object.$destroy()
|
||||
}, 'normal')
|
||||
|
||||
354
src/views/CreateNewCardCustomPicker.vue
Normal file
354
src/views/CreateNewCardCustomPicker.vue
Normal file
@@ -0,0 +1,354 @@
|
||||
<template>
|
||||
<div class="modal-scroller">
|
||||
<div v-if="!creating && !created" id="modal-inner" :class="{ 'icon-loading': loading }">
|
||||
<h2>{{ t('deck', 'Create a new card') }}</h2>
|
||||
<input ref="cardTitleInput"
|
||||
v-model="card.title"
|
||||
v-focus
|
||||
type="text"
|
||||
class="card-title"
|
||||
:placeholder="t('deck', 'Card title')"
|
||||
:disabled="loading">
|
||||
|
||||
<div class="row">
|
||||
<div class="col selector-wrapper">
|
||||
<div class="selector-wrapper--icon">
|
||||
<DeckIcon :size="20" />
|
||||
</div>
|
||||
<NcMultiselect v-model="selectedBoard"
|
||||
:placeholder="t('deck', 'Select a board')"
|
||||
:options="boards"
|
||||
:disabled="loading"
|
||||
label="title"
|
||||
class="selector-wrapper--selector multiselect-board"
|
||||
@select="fetchBoardDetails">
|
||||
<template slot="singleLabel" slot-scope="props">
|
||||
<span>
|
||||
<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
|
||||
<span>{{ props.option.title }}</span>
|
||||
</span>
|
||||
</template>
|
||||
<template slot="option" slot-scope="props">
|
||||
<span>
|
||||
<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
|
||||
<span>{{ props.option.title }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</NcMultiselect>
|
||||
</div>
|
||||
|
||||
<div class="col selector-wrapper">
|
||||
<div class="selector-wrapper--icon">
|
||||
<FormatColumnsIcon :size="20" />
|
||||
</div>
|
||||
<NcMultiselect 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" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TagSelector :card="card"
|
||||
:labels="labels"
|
||||
:disabled="loading || !selectedBoard"
|
||||
@select="onSelectLabel"
|
||||
@remove="onRemoveLabel"
|
||||
@newtag="addLabelToBoardAndCard" />
|
||||
|
||||
<AssignmentSelector :card="card"
|
||||
:assignables="assignables"
|
||||
@select="onSelectUser"
|
||||
@remove="onRemoveUser" />
|
||||
|
||||
<DueDateSelector :card="card" :can-edit="!loading && !!selectedBoard" @change="updateCardDue" />
|
||||
|
||||
<Description :key="card.id"
|
||||
:card="card"
|
||||
@change="descriptionChanged" />
|
||||
|
||||
<div class="modal-buttons">
|
||||
<NcButton @click="close">
|
||||
{{ t('deck', 'Cancel') }}
|
||||
</NcButton>
|
||||
<NcButton :disabled="loading || !isBoardAndStackChoosen"
|
||||
type="primary"
|
||||
@click="createCard">
|
||||
{{ t('deck', 'Create card') }}
|
||||
</NcButton>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else id="modal-inner">
|
||||
<NcEmptyContent v-if="creating">
|
||||
<template #icon>
|
||||
<NcLoadingIcon />
|
||||
</template>
|
||||
<template #title>
|
||||
{{ t('deck', 'Creating the new card …') }}
|
||||
</template>
|
||||
</NcEmptyContent>
|
||||
<NcEmptyContent v-else-if="created && showCreatedNotice">
|
||||
<template #icon>
|
||||
<CardPlusOutline />
|
||||
</template>
|
||||
<template #title>
|
||||
{{ t('deck', 'Card "{card}" was added to "{board}"', { card: card.title, board: selectedBoard.title }) }}
|
||||
</template>
|
||||
<template #action>
|
||||
<button class="primary" @click="openNewCard">
|
||||
{{ t('deck', 'Open card') }}
|
||||
</button>
|
||||
<button @click="close">
|
||||
{{ t('deck', 'Close') }}
|
||||
</button>
|
||||
</template>
|
||||
</NcEmptyContent>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
import {
|
||||
NcButton,
|
||||
NcMultiselect,
|
||||
NcEmptyContent,
|
||||
NcLoadingIcon,
|
||||
} from '@nextcloud/vue'
|
||||
import axios from '@nextcloud/axios'
|
||||
import { CardApi } from '../services/CardApi.js'
|
||||
import Color from '../mixins/color.js'
|
||||
import AssignmentSelector from '../components/card/AssignmentSelector.vue'
|
||||
import TagSelector from '../components/card/TagSelector.vue'
|
||||
import { BoardApi } from '../services/BoardApi.js'
|
||||
import DueDateSelector from '../components/card/DueDateSelector.vue'
|
||||
import Description from '../components/card/Description.vue'
|
||||
import CardPlusOutline from 'vue-material-design-icons/CardPlusOutline.vue'
|
||||
import FormatColumnsIcon from 'vue-material-design-icons/FormatColumns.vue'
|
||||
import DeckIcon from '../components/icons/DeckIcon.vue'
|
||||
|
||||
const cardApi = new CardApi()
|
||||
const apiClient = new BoardApi()
|
||||
|
||||
export default {
|
||||
name: 'CreateNewCardCustomPicker',
|
||||
components: {
|
||||
DeckIcon,
|
||||
FormatColumnsIcon,
|
||||
CardPlusOutline,
|
||||
Description,
|
||||
DueDateSelector,
|
||||
TagSelector,
|
||||
AssignmentSelector,
|
||||
NcButton,
|
||||
NcMultiselect,
|
||||
NcEmptyContent,
|
||||
NcLoadingIcon,
|
||||
},
|
||||
mixins: [Color],
|
||||
props: {
|
||||
showCreatedNotice: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
action: {
|
||||
type: String,
|
||||
default: t('deck', 'Create card'),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
card: {
|
||||
title: '',
|
||||
description: '',
|
||||
labels: [],
|
||||
assignedUsers: [],
|
||||
duedate: null,
|
||||
},
|
||||
boards: [],
|
||||
stacksFromBoard: [],
|
||||
labels: [],
|
||||
selectedUsers: [],
|
||||
loading: true,
|
||||
selectedStack: '',
|
||||
selectedBoard: '',
|
||||
selectedLabels: [],
|
||||
boardUsers: [],
|
||||
boardAcl: [],
|
||||
creating: false,
|
||||
created: false,
|
||||
newCard: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isBoardAndStackChoosen() {
|
||||
return !(this.selectedBoard === '' || this.selectedStack === '')
|
||||
},
|
||||
assignables() {
|
||||
return [
|
||||
...this.boardUsers.map((user) => ({ ...user, type: 0 })),
|
||||
...this.boardAcl.filter((acl) => acl.type === 1 && typeof acl.participant === 'object').map((group) => ({ ...group.participant, type: 1 })),
|
||||
...this.boardAcl.filter((acl) => acl.type === 7 && typeof acl.participant === 'object').map((circle) => ({ ...circle.participant, type: 7 })),
|
||||
]
|
||||
},
|
||||
},
|
||||
beforeMount() {
|
||||
this.$set(this.card, 'title', this.title)
|
||||
this.$set(this.card, 'description', this.description)
|
||||
this.fetchBoards()
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.cardTitleInput.focus()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
fetchBoards() {
|
||||
axios.get(generateUrl('/apps/deck/boards')).then((response) => {
|
||||
this.boards = response.data.filter((board) => {
|
||||
return board?.permissions?.PERMISSION_EDIT
|
||||
})
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
async fetchBoardDetails(board) {
|
||||
try {
|
||||
const url = generateUrl('/apps/deck/boards/' + board.id)
|
||||
const response = await axios.get(url)
|
||||
this.stacksFromBoard = response.data.stacks
|
||||
this.labels = response.data.labels
|
||||
this.boardUsers = response.data.users
|
||||
this.boardAcl = response.data.acl
|
||||
} catch (err) {
|
||||
return err
|
||||
}
|
||||
|
||||
},
|
||||
close() {
|
||||
this.$emit('cancel')
|
||||
},
|
||||
async createCard() {
|
||||
this.creating = true
|
||||
const response = await cardApi.addCard({
|
||||
boardId: this.selectedBoard.id,
|
||||
stackId: this.selectedStack.id,
|
||||
title: this.card.title,
|
||||
description: this.card.description,
|
||||
duedate: this.card.duedate,
|
||||
labels: this.card.labels.map(label => label.id),
|
||||
users: this.card.assignedUsers.map(user => { return { id: user.uid, type: user.type } }),
|
||||
})
|
||||
this.newCard = response
|
||||
this.creating = false
|
||||
this.created = true
|
||||
this.$emit('submit', window.location.protocol + '//' + window.location.host + generateUrl('/apps/deck') + `/card/${this.newCard.id}`)
|
||||
},
|
||||
onSelectLabel(label) {
|
||||
this.card.labels.push(label)
|
||||
},
|
||||
onRemoveLabel(removedLabel) {
|
||||
this.card.labels = this.card.label.filter(label => label.id !== removedLabel.id)
|
||||
},
|
||||
onSelectUser(user) {
|
||||
this.card.assignedUsers.push(user)
|
||||
},
|
||||
onRemoveUser(removedUser) {
|
||||
this.card.assignedUsers = this.card.assignedUsers.filter(user => user.uid !== removedUser.uid)
|
||||
},
|
||||
async addLabelToBoardAndCard(name) {
|
||||
const label = await apiClient.createLabel({
|
||||
title: name,
|
||||
color: this.randomColor(),
|
||||
boardId: this.selectedBoard.id,
|
||||
})
|
||||
this.card.labels.push(label)
|
||||
this.labels.push(label)
|
||||
},
|
||||
updateCardDue(newValue) {
|
||||
this.card.duedate = newValue
|
||||
},
|
||||
descriptionChanged(newValue) {
|
||||
this.card.description = newValue
|
||||
},
|
||||
openNewCard() {
|
||||
window.location = generateUrl('/apps/deck') + `#/board/${this.selectedBoard.id}/card/${this.newCard.id}`
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../css/selector';
|
||||
|
||||
.modal-scroller {
|
||||
overflow: scroll;
|
||||
max-height: calc(80vh - 40px);
|
||||
width: calc(100% - 24px);
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
#modal-inner {
|
||||
width: auto;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.board-bullet {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 10100;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.empty-content {
|
||||
margin-top: 5vh !important;
|
||||
|
||||
&:deep(h2) {
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
.col {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -54,26 +54,29 @@
|
||||
</template>
|
||||
{{ t('deck', 'New card') }}
|
||||
</NcButton>
|
||||
<CardCreateDialog v-if="showAddCardModal" @close="toggleAddCardModel" />
|
||||
<NcModal v-if="showAddCardModal" class="card-selector" @close="toggleAddCardModel">
|
||||
<CreateNewCardCustomPicker show-created-notice @cancel="toggleAddCardModel" />
|
||||
</NcModal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PlusIcon from 'vue-material-design-icons/Plus.vue'
|
||||
import { NcButton, NcDashboardWidget } from '@nextcloud/vue'
|
||||
import { NcButton, NcDashboardWidget, NcModal } from '@nextcloud/vue'
|
||||
import { mapGetters } from 'vuex'
|
||||
import labelStyle from './../mixins/labelStyle.js'
|
||||
import DueDate from '../components/cards/badges/DueDate.vue'
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
import CardCreateDialog from '../CardCreateDialog.vue'
|
||||
import CreateNewCardCustomPicker from './CreateNewCardCustomPicker.vue'
|
||||
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
components: {
|
||||
CreateNewCardCustomPicker,
|
||||
NcModal,
|
||||
DueDate,
|
||||
NcDashboardWidget,
|
||||
CardCreateDialog,
|
||||
NcButton,
|
||||
PlusIcon,
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user