Products.vue

<template>
<div class="row">
  <div class="special-filter-wrap col-md-3 col-lg-3 col-lg-offset-0">
    <SelectCar :view="'short'" :page="'products'" :preSelected="selectedCar2" v-if="!carinfo.fuel && !selectedCar.fuel" />
  </div>

  <div class="col-sm-12 col-md-9 col-lg-9" :class="carinfo.fuel || selectedCar.fuel ? ['col-md-12','col-lg-12'] : ''">
    <div class="row">
      <div class="col-xs-12 col-sm-12 ">
        <CarTitle :titleValue="titleVal" :filterProducts="filterProducts" :selectedProduct="selectedProduct" :filterSuppliers="filterSuppliers" :selectedSuppliers="selectedSuppliers" />
      </div>
    </div>

    <grid-loader :loading="loading"></grid-loader>

    <div v-if="!loading">
      <ProductRow :productGroup="productGroup" v-for="(productGroup, index) in productGroups" :key="index" />

      <h1 v-if="!loading && productGroups.length == 0">{{ $t('no_required_products') }}</h1>

      <div class="pagination-wrapper flex-row valign-wrapper" v-show="pageCount > 1">
        <paginate :page-count="pageCount" v-model="page" :prev-text="'Prev'" :next-text="'Next'" :container-class="'pagination'">
        </paginate>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import SelectCar from "@/components/SelectCar"
import ProductRow from "@/components/ProductRow"
import CarTitle from "@/components/CarTitle"
import {
  mapGetters
} from "vuex"
import loaderMixin from "@/mixins/loader.mixin"
import Paginate from 'vuejs-paginate'
import carinfo from "../store/carinfo"

export default {
  name: "products",
  mixins: [loaderMixin],
  data: () => ({
    productGroups: [],
    loading: false,
    pageSize: 5,
    page: 1,
    pageCount: 1,
    filterProducts: [],
    filterSuppliers: [],
    titleVal: '',
    selectedProduct: '',
    selectedSuppliers: [],
    selectedCar: {},
    selectedCar2: {
      manufacturer: "",
      model: "",
      engine: "",
      year: "",
      fuel: ""
    },
    needToUpdate: true
  }),

  async created() {
    this.page = parseInt(this.$route.query.page) || 1
    if (!this.$route.query.hasOwnProperty('suppliers') || this.$route.query.suppliers == null) {
      const routeQuery = {
        ...this.$route.query
      }
      const queryPush = Object.assign(routeQuery, {
        suppliers: this.$route.params.brand
      })
      this.$router.push({
        query: queryPush
      })
    }
    await this.fetchProducts()
  },

  watch: {
    page: async function(newValue) {
      // this.selectedCar = {}
      const routeQuery = {
        ...this.$route.query
      }
      const queryPush = Object.assign(routeQuery, {
        page: newValue
      })
      this.$router.push({
        query: queryPush
      })
      await this.fetchProducts()
    }
  },

  methods: {
    async fetchProducts() {
      this.loading = true

      /* категории */
      let splittedSlug = this.$route.path.split("/").filter((el) => el != "")
      splittedSlug.splice(0, 1) // убираем лишние элементы, полученные из URL

      this.man = await this.$store.dispatch("fetchSelectData")
      let pos = 0,
        carInfo = []
      splittedSlug.forEach(value => !this.man.includes(value) ? pos++ : pos += 0)
      console.log(pos)
      if (splittedSlug.length > 3) splittedSlug = splittedSlug.splice(0, 3)

      let carInfo = this.$route.path.split("/").filter((el) => el != "" && !splittedSlug.includes(el))
      carInfo.splice(0, (this.$route.params.brand) ? 2 : 1)

      if (carInfo.length) {
        if (this.man.includes(carInfo[0])) {
          this.man = await this.$store.dispatch("fetchSelectData", {
            manufacturer: carInfo[0]
          });
          this.carinfo.manufacturer = carInfo[0]
          this.selectedCar.manufacturer = carInfo[0]
        } else this.carinfo.manufacturer = ""

        if (this.man.includes(carInfo[1])) {
          this.man = await this.$store.dispatch("fetchSelectData", {
            manufacturer: carInfo[0],
            model: carInfo[1]
          });
          this.carinfo.model = carInfo[1]
          this.selectedCar.model = carInfo[1]
        } else this.carinfo.model = ""

        if (this.man.includes(carInfo[2])) {
          this.man = await this.$store.dispatch("fetchSelectData", {
            manufacturer: carInfo[0],
            model: carInfo[1],
            engine: carInfo[2]
          });
          this.carinfo.engine = carInfo[2]
          this.selectedCar.engine = carInfo[2]
        } else this.carinfo.engine = ""

        if (this.man.includes(parseInt(carInfo[3]))) {
          this.man = await this.$store.dispatch("fetchSelectData", {
            manufacturer: carInfo[0],
            model: carInfo[1],
            engine: carInfo[2],
            year: carInfo[3]
          });
          this.carinfo.year = carInfo[3]
          this.selectedCar.year = carInfo[3]
        } else this.carinfo.year = ""
        if (this.man.includes(carInfo[4])) {
          this.man = await this.$store.dispatch("fetchSelectData", {
            manufacturer: carInfo[0],
            model: carInfo[1],
            engine: carInfo[2],
            year: carInfo[3],
            fuel: carInfo[4]
          });
          this.carinfo.fuel = carInfo[4]
          this.selectedCar.fuel = carInfo[4]
        } else this.carinfo.fuel = ""
        if (Object.keys(this.selectedCar).length == 5 && this.needToUpdate === true) {
          await this.$store.dispatch("removeCarInfo")
          console.log(await this.$store.dispatch("updateCarInfo", {
            ...this.selectedCar
          }))
          this.needToUpdate = false
        }
        this.selectedCar2 = this.selectedCar
        console.log(this.selectedCar2)
        console.log(Object.keys(this.selectedCar).length == 5 ? 'Stored' : 'Temp', JSON.stringify(this.selectedCar))
      }
      const params = new URLSearchParams()
      splittedSlug.reverse().forEach(value => {
        value = decodeURIComponent(value)
        if (value != this.$route.query.supplier && value != this.$route.query.suppliers && value != this.$route.params.brand) params.append("categoryChain", value)
      });

      /* пагинация */
      params.append("page", this.page)
      params.append("pageSize", this.pageSize)

      /* фильтры */
      this.selectedProduct = this.$route.query.product || ""
      if (!!this.selectedProduct) params.append("product", this.selectedProduct)
      const suppliers = this.$route.query.suppliers || []
      if (suppliers.length > 0) {
        if (Array.isArray(suppliers)) {
          this.$route.query.suppliers.forEach(value => params.append("suppliers", value))
          this.selectedSuppliers = suppliers
        } else {
          params.append("suppliers", suppliers)
          this.selectedSuppliers.push(suppliers)
        }
      }

      /* если есть строка поиска */
      if (this.$route.query.searchString) {
        params.append("searchString", this.$route.query.searchString)
        params.append("partialMatch", true)
      }

      /* выбранный авто */
      if (this.carinfo.manufacturer) {
        params.append("manufacturer", this.carinfo.manufacturer)
        if (this.carinfo.model != "" && this.carinfo.model) params.append("model", this.carinfo.model)
        if (this.carinfo.engine != "" && this.carinfo.engine) params.append("engine", this.carinfo.engine)
        if (this.carinfo.year != "" && this.carinfo.year) params.append("year", this.carinfo.year)
        if (this.carinfo.fuel != "" && this.carinfo.fuel) params.append("fuel", this.carinfo.fuel)
      }
      if (this.carinfo.refinement) {
        params.append("version", this.carinfo.refinement.version)
        params.append("powerHP", this.carinfo.refinement.power)
        params.append("gear", this.carinfo.refinement.gear)
        params.append("volume", this.carinfo.refinement.volume)
        params.append("body", this.carinfo.refinement.body)
      }
      console.log('API Query:', decodeURIComponent(params));
      const result = await this.$store.dispatch("fetchProducts", params)
      this.productGroups = result.productGroups
      this.pageCount = result.pageCount
      this.filterProducts = result.products
      this.filterSuppliers = result.suppliers
      this.filterSuppliers.push(this.$route.params.brand)
      this.filterSuppliers = [...new Set(this.filterSuppliers)]
      try {
        this.titleVal = this.productGroups[0].products[0].category.name
      } catch (e) {}
      // console.log('--- + ---', Object.keys(JSON.parse(JSON.stringify(this.selectedCar))).length, Object.keys(this.carinfo).length)
      this.loading = false
    }
  },

  computed: {
    ...mapGetters(["carinfo"]),
    classObject: function() {
      return {
        "col-md-12": this.carinfo.manufacturer,
        "col-lg-12": this.carinfo.manufacturer,
      };
    }
  },

  mounted() {
    window.Event.$on("updateProducts", () => {
      this.fetchProducts()
    })
  },

  components: {
    SelectCar,
    ProductRow,
    CarTitle,
    Paginate
  }
}
</script>