Vue, back edited,added

frontend/src/components/RatingStars.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="user__stat">
-    <div class="stat"><h3>5</h3></div>
+    <div class="stat"><h3>{{ totalStars }}</h3></div>
     <div class="stars">
-      <img src="../assets/images/star.png" alt="">
+      <img src="../assets/images/star.png" alt="" v-for="(star, i) in totalStars" :key="i">
-      <img src="../assets/images/star.png" alt="">
-      <img src="../assets/images/star.png" alt="">
-      <img src="../assets/images/star.png" alt="">
-      <img src="../assets/images/star.png" alt="">
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "RatingStars"
+  name: "RatingStars",
+  props: {
+    totalStars: {
+      type: Number,
+      default: 5,
+    }
+  }
 }
 </script>
 

frontend/src/router/index.js

@@ -1,9 +1,4 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import MainView from '@/views/MainView.vue'
-import AuthView from '@/views/AuthView.vue'
-import CatalogView from "@/views/CatalogView.vue";
-import ProfileView from "@/views/ProfileView.vue";
-import OfferView from "@/views/OfferView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -11,27 +6,27 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: MainView
+      component: () => import(/* webpackChunkName: "MainView" */ '@/views/MainView.vue')
     },
     {
       path: '/auth',
       name: 'auth',
-      component: AuthView
+      component: () => import(/* webpackChunkName: "AuthView" */ '@/views/AuthView.vue')
     },
     {
       path: '/catalog',
       name: 'catalog',
-      component: CatalogView
+      component: () => import(/* webpackChunkName: "CatalogView" */ '@/views/CatalogView.vue')
     },
     {
       path: '/profile',
       name: 'profile',
-      component: ProfileView
+      component: () => import(/* webpackChunkName: "ProfileView" */ '@/views/ProfileView.vue')
     },
     {
       path: '/catalog/:id',
       name: 'offer',
-      component: OfferView
+      component: () => import(/* webpackChunkName: "OfferView" */ '@/views/OfferView.vue')
     },
   ]
 })

frontend/src/services/offer.js

@@ -19,6 +19,13 @@ export const OfferService = {
         const resp = await api.get('/users/offers');
         return resp;
     },
+    async filter(filters) {
+        const queryParamsObj = filters.reduce((obj, item) => (obj[item.name] = item.value, obj) ,{});
+        const resp = await api.get('/offers', {
+            params: queryParamsObj,
+        });
+        return resp;
+    },
     async getById(id) {
         const resp = await api.get(`/offers/${id}`);
         return resp;

frontend/src/views/CatalogView.vue

@@ -1,6 +1,5 @@
 <template>
   <the-header></the-header>
-
   <section class="suggestions">
     <div class="suggestions__title">
       <h3 class="newhome">Найти недвижимость</h3>
@@ -98,18 +97,21 @@ export default {
     isSelected(name, value) {
       return this.sortParams.some((e) => e.name === name && e.value === value) ? 'parametrs__block__selected' : '';
     },
-    addSortParam(name, value, isRange = false) {
+     async addSortParam(name, value) {
       const element = this.sortParams.findIndex((e) => e.name === name && e.value === value);
 
-      if (~element && !isRange) {
+      if (~element) {
         this.sortParams.splice(element, 1);
+        await this.reloadOffers();
         return;
       }
 
       this.sortParams = this.sortParams.filter((e) => e.name !== name);
       this.sortParams.push({ name, value });
+
+      await this.reloadOffers();
     },
-    addRangeSortParam(range, paramName) {
+    async addRangeSortParam(range, paramName) {
       const min = this[range].min;
       const max = this[range].max;
 

frontend/src/views/OfferView.vue

@@ -19,13 +19,15 @@
             </div>
           </div>
           <div class="adv__main__images">
-            <div class="main__image">
+            <Transition>
-              <a href="#"><img src="../assets/images/offer1.png" alt=""></a>
+              <div class="main__image" v-if="offer.images" :style="{ 'background-image': imagePreview }">
-            </div>
+<!--                <a href="#"><img v-if="offer.images" :src="imagePreview" alt=""></a>-->
+              </div>
+            </Transition>
             <div class="other__images">
-              <a href="#"><img src="../assets/images/offer3.png" alt=""></a>
+              <a href="#" v-for="(image, i) in offer.images" :key="i" @click.prevent @mouseover="imagePreviewId = i">
-              <a href="#"><img src="../assets/images/offer2.png" alt=""></a>
+                <img :src="url(image.file)" alt="">
-              <a href="#"><img src="../assets/images/offer4.png" alt=""></a>
+              </a>
             </div>
           </div>
         </div>
@@ -33,18 +35,18 @@
         <div class="adv__host">
           <div class="adv__host__about__user">
             <div class="username">
-              <h2>Виктория</h2>
+              <h2>{{ ownerName }}</h2>
             </div>
             <rating-stars></rating-stars>
-            <div class="number">
+            <div class="number" @click.prevent="showPhone">
               <a href="#" class="favoritextinf"><h5>Показать номер</h5></a>
             </div>
 <!--            <div class="message">-->
 <!--              <a href="#" class="favoritextinf"><h5>Написать владельцу</h5></a>-->
 <!--            </div>-->
           </div>
-          <div class="userlogo">
+          <div class="userlogo" :style="{'background-image': ownerPhoto}">
-            <img src="@/assets/images/userlogosmall.png" alt="">
+<!--            <img :src="ownerPhoto" alt="">-->
           </div>
         </div>
       </div>
@@ -72,32 +74,14 @@
           <h2>Отзывы</h2>
         </div>
         <div class="reviews__blocks">
-          <div class="review">
+          <div v-if="offer?.user?.feedback" class="review" v-for="(review, i) in offer.user.feedback" :key="i">
             <div class="review__avatar">
               <img src="@/assets/images/forcomment.png" alt="">
             </div>
             <div class="rewiew__comment">
-              <h5>Очень приятный владелец, все чисто и опрятно</h5>
+              <h5>{{ review.comment }}</h5>
             </div>
-            <rating-stars></rating-stars>
+            <rating-stars :totalStars="review.rating"></rating-stars>
-          </div>
-          <div class="review">
-            <div class="review__avatar">
-              <img src="@/assets/images/forcomment.png" alt="">
-            </div>
-            <div class="rewiew__comment">
-              <h5>Очень приятный владелец, все чисто и опрятно</h5>
-            </div>
-            <rating-stars></rating-stars>
-          </div>
-          <div class="review">
-            <div class="review__avatar">
-              <img src="@/assets/images/forcomment.png" alt="">
-            </div>
-            <div class="rewiew__comment">
-              <h5>Очень приятный владелец, все чисто и опрятно</h5>
-            </div>
-            <rating-stars></rating-stars>
           </div>
         </div>
       </div>
@@ -111,12 +95,14 @@ import RatingStars from "@/components/RatingStars.vue";
 import TheHeader from "@/components/TheHeader.vue";
 import TheFooter from "@/components/TheFooter.vue";
 import offerService from "@/services/offer";
+import { getURL } from "@/services/images";
 
 export default {
   name: "OfferView",
   components: {TheFooter, TheHeader, RatingStars},
   data() {
     return {
+      imagePreviewId: 0,
       offer: {}
     };
   },
@@ -135,6 +121,32 @@ export default {
         'Room2': '2 комнаты',
         'Room3More': '3 комнаты и больше',
       }[this.offer.rooms]
+    },
+    imagePreview() {
+      return this.offer.images.length !== 0
+          ? `url(${getURL(this.offer.images[this.imagePreviewId].file)})`
+          : 'url(@/assets/images/offer1.png)';
+    },
+    ownerName() {
+      if (!this.offer.user) return;
+
+      const user = this.offer.user;
+      return user.first_name ?? `Пользователь #${user.id}`;
+    },
+    ownerPhoto() {
+      if (!this.offer.user) return;
+
+      const user = this.offer.user;
+      return user.photo ? `url(${getURL(user.photo)})` : 'url(/src/assets/images/user_standart.png)';
+    },
+  },
+  methods: {
+    url(path) {
+      return getURL(path);
+    },
+    showPhone() {
+      const phone = this.offer.user.phone ?? 'отсутствует';
+      alert(`Номер пользователя: ${phone}`);
     }
   },
   async mounted() {
@@ -151,4 +163,14 @@ export default {
 
 <style scoped>
   @import url("@/assets/css/offer.css");
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
 </style>