work-hub-server/apps/web/app/components/ProjectForm.vue

57 lines
1.6 KiB
Vue

<script setup lang="ts">
import { PROJECT_STATUSES, type ProjectStatus } from "@workspace/schema/constants";
const { t } = useI18n();
const props = withDefaults(
defineProps<{
name?: string;
description?: string;
status?: ProjectStatus;
saving?: boolean;
}>(),
{
name: "",
description: "",
status: "active",
},
);
const emit = defineEmits<{
submit: [body: { name: string; description?: string; status: string }];
}>();
const name = ref(props.name);
const description = ref(props.description);
const status = ref(props.status);
function onSubmit() {
emit("submit", {
name: name.value,
description: description.value || undefined,
status: status.value,
});
}
</script>
<template>
<form class="space-y-6" @submit.prevent="onSubmit">
<UFormField :label="t('form.name')" required>
<UInput v-model="name" :placeholder="t('form.namePlaceholder')" class="w-full" required />
</UFormField>
<UFormField :label="t('form.description')">
<UTextarea v-model="description" :placeholder="t('form.descriptionPlaceholder')" class="w-full" :rows="3" />
</UFormField>
<UFormField :label="t('form.status')">
<USelect v-model="status" :items="PROJECT_STATUSES.map((s) => ({ label: s, value: s }))" class="w-full" />
</UFormField>
<div class="flex gap-3 justify-end">
<UButton :label="t('form.cancel')" icon="i-lucide-x" color="neutral" variant="outline" to="/projects" />
<UButton type="submit" :label="t('form.save')" icon="i-lucide-save" color="primary" :loading="saving" />
</div>
</form>
</template>