Switching to a named filters/single input on video-abuse

2020-05-02 22:38:18 +02:00 · 2020-05-02 22:38:18 +02:00 · 0d3a2982a9
parent c2a89b70ce
commit 0d3a2982a9
11 changed files with 175 additions and 31 deletions
--- a/client/src/app/+admin/moderation/moderation.component.scss
+++ b/client/src/app/+admin/moderation/moderation.component.scss
@ -12,6 +12,7 @@

  input {
    @include peertube-input-text(250px);
+    flex-grow: 1;
  }
 }

--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
@ -7,10 +7,32 @@
  <ng-template pTemplate="caption">
    <div class="caption">
      <div class="ml-auto">
-        <input
-          type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-          (keyup)="onSearch($event)"
-        >
+        <div class="input-group">
+          <div class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
+            <div class="input-group-text" ngbDropdownToggle>
+              <span class="caret" aria-haspopup="menu" role="button"></span>
+            </div>
+
+            <div role="menu" ngbDropdownMenu>
+              <h6 class="dropdown-header" i18n>Filter reports</h6>
+
+              <!-- TODO:
+              <div class="dropdown-item" i18n>Reports opened by admins</div>
+              <div class="dropdown-item" i18n>Reports on videos with multiple reports</div>
+              <div class="dropdown-item" i18n>Unassigned reports</div>
+              -->
+              <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'state:pending' }" class="dropdown-item" i18n>Unsolved reports</a>
+              <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'state:accepted' }" class="dropdown-item" i18n>Accepted reports</a>
+              <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'state:rejected' }" class="dropdown-item" i18n>Refused reports</a>
+              <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'is:blocked' }" class="dropdown-item" i18n>Reports with blocked videos</a>
+              <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'is:deleted' }" class="dropdown-item" i18n>Reports with deleted videos</a>
+            </div>
+          </div>
+          <input
+            type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
+            (keyup)="onSearch($event)"
+          >
+        </div>
      </div>
    </div>
  </ng-template>
@ -100,7 +122,7 @@

      <td class="action-cell">
        <my-action-dropdown
-          [ngClass]="{ 'show': expanded }" placement="bottom-right auto" container="body"
+          [ngClass]="{ 'show': expanded }" placement="bottom-right top-right left auto" container="body"
          i18n-label label="Actions" [actions]="videoAbuseActions" [entry]="videoAbuse"
        ></my-action-dropdown>
      </td>
@ -118,7 +140,7 @@
              <div class="d-flex">
                <span class="col-3 moderation-expanded-label" i18n>Reporter</span>
                <span class="col-9 moderation-expanded-text">
-                  <div class="chip">
+                  <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reporter:&quot;' + videoAbuse.reporterAccount.displayName + '&quot;' }" class="chip">
                    <img
                      class="avatar"
                      [src]="videoAbuse.reporterAccount.avatar.path"
@ -128,8 +150,8 @@
                    <div>
                      <span class="text-muted">{{ createByString(videoAbuse.reporterAccount) }}</span>
                    </div>
-                  </div>
-                  <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': videoAbuse.reporterAccount.displayName }" class="ml-auto text-muted video-details-links" i18n>
+                  </a>
+                  <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:&quot;' + videoAbuse.reporterAccount.displayName + '&quot;' }" class="ml-auto text-muted video-details-links" i18n>
                    {videoAbuse.countReportsForReporter, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
                  </a>
                </span>
@ -149,7 +171,7 @@
                      <span class="text-muted">{{ videoAbuse.video.channel.ownerAccount ? createByString(videoAbuse.video.channel.ownerAccount) : '' }}</span>
                    </div>
                  </div>
-                  <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': videoAbuse.video.channel.ownerAccount.displayName }" class="ml-auto text-muted video-details-links" i18n>
+                  <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:&quot;' +videoAbuse.video.channel.ownerAccount.displayName + '&quot;' }" class="ml-auto text-muted video-details-links" i18n>
                    {videoAbuse.countReportsForReportee, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
                  </a>
                </span>
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss
@ -13,3 +13,11 @@
 .video-abuse-states .glyphicon-comment {
  margin-left: 0.5rem;
 }
+
+.input-group {
+  @include peertube-input-group(300px);
+
+  .dropdown-toggle::after {
+    margin-left: 0;
+  }
+}
--- a/client/src/app/+admin/users/user-edit/user-password.component.scss
+++ b/client/src/app/+admin/users/user-edit/user-password.component.scss
@ -16,7 +16,3 @@ input[type=submit] {

  margin-top: 10px;
 }
-
-.input-group-append {
-  height: 30px;
-}
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
@ -19,10 +19,6 @@ my-actor-avatar-info {
  @include peertube-input-group(fit-content);
 }

-.input-group-append {
-  height: 30px;
-}
-
 input {
  &[type=text] {
    @include peertube-input-text(340px);
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@ -58,10 +58,6 @@
  @include peertube-input-group(400px);
 }

-.input-group-append {
-  height: 30px;
-}
-
 input:not([type=submit]) {
  @include peertube-input-text(400px);

--- a/client/src/app/shared/user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.scss
@ -88,10 +88,6 @@
    }
  }

-  .dropdown-header {
-    padding-left: 1rem;
-  }
-
  ::ng-deep form {
    padding: 0.25rem 1rem;
  }
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@ -41,6 +41,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  font-size: 15px;

+  .dropdown-header {
+    padding-left: 1rem;
+  }
+
  .dropdown-item {
    padding: 3px 15px;

@ -262,6 +266,18 @@ ngb-tooltip-window {
  }
 }

-.input-group > .form-control {
-  flex: initial;
+.input-group {
+  & > .form-control {
+    flex: initial;
+  }
+
+  .input-group-prepend,
+  .input-group-append {
+    height: 30px;
+  }
+
+  .input-group-prepend + input {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
 }
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@ -32,6 +32,10 @@ p-table {
      height: 40px;
      display: flex;
      align-items: center;
+
+      .input-group-text {
+        background-color: transparent;
+      }
    }
  }

--- a/server/models/utils.ts
+++ b/server/models/utils.ts
@ -219,6 +219,54 @@ function searchAttribute (sourceField, targetField) {
  }
 }

+interface QueryStringFilterPrefixes {
+  [key: string]: string | { prefix: string, handler: Function, multiple?: boolean }
+}
+
+function parseQueryStringFilter (q: string, prefixes: QueryStringFilterPrefixes) {
+  const tokens = q // tokenize only if we have a querystring
+    ? [].concat.apply([], q.split('"').map((v, i) => i % 2 ? v : v.split(' '))).filter(Boolean)
+    : []
+
+  // TODO: when Typescript supports Object.fromEntries, replace with the Object method
+  function fromEntries<T> (entries: [keyof T, T[keyof T]][]): T {
+    return entries.reduce(
+      (acc, [ key, value ]) => ({ ...acc, [key]: value }),
+      {} as T
+    )
+  }
+
+  const objectMap = (obj, fn) => fromEntries(
+    Object.entries(obj).map(
+      ([ k, v ], i) => [ k, fn(v, k, i) ]
+    )
+  )
+
+  return {
+    // search is the querystring minus defined filters
+    search: tokens.filter(e => !Object.values(prefixes).some(p => {
+      if (typeof p === "string") {
+        return e.startsWith(p)
+      } else {
+        return e.startsWith(p.prefix)
+      }
+    })).join(' '),
+    // filters defined in prefixes are added under their own name
+    ...objectMap(prefixes, v => {
+      if (typeof v === "string") {
+        return tokens.filter(e => e.startsWith(v)).map(e => e.slice(v.length))
+      } else {
+        const _tokens = tokens.filter(e => e.startsWith(v.prefix)).map(e => e.slice(v.prefix.length)).map(v.handler)
+        return !v.multiple
+          ? _tokens.length > 0
+            ? _tokens[0]
+            : ''
+          : _tokens
+      }
+    })
+  }
+}
+
 // ---------------------------------------------------------------------------

 export {
@ -241,7 +289,8 @@ export {
  getFollowsSort,
  buildDirectionAndField,
  createSafeIn,
-  searchAttribute
+  searchAttribute,
+  parseQueryStringFilter
 }

 // ---------------------------------------------------------------------------
--- a/server/models/video/video-abuse.ts
+++ b/server/models/video/video-abuse.ts
@ -9,7 +9,7 @@ import {
  isVideoAbuseStateValid
 } from '../../helpers/custom-validators/video-abuses'
 import { AccountModel } from '../account/account'
-import { buildBlockedAccountSQL, getSort, throwIfNotValid, searchAttribute } from '../utils'
+import { buildBlockedAccountSQL, getSort, throwIfNotValid, searchAttribute, parseQueryStringFilter } from '../utils'
 import { VideoModel } from './video'
 import { VideoAbuseState, VideoDetails } from '../../../shared'
 import { CONSTRAINTS_FIELDS, VIDEO_ABUSE_STATES } from '../../initializers/constants'
@ -26,10 +26,17 @@ export enum ScopeNames {

@Scopes(() => ({
  [ScopeNames.FOR_API]: (options: {
+    // search
    search?: string
    searchReporter?: string
+    searchReportee?: string
    searchVideo?: string
    searchVideoChannel?: string
+    // filters
+    id?: number
+    state?: VideoAbuseState
+    is?: any
+    // accountIds
    serverAccountId: number
    userAccountId: number
  }) => {
@ -71,6 +78,24 @@ export enum ScopeNames {
      })
    }

+    if (options.id) {
+      where = Object.assign(where, {
+        id: options.id
+      })
+    }
+
+    if (options.state) {
+      where = Object.assign(where, {
+        state: options.state
+      })
+    }
+
+    if (options.is) {
+      where = Object.assign(where, {
+        ...options.is
+      })
+    }
+
    return {
      attributes: {
        include: [
@ -167,7 +192,13 @@ export enum ScopeNames {
            },
            {
              model: VideoChannelModel.scope({ method: [ VideoChannelScopeNames.SUMMARY, { withAccount: true } as SummaryOptions ] }),
-              where: searchAttribute(options.searchVideoChannel, 'name')
+              where: searchAttribute(options.searchVideoChannel, 'name'),
+              include: [
+                {
+                  model: AccountModel,
+                  where: searchAttribute(options.searchReportee, 'name')
+                }
+              ]
            },
            {
              attributes: [ 'id', 'reason', 'unfederated' ],
@ -280,7 +311,36 @@ export class VideoAbuseModel extends Model<VideoAbuseModel> {
    }

    const filters = {
-      search,
+      ...parseQueryStringFilter(search, {
+        id: {
+          prefix: '#',
+          handler: v => v
+        },
+        state: {
+          prefix: 'state:',
+          handler: v => {
+            if (v === "accepted") return VideoAbuseState.ACCEPTED
+            if (v === "pending") return VideoAbuseState.PENDING
+            if (v === "rejected") return VideoAbuseState.REJECTED
+            return undefined
+          }
+        },
+        is: {
+          prefix: 'is:',
+          handler: v => {
+            if (v === "deleted") return { deletedVideo: { [Op.not]: null } }
+            return undefined
+          }
+        },
+        searchReporter: {
+          prefix: 'reporter:',
+          handler: v => v
+        },
+        searchReportee: {
+          prefix: 'reportee:',
+          handler: v => v
+        }
+      }),
      serverAccountId,
      userAccountId
    }