Add "new label" button to label management (#359)
All checks were successful
continuous-integration/drone/push Build is passing

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: #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

@ -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.

@ -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>