feat: full dashboard-ticketing scaffold with data model, controllers, Vue pages
This commit is contained in:
Joel Wedemire
@@ -1,147 +1,114 @@
|
||||
<template>
|
||||
<AppLayout :title="`Edit Ticket #${ticket.id}`">
|
||||
<div class="p-6 max-w-2xl">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<Link :href="route('ticketing.show', ticket.id)" class="text-sm text-gray-500 hover:underline">← Ticket #{{ ticket.id }}</Link>
|
||||
<h1 class="text-2xl font-bold text-gray-900">Edit Ticket</h1>
|
||||
<div class="max-w-2xl mx-auto py-8 px-4">
|
||||
<div class="mb-6">
|
||||
<Link :href="route('ticketing.show', { ticket: ticket.id })" class="text-sm text-indigo-600 hover:underline">← Back to ticket</Link>
|
||||
<h1 class="text-xl font-bold text-gray-900 dark:text-white mt-2">
|
||||
Edit <span class="font-mono text-base">{{ ticket.number }}</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="submit" class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 space-y-5">
|
||||
<!-- Title -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Title</label>
|
||||
<input v-model="form.title" type="text" required class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg text-sm" />
|
||||
<p v-if="form.errors.title" class="text-xs text-red-600 mt-1">{{ form.errors.title }}</p>
|
||||
</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"
|
||||
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 dark:text-gray-300 mb-1">Description</label>
|
||||
<textarea v-model="form.description" rows="6" required class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg text-sm"></textarea>
|
||||
<p v-if="form.errors.description" class="text-xs text-red-600 mt-1">{{ form.errors.description }}</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"
|
||||
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>
|
||||
<!-- Status -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status</label>
|
||||
<select v-model="form.status" class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg text-sm">
|
||||
<option value="open">Open</option>
|
||||
<option value="in_progress">In Progress</option>
|
||||
<option value="pending">Pending</option>
|
||||
<option value="resolved">Resolved</option>
|
||||
<option value="closed">Closed</option>
|
||||
</select>
|
||||
</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="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>
|
||||
<!-- Priority -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Priority</label>
|
||||
<select v-model="form.priority_id" class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg text-sm">
|
||||
<option :value="null">No priority</option>
|
||||
<option v-for="p in priorities" :key="p.id" :value="p.id">{{ p.name }}</option>
|
||||
</select>
|
||||
</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="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>
|
||||
<!-- Assignee -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Assignee</label>
|
||||
<select v-model="form.assigned_to" class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg text-sm">
|
||||
<option :value="null">Unassigned</option>
|
||||
<option v-for="a in agents" :key="a.id" :value="a.id">{{ a.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Admin-only: Status + Assigned To -->
|
||||
<template v-if="isAdmin">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
|
||||
<select
|
||||
v-model="form.status"
|
||||
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"
|
||||
>
|
||||
<option value="open">Open</option>
|
||||
<option value="in_progress">In Progress</option>
|
||||
<option value="resolved">Resolved</option>
|
||||
<option value="closed">Closed</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- Project -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Project</label>
|
||||
<select v-model="form.project_id" class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg text-sm">
|
||||
<option :value="null">No project</option>
|
||||
<option v-for="proj in projects" :key="proj.id" :value="proj.id">{{ proj.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center pt-2">
|
||||
<button
|
||||
type="button"
|
||||
@click="destroy"
|
||||
class="px-4 py-2 text-sm text-red-600 hover:text-red-800 transition"
|
||||
>
|
||||
Delete Ticket
|
||||
</button>
|
||||
<div class="flex gap-3">
|
||||
<Link :href="route('ticketing.show', ticket.id)" 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 ? 'Saving…' : 'Save Changes' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</AppLayout>
|
||||
<!-- Due Date -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Due Date</label>
|
||||
<input v-model="form.due_date" type="date" class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg text-sm" />
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3 justify-end pt-2">
|
||||
<Link
|
||||
:href="route('ticketing.show', { ticket: ticket.id })"
|
||||
class="px-4 py-2 text-sm text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700"
|
||||
>Cancel</Link>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="form.processing"
|
||||
class="px-5 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 disabled:opacity-60 transition"
|
||||
>
|
||||
{{ form.processing ? 'Saving…' : 'Save Changes' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Link, useForm, router } from '@inertiajs/vue3'
|
||||
import AppLayout from '@/Layouts/AppLayout.vue'
|
||||
import { Link, useForm } from '@inertiajs/vue3'
|
||||
|
||||
const props = defineProps({
|
||||
ticket: Object,
|
||||
isAdmin: { type: Boolean, default: false },
|
||||
ticket: Object,
|
||||
priorities: Array,
|
||||
agents: Array,
|
||||
projects: Array,
|
||||
})
|
||||
|
||||
const form = useForm({
|
||||
title: props.ticket.title,
|
||||
title: props.ticket.title,
|
||||
description: props.ticket.description,
|
||||
category: props.ticket.category,
|
||||
priority: props.ticket.priority,
|
||||
status: props.ticket.status,
|
||||
assigned_to: props.ticket.assigned_to ?? '',
|
||||
status: props.ticket.status,
|
||||
priority_id: props.ticket.priority_id,
|
||||
assigned_to: props.ticket.assigned_to,
|
||||
project_id: props.ticket.project_id,
|
||||
due_date: props.ticket.due_date,
|
||||
})
|
||||
|
||||
const processing = ref(false)
|
||||
const errors = ref({})
|
||||
|
||||
function submit() {
|
||||
processing.value = true
|
||||
form.put(route('ticketing.update', props.ticket.id), {
|
||||
onError: (e) => { errors.value = e },
|
||||
onFinish: () => { processing.value = false },
|
||||
form.put(route('ticketing.update', { ticket: props.ticket.id }), {
|
||||
onSuccess: () => {
|
||||
// redirect happens server side
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function destroy() {
|
||||
if (!confirm('Delete this ticket? This cannot be undone.')) return
|
||||
router.delete(route('ticketing.destroy', props.ticket.id))
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user