NUXT_FRONTEND/pages/admin/comments/log/index.vue

<template>
  <v-container>
    <v-text-field
      append-outer-icon="mdi-magnify"
      @click:append-outer="searchTrigger"
      @keyup.enter="searchTrigger"
      clearable
      v-model="search"
      label="Поиск"
    ></v-text-field>

    <v-data-table
      :loading="isLoading"
      :headers="headers"
      :items="comments"
      :page.sync="page"
      :items-per-page="100"
      hide-default-footer
      disable-sort
      loading-text="Загрузка комментариев"
      no-data-text="Нет данных"
    >
      <template v-slot:item.created_at="{ item }">
        {{ getFormatDate(item.created_at) }}
      </template>
      <template v-slot:item.user.date_registration="{ item }">
        {{ item.user ? getFormatDate(item.user.date_registration) : "" }}
      </template>
      <template v-slot:item.user.date_last_activity="{ item }">
        {{ item.user ? getFormatDate(item.user.date_last_activity) : "" }}
      </template>
      <template v-slot:item.news.alias="{ item }">
        <nuxt-link :to="getFormatLink(item.news)"><span v-html="item.news.title"></span></nuxt-link>
      </template>
    </v-data-table>

    <v-row class="my-5" justify="center">
      <v-pagination
        v-if="comments.length"
        v-model="page"
        :total-visible="20"
        :length="total"
        class="my-5"
      >
      </v-pagination>
    </v-row>
  </v-container>
</template>

<script>
export default {
  layout: "admin",
  data() {
    return {
      page: 1,
      total: 0,
      comments: [],
      search: "",
      isLoading: false,

      headers: [
        { text: "ID", value: "id" },
        { text: "Дата создания", value: "created_at" },
        { text: "ID пользователя", value: "user.id" },
        { text: "Имя пользователя", value: "user.first_name" },
        { text: "Email", value: "user.email" },
        { text: "Дата регистрации", value: "user.date_registration" },
        { text: "IP регистрации", value: "user.registration_ip_address" },
        { text: "Дата последней активности", value: "user.date_last_activity" },
        {
          text: "IP последней активности",
          value: "user.last_activity_ip_address",
        },
        { text: "Страница", value: "news.alias" },
        { text: "Комментарий", value: "message" },
        { text: "IP адрес", value: "ip_address" },
        { text: "User agent", value: "user_agent" },
      ],
    };
  },

  async mounted() {
    await this.loadTrigger();
  },

  watch: {
    async page() {
      this.comments = [];
      window.scrollTo(0, 0);
      await this.loadTrigger();
    },
  },

  methods: {
    async loadComments() {
      return await this.$axios
        .$get(`admin/comments/log/page_${this.page}`)
        .then((res) => res.data);
    },

    async searchComments() {
      return await this.$axios
        .$get(`admin/comments/log/search/${this.search}/page_${this.page}`)
        .then((res) => res.data);
    },

    async loadTrigger() {
      this.isLoading = true;
      let response;

      if (this.search) response = await this.searchComments();
      else response = await this.loadComments();

      this.total = response.total_pages;
      this.comments = response.comments || [];
      this.isLoading = false;
    },

    async searchTrigger() {
      this.page = 1;
      await this.loadTrigger();
    },

    getFormatDate(str) {
      if(!str) return '';
      
      let date = new Date(str);
      return date.toLocaleString("ru-RU");
    },

    getFormatLink(news) {
      return {
        name: "news-category-alias",
        params: {
          category: news.category.alias,
          alias: news.alias,
        },
      };
    },
  },
};
</script>

<style lang="less" scoped>
</style>