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

feat NewNamespace script setup (#2415)

Browse source 
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2415
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-09-28 13:31:06 +00:00 committed by konrad
parent e9cf562969
commit 63f2e6ba6f
1 changed files with 36 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
src/views/namespaces/NewNamespace.vue
View file

@ -10,9 +10,12 @@
class="control is-expanded" class="control is-expanded"
:class="{ 'is-loading': namespaceService.loading }" :class="{ 'is-loading': namespaceService.loading }"
> >
<!-- The user should be able to close the modal by pressing escape - that already works with the default modal.
But with the input modal here since it autofocuses the input that input field catches the focus instead.
Hence we place the listener on the input field directly. -->
<input <input
@keyup.enter="newNamespace()" @keyup.enter="newNamespace()"
@keyup.esc="back()" @keyup.esc="$router.back()"
class="input" class="input"
:placeholder="$t('namespace.attributes.titlePlaceholder')" :placeholder="$t('namespace.attributes.titlePlaceholder')"
type="text" type="text"
@ -40,48 +43,42 @@
</create-edit> </create-edit>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {defineComponent} from 'vue' import {ref, shallowReactive} from 'vue'
import {useI18n} from 'vue-i18n'
import {useRouter} from 'vue-router'
import Message from '@/components/misc/message.vue' import Message from '@/components/misc/message.vue'
import NamespaceModel from '../../models/namespace'
import NamespaceService from '../../services/namespace'
import CreateEdit from '@/components/misc/create-edit.vue' import CreateEdit from '@/components/misc/create-edit.vue'
import ColorPicker from '../../components/input/colorPicker.vue' import ColorPicker from '@/components/input/colorPicker.vue'
import { setTitle } from '@/helpers/setTitle'
import {useNamespaceStore} from '@/stores/namespaces'
export default defineComponent({ import NamespaceModel from '@/models/namespace'
name: 'NewNamespace', import NamespaceService from '@/services/namespace'
data() { import {useNamespaceStore} from '@/stores/namespaces'
return { import type {INamespace} from '@/modelTypes/INamespace'
showError: false,
namespace: new NamespaceModel(), import {useTitle} from '@/composables/useTitle'
namespaceService: new NamespaceService(), import {success} from '@/message'
}
}, const showError = ref(false)
components: { const namespace = ref<INamespace>(new NamespaceModel())
Message, const namespaceService = shallowReactive(new NamespaceService())
ColorPicker,
CreateEdit, const {t} = useI18n({useScope: 'global'})
}, const router = useRouter()
mounted() {
setTitle(this.$t('namespace.create.title')) useTitle(() => t('namespace.create.title'))
},
methods: { async function newNamespace() {
async newNamespace() { if (namespace.value.title === '') {
if (this.namespace.title === '') { showError.value = true
this.showError = true
return return
} }
this.showError = false showError.value = false
const namespace = await this.namespaceService.create(this.namespace) const newNamespace = await namespaceService.create(namespace.value)
const namespaceStore = useNamespaceStore() useNamespaceStore().addNamespace(newNamespace)
namespaceStore.addNamespace(namespace) success({message: t('namespace.create.success')})
this.$message.success({message: this.$t('namespace.create.success')}) router.back()
this.$router.back() }
},
},
})
</script> </script>