Put logic canUpload to User model + add isHidden param to to-menu-dro…

…pdown
Chocobozzz · Jul 23, 2020 · 804ddba · 804ddba
1 parent a49d30a
commit 804ddba
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 116 deletions.
diff --git a/client/src/app/+my-account/my-account.component.ts b/client/src/app/+my-account/my-account.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core'
-import { AuthService, ServerService, User } from '@app/core'
+import { AuthService, ServerService, AuthUser } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ServerConfig } from '@shared/models'
 import { TopMenuDropdownParam } from '../shared/shared-main/misc/top-menu-dropdown.component'
@@ -11,7 +11,7 @@ import { TopMenuDropdownParam } from '../shared/shared-main/misc/top-menu-dropdo
 })
 export class MyAccountComponent implements OnInit {
   menuEntries: TopMenuDropdownParam[] = []
-  user: User
+  user: AuthUser
 
   private serverConfig: ServerConfig
 
@@ -26,112 +26,91 @@ export class MyAccountComponent implements OnInit {
     this.serverService.getConfig()
         .subscribe(config => this.serverConfig = config)
 
-    const libraryEntries: TopMenuDropdownParam = {
-      label: this.i18n('My library'),
-      children: [
-        {
-          label: this.i18n('My channels'),
-          routerLink: '/my-account/video-channels',
-          iconName: 'channel'
-        },
-        {
-          label: this.i18n('My videos'),
-          routerLink: '/my-account/videos',
-          iconName: 'videos'
-        },
-        {
-          label: this.i18n('My playlists'),
-          routerLink: '/my-account/video-playlists',
-          iconName: 'playlists'
-        },
-        {
-          label: this.i18n('My subscriptions'),
-          routerLink: '/my-account/subscriptions',
-          iconName: 'subscriptions'
-        },
-        {
-          label: this.i18n('My history'),
-          routerLink: '/my-account/history/videos',
-          iconName: 'history'
-        }
-      ]
-    }
-
-    if (this.isVideoImportEnabled()) {
-      libraryEntries.children.push({
-        label: 'My imports',
-        routerLink: '/my-account/video-imports',
-        iconName: 'cloud-download'
-      })
-    }
-
     this.user = this.authService.getUser()
 
     this.authService.userInformationLoaded.subscribe(
       () => {
-        // Cannot see videos links, hide my videos and my imports
-        if (!this.canSeeVideosLink()) {
-          libraryEntries.children.splice(1, 1)
+        const libraryEntries: TopMenuDropdownParam = {
+          label: this.i18n('My library'),
+          children: [
+            {
+              label: this.i18n('My channels'),
+              routerLink: '/my-account/video-channels',
+              iconName: 'channel'
+            },
+            {
+              label: this.i18n('My videos'),
+              routerLink: '/my-account/videos',
+              iconName: 'videos',
+              isHidden: !this.user.canSeeVideosLink()
+            },
+            {
+              label: this.i18n('My playlists'),
+              routerLink: '/my-account/video-playlists',
+              iconName: 'playlists'
+            },
+            {
+              label: this.i18n('My subscriptions'),
+              routerLink: '/my-account/subscriptions',
+              iconName: 'inbox-full'
+            },
+            {
+              label: this.i18n('My history'),
+              routerLink: '/my-account/history/videos',
+              iconName: 'history'
+            }
+          ]
+        }
 
-          if (this.isVideoImportEnabled()) {
-            libraryEntries.children.splice(4, 1)
-          }
+        if (this.isVideoImportEnabled()) {
+          libraryEntries.children.push({
+            label: 'My imports',
+            routerLink: '/my-account/video-imports',
+            iconName: 'cloud-download',
+            isHidden: !this.user.canSeeVideosLink()
+          })
         }
-      }
-    )
 
-    const miscEntries: TopMenuDropdownParam = {
-      label: this.i18n('Misc'),
-      children: [
-        {
-          label: this.i18n('Muted accounts'),
-          routerLink: '/my-account/blocklist/accounts',
-          iconName: 'user-x'
-        },
-        {
-          label: this.i18n('Muted servers'),
-          routerLink: '/my-account/blocklist/servers',
-          iconName: 'peertube-x'
-        },
-        {
-          label: this.i18n('Ownership changes'),
-          routerLink: '/my-account/ownership',
-          iconName: 'download'
+        const miscEntries: TopMenuDropdownParam = {
+          label: this.i18n('Misc'),
+          children: [
+            {
+              label: this.i18n('Muted accounts'),
+              routerLink: '/my-account/blocklist/accounts',
+              iconName: 'user-x'
+            },
+            {
+              label: this.i18n('Muted servers'),
+              routerLink: '/my-account/blocklist/servers',
+              iconName: 'peertube-x'
+            },
+            {
+              label: this.i18n('Ownership changes'),
+              routerLink: '/my-account/ownership',
+              iconName: 'download'
+            }
+          ]
         }
-      ]
-    }
 
-    this.menuEntries = [
-      {
-        label: this.i18n('My settings'),
-        routerLink: '/my-account/settings'
-      },
-      {
-        label: this.i18n('My notifications'),
-        routerLink: '/my-account/notifications'
-      },
-      libraryEntries,
-      miscEntries
-    ]
+        this.menuEntries = [
+          {
+            label: this.i18n('My settings'),
+            routerLink: '/my-account/settings'
+          },
+          {
+            label: this.i18n('My notifications'),
+            routerLink: '/my-account/notifications'
+          },
+          libraryEntries,
+          miscEntries
+        ]
+      }
+    )
   }
 
   isVideoImportEnabled () {
     const importConfig = this.serverConfig.import.videos
 
     return importConfig.http.enabled || importConfig.torrent.enabled
   }
-
-  canSeeVideosLink () {
-    const { videoQuota, videoQuotaDaily, videosCount } = this.user
-
-    // can upload
-    if ((videoQuota > 0 || videoQuota === -1) && (videoQuotaDaily > 0 || videoQuotaDaily === -1)) {
-      return true
-    }
-
-    // cannot upload but has already some videos
-    if (videosCount > 0) {
-      return true
-    }
-  }
 }
diff --git a/client/src/app/+videos/+video-edit/video-add.component.html b/client/src/app/+videos/+video-edit/video-add.component.html
@@ -1,12 +1,12 @@
-<div *ngIf="!canUpload()" class="no-upload">
+<div *ngIf="!user.canUpload()" class="no-upload">
   <div class="alert alert-warning">
     <div i18n>Sorry, the upload feature is disabled for your account. If you want to add videos, an admin must unlock your quota.</div>
     <a i18n routerLink="/about/instance" class="about-link">Read instance rules for help</a>
   </div>
   <img src="/client/assets/images/mascot/defeated.svg" alt="defeated mascot">
 </div>
 
-<div *ngIf="canUpload()" class="margin-content">
+<div *ngIf="user.canUpload()" class="margin-content">
   <div class="alert alert-warning" *ngIf="isRootUser()" i18n>
     We recommend you to not use the <strong>root</strong> user to publish your videos, since it's the super-admin account of your instance.
     <br />

diff --git a/client/src/app/+videos/+video-edit/video-add.component.ts b/client/src/app/+videos/+video-edit/video-add.component.ts
@@ -1,5 +1,5 @@
 import { Component, HostListener, OnInit, ViewChild } from '@angular/core'
-import { AuthService, CanComponentDeactivate, ServerService } from '@app/core'
+import { AuthService, AuthUser, CanComponentDeactivate, ServerService } from '@app/core'
 import { ServerConfig } from '@shared/models'
 import { VideoImportTorrentComponent } from './video-add-components/video-import-torrent.component'
 import { VideoImportUrlComponent } from './video-add-components/video-import-url.component'
@@ -19,6 +19,8 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
   videoName: string
   serverConfig: ServerConfig
 
+  user: AuthUser
+
   constructor (
     private auth: AuthService,
     private serverService: ServerService
@@ -29,6 +31,8 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
 
     this.serverService.getConfig()
       .subscribe(config => this.serverConfig = config)
+
+    this.user = this.auth.getUser()
   }
 
   onFirstStepDone (type: 'upload' | 'import-url' | 'import-torrent', videoName: string) {
@@ -59,12 +63,6 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
     return { canDeactivate: true }
   }
 
-  canUpload () {
-    const { videoQuota, videoQuotaDaily } = this.auth.getUser()
-
-    return (videoQuota > 0 || videoQuota === -1) && (videoQuotaDaily > 0 || videoQuotaDaily === -1)
-  }
-
   isVideoImportHttpEnabled () {
     return this.serverConfig.import.videos.http.enabled
   }
@@ -78,6 +76,6 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
   }
 
   isRootUser () {
-    return this.auth.getUser().username === 'root'
+    return this.user.username === 'root'
   }
 }
diff --git a/client/src/app/core/users/user.model.ts b/client/src/app/core/users/user.model.ts
@@ -149,4 +149,21 @@ export class User implements UserServerModel {
   updateAccountAvatar (newAccountAvatar: Avatar) {
     this.account.updateAvatar(newAccountAvatar)
   }
+
+  canUpload (): boolean {
+    if (this.videoQuota === 0 || this.videoQuotaDaily === 0) return false
+
+    return true
+  }
+
+  canSeeVideosLink (): boolean {
+    if (this.canUpload()) {
+      return true
+    }
+
+    // cannot upload but has already some videos
+    if (this.videosCount > 0) {
+      return true
+    }
+  }
 }
diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
@@ -1,7 +1,7 @@
 <div class="sub-menu" [ngClass]="{ 'no-scroll': isModalOpened }">
   <ng-container *ngFor="let menuEntry of menuEntries; index as id">
 
-    <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ menuEntry.label }}</a>
+    <a *ngIf="menuEntry.routerLink && !menuEntry.isHidden" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ menuEntry.label }}</a>
 
     <div *ngIf="!menuEntry.routerLink" ngbDropdown class="parent-entry"
       #dropdown="ngbDropdown" autoClose="outside">
@@ -25,11 +25,15 @@
       </span>
 
       <div ngbDropdownMenu>
-        <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [ngClass]="{ icon: hasIcons, active: suffixLabels[menuEntry.label] === menuChild.label }" [routerLink]="menuChild.routerLink">
-          <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>
+        <ng-container *ngFor="let menuChild of menuEntry.children">
+          <a *ngIf="!menuChild.isHidden" class="dropdown-item"
+            [ngClass]="{ icon: hasIcons, active: suffixLabels[menuEntry.label] === menuChild.label }"
+            [routerLink]="menuChild.routerLink">
+            <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>
 
-          {{ menuChild.label }}
-        </a>
+            {{ menuChild.label }}
+          </a>
+        </ng-container>
       </div>
     </div>
   </ng-container>
@@ -39,13 +43,15 @@
   <div class="modal-body">
     <ng-container *ngFor="let menuEntry of menuEntries; index as id">
       <div [ngClass]="{ hidden: id !== currentMenuEntryIndex }">
-        <a *ngFor="let menuChild of menuEntry.children"
-          [ngClass]="{ icon: hasIcons }"
-          [routerLink]="menuChild.routerLink" routerLinkActive="active" (click)="dismissOtherModals()">
-          <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>
+        <ng-container *ngFor="let menuChild of menuEntry.children">
+          <a *ngIf="!menuChild.isHidden"
+            [ngClass]="{ icon: hasIcons }"
+            [routerLink]="menuChild.routerLink" routerLinkActive="active" (click)="dismissOtherModals()">
+            <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>
 
-          {{ menuChild.label }}
-        </a>
+            {{ menuChild.label }}
+          </a>
+        </ng-container>
       </div>
     </ng-container>
   </div>

diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts
@@ -9,11 +9,12 @@ import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
 export type TopMenuDropdownParam = {
   label: string
   routerLink?: string
+  isHidden?: boolean
 
   children?: {
     label: string
     routerLink: string
-
+    isHidden?: boolean
     iconName?: GlobalIconName
   }[]
 }