Vue, back edited,added

frontend/src/components/ProfileAddOffer.vue

@@ -3,14 +3,15 @@
     <div class="about__title"><h2>{{ editable ? 'Изменить' : 'Добавить' }} объявление</h2></div>
     <div class="about__images">
       <div class="image__load" v-for="(img, i) in 3" :key="i">
-        <input type="file" @change="previewFiles">
+        <input v-if="!files[i]" type="file" @change="uploadFile">
-        <img src="@/assets/images/image_load.png" alt="">
+        <div v-else class="about__delete" @click="deletePhoto(i)">
-        <div class="about__load">
-          <img src="@/assets/images/upload_log.svg" alt="">
-        </div>
-        <div class="about__delete">
           <img src="@/assets/images/delete_log.svg" alt="">
         </div>
+        <img v-if="!files[i]" src="@/assets/images/image_load.png" alt="">
+        <img v-else :src="url(files[i].file)" alt="">
+        <div v-if="!files[i]" class="about__load">
+          <img src="@/assets/images/upload_log.svg" alt="">
+        </div>
       </div>
     </div>
 <!--    <div class="about__delete">-->
@@ -61,6 +62,7 @@
 
 <script>
 import offerService from "@/services/offer";
+import { getURL } from "@/services/images";
 
 export default {
   name: "ProfileAbout",
@@ -81,17 +83,16 @@ export default {
   methods: {
     async action() {
       const data = { ...this.offer };
-
+      const files = [ ...this.files ];
-      data.user_id = this.$store.getters.user.id;
 
       if (!this.editable)
         offerService
-            .add(data)
+            .add(data, files)
             .then(() =>  this.reset())
             .catch(() => alert('Ошибка создания объявления!'));
       else
         offerService
-            .update(this.editData.id, data)
+            .update(this.editData.id, data, files)
             .then(() =>  this.$emit('updated'))
             .catch(() => alert('Ошибка изменения объявления!'));
     },
@@ -101,7 +102,7 @@ export default {
       return {
         offer: {
           name: ed ? ed.name : '',
-          type: ed ? ed.type : 'Flat',
+          type: ed ? ed.type : 'Studio',
           location: ed ? ed.location : '',
           price: ed ? ed.price : '',
           rooms: ed ? ed.rooms : 1,
@@ -109,15 +110,29 @@ export default {
           description: ed ? ed.description : '',
           is_group: 1,
         },
-        files: [],
+        files: ed ? ed.images : [],
       }
     },
     reset() {
       Object.assign(this.$data, this.initialState());
     },
-    previewFiles(event) {
+    async uploadFile(event) {
-      this.files.push(event.target.files[0]);
+      const file = event.target.files[0];
+
+      const res = await offerService.uploadImage(file);
+
+      this.files.push(res.data.data);
     },
+    async deletePhoto(index) {
+      const id = this.files[index].id;
+
+      offerService.deleteImage(id);
+
+      this.files.splice(index, 1);
+    },
+    url(path) {
+      return getURL(path);
+    }
   },
   watch: {
     editData() {
@@ -171,6 +186,7 @@ export default {
   position: absolute;
   top: 2%;
   right: 2%;
+  cursor: pointer;
 }
 
 .about__delete > img{

frontend/src/components/ProfileMyOffers.vue

@@ -4,9 +4,10 @@
       <h2>Мои объявления</h2>
     </div>
     <div class="my__offer">
-      <div class="about__images" @click="activeId = i" v-for="(img, i) in offers" :key="i">
+      <div class="about__images" @click="activeId = i" v-for="(offer, i) in offers" :key="i">
         <div class="image__load">
-          <img src="@/assets/images/image_load.png" alt="">
+          <img v-if="offer.images.length === 0" src="@/assets/images/image_load.png" alt="">
+          <img v-else :src="url(offer.images[0].file)" alt="">
         </div>
       </div>
       <profile-add-offer v-if="activeId !== null" :edit-data="offers[activeId]" editable @updated="loadOffers"></profile-add-offer>
@@ -26,6 +27,7 @@
 <script>
 import offerService from "@/services/offer";
 import ProfileAddOffer from "@/components/ProfileAddOffer.vue";
+import { getURL } from "@/services/images";
 
 export default {
   name: "ProfileAbout",
@@ -40,6 +42,9 @@ export default {
     async loadOffers() {
       const offers = await offerService.allUserOffers();
       this.offers = offers.data.data;
+    },
+    url(path) {
+      return getURL(path);
     }
   },
   async mounted() {

frontend/src/services/offer.js

@@ -1,14 +1,20 @@
 import api from "@/services/api";
 
 export const OfferService = {
-    async add(data) {
+    async add(data, files) {
+        data.images = files;
         const resp = await api.post('/offers', data);
         return resp;
     },
-    async update(id, data) {
+    async update(id, data, files) {
+        data.images = files;
         const resp = await api.put(`/offers/${id}`, data);
         return resp;
     },
+    async all() {
+        const resp = await api.get('/offers');
+        return resp;
+    },
     async allUserOffers() {
         const resp = await api.get('/users/offers');
         return resp;
@@ -16,6 +22,16 @@ export const OfferService = {
     async getById(id) {
         const resp = await api.get(`/offers/${id}`);
         return resp;
+    },
+    async uploadImage(file) {
+        const resp = await api.postForm('/offers/images', {
+            'image': file,
+        });
+        return resp;
+    },
+    async deleteImage(id) {
+        const resp = await api.delete(`/offers/images/${id}`);
+        return resp;
     }
 };
 

frontend/src/views/CatalogView.vue

@@ -68,7 +68,9 @@
     <div class="suggestions__images">
       <div class="podlozhka" v-for="offer in offers">
         <router-link :to="`/catalog/${offer.id}`" class="nav__link" href="#">
-          <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/1.jpg" alt=""></a></div>
+          <div class="sugg__img" :style="{
+            'background-image': url(offer.images.length !== 0 ? offer.images[0].file : '@/assets/images/1.jpg')
+          }"></div>
           <div class="sugg__text"><p>{{offer.name}}</p><h2>{{ offer.price }}₽</h2></div>
         </router-link>
       </div>
@@ -81,6 +83,8 @@
 import TheHeader from "@/components/TheHeader.vue";
 import TheFooter from "@/components/TheFooter.vue";
 import CatalogType from "@/components/CatalogType.vue";
+import offerService from "@/services/offer";
+import { getURL } from "@/services/images";
 
 export default {
   name: "CatalogView",
@@ -91,10 +95,14 @@ export default {
       componentForm: ''
     }
   },
+  methods: {
+    url(path) {
+      return `url(${getURL(path)})`;
+    }
+  },
   async mounted() {
-    const requests = await fetch('http://tusur.tk:9080/api/offers');
+    const offers = await offerService.all();
-    const offers = await requests.json();
+    this.offers = offers.data.data;
-    this.offers = offers.data;
   }
 }
 </script>