From a0667c1f4552614ca9d968f1a7fcfd4e1d1cfb85 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 30 Sep 2019 00:22:01 +0300
Subject: [PATCH] Move report rendering and its pagination inside report
 component

---
 src/store/modules/reports.js                  |   4 +-
 .../reports/components/GroupedReport.vue      | 102 +++++------
 src/views/reports/components/Report.vue       | 161 +++++++++++-------
 src/views/reports/index.vue                   |  38 +----
 4 files changed, 158 insertions(+), 147 deletions(-)

diff --git a/src/store/modules/reports.js b/src/store/modules/reports.js
index 5d1cdb69..9922f465 100644
--- a/src/store/modules/reports.js
+++ b/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
   },
diff --git a/src/views/reports/components/GroupedReport.vue b/src/views/reports/components/GroupedReport.vue
index 1e6cc8fa..f304a87d 100644
--- a/src/views/reports/components/GroupedReport.vue
+++ b/src/views/reports/components/GroupedReport.vue
@@ -1,55 +1,57 @@
 <template>
-  <el-card>
-    <div class="header-container">
-      <div>
-        <h3 class="report-title">{{ $t('reports.reportsOn') }} {{ group.account.display_name }}</h3>
+  <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>
+        </div>
+        <div>
+          <el-dropdown trigger="click">
+            <el-button plain size="small" icon="el-icon-edit">{{ $t('reports.changeAllReports') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item @click.native="changeAllReports('resolved', group.reports)">{{ $t('reports.resolveAll') }}</el-dropdown-item>
+              <el-dropdown-item @click.native="changeAllReports('open', group.reports)">{{ $t('reports.reopenAll') }}</el-dropdown-item>
+              <el-dropdown-item @click.native="changeAllReports('closed', group.reports)">{{ $t('reports.closeAll') }}</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <moderate-user-dropdown :account="group.account"/>
+        </div>
       </div>
       <div>
-        <el-dropdown trigger="click">
-          <el-button plain size="small" icon="el-icon-edit">{{ $t('reports.changeAllReports') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item @click.native="changeAllReports('resolved', group.reports)">{{ $t('reports.resolveAll') }}</el-dropdown-item>
-            <el-dropdown-item @click.native="changeAllReports('open', group.reports)">{{ $t('reports.reopenAll') }}</el-dropdown-item>
-            <el-dropdown-item @click.native="changeAllReports('closed', group.reports)">{{ $t('reports.closeAll') }}</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-        <moderate-user-dropdown :account="group.account"/>
-      </div>
-    </div>
-    <div>
-      <div class="line"/>
-      <span class="report-row-key">{{ $t('reports.account') }}:</span>
-      <img
-        :src="group.account.avatar"
-        alt="avatar"
-        class="avatar-img">
-      <a :href="group.account.url" target="_blank">
-        <span>{{ group.account.acct }}</span>
-      </a>
-    </div>
-    <div>
-      <div class="line"/>
-      <span class="report-row-key">{{ $t('reports.actors') }}:</span>
-      <span v-for="actor in group.actors" :key="actor.id">
-        <a :href="actor.url" target="_blank">
-          <span>{{ actor.acct }}, </span>
+        <div class="line"/>
+        <span class="report-row-key">{{ $t('reports.account') }}:</span>
+        <img
+          :src="group.account.avatar"
+          alt="avatar"
+          class="avatar-img">
+        <a :href="group.account.url" target="_blank">
+          <span>{{ group.account.acct }}</span>
         </a>
-      </span>
-    </div>
-    <div v-if="group.status">
-      <div class="line"/>
-      <span class="report-row-key">{{ $t('reports.reportedStatus') }}:</span>
-      <statuses :statuses="group.status" class="reported-status"/>
-    </div>
-    <div v-if="group.reports">
-      <div class="line"/>
-      <el-collapse>
-        <el-collapse-item :title="$t('reports.reports')">
-          <report-card :reports="group.reports"/>
-        </el-collapse-item>
-      </el-collapse>
-    </div>
-  </el-card>
+      </div>
+      <div>
+        <div class="line"/>
+        <span class="report-row-key">{{ $t('reports.actors') }}:</span>
+        <span v-for="actor in group.actors" :key="actor.id">
+          <a :href="actor.url" target="_blank">
+            <span>{{ actor.acct }}, </span>
+          </a>
+        </span>
+      </div>
+      <div v-if="group.status">
+        <div class="line"/>
+        <span class="report-row-key">{{ $t('reports.reportedStatus') }}:</span>
+        <statuses :statuses="group.status" class="reported-status"/>
+      </div>
+      <div v-if="group.reports">
+        <div class="line"/>
+        <el-collapse>
+          <el-collapse-item :title="$t('reports.reports')">
+            <report-card :reports="group.reports"/>
+          </el-collapse-item>
+        </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
     }
   },
diff --git a/src/views/reports/components/Report.vue b/src/views/reports/components/Report.vue
index 574f36d6..159937db 100644
--- a/src/views/reports/components/Report.vue
+++ b/src/views/reports/components/Report.vue
@@ -1,61 +1,80 @@
 <template>
-  <el-timeline-item :timestamp="parseTimestamp(report.created_at)" placement="top" class="timeline-item-container">
-    <el-card>
-      <div class="header-container">
-        <div>
-          <h3 class="report-title">{{ $t('reports.reportOn') }} {{ report.account.display_name }}</h3>
-          <h5 class="id">{{ $t('reports.id') }}: {{ report.id }}</h5>
-        </div>
-        <div>
-          <el-tag :type="getStateType(report.state)" size="large">{{ capitalizeFirstLetter(report.state) }}</el-tag>
-          <el-dropdown trigger="click">
-            <el-button plain size="small" icon="el-icon-edit">{{ $t('reports.changeState') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item v-if="report.state !== 'resolved'" @click.native="changeReportState('resolved', report.id)">{{ $t('reports.resolve') }}</el-dropdown-item>
-              <el-dropdown-item v-if="report.state !== 'open'" @click.native="changeReportState('open', report.id)">{{ $t('reports.reopen') }}</el-dropdown-item>
-              <el-dropdown-item v-if="report.state !== 'closed'" @click.native="changeReportState('closed', report.id)">{{ $t('reports.close') }}</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-          <moderate-user-dropdown :account="report.account"/>
-        </div>
-      </div>
-      <div>
-        <div class="line"/>
-        <span class="report-row-key">{{ $t('reports.account') }}:</span>
-        <img
-          :src="report.account.avatar"
-          alt="avatar"
-          class="avatar-img">
-        <a :href="report.account.url" target="_blank" class="account">
-          <span>{{ report.account.acct }}</span>
-        </a>
-      </div>
-      <div v-if="report.content.length > 0">
-        <div class="line"/>
-        <span class="report-row-key">{{ $t('reports.content') }}:
-          <span>{{ report.content }}</span>
-        </span>
-      </div>
-      <div>
-        <div class="line"/>
-        <span class="report-row-key">{{ $t('reports.actor') }}:</span>
-        <img
-          :src="report.actor.avatar"
-          alt="avatar"
-          class="avatar-img">
-        <a :href="report.actor.url" target="_blank" class="account">
-          <span>{{ report.actor.acct }}</span>
-        </a>
-      </div>
-      <div v-if="report.statuses.length > 0" class="statuses">
-        <el-collapse>
-          <el-collapse-item :title="getStatusesTitle(report.statuses)">
-            <statuses :statuses="report.statuses" />
-          </el-collapse-item>
-        </el-collapse>
-      </div>
-    </el-card>
-  </el-timeline-item>
+  <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>
+              <h3 class="report-title">{{ $t('reports.reportOn') }} {{ report.account.display_name }}</h3>
+              <h5 class="id">{{ $t('reports.id') }}: {{ report.id }}</h5>
+            </div>
+            <div>
+              <el-tag :type="getStateType(report.state)" size="large">{{ capitalizeFirstLetter(report.state) }}</el-tag>
+              <el-dropdown trigger="click">
+                <el-button plain size="small" icon="el-icon-edit">{{ $t('reports.changeState') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item v-if="report.state !== 'resolved'" @click.native="changeReportState('resolved', report.id)">{{ $t('reports.resolve') }}</el-dropdown-item>
+                  <el-dropdown-item v-if="report.state !== 'open'" @click.native="changeReportState('open', report.id)">{{ $t('reports.reopen') }}</el-dropdown-item>
+                  <el-dropdown-item v-if="report.state !== 'closed'" @click.native="changeReportState('closed', report.id)">{{ $t('reports.close') }}</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+              <moderate-user-dropdown :account="report.account"/>
+            </div>
+          </div>
+          <div>
+            <div class="line"/>
+            <span class="report-row-key">{{ $t('reports.account') }}:</span>
+            <img
+              :src="report.account.avatar"
+              alt="avatar"
+              class="avatar-img">
+            <a :href="report.account.url" target="_blank" class="account">
+              <span>{{ report.account.acct }}</span>
+            </a>
+          </div>
+          <div v-if="report.content.length > 0">
+            <div class="line"/>
+            <span class="report-row-key">{{ $t('reports.content') }}:
+              <span>{{ report.content }}</span>
+            </span>
+          </div>
+          <div>
+            <div class="line"/>
+            <span class="report-row-key">{{ $t('reports.actor') }}:</span>
+            <img
+              :src="report.actor.avatar"
+              alt="avatar"
+              class="avatar-img">
+            <a :href="report.actor.url" target="_blank" class="account">
+              <span>{{ report.actor.acct }}</span>
+            </a>
+          </div>
+          <div v-if="report.statuses.length > 0" class="statuses">
+            <el-collapse>
+              <el-collapse-item :title="getStatusesTitle(report.statuses)">
+                <statuses :statuses="report.statuses" />
+              </el-collapse-item>
+            </el-collapse>
+          </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;
   }
diff --git a/src/views/reports/index.vue b/src/views/reports/index.vue
index fc7617f9..4773495d 100644
--- a/src/views/reports/index.vue
+++ b/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) {