feat: Add image select UI to EditDog and fix minor UI issues

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

frontend/src/components/dogs/EditDog.vue

 <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

frontend/src/components/dogs/SingleDog.vue

 <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>