Add "new label" button to label management (#359)

Allow to create labels directly from Manage labels page. It uses the same fullscreen dialog style as adding other things.

Almost all of the code is reused the `NewTeam` component

Co-authored-by: David Košťál <kostal.david8@gmail.com>
Reviewed-on: vikunja/frontend#359
Reviewed-by: konrad <konrad@kola-entertainments.de>
Co-authored-by: profi248 <kostal.david8@gmail.com>
Co-committed-by: profi248 <kostal.david8@gmail.com>
This commit is contained in:
profi248 2020-12-30 17:55:54 +00:00 committed by konrad
parent 36d62d796c
commit 60c21cc36a
3 changed files with 92 additions and 0 deletions

View File

@ -19,6 +19,7 @@ import ListNamespaces from '../views/namespaces/ListNamespaces'
import ListTeamsComponent from '../views/teams/ListTeams'
// Label Handling
import ListLabelsComponent from '../views/labels/ListLabels'
import NewLabelComponent from '../views/labels/NewLabel'
// Migration
import MigrationComponent from '../views/migrator/Migrate'
import MigrateServiceComponent from '../views/migrator/MigrateService'
@ -253,6 +254,11 @@ export default new Router({
name: 'labels.index',
component: ListLabelsComponent,
},
{
path: '/labels/new',
name: 'labels.create',
component: NewLabelComponent,
},
{
path: '/migrate',
name: 'migrate.start',

View File

@ -1,5 +1,11 @@
<template>
<div :class="{ 'is-loading': labelService.loading}" class="loader-container content">
<router-link :to="{name:'labels.create'}" class="button is-success button-right">
<span class="icon is-small">
<icon icon="plus"/>
</span>
New label
</router-link>
<h1>Manage labels</h1>
<p>
Click on a label to edit it.

View File

@ -0,0 +1,80 @@
<template>
<div class="fullpage">
<a @click="back()" class="close">
<icon :icon="['far', 'times-circle']"/>
</a>
<h3>Create a new label</h3>
<form @keyup.esc="back()" @submit.prevent="newlabel">
<div class="field is-grouped">
<p class="control is-expanded" v-bind:class="{ 'is-loading': labelService.loading }">
<input
:class="{ 'disabled': labelService.loading }"
class="input"
placeholder="The label title goes here..." type="text"
v-focus
v-model="label.title"/>
</p>
<p class="control">
<button class="button is-success noshadow" type="submit">
<span class="icon is-small">
<icon icon="plus"/>
</span>
Add
</button>
</p>
</div>
<p class="help is-danger" v-if="showError && label.title === ''">
Please specify a title.
</p>
</form>
</div>
</template>
<script>
import labelModel from '../../models/label'
import labelService from '../../services/label'
import {IS_FULLPAGE} from '@/store/mutation-types'
import LabelModel from '../../models/label'
import LabelService from '../../services/label'
export default {
name: 'NewLabel',
data() {
return {
labelService: labelService,
label: labelModel,
showError: false,
}
},
created() {
this.labelService = new LabelService()
this.label = new LabelModel()
this.$store.commit(IS_FULLPAGE, true)
},
mounted() {
this.setTitle('Create a new label')
},
methods: {
newlabel() {
if (this.label.title === '') {
this.showError = true
return
}
this.showError = false
this.labelService.create(this.label)
.then(response => {
this.$router.push({name: 'labels.index', params: {id: response.id}})
this.success({message: 'The label was successfully created.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
back() {
this.$router.go(-1)
},
},
}
</script>