This repository has been archived on 2024-02-08. You can view files and clone it, but cannot push or open issues or pull requests.
frontend/src/views/project/NewProject.vue
kolaente befa6f27bb feat: rename list to project everywhere
fix: project table view

fix: e2e tests

fix: typo in readme

fix: list view route

fix: don't wait until background is loaded for list to show

fix: rename component imports

fix: lint

fix: parse task text

fix: use list card grid

fix: use correct class names

fix: i18n keys

fix: load project

fix: task overview

fix: list view spacing

fix: find project

fix: setLoading when updating a project

fix: loading saved filter

fix: project store loading

fix: color picker import

fix: cypress tests

feat: migrate old list settings

chore: add const for project settings

fix: wrong projecten rename from lists

chore: rename unused variable

fix: editor list

fix: shortcut list class name

fix: pagination list class name

fix: notifications list class name

fix: list view variable name

chore: clarify comment

fix: i18n keys

fix: router imports

fix: comment

chore: remove debugging leftover

fix: remove duplicate variables

fix: change comment

fix: list view variable name

fix: list view css class name

fix: list item property name

fix: name update tasks function correctly

fix: update comment

fix: project create route

fix: list view class names

fix: list view component name

fix: result list class name

fix: animation class list name

fix: change debug log

fix: revert a few navigation changes

fix: use @ for imports of all views

fix: rename link share list class

fix: remove unused css class

fix: dynamically import project components again
2023-03-14 14:04:23 +00:00

74 lines
2.1 KiB
Vue

<template>
<create-edit :title="$t('project.create.header')" @create="createNewProject()" :primary-disabled="project.title === ''">
<div class="field">
<label class="label" for="projectTitle">{{ $t('project.title') }}</label>
<div
:class="{ 'is-loading': projectService.loading }"
class="control"
>
<input
:class="{ disabled: projectService.loading }"
@keyup.enter="createNewProject()"
@keyup.esc="$router.back()"
class="input"
:placeholder="$t('project.create.titlePlaceholder')"
type="text"
name="projectTitle"
v-focus
v-model="project.title"
/>
</div>
</div>
<p class="help is-danger" v-if="showError && project.title === ''">
{{ $t('project.create.addTitleRequired') }}
</p>
<div class="field">
<label class="label">{{ $t('project.color') }}</label>
<div class="control">
<color-picker v-model="project.hexColor" />
</div>
</div>
</create-edit>
</template>
<script setup lang="ts">
import {ref, reactive, shallowReactive} from 'vue'
import {useI18n} from 'vue-i18n'
import {useRouter, useRoute} from 'vue-router'
import ProjectService from '@/services/project'
import ProjectModel from '@/models/project'
import CreateEdit from '@/components/misc/create-edit.vue'
import ColorPicker from '@/components/input/ColorPicker.vue'
import {success} from '@/message'
import {useTitle} from '@/composables/useTitle'
import {useProjectStore} from '@/stores/projects'
const {t} = useI18n({useScope: 'global'})
const router = useRouter()
const route = useRoute()
useTitle(() => t('project.create.header'))
const showError = ref(false)
const project = reactive(new ProjectModel())
const projectService = shallowReactive(new ProjectService())
const projectStore = useProjectStore()
async function createNewProject() {
if (project.title === '') {
showError.value = true
return
}
showError.value = false
project.namespaceId = Number(route.params.namespaceId as string)
const newProject = await projectStore.createProject(project)
await router.push({
name: 'project.index',
params: { projectId: newProject.id },
})
success({message: t('project.create.createdSuccess') })
}
</script>