From ab6a53c2dec21dbdb3c1d8428638cb0b6da0657d Mon Sep 17 00:00:00 2001
From: Maximilian Krambach <maximilian.krambach@intevation.de>
Date: Thu, 25 Apr 2019 14:49:41 +0200
Subject: [PATCH] small assignment layout updates/fixes

---
 .../assignment-detail.component.html          | 35 +++++-------
 .../assignment-detail.component.ts            | 19 ++++---
 .../assignment-poll.component.html            | 57 ++++++++++---------
 3 files changed, 56 insertions(+), 55 deletions(-)

diff --git a/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.html b/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.html
index 1848815a8..aae573528 100644
--- a/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.html
+++ b/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.html
@@ -27,7 +27,13 @@
                 <mat-icon>picture_as_pdf</mat-icon>
                 <span translate>PDF</span>
             </button>
-            <mat-divider></mat-divider>
+            <!-- List of speakers -->
+            <div *ngIf="assignment.agendaItem">
+                <button mat-menu-item [routerLink]="getSpeakerLink()" *osPerms="'agenda.can_see'">
+                    <mat-icon>mic</mat-icon>
+                    <span translate>List of speakers</span>
+                </button>
+            </div>
         </div>
         <!-- Project -->
         <os-projector-button
@@ -38,6 +44,8 @@
 
         <!-- Delete -->
         <div *ngIf="assignment && hasPerms('manage')">
+            <!-- Delete -->
+            <mat-divider></mat-divider>
             <button mat-menu-item class="red-warning-text" (click)="onDeleteAssignmentButton()">
                 <mat-icon>delete</mat-icon>
                 <span translate>Delete</span>
@@ -149,8 +157,8 @@
         </os-sorting-list>
     </div>
     <!-- Search for candidates -->
-    <div *ngIf="hasPerms('addOthers')">
-        <form *ngIf="filteredCandidates && filteredCandidates.value.length > 0" [formGroup]="candidatesForm">
+    <div *ngIf="hasPerms('addOthers')" class="os-form-card">
+        <form *ngIf="hasPerms('addOthers') && filteredCandidates && filteredCandidates.value.length > 0" [formGroup]="candidatesForm">
             <os-search-value-selector
                 *ngIf="hasPerms('addOthers')"
                 ngDefaultControl
@@ -160,8 +168,6 @@
                 [form]="candidatesForm"
                 [multiple]="false"
             >
-                <!-- TODO: better class here: wider -->
-                <!-- TODO: Performance check: something seems off here with filteredCandidates -->
             </os-search-value-selector>
         </form>
     </div>
@@ -179,17 +185,15 @@
         </div>
     </div>
     <div *ngIf="assignment && hasPerms('createPoll')">
-        <mat-divider></mat-divider>
         <button mat-button (click)="createPoll()">
             <mat-icon color="primary">poll</mat-icon>
             <span translate>New ballot</span>
         </button>
     </div>
-    <mat-divider *ngIf="assignment && assignment.polls && assignment.polls.length"> </mat-divider>
 </ng-template>
 
 <ng-template #assignmentFormTemplate>
-    <div>
+    <mat-card class="os-form-card">
         <form
             class="content"
             [formGroup]="assignmentForm"
@@ -207,7 +211,7 @@
                     />
                 </mat-form-field>
             </div>
-
+            <h4 translate>Description:</h4>
             <!-- description: HTML Editor -->
             <editor
                 formControlName="description"
@@ -215,17 +219,6 @@
                 *ngIf="assignment && editAssignment"
                 required
             ></editor>
-            <div
-                *ngIf="
-                    assignmentForm.get('description').invalid &&
-                    (assignmentForm.get('description').dirty || assignmentForm.get('description').touched)
-                "
-                class="red-warning-text"
-                translate
-            >
-                This field is required.
-            </div>
-
             <!-- searchValueSelector: tags -->
             <div class="content-field" *ngIf="tagsAvailable">
                 <os-search-value-selector
@@ -276,5 +269,5 @@
             </div>
             <!-- TODO searchValueSelector: Parent -->
         </form>
-    </div>
+    </mat-card>
 </ng-template>
diff --git a/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.ts b/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.ts
index 62775503b..b1b825ab1 100644
--- a/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.ts
+++ b/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.ts
@@ -449,7 +449,7 @@ export class AssignmentDetailComponent extends BaseViewComponent implements OnIn
 
     /**
      * Assemble a meaningful label for the poll
-     * Published polls will look like 'Ballot 2 (published)'
+     * Published polls will look like 'Ballot 2'
      * other polls will be named 'Ballot 2' for normal users, with the hint
      * '(unpulished)' appended for manager users
      *
@@ -458,14 +458,10 @@ export class AssignmentDetailComponent extends BaseViewComponent implements OnIn
      */
     public getPollLabel(poll: AssignmentPoll, index: number): string {
         const title = `${this.translate.instant('Ballot')} ${index + 1}`;
-        if (poll.published) {
-            return title + ` (${this.translate.instant('published')})`;
+        if (!poll.published && this.hasPerms('manage')) {
+            return title + ` (${this.translate.instant('unpublished')})`;
         } else {
-            if (this.hasPerms('manage')) {
-                return title + ` (${this.translate.instant('unpublished')})`;
-            } else {
-                return title;
-            }
+            return title;
         }
     }
 
@@ -493,4 +489,11 @@ export class AssignmentDetailComponent extends BaseViewComponent implements OnIn
             .sortCandidates(listInNewOrder.map(relatedUser => relatedUser.id), this.assignment)
             .then(null, this.raiseError);
     }
+
+    /**
+     * Gets the link to the list of speakers associated with the assignment
+     */
+    public getSpeakerLink(): string {
+        return `/agenda/${this.assignment.agendaItem.id}/speakers`;
+    }
 }
diff --git a/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.html b/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.html
index 24fc52194..bf7caccc0 100644
--- a/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.html
+++ b/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.html
@@ -28,7 +28,7 @@
                 </button>
             </div>
             <div *osPerms="'core.can_manage_projector'">
-                <os-projector-button menuItem=true [object]="poll"></os-projector-button>
+                <os-projector-button menuItem="true" [object]="poll"></os-projector-button>
             </div>
             <div *osPerms="'assignments.can_manage'">
                 <mat-divider></mat-divider>
@@ -39,28 +39,6 @@
             </div>
         </mat-menu>
     </div>
-    <div>
-        <h4>
-            <span translate>Hint for ballot paper</span>
-        </h4>
-        <div [formGroup]="descriptionForm">
-            <mat-form-field class="wide">
-                <input matInput formControlName="description" [disabled]="!canManage" />
-            </mat-form-field>
-            <button
-                mat-icon-button
-                [disabled]="!dirtyDescription"
-                *ngIf="canManage"
-                (click)="onEditDescriptionButton()"
-            >
-                <mat-icon inline>edit</mat-icon>
-            </button>
-        </div>
-        <div class="spacer-bottom-10">
-            <h4 translate>Election method</h4>
-            <span>{{ pollMethodName | translate }}</span>
-        </div>
-    </div>
     <div class="on-transition-fade" *ngIf="poll.options">
         <div *ngIf="pollData">
             <div class="poll-grid">
@@ -139,7 +117,10 @@
                                     >({{ pollService.getPercent(poll, option, vote.value) }}%)</span
                                 >
                             </div>
-                            <div *ngIf="!pollService.isAbstractOption(poll, option, vote.value)" class="poll-progress-bar">
+                            <div
+                                *ngIf="!pollService.isAbstractOption(poll, option, vote.value)"
+                                class="poll-progress-bar"
+                            >
                                 <mat-progress-bar
                                     mode="determinate"
                                     [value]="pollService.getPercent(poll, option, vote.value)"
@@ -161,7 +142,8 @@
                         class="poll-quorum"
                     >
                         <span>{{ pollService.yesQuorum(majorityChoice, poll, option) }}</span>
-                        <span [ngClass]="quorumReached(option) ? 'green-text' : 'red-warning-text'"
+                        <span
+                            [ngClass]="quorumReached(option) ? 'green-text' : 'red-warning-text'"
                             matTooltip="{{ getQuorumReachedString(option) }}"
                         >
                             <mat-icon *ngIf="quorumReached(option)">{{ pollService.getIcon('yes') }}</mat-icon>
@@ -181,7 +163,7 @@
                     <div>
                         {{ pollService.getSpecialLabel(poll[key]) | translate }}
                         <span *ngIf="!pollService.isAbstractValue(poll, key)">
-                            ({{ pollService.getValuePercent(poll,key) }} %)
+                            ({{ pollService.getValuePercent(poll, key) }} %)
                         </span>
                     </div>
                 </div>
@@ -194,4 +176,27 @@
             </div>
         </div>
     </div>
+
+    <div class="spacer-bottom-10">
+        <h4 translate>Election method</h4>
+        <span>{{ pollMethodName | translate }}</span>
+    </div>
+    <div>
+        <h4>
+            <span translate>Hint for ballot paper</span>
+        </h4>
+        <div [formGroup]="descriptionForm">
+            <mat-form-field class="wide">
+                <input matInput formControlName="description" [disabled]="!canManage" />
+            </mat-form-field>
+            <button
+                mat-icon-button
+                [disabled]="!dirtyDescription"
+                *ngIf="canManage"
+                (click)="onEditDescriptionButton()"
+            >
+                <mat-icon inline>check</mat-icon>
+            </button>
+        </div>
+    </div>
 </mat-card>