Add "new label" button to label management (#359)
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
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.
|
||||
|
|
|
@ -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