Hide mobile list-menus by permission

Hides some mobile list menus if the permissions
are not sufficient.
Change the layout of the assignment mobile list

client/src/app/site/assignments/components/assignment-list/assignment-list.component.html

@@ -26,6 +26,7 @@
     [columns]="tableColumnDefinition"
     [filterProps]="filterProps"
     [multiSelect]="isMultiSelect"
+    [hiddenInMobile]="getColumnsHiddenInMobile()"
     listStorageKey="assignments"
     [(selectedRows)]="selectedRows"
     (dataSourceChange)="onDataSourceChange($event)"
@@ -39,14 +40,23 @@
             *ngIf="!isMultiSelect"
         ></a>
         <div>
-            {{ assignment.getListTitle() }}
+            <div class="title-line ellipsis-overflow">
+                {{ assignment.getListTitle() }}
+            </div>
+            <mat-chip-list *ngIf="vp.isMobile">
+                <mat-chip color="primary" selected>
+                    {{ assignment.phaseString | translate }}
+                </mat-chip>
+            </mat-chip-list>
         </div>
     </div>
 
     <!-- Phase -->
     <div *pblNgridCellDef="'phase'; row as assignment" class="cell-slot fill mat-chip-wrapper">
         <mat-chip-list>
-            <mat-chip color="primary" selected>{{ assignment.phaseString | translate }}</mat-chip>
+            <mat-chip color="primary" selected>
+                {{ assignment.phaseString | translate }}
+            </mat-chip>
         </mat-chip-list>
     </div>
 

client/src/app/site/assignments/components/assignment-list/assignment-list.component.scss

@@ -1,3 +1,5 @@
+@import '~assets/styles/tables.scss';
+
 .mat-chip-wrapper {
     .mat-standard-chip {
         height: auto;

client/src/app/site/assignments/components/assignment-list/assignment-list.component.ts

@@ -10,6 +10,7 @@ import { OperatorService } from 'app/core/core-services/operator.service';
 import { StorageService } from 'app/core/core-services/storage.service';
 import { AssignmentRepositoryService } from 'app/core/repositories/assignments/assignment-repository.service';
 import { PromptService } from 'app/core/ui-services/prompt.service';
+import { ViewportService } from 'app/core/ui-services/viewport.service';
 import { BaseListViewComponent } from 'app/site/base/base-list-view';
 import { AssignmentFilterListService } from '../../services/assignment-filter.service';
 import { AssignmentPdfExportService } from '../../services/assignment-pdf-export.service';
@@ -81,7 +82,8 @@ export class AssignmentListComponent extends BaseListViewComponent<ViewAssignmen
         private pdfService: AssignmentPdfExportService,
         protected route: ActivatedRoute,
         private router: Router,
-        public operator: OperatorService
+        public operator: OperatorService,
+        public vp: ViewportService
     ) {
         super(titleService, translate, matSnackBar, storage);
         this.canMultiSelect = true;
@@ -103,6 +105,19 @@ export class AssignmentListComponent extends BaseListViewComponent<ViewAssignmen
         this.router.navigate(['./new'], { relativeTo: this.route });
     }
 
+    /**
+     * @returns all the identifier of the columns that should be hidden in mobile
+     */
+    public getColumnsHiddenInMobile(): string[] {
+        const hiddenInMobile = ['phase', 'candidates'];
+
+        if (!this.operator.hasPerms('agenda.can_see_list_of_speakers', 'core.can_manage_projector')) {
+            hiddenInMobile.push('menu');
+        }
+
+        return hiddenInMobile;
+    }
+
     /**
      * Function to download the assignment list
      *

client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html

@@ -48,7 +48,7 @@
         [columns]="tableColumnDefinition"
         [multiSelect]="isMultiSelect"
         [filterProps]="filterProps"
-        [hiddenInMobile]="['identifier', 'state']"
+        [hiddenInMobile]="getColumnsHiddenInMobile()"
         listStorageKey="motion"
         [(selectedRows)]="selectedRows"
         (dataSourceChange)="onDataSourceChange($event)"

client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.ts

@@ -272,6 +272,20 @@ export class MotionListComponent extends BaseListViewComponent<ViewMotion> imple
         this.listTiles = this.categoryTiles.concat(this.motionTiles);
     }
 
+    /**
+     * @returns the columns hidden in mobile mode according to the
+     * current permissions
+     */
+    public getColumnsHiddenInMobile(): string[] {
+        const hiddenColumns = ['identifier', 'state'];
+
+        if (!this.perms.canAccessMobileDotMenu()) {
+            hiddenColumns.push('menu');
+        }
+
+        return hiddenColumns;
+    }
+
     /**
      * Creates the tiles for categories.
      * Filters thous without parent, sorts them by theit weight, maps them to TileInfo and publishes

client/src/app/site/motions/services/local-permissions.service.ts

@@ -25,6 +25,14 @@ export class LocalPermissionsService {
             .subscribe(enabled => (this.amendmentOfAmendment = enabled));
     }
 
+    /**
+     * Determine if the operator is allowed to access the per line dot-menu
+     * in mobile mode
+     */
+    public canAccessMobileDotMenu(): boolean {
+        return this.operator.hasPerms('agenda.can_see_list_of_speakers', 'core.can_manage_projector');
+    }
+
     /**
      * Determine if the user (Operator) has the correct permission to perform the given action.
      *

client/src/app/site/motions/styles/motion-list-styles.scss

@@ -1,23 +1,3 @@
-.title-line {
-    font-weight: 500;
-    font-size: 16px;
-
-    .attached-files {
-        .mat-icon {
-            display: inline-flex;
-            vertical-align: middle;
-            $icon-size: 16px;
-            font-size: $icon-size;
-            height: $icon-size;
-            width: $icon-size;
-        }
-    }
-
-    .favorite-star {
-        padding-right: 3px;
-    }
-}
-
 .submitters-line {
     font-size: 90%;
 }

client/src/assets/styles/tables.scss

@@ -1,4 +1,26 @@
 // shared definition for most (if not all) used tables
+
+.title-line {
+    font-weight: 500;
+    font-size: 16px;
+
+    .attached-files {
+        .mat-icon {
+            display: inline-flex;
+            vertical-align: middle;
+            $icon-size: 16px;
+            font-size: $icon-size;
+            height: $icon-size;
+            width: $icon-size;
+        }
+    }
+
+    .favorite-star {
+        padding-right: 3px;
+    }
+}
+
+// most mat-lists are NGrid already. Group-List and Workflow-Detail still require these.
 .mat-table {
     width: 100%;