diff --git a/src/app/group-monitor/group-monitor.component.html b/src/app/group-monitor/group-monitor.component.html
index 82d43472858f5e02416b82ce2995b1a3d027ecd8..fb5f332797fa100036531776441c955d01d40d71 100644
--- a/src/app/group-monitor/group-monitor.component.html
+++ b/src/app/group-monitor/group-monitor.component.html
@@ -80,7 +80,7 @@
<div class="toolbar-section">
<button mat-raised-button class="control" color="primary" (click)="testCommandGoto()"
- [disabled]="!selectedElement || sessionCheckedGroupCount !== 1">
+ [disabled]="!selectedElement?.element || sessionCheckedGroupCount !== 1">
<mat-icon>arrow_forward</mat-icon>SPRINGE ZU
<span class="emph">{{selectedElement?.element?.label || selectedElement?.element?.id}}</span>
</button>
@@ -125,7 +125,7 @@
</button>
</div>
- <div class="test-view-table-wrapper" (click)="selectElement({element: null, spreading: true, contextBookletId: ''})">
+ <div class="test-view-table-wrapper">
<table class="test-view-table" matSort (matSortChange)="setTableSorting($event)">
<thead>
@@ -140,13 +140,13 @@
</tr>
</thead>
- <ng-container *ngFor="let session of sessions$ | async; trackBy: trackSession as sessionSuperId">
+ <ng-container *ngFor="let session of sessions$ | async; trackBy: trackSession">
<tc-test-view
[testSession]="session"
[displayOptions]="displayOptions"
[markedElement]="markedElement"
(markedElement$)="markElement($event)"
- [selectedElement]="selectedElement?.element"
+ [selected]="selectedElement"
(selectedElement$)="selectElement($event)"
(bookletId$)="adjustViewModeOnBookletLoad($event)"
[checked]="isChecked(session)"
diff --git a/src/app/group-monitor/group-monitor.component.ts b/src/app/group-monitor/group-monitor.component.ts
index 9f6859aa3fa5e6bb63862fcd273e7e2f114ceb94..731f4fc92f692248c2ba85ee86a9dbace3143482 100644
--- a/src/app/group-monitor/group-monitor.component.ts
+++ b/src/app/group-monitor/group-monitor.component.ts
@@ -41,7 +41,11 @@ export class GroupMonitorComponent implements OnInit, OnDestroy {
selectionSpreading: 'booklet'
};
- selectedElement: Selected = null;
+ selectedElement: Selected = {
+ contextBookletId: '',
+ element: undefined,
+ spreading: false
+ };
markedElement: Testlet|Unit|null = null;
checkedSessions: {[sessionTestSessionId: number]: TestSession} = {};
allSessionsChecked = false;
diff --git a/src/app/group-monitor/test-view/test-view.component.html b/src/app/group-monitor/test-view/test-view.component.html
index 78937c3a0b5f1c6e0b629762e0a12028e210d8d7..a0c38fa123d66cbe27e9b5e16763cbf9c06b5420 100644
--- a/src/app/group-monitor/test-view/test-view.component.html
+++ b/src/app/group-monitor/test-view/test-view.component.html
@@ -8,7 +8,7 @@
</td>
-<td>
+<td (click)="deselect($event)">
<div class="vertical-align-middle">
<ng-container *ngIf="getMode(testSession.mode) as mode" >
@@ -25,11 +25,11 @@
</td>
-<td *ngIf="displayOptions.groupColumn === 'show'">
+<td *ngIf="displayOptions.groupColumn === 'show'" (click)="deselect($event)">
<div class="vertical-align-middle">{{testSession.groupLabel}}</div>
</td>
-<td class="booklet">
+<td class="booklet" (click)="deselect($event)">
<ng-container *ngIf="(booklet$ | async) as booklet">
<ng-container *ngIf="isBooklet(booklet); else: noBooklet">
@@ -74,7 +74,7 @@
</ng-template>
</td>
-<td class="activity">
+<td class="activity" (click)="deselect($event)">
<ng-container *ngIf="(booklet$ | async) as booklet">
<ng-container *ngIf="isBooklet(booklet); else: noBookletReason">
@@ -83,6 +83,7 @@
[class]="hasState(testSession.testState, 'status', 'locked') ? 'locked' : ''"
[ngSwitch]="displayOptions.view"
(mouseleave)="mark()"
+ (click)="deselect($event)"
>
<div class="units full" *ngSwitchCase="'full'" >
<ng-container *ngTemplateOutlet="testletFull; context: {$implicit: testlet}"></ng-container>
@@ -171,7 +172,7 @@
[class]="{
unit: true,
current: testSession.unitName === testletOrUnit.id,
- selected: selectedElement?.id === testletOrUnit.id,
+ selected: (selected?.element?.id === testletOrUnit.id) && checked,
marked: markedElement?.id === testletOrUnit.id
}"
(mouseenter)="mark(testletOrUnit)"
@@ -184,7 +185,7 @@
<span *ngSwitchCase="'testlet'"
[class]="{
testlet: true,
- selected: selectedElement?.id === testletOrUnit.id,
+ selected: (selected?.element?.id === testletOrUnit.id) && checked,
marked: markedElement?.id === testletOrUnit.id
}"
(mouseenter)="mark(testletOrUnit)"
@@ -233,7 +234,7 @@
unit: true,
aggregated: true,
current: true,
- selected: selectedElement?.id === testletOrUnit.id,
+ selected: (selected?.element?.id === testletOrUnit.id) && checked,
marked: markedElement?.id === testletOrUnit.id
}"
matTooltip="{{featuredUnit.unit.label}}"
@@ -249,7 +250,7 @@
[class]="{
unit: true,
aggregated: true,
- selected: selectedElement?.id === testletOrUnit.id,
+ selected: (selected?.element?.id === testletOrUnit.id) && checked,
marked: markedElement?.id === testletOrUnit.id
}"
(mouseenter)="mark(testletOrUnit)"
diff --git a/src/app/group-monitor/test-view/test-view.component.ts b/src/app/group-monitor/test-view/test-view.component.ts
index 6893673c1630e6fd4de92a95ec35a20911cd578c..efefd6f1f885fe5c0161972fc477f430397dcdab 100644
--- a/src/app/group-monitor/test-view/test-view.component.ts
+++ b/src/app/group-monitor/test-view/test-view.component.ts
@@ -23,7 +23,11 @@ export class TestViewComponent implements OnInit, OnChanges, OnDestroy {
@Input() testSession: TestSession;
@Input() displayOptions: TestViewDisplayOptions;
@Input() markedElement: Testlet|Unit|null = null;
- @Input() selectedElement: Testlet|Unit|null = null;
+ @Input() selected: Selected = {
+ contextBookletId: '',
+ element: undefined,
+ spreading: false
+ };
@Input() checked: boolean;
@Output() bookletId$ = new EventEmitter<string>();
@@ -38,7 +42,6 @@ export class TestViewComponent implements OnInit, OnChanges, OnDestroy {
public maxTimeLeft: object|null; // TODO make observable maybe
private bookletSubscription: Subscription;
- private selectedElementSpreading = true;
constructor(
private bookletsService: BookletService,
@@ -203,30 +206,39 @@ export class TestViewComponent implements OnInit, OnChanges, OnDestroy {
}
select($event: Event, testletOrUnit: Testlet|Unit|null) {
- console.log(
- 'SELECT',
- this.selectedElement !== null ? this.selectedElement.id : null,
- testletOrUnit !== null ? testletOrUnit.id : null
- );
-
if ((isUnit(testletOrUnit) ? 'unit' : 'block') !== this.displayOptions.selectionMode) {
return;
}
$event.stopPropagation();
- this.selectedElement = testletOrUnit;
+ this.applySelection(testletOrUnit);
+ }
+
+ deselect($event: MouseEvent) {
+ if ($event.currentTarget === $event.target) {
+ this.applySelection();
+ }
+ }
- this.selectedElementSpreading = (this.selectedElement != null) && (this.selectedElement.id === testletOrUnit.id)
- ? !this.selectedElementSpreading
- : true;
+ private applySelection(testletOrUnit: Testlet|Unit|null = null) {
- this.selectedElement$.emit({
- element: this.selectedElement,
+
+ console.log(
+ 'a',
+ (this.selected != null),
+ 'b',
+ (this.selected?.element?.id === testletOrUnit?.id),
+ this.selected?.element?.id , testletOrUnit?.id
+ );
+ this.selected = {
+ element: testletOrUnit,
contextBookletId: this.testSession.bookletName,
session: this.testSession,
- spreading: this.selectedElementSpreading
- });
+ spreading: (this.selected?.element?.id === testletOrUnit?.id) ? !this.selected?.spreading : true
+ };
+
+ this.selectedElement$.emit(this.selected);
}
check($event: MatCheckboxChange) {