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

some small changes

Browse Source 
Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>
This commit is contained in:
Jakob Röhrl
2019-04-26 11:37:34 +02:00
committed by Julius Härtl
parent 907bf57460
commit 3f272b91c6
10 changed files with 140 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/board/Board.vue
View File

@@ -103,8 +103,8 @@ export default {
this.$store.dispatch('setCurrentBoard', board) this.$store.dispatch('setCurrentBoard', board)
this.$store.dispatch('loadStacks', board) this.$store.dispatch('loadStacks', board)
this.loading = false this.loading = false
console.log(board); console.log(board)
this.$store.state.labels = board.labels; this.$store.state.labels = board.labels
}) })
}, },
onDropStack({ removedIndex, addedIndex }) { onDropStack({ removedIndex, addedIndex }) {

2
src/components/board/BoardSidebar.vue
View File

@@ -36,7 +36,7 @@
<div class="tabsContainer"> <div class="tabsContainer">
<div class="tab"> <div class="tab">
<div v-if="activeTab === 'Sharing'"> <div v-if="activeTab === 'Sharing'">
<SharingTabSidebard :board="board"></SharingTabSidebard> <SharingTabSidebard :board="board" />
</div> </div>
<div <div

20
src/components/board/DeletedTabSidebard.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
deleted deleted
</div> </div>
</template> </template>
<script> <script>
@@ -9,20 +9,18 @@
export default { export default {
name: 'DeletedTabSidebard', name: 'DeletedTabSidebard',
components: { components: {
},
props: {
},
data() {
return {
}
}, },
props: { props: {
board: { board: {
type: Object, type: Object,
default: undefined default: undefined
} }
},
data() {
return {
}
} }
} }
</script> </script>

68
src/components/board/SharingTabSidebard.vue
View File

@@ -1,29 +1,29 @@
<template> <template>
<div> <div>
<multiselect :options="sharees" @search-change="asyncFind" label="label"> <multiselect :options="sharees" label="label" @search-change="asyncFind">
<template #option="scope"> <template #option="scope">
{{ scope.option.label }} {{ scope.option.label }}
</template> </template>
</multiselect> </multiselect>
<ul <ul
id="shareWithList" id="shareWithList"
class="shareWithList" class="shareWithList"
> >
<li> <li>
<avatar :user="board.owner.uid" /> <avatar :user="board.owner.uid" />
<span class="has-tooltip username"> <span class="has-tooltip username">
{{ board.owner.displayname }} {{ board.owner.displayname }}
</span> </span>
</li> </li>
<li v-for="acl in board.acl" :key="acl.participant.uid"> <li v-for="acl in board.acl" :key="acl.participant.uid">
<avatar :user="acl.participant.uid" /> <avatar :user="acl.participant.uid" />
<span class="has-tooltip username"> <span class="has-tooltip username">
{{ acl.participant.displayname }} {{ acl.participant.displayname }}
</span> </span>
</li> </li>
</ul> </ul>
</div> </div>
</template> </template>
<script> <script>
@@ -34,7 +34,13 @@ export default {
name: 'SharingTabSidebard', name: 'SharingTabSidebard',
components: { components: {
Avatar, Avatar,
Multiselect, Multiselect
},
props: {
board: {
type: Object,
default: undefined
}
}, },
data() { data() {
return { return {
@@ -46,22 +52,14 @@ export default {
sharees: 'sharees' sharees: 'sharees'
}) })
}, },
props: {
board: {
type: Object,
default: undefined
}
},
methods: { methods: {
asyncFind (query) { asyncFind(query) {
this.isLoading = true this.isLoading = true
this.$store.dispatch('loadSharees').then(response => { this.$store.dispatch('loadSharees').then(response => {
this.isLoading = false this.isLoading = false
}) })
}, }
} }
} }
</script> </script>

65
src/components/board/TagsTabSidebard.vue
View File

@@ -4,28 +4,28 @@
<li v-for="label in labels" :key="label.id"> <li v-for="label in labels" :key="label.id">
<template v-if="editingLabelId === label.id"> <template v-if="editingLabelId === label.id">
<input v-model="editingLabel.title"> <input v-model="editingLabel.title">
<compact-picker :value=editingLabel.color @input="updateColor" :palette=defaultColors></compact-picker> <compact-picker :value="editingLabel.color" :palette="defaultColors" @input="updateColor" />
<button class="icon-checkmark" @click="updateLabel(label)" :disabled="!editLabelObjValidated" <button v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }" :disabled="!editLabelObjValidated" class="icon-checkmark"
v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }" /> @click="updateLabel(label)" />
<button v-tooltip="t('deck', 'Cancel')" class="icon-close" @click="editingLabelId = null" /> <button v-tooltip="t('deck', 'Cancel')" class="icon-close" @click="editingLabelId = null" />
</template> </template>
<template v-else> <template v-else>
<span :style="{ backgroundColor: `#${label.color}`, color:textColor(label.color) }" class="label-title"> <span :style="{ backgroundColor: `#${label.color}`, color:textColor(label.color) }" class="label-title">
<span v-if="label.title">{{ label.title }}</span><i v-if="!label.title"><br></i> <span>{{ label.title }}</span>
</span> </span>
<button v-tooltip="t('deck', 'Edit')" class="icon-rename" @click="clickEdit(label)" /> <button v-tooltip="t('deck', 'Edit')" class="icon-rename" @click="clickEdit(label)" />
<button v-tooltip="t('deck', 'Delete')" class="icon-delete" @click="deleteLabel(label.id)" /> <button v-tooltip="t('deck', 'Delete')" class="icon-delete" @click="deleteLabel(label.id)" />
</template> </template>
</li> </li>
<li v-if="addLabel"> <li v-if="addLabel">
<template> <template>
<input v-model="addLabelObj.title"> <input v-model="addLabelObj.title">
<compact-picker value="#fff" @input="updateColor" :palette=defaultColors></compact-picker> <compact-picker :palette="defaultColors" value="" @input="updateColor" />
<button class="icon-checkmark" @click="clickAddLabel()" :disabled="!addLabelObjValidated" <button v-tooltip="{content: missingDataLabel, show: !addLabelObjValidated, trigger: 'manual' }" :disabled="!addLabelObjValidated" class="icon-checkmark"
v-tooltip="{content: missingDataLabel, show: !addLabelObjValidated, trigger: 'manual' }" /> @click="clickAddLabel()" />
<button v-tooltip="t('deck', 'Cancel')" class="icon-close" @click="addLabel=false" /> <button v-tooltip="t('deck', 'Cancel')" class="icon-close" @click="addLabel=false" />
</template> </template>
</li> </li>
<button v-tooltip="t('deck', 'Add')" class="icon-add" @click="clickShowAddLabel()" /> <button v-tooltip="t('deck', 'Add')" class="icon-add" @click="clickShowAddLabel()" />
@@ -41,10 +41,10 @@ import { Compact } from 'vue-color'
export default { export default {
name: 'TagsTabSidebard', name: 'TagsTabSidebard',
mixins: [Color],
components: { components: {
'compact-picker': Compact 'compact-picker': Compact
}, },
mixins: [Color],
data() { data() {
return { return {
editingLabelId: null, editingLabelId: null,
@@ -58,28 +58,37 @@ export default {
computed: { computed: {
...mapGetters({ ...mapGetters({
labels: 'currentBoardLabels' labels: 'currentBoardLabels'
}), }),
addLabelObjValidated() { addLabelObjValidated() {
if (this.addLabelObj.title == '') return false; if (this.addLabelObj.title === '') {
if (this.addLabelObj.color == '' || return false
this.addLabelObj.color.length != 6) return false; }
return true;
if (this.colorIsValid(this.addLabelObj.color) === false) {
return false
}
return true
}, },
editLabelObjValidated() { editLabelObjValidated() {
console.log(this.editingLabel.color) if (this.editingLabel.title === '') {
if (this.editingLabel.title == '') return false; return false
if (this.editingLabel.color == '' || }
this.editingLabel.color.length != 6) return false;
return true; if (this.colorIsValid(this.editingLabel.color) === false) {
return false
}
return true
} }
}, },
methods: { methods: {
updateColor(c) { updateColor(c) {
if (this.editingLabel == null) { if (this.editingLabel === null) {
this.addLabelObj.color = c.hex.substring(1,7) this.addLabelObj.color = c.hex.substring(1, 7)
} else { } else {
this.editingLabel.color = c.hex.substring(1,7) this.editingLabel.color = c.hex.substring(1, 7)
} }
}, },
clickEdit(label) { clickEdit(label) {
@@ -94,8 +103,8 @@ export default {
this.editingLabelId = null this.editingLabelId = null
}, },
clickShowAddLabel() { clickShowAddLabel() {
this.addLabelObj = { cardId: null, color: '000', title: ''} this.addLabelObj = { cardId: null, color: '000', title: '' }
this.addLabel=true this.addLabel = true
}, },
clickAddLabel() { clickAddLabel() {
this.$store.dispatch('addLabelToCurrentBoard', this.addLabelObj) this.$store.dispatch('addLabelToCurrentBoard', this.addLabelObj)

20
src/components/board/TimelineTabSidebard.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
timeline timeline
</div> </div>
</template> </template>
<script> <script>
@@ -9,20 +9,18 @@
export default { export default {
name: 'TimelineTabSidebard', name: 'TimelineTabSidebard',
components: { components: {
},
props: {
},
data() {
return {
}
}, },
props: { props: {
board: { board: {
type: Object, type: Object,
default: undefined default: undefined
} }
},
data() {
return {
}
} }
} }
</script> </script>

9
src/mixins/color.js
View File

@@ -81,6 +81,15 @@ export default {
return '#000000' return '#000000'
} }
},
colorIsValid(hex) {
var re = new RegExp('[A-Fa-f0-9]{6}')
if (re.test(hex)) {
return true
}
return false
} }
} }

2
src/models/index.js
View File

@@ -52,4 +52,4 @@
* @typedef {Object} Label * @typedef {Object} Label
* @property {String} title * @property {String} title
* @property {String} color * @property {String} color
*/ */

60
src/services/BoardApi.js
View File

@@ -138,47 +138,47 @@ export class BoardApi {
// Label API Calls // Label API Calls
deleteLabel(id) { deleteLabel(id) {
return axios.delete(this.url(`/labels/${id}`)) return axios.delete(this.url(`/labels/${id}`))
.then( .then(
(response) => { (response) => {
return Promise.resolve(response.data) return Promise.resolve(response.data)
}, },
(err) => { (err) => {
return Promise.reject(err)
}
)
.catch((err) => {
return Promise.reject(err) return Promise.reject(err)
} })
)
.catch((err) => {
return Promise.reject(err)
})
} }
updateLabel(label) { updateLabel(label) {
return axios.put(this.url(`/labels/${label.id}`), label) return axios.put(this.url(`/labels/${label.id}`), label)
.then( .then(
(response) => { (response) => {
return Promise.resolve(response.data) return Promise.resolve(response.data)
}, },
(err) => { (err) => {
return Promise.reject(err)
}
)
.catch((err) => {
return Promise.reject(err) return Promise.reject(err)
} })
)
.catch((err) => {
return Promise.reject(err)
})
} }
createLabel(labelData) { createLabel(labelData) {
return axios.post(this.url('/labels'), labelData) return axios.post(this.url('/labels'), labelData)
.then( .then(
(response) => { (response) => {
return Promise.resolve(response.data) return Promise.resolve(response.data)
}, },
(err) => { (err) => {
return Promise.reject(err)
}
)
.catch((err) => {
return Promise.reject(err) return Promise.reject(err)
} })
)
.catch((err) => {
return Promise.reject(err)
})
} }
} }

18
src/store/main.js
View File

@@ -245,22 +245,22 @@ export default new Vuex.Store({
// label actions // label actions
removeLabelFromCurrentBoard({ commit }, label) { removeLabelFromCurrentBoard({ commit }, label) {
apiClient.deleteLabel(label) apiClient.deleteLabel(label)
.then((label) => { .then((label) => {
commit('removeLabelFromCurrentBoard', label.id); commit('removeLabelFromCurrentBoard', label.id)
}) })
}, },
updateLabelFromCurrentBoard({ commit }, newLabel) { updateLabelFromCurrentBoard({ commit }, newLabel) {
apiClient.updateLabel(newLabel) apiClient.updateLabel(newLabel)
.then((newLabel) => { .then((newLabel) => {
commit('updateLabelFromCurrentBoard', newLabel); commit('updateLabelFromCurrentBoard', newLabel)
}) })
}, },
addLabelToCurrentBoard({ commit }, newLabel) { addLabelToCurrentBoard({ commit }, newLabel) {
newLabel.boardId = this.state.currentBoard.id newLabel.boardId = this.state.currentBoard.id
apiClient.createLabel(newLabel) apiClient.createLabel(newLabel)
.then((newLabel) => { .then((newLabel) => {
commit('addLabelToCurrentBoard', newLabel); commit('addLabelToCurrentBoard', newLabel)
}) })
} }
} }
}) })