local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Labels on tasks (#25)

Browse source
This commit is contained in:
konrad 2019-03-07 19:48:40 +00:00 committed by Gitea
parent ae499fd8a0
commit f7a17e45bc
17 changed files with 528 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -11,6 +11,7 @@
"bulma": "^0.7.1", "bulma": "^0.7.1",
"lodash": "^4.17.11", "lodash": "^4.17.11",
"v-tooltip": "^2.0.0-rc.33", "v-tooltip": "^2.0.0-rc.33",
"verte": "^0.0.10",
"vue": "^2.5.17" "vue": "^2.5.17"
}, },
"devDependencies": { "devDependencies": {

8
src/App.vue
View file

@ -67,6 +67,14 @@
New Namespace New Namespace
</router-link> </router-link>
</li> </li>
<li>
<router-link :to="{ name: 'listLabels'}">
<span class="icon">
<icon icon="tags"/>
</span>
Labels
</router-link>
</li>
</ul> </ul>
</div> </div>
<aside class="menu namespaces-lists"> <aside class="menu namespaces-lists">

164
src/components/labels/ListLabels.vue Normal file
View 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>

120
src/components/lists/ShowList.vue
View file

@ -41,6 +41,9 @@
</div> </div>
<span class="tasktext" :class="{ 'done': l.done}"> <span class="tasktext" :class="{ 'done': l.done}">
{{l.text}} {{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> <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 v-if="l.priority >= priorities.HIGH" class="high-priority" :class="{'not-so-high': l.priority === priorities.HIGH}">
<span class="icon"> <span class="icon">
@ -207,7 +210,7 @@
label="username" label="username"
track-by="id"> track-by="id">
<template slot="clear" slot-scope="props"> <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> </template>
<span slot="noResult">Oops! No user found. Consider changing the search query.</span> <span slot="noResult">Oops! No user found. Consider changing the search query.</span>
</multiselect> </multiselect>
@ -221,6 +224,42 @@
</div> </div>
</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"> <div class="field">
<label class="label" for="subtasks">Subtasks</label> <label class="label" for="subtasks">Subtasks</label>
<div class="tasks noborder" v-if="taskEditTask.subtasks && taskEditTask.subtasks.length > 0"> <div class="tasks noborder" v-if="taskEditTask.subtasks && taskEditTask.subtasks.length > 0">
@ -280,6 +319,10 @@
import UserModel from '../../models/user' import UserModel from '../../models/user'
import UserService from '../../services/user' import UserService from '../../services/user'
import priorities from '../../models/priorities' 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 { export default {
data() { data() {
@ -309,6 +352,11 @@
newAssignee: UserModel, newAssignee: UserModel,
userService: UserService, userService: UserService,
foundUsers: [], foundUsers: [],
labelService: LabelService,
labelTaskService: LabelTaskService,
foundLabels: [],
labelTimeout: null,
} }
}, },
components: { components: {
@ -327,6 +375,8 @@
this.newTask = new TaskModel() this.newTask = new TaskModel()
this.userService = new UserService() this.userService = new UserService()
this.newAssignee = new UserModel() this.newAssignee = new UserModel()
this.labelService = new LabelService()
this.labelTaskService = new LabelTaskService()
this.loadList() this.loadList()
}, },
watch: { watch: {
@ -453,7 +503,7 @@
}, },
findUser(query) { findUser(query) {
if(query === '') { if(query === '') {
this.clearAll() this.clearAllFoundUsers()
return return
} }
@ -468,9 +518,73 @@
message.error(e, this) message.error(e, this)
}) })
}, },
clearAll () { clearAllFoundUsers () {
this.$set(this, 'foundUsers', []) 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> </script>

2
src/main.js
View file

@ -41,6 +41,7 @@ import { faBars } from '@fortawesome/free-solid-svg-icons'
import { faPowerOff } from '@fortawesome/free-solid-svg-icons' import { faPowerOff } from '@fortawesome/free-solid-svg-icons'
import { faCalendarWeek } from '@fortawesome/free-solid-svg-icons' import { faCalendarWeek } from '@fortawesome/free-solid-svg-icons'
import { faExclamation } 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 { faTimesCircle } from '@fortawesome/free-regular-svg-icons'
import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons' import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@ -66,6 +67,7 @@ library.add(faPowerOff)
library.add(faCalendarWeek) library.add(faCalendarWeek)
library.add(faCalendarAlt) library.add(faCalendarAlt)
library.add(faExclamation) library.add(faExclamation)
library.add(faTags)
Vue.component('icon', FontAwesomeIcon) Vue.component('icon', FontAwesomeIcon)

47
src/models/label.js Normal file
View 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
View file

@ -0,0 +1,11 @@
import AbstractModel from "./abstractModel";
export default class LabelTask extends AbstractModel {
defaults() {
return {
id: 0,
taskID: 0,
label_id: 0,
}
}
}

5
src/models/task.js
View file

@ -1,5 +1,6 @@
import AbstractModel from './abstractModel'; import AbstractModel from './abstractModel';
import UserModel from './user' import UserModel from './user'
import LabelModel from "./label";
export default class TaskModel extends AbstractModel { export default class TaskModel extends AbstractModel {
@ -24,6 +25,10 @@ export default class TaskModel extends AbstractModel {
return new UserModel(a) return new UserModel(a)
}) })
this.createdBy = new UserModel(this.createdBy) this.createdBy = new UserModel(this.createdBy)
this.labels = this.labels.map(l => {
return new LabelModel(l)
})
} }
defaults() { defaults() {

153
src/router/index.js
View file

@ -19,81 +19,88 @@ import EditNamespaceComponent from '@/components/namespaces/EditNamespace'
import ListTeamsComponent from '@/components/teams/ListTeams' import ListTeamsComponent from '@/components/teams/ListTeams'
import EditTeamComponent from '@/components/teams/EditTeam' import EditTeamComponent from '@/components/teams/EditTeam'
import NewTeamComponent from '@/components/teams/NewTeam' import NewTeamComponent from '@/components/teams/NewTeam'
// Label Handling
import ListLabelsComponent from '@/components/labels/ListLabels'
Vue.use(Router) Vue.use(Router)
export default new Router({ export default new Router({
mode:'history', mode: 'history',
routes: [ routes: [
{ {
path: '/', path: '/',
name: 'home', name: 'home',
component: HomeComponent component: HomeComponent
}, },
{ {
path: '/login', path: '/login',
name: 'login', name: 'login',
component: LoginComponent component: LoginComponent
}, },
{ {
path: '/get-password-reset', path: '/get-password-reset',
name: 'getPasswordReset', name: 'getPasswordReset',
component: GetPasswordResetComponent component: GetPasswordResetComponent
}, },
{ {
path: '/password-reset', path: '/password-reset',
name: 'passwordReset', name: 'passwordReset',
component: PasswordResetComponent component: PasswordResetComponent
}, },
{ {
path: '/register', path: '/register',
name: 'register', name: 'register',
component: RegisterComponent component: RegisterComponent
}, },
{ {
path: '/lists/:id', path: '/lists/:id',
name: 'showList', name: 'showList',
component: ShowListComponent component: ShowListComponent
}, },
{ {
path: '/lists/:id/edit', path: '/lists/:id/edit',
name: 'editList', name: 'editList',
component: EditListComponent component: EditListComponent
}, },
{ {
path: '/namespaces/:id/list', path: '/namespaces/:id/list',
name: 'newList', name: 'newList',
component: NewListComponent component: NewListComponent
}, },
{ {
path: '/namespaces/new', path: '/namespaces/new',
name: 'newNamespace', name: 'newNamespace',
component: NewNamespaceComponent component: NewNamespaceComponent
}, },
{ {
path: '/namespaces/:id/edit', path: '/namespaces/:id/edit',
name: 'editNamespace', name: 'editNamespace',
component: EditNamespaceComponent component: EditNamespaceComponent
}, },
{ {
path: '/teams', path: '/teams',
name: 'listTeams', name: 'listTeams',
component: ListTeamsComponent component: ListTeamsComponent
}, },
{ {
path: '/teams/new', path: '/teams/new',
name: 'newTeam', name: 'newTeam',
component: NewTeamComponent component: NewTeamComponent
}, },
{ {
path: '/teams/:id/edit', path: '/teams/:id/edit',
name: 'editTeam', name: 'editTeam',
component: EditTeamComponent component: EditTeamComponent
}, },
{ {
path: '/tasks/:type', path: '/tasks/:type',
name: 'showTasksInRange', name: 'showTasksInRange',
component: ShowTasksInRangeComponent component: ShowTasksInRangeComponent
}, },
] {
path: '/labels',
name: 'listLabels',
component: ListLabelsComponent
}
]
}) })

2
src/services/abstractService.js
View file

@ -341,7 +341,7 @@ export default class AbstractService {
} }
const cancel = this.setLoading() const cancel = this.setLoading()
model = this.beforeUpdate(model) model = this.beforeDelete(model)
return this.http.delete(this.getReplacedRoute(this.paths.delete, model), model) return this.http.delete(this.getReplacedRoute(this.paths.delete, model), model)
.catch(error => { .catch(error => {
return this.errorHandler(error) return this.errorHandler(error)

28
src/services/label.js Normal file
View 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
View 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
View 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;
}
}
}

13
src/styles/tasks.scss
View file

@ -66,6 +66,10 @@
color: $orange; color: $orange;
} }
} }
.tag {
margin: 0 0.5em;
}
} }
input[type="checkbox"] { input[type="checkbox"] {
@ -139,4 +143,13 @@
} }
} }
} }
.tag{
margin-right: 0.5em;
margin-bottom: 0.5em;
&:last-child{
margin-right: 0;
}
}
} }

1
src/vikunja.scss
View file

@ -4,6 +4,7 @@
@import 'styles/tasks'; @import 'styles/tasks';
@import 'styles/teams'; @import 'styles/teams';
@import 'styles/fullpage'; @import 'styles/fullpage';
@import 'styles/labels';
@import 'styles/fancycheckbox'; @import 'styles/fancycheckbox';
@import 'styles/tooltip'; @import 'styles/tooltip';

8
todo.md
View file

@ -92,7 +92,13 @@
* [x] Priorities * [x] Priorities
* [x] Highlight tasks with high priority * [x] Highlight tasks with high priority
* [x] Assignees * [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 * [ ] Timeline/Calendar view -> Dazu tasks die in einem Bestimmten Bereich due sind, macht dann das Frontend
## Other features ## Other features

12
yarn.lock
View file

@ -2141,6 +2141,11 @@ color-convert@^1.9.0, color-convert@^1.9.1:
dependencies: dependencies:
color-name "1.1.3" 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: color-name@1.1.3:
version "1.1.3" version "1.1.3"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" 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" core-util-is "1.0.2"
extsprintf "^1.2.0" 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: vm-browserify@0.0.4:
version "0.0.4" version "0.0.4"
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73" resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"