Vue, back edited,added

frontend/src/components/ProfileAddOffer.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="about__user">
-    <div class="about__title"><h2>Добавить объявление</h2></div>
+    <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">
@@ -50,7 +50,7 @@
         <input type="text" size="40" v-model.trim="offer.description">
       </div>
     </div>
-    <button @click="addOffer">Отправить</button>
+    <button @click="action">Отправить</button>
   </div>
 </template>
 
@@ -59,30 +59,49 @@ import offerService from "@/services/offer";
 
 export default {
   name: "ProfileAbout",
+  emits: ['updated'],
+  props: {
+    editData: {
+      type: Object,
+      default: null,
+    },
+    editable: {
+      type: Boolean,
+      default: false,
+    },
+  },
   data() {
     return this.initialState()
   },
   methods: {
-    async addOffer() {
+    async action() {
       const data = { ...this.offer };
 
       data.user_id = this.$store.getters.user.id;
 
-      offerService
-          .add(data)
-          .then(() =>  this.reset())
-          .catch(() => alert('Ошибка!'));
+      if (!this.editable)
+        offerService
+            .add(data)
+            .then(() =>  this.reset())
+            .catch(() => alert('Ошибка создания объявления!'));
+      else
+        offerService
+            .update(this.editData.id, data)
+            .then(() =>  this.$emit('updated'))
+            .catch(() => alert('Ошибка изменения объявления!'));
     },
     initialState() {
+      const ed = this.editData;
+
       return {
         offer: {
-          name: '',
-          type: 'Flat',
-          location: '',
-          price: '',
-          rooms: 1,
-          space: '',
-          description: '',
+          name: ed ? ed.name : '',
+          type: ed ? ed.type : 'Flat',
+          location: ed ? ed.location : '',
+          price: ed ? ed.price : '',
+          rooms: ed ? ed.rooms : 1,
+          space: ed ? ed.space : '',
+          description: ed ? ed.description : '',
           is_group: 1,
         },
         files: [],
@@ -94,6 +113,11 @@ export default {
     previewFiles(event) {
       this.files.push(event.target.files[0]);
     },
+  },
+  watch: {
+    editData() {
+      this.reset();
+    }
   }
 }
 </script>
@@ -103,7 +127,6 @@ export default {
 .about__load{
   position: absolute;
   width: 100%;
-
   margin-left: 40%;
 }
 

frontend/src/components/ProfileMyOffers.vue

@@ -24,8 +24,27 @@
 </template>
 
 <script>
+import offerService from "@/services/offer";
+import ProfileAddOffer from "@/components/ProfileAddOffer.vue";
+
 export default {
-  name: "ProfileAbout"
+  name: "ProfileAbout",
+  components: {ProfileAddOffer},
+  data() {
+    return {
+      activeId: null,
+      offers: [],
+    };
+  },
+  methods: {
+    async loadOffers() {
+      const offers = await offerService.allUserOffers();
+      this.offers = offers.data.data;
+    }
+  },
+  async mounted() {
+    await this.loadOffers();
+  }
 }
 </script>
 
@@ -44,7 +63,6 @@ export default {
 
 .about__images {
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
   margin-top: 1%;
 }

frontend/src/services/offer.js

@@ -5,6 +5,18 @@ export const OfferService = {
         const resp = await api.post('/offers', data);
         return resp;
     },
+    async update(id, data) {
+        const resp = await api.put(`/offers/${id}`, data);
+        return resp;
+    },
+    async allUserOffers() {
+        const resp = await api.get('/users/offers');
+        return resp;
+    },
+    async getById(id) {
+        const resp = await api.get(`/offers/${id}`);
+        return resp;
+    }
 };
 
 export default OfferService;

frontend/src/views/CatalogView.vue

@@ -66,7 +66,7 @@
 </template>
 
 <script>
-import TheHeader from "../components/TheHeader.vue";
+import TheHeader from "@/components/TheHeader.vue";
 import TheFooter from "@/components/TheFooter.vue";
 import CatalogType from "@/components/CatalogType.vue";
 

frontend/src/views/OfferView.vue

@@ -6,11 +6,11 @@
         <div class="adv__main">
           <div class="adv__main__title">
             <div class="mtitle">
-              <h2>4-к. квартира, 78,4 м², 20/28 эт.</h2>
+              <h2>{{ offer.name }}</h2>
             </div>
             <div class="mprice__fav">
               <div class="price">
-                <h2>40 610 000 ₽</h2>
+                <h2>{{ offer.price }} ₽</h2>
               </div>
 <!--              <a href="#" class="favoritext"><div class="favorite">-->
 <!--                <h4>Добавить в избранное</h4>-->
@@ -110,10 +110,34 @@
 import RatingStars from "@/components/RatingStars.vue";
 import TheHeader from "@/components/TheHeader.vue";
 import TheFooter from "@/components/TheFooter.vue";
+import offerService from "@/services/offer";
 
 export default {
+  name: "OfferView",
   components: {TheFooter, TheHeader, RatingStars},
-  name: "OfferView"
+  data() {
+    return {
+      offer: {}
+    };
+  },
+  computed: {
+    offerType() {
+      return {
+        'Flat': 'Квартира',
+        'House': 'Дом',
+        'Land': 'Участок',
+      }[this.offer.type];
+    }
+  },
+  async mounted() {
+    const id = this.$route.params.id;
+
+    if (id === undefined)
+      return this.$router.back();
+
+    const resp = await offerService.getById(id);
+    this.offer = resp.data.data;
+  }
 }
 </script>
 

frontend/src/views/ProfileView.vue

@@ -80,7 +80,7 @@ export default {
         this.$router.push('/');
       });
     }
-  }
+  },
 }
 </script>>