113 lines
4.4 KiB
Vue
113 lines
4.4 KiB
Vue
<template>
|
|
<AppLayout title="New Ticket">
|
|
<div class="p-6 max-w-2xl">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<Link :href="route('ticketing.index')" class="text-sm text-gray-500 hover:underline">← Tickets</Link>
|
|
<h1 class="text-2xl font-bold text-gray-900">Submit a Ticket</h1>
|
|
</div>
|
|
|
|
<form @submit.prevent="submit" class="bg-white rounded-xl shadow p-6 space-y-5">
|
|
<!-- Title -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Title <span class="text-red-500">*</span></label>
|
|
<input
|
|
v-model="form.title"
|
|
type="text"
|
|
maxlength="255"
|
|
placeholder="Brief summary of the issue"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
|
|
:class="{ 'border-red-400': errors.title }"
|
|
/>
|
|
<p v-if="errors.title" class="mt-1 text-xs text-red-500">{{ errors.title }}</p>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Description <span class="text-red-500">*</span></label>
|
|
<textarea
|
|
v-model="form.description"
|
|
rows="5"
|
|
placeholder="Describe the issue in detail…"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
|
|
:class="{ 'border-red-400': errors.description }"
|
|
/>
|
|
<p v-if="errors.description" class="mt-1 text-xs text-red-500">{{ errors.description }}</p>
|
|
</div>
|
|
|
|
<!-- Category + Priority -->
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Category <span class="text-red-500">*</span></label>
|
|
<select
|
|
v-model="form.category"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
|
|
:class="{ 'border-red-400': errors.category }"
|
|
>
|
|
<option value="">Select category</option>
|
|
<option value="IT">IT</option>
|
|
<option value="Facilities">Facilities</option>
|
|
<option value="HR">HR</option>
|
|
<option value="Other">Other</option>
|
|
</select>
|
|
<p v-if="errors.category" class="mt-1 text-xs text-red-500">{{ errors.category }}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Priority <span class="text-red-500">*</span></label>
|
|
<select
|
|
v-model="form.priority"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
|
|
:class="{ 'border-red-400': errors.priority }"
|
|
>
|
|
<option value="">Select priority</option>
|
|
<option value="low">Low</option>
|
|
<option value="medium">Medium</option>
|
|
<option value="high">High</option>
|
|
<option value="urgent">Urgent</option>
|
|
</select>
|
|
<p v-if="errors.priority" class="mt-1 text-xs text-red-500">{{ errors.priority }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-3 pt-2">
|
|
<Link :href="route('ticketing.index')" class="px-4 py-2 text-sm text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
|
|
Cancel
|
|
</Link>
|
|
<button
|
|
type="submit"
|
|
:disabled="processing"
|
|
class="px-5 py-2 text-sm text-white rounded-lg transition disabled:opacity-50"
|
|
style="background-color: var(--color-sidebar-active-bg)"
|
|
>
|
|
{{ processing ? 'Submitting…' : 'Submit Ticket' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { Link, useForm } from '@inertiajs/vue3'
|
|
import AppLayout from '@/Layouts/AppLayout.vue'
|
|
|
|
const form = useForm({
|
|
title: '',
|
|
description: '',
|
|
category: '',
|
|
priority: 'medium',
|
|
})
|
|
|
|
const processing = ref(false)
|
|
const errors = ref({})
|
|
|
|
function submit() {
|
|
processing.value = true
|
|
form.post(route('ticketing.store'), {
|
|
onError: (e) => { errors.value = e },
|
|
onFinish: () => { processing.value = false },
|
|
})
|
|
}
|
|
</script>
|