forked from vikunja/frontend
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:
parent
36d62d796c
commit
60c21cc36a
@ -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',
|
||||
|
@ -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.
|
||||
|
80
src/views/labels/NewLabel.vue
Normal file
80
src/views/labels/NewLabel.vue
Normal 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>
|
Loading…
x
Reference in New Issue
Block a user