Labels on tasks (#25)
This commit is contained in:
konrad
Gitea
parent
ae499fd8a0
commit
f7a17e45bc
17 changed files with 528 additions and 78 deletions
|
|
@ -11,6 +11,7 @@
|
|||
"bulma": "^0.7.1",
|
||||
"lodash": "^4.17.11",
|
||||
"v-tooltip": "^2.0.0-rc.33",
|
||||
"verte": "^0.0.10",
|
||||
"vue": "^2.5.17"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -67,6 +67,14 @@
|
|||
New Namespace
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="{ name: 'listLabels'}">
|
||||
<span class="icon">
|
||||
<icon icon="tags"/>
|
||||
</span>
|
||||
Labels
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<aside class="menu namespaces-lists">
|
||||
|
|
|
|||
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>
|
||||
|
|
@ -41,6 +41,7 @@ import { faBars } from '@fortawesome/free-solid-svg-icons'
|
|||
import { faPowerOff } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faCalendarWeek } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faExclamation } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faTags } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faTimesCircle } from '@fortawesome/free-regular-svg-icons'
|
||||
import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons'
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
|
|
@ -66,6 +67,7 @@ library.add(faPowerOff)
|
|||
library.add(faCalendarWeek)
|
||||
library.add(faCalendarAlt)
|
||||
library.add(faExclamation)
|
||||
library.add(faTags)
|
||||
|
||||
Vue.component('icon', FontAwesomeIcon)
|
||||
|
||||
|
|
|
|||
47
src/models/label.js
Normal file
47
src/models/label.js
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import AbstractModel from './abstractModel'
|
||||
import UserModel from "./user";
|
||||
|
||||
export default class LabelModel extends AbstractModel {
|
||||
constructor(data) {
|
||||
super(data)
|
||||
// Set the default color
|
||||
if (this.hex_color === '') {
|
||||
this.hex_color = 'e8e8e8'
|
||||
}
|
||||
if (this.hex_color.substring(0, 1) !== '#') {
|
||||
this.hex_color = '#' + this.hex_color
|
||||
}
|
||||
this.textColor = this.hasDarkColor() ? '#4a4a4a' : '#e5e5e5'
|
||||
this.created_by = new UserModel(this.created_by)
|
||||
}
|
||||
|
||||
defaults() {
|
||||
return {
|
||||
id: 0,
|
||||
title: '',
|
||||
hex_color: '',
|
||||
description: '',
|
||||
created_by: UserModel,
|
||||
listID: 0,
|
||||
textColor: '',
|
||||
|
||||
created: 0,
|
||||
updated: 0
|
||||
}
|
||||
}
|
||||
|
||||
hasDarkColor() {
|
||||
if (this.hex_color === '#') {
|
||||
return true // Defaults to dark
|
||||
}
|
||||
|
||||
let rgb = parseInt(this.hex_color.substring(1, 7), 16); // convert rrggbb to decimal
|
||||
let r = (rgb >> 16) & 0xff; // extract red
|
||||
let g = (rgb >> 8) & 0xff; // extract green
|
||||
let b = (rgb >> 0) & 0xff; // extract blue
|
||||
|
||||
// luma will be a value 0..255 where 0 indicates the darkest, and 255 the brightest
|
||||
let luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
|
||||
return luma > 128
|
||||
}
|
||||
}
|
||||
11
src/models/labelTask.js
Normal file
11
src/models/labelTask.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import AbstractModel from "./abstractModel";
|
||||
|
||||
export default class LabelTask extends AbstractModel {
|
||||
defaults() {
|
||||
return {
|
||||
id: 0,
|
||||
taskID: 0,
|
||||
label_id: 0,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import AbstractModel from './abstractModel';
|
||||
import UserModel from './user'
|
||||
import LabelModel from "./label";
|
||||
|
||||
export default class TaskModel extends AbstractModel {
|
||||
|
||||
|
|
@ -24,6 +25,10 @@ export default class TaskModel extends AbstractModel {
|
|||
return new UserModel(a)
|
||||
})
|
||||
this.createdBy = new UserModel(this.createdBy)
|
||||
|
||||
this.labels = this.labels.map(l => {
|
||||
return new LabelModel(l)
|
||||
})
|
||||
}
|
||||
|
||||
defaults() {
|
||||
|
|
|
|||
|
|
@ -19,81 +19,88 @@ import EditNamespaceComponent from '@/components/namespaces/EditNamespace'
|
|||
import ListTeamsComponent from '@/components/teams/ListTeams'
|
||||
import EditTeamComponent from '@/components/teams/EditTeam'
|
||||
import NewTeamComponent from '@/components/teams/NewTeam'
|
||||
// Label Handling
|
||||
import ListLabelsComponent from '@/components/labels/ListLabels'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
export default new Router({
|
||||
mode:'history',
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: HomeComponent
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: LoginComponent
|
||||
},
|
||||
{
|
||||
path: '/get-password-reset',
|
||||
name: 'getPasswordReset',
|
||||
component: GetPasswordResetComponent
|
||||
},
|
||||
{
|
||||
path: '/password-reset',
|
||||
name: 'passwordReset',
|
||||
component: PasswordResetComponent
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
name: 'register',
|
||||
component: RegisterComponent
|
||||
},
|
||||
{
|
||||
path: '/lists/:id',
|
||||
name: 'showList',
|
||||
component: ShowListComponent
|
||||
},
|
||||
{
|
||||
path: '/lists/:id/edit',
|
||||
name: 'editList',
|
||||
component: EditListComponent
|
||||
},
|
||||
{
|
||||
path: '/namespaces/:id/list',
|
||||
name: 'newList',
|
||||
component: NewListComponent
|
||||
},
|
||||
{
|
||||
path: '/namespaces/new',
|
||||
name: 'newNamespace',
|
||||
component: NewNamespaceComponent
|
||||
},
|
||||
{
|
||||
path: '/namespaces/:id/edit',
|
||||
name: 'editNamespace',
|
||||
component: EditNamespaceComponent
|
||||
},
|
||||
{
|
||||
path: '/teams',
|
||||
name: 'listTeams',
|
||||
component: ListTeamsComponent
|
||||
},
|
||||
{
|
||||
path: '/teams/new',
|
||||
name: 'newTeam',
|
||||
component: NewTeamComponent
|
||||
},
|
||||
{
|
||||
path: '/teams/:id/edit',
|
||||
name: 'editTeam',
|
||||
component: EditTeamComponent
|
||||
},
|
||||
{
|
||||
path: '/tasks/:type',
|
||||
name: 'showTasksInRange',
|
||||
component: ShowTasksInRangeComponent
|
||||
},
|
||||
]
|
||||
mode: 'history',
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: HomeComponent
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: LoginComponent
|
||||
},
|
||||
{
|
||||
path: '/get-password-reset',
|
||||
name: 'getPasswordReset',
|
||||
component: GetPasswordResetComponent
|
||||
},
|
||||
{
|
||||
path: '/password-reset',
|
||||
name: 'passwordReset',
|
||||
component: PasswordResetComponent
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
name: 'register',
|
||||
component: RegisterComponent
|
||||
},
|
||||
{
|
||||
path: '/lists/:id',
|
||||
name: 'showList',
|
||||
component: ShowListComponent
|
||||
},
|
||||
{
|
||||
path: '/lists/:id/edit',
|
||||
name: 'editList',
|
||||
component: EditListComponent
|
||||
},
|
||||
{
|
||||
path: '/namespaces/:id/list',
|
||||
name: 'newList',
|
||||
component: NewListComponent
|
||||
},
|
||||
{
|
||||
path: '/namespaces/new',
|
||||
name: 'newNamespace',
|
||||
component: NewNamespaceComponent
|
||||
},
|
||||
{
|
||||
path: '/namespaces/:id/edit',
|
||||
name: 'editNamespace',
|
||||
component: EditNamespaceComponent
|
||||
},
|
||||
{
|
||||
path: '/teams',
|
||||
name: 'listTeams',
|
||||
component: ListTeamsComponent
|
||||
},
|
||||
{
|
||||
path: '/teams/new',
|
||||
name: 'newTeam',
|
||||
component: NewTeamComponent
|
||||
},
|
||||
{
|
||||
path: '/teams/:id/edit',
|
||||
name: 'editTeam',
|
||||
component: EditTeamComponent
|
||||
},
|
||||
{
|
||||
path: '/tasks/:type',
|
||||
name: 'showTasksInRange',
|
||||
component: ShowTasksInRangeComponent
|
||||
},
|
||||
{
|
||||
path: '/labels',
|
||||
name: 'listLabels',
|
||||
component: ListLabelsComponent
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
@ -341,7 +341,7 @@ export default class AbstractService {
|
|||
}
|
||||
|
||||
const cancel = this.setLoading()
|
||||
model = this.beforeUpdate(model)
|
||||
model = this.beforeDelete(model)
|
||||
return this.http.delete(this.getReplacedRoute(this.paths.delete, model), model)
|
||||
.catch(error => {
|
||||
return this.errorHandler(error)
|
||||
|
|
|
|||
28
src/services/label.js
Normal file
28
src/services/label.js
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import AbstractService from "./abstractService";
|
||||
import LabelModel from '../models/label'
|
||||
|
||||
export default class LabelService extends AbstractService {
|
||||
constructor() {
|
||||
super({
|
||||
create: '/labels',
|
||||
getAll: '/labels',
|
||||
get: '/labels/{id}',
|
||||
update: '/labels/{id}',
|
||||
delete: '/labels/{id}',
|
||||
})
|
||||
}
|
||||
|
||||
modelFactory(data) {
|
||||
return new LabelModel(data)
|
||||
}
|
||||
|
||||
beforeUpdate(label) {
|
||||
label.hex_color = label.hex_color.substring(1, 7)
|
||||
return label
|
||||
}
|
||||
|
||||
beforeCreate(label) {
|
||||
label.hex_color = label.hex_color.substring(1, 7)
|
||||
return label
|
||||
}
|
||||
}
|
||||
16
src/services/labelTask.js
Normal file
16
src/services/labelTask.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import AbstractService from "./abstractService";
|
||||
import LabelTask from "../models/labelTask";
|
||||
|
||||
export default class LabelTaskService extends AbstractService {
|
||||
constructor() {
|
||||
super({
|
||||
create: '/tasks/{taskID}/labels',
|
||||
getAll: '/tasks/{taskID}/labels',
|
||||
delete: '/tasks/{taskID}/labels/{label_id}',
|
||||
})
|
||||
}
|
||||
|
||||
modelFactory(data) {
|
||||
return new LabelTask(data)
|
||||
}
|
||||
}
|
||||
15
src/styles/labels.scss
Normal file
15
src/styles/labels.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
.labels-list {
|
||||
a, a:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tag{
|
||||
margin: 0.5em;
|
||||
background: darken($background, 5);
|
||||
|
||||
&.disabled{
|
||||
opacity: 0.7;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -66,6 +66,10 @@
|
|||
color: $orange;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
|
|
@ -139,4 +143,13 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag{
|
||||
margin-right: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
@import 'styles/tasks';
|
||||
@import 'styles/teams';
|
||||
@import 'styles/fullpage';
|
||||
@import 'styles/labels';
|
||||
|
||||
@import 'styles/fancycheckbox';
|
||||
@import 'styles/tooltip';
|
||||
|
|
|
|||
8
todo.md
8
todo.md
|
|
@ -92,7 +92,13 @@
|
|||
* [x] Priorities
|
||||
* [x] Highlight tasks with high priority
|
||||
* [x] Assignees
|
||||
* [ ] Labels
|
||||
* [x] Labels
|
||||
* User should be able to search for a label
|
||||
* if none is found, "enter" should create and add it to the task
|
||||
* multiselect -> action dispatcher + styling
|
||||
* [x] Label overview + edit
|
||||
* [x] Only be able to edit labels where the user has the right, disable the others
|
||||
* [x] Delay when searching to not search for the character I entered 5 minutes ago
|
||||
* [ ] Timeline/Calendar view -> Dazu tasks die in einem Bestimmten Bereich due sind, macht dann das Frontend
|
||||
|
||||
## Other features
|
||||
|
|
|
|||
12
yarn.lock
12
yarn.lock
|
|
@ -2141,6 +2141,11 @@ color-convert@^1.9.0, color-convert@^1.9.1:
|
|||
dependencies:
|
||||
color-name "1.1.3"
|
||||
|
||||
color-fns@^0.0.10:
|
||||
version "0.0.10"
|
||||
resolved "https://registry.yarnpkg.com/color-fns/-/color-fns-0.0.10.tgz#b03f34ab3bb3902ac24e7c86ff32d845fbbaf7bf"
|
||||
integrity sha512-QFKowTE9CXCLp09Gz5cQo8VPUP55hf73iHEI52JC3NyKfMpQG2VoLWmTxYeTKH6ngkEnoMrCdEX//M6J4PVQBA==
|
||||
|
||||
color-name@1.1.3:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
|
||||
|
|
@ -8954,6 +8959,13 @@ verror@1.10.0:
|
|||
core-util-is "1.0.2"
|
||||
extsprintf "^1.2.0"
|
||||
|
||||
verte@^0.0.10:
|
||||
version "0.0.10"
|
||||
resolved "https://registry.yarnpkg.com/verte/-/verte-0.0.10.tgz#27e132cfb74a55171602184263417eeb8a5692a5"
|
||||
integrity sha512-h4PCDC8hvH9E+CmUx1K/xT2pZgdZ0oxpgaL23xkJD16jhXTU9c4B6h4RD/fBWeu9CURHgWf6+sf6E9m/wfKbuA==
|
||||
dependencies:
|
||||
color-fns "^0.0.10"
|
||||
|
||||
vm-browserify@0.0.4:
|
||||
version "0.0.4"
|
||||
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
|
||||
|
|
|
|||
Loading…
Reference in a new issue