Merge pull request #4628 from MaximilianKrambach/assignmentLayout

small assignment layout updates/fixes

client/src/app/shared/components/projector-button/projector-button.component.ts

@@ -38,7 +38,7 @@ export class ProjectorButtonComponent implements OnInit {
         if (isProjectable(obj) || isProjectorElementBuildDeskriptor(obj)) {
             this._object = obj;
         } else {
-            this.object = null;
+            this._object = null;
         }
     }
 

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

@@ -27,23 +27,26 @@
                 <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
+        <os-projector-button [object]="assignment" [menuItem]="true"></os-projector-button>
-            [object]="assignment"
-            [menuItem]="true"
-            *osPerms="'core.can_manage_projector'"
-        ></os-projector-button>
 
         <!-- 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>
             </button>
         </div>
-
     </mat-menu>
 </os-head-bar>
 
@@ -126,7 +129,10 @@
 
 <ng-template #candidatesTemplate>
     <!-- candidates -->
-    <div class="candidates-list" *ngIf="assignment && assignment.assignmentRelatedUsers && assignment.assignmentRelatedUsers.length > 0">
+    <div
+        class="candidates-list"
+        *ngIf="assignment && assignment.assignmentRelatedUsers && assignment.assignmentRelatedUsers.length > 0"
+    >
         <os-sorting-list
             [input]="assignment.assignmentRelatedUsers"
             [live]="true"
@@ -148,23 +154,25 @@
             </ng-template>
         </os-sorting-list>
     </div>
+
     <!-- Search for candidates -->
-    <div *ngIf="hasPerms('addOthers')">
+    <div class="search-field" *ngIf="hasPerms('addOthers')">
-        <form *ngIf="filteredCandidates && filteredCandidates.value.length > 0" [formGroup]="candidatesForm">
+        <form
-            <os-search-value-selector
+            *ngIf="hasPerms('addOthers') && filteredCandidates && filteredCandidates.value.length > 0"
-                *ngIf="hasPerms('addOthers')"
+            [formGroup]="candidatesForm"
-                ngDefaultControl
-                listname="{{ 'Select a new candidate' | translate }}"
-                [formControl]="candidatesForm.get('userId')"
-                [InputListValues]="filteredCandidates"
-                [form]="candidatesForm"
-                [multiple]="false"
         >
-                <!-- TODO: better class here: wider -->
+            <os-search-value-selector
-                <!-- TODO: Performance check: something seems off here with filteredCandidates -->
+                class="search-bar"
-            </os-search-value-selector>
+                ngDefaultControl
+                [form]="candidatesForm"
+                [formControl]="candidatesForm.get('userId')"
+                [multiple]="false"
+                listname="{{ 'Select a new candidate' | translate }}"
+                [InputListValues]="filteredCandidates"
+            ></os-search-value-selector>
         </form>
     </div>
+
     <!-- Add me and remove me if OP has correct permission -->
     <div *ngIf="assignment && hasPerms('addSelf') && assignment.candidates" class="add-self-buttons">
         <div>
@@ -179,17 +187,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 +213,7 @@
                     />
                 </mat-form-field>
             </div>
-
+            <h4 translate>Description:</h4>
             <!-- description: HTML Editor -->
             <editor
                 formControlName="description"
@@ -215,17 +221,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 +271,5 @@
             </div>
             <!-- TODO searchValueSelector: Parent -->
         </form>
-    </div>
+    </mat-card>
 </ng-template>

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

@@ -31,3 +31,14 @@
 .add-self-buttons {
     padding: 15px 0 20px 25px;
 }
+
+.search-field {
+    margin: 20px 0;
+
+    .search-bar {
+        display: grid;
+        .mat-form-field {
+            width: 100%;
+        }
+    }
+}

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,16 +458,12 @@ 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) {
+        if (!poll.published && this.hasPerms('manage')) {
-            return title + ` (${this.translate.instant('published')})`;
-        } else {
-            if (this.hasPerms('manage')) {
             return title + ` (${this.translate.instant('unpublished')})`;
         } else {
             return title;
         }
     }
-    }
 
     /**
      * Triggers an update of the filter for the list of available candidates
@@ -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`;
+    }
 }

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>
@@ -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>