Move report rendering and its pagination inside report component

src/store/modules/reports.js

@@ -5,8 +5,8 @@ const reports = {
     fetchedReports: [],
     totalReportsCount: 0,
     currentPage: 1,
-    pageSize: 1,
-    groupReports: true,
+    pageSize: 50,
+    groupReports: false,
     stateFilter: '',
     loading: true
   },

src/views/reports/components/GroupedReport.vue

@@ -1,5 +1,6 @@
 <template>
-  <el-card>
+  <el-timeline class="timeline">
+    <el-card v-for="group in groups" :key="group.id">
       <div class="header-container">
         <div>
           <h3 class="report-title">{{ $t('reports.reportsOn') }} {{ group.account.display_name }}</h3>
@@ -50,6 +51,7 @@
         </el-collapse>
       </div>
     </el-card>
+  </el-timeline>
 </template>
 
 <script>
@@ -61,8 +63,8 @@ export default {
   name: 'Report',
   components: { ModerateUserDropdown, ReportCard, Statuses },
   props: {
-    group: {
-      type: Object,
+    groups: {
+      type: Array,
       required: true
     }
   },

src/views/reports/components/Report.vue

@@ -1,5 +1,12 @@
 <template>
-  <el-timeline-item :timestamp="parseTimestamp(report.created_at)" placement="top" class="timeline-item-container">
+  <div>
+    <el-timeline class="timeline">
+      <el-timeline-item
+        v-for="report in reports"
+        :timestamp="parseTimestamp(report.created_at)"
+        :key="report.id"
+        placement="top"
+        class="timeline-item-container">
         <el-card>
           <div class="header-container">
             <div>
@@ -56,6 +63,18 @@
           </div>
         </el-card>
       </el-timeline-item>
+    </el-timeline>
+    <div v-if="!loading" class="reports-pagination">
+      <el-pagination
+        :total="totalReportsCount"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        background
+        layout="prev, pager, next"
+        @current-change="handlePageChange"
+      />
+    </div>
+  </div>
 </template>
 
 <script>
@@ -67,11 +86,28 @@ export default {
   name: 'Report',
   components: { Statuses, ModerateUserDropdown },
   props: {
-    report: {
-      type: Object,
+    reports: {
+      type: Array,
       required: true
     }
   },
+  computed: {
+    loading() {
+      return this.$store.state.reports.loading
+    },
+    pageSize() {
+      return this.$store.state.reports.pageSize
+    },
+    totalReportsCount() {
+      return this.$store.state.reports.totalReportsCount
+    },
+    currentPage() {
+      return this.$store.state.reports.currentPage
+    }
+  },
+  mounted() {
+    this.$store.dispatch('FetchReports', 1)
+  },
   methods: {
     changeReportState(reportState, reportId) {
       this.$store.dispatch('ChangeReportState', { reportState, reportId })
@@ -92,6 +128,9 @@ export default {
     getStatusesTitle(statuses) {
       return `Reported statuses: ${statuses.length} item(s)`
     },
+    handlePageChange(page) {
+      this.$store.dispatch('FetchReports', page)
+    },
     parseTimestamp(timestamp) {
       return moment(timestamp).format('L HH:mm')
     }
@@ -179,6 +218,10 @@ export default {
   .report-title {
     margin: 0;
   }
+  .reports-pagination {
+    margin: 25px 0;
+    text-align: center;
+  }
   .statuses {
     margin-top: 15px;
   }

src/views/reports/index.vue

@@ -8,25 +8,11 @@
       </el-checkbox>
     </div>
     <div class="block">
-      <el-timeline v-if="groupReports" class="timeline">
-        <grouped-report v-loading="loading" v-for="group in groups" :group="group" :key="group.id"/>
-      </el-timeline>
-      <el-timeline v-else class="timeline">
-        <report v-loading="loading" v-for="report in reports" :report="report" :key="report.id"/>
-      </el-timeline>
+      <grouped-report v-loading="loading" v-if="groupReports" :groups="groups"/>
+      <report v-loading="loading" v-else :reports="reports"/>
       <div v-if="reports.length === 0" class="no-reports-message">
         <p>There are no reports to display</p>
       </div>
-      <div v-if="!loading" class="reports-pagination">
-        <el-pagination
-          :total="totalReportsCount"
-          :current-page="currentPage"
-          :page-size="pageSize"
-          background
-          layout="prev, pager, next"
-          @current-change="handlePageChange"
-        />
-      </div>
     </div>
   </div>
 </template>
@@ -211,29 +197,14 @@ export default {
     loading() {
       return this.$store.state.reports.loading
     },
-    pageSize() {
-      return this.$store.state.reports.pageSize
-    },
     reports() {
       return this.$store.state.reports.fetchedReports
-    },
-    totalReportsCount() {
-      return this.$store.state.reports.totalReportsCount
-    },
-    currentPage() {
-      return this.$store.state.reports.currentPage
     }
   },
-  mounted() {
-    this.$store.dispatch('FetchReports', 1)
-  },
   created() {
     window.addEventListener('scroll', this.handleScroll)
   },
   methods: {
-    handlePageChange(page) {
-      this.$store.dispatch('FetchReports', page)
-    },
     toggleReportsGrouping() {
       this.$store.dispatch('ToggleReportsGrouping')
     }
@@ -262,13 +233,8 @@ export default {
   .no-reports-message {
     color: gray;
     margin-left: 19px
-
   }
 }
-.reports-pagination {
-  margin: 25px 0;
-  text-align: center;
-}
 @media
 only screen and (max-width: 760px),
 (min-device-width: 768px) and (max-device-width: 1024px) {