NUXT_FRONTEND/pages/admin/comments/index.vue

<template>
  <div>
    <v-row class="mx-auto mt-5 px-4">
      <v-btn @click="showModerationComments">Показать комментарии на модерацию</v-btn>
      <v-btn @click="showAllComments" class="mx-2"> Показать все комментарии </v-btn>
      <v-btn to="/admin/comments/log"> Показать лог комментариев </v-btn>
      <v-spacer></v-spacer>
      <v-checkbox
        max-width="600"
        v-model="moderationStatus"
        @click="changeStatus"
        label="Статус модератора"
      ></v-checkbox>
    </v-row>

    <v-list two-line>
      <v-list-item v-for="comment in comments.comments" :key="comment.id">
        <v-list-item-content>
          <v-row>
            <v-col>
              {{ comment.user_create_for_admin ? comment.user_create_for_admin.first_name : 'Гость' }}
            </v-col>

            <v-col cols="2">
              {{ convertDate(comment.created_at) }}
            </v-col>

            <v-col cols="5">
              {{ comment.message ? comment.message : '' }}
            </v-col>

            <v-col cols="2">
              <nuxt-link :to="getLink(comment.news_for_admin)" target="_blank" v-html="comment.news_for_admin.title"></nuxt-link>
            </v-col>

            <v-col>
              <nuxt-link :to="getEditLink(comment.news_for_admin)" target="_blank">
                Редактировать
              </nuxt-link>
            </v-col>
          </v-row>

        </v-list-item-content>

        <v-list-item-action class="is-flex">
          <v-btn
            icon
            v-if="comment.need_moderation"
            @click="approveComment(comment.id)"
          >
            <v-icon color="green lighten-1">mdi-check-circle</v-icon>
          </v-btn>
          <v-btn icon @click="removeComment(comment.id)">
              <v-icon color="red darker-1">mdi-delete</v-icon>
              <!--удалить-->
          </v-btn>
          <v-btn icon :to="{name: 'admin-comments-id', params: { id: comment.id, message: comment.message}}">
              <v-icon color="green darker-1"> mdi-pencil </v-icon>
              <!--изменить-->
          </v-btn>
        </v-list-item-action>
      </v-list-item>
    </v-list>
    <v-pagination
      v-model="counter"
      :length="comments.total_pages"
      ref="pagination"
      @input="loadComments"
      :next-icon="'Вперед'"
      :prev-icon="'Назад'"
      :next-aria-label="'next-text'"
      :prev-aria-label="'prev-text'"
      :page-aria-label="'page-text'"
      :current-page-aria-label="'current-page'"
      total-visible="10"

    ></v-pagination>
  </div>
</template>

<script>
export default {

  data() {
    return {
      moderationStatus: false,
      moderationOnly: false,
      counter: 1,
      comments: [],
      moderation_status: ''
    };
  },
  mounted() {
    this.$axios
      .$get("admin/comments/list/all")
      .then((res) => {
        this.comments = res.data
        return res.data;
      });
    this.$axios
      .$get("comments/premoderation/status")
      .then((res) => {
        this.moderationStatus = res.data.moderation_status
        return res.data.moderation_status;
      });
  },
  layout: "admin",
  methods: {
    async approveComment(commentId) {
      await this.$axios
        .$get(
          "https://api.amic.ru/api/v1/admin/comments/approve/" +
            commentId
        )
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    async removeComment(commentId) {
      await this.$axios
        .$get(
          "https://api.amic.ru/api/v1/admin/comments/remove/" +
            commentId
        )
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    async changeStatus() {
      if (!this.moderationStatus) {
        this.$axios
          .$get("authorized/admin/comments/premoderation/disable")
          .then((res) => {
            console.log(res);
          });
      } else {
        this.$axios
          .$get("authorized/admin/comments/premoderation/enable")
          .then((res) => {
            console.log(res);
          });
      }
    },
    async showModerationComments() {
      this.moderationOnly = true;
      const comments = await this.$axios
        .$get("admin/comments/list/moderation")
        .then((res) => {
          this.comments = res.data;
          return res.data;
        });
      return { comments };
    },
    async showAllComments() {
      this.moderationOnly = false;
      const comments = await this.$axios
        .$get("admin/comments/list/all/page_1")
        .then((res) => {
          this.comments = res.data;
          return res.data;
        });
      return { comments };
    },
    async loadComments() {
      if (this.moderationOnly) {
        await this.$axios
          .$get(`admin/comments/list/moderation/page_` + this.counter)
          .then((res) => {
            this.comments = res.data;
            return res.data;
          });
        return { comments };
      } else {
        await this.$axios
          .$get(`admin/comments/list/all/page_` + this.counter)
          .then((res) => {
            this.comments = res.data;
            return res.data;
          });
      }
    },
    getLink(news) {
      return {
        name: 'news-category-alias',
        params: {
          category: news.category_for_admin.alias,
          alias: news.alias
        }
      }
    },
    getEditLink(news) {
      return {
        name: 'admin-publications-id',
        params: {
          id: news.id
        }
      }
    },
    convertDate(dateTampstamp) {
      const date = new Date(dateTampstamp);
      const dateString =
              date.toLocaleString("ru", {
                day: "numeric",
                month: "long",
              }) +
              " " +
              date.getFullYear() +
              ", " +
              ("0" + date.getHours()).slice(-2) +
              ":" +
              ("0" + date.getMinutes()).slice(-2);
      return dateString;
    },
  },
};
</script>

<style>
</style>