local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: NewList script setup (#1989)

Browse source 
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1989
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
This commit is contained in:
Dominik Pschenitschni 2022-05-22 15:10:44 +00:00 committed by konrad
parent 96fce73192
commit 5291fc1192
1 changed files with 39 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
src/views/list/NewList.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<create-edit :title="$t('list.create.header')" @create="newList()" :primary-disabled="list.title === ''"> <create-edit :title="$t('list.create.header')" @create="createNewList()" :primary-disabled="list.title === ''">
<div class="field"> <div class="field">
<label class="label" for="listTitle">{{ $t('list.title') }}</label> <label class="label" for="listTitle">{{ $t('list.title') }}</label>
<div <div
@ -8,7 +8,7 @@
> >
<input <input
:class="{ disabled: listService.loading }" :class="{ disabled: listService.loading }"
@keyup.enter="newList()" @keyup.enter="createNewList()"
@keyup.esc="$router.back()" @keyup.esc="$router.back()"
class="input" class="input"
:placeholder="$t('list.create.titlePlaceholder')" :placeholder="$t('list.create.titlePlaceholder')"
@ -31,45 +31,44 @@
</create-edit> </create-edit>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {defineComponent} from 'vue' import {ref, reactive, shallowReactive} from 'vue'
import ListService from '../../services/list' import {useI18n} from 'vue-i18n'
import ListModel from '../../models/list' import {useRouter, useRoute} from 'vue-router'
import CreateEdit from '@/components/misc/create-edit.vue' import {useStore} from 'vuex'
import ColorPicker from '../../components/input/colorPicker'
export default defineComponent({ import ListService from '@/services/list'
name: 'NewList', import ListModel from '@/models/list'
data() { import CreateEdit from '@/components/misc/create-edit.vue'
return { import ColorPicker from '@/components/input/colorPicker.vue'
showError: false,
list: new ListModel(), import { success } from '@/message'
listService: new ListService(), import { useTitle } from '@/composables/useTitle'
}
}, const {t} = useI18n()
components: { const store = useStore()
CreateEdit, const router = useRouter()
ColorPicker, const route = useRoute()
},
mounted() { useTitle(() => t('list.create.header'))
this.setTitle(this.$t('list.create.header'))
}, const showError = ref(false)
methods: { const list = reactive(new ListModel())
async newList() { const listService = shallowReactive(new ListService())
if (this.list.title === '') {
this.showError = true async function createNewList() {
if (list.title === '') {
showError.value = true
return return
} }
this.showError = false showError.value = false
this.list.namespaceId = parseInt(this.$route.params.namespaceId) list.namespaceId = parseInt(route.params.namespaceId)
const list = await this.$store.dispatch('lists/createList', this.list) const newList = await store.dispatch('lists/createList', list)
this.$message.success({message: this.$t('list.create.createdSuccess') }) await router.push({
this.$router.push({
name: 'list.index', name: 'list.index',
params: { listId: list.id }, params: { listId: newList.id },
}) })
}, success({message: t('list.create.createdSuccess') })
}, }
})
</script> </script>