# All files / js/pages/administration/Teams Create.vue

0% Statements 0/17
0% Branches 0/28
0% Functions 0/7
0% Lines 0/17

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>