Labels on tasks (#25)
This commit is contained in:
konrad
164
src/components/labels/ListLabels.vue
Normal file
164
src/components/labels/ListLabels.vue
Normal file
@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div class="loader-container content" :class="{ 'is-loading': labelService.loading}">
|
||||
<h1>Manage labels</h1>
|
||||
<p>
|
||||
Click on a label to edit it.
|
||||
You can edit all labels you created, you can use all lables which are associated with a task to whose list you have access.
|
||||
</p>
|
||||
<div class="columns">
|
||||
<div class="labels-list column">
|
||||
<a
|
||||
v-for="l in labels" :key="l.id"
|
||||
class="tag"
|
||||
:class="{'disabled': user.infos.id !== l.created_by.id}"
|
||||
@click="editLabel(l)"
|
||||
:style="{'background': l.hex_color, 'color': l.textColor}"
|
||||
>
|
||||
<span
|
||||
v-if="user.infos.id !== l.created_by.id"
|
||||
v-tooltip.bottom="'You are not allowed to edit this label because you dont own it.'">
|
||||
{{ l.title }}
|
||||
</span>
|
||||
<span v-else>{{ l.title }}</span>
|
||||
<a class="delete is-small" @click="deleteLabel(l)" v-if="user.infos.id === l.created_by.id"></a>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-4" v-if="isLabelEdit">
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<span class="card-header-title">
|
||||
Edit Label
|
||||
</span>
|
||||
<a class="card-header-icon" @click="isTaskEdit = false">
|
||||
<span class="icon">
|
||||
<icon icon="angle-right"/>
|
||||
</span>
|
||||
</a>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<form @submit.prevent="editLabelSubmit()">
|
||||
<div class="field">
|
||||
<label class="label">Title</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Label title" v-model="labelEditLabel.title"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Description</label>
|
||||
<div class="control">
|
||||
<textarea class="textarea" placeholder="Label description" v-model="labelEditLabel.description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Color</label>
|
||||
<div class="control">
|
||||
<verte
|
||||
v-model="labelEditLabel.hex_color"
|
||||
menuPosition="top"
|
||||
picker="square"
|
||||
model="hex"
|
||||
:enableAlpha="false"
|
||||
:rgbSliders="true">
|
||||
</verte>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<button type="submit" class="button is-fullwidth is-success" :class="{ 'is-loading': labelService.loading}">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<a class="button has-icon is-danger" @click="deleteLabel(labelEditLabel);isLabelEdit = false;">
|
||||
<span class="icon">
|
||||
<icon icon="trash-alt"/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import verte from 'verte'
|
||||
import 'verte/dist/verte.css'
|
||||
|
||||
import LabelService from '../../services/label'
|
||||
import LabelModel from '../../models/label'
|
||||
import message from '../../message'
|
||||
import auth from '../../auth'
|
||||
|
||||
export default {
|
||||
name: 'ListLabels',
|
||||
components: {
|
||||
verte,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labelService: LabelService,
|
||||
labels: [],
|
||||
labelEditLabel: LabelModel,
|
||||
isLabelEdit: false,
|
||||
user: auth.user,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.labelService = new LabelService()
|
||||
this.labelEditLabel = new LabelModel()
|
||||
this.loadLabels()
|
||||
},
|
||||
methods: {
|
||||
loadLabels() {
|
||||
this.labelService.getAll()
|
||||
.then(r => {
|
||||
this.$set(this, 'labels', r)
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
deleteLabel(label) {
|
||||
this.labelService.delete(label)
|
||||
.then(() => {
|
||||
// Remove the label from the list
|
||||
for (const l in this.labels) {
|
||||
if (this.labels[l].id === label.id) {
|
||||
this.labels.splice(l, 1)
|
||||
}
|
||||
}
|
||||
message.success({message: 'The label was successfully deleted.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
editLabelSubmit() {
|
||||
this.labelService.update(this.labelEditLabel)
|
||||
.then(r => {
|
||||
for (const l in this.labels) {
|
||||
if (this.labels[l].id === r.id) {
|
||||
this.$set(this.labels, l, r)
|
||||
}
|
||||
}
|
||||
message.success({message: 'The label was successfully updated.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
editLabel(label) {
|
||||
if(label.created_by.id !== this.user.infos.id) {
|
||||
return
|
||||
}
|
||||
this.labelEditLabel = label
|
||||
this.isLabelEdit = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -41,6 +41,9 @@
|
||||
</div>
|
||||
<span class="tasktext" :class="{ 'done': l.done}">
|
||||
{{l.text}}
|
||||
<span class="tag" v-for="label in l.labels" :style="{'background': label.hex_color, 'color': label.textColor}" :key="label.id">
|
||||
<span>{{ label.title }}</span>
|
||||
</span>
|
||||
<i v-if="l.dueDate > 0" :class="{'overdue': (l.dueDate <= new Date())}"> - Due on {{new Date(l.dueDate).toLocaleString()}}</i>
|
||||
<span v-if="l.priority >= priorities.HIGH" class="high-priority" :class="{'not-so-high': l.priority === priorities.HIGH}">
|
||||
<span class="icon">
|
||||
@ -207,7 +210,7 @@
|
||||
label="username"
|
||||
track-by="id">
|
||||
<template slot="clear" slot-scope="props">
|
||||
<div class="multiselect__clear" v-if="newAssignee !== null && newAssignee.id !== 0" @mousedown.prevent.stop="clearAll(props.search)"></div>
|
||||
<div class="multiselect__clear" v-if="newAssignee !== null && newAssignee.id !== 0" @mousedown.prevent.stop="clearAllFoundUsers(props.search)"></div>
|
||||
</template>
|
||||
<span slot="noResult">Oops! No user found. Consider changing the search query.</span>
|
||||
</multiselect>
|
||||
@ -221,6 +224,42 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Labels</label>
|
||||
<div class="control">
|
||||
<multiselect
|
||||
:multiple="true"
|
||||
:close-on-select="false"
|
||||
:clear-on-select="true"
|
||||
:options-limit="300"
|
||||
:hide-selected="true"
|
||||
v-model="taskEditTask.labels"
|
||||
:options="foundLabels"
|
||||
:searchable="true"
|
||||
:loading="labelService.loading || labelTaskService.loading"
|
||||
:internal-search="true"
|
||||
@search-change="findLabel"
|
||||
@select="addLabel"
|
||||
placeholder="Type to search"
|
||||
label="title"
|
||||
track-by="id"
|
||||
:taggable="true"
|
||||
@tag="createAndAddLabel"
|
||||
tag-placeholder="Add this as new label"
|
||||
>
|
||||
<template slot="tag" slot-scope="{ option, remove }">
|
||||
<span class="tag" :style="{'background': option.hex_color, 'color': option.textColor}">
|
||||
<span>{{ option.title }}</span>
|
||||
<a class="delete is-small" @click="removeLabel(option)"></a>
|
||||
</span>
|
||||
</template>
|
||||
<template slot="clear" slot-scope="props">
|
||||
<div class="multiselect__clear" v-if="taskEditTask.labels.length" @mousedown.prevent.stop="clearAllLabels(props.search)"></div>
|
||||
</template>
|
||||
</multiselect>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label" for="subtasks">Subtasks</label>
|
||||
<div class="tasks noborder" v-if="taskEditTask.subtasks && taskEditTask.subtasks.length > 0">
|
||||
@ -280,6 +319,10 @@
|
||||
import UserModel from '../../models/user'
|
||||
import UserService from '../../services/user'
|
||||
import priorities from '../../models/priorities'
|
||||
import LabelTaskService from '../../services/labelTask'
|
||||
import LabelService from '../../services/label'
|
||||
import LabelTaskModel from '../../models/labelTask'
|
||||
import LabelModel from '../../models/label'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -309,6 +352,11 @@
|
||||
newAssignee: UserModel,
|
||||
userService: UserService,
|
||||
foundUsers: [],
|
||||
|
||||
labelService: LabelService,
|
||||
labelTaskService: LabelTaskService,
|
||||
foundLabels: [],
|
||||
labelTimeout: null,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
@ -327,6 +375,8 @@
|
||||
this.newTask = new TaskModel()
|
||||
this.userService = new UserService()
|
||||
this.newAssignee = new UserModel()
|
||||
this.labelService = new LabelService()
|
||||
this.labelTaskService = new LabelTaskService()
|
||||
this.loadList()
|
||||
},
|
||||
watch: {
|
||||
@ -453,7 +503,7 @@
|
||||
},
|
||||
findUser(query) {
|
||||
if(query === '') {
|
||||
this.clearAll()
|
||||
this.clearAllFoundUsers()
|
||||
return
|
||||
}
|
||||
|
||||
@ -468,9 +518,73 @@
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
clearAll () {
|
||||
clearAllFoundUsers () {
|
||||
this.$set(this, 'foundUsers', [])
|
||||
},
|
||||
findLabel(query) {
|
||||
if(query === '') {
|
||||
this.clearAllLabels()
|
||||
return
|
||||
}
|
||||
|
||||
if(this.labelTimeout !== null) {
|
||||
clearTimeout(this.labelTimeout)
|
||||
}
|
||||
|
||||
// Delay the search 300ms to not send a request on every keystroke
|
||||
this.labelTimeout = setTimeout(() => {
|
||||
this.labelService.getAll({}, {s: query})
|
||||
.then(response => {
|
||||
this.$set(this, 'foundLabels', differenceWith(response, this.taskEditTask.labels, (first, second) => {
|
||||
return first.id === second.id
|
||||
}))
|
||||
this.labelTimeout = null
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
clearAllLabels () {
|
||||
this.$set(this, 'foundLabels', [])
|
||||
},
|
||||
addLabel(label) {
|
||||
let labelTask = new LabelTaskModel({taskID: this.taskEditTask.id, label_id: label.id})
|
||||
this.labelTaskService.create(labelTask)
|
||||
.then(() => {
|
||||
message.success({message: 'The label was successfully added.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
removeLabel(label) {
|
||||
let labelTask = new LabelTaskModel({taskID: this.taskEditTask.id, label_id: label.id})
|
||||
this.labelTaskService.delete(labelTask)
|
||||
.then(() => {
|
||||
// Remove the label from the list
|
||||
for (const l in this.taskEditTask.labels) {
|
||||
if (this.taskEditTask.labels[l].id === label.id) {
|
||||
this.taskEditTask.labels.splice(l, 1)
|
||||
}
|
||||
}
|
||||
message.success({message: 'The label was successfully removed.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
createAndAddLabel(title) {
|
||||
let newLabel = new LabelModel({title: title})
|
||||
this.labelService.create(newLabel)
|
||||
.then(r => {
|
||||
this.addLabel(r)
|
||||
this.taskEditTask.labels.push(r)
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user