Add "new label" button to label management (#359)
All checks were successful
continuous-integration/drone/push Build is passing
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:
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>
|
Reference in New Issue
Block a user