Skip to content

Commit

Permalink
new component
Browse files Browse the repository at this point in the history
Signed-off-by: Jakob R枚hrl <jakob.roehrl@web.de>
  • Loading branch information
jakobroehrl committed Oct 16, 2020
1 parent e11f048 commit 45f811f
Show file tree
Hide file tree
Showing 3 changed files with 173 additions and 113 deletions.
98 changes: 5 additions & 93 deletions src/components/Controls.vue
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
<h2><a href="#">{{ overviewName }}</a></h2>
<Actions>
<ActionButton icon="icon-add" @click.stop="modalShow=true">
{{ t('deck', 'Add card on Today') }}
{{ t('deck', 'Add card on today') }}
</ActionButton>
</Actions>
</div>
Expand Down Expand Up @@ -199,55 +199,20 @@
</div>
</div>

<Modal v-if="modalShow" :title="t('deck', 'Add card on Today')" @close="modalShow=false">
<div class="modal__content">
{{ lastBoardId }}
{{ lastListId }}
<h3>{{ t('deck', 'Add card on Today') }}</h3>
<Multiselect v-model="selectedBoard"
:placeholder="t('deck', 'Select a board')"
:options="boards"
:max-height="100"
label="title"
@select="loadStacksFromBoard" />
<Multiselect v-model="selectedStack"
:placeholder="t('deck', 'Select a list')"
:options="stacksFromBoard"
:max-height="100"
label="title" />

<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add card on Today') }}</label>
<input id="new-stack-input-main"
ref="newCardInput"
v-model="newCardTitle"
v-focus
type="text"
class="no-close"
:placeholder="t('deck', 'Card name')">

<button :disabled="!addCardSetRequiredFields" class="primary" @click="addCard">
{{ t('deck', 'Add card') }}
</button>
<button @click="modalShow=false">
{{ t('deck', 'Cancel') }}
</button>
</div>
</Modal>
<ControlsModal :modal-show="modalShow" />
</div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { Modal, Multiselect, Actions, ActionButton, Popover, Avatar } from '@nextcloud/vue'
import { Actions, ActionButton, Popover, Avatar } from '@nextcloud/vue'
import labelStyle from '../mixins/labelStyle'
import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
import { showError } from '@nextcloud/dialogs'
import ControlsModal from './ControlsModal'
export default {
name: 'Controls',
components: {
Actions, ActionButton, Popover, Avatar, Modal, Multiselect,
Actions, ActionButton, Popover, Avatar, ControlsModal,
},
mixins: [ labelStyle ],
props: {
Expand Down Expand Up @@ -322,15 +287,6 @@ export default {
board() {
this.clearFilter()
},
lastBoardId() {
if (this.lastBoardId === null || this.lastBoardId === 0) {
return
}
this.selectedBoard = this.boards.filter(board => {
return board.id === this.lastBoardId
})
},
},
methods: {
beforeSetFilter(e) {
Expand Down Expand Up @@ -383,33 +339,6 @@ export default {
this.$store.dispatch('setFilter', { ...filterReset })
this.filter = filterReset
},
async loadStacksFromBoard(selectedBoard) {
try {
const url = generateUrl('/apps/deck/stacks/' + selectedBoard.id)
const response = await axios.get(url)
this.stacksFromBoard = response.data
} catch (err) {
return err
}
},
async addCard() {
try {
const today = new Date()
today.setHours(23, 59, 59, 999)
await this.$store.dispatch('addCard', {
title: this.newCardTitle,
stackId: this.selectedStack.id,
boardId: this.selectedBoard.id,
duedate: today.toISOString(),
})
this.newCardTitle = ''
this.$store.dispatch('storeLastListId', this.selectedStack.id)
this.$store.dispatch('storeLastBoardId', this.selectedBoard.id)
} catch (e) {
showError('Could not create card: ' + e.response.data.message)
}
this.modalShow = false
},
},
}
</script>
Expand All @@ -419,23 +348,6 @@ export default {
width: 100%;
}
.modal__content {
width: 25vw;
min-width: 250px;
min-height: 120px;
text-align: center;
margin: 20px 20px 100px 20px;
.multiselect {
margin-bottom: 10px;
}
}
.modal__content button {
float: right;
margin-top: 50px;
}
.controls {
display: flex;
Expand Down
168 changes: 168 additions & 0 deletions src/components/ControlsModal.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
<!--
* @copyright Copyright (c) 2020 Jakob R枚hrl <jakob.roehrl@web.de>
*
* @author Jakob R枚hrl <jakob.roehrl@web.de>
*
* @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 v-if="modalShow" :title="t('deck', 'Add card on Today')" @close="modalShow=false">
<div class="modal__content">
{{ lastBoardId - selectedBoard }}
{{ lastListId }}
<h3>{{ t('deck', 'Add card on Today') }}</h3>
<Multiselect v-model="selectedBoard"
:placeholder="t('deck', 'Select a board')"
:options="boards"
:max-height="100"
label="title"
@select="loadStacksFromBoard" />
<Multiselect v-model="selectedStack"
:placeholder="t('deck', 'Select a list')"
:options="stacksFromBoard"
:max-height="100"
label="title" />

<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add card on Today') }}</label>
<input id="new-stack-input-main"
ref="newCardInput"
v-model="newCardTitle"
v-focus
type="text"
class="no-close"
:placeholder="t('deck', 'Card name')">

<button :disabled="!addCardSetRequiredFields" class="primary" @click="addCard">
{{ t('deck', 'Add card') }}
</button>
<button @click="modalShow=false">
{{ t('deck', 'Cancel') }}
</button>
</div>
</Modal>
</template>

<script>
import { Modal, Multiselect } from '@nextcloud/vue'
import labelStyle from '../mixins/labelStyle'
import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
import { showError } from '@nextcloud/dialogs'
export default {
name: 'ControlsModal',
components: {
Modal, Multiselect,
},
mixins: [ labelStyle ],
props: {
modalShow: {
default: false,
type: Boolean,
},
},
data() {
return {
selectedBoard: '',
selectedStack: '',
stacksFromBoard: [],
newCardTitle: '',
lastBoardId: localStorage.getItem('deck.lastBoardId'),
lastListId: localStorage.getItem('deck.lastListId'),
}
},
computed: {
boards() {
return this.$store.getters.boards
},
addCardSetRequiredFields() {
if (this.selectedBoard === '' || this.selectedStack === '' || this.newCardTitle.trim() === '') {
return false
}
return true
},
},
mounted() {
this.setLastBoardId()
},
methods: {
setLastBoardId() {
if (this.lastBoardId === null || this.lastBoardId === 0) {
this.selectedBoard = ''
return
}
this.selectedBoard = this.selectedBoard = this.boards.filter(board => {
return board.id === this.lastBoardId
})
},
async loadStacksFromBoard(selectedBoard) {
try {
const url = generateUrl('/apps/deck/stacks/' + selectedBoard.id)
const response = await axios.get(url)
this.stacksFromBoard = response.data
} catch (err) {
return err
}
},
async addCard() {
try {
const today = new Date()
today.setHours(23, 59, 59, 999)
await this.$store.dispatch('addCard', {
title: this.newCardTitle,
stackId: this.selectedStack.id,
boardId: this.selectedBoard.id,
duedate: today.toISOString(),
})
this.newCardTitle = ''
localStorage.setItem('deck.lastBoardId', this.selectedBoard.id)
localStorage.setItem('deck.lastListId', this.selectedStack.id)
} catch (e) {
showError('Could not create card: ' + e.response.data.message)
}
// this.modalShow = false
},
},
}
</script>

<style lang="scss" scoped>
#new-stack-input-main {
width: 100%;
}
.modal__content {
width: 25vw;
min-width: 250px;
min-height: 120px;
text-align: center;
margin: 20px 20px 100px 20px;
.multiselect {
margin-bottom: 10px;
}
}
.modal__content button {
float: right;
margin-top: 50px;
}
</style>
20 changes: 0 additions & 20 deletions src/store/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,6 @@ export default new Vuex.Store({
navShown: true,
compactMode: localStorage.getItem('deck.compactMode') === 'true',
cardDetailsInModal: localStorage.getItem('deck.cardDetailsInModal') === 'true',
lastBoardId: localStorage.getItem('deck.lastBoardId'),
lastListId: localStorage.getItem('deck.lastListId'),
sidebarShown: false,
currentBoard: null,
currentCard: null,
Expand All @@ -83,12 +81,6 @@ export default new Vuex.Store({
cardDetailsInModal: state => {
return state.cardDetailsInModal
},
lastBoardId: state => {
return state.lastBoardId
},
lastListId: state => {
return state.lastListId
},
getSearchQuery: state => {
return state.searchQuery
},
Expand Down Expand Up @@ -226,12 +218,6 @@ export default new Vuex.Store({
state.cardDetailsInModal = !state.cardDetailsInModal
localStorage.setItem('deck.cardDetailsInModal', state.cardDetailsInModal)
},
storeLastBoardId(state, boardId) {
localStorage.setItem('deck.lastBoardId', boardId)
},
storeLastListId(state, listId) {
localStorage.setItem('deck.lastListId', listId)
},
setBoards(state, boards) {
state.boards = boards
},
Expand Down Expand Up @@ -436,12 +422,6 @@ export default new Vuex.Store({
setCardDetailsInModal({ commit }, show) {
commit('setCardDetailsInModal', show)
},
storeLastBoardId({ commit }, boardId) {
commit('storeLastBoardId', boardId)
},
storeLastListId({ commit }, listId) {
commit('storeLastListId', listId)
},
setCurrentBoard({ commit }, board) {
commit('setCurrentBoard', board)
},
Expand Down

0 comments on commit 45f811f

Please sign in to comment.