Add permissions to media files

Adds a set of permissions to the new file manager

client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html

@@ -42,14 +42,17 @@
                 mat-button
                 [matMenuTriggerFor]="singleMediafileMenu"
                 [matMenuTriggerData]="{ mediafile: directory }"
-                *ngIf="last"
+                *ngIf="last && showFileMenu(directory)"
             >
                 <os-icon-container icon="arrow_drop_down" swap="true" size="large">
                     {{ directory.title }}
                 </os-icon-container>
             </button>
+            <span class="folder fake-folder folder-text" *ngIf="last && !showFileMenu(directory)">
+                {{ directory.title }}
+            </span>
         </span>
-        <span class="visibility" *ngIf="directory && directory.inherited_access_groups_id !== true">
+        <span class="visibility" *ngIf="canEdit && directory && directory.inherited_access_groups_id !== true">
             <span class="visible-for" *ngIf="directory.has_inherited_access_groups" translate>
                 <os-icon-container
                     icon="visibility"
@@ -66,7 +69,14 @@
 </div>
 
 <!-- the actual file manager -->
-<pbl-ngrid class="file-manager-table ngrid-hide-head" showHeader="false" vScrollAuto [dataSource]="dataSource" [columns]="columnSet">
+<pbl-ngrid
+    class="file-manager-table ngrid-hide-head"
+    showHeader="false"
+    vScrollAuto
+    [dataSource]="dataSource"
+    [columns]="columnSet"
+    [hideColumns]="hiddenColumns"
+>
     <!-- Icon column -->
     <div *pblNgridCellDef="'icon'; row as mediafile" class="fill clickable">
         <a class="detail-link" target="_blank" [routerLink]="mediafile.url" *ngIf="mediafile.is_file"> </a>
@@ -110,12 +120,13 @@
         </div>
     </div>
 
-    <!-- Indicator column -->
+    <!-- Menu column -->
     <div *pblNgridCellDef="'menu'; row as mediafile" class="fill">
         <button
             mat-icon-button
             [matMenuTriggerFor]="singleMediafileMenu"
             [matMenuTriggerData]="{ mediafile: mediafile }"
+            *ngIf="showFileMenu(mediafile)"
         >
             <mat-icon>more_vert</mat-icon>
         </button>
@@ -136,7 +147,7 @@
 <mat-menu #singleMediafileMenu="matMenu">
     <ng-template matMenuContent let-mediafile="mediafile">
         <!-- Exclusive for images -->
-        <div *ngIf="mediafile.isImage()">
+        <div *ngIf="mediafile.isImage() && canEdit">
             <div *ngFor="let action of logoActions">
                 <ng-container
                     *ngTemplateOutlet="manageButton; context: { mediafile: mediafile, action: action }"
@@ -145,7 +156,7 @@
         </div>
 
         <!-- Exclusive for fonts -->
-        <div *ngIf="mediafile.isFont()">
+        <div *ngIf="mediafile.isFont() && canEdit">
             <div *ngFor="let action of fontActions">
                 <ng-container
                     *ngTemplateOutlet="manageButton; context: { mediafile: mediafile, action: action }"
@@ -161,18 +172,20 @@
             [menuItem]="true"
         ></os-projector-button>
         <os-speaker-button [object]="mediafile" [menuItem]="true"></os-speaker-button>
-        <button mat-menu-item (click)="onEditFile(mediafile)">
+        <div *ngIf="canEdit">
-            <mat-icon>edit</mat-icon>
+            <button mat-menu-item (click)="onEditFile(mediafile)">
-            <span translate>Edit</span>
+                <mat-icon>edit</mat-icon>
-        </button>
+                <span translate>Edit</span>
-        <button mat-menu-item (click)="move(moveDialog, mediafile)">
+            </button>
-            <mat-icon>near_me</mat-icon>
+            <button mat-menu-item (click)="move(moveDialog, mediafile)">
-            <span translate>Move</span>
+                <mat-icon>near_me</mat-icon>
-        </button>
+                <span translate>Move</span>
-        <button mat-menu-item class="red-warning-text" (click)="onDelete(mediafile)">
+            </button>
-            <mat-icon>delete</mat-icon>
+            <button mat-menu-item class="red-warning-text" (click)="onDelete(mediafile)">
-            <span translate>Delete</span>
+                <mat-icon>delete</mat-icon>
-        </button>
+                <span translate>Delete</span>
+            </button>
+        </div>
     </ng-template>
 </mat-menu>
 

client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss

@@ -24,6 +24,10 @@
         height: $size;
     }
 
+    .fake-folder {
+        padding: 0 16px;
+    }
+
     .folder-text {
         font-size: 16px;
         font-weight: 500;

client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts

@@ -70,6 +70,17 @@ export class MediafileListComponent extends BaseViewComponent implements OnInit,
         return this.operator.hasPerms('mediafiles.can_manage');
     }
 
+    /**
+     * Determine if the file menu should generally be accessible, according to the users permission
+     */
+    public get canAccessFileMenu(): boolean {
+        return (
+            this.operator.hasPerms('core.can_manage_projector') ||
+            this.operator.hasPerms('agenda.can_see_list_of_speakers') ||
+            this.canEdit
+        );
+    }
+
     /**
      * The form to edit Files
      */
@@ -82,6 +93,22 @@ export class MediafileListComponent extends BaseViewComponent implements OnInit,
     @ViewChild('fileEditDialog', { static: true })
     public fileEditDialog: TemplateRef<string>;
 
+    /**
+     * Determine generally hidden columns
+     */
+    public get hiddenColumns(): string[] {
+        const hidden = [];
+        if (!this.canEdit) {
+            hidden.push('info');
+        }
+
+        if (!this.canAccessFileMenu) {
+            hidden.push('menu');
+        }
+
+        return hidden;
+    }
+
     /**
      * Create the column set
      */
@@ -194,6 +221,19 @@ export class MediafileListComponent extends BaseViewComponent implements OnInit,
         this.clearSubscriptions();
     }
 
+    /**
+     * Determine if the given file has any extra option to show.
+     * @param file the file to check
+     * @returns wether the extra menu should be accessible
+     */
+    public showFileMenu(file: ViewMediafile): boolean {
+        return (
+            this.operator.hasPerms('agenda.can_see_list_of_speakers') ||
+            (file.isProjectable() && this.operator.hasPerms('core.can_manage_projector')) ||
+            this.canEdit
+        );
+    }
+
     public getDateFromTimestamp(timestamp: string): string {
         return new Date(timestamp).toLocaleString(this.translate.currentLang);
     }