Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | <template>
<Head title="Create Team" />
<AppLayout :breadcrumbs="[
{ title: 'Administration', href: '/administration' },
{ title: 'Teams', href: '/administration/teams' },
{ title: 'Create', href: '#' }
]">
<div class="p-4">
<div class="flex items-center justify-between gap-3 mb-6">
<h1 class="text-2xl font-bold text-gray-900">Create Team</h1>
</div>
<form @submit.prevent="submit" class="max-w-2xl space-y-6">
<div class="bg-white rounded-lg border p-6">
<h2 class="text-lg font-semibold text-gray-900 mb-4">Team Details</h2>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Name *</label>
<input
v-model="form.name"
type="text"
class="w-full rounded border px-3 py-2"
:class="{ 'border-red-500': form.errors.name }"
required
/>
<div v-if="form.errors.name" class="text-red-500 text-sm mt-1">{{ form.errors.name }}</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
<textarea
v-model="form.description"
rows="3"
class="w-full rounded border px-3 py-2"
:class="{ 'border-red-500': form.errors.description }"
></textarea>
<div v-if="form.errors.description" class="text-red-500 text-sm mt-1">{{ form.errors.description }}</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg border p-6">
<h2 class="text-lg font-semibold text-gray-900 mb-4">Team Members</h2>
<p class="text-sm text-gray-500 mb-4">Select users to add to this team.</p>
<div v-if="props.users.length === 0" class="text-sm text-gray-500">No users available.</div>
<div v-else class="space-y-2 max-h-64 overflow-y-auto">
<label
v-for="user in props.users"
:key="user.id"
class="flex items-center gap-3 rounded-lg border px-4 py-3 cursor-pointer hover:bg-gray-50 transition-colors"
:class="{ 'border-blue-300 bg-blue-50': form.user_ids.includes(user.id) }"
>
<input
type="checkbox"
:value="user.id"
v-model="form.user_ids"
class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
/>
<span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary">
{{ user.name.charAt(0).toUpperCase() }}
</span>
<span class="text-sm font-medium text-gray-900">{{ user.name }}</span>
</label>
</div>
</div>
<div class="flex items-center justify-end gap-3">
<Link href="/administration/teams" class="rounded bg-gray-500 px-4 py-2 text-white hover:bg-gray-600">
Cancel
</Link>
<button
type="submit"
:disabled="form.processing"
class="rounded bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary/90 disabled:opacity-50"
>
{{ form.processing ? 'Creating...' : 'Create Team' }}
</button>
</div>
</form>
</div>
</AppLayout>
</template>
<script setup lang="ts">
import AppLayout from '@/layouts/AppLayout.vue';
import { Head, Link, useForm } from '@inertiajs/vue3';
interface AppUser {
id: number;
name: string;
}
const props = defineProps<{
users: AppUser[];
}>();
const form = useForm({
name: '',
description: '',
user_ids: [] as number[],
});
const submit = () => {
form.post('/administration/teams');
};
</script>
|