NUXT_FRONTEND/pages/news/_category/index.vue

<template>
  <section class="catalog section">
    <div class="catalog__wrapper section-wrapper">
      <div class="catalog__container">
        <CatalogMenu />
        <main class="catalog__main">
          <div class="catalog-main">
            <div class="catalog-main__wrapper">
              <div class="catalog-main__topic">
                <ul class="catalog-main__topic-list">
                  <li class="catalog-main__topic-item">
                    <nuxt-link
                      to="/news"
                      class="catalog-main__topic-link">
                      Новости
                    </nuxt-link>
                  </li>
                  <li
                    class="catalog-main__topic-item"
                    v-for="category in breadcrumbs"
                    :key="category.alias"
                  >
                    <nuxt-link
                      :to="{
                        name: 'news-category',
                        params: {
                          category: category.alias,
                        },
                      }"
                      class="catalog-main__topic-link"
                      href="javascript:void(0)"
                      >{{ category.name }}</nuxt-link
                    >
                  </li>
                </ul>
              </div>
              <div class="catalog-main__header">
                <h1>
                  {{
                    categoryNewsList.category
                      ? categoryNewsList.category.name
                      : "Новости"
                  }}
                </h1>
                <div
                  class="catalog-main__filter"
                  @click="$modal.show('filter-modal')"
                >
                  <BaseIcon name="filter"></BaseIcon>
                </div>

                <!-- <a
                  class="
                    catalog-main__subscribe
                    button button_grey-dark button_grey-dark-short
                  "
                  ><span class="button__text">Подписаться</span></a
                > -->
              </div>
              <div class="catalog-main__list">
                <div class="catalog-list">
                  <CatalogList
                    :categoryNewsList="categoryNewsList.news"
                    :pages="categoryNewsList.total_pages"
                    @loadMore="onLoadMore"
                  />
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>

    <CatalogFilter @apply="onApplyFilter" :filter="filter"></CatalogFilter>
  </section>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  watchQuery: ["pagination", "date_start", "date_end"],

  data: () => ({
    filter: {
      activity: [],
    },
  }),

  computed: {
    ...mapGetters({
      newsItem: "modules/news/newsItem",
      categoryNewsList: "modules/news/categoryNewsList",
    }),

    breadcrumbs() {
      let current = this.categoryNewsList.category;
      if(!current) return [];

      const categories = [current];

      while (current.parent) {
        current = current.parent;
        categories.push(current);
      }

      return categories.reverse();
    },
  },
  props: {
    category: {
      type: Object,
    },
  },
  head() {
    return {
      title:
        "Амик - " +
        (this.categoryNewsList.category
          ? this.categoryNewsList.category.name
          : " "),
      meta: [
        {
          name: "description",
          content: this.categoryNewsList.category 
            ? this.categoryNewsList.category.meta.description 
            : "",
        },
        {
          name: "keys",
          content: this.categoryNewsList.category 
            ? this.categoryNewsList.category.meta.key
            : "",
        },
      ],
      link: [
        {rel: 'canonical', href: this.categoryNewsList.category ? 'https://www.amic.ru/news/' + this.categoryNewsList.category.alias : ''}
      ]
    };
  },

  methods: {
    onApplyFilter() {
      const [date_start = "", date_end = ""] = this.filter.activity;

      this.$router.push({
        name: this.$route.name,
        query: { pagination: 1, date_start, date_end },
      });

      this.$modal.hide("filter-modal");
    },

    async onLoadMore(loadMoreCounter) {
      await this.$store.dispatch("modules/news/loadCategoryNews", {
        category: this.$route.params.category,
        pagination: loadMoreCounter,

        filter: {
          date_start: this.$route.query.date_start || null,
          date_end: this.$route.query.date_end || null,
        },
      });
    },
  },

  async fetch({ store, route }) {
    await store.dispatch("modules/news/setCategoryNewsList", {
      category: route.params.category,
      pagination: route.query.pagination || 1,

      filter: {
        date_start: route.query.date_start || null,
        date_end: route.query.date_end || null,
      },
    });

    await store.dispatch("modules/news/setCategoriesList");
  },
};
</script>

<style lang="less">
@media screen and (max-width: 900px) {
  .detail {
    &__wrapper {
      flex-direction: column-reverse;
    }
    &__side {
      margin-bottom: 20px;
      display: none;
    }
  }
  .detail-top {
    &__header {
      display: block;
    }
    &__footer {
      display: block;
    }
    &__footer-side {
      display: flex;
      margin-top: 20px;
    }
  }
}
</style>