Add checkbox to hide published tests #673

src/app/events/components/test-edit-grades/test-edit-grades.component.html

@@ -11,29 +11,11 @@
     <table class="table table-hover h-100">
       <thead class="h-100">
         <tr class="h-100 header-collapsible">
-          <th class="desktop pt-3 sticky" colspan="3">
-            <button
-              type="button"
-              class="btn desktop"
-              (click)="changeFilter('all-tests')"
-              [ngClass]="{
-                'btn-primary': data.filter === 'all-tests',
-                'btn-outline-secondary': data.filter !== 'all-tests'
-              }"
-            >
-              {{ "tests.all-tests" | translate }}
-            </button>
-            <button
-              type="button"
-              class="btn ms-2 desktop"
-              (click)="changeFilter('my-tests')"
-              [ngClass]="{
-                'btn-primary': data.filter === 'my-tests',
-                'btn-outline-secondary': data.filter !== 'my-tests'
-              }"
-            >
-              {{ "tests.owned-tests" | translate }}
-            </button>
+          <th class="desktop sticky" colspan="3">
+            <bkd-test-table-filter
+              [filter]="data.filter"
+              (filterChange)="state.setFilter($event)"
+            ></bkd-test-table-filter>
           </th>
           <th
             *ngFor="let test of data.tests"

src/app/events/components/test-edit-grades/test-edit-grades.component.spec.ts

@@ -3,7 +3,10 @@ import { BehaviorSubject, of } from "rxjs";
 import { Test } from "src/app/shared/models/test.model";
 import { buildCourse, buildResult, buildTest } from "src/spec-builders";
 import { buildTestModuleMetadata } from "src/spec-helpers";
-import { TestStateService } from "../../services/test-state.service";
+import {
+  INITIAL_TESTS_FILTER,
+  TestStateService,
+} from "../../services/test-state.service";
 import { TestEditGradesComponent } from "./test-edit-grades.component";
 
 describe("TestEditGradesComponent", () => {
@@ -34,6 +37,7 @@ describe("TestEditGradesComponent", () => {
     testStateServiceMock.hasTests$ = hasTests$;
     canSetFinalGrade$ = new BehaviorSubject(true);
     testStateServiceMock.canSetFinalGrade$ = canSetFinalGrade$;
+    testStateServiceMock.filter$ = of(INITIAL_TESTS_FILTER);
 
     TestBed.configureTestingModule(
       buildTestModuleMetadata({

src/app/events/components/test-edit-grades/test-edit-grades.component.ts

@@ -16,12 +16,13 @@ import { LetDirective } from "../../../shared/directives/let.directive";
 import { Test } from "../../../shared/models/test.model";
 import { DecimalOrDashPipe } from "../../../shared/pipes/decimal-or-dash.pipe";
 import { EventsStateService } from "../../services/events-state.service";
-import { Filter, TestStateService } from "../../services/test-state.service";
+import { TestStateService } from "../../services/test-state.service";
 import { getEventState } from "../../utils/events";
 import { averageGrade, averagePoints } from "../../utils/tests";
 import { GradeComponent } from "../grade/grade.component";
 import { AverageGradesComponent } from "../grades/average-grades/average-grades.component";
 import { GradeSelectComponent } from "../grades/grade-select/grade-select.component";
+import { TestTableFilterComponent } from "../test-table-filter/test-table-filter.component";
 import { TestTableHeaderComponent } from "../test-table-header/test-table-header.component";
 
 @Component({
@@ -34,6 +35,7 @@ import { TestTableHeaderComponent } from "../test-table-header/test-table-header
     LetDirective,
     NgClass,
     NgFor,
+    TestTableFilterComponent,
     TestTableHeaderComponent,
     NgIf,
     RouterLink,
@@ -58,10 +60,6 @@ export class TestEditGradesComponent implements OnInit {
     this.state.setSorting({ key: "FullName", ascending: true });
   }
 
-  changeFilter(filter: Filter) {
-    this.state.filter$.next(filter);
-  }
-
   setAverageAsFinalGrade() {
     this.state.course$
       .pipe(take(1))

src/app/events/components/test-table-filter/test-table-filter.component.html

@@ -0,0 +1,38 @@
+<div class="only-mine-buttons">
+  <button
+    type="button"
+    class="btn desktop"
+    (click)="showAll()"
+    [ngClass]="{
+      'btn-primary': !filter.onlyMine,
+      'btn-outline-secondary': filter.onlyMine
+    }"
+  >
+    {{ "tests.all-tests" | translate }}
+  </button>
+  <button
+    type="button"
+    class="btn ms-2 desktop"
+    (click)="showOnlyMine()"
+    [ngClass]="{
+      'btn-primary': filter.onlyMine,
+      'btn-outline-secondary': !filter.onlyMine
+    }"
+  >
+    {{ "tests.owned-tests" | translate }}
+  </button>
+</div>
+<div class="hide-published">
+  <div class="form-check">
+    <input
+      id="hide-published"
+      class="form-check-input"
+      type="checkbox"
+      [checked]="filter.hidePublished"
+      (change)="onHidePublishedChange($event)"
+    />
+    <label class="form-check-label" for="hide-published">
+      {{ "tests.hide-published" | translate }}
+    </label>
+  </div>
+</div>

src/app/events/components/test-table-filter/test-table-filter.component.scss

@@ -0,0 +1,29 @@
+@import "../../../../bootstrap-variables";
+
+:host {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.only-mine-buttons {
+  display: flex;
+  align-items: center;
+  height: calc($font-size-base * $line-height-base + 2 * 1rem);
+}
+
+.hide-published {
+  display: flex;
+  align-items: center;
+  height: calc($btn-font-size * $btn-line-height + 2 * $btn-padding-y);
+  margin-bottom: 1rem;
+}
+
+.hide-published label {
+  font-weight: $font-weight-base;
+}
+
+.hide-published .form-check {
+  margin-bottom: 0;
+}

src/app/events/components/test-table-filter/test-table-filter.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { buildTestModuleMetadata } from "src/spec-helpers";
+import { TestTableFilterComponent } from "./test-table-filter.component";
+
+describe("TestTableFilterComponent", () => {
+  let component: TestTableFilterComponent;
+  let fixture: ComponentFixture<TestTableFilterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule(
+      buildTestModuleMetadata({
+        imports: [TestTableFilterComponent],
+      }),
+    ).compileComponents();
+
+    fixture = TestBed.createComponent(TestTableFilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/events/components/test-table-filter/test-table-filter.component.ts

@@ -0,0 +1,37 @@
+import { NgClass } from "@angular/common";
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import {
+  INITIAL_TESTS_FILTER,
+  TestsFilter,
+} from "../../services/test-state.service";
+
+@Component({
+  selector: "bkd-test-table-filter",
+  standalone: true,
+  imports: [NgClass, FormsModule, TranslateModule],
+  templateUrl: "./test-table-filter.component.html",
+  styleUrl: "./test-table-filter.component.scss",
+})
+export class TestTableFilterComponent {
+  @Input() filter: TestsFilter = INITIAL_TESTS_FILTER;
+  @Output() filterChange = new EventEmitter<TestsFilter>();
+
+  showOnlyMine(): void {
+    this.filterChange.next({ ...this.filter, onlyMine: true });
+  }
+
+  showAll(): void {
+    this.filterChange.next({ ...this.filter, onlyMine: false });
+  }
+
+  onHidePublishedChange(event: Event): void {
+    const hidePublished =
+      (event.target &&
+        event.target instanceof HTMLInputElement &&
+        event.target?.checked) ??
+      false;
+    this.filterChange.next({ ...this.filter, hidePublished });
+  }
+}

src/app/events/components/tests-list/tests-list.component.spec.ts

@@ -5,7 +5,10 @@ import { Result, Test } from "src/app/shared/models/test.model";
 import { ReportsService } from "src/app/shared/services/reports.service";
 import { buildTestModuleMetadata } from "src/spec-helpers";
 import { buildCourse, buildResult, buildTest } from "../../../../spec-builders";
-import { TestStateService } from "../../services/test-state.service";
+import {
+  INITIAL_TESTS_FILTER,
+  TestStateService,
+} from "../../services/test-state.service";
 import { TestsListComponent } from "./tests-list.component";
 
 describe("TestsListComponent", () => {
@@ -45,6 +48,7 @@ describe("TestsListComponent", () => {
       hasTests$: hasTests$.asObservable(),
       course$: of(course),
       canSetFinalGrade$: canSetFinalGrade$.asObservable(),
+      filter$: of(INITIAL_TESTS_FILTER),
     } as unknown as TestStateService;
 
     const reportServiceMock = jasmine.createSpyObj("reportService", [

src/app/events/services/test-state.service.ts

@@ -42,7 +42,15 @@ import { TestsAction, courseReducer } from "../utils/course-reducer";
 import { canSetFinalGrade } from "../utils/events";
 import { findResult, sortByDate } from "../utils/tests";
 
-export type Filter = "all-tests" | "my-tests";
+export interface TestsFilter {
+  onlyMine: boolean;
+  hidePublished: boolean;
+}
+
+export const INITIAL_TESTS_FILTER: TestsFilter = {
+  onlyMine: false,
+  hidePublished: false,
+};
 
 export type GradingScaleOptions = {
   [id: number]: DropDownItem[];
@@ -103,21 +111,20 @@ export class TestStateService {
   );
   hasTests$ = this.tests$.pipe(map((tests) => tests.length > 0));
 
-  filter$: BehaviorSubject<Filter> = new BehaviorSubject<Filter>("all-tests");
-
-  expandedHeader$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(
-    false,
+  private filterSubject$ = new BehaviorSubject<TestsFilter>(
+    INITIAL_TESTS_FILTER,
   );
+  filter$ = this.filterSubject$.asObservable();
+
+  expandedHeader$ = new BehaviorSubject<boolean>(false);
 
   filteredTests$ = combineLatest([this.tests$, this.filter$]).pipe(
     map(([tests, filter]) =>
-      tests.filter((test) => {
-        if (filter === "all-tests") {
-          return true;
-        } else {
-          return test.IsOwner;
-        }
-      }),
+      tests.filter(
+        (test) =>
+          (!filter.onlyMine || test.IsOwner) &&
+          (!filter.hidePublished || !test.IsPublished),
+      ),
     ),
   );
 
@@ -198,6 +205,10 @@ export class TestStateService {
     this._courseId$.next(id);
   }
 
+  setFilter(filter: TestsFilter) {
+    this.filterSubject$.next(filter);
+  }
+
   gradingOptionsForTest$(test: Test) {
     return this.gradingOptions$(test.GradingScaleId);
   }

src/assets/locales/de-CH.json

@@ -265,6 +265,7 @@
     "edit": "bearbeiten",
     "all-tests": "Alle Tests",
     "owned-tests": "Meine Tests",
+    "hide-published": "Publizierte Tests ausblenden",
     "points": "Punkte",
     "summary": {
       "points": "Punkte"

src/assets/locales/fr-CH.json

@@ -265,6 +265,7 @@
     "edit": "traiter",
     "all-tests": "Tous les tests",
     "owned-tests": "Mes tests",
+    "hide-published": "Masquer tests publiés",
     "points": "Points",
     "summary": {
       "points": "points"

src/styles.scss

@@ -13,7 +13,6 @@
 @import "src/app/shared/styles/typography";
 @import "src/app/shared/styles/container";
 @import "src/app/shared/styles/table";
-@import "src/app/shared/styles/form";
 @import "src/app/shared/styles/links";
 @import "src/app/shared/styles/button";
 @import "src/app/shared/styles/datepicker";