diff --git a/frontend/src/components/dogs/AllDogs.vue b/frontend/src/components/dogs/AllDogs.vue index e75e492a126fad112e60237e104d203d173aab2e..f748aa2005f218cdefbe247b6a1cf4efa89d877e 100644 --- a/frontend/src/components/dogs/AllDogs.vue +++ b/frontend/src/components/dogs/AllDogs.vue @@ -96,6 +96,6 @@ export default { } .add-button { - @apply px-4 py-2 mt-4 text-sm font-medium text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none; + @apply px-4 py-2 mt-4 text-sm font-medium text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none mb-8; } </style> \ No newline at end of file diff --git a/frontend/src/components/dogs/EditDog.vue b/frontend/src/components/dogs/EditDog.vue index 3e658fc24c0840cf7dc893c850eb8b4bf890c819..678fd2e63638c14caca2b2573f2eafb8711e78b8 100644 --- a/frontend/src/components/dogs/EditDog.vue +++ b/frontend/src/components/dogs/EditDog.vue @@ -1,7 +1,7 @@ <template> <div class="edit-dog-container"> <h1>Kutya szerkesztése</h1> - <form @submit.prevent="editDog"> + <form @submit.prevent="editDog" enctype="multipart/form-data"> <div class="input-group"> <label for="name">Neve</label> <input id="name" v-model="dog.name" type="text" required> @@ -14,6 +14,18 @@ <label for="age">Kora</label> <input id="age" v-model="dog.age" type="number" required> </div> + <div class="input-group"> + <label for="dog-image">Kép</label> + <file-pond + id="dog-image" + name="dogPicture" + ref="pond" + label-idle="Húzza ide a fájlt..." + allow-multiple="false" + accepted-file-types="image/jpeg, image/png" + v-on:init="handleFilePondInit" + /> + </div> <button type="submit">Mentés</button> </form> </div> @@ -22,8 +34,19 @@ <script> import axios from '@/axiosConfig.js'; import { mapState } from 'vuex'; +import vueFilePond from 'vue-filepond'; +import FilePondPluginImagePreview from 'filepond-plugin-image-preview'; +import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'; +import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css'; +import 'filepond/dist/filepond.min.css'; + +// Create component +const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview); export default { + components: { + FilePond + }, data() { return { dog: {}, @@ -33,16 +56,40 @@ export default { ...mapState(['token']), }, methods: { + handleFilePondInit: function() { + console.log('FilePond has initialized'); + }, async fetchDog() { const response = await axios.get(`/api/dogs/${this.$route.params.id}`); this.dog = response.data; }, async editDog() { + const pictureFile = this.$refs.pond.getFiles()[0].file; + + const dogData = { + name: this.dog.name, + breed: this.dog.breed, + age: this.dog.age + }; + + const formData = new FormData(); + formData.append('dog', JSON.stringify(dogData)); // Convert dog data to JSON string + formData.append('picture', pictureFile, pictureFile.name); // Append picture as a blob + const config = { - headers: { Authorization: `Bearer ${this.token}` }, + headers: { + Authorization: `Bearer ${this.token}`, + // 'Content-Type': 'multipart/form-data' + }, }; - await axios.post(`/api/dogs/${this.$route.params.id}/edit`, this.dog, config); - this.$router.push(`/dog/${this.$route.params.id}`); + + try { + await axios.post(`/api/dogs/${this.$route.params.id}/edit`, this.dog, config); + this.$router.push(`/dog/${this.$route.params.id}`); + } catch (error) { + console.error('Error editing dog:', error); + // Handle error + } }, }, created() { @@ -69,6 +116,6 @@ input { } button { - @apply px-4 py-2 mt-4 text-sm font-medium text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none; + @apply px-4 py-2 mt-4 text-sm font-medium text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none mb-8; } </style> \ No newline at end of file diff --git a/frontend/src/components/dogs/SingleDog.vue b/frontend/src/components/dogs/SingleDog.vue index 6ffefb0c2d6ad8ef245aec30f3de228190586d28..833ba9f94cf295697179f06b0746f57f1074418b 100644 --- a/frontend/src/components/dogs/SingleDog.vue +++ b/frontend/src/components/dogs/SingleDog.vue @@ -1,9 +1,9 @@ <template> <div v-if="dog" class="single-dog flex flex-col items-center bg-gray-100 p-4 rounded shadow"> <h1 class="text-2xl font-bold mb-4">{{ dog.name }}</h1> - <img :src="dog.picture" :alt="`Image of ${dog.name}`" class="w-64 h-64 object-cover mb-4 rounded shadow"/> - <p class="text-lg mb-2"><strong>Age:</strong> {{ dog.age }}</p> - <p class="text-lg"><strong>Breed:</strong> {{ dog.breed }}</p> + <img :src="dog.picture" :alt="`${dog.name} képe`" class="w-64 h-64 object-cover mb-4 rounded shadow"/> + <p class="text-lg mb-2"><strong>Kor:</strong> {{ dog.age }}</p> + <p class="text-lg"><strong>Faj:</strong> {{ dog.breed }}</p> <router-link :to="`/edit-dog/${dog.id}`" tag="button" class="edit-button">Szerkesztés</router-link> <button @click="deleteDog" class="delete-button">Törlés</button> </div>