Add create popup component
This commit is contained in:
parent
0d34d01689
commit
618821cc29
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card" :class="{'has-no-shadow': !shadow}">
|
||||||
<header class="card-header" v-if="title !== ''">
|
<header class="card-header" v-if="title !== ''">
|
||||||
<p class="card-header-title">
|
<p class="card-header-title">
|
||||||
{{ title }}
|
{{ title }}
|
||||||
|
@ -34,6 +34,10 @@ export default {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
shadow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
38
src/components/misc/create.vue
Normal file
38
src/components/misc/create.vue
Normal file
|
@ -0,0 +1,38 @@
|
||||||
|
<template>
|
||||||
|
<modal @close="$router.back()">
|
||||||
|
<card
|
||||||
|
:title="title"
|
||||||
|
:shadow="false"
|
||||||
|
:padding="false"
|
||||||
|
class="has-text-left"
|
||||||
|
>
|
||||||
|
<div class="p-4">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
<footer class="modal-card-foot is-flex is-justify-content-flex-end">
|
||||||
|
<x-button :shadow="false" type="secondary" @click="$router.back()">
|
||||||
|
Cancel
|
||||||
|
</x-button>
|
||||||
|
<x-button :shadow="false" type="primary" @click="$emit('create')" icon="plus">
|
||||||
|
{{ createLabel }}
|
||||||
|
</x-button>
|
||||||
|
</footer>
|
||||||
|
</card>
|
||||||
|
</modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'create',
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
createLabel: {
|
||||||
|
type: String,
|
||||||
|
default: 'Create',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -1,44 +1,35 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="fullpage">
|
<create title="Create a new list" @create="newList()">
|
||||||
<a @click="back()" class="close">
|
<div class="field">
|
||||||
<icon :icon="['far', 'times-circle']">
|
<label class="label" for="listTitle">List Title</label>
|
||||||
</icon>
|
<div
|
||||||
</a>
|
:class="{ 'is-loading': listService.loading }"
|
||||||
<h3>Create a new list</h3>
|
class="control"
|
||||||
<div class="field is-grouped">
|
>
|
||||||
<p :class="{ 'is-loading': listService.loading}" class="control is-expanded">
|
|
||||||
<input
|
<input
|
||||||
:class="{ 'disabled': listService.loading}"
|
:class="{ disabled: listService.loading }"
|
||||||
@keyup.enter="newList()"
|
@keyup.enter="newList()"
|
||||||
@keyup.esc="back()"
|
@keyup.esc="back()"
|
||||||
class="input"
|
class="input"
|
||||||
placeholder="The list's name goes here..."
|
placeholder="The list's title goes here..."
|
||||||
type="text"
|
type="text"
|
||||||
|
name="listTitle"
|
||||||
v-focus
|
v-focus
|
||||||
v-model="list.title"/>
|
v-model="list.title"
|
||||||
</p>
|
/>
|
||||||
<p class="control">
|
</div>
|
||||||
<x-button
|
|
||||||
:disabled="list.title === ''"
|
|
||||||
@click="newList()"
|
|
||||||
icon="plus"
|
|
||||||
:shadow="false"
|
|
||||||
>
|
|
||||||
Add
|
|
||||||
</x-button>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<p class="help is-danger" v-if="showError && list.title === ''">
|
<p class="help is-danger" v-if="showError && list.title === ''">
|
||||||
Please specify a title.
|
Please specify a title.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</create>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import router from '../../router'
|
import router from '../../router'
|
||||||
import ListService from '../../services/list'
|
import ListService from '../../services/list'
|
||||||
import ListModel from '../../models/list'
|
import ListModel from '../../models/list'
|
||||||
import {IS_FULLPAGE} from '@/store/mutation-types'
|
import Create from '@/components/misc/create'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'NewList',
|
name: 'NewList',
|
||||||
|
@ -49,10 +40,12 @@ export default {
|
||||||
listService: ListService,
|
listService: ListService,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
components: {
|
||||||
|
Create,
|
||||||
|
},
|
||||||
created() {
|
created() {
|
||||||
this.list = new ListModel()
|
this.list = new ListModel()
|
||||||
this.listService = new ListService()
|
this.listService = new ListService()
|
||||||
this.$store.commit(IS_FULLPAGE, true)
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.setTitle('Create a new list')
|
this.setTitle('Create a new list')
|
||||||
|
@ -66,12 +59,19 @@ export default {
|
||||||
this.showError = false
|
this.showError = false
|
||||||
|
|
||||||
this.list.namespaceId = this.$route.params.id
|
this.list.namespaceId = this.$route.params.id
|
||||||
this.$store.dispatch('lists/createList', this.list)
|
this.$store
|
||||||
.then(r => {
|
.dispatch('lists/createList', this.list)
|
||||||
this.success({message: 'The list was successfully created.'}, this)
|
.then((r) => {
|
||||||
router.push({name: 'list.index', params: {listId: r.id}})
|
this.success(
|
||||||
|
{ message: 'The list was successfully created.' },
|
||||||
|
this
|
||||||
|
)
|
||||||
|
router.push({
|
||||||
|
name: 'list.index',
|
||||||
|
params: { listId: r.id },
|
||||||
})
|
})
|
||||||
.catch(e => {
|
})
|
||||||
|
.catch((e) => {
|
||||||
this.error(e, this)
|
this.error(e, this)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
Reference in New Issue
Block a user