# All files / js/pages/groups Create.vue

0% Statements 0/11
0% Branches 0/22
0% Functions 0/6
0% Lines 0/11

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

     <script setup lang="ts">
    import AppLayout from '@/layouts/AppLayout.vue';
    import { Head, Link, useForm } from '@inertiajs/vue3';
    import groups from '@/routes/groups';

    const form = useForm({
        name: '',
        description: '',
        is_administrator: false
    });
    function submit() { form.post(groups.store().url); }
    </script>

    <template>
        <Head title="New Group" />
        <AppLayout :breadcrumbs="[{ title: 'Groups', href: groups.index().url }, { title: 'Create', href: '#' }]">
            <form @submit.prevent="submit" class="space-y-4 p-4">
                <label class="block">
                    <span class="mb-1 block">Name</span>
                    <input v-model="form.name" class="w-full rounded border px-3 py-2" required />
                    <div v-if="form.errors.name" class="text-sm text-red-600">{{ form.errors.name }}</div>
                </label>

                <label class="block">
                    <span class="mb-1 block">Description</span>
                    <textarea v-model="form.description" class="w-full rounded border px-3 py-2" rows="3"></textarea>
                    <div v-if="form.errors.description" class="text-sm text-red-600">{{ form.errors.description }}</div>
                </label>

                <label class="flex items-center space-x-2">
                    <input
                        type="checkbox"
                        v-model="form.is_administrator"
                        class="rounded border-gray-300"
                    />
                    <span class="text-sm font-medium">Administrator Group</span>
                    <div v-if="form.errors.is_administrator" class="text-sm text-red-600">{{ form.errors.is_administrator }}</div>
                </label>
                <p class="text-xs text-gray-600">
                    Administrator groups have access to all administration functions and system settings.
                </p>

                <div class="flex items-center gap-3">
                    <button :disabled="form.processing" class="rounded bg-blue-600 px-4 py-2 text-white">Create</button>
                    <Link :href="groups.index().url" class="rounded border px-4 py-2">Cancel</Link>
                </div>
            </form>
        </AppLayout>
    </template>