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

55 lines
1.4 KiB
Vue

<script setup lang="ts">
import { PROJECT_STATUSES, type ProjectStatus } from "@workspace/schema/constants";
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="Name" required>
<UInput v-model="name" placeholder="Project name" class="w-full" required />
</UFormField>
<UFormField label="Description">
<UTextarea v-model="description" placeholder="Optional description" class="w-full" :rows="3" />
</UFormField>
<UFormField label="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="Cancel" color="neutral" variant="outline" to="/projects" />
<UButton type="submit" label="Save" color="primary" :loading="saving" />
</div>
</form>
</template>