From f2a16d2814a1cb8f2a08e1988ff1a2334b4e085a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Laczk=C3=B3=20Csongor=20Lor=C3=A1nd?= <laczko.csongor.lorand@hallgato.ppke.hu> Date: Tue, 14 May 2024 00:13:25 +0200 Subject: [PATCH] feat: Add image select UI to EditDog and fix minor UI issues --- frontend/src/components/dogs/AllDogs.vue | 2 +- frontend/src/components/dogs/EditDog.vue | 57 ++++++++++++++++++++-- frontend/src/components/dogs/SingleDog.vue | 6 +-- 3 files changed, 56 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/dogs/AllDogs.vue b/frontend/src/components/dogs/AllDogs.vue index e75e492..f748aa2 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 3e658fc..678fd2e 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 6ffefb0..833ba9f 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> -- GitLab