From eacb25c4366bcc8fba20f98f93f004fabc6d5578 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 8 Aug 2018 17:36:10 +0200
Subject: Add reason when banning a user

---
 .../users/user-list/user-list.component.html       |  5 ++-
 .../+admin/users/user-list/user-list.component.ts  | 13 +++++++
 .../shared/buttons/action-dropdown.component.html  | 16 ++++++++
 .../shared/buttons/action-dropdown.component.scss  | 21 +++++++++++
 .../shared/buttons/action-dropdown.component.ts    | 20 ++++++++++
 .../src/app/shared/buttons/button.component.scss   | 43 ++++++++++++++++++++++
 .../shared/buttons/delete-button.component.html    |  6 +++
 .../app/shared/buttons/delete-button.component.ts  | 11 ++++++
 .../app/shared/buttons/edit-button.component.html  |  6 +++
 .../app/shared/buttons/edit-button.component.ts    | 12 ++++++
 client/src/app/shared/misc/button.component.scss   | 43 ----------------------
 .../app/shared/misc/delete-button.component.html   |  4 --
 .../src/app/shared/misc/delete-button.component.ts | 11 ------
 .../src/app/shared/misc/edit-button.component.html |  4 --
 .../src/app/shared/misc/edit-button.component.ts   | 11 ------
 client/src/app/shared/shared.module.ts             |  7 +++-
 client/src/app/shared/users/user.model.ts          | 35 +++++++-----------
 17 files changed, 170 insertions(+), 98 deletions(-)
 create mode 100644 client/src/app/shared/buttons/action-dropdown.component.html
 create mode 100644 client/src/app/shared/buttons/action-dropdown.component.scss
 create mode 100644 client/src/app/shared/buttons/action-dropdown.component.ts
 create mode 100644 client/src/app/shared/buttons/button.component.scss
 create mode 100644 client/src/app/shared/buttons/delete-button.component.html
 create mode 100644 client/src/app/shared/buttons/delete-button.component.ts
 create mode 100644 client/src/app/shared/buttons/edit-button.component.html
 create mode 100644 client/src/app/shared/buttons/edit-button.component.ts
 delete mode 100644 client/src/app/shared/misc/button.component.scss
 delete mode 100644 client/src/app/shared/misc/delete-button.component.html
 delete mode 100644 client/src/app/shared/misc/delete-button.component.ts
 delete mode 100644 client/src/app/shared/misc/edit-button.component.html
 delete mode 100644 client/src/app/shared/misc/edit-button.component.ts

(limited to 'client/src')

diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index 166fafef0..ef5a6c648 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -30,8 +30,9 @@
       <td>{{ user.roleLabel }}</td>
       <td>{{ user.createdAt }}</td>
       <td class="action-cell">
-        <my-edit-button [routerLink]="getRouterUserEditLink(user)"></my-edit-button>
-        <my-delete-button (click)="removeUser(user)"></my-delete-button>
+        <my-action-dropdown i18n-label label="Actions" [actions]="userActions" [entry]="user"></my-action-dropdown>
+        <!--<my-edit-button [routerLink]="getRouterUserEditLink(user)"></my-edit-button>-->
+        <!--<my-delete-button (click)="removeUser(user)"></my-delete-button>-->
       </td>
     </tr>
   </ng-template>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts
index ab25608c1..3c83859e0 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/users/user-list/user-list.component.ts
@@ -5,6 +5,7 @@ import { ConfirmService } from '../../../core'
 import { RestPagination, RestTable, User } from '../../../shared'
 import { UserService } from '../shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { DropdownAction } from '@app/shared/buttons/action-dropdown.component'
 
 @Component({
   selector: 'my-user-list',
@@ -17,6 +18,7 @@ export class UserListComponent extends RestTable implements OnInit {
   rowsPerPage = 10
   sort: SortMeta = { field: 'createdAt', order: 1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+  userActions: DropdownAction<User>[] = []
 
   constructor (
     private notificationsService: NotificationsService,
@@ -25,6 +27,17 @@ export class UserListComponent extends RestTable implements OnInit {
     private i18n: I18n
   ) {
     super()
+
+    this.userActions = [
+      {
+        type: 'edit',
+        linkBuilder: this.getRouterUserEditLink
+      },
+      {
+        type: 'delete',
+        handler: user => this.removeUser(user)
+      }
+    ]
   }
 
   ngOnInit () {
diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
new file mode 100644
index 000000000..c87ba4c82
--- /dev/null
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -0,0 +1,16 @@
+<div class="dropdown-root" dropdown container="body" dropup="true" placement="right" role="button">
+  <div class="action-button" dropdownToggle>
+    <span class="icon icon-action"></span>
+  </div>
+
+  <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
+    <li role="menuitem" *ngFor="let action of actions">
+      <my-delete-button *ngIf="action.type === 'delete'" [label]="action.label" (click)="action.handler(entry)"></my-delete-button>
+      <my-edit-button *ngIf="action.type === 'edit'" [label]="action.label" [routerLink]="action.linkBuilder(entry)"></my-edit-button>
+
+      <a *ngIf="action.type === 'custom'" class="dropdown-item" href="#" (click)="action.handler(entry)">
+        <span *ngIf="action.iconClass" class="icon" [ngClass]="action.iconClass"></span> <ng-container>{{ action.label }}</ng-container>
+      </a>
+    </li>
+  </ul>
+</div>
\ No newline at end of file
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
new file mode 100644
index 000000000..cc459b972
--- /dev/null
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -0,0 +1,21 @@
+@import '_variables';
+@import '_mixins';
+
+.action-button {
+  @include peertube-button;
+  @include grey-button;
+
+  &:hover, &:active, &:focus {
+    background-color: $grey-color;
+  }
+
+  display: inline-block;
+  padding: 0 10px;
+
+  .icon-action {
+    @include icon(21px);
+
+    background-image: url('../../../assets/images/video/more.svg');
+    top: -1px;
+  }
+}
\ No newline at end of file
diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts
new file mode 100644
index 000000000..407d24b80
--- /dev/null
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core'
+
+export type DropdownAction<T> = {
+  type: 'custom' | 'delete' | 'edit'
+  label?: string
+  handler?: (T) => any
+  linkBuilder?: (T) => (string | number)[]
+  iconClass?: string
+}
+
+@Component({
+  selector: 'my-action-dropdown',
+  styleUrls: [ './action-dropdown.component.scss' ],
+  templateUrl: './action-dropdown.component.html'
+})
+
+export class ActionDropdownComponent<T> {
+  @Input() actions: DropdownAction<T>[] = []
+  @Input() entry: T
+}
diff --git a/client/src/app/shared/buttons/button.component.scss b/client/src/app/shared/buttons/button.component.scss
new file mode 100644
index 000000000..343aea207
--- /dev/null
+++ b/client/src/app/shared/buttons/button.component.scss
@@ -0,0 +1,43 @@
+@import '_variables';
+@import '_mixins';
+
+.action-button {
+  @include peertube-button-link;
+
+  font-size: 15px;
+  font-weight: $font-semibold;
+  color: #585858;
+  background-color: #E5E5E5;
+
+  &:hover {
+    background-color: #EFEFEF;
+  }
+
+  .icon {
+    @include icon(21px);
+
+    position: relative;
+    top: -2px;
+
+    &.icon-edit {
+      background-image: url('../../../assets/images/global/edit-grey.svg');
+    }
+
+    &.icon-delete-grey {
+      background-image: url('../../../assets/images/global/delete-grey.svg');
+    }
+  }
+}
+
+// In a table, try to minimize the space taken by this button
+@media screen and (max-width: 1400px) {
+  :host-context(td) {
+    .action-button {
+      padding: 0 13px;
+    }
+
+    .button-label {
+      display: none;
+    }
+  }
+}
diff --git a/client/src/app/shared/buttons/delete-button.component.html b/client/src/app/shared/buttons/delete-button.component.html
new file mode 100644
index 000000000..792490219
--- /dev/null
+++ b/client/src/app/shared/buttons/delete-button.component.html
@@ -0,0 +1,6 @@
+<span class="action-button action-button-delete" [title]="label" role="button">
+  <span class="icon icon-delete-grey"></span>
+
+  <span class="button-label" *ngIf="label">{{ label }}</span>
+  <span class="button-label" i18n *ngIf="!label">Delete</span>
+</span>
diff --git a/client/src/app/shared/buttons/delete-button.component.ts b/client/src/app/shared/buttons/delete-button.component.ts
new file mode 100644
index 000000000..cd2bcccdf
--- /dev/null
+++ b/client/src/app/shared/buttons/delete-button.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'my-delete-button',
+  styleUrls: [ './button.component.scss' ],
+  templateUrl: './delete-button.component.html'
+})
+
+export class DeleteButtonComponent {
+  @Input() label: string
+}
diff --git a/client/src/app/shared/buttons/edit-button.component.html b/client/src/app/shared/buttons/edit-button.component.html
new file mode 100644
index 000000000..7efc54ce7
--- /dev/null
+++ b/client/src/app/shared/buttons/edit-button.component.html
@@ -0,0 +1,6 @@
+<a class="action-button action-button-edit" [routerLink]="routerLink" title="Edit">
+  <span class="icon icon-edit"></span>
+
+  <span class="button-label" *ngIf="label">{{ label }}</span>
+  <span i18n class="button-label" *ngIf="!label">Edit</span>
+</a>
diff --git a/client/src/app/shared/buttons/edit-button.component.ts b/client/src/app/shared/buttons/edit-button.component.ts
new file mode 100644
index 000000000..7abaacc26
--- /dev/null
+++ b/client/src/app/shared/buttons/edit-button.component.ts
@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'my-edit-button',
+  styleUrls: [ './button.component.scss' ],
+  templateUrl: './edit-button.component.html'
+})
+
+export class EditButtonComponent {
+  @Input() label: string
+  @Input() routerLink = []
+}
diff --git a/client/src/app/shared/misc/button.component.scss b/client/src/app/shared/misc/button.component.scss
deleted file mode 100644
index 343aea207..000000000
--- a/client/src/app/shared/misc/button.component.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-.action-button {
-  @include peertube-button-link;
-
-  font-size: 15px;
-  font-weight: $font-semibold;
-  color: #585858;
-  background-color: #E5E5E5;
-
-  &:hover {
-    background-color: #EFEFEF;
-  }
-
-  .icon {
-    @include icon(21px);
-
-    position: relative;
-    top: -2px;
-
-    &.icon-edit {
-      background-image: url('../../../assets/images/global/edit-grey.svg');
-    }
-
-    &.icon-delete-grey {
-      background-image: url('../../../assets/images/global/delete-grey.svg');
-    }
-  }
-}
-
-// In a table, try to minimize the space taken by this button
-@media screen and (max-width: 1400px) {
-  :host-context(td) {
-    .action-button {
-      padding: 0 13px;
-    }
-
-    .button-label {
-      display: none;
-    }
-  }
-}
diff --git a/client/src/app/shared/misc/delete-button.component.html b/client/src/app/shared/misc/delete-button.component.html
deleted file mode 100644
index 7387d0a88..000000000
--- a/client/src/app/shared/misc/delete-button.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<span class="action-button action-button-delete" [title]="label">
-  <span class="icon icon-delete-grey"></span>
-  <span class="button-label">{{ label }}</span>
-</span>
diff --git a/client/src/app/shared/misc/delete-button.component.ts b/client/src/app/shared/misc/delete-button.component.ts
deleted file mode 100644
index 2ffd98212..000000000
--- a/client/src/app/shared/misc/delete-button.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component, Input } from '@angular/core'
-
-@Component({
-  selector: 'my-delete-button',
-  styleUrls: [ './button.component.scss' ],
-  templateUrl: './delete-button.component.html'
-})
-
-export class DeleteButtonComponent {
-  @Input() label = 'Delete'
-}
diff --git a/client/src/app/shared/misc/edit-button.component.html b/client/src/app/shared/misc/edit-button.component.html
deleted file mode 100644
index 78fbc326e..000000000
--- a/client/src/app/shared/misc/edit-button.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<a class="action-button action-button-edit" [routerLink]="routerLink" title="Edit">
-  <span class="icon icon-edit"></span>
-  <span i18n class="button-label">Edit</span>
-</a>
diff --git a/client/src/app/shared/misc/edit-button.component.ts b/client/src/app/shared/misc/edit-button.component.ts
deleted file mode 100644
index 201a618ec..000000000
--- a/client/src/app/shared/misc/edit-button.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component, Input } from '@angular/core'
-
-@Component({
-  selector: 'my-edit-button',
-  styleUrls: [ './button.component.scss' ],
-  templateUrl: './edit-button.component.html'
-})
-
-export class EditButtonComponent {
-  @Input() routerLink = []
-}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 62ce97102..94de3af9f 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -17,8 +17,8 @@ import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
 import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
 
 import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
-import { DeleteButtonComponent } from './misc/delete-button.component'
-import { EditButtonComponent } from './misc/edit-button.component'
+import { DeleteButtonComponent } from './buttons/delete-button.component'
+import { EditButtonComponent } from './buttons/edit-button.component'
 import { FromNowPipe } from './misc/from-now.pipe'
 import { LoaderComponent } from './misc/loader.component'
 import { NumberFormatterPipe } from './misc/number-formatter.pipe'
@@ -52,6 +52,7 @@ import { VideoCaptionsValidatorsService } from '@app/shared/forms/form-validator
 import { VideoCaptionService } from '@app/shared/video-caption'
 import { PeertubeCheckboxComponent } from '@app/shared/forms/peertube-checkbox.component'
 import { VideoImportService } from '@app/shared/video-import/video-import.service'
+import { ActionDropdownComponent } from '@app/shared/buttons/action-dropdown.component'
 
 @NgModule({
   imports: [
@@ -78,6 +79,7 @@ import { VideoImportService } from '@app/shared/video-import/video-import.servic
     VideoFeedComponent,
     DeleteButtonComponent,
     EditButtonComponent,
+    ActionDropdownComponent,
     NumberFormatterPipe,
     ObjectLengthPipe,
     FromNowPipe,
@@ -110,6 +112,7 @@ import { VideoImportService } from '@app/shared/video-import/video-import.servic
     VideoFeedComponent,
     DeleteButtonComponent,
     EditButtonComponent,
+    ActionDropdownComponent,
     MarkdownTextareaComponent,
     InfiniteScrollerDirective,
     HelpComponent,
diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index 581ea7859..2748001d0 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/client/src/app/shared/users/user.model.ts
@@ -7,7 +7,6 @@ import {
   VideoChannel
 } from '../../../../../shared'
 import { NSFWPolicyType } from '../../../../../shared/models/videos/nsfw-policy.type'
-import { Actor } from '@app/shared/actor/actor.model'
 import { Account } from '@app/shared/account/account.model'
 import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
 
@@ -22,6 +21,9 @@ export type UserConstructorHash = {
   createdAt?: Date,
   account?: AccountServerModel,
   videoChannels?: VideoChannel[]
+
+  blocked?: boolean
+  blockedReason?: string
 }
 export class User implements UserServerModel {
   id: number
@@ -35,35 +37,26 @@ export class User implements UserServerModel {
   videoChannels: VideoChannel[]
   createdAt: Date
 
+  blocked: boolean
+  blockedReason?: string
+
   constructor (hash: UserConstructorHash) {
     this.id = hash.id
     this.username = hash.username
     this.email = hash.email
     this.role = hash.role
 
+    this.videoChannels = hash.videoChannels
+    this.videoQuota = hash.videoQuota
+    this.nsfwPolicy = hash.nsfwPolicy
+    this.autoPlayVideo = hash.autoPlayVideo
+    this.createdAt = hash.createdAt
+    this.blocked = hash.blocked
+    this.blockedReason = hash.blockedReason
+
     if (hash.account !== undefined) {
       this.account = new Account(hash.account)
     }
-
-    if (hash.videoChannels !== undefined) {
-      this.videoChannels = hash.videoChannels
-    }
-
-    if (hash.videoQuota !== undefined) {
-      this.videoQuota = hash.videoQuota
-    }
-
-    if (hash.nsfwPolicy !== undefined) {
-      this.nsfwPolicy = hash.nsfwPolicy
-    }
-
-    if (hash.autoPlayVideo !== undefined) {
-      this.autoPlayVideo = hash.autoPlayVideo
-    }
-
-    if (hash.createdAt !== undefined) {
-      this.createdAt = hash.createdAt
-    }
   }
 
   get accountAvatarUrl () {
-- 
cgit v1.2.3