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

Collections (#1294)

Browse Source 
Collections
This commit is contained in:
Julius Härtl
2019-10-24 17:20:54 +02:00
committed by GitHub
parent 6e192db79b 56bee425b9
commit ab3a42fc11
67 changed files with 534 additions and 16432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/BoardSelector.vue Normal file
View File

@@ -0,0 +1,112 @@
<!--
- @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
-
- @author Julius Härtl <jus@bitgrid.net>
-
- @license GNU AGPL version 3 or any later version
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-->
<template>
<Modal @close="close">
<div id="modal-inner" :class="{ 'icon-loading': loading }">
<h1>{{ t('deck', 'Select the board to link to a project') }}</h1>
<ul v-if="!loading">
<li v-for="board in boards" v-if="!currentBoard || ''+board.id !== ''+currentBoard" :key="board.id"
:class="{'selected': (selectedBoard === board.id) }"
@click="selectedBoard=board.id">
<span :style="{ 'backgroundColor': '#' + board.color }" class="board-bullet" />
<span>{{ board.title }}</span>
</li>
</ul>
<button v-if="!loading" class="primary" @click="select">{{ t('deck', 'Select board') }}</button>
</div>
</Modal>
</template>
<style scoped>
#modal-inner {
width: 90vw;
max-width: 400px;
padding: 20px;
}
ul {
min-height: 100px;
}
li {
padding: 6px;
border: 1px solid transparent;
}
li:hover, li:focus {
background-color: var(--color-background-dark);
}
li.selected {
border: 1px solid var(--color-primary);
}
.board-bullet {
display: inline-block;
width: 12px;
height: 12px;
border: none;
border-radius: 50%;
cursor: pointer;
}
li > span,
.avatar {
vertical-align: middle;
}
</style>
<script>
/* global OC */
import { Modal } from 'nextcloud-vue/dist/Components/Modal'
import { Avatar } from 'nextcloud-vue/dist/Components/Avatar'
import axios from 'nextcloud-axios'
export default {
name: 'CollaborationView',
components: {
Modal, Avatar
},
data() {
return {
boards: [],
selectedBoard: null,
loading: true,
currentBoard: null
}
},
beforeMount() {
this.fetchBoards()
this.currentBoard = window.location.hash.match(/\/boards\/([0-9]+)/)[1] || null
},
methods: {
fetchBoards() {
axios.get(OC.generateUrl('/apps/deck/boards')).then((response) => {
this.boards = response.data
this.loading = false
})
},
close() {
this.$root.$emit('close')
},
select() {
this.$root.$emit('select', this.selectedBoard)
}
}
}
</script>

137
src/CardSelector.vue Normal file
View File

@@ -0,0 +1,137 @@
<!--
- @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
-
- @author Julius Härtl <jus@bitgrid.net>
-
- @license GNU AGPL version 3 or any later version
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-->
<template>
<Modal :title="t('deck', 'Select the card to link to a project')" @close="close">
<div id="modal-inner" :class="{ 'icon-loading': loading }">
<Multiselect :placeholder="t('deck', 'Select a board')" v-model="selectedBoard" :options="boards"
label="title"
@select="fetchCardsFromBoard" />
<Multiselect :placeholder="t('deck', 'Select a card')" v-model="selectedCard" :options="cardsFromBoard"
label="title" />
<button :disabled="!isBoardAndStackChoosen" class="primary" @click="select">{{ t('deck', 'Link to card') }}</button>
<button @click="close">{{ t('deck', 'Cancel') }}</button>
</div>
</Modal>
</template>
<script>
import { Modal } from 'nextcloud-vue/dist/Components/Modal'
import { Multiselect } from 'nextcloud-vue/dist/Components/Multiselect'
import axios from 'nextcloud-axios'
export default {
name: 'CollaborationView',
components: {
Modal,
Multiselect
},
data() {
return {
boards: [],
selectedBoard: '',
cardsFromBoard: [],
selectedCard: '',
loading: true
}
},
computed: {
isBoardAndStackChoosen() {
if (this.selectedBoard === '' || this.selectedCard === '') {
return false
}
return true
}
},
beforeMount() {
this.fetchBoards()
},
methods: {
fetchBoards() {
axios.get(OC.generateUrl('/apps/deck/boards')).then((response) => {
this.boards = response.data
this.loading = false
})
},
async fetchCardsFromBoard(board) {
try {
this.cardsFromBoard = []
let url = OC.generateUrl('/apps/deck/stacks/' + board.id)
let response = await axios.get(url)
response.data.forEach(stack => {
this.cardsFromBoard.push(...stack.cards)
})
} catch (err) {
return err
}
},
close() {
this.$root.$emit('close')
},
select() {
this.$root.$emit('select', this.selectedCard.id)
}
}
}
</script>
<style scoped>
#modal-inner {
width: 90vw;
max-width: 400px;
padding: 20px;
height: 500px;
}
ul {
min-height: 100px;
}
li {
padding: 6px;
border: 1px solid transparent;
}
li:hover, li:focus {
background-color: var(--color-background-dark);
}
li.selected {
border: 1px solid var(--color-primary);
}
.board-bullet {
display: inline-block;
width: 12px;
height: 12px;
border: none;
border-radius: 50%;
cursor: pointer;
}
li > span,
.avatar {
vertical-align: middle;
}
button {
float: right;
}
</style>

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

@@ -71,6 +71,11 @@
</div>
</div>
<div class="section-wrapper">
<collection-list v-if="currentCard.id" :id="`${currentCard.id}`" :name="currentCard.title"
type="deck-card" />
</div>
<h5>Description</h5>
<VueEasymde ref="markdownEditor" v-model="copiedCard.description" :configs="mdeConfig" />
</AppSidebarTab>
@@ -97,6 +102,7 @@ import { Actions } from 'nextcloud-vue/dist/Components/Actions'
import { ActionButton } from 'nextcloud-vue/dist/Components/ActionButton'
import ActivityEntry from '../ActivityEntry'
import Color from '../../mixins/color'
import { CollectionList } from 'nextcloud-vue-collections'
export default {
name: 'CardSidebar',
@@ -109,7 +115,8 @@ export default {
VueEasymde,
Actions,
ActionButton,
Avatar
Avatar,
CollectionList
},
mixins: [
Color

94
src/init-collections.js Normal file
View File

@@ -0,0 +1,94 @@
/*
* @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
*
* @author Julius Härtl <jus@bitgrid.net>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
import Vue from 'vue'
import BoardSelector from './BoardSelector'
import CardSelector from './CardSelector'
import './../css/collections.css'
// eslint-disable-next-line
__webpack_nonce__ = btoa(OC.requestToken);
// eslint-disable-next-line
__webpack_public_path__ = OC.linkTo('deck', 'js/');
Vue.prototype.t = t
Vue.prototype.n = n
Vue.prototype.OC = OC;
((function(OCP) {
OCP.Collaboration.registerType('deck', {
action: () => {
return new Promise((resolve, reject) => {
const container = document.createElement('div')
container.id = 'deck-board-select'
const body = document.getElementById('body-user')
body.append(container)
const ComponentVM = new Vue({
render: h => h(BoardSelector)
})
ComponentVM.$mount(container)
ComponentVM.$root.$on('close', () => {
ComponentVM.$el.remove()
ComponentVM.$destroy()
reject(new Error('Board selection canceled'))
})
ComponentVM.$root.$on('select', (id) => {
resolve(id)
ComponentVM.$el.remove()
ComponentVM.$destroy()
})
})
},
typeString: t('deck', 'Link to a board'),
typeIconClass: 'icon-deck'
})
OCP.Collaboration.registerType('deck-card', {
action: () => {
return new Promise((resolve, reject) => {
const container = document.createElement('div')
container.id = 'deck-board-select'
const body = document.getElementById('body-user')
body.append(container)
const ComponentVM = new Vue({
render: h => h(CardSelector)
})
ComponentVM.$mount(container)
ComponentVM.$root.$on('close', () => {
ComponentVM.$el.remove()
ComponentVM.$destroy()
reject(new Error('Card selection canceled'))
})
ComponentVM.$root.$on('select', (id) => {
resolve(id)
ComponentVM.$el.remove()
ComponentVM.$destroy()
})
})
},
typeString: t('deck', 'Link to a card'),
typeIconClass: 'icon-deck'
})
})(window.OCP))