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

0% Statements 0/23
0% Branches 0/53
0% Functions 0/12
0% Lines 0/23

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

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

    const props = defineProps<{
        groups: { id: number; name: string }[];
        companies: { id: number; name: string }[];
    }>();
    const form = useForm({
        name: '',
        email: '',
        user_type: 'standard' as 'standard' | 'limited' | 'info' | 'client',
        hourly_rate: null as number | null,
        password: '',
        groups: [] as number[],
        companies: [] as number[]
    });
    function submit() { form.post(users.store().url); }
    </script>

    <template>
        <Head title="New User" />
        <AppLayout :breadcrumbs="[{ title: 'Users', href: users.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" />
                    <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">Email</span>
                    <input v-model="form.email" type="email" class="w-full rounded border px-3 py-2" />
                    <div v-if="form.errors.email" class="text-sm text-red-600">{{ form.errors.email }}</div>
                </label>
                <label class="block">
                    <span class="mb-1 block">User Type</span>
                    <select v-model="form.user_type" class="w-full rounded border px-3 py-2">
                        <option value="standard">Standard</option>
                        <option value="limited">Limited</option>
                        <option value="info">Info</option>
                        <option value="client">Client</option>
                    </select>
                    <p v-if="form.user_type === 'limited'" class="mt-1 text-xs text-gray-500">Limited users can only view jobcards, change jobcard status, and create booked time.</p>
                    <p v-if="form.user_type === 'info'" class="mt-1 text-xs text-gray-500">Info users are for reference only and will not have login access.</p>
                    <p v-if="form.user_type === 'client'" class="mt-1 text-xs text-gray-500">Client users must be linked to a customer account for portal access.</p>
                    <div v-if="form.errors.user_type" class="text-sm text-red-600">{{ form.errors.user_type }}</div>
                </label>
                <label class="block">
                    <span class="mb-1 block">Hourly Rate (R)</span>
                    <input v-model.number="form.hourly_rate" type="number" step="0.01" min="0" class="w-full rounded border px-3 py-2" placeholder="0.00" />
                    <p class="mt-1 text-xs text-gray-500">Default hourly rate used when logging time on jobcards.</p>
                    <div v-if="form.errors.hourly_rate" class="text-sm text-red-600">{{ form.errors.hourly_rate }}</div>
                </label>
                <label v-if="form.user_type !== 'info'" class="block">
                    <span class="mb-1 block">Password</span>
                    <input v-model="form.password" type="password" class="w-full rounded border px-3 py-2" />
                    <div v-if="form.errors.password" class="text-sm text-red-600">{{ form.errors.password }}</div>
                </label>

                <div class="rounded border p-4">
                    <div class="mb-2 font-medium">Groups</div>
                    <div class="grid gap-2 md:grid-cols-3">
                        <label v-for="g in props.groups" :key="g.id" class="flex items-center gap-2">
                            <input type="checkbox" :value="g.id" v-model="form.groups" />
                            <span>{{ g.name }}</span>
                        </label>
                    </div>
                </div>

                <div class="rounded border p-4">
                    <div class="mb-2 font-medium">Company Access</div>
                    <p class="mb-3 text-sm text-gray-600">Select which companies this user can access. If no companies are selected, the user will have access to all companies.</p>
                    <div class="grid gap-2 md:grid-cols-2">
                        <label v-for="company in props.companies" :key="company.id" class="flex items-center gap-2">
                            <input type="checkbox" :value="company.id" v-model="form.companies" />
                            <span>{{ company.name }}</span>
                        </label>
                    </div>
                    <div v-if="form.errors.companies" class="text-sm text-red-600 mt-2">{{ form.errors.companies }}</div>
                </div>

                <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="users.index().url" class="rounded border px-4 py-2">Cancel</Link>
                </div>
            </form>
        </AppLayout>
    </template>