From 4e624384e7cde58dd894f4dfaa386a4ce6d17bcb Mon Sep 17 00:00:00 2001
From: Sean <sean.f.t.engelhardt@gmail.com>
Date: Tue, 5 May 2020 16:08:32 +0200
Subject: [PATCH] Projector indicator list view tables

Shows a projector indicator in the list view tables.
Width is 24px, just as small as mat-icon needs.
Works in every list view that allows projector buttons (which should
cover everything where an indicator could be demanded)
---
 .../list-view-table.component.html            | 13 +++++
 .../list-view-table.component.scss            |  1 +
 .../list-view-table.component.scss-theme.scss | 13 +++++
 .../list-view-table.component.spec.ts         |  4 +-
 .../list-view-table.component.ts              | 47 +++++++++--------
 .../agenda-list/agenda-list.component.html    | 50 +++++++++++++------
 .../agenda-list/agenda-list.component.scss    |  7 ---
 .../motion-block-detail.component.html        |  2 +-
 .../motion-list/motion-list.component.html    |  2 +-
 client/src/assets/styles/tables.scss          |  2 +-
 client/src/styles.scss                        |  2 +
 11 files changed, 95 insertions(+), 48 deletions(-)
 create mode 100644 client/src/app/shared/components/list-view-table/list-view-table.component.scss-theme.scss

diff --git a/client/src/app/shared/components/list-view-table/list-view-table.component.html b/client/src/app/shared/components/list-view-table/list-view-table.component.html
index 2e5dfcfd5..4af34c745 100644
--- a/client/src/app/shared/components/list-view-table/list-view-table.component.html
+++ b/client/src/app/shared/components/list-view-table/list-view-table.component.html
@@ -22,6 +22,8 @@
         [columns]="columnSet"
         [hideColumns]="hiddenColumns"
         (rowClick)="onSelectRow($event)"
+        [rowClassUpdate]="isElementProjected"
+        rowClassUpdateFreq="ngDoCheck"
     >
         <!-- "row" has the view model -->
         <!-- "value" has the property, that was defined in the columnDefinition -->
@@ -30,10 +32,21 @@
         <!-- Projector column -->
         <div *pblNgridCellDef="'projector'; row as viewModel" class="fill ngrid-lg">
             <os-projector-button
+                *osPerms="'core.can_manage_projector'"
                 class="projector-button"
                 [object]="getProjectable(viewModel)"
                 (changeEvent)="viewUpdateEvent()"
             ></os-projector-button>
+            <!-- Projector indicator -->
+            <div class="projector-button" *osPerms="'core.can_manage_projector'; complement: true">
+                <mat-icon
+                    color="accent"
+                    *ngIf="projectorService.isProjected(getProjectable(viewModel))"
+                    matTooltip="{{ 'Currently projected' | translate }}"
+                >
+                    videocam
+                </mat-icon>
+            </div>
         </div>
 
         <!-- No Results -->
diff --git a/client/src/app/shared/components/list-view-table/list-view-table.component.scss b/client/src/app/shared/components/list-view-table/list-view-table.component.scss
index 7cd233d80..ef31713db 100644
--- a/client/src/app/shared/components/list-view-table/list-view-table.component.scss
+++ b/client/src/app/shared/components/list-view-table/list-view-table.component.scss
@@ -4,6 +4,7 @@ $pbl-height: var(--pbl-height);
 
 .projector-button {
     margin: auto;
+    display: flex;
 }
 
 .pbl-ngrid-row {
diff --git a/client/src/app/shared/components/list-view-table/list-view-table.component.scss-theme.scss b/client/src/app/shared/components/list-view-table/list-view-table.component.scss-theme.scss
new file mode 100644
index 000000000..98965efe5
--- /dev/null
+++ b/client/src/app/shared/components/list-view-table/list-view-table.component.scss-theme.scss
@@ -0,0 +1,13 @@
+@import '~@angular/material/theming';
+
+@mixin os-list-view-table-theme($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, accent);
+    $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
+
+    .projected {
+        background-color: mat-color($background, hover) !important;
+    }
+}
diff --git a/client/src/app/shared/components/list-view-table/list-view-table.component.spec.ts b/client/src/app/shared/components/list-view-table/list-view-table.component.spec.ts
index 131ec7f62..b304daa04 100644
--- a/client/src/app/shared/components/list-view-table/list-view-table.component.spec.ts
+++ b/client/src/app/shared/components/list-view-table/list-view-table.component.spec.ts
@@ -5,8 +5,8 @@ import { E2EImportsModule } from 'e2e-imports.module';
 import { ListViewTableComponent } from './list-view-table.component';
 
 describe('ListViewTableComponent', () => {
-    let component: ListViewTableComponent<any, any>;
-    let fixture: ComponentFixture<ListViewTableComponent<any, any>>;
+    let component: ListViewTableComponent<any>;
+    let fixture: ComponentFixture<ListViewTableComponent<any>>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
diff --git a/client/src/app/shared/components/list-view-table/list-view-table.component.ts b/client/src/app/shared/components/list-view-table/list-view-table.component.ts
index 59524134a..452be3421 100644
--- a/client/src/app/shared/components/list-view-table/list-view-table.component.ts
+++ b/client/src/app/shared/components/list-view-table/list-view-table.component.ts
@@ -13,18 +13,18 @@ import {
 import { NavigationStart, Router } from '@angular/router';
 
 import { columnFactory, createDS, DataSourcePredicate, PblDataSource, PblNgridComponent } from '@pebula/ngrid';
-import { PblColumnDefinition, PblColumnFactory, PblNgridColumnSet } from '@pebula/ngrid/lib/grid';
+import { PblColumnDefinition, PblColumnFactory, PblNgridColumnSet, PblNgridRowContext } from '@pebula/ngrid/lib/grid';
 import { PblNgridDataMatrixRow } from '@pebula/ngrid/target-events';
 import { Observable, Subscription } from 'rxjs';
 import { distinctUntilChanged, filter } from 'rxjs/operators';
 
 import { OperatorService, Permission } from 'app/core/core-services/operator.service';
+import { ProjectorService } from 'app/core/core-services/projector.service';
 import { StorageService } from 'app/core/core-services/storage.service';
 import { HasViewModelListObservable } from 'app/core/definitions/has-view-model-list-observable';
 import { BaseFilterListService } from 'app/core/ui-services/base-filter-list.service';
 import { BaseSortListService } from 'app/core/ui-services/base-sort-list.service';
 import { ViewportService } from 'app/core/ui-services/viewport.service';
-import { BaseModel } from 'app/shared/models/base/base-model';
 import { BaseProjectableViewModel } from 'app/site/base/base-projectable-view-model';
 import { BaseViewModel } from 'app/site/base/base-view-model';
 import { BaseViewModelWithContentObject } from 'app/site/base/base-view-model-with-content-object';
@@ -89,7 +89,8 @@ export interface ColumnRestriction {
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None
 })
-export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel> implements OnInit, OnDestroy {
+export class ListViewTableComponent<V extends BaseViewModel | BaseViewModelWithContentObject>
+    implements OnInit, OnDestroy {
     /**
      * Declare the table
      */
@@ -254,11 +255,6 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
      */
     private dataListObservable: Observable<V[]>;
 
-    /**
-     * Minimal column width
-     */
-    private columnMinWidth = '60px';
-
     /**
      * The column set to display in the table
      */
@@ -289,6 +285,14 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
      */
     private subs: Subscription[] = [];
 
+    private get projectorColumnWidth(): number {
+        if (this.operator.hasPerms('core.can_manage_projector')) {
+            return 60;
+        } else {
+            return 24;
+        }
+    }
+
     /**
      * Most, of not all list views require these
      */
@@ -302,7 +306,7 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
             {
                 prop: 'projector',
                 label: '',
-                width: this.columnMinWidth
+                width: `${this.projectorColumnWidth}px`
             }
         ];
         return columns;
@@ -358,12 +362,7 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
         }
 
         // hide the projector columns
-        if (
-            this.multiSelect ||
-            this.isMobile ||
-            !this.allowProjector ||
-            !this.operator.hasPerms('core.can_manage_projector')
-        ) {
+        if (this.multiSelect || this.isMobile || !this.allowProjector) {
             hidden.push('projector');
         }
 
@@ -398,7 +397,8 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
         vp: ViewportService,
         router: Router,
         private store: StorageService,
-        private cd: ChangeDetectorRef
+        private cd: ChangeDetectorRef,
+        public projectorService: ProjectorService
     ) {
         vp.isMobileSubject.subscribe(mobile => {
             if (mobile !== this.isMobile) {
@@ -458,7 +458,7 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
         // Define the columns. Has to be in the OnInit cause "columns" is slower than
         // the constructor of this class
         this.columnSet = columnFactory()
-            .default({ width: this.columnMinWidth })
+            .default({ width: '60px' })
             .table(...this.defaultStartColumns, ...this.columns, ...this.defaultEndColumns)
             .build();
 
@@ -483,6 +483,12 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
         }
     }
 
+    public isElementProjected = (context: PblNgridRowContext<V>) => {
+        if (this.projectorService.isProjected(this.getProjectable(context.$implicit as V))) {
+            return 'projected';
+        }
+    };
+
     /**
      * Determines and sets the raw data as observable lists according
      * to the used search and filter services
@@ -597,11 +603,8 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
      * @param viewModel The model of the table
      * @returns a view model that can be projected
      */
-    public getProjectable(
-        viewModel: BaseViewModelWithContentObject | BaseProjectableViewModel
-    ): BaseProjectableViewModel {
-        const withContent = viewModel as BaseViewModelWithContentObject;
-        return !!withContent.contentObject ? withContent.contentObject : viewModel;
+    public getProjectable(viewModel: V): BaseProjectableViewModel {
+        return (viewModel as BaseViewModelWithContentObject)?.contentObject ?? viewModel;
     }
 
     /**
diff --git a/client/src/app/site/agenda/components/agenda-list/agenda-list.component.html b/client/src/app/site/agenda/components/agenda-list/agenda-list.component.html
index ff8c8ac16..d184fb5be 100644
--- a/client/src/app/site/agenda/components/agenda-list/agenda-list.component.html
+++ b/client/src/app/site/agenda/components/agenda-list/agenda-list.component.html
@@ -33,19 +33,31 @@
     <div *pblNgridCellDef="'title'; row as item; rowContext as rowContext" class="cell-slot fill">
         <a class="detail-link" [routerLink]="getDetailUrl(item)" *ngIf="!isMultiSelect"></a>
         <div [ngStyle]="{ 'margin-left': item.level * 25 + 'px' }" class="innerTable">
-            <os-icon-container [noWrap]="true" [icon]="item.closed ? 'check' : null" size="large">
-                <div class="ellipsis-overflow">
+
+            <!-- Title line -->
+            <div class="title-line ellipsis-overflow">
+                <!-- Is Closed -->
+                <span class="icon-prefix" *ngIf="item.closed">
+                    <mat-icon>check</mat-icon>
+                </span>
+
+                <!-- Title -->
+                <span>
                     {{ item.getListTitle() }}
-                </div>
-                <div *ngIf="showSubtitle" class="subtitle ellipsis-overflow">
-                    {{ item.getSubtitle() }}
-                </div>
-                <div *ngIf="item.comment" class="subtitle ellipsis-overflow">
-                    <os-icon-container size="small" icon="comment" [noWrap]="true">
-                        {{ item.comment }}
-                    </os-icon-container>
-                </div>
-            </os-icon-container>
+                </span>
+            </div>
+
+            <!-- Subtitle line -->
+            <div class="subtitle ellipsis-overflow">
+                {{ item.getSubtitle() }}
+            </div>
+
+            <!-- Comment line -->
+            <div class="subtitle ellipsis-overflow" *ngIf="item.comment">
+                <os-icon-container size="small" icon="comment" [noWrap]="true">
+                    {{ item.comment }}
+                </os-icon-container>
+            </div>
         </div>
     </div>
 
@@ -121,7 +133,12 @@
             <span>{{ 'Import' | translate }}</span>
         </button>
         <mat-divider></mat-divider>
-        <button mat-menu-item *osPerms="'agenda.can_manage'" class="red-warning-text" (click)="deleteAllSpeakersOfAllListsOfSpeakers()">
+        <button
+            mat-menu-item
+            *osPerms="'agenda.can_manage'"
+            class="red-warning-text"
+            (click)="deleteAllSpeakersOfAllListsOfSpeakers()"
+        >
             <mat-icon>delete</mat-icon>
             <span>{{ 'Clear all list of speakers' | translate }}</span>
         </button>
@@ -229,7 +246,12 @@
                 <span>{{ 'Remove from agenda' | translate }}</span>
             </button>
 
-            <button mat-menu-item class="red-warning-text" (click)="deleteTopic(item)" *ngIf="isTopic(item.contentObject)">
+            <button
+                mat-menu-item
+                class="red-warning-text"
+                (click)="deleteTopic(item)"
+                *ngIf="isTopic(item.contentObject)"
+            >
                 <mat-icon>delete</mat-icon>
                 <span>{{ 'Delete' | translate }}</span>
             </button>
diff --git a/client/src/app/site/agenda/components/agenda-list/agenda-list.component.scss b/client/src/app/site/agenda/components/agenda-list/agenda-list.component.scss
index 325e6aa30..4a783c27a 100644
--- a/client/src/app/site/agenda/components/agenda-list/agenda-list.component.scss
+++ b/client/src/app/site/agenda/components/agenda-list/agenda-list.component.scss
@@ -16,10 +16,3 @@
 .align-right {
     margin-left: auto;
 }
-
-/*
-* Where is this used?
-*/
-.done-check {
-    margin-right: 10px;
-}
diff --git a/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.html b/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.html
index f76603e59..3946b41bb 100644
--- a/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.html
+++ b/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.html
@@ -68,7 +68,7 @@
                 </span>
 
                 <!-- Has File -->
-                <span class="attached-files" *ngIf="motion.hasAttachments()">
+                <span class="icon-prefix" *ngIf="motion.hasAttachments()">
                     <mat-icon>attach_file</mat-icon>
                 </span>
 
diff --git a/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html b/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html
index 66889fa81..80e913e3f 100644
--- a/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html
+++ b/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html
@@ -74,7 +74,7 @@
                     </span>
 
                     <!-- Has File -->
-                    <span class="attached-files" *ngIf="motion.hasAttachments()">
+                    <span class="icon-prefix" *ngIf="motion.hasAttachments()">
                         <mat-icon>attach_file</mat-icon>
                     </span>
 
diff --git a/client/src/assets/styles/tables.scss b/client/src/assets/styles/tables.scss
index b217d62f1..6c0053d5c 100644
--- a/client/src/assets/styles/tables.scss
+++ b/client/src/assets/styles/tables.scss
@@ -4,7 +4,7 @@
     font-weight: 500;
     font-size: 16px;
 
-    .attached-files {
+    .icon-prefix {
         .mat-icon {
             display: inline-flex;
             vertical-align: middle;
diff --git a/client/src/styles.scss b/client/src/styles.scss
index 347a925fe..777d52d16 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -33,6 +33,7 @@
 @import './app/site/assignments/components/assignment-poll-detail/assignment-poll-detail-component.scss-theme.scss';
 @import './app/shared/components/progress-snack-bar/progress-snack-bar.component.scss-theme.scss';
 @import './app/shared/components/jitsi/jitsi.component.scss-theme.scss';
+@import './app/shared/components/list-view-table/list-view-table.component.scss-theme.scss';
 
 /** fonts */
 @import './assets/styles/fonts.scss';
@@ -66,6 +67,7 @@ $narrow-spacing: (
     @include os-assignment-poll-detail-style($theme);
     @include os-progress-snack-bar-style($theme);
     @include os-jitsi-theme($theme);
+    @include os-list-view-table-theme($theme);
 }
 
 /** Load projector specific SCSS values */