Add frontend components

codingstuff91 · Jul 15, 2024 · 25b50db · 25b50db
1 parent 8ae33ce
commit 25b50db
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 0 deletions.
diff --git a/resources/js/Pages/Character/Experience.vue b/resources/js/Pages/Character/Experience.vue
@@ -0,0 +1,36 @@
+<script setup>
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+import CharacterExperience from '@/Pages/Character/Partials/Experience.vue';
+import {Head} from '@inertiajs/vue3';
+
+defineProps({
+    characters: Array,
+});
+
+</script>
+
+<template>
+    <Head title="Experience"/>
+
+    <AuthenticatedLayout>
+        <template #header>
+            <div class="flex justify-center">
+                <div class="flex flex-col">
+                    <h1 class="attribute_title text-2xl leading-tight text-center">Attribution Experience</h1>
+                </div>
+            </div>
+        </template>
+
+        <div class="pb-4">
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+                <div class="flex justify-center mx-4 my-4 px-4 py-2 bg-gray-600 rounded-lg">
+                    <h1>Attribution des points d'experience</h1>
+
+                </div>
+                <div v-for="character in characters" :key="character.id">
+                    <CharacterExperience :character="character"/>
+                </div>
+            </div>
+        </div>
+    </AuthenticatedLayout>
+</template>
diff --git a/resources/js/Pages/Character/Partials/Experience.vue b/resources/js/Pages/Character/Partials/Experience.vue
@@ -0,0 +1,36 @@
+<template>
+    <div class="bg-gray-500">
+        <h2>{{ character.name }}</h2>
+        <form class="mt-6 space-y-6" @submit.prevent="form.put(route('experience.update', character))">
+            <InputLabel value="Points experience"/>
+
+            <TextInput
+                v-model="form.experiencePoints"
+                autofocus
+                class="mt-1 block w-full"
+                required
+                type="text"
+            />
+
+            <PrimaryButton :disabled="form.processing">Confirmer</PrimaryButton>
+        </form>
+    </div>
+</template>
+
+<script setup>
+
+import {useForm} from "@inertiajs/vue3";
+import TextInput from "@/Components/TextInput.vue";
+import InputLabel from "@/Components/InputLabel.vue";
+import PrimaryButton from "@/Components/PrimaryButton.vue";
+
+const props = defineProps({
+    character: Object,
+});
+
+const form = useForm({
+    characterId: props.character.id,
+    experiencePoints: 0,
+});
+
+</script>