149 lines
6.6 KiB
Vue
149 lines
6.6 KiB
Vue
<script setup lang="ts">
|
|
import AppLayout from '@/Shared/Layouts/AppLayout.vue';
|
|
import { Head, Link, useForm } from '@inertiajs/vue3';
|
|
import type { GameData, ConsoleData } from '@/types';
|
|
|
|
interface Props {
|
|
game: GameData;
|
|
consoles: ConsoleData[];
|
|
user: {
|
|
name: string;
|
|
email: string;
|
|
};
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const form = useForm({
|
|
title: props.game.title,
|
|
description: props.game.description || '',
|
|
release_year: props.game.releaseYear || '',
|
|
developer: props.game.developer || '',
|
|
publisher: props.game.publisher || '',
|
|
genre: props.game.genre || '',
|
|
rating: props.game.rating || '',
|
|
});
|
|
|
|
const submit = () => {
|
|
form.put(route('games.update', props.game.slug));
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout :title="'Edit ' + game.title" :user="user">
|
|
<template #header>
|
|
<div class="flex items-center gap-2">
|
|
<Link :href="route('games.show', game.slug)" class="text-purple-600 hover:underline">
|
|
{{ game.title }}
|
|
</Link>
|
|
<span class="text-gray-400">/</span>
|
|
<h2 class="font-semibold text-xl text-gray-800 leading-tight">Edit</h2>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="py-12">
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
|
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
|
|
<form @submit.prevent="submit" class="space-y-6">
|
|
<div>
|
|
<label for="title" class="block text-sm font-medium text-gray-700">Title</label>
|
|
<input
|
|
id="title"
|
|
v-model="form.title"
|
|
type="text"
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500"
|
|
/>
|
|
<div v-if="form.errors.title" class="text-red-500 text-sm mt-1">{{ form.errors.title }}</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="description" class="block text-sm font-medium text-gray-700">Description</label>
|
|
<textarea
|
|
id="description"
|
|
v-model="form.description"
|
|
rows="4"
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500"
|
|
/>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="release_year" class="block text-sm font-medium text-gray-700">Release Year</label>
|
|
<input
|
|
id="release_year"
|
|
v-model="form.release_year"
|
|
type="number"
|
|
min="1970"
|
|
max="2030"
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="rating" class="block text-sm font-medium text-gray-700">Rating (0-10)</label>
|
|
<input
|
|
id="rating"
|
|
v-model="form.rating"
|
|
type="number"
|
|
min="0"
|
|
max="10"
|
|
step="0.1"
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="developer" class="block text-sm font-medium text-gray-700">Developer</label>
|
|
<input
|
|
id="developer"
|
|
v-model="form.developer"
|
|
type="text"
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="publisher" class="block text-sm font-medium text-gray-700">Publisher</label>
|
|
<input
|
|
id="publisher"
|
|
v-model="form.publisher"
|
|
type="text"
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="genre" class="block text-sm font-medium text-gray-700">Genre</label>
|
|
<input
|
|
id="genre"
|
|
v-model="form.genre"
|
|
type="text"
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-2">
|
|
<Link
|
|
:href="route('games.show', game.slug)"
|
|
class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300"
|
|
>
|
|
Cancel
|
|
</Link>
|
|
<button
|
|
type="submit"
|
|
:disabled="form.processing"
|
|
class="px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700 disabled:opacity-50"
|
|
>
|
|
Save Changes
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|