Add los-close toggle to autopilot

Adds a open/close list-of-speakers toggle option to autopilot component
Also: hides the list of speakers if the current content object does not
allow a list-of-speakers (mediafiles, users)

client/src/app/core/repositories/agenda/list-of-speakers-repository.service.ts

@@ -262,6 +262,10 @@ export class ListOfSpeakersRepositoryService extends BaseHasContentObjectReposit
         return !this.getViewModelList().some(list => list.hasSpeakerSpoken(speaker));
     }
 
+    public async setListOpenness(listOfSpeakers: ViewListOfSpeakers, open: boolean): Promise<void> {
+        await this.update({ closed: !open }, listOfSpeakers);
+    }
+
     /**
      * List every speaker only once, who has spoken
      *

client/src/app/site/agenda/components/list-of-speakers/list-of-speakers.component.html

@@ -61,14 +61,15 @@
         [text]="getContentObjectProjectorButtonText()"
     ></os-projector-button>
 
-    <button mat-menu-item *ngIf="isListOfSpeakersClosed" (click)="openSpeakerList()">
+    <button mat-menu-item (click)="setOpenness(isListOfSpeakersClosed)">
+        <ng-container *ngIf="isListOfSpeakersClosed">
             <mat-icon>lock_open</mat-icon>
             <span>{{ 'Open list of speakers' | translate }}</span>
-    </button>
-
-    <button mat-menu-item *ngIf="!isListOfSpeakersClosed" (click)="closeSpeakerList()">
+        </ng-container>
+        <ng-container *ngIf="!isListOfSpeakersClosed">
             <mat-icon>lock</mat-icon>
             <span>{{ 'Close list of speakers' | translate }}</span>
+        </ng-container>
     </button>
 
     <mat-divider></mat-divider>

client/src/app/site/agenda/components/list-of-speakers/list-of-speakers.component.ts

@@ -175,22 +175,8 @@ export class ListOfSpeakersComponent extends BaseViewComponentDirective implemen
         this.listOfSpeakersRepo.readdLastSpeaker(this.viewListOfSpeakers).catch(this.raiseError);
     }
 
-    /**
-     * Closes the current list of speakers
-     */
-    public closeSpeakerList(): Promise<void> {
-        if (!this.viewListOfSpeakers.closed) {
-            return this.listOfSpeakersRepo.update({ closed: true }, this.viewListOfSpeakers).catch(this.raiseError);
-        }
-    }
-
-    /**
-     * Opens the list of speaker for the current item
-     */
-    public openSpeakerList(): Promise<void> {
-        if (this.viewListOfSpeakers.closed) {
-            return this.listOfSpeakersRepo.update({ closed: false }, this.viewListOfSpeakers).catch(this.raiseError);
-        }
+    public async setOpenness(open: boolean): Promise<void> {
+        await this.listOfSpeakersRepo.setListOpenness(this.viewListOfSpeakers, open).catch(this.raiseError);
     }
 
     /**

client/src/app/site/cinema/components/cinema/cinema.component.html

@@ -22,16 +22,34 @@
 
     <!-- List of speakers -->
     <os-list-of-speakers-content
-            [customTitle]="true" [speakers]="listOfSpeakers"
-            *osPerms="'agenda.can_see_list_of_speakers'"
+        [customTitle]="true"
+        [speakers]="listOfSpeakers"
+        *osPerms="permission.agendaCanSeeListOfSpeakers; and: listOfSpeakers"
     >
-        <p class="subtitle-text line-and-icon">
+        <p class="line-and-icon subtitle-text">
             <a [routerLink]="closUrl" [class.disabled]="!closUrl">
                 {{ 'List of speakers' | translate }}
             </a>
+
+            <ng-container *osPerms="permission.agendaCanManageListOfSpeakers; complement: true">
                 <mat-icon *ngIf="isLosClosed" matTooltip="{{ 'The list of speakers is closed.' | translate }}">
                     lock
                 </mat-icon>
+            </ng-container>
+
+            <button
+                *osPerms="permission.agendaCanManageListOfSpeakers"
+                mat-icon-button
+                (click)="toggleListOfSpeakersOpen()"
+            >
+                <mat-icon *ngIf="isLosClosed" matTooltip="{{ 'The list of speakers is closed.' | translate }}">
+                    lock
+                </mat-icon>
+
+                <mat-icon *ngIf="!isLosClosed" matTooltip="{{ 'The list of speakers is open.' | translate }}">
+                    lock_open
+                </mat-icon>
+            </button>
         </p>
     </os-list-of-speakers-content>
 

client/src/app/site/cinema/components/cinema/cinema.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 
@@ -6,9 +6,11 @@ import { TranslateService } from '@ngx-translate/core';
 
 import { OperatorService } from 'app/core/core-services/operator.service';
 import { ProjectorService } from 'app/core/core-services/projector.service';
+import { ListOfSpeakersRepositoryService } from 'app/core/repositories/agenda/list-of-speakers-repository.service';
 import { ProjectorRepositoryService } from 'app/core/repositories/projector/projector-repository.service';
 import { DetailNavigable, isDetailNavigable } from 'app/shared/models/base/detail-navigable';
 import { ProjectorElement } from 'app/shared/models/core/projector';
+import { ListOfSpeakersComponent } from 'app/site/agenda/components/list-of-speakers/list-of-speakers.component';
 import { ViewListOfSpeakers } from 'app/site/agenda/models/view-list-of-speakers';
 import { BaseProjectableViewModel } from 'app/site/base/base-projectable-view-model';
 import { BaseViewComponentDirective } from 'app/site/base/base-view';
@@ -87,7 +89,8 @@ export class CinemaComponent extends BaseViewComponentDirective implements OnIni
         private operator: OperatorService,
         private projectorService: ProjectorService,
         private projectorRepo: ProjectorRepositoryService,
-        private closService: CurrentListOfSpeakersService
+        private closService: CurrentListOfSpeakersService,
+        private listOfSpeakersRepo: ListOfSpeakersRepositoryService
     ) {
         super(title, translate, snackBar);
     }
@@ -110,4 +113,8 @@ export class CinemaComponent extends BaseViewComponentDirective implements OnIni
             })
         );
     }
+
+    public async toggleListOfSpeakersOpen(): Promise<void> {
+        await this.listOfSpeakersRepo.setListOpenness(this.listOfSpeakers, this.isLosClosed).catch(this.raiseError);
+    }
 }

client/src/styles.scss

@@ -157,10 +157,18 @@ b,
 
 // for aligning text lines with an icon and or link
 .line-and-icon {
-    display: flex;
+    display: block;
+    line-height: 40px;
+    h2,
+    span,
+    a {
+        vertical-align: bottom;
+    }
+
     .mat-icon-button,
     .mat-icon {
         margin: auto 0;
+        vertical-align: middle;
     }
 }