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

UI done

Browse Source 
Signed-off-by: Jakob <jakob.roehrl@web.de>
This commit is contained in:
Jakob
2019-10-17 10:32:49 +02:00
parent 4a3ba6540c
commit 4d10b5fd59
5 changed files with 71 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
lib/Collaboration/Resources/ResourceProviderCard.php
View File

@@ -74,7 +74,8 @@ class ResourceProviderCard implements IProvider {
*/
public function getResourceRichObject(IResource $resource): array {
$board = $this->getBoard($resource);
$link = \OC::$server->getURLGenerator()->linkToRoute('deck.page.index') . '#!/board/' . $resource->getId();
//$link = \OC::$server->getURLGenerator()->linkToRoute('deck.page.index') . '#/board/' . $resource->getId();
$link = \OC::$server->getURLGenerator()->linkToRoute('deck.page.index') ;
return [
'type' => self::RESOURCE_TYPE,

64
src/CardSelector.vue
View File

@@ -21,50 +21,51 @@
-->
<template>
<Modal @close="close">
<Modal @close="close" :title="t('deck', 'Select the card to link to a project')">
<div id="modal-inner" :class="{ 'icon-loading': loading }">
<h1>{{ t('deck', 'Select the card to link to a project') }}</h1>
<ul v-if="!loading">
<li v-for="board in boards" v-if="!currentBoard || ''+board.id !== ''+currentBoard" :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>
<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>
/* global OC */
import { Modal } from 'nextcloud-vue/dist/Components/Modal'
import { Avatar } from 'nextcloud-vue/dist/Components/Avatar'
import { Multiselect } from 'nextcloud-vue/dist/Components/Multiselect'
import axios from 'nextcloud-axios'
export default {
name: 'CollaborationView',
components: {
Modal, Avatar
Modal,
Multiselect
},
data() {
return {
boards: [],
selectedBoard: null,
loading: true,
currentBoard: null
selectedBoard: '',
cardsFromBoard: [],
selectedCard: '',
loading: true
}
},
computed: {
isBoardAndStackChoosen() {
if (this.selectedBoard === '' || this.selectedCard === '') {
return false
}
return true
}
},
beforeMount() {
this.fetchBoards()
if (typeof angular !== 'undefined' && angular.element('#board')) {
try {
this.currentBoard = angular.element('#board').scope().boardservice.id || null
} catch (e) {}
}
},
methods: {
fetchBoards() {
@@ -73,11 +74,24 @@ export default {
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.selectedBoard)
this.$root.$emit('select', this.selectedCard.id)
}
}
@@ -90,6 +104,7 @@ export default {
width: 90vw;
max-width: 400px;
padding: 20px;
height: 500px;
}
ul {
min-height: 100px;
@@ -116,4 +131,7 @@ export default {
.avatar {
vertical-align: middle;
}
button {
float: right;
}
</style>

67
src/init-collections-card.js
View File

@@ -1,67 +0,0 @@
/*
* @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 CardSelector from './CardSelector'
import './../css/collections.css'
'use strict'
/* global __webpack_nonce__ __webpack_public_path__ OC t n */
// 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-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()
})
ComponentVM.$root.$on('select', (id) => {
resolve(id)
ComponentVM.$el.remove()
ComponentVM.$destroy()
})
})
},
typeString: t('deck', 'Link to a card'),
typeIconClass: 'icon-deck'
})
})(window.OCP))

28
src/init-collections.js
View File

@@ -23,6 +23,7 @@
import Vue from 'vue'
import BoardSelector from './BoardSelector'
import CardSelector from './CardSelector'
import './../css/collections.css'
@@ -66,4 +67,31 @@ Vue.prototype.OC = OC;
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()
})
ComponentVM.$root.$on('select', (id) => {
resolve(id)
ComponentVM.$el.remove()
ComponentVM.$destroy()
})
})
},
typeString: t('deck', 'Link to a card'),
typeIconClass: 'icon-deck'
})
})(window.OCP))

1
webpack.common.js
View File

@@ -5,7 +5,6 @@ module.exports = {
entry: {
deck: path.join(__dirname, 'src', 'main.js'),
collections: path.join(__dirname, 'src', 'init-collections.js'),
collectionscard: path.join(__dirname, 'src', 'init-collections-card.js'),
},
output: {
filename: '[name].js',