Merge pull request #2466 from Human-Connection/2442-paginate-moderation-page

Paginate moderations page without losing filtering
2025-12-13 07:45:56 +00:00 · 2019-12-09 21:23:12 +01:00 · 2019-12-09 21:23:12 +01:00 · a370c56b0b
commit a370c56b0b
parent f41b52f6e0 5271337b49
9 changed files with 120 additions and 53 deletions
--- a/backend/src/schema/resolvers/reports.js
+++ b/backend/src/schema/resolvers/reports.js
@ -52,7 +52,7 @@ export default {
    reports: async (_parent, params, context, _resolveInfo) => {
      const { driver } = context
      const session = driver.session()
-      let reports, orderByClause
+      let reports, orderByClause, filterClause
      switch (params.orderBy) {
        case 'createdAt_asc':
          orderByClause = 'ORDER BY report.createdAt ASC'
@ -63,17 +63,41 @@ export default {
        default:
          orderByClause = ''
      }
+
+      switch (params.reviewed) {
+        case true:
+          filterClause = 'AND ((report)<-[:REVIEWED]-(:User))'
+          break
+        case false:
+          filterClause = 'AND NOT ((report)<-[:REVIEWED]-(:User))'
+          break
+        default:
+          filterClause = ''
+      }
+
+      if (params.closed) filterClause = 'AND report.closed = true'
+
+      const offset =
+        params.offset && typeof params.offset === 'number' ? `SKIP ${params.offset}` : ''
+      const limit = params.first && typeof params.first === 'number' ? `LIMIT ${params.first}` : ''
+
      const reportReadTxPromise = session.readTransaction(async tx => {
        const allReportsTransactionResponse = await tx.run(
          `
-          MATCH (report:Report)-[:BELONGS_TO]->(resource)
-          WHERE resource:User OR resource:Post OR resource:Comment
-          WITH report, resource,
-          [(submitter:User)-[filed:FILED]->(report) |  filed {.*, submitter: properties(submitter)} ] as filed,
-          [(moderator:User)-[reviewed:REVIEWED]->(report) |  reviewed {.*, moderator: properties(moderator)} ] as reviewed,
-          resource {.*, __typename: labels(resource)[0] } as resourceWithType
-          RETURN report {.*, resource: resourceWithType, filed: filed, reviewed: reviewed}
-          ${orderByClause}
+            MATCH (report:Report)-[:BELONGS_TO]->(resource)
+            WHERE (resource:User OR resource:Post OR resource:Comment)
+            ${filterClause}
+            WITH report, resource,
+            [(submitter:User)-[filed:FILED]->(report) |  filed {.*, submitter: properties(submitter)} ] as filed,
+            [(moderator:User)-[reviewed:REVIEWED]->(report) |  reviewed {.*, moderator: properties(moderator)} ] as reviewed,
+            [(resource)<-[:WROTE]-(author:User) | author {.*} ] as optionalAuthors,
+            [(resource)-[:COMMENTS]->(post:Post) | post {.*} ] as optionalCommentedPosts,
+            resource {.*, __typename: labels(resource)[0] } as resourceWithType
+            WITH report, optionalAuthors, optionalCommentedPosts, reviewed, filed,
+            resourceWithType {.*, post: optionalCommentedPosts[0], author: optionalAuthors[0] } as finalResource
+            RETURN report {.*, resource: finalResource, filed: filed, reviewed: reviewed }
+            ${orderByClause}
+            ${offset} ${limit}
          `,
        )
        return allReportsTransactionResponse.records.map(record => record.get('report'))
--- a/backend/src/schema/types/type/FILED.gql
+++ b/backend/src/schema/types/type/FILED.gql
@ -16,8 +16,3 @@ enum ReasonCategory {
  advert_products_services_commercial
  criminal_behavior_violation_german_law
 }
-
-enum ReportOrdering {
-  createdAt_asc
-  createdAt_desc
-}
--- a/backend/src/schema/types/type/Report.gql
+++ b/backend/src/schema/types/type/Report.gql
@ -6,7 +6,7 @@ type Report {
  disable: Boolean!
  closed: Boolean!
  filed: [FILED]
-  reviewed: [REVIEWED]
+  reviewed: [REVIEWED]!
  resource: ReportedResource
 }

@ -21,5 +21,10 @@ type Mutation {
 }

 type Query {
-  reports(orderBy: ReportOrdering): [Report]
+  reports(orderBy: ReportOrdering, first: Int, offset: Int, reviewed: Boolean, closed: Boolean): [Report]
+}
+
+enum ReportOrdering {
+  createdAt_asc
+  createdAt_desc
 }
--- a/backend/src/seed/seed-db.js
+++ b/backend/src/seed/seed-db.js
@ -670,10 +670,12 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
      factory.create('Report'),
      factory.create('Report'),
      factory.create('Report'),
+      factory.create('Report'),
    ])
    const reportAgainstDagobert = reports[0]
    const reportAgainstTrollingPost = reports[1]
    const reportAgainstTrollingComment = reports[2]
+    const reportAgainstDewey = reports[3]

    // report resource first time
    await Promise.all([
@ -695,6 +697,12 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
        reasonDescription: 'This comment is bigoted',
      }),
      reportAgainstTrollingComment.relateTo(trollingComment, 'belongsTo'),
+      reportAgainstDewey.relateTo(dagobert, 'filed', {
+        resourceId: 'u5',
+        reasonCategory: 'discrimination_etc',
+        reasonDescription: 'This user is harassing me!',
+      }),
+      reportAgainstDewey.relateTo(dewey, 'belongsTo'),
    ])

    // report resource a second time
--- a/backend/yarn.lock
+++ b/backend/yarn.lock
@ -1731,7 +1731,7 @@ apollo-server-caching@^0.5.0:
  dependencies:
    lru-cache "^5.0.0"

-apollo-server-core@^2.9.12, apollo-server-core@^2.9.13:
+apollo-server-core@^2.9.13:
  version "2.9.13"
  resolved "https://registry.yarnpkg.com/apollo-server-core/-/apollo-server-core-2.9.13.tgz#29fee69be56d30605b0a06cd755fd39e0409915f"
  integrity sha512-iXTGNCtouB0Xe37ySovuZO69NBYOByJlZfUc87gj0pdcz0WbdfUp7qUtNzy3onp63Zo60TFkHWhGNcBJYFluzw==
@ -7452,11 +7452,6 @@ serve-static@1.14.1:
  version "1.14.1"
  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9"
  integrity sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==
-  dependencies:
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    parseurl "~1.3.3"
-    send "0.17.1"

 set-blocking@^2.0.0, set-blocking@~2.0.0:
  version "2.0.0"
--- a/webapp/components/User/User.vue
+++ b/webapp/components/User/User.vue
@ -8,7 +8,7 @@
  <dropdown v-else :class="{ 'disabled-content': user.disabled }" placement="top-start" offset="0">
    <template slot="default" slot-scope="{ openMenu, closeMenu, isOpen }">
      <nuxt-link :to="userLink" :class="['user', isOpen && 'active']">
-        <div @mouseover="openMenu(true)" @mouseleave="closeMenu(true)">
+        <div @mouseover="openInfoMenu" @mouseleave="closeMenu(true)">
          <hc-avatar v-if="showAvatar" class="avatar" :user="user" />
          <div>
            <ds-text class="userinfo">
@ -26,7 +26,7 @@
        </div>
      </nuxt-link>
    </template>
-    <template slot="popover">
+    <template slot="popover" v-if="showCounts">
      <div style="min-width: 250px">
        <hc-badges v-if="user.badges && user.badges.length" :badges="user.badges" />
        <ds-text
@ -106,6 +106,7 @@ export default {
    showAvatar: { type: Boolean, default: true },
    trunc: { type: Number, default: 18 }, // "-1" is no trunc
    dateTime: { type: [Date, String], default: null },
+    showCounts: { type: Boolean, default: true },
  },
  computed: {
    ...mapGetters({
@ -142,6 +143,9 @@ export default {
      this.user.followedByCount = followedByCount
      this.user.followedByCurrentUser = followedByCurrentUser
    },
+    openInfoMenu() {
+      if (this.showCounts) this.openMenu(true)
+    },
  },
 }
 </script>
--- a/webapp/components/features/ReportList/ReportList.vue
+++ b/webapp/components/features/ReportList/ReportList.vue
@ -7,6 +7,7 @@
      </client-only>
    </div>
    <reports-table :reports="reports" @confirm="openModal" />
+    <paginate :hasNext="hasNext" :hasPrevious="hasPrevious" @back="back" @next="next" />
  </ds-card>
 </template>
 <script>
@ -14,32 +15,41 @@ import { mapMutations } from 'vuex'
 import DropdownFilter from '~/components/DropdownFilter/DropdownFilter'
 import ReportsTable from '~/components/features/ReportsTable/ReportsTable'
 import { reportsListQuery, reviewMutation } from '~/graphql/Moderation.js'
+import Paginate from '~/components/Paginate/Paginate'

 export default {
  components: {
    DropdownFilter,
    ReportsTable,
+    Paginate,
  },
  data() {
+    const pageSize = 25
    return {
      reports: [],
      allReports: [],
      unreviewedReports: [],
      reviewedReports: [],
      closedReports: [],
+      pageSize,
+      first: pageSize,
+      offset: 0,
+      reviewed: null,
+      closed: null,
+      hasNext: false,
      selected: this.$t('moderation.reports.filterLabel.all'),
    }
  },
  computed: {
    filterOptions() {
      return [
-        { label: this.$t('moderation.reports.filterLabel.all'), value: this.allReports },
+        { label: this.$t('moderation.reports.filterLabel.all'), value: { reviewed: null } },
        {
          label: this.$t('moderation.reports.filterLabel.unreviewed'),
-          value: this.unreviewedReports,
+          value: { reviewed: false },
        },
-        { label: this.$t('moderation.reports.filterLabel.reviewed'), value: this.reviewedReports },
-        { label: this.$t('moderation.reports.filterLabel.closed'), value: this.closedReports },
+        { label: this.$t('moderation.reports.filterLabel.reviewed'), value: { reviewed: true } },
+        { label: this.$t('moderation.reports.filterLabel.closed'), value: { closed: true } },
      ]
    },
    modalData() {
@ -86,14 +96,24 @@ export default {
        }
      }
    },
+    hasPrevious() {
+      return this.offset > 0
+    },
  },
  methods: {
    ...mapMutations({
      commitModalData: 'modal/SET_OPEN',
    }),
    filter(option) {
-      this.reports = option.value
      this.selected = option.label
+      this.offset = 0
+      if (option.value.closed) {
+        this.closed = option.value.closed
+        this.reviewed = null
+        return
+      }
+      this.closed = null
+      this.reviewed = option.value.reviewed
    },
    async confirmCallback(resource) {
      const { disabled: disable, id: resourceId } = resource
@ -111,16 +131,30 @@ export default {
    openModal(report) {
      this.commitModalData(this.modalData(report))
    },
+    back() {
+      this.offset = Math.max(this.offset - this.pageSize, 0)
+    },
+    next() {
+      this.offset += this.pageSize
+    },
  },
  apollo: {
    reportsList: {
      query: reportsListQuery(),
+      variables() {
+        const { first, offset, reviewed, closed } = this
+        return {
+          orderBy: 'createdAt_desc',
+          reviewed,
+          closed,
+          first,
+          offset,
+        }
+      },
      update({ reports }) {
+        if (!reports) return []
+        this.hasNext = reports.length >= this.pageSize
        this.reports = reports
-        this.allReports = reports
-        this.unreviewedReports = reports.filter(report => !report.reviewed)
-        this.reviewedReports = reports.filter(report => report.reviewed)
-        this.closedReports = reports.filter(report => report.closed)
      },
      fetchPolicy: 'cache-and-network',
    },
--- a/webapp/components/features/ReportRow/ReportRow.vue
+++ b/webapp/components/features/ReportRow/ReportRow.vue
@ -19,7 +19,7 @@
      <!-- Content Column -->
      <td class="ds-table-col" data-test="report-content">
        <client-only v-if="isUser">
-          <hc-user :user="report.resource" :showAvatar="false" :trunc="30" />
+          <hc-user :user="report.resource" :showAvatar="false" :trunc="30" :showCounts="false" />
        </client-only>
        <nuxt-link v-else class="title" :to="linkTarget">
          {{ linkText | truncate(50) }}
@ -29,7 +29,12 @@
      <!-- Author Column -->
      <td class="ds-table-col" data-test="report-author">
        <client-only v-if="!isUser">
-          <hc-user :user="report.resource.author" :showAvatar="false" :trunc="30" />
+          <hc-user
+            :user="report.resource.author"
+            :showAvatar="false"
+            :trunc="30"
+            :showCounts="false"
+          />
        </client-only>
        <span v-else>—</span>
      </td>
@ -46,6 +51,7 @@
            :showAvatar="false"
            :trunc="30"
            :date-time="report.updatedAt"
+            :showCounts="false"
          />
        </client-only>
      </td>
--- a/webapp/graphql/Moderation.js
+++ b/webapp/graphql/Moderation.js
@ -3,8 +3,20 @@ import gql from 'graphql-tag'
 export const reportsListQuery = () => {
  // no limit for the moment like before: "reports(first: 20, orderBy: createdAt_desc)"
  return gql`
-    query {
-      reports(orderBy: createdAt_desc) {
+    query(
+      $orderBy: ReportOrdering
+      $first: Int
+      $offset: Int
+      $reviewed: Boolean
+      $closed: Boolean
+    ) {
+      reports(
+        orderBy: $orderBy
+        first: $first
+        offset: $offset
+        reviewed: $reviewed
+        closed: $closed
+      ) {
        id
        createdAt
        updatedAt
@ -17,9 +29,6 @@ export const reportsListQuery = () => {
            id
            slug
            name
-            followedByCount
-            contributionsCount
-            commentedCount
          }
        }
        resource {
@ -30,9 +39,6 @@ export const reportsListQuery = () => {
            name
            disabled
            deleted
-            followedByCount
-            contributionsCount
-            commentedCount
          }
          ... on Comment {
            id
@ -45,9 +51,6 @@ export const reportsListQuery = () => {
              name
              disabled
              deleted
-              followedByCount
-              contributionsCount
-              commentedCount
            }
            post {
              id
@ -69,9 +72,6 @@ export const reportsListQuery = () => {
              name
              disabled
              deleted
-              followedByCount
-              contributionsCount
-              commentedCount
            }
          }
        }
@ -82,9 +82,6 @@ export const reportsListQuery = () => {
            name
            disabled
            deleted
-            followedByCount
-            contributionsCount
-            commentedCount
          }
          createdAt
          reasonCategory
@ -114,7 +111,6 @@ export const reviewMutation = () => {
    mutation($resourceId: ID!, $disable: Boolean, $closed: Boolean) {
      review(resourceId: $resourceId, disable: $disable, closed: $closed) {
        disable
-        closed
      }
    }
  `