Add publicationFormat and publicationAudience filters

src/app/portal/components/filter-option/filter-option.component.html

@@ -0,0 +1,15 @@
+<div class='filter-option-layout' (click)='toggleValue()' matRipple>
+  <div style='margin-right: 0.5rem'>
+    <input type='checkbox' [ngModel]='value'>
+  </div>
+
+  <div style='display: flex; flex-grow: 1; justify-content: space-between'>
+    <div>
+      {{label}}
+    </div>
+
+    <div>
+      ({{count}})
+    </div>
+  </div>
+</div>

src/app/portal/components/filter-option/filter-option.component.scss

@@ -0,0 +1,16 @@
+.label-text {
+  text-overflow: ellipsis;
+  flex-shrink: 1;
+}
+
+.filter-option-layout {
+  display: flex;
+  align-items: center;
+  padding: 16px 12px;
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+}

src/app/portal/components/filter-option/filter-option.component.ts

@@ -0,0 +1,26 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatRippleModule } from '@angular/material/core';
+
+@Component({
+  selector: 'app-filter-option',
+  templateUrl: './filter-option.component.html',
+  styleUrls: ['./filter-option.component.scss'],
+  imports: [
+    FormsModule,
+    MatRippleModule
+  ],
+  standalone: true
+})
+export class FilterOptionComponent {
+  @Input() label = "";
+  @Input() count = 0;
+
+  @Input() value: boolean = false;
+  @Output() valueChange = new EventEmitter<boolean>();
+
+  toggleValue() {
+    this.value = !this.value;
+    this.valueChange.emit(this.value);
+  }
+}

src/app/portal/components/organization-filter/organization-filter.component.html

@@ -0,0 +1,54 @@
+<div style="background-color: lightcoral">
+  <ng-container *ngIf='expanded === true'>
+  <div class='filter-heading' (click)='toggleExpanded()'>
+    - Organisaatio
+  </div>
+
+    <cdk-accordion class="example-accordion">
+      <cdk-accordion-item *ngFor="let sectorId of [1,2,3,4,6]; let index = index;" #accordionItem="cdkAccordionItem"
+                          class="example-accordion-item" role="button" tabindex="0"
+                          [attr.id]="'accordion-header-' + index" [attr.aria-expanded]="accordionItem.expanded" [attr.aria-controls]="'accordion-body-' + index">
+
+        <div class="example-accordion-item-header" (click)="accordionItem.toggle()">
+          <div class='filter-heading'>{{sectorNames[sectorId]}}</div>
+
+          <span class="example-accordion-item-description">{{ accordionItem.expanded ? 'close' : 'open' }}</span>
+        </div>
+
+        <div class="example-accordion-item-body" role="region" [style.display]="accordionItem.expanded ? '' : 'none'" [attr.id]="'accordion-body-' + index" [attr.aria-labelledby]="'accordion-header-' + index">
+          <div><input type='checkbox'>Valitse kaikki</div>
+
+          <input type='text' [(ngModel)]='sectorFilter[sectorId]'>
+
+          <ng-container *ngFor='let organizationFilter of filterData
+            | filterBy: ["sectorId"]: sectorId
+            | filterBy: ["name"]: sectorFilter[sectorId]
+            | limit: sectorLimits[sectorId]'>
+
+            <app-filter-option
+              [label]='organizationFilter.name'
+              [count]='organizationFilter.count'
+              [value]='organizationFilter.enabled'
+              (valueChange)='selected.emit(organizationFilter.id)'>
+            </app-filter-option>
+
+          </ng-container>
+
+          <!-- TODO Over 10? grow limit -->
+          <!-- TODO Also shrink limit  -->
+        </div>
+
+      </cdk-accordion-item>
+    </cdk-accordion>
+  </ng-container>
+
+  <ng-container *ngIf='expanded === false'>
+    <div class='filter-heading' (click)='toggleExpanded()'>
+      + Organisaatio
+    </div>
+  </ng-container>
+</div>
+
+
+
+

src/app/portal/components/organization-filter/organization-filter.component.scss

@@ -0,0 +1,53 @@
+.example-accordion {
+  display: block;
+  max-width: 500px;
+}
+
+.example-accordion-item {
+  display: block;
+  border: solid 1px #ccc;
+}
+
+.example-accordion-item + .example-accordion-item {
+  border-top: none;
+}
+
+.example-accordion-item-header {
+  display: flex;
+  align-content: center;
+  justify-content: space-between;
+}
+
+.example-accordion-item-description {
+  font-size: 0.85em;
+  color: #999;
+}
+
+/*.example-accordion-item-header,
+.example-accordion-item-body {
+  padding: 16px;
+}*/
+
+.example-accordion-item-header:hover {
+  cursor: pointer;
+  background-color: #eee;
+}
+
+.example-accordion-item:first-child {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
+.example-accordion-item:last-child {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+/**/
+
+.filter-heading {
+  font-size: 17.6px;
+  font-weight: 700;
+
+  padding: 11px 16px;
+}

src/app/portal/components/organization-filter/organization-filter.component.ts

@@ -0,0 +1,51 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
+import { FilterOptionComponent } from '@portal/components/filter-option/filter-option.component';
+import { NgArrayPipesModule } from 'ngx-pipes';
+import { FormsModule } from '@angular/forms';
+import { LimitPipe } from '@portal/pipes/limit.pipe';
+import { CdkAccordionModule } from '@angular/cdk/accordion';
+
+@Component({
+  selector: 'app-organization-filter',
+  templateUrl: './organization-filter.component.html',
+  styleUrls: ['./organization-filter.component.scss'],
+  imports: [
+    NgIf,
+    AsyncPipe,
+    FilterOptionComponent,
+    LimitPipe,
+    NgArrayPipesModule,
+    NgForOf,
+    FormsModule,
+    CdkAccordionModule
+  ],
+  standalone: true
+})
+export class OrganizationFilterComponent {
+  @Input() filterData: unknown;
+  @Output() selected = new EventEmitter<string>();
+
+  expanded = false;
+  sectorFilter: Record<number, string> = {};
+
+  sectorLimits: Record<number, number> = {
+    1: 10,
+    2: 10,
+    3: 10,
+    4: 10,
+    6: 10,
+  };
+
+  public sectorNames = {
+    1: "Yliopisto",
+    2: "Ammattikorkeakoulu",
+    3: "Tutkimuslaitos",
+    4: "Yliopistollisen sairaalan erityisvastuualue",
+    6: "Muu"
+  }
+
+  toggleExpanded() {
+    this.expanded = !this.expanded;
+  }
+}

src/app/portal/components/results/publications2/publications2.component.html

@@ -81,41 +81,50 @@ <h2>Julkaisut - {{total$ | async}}</h2>
           </ng-container>
         </div>
 
-        <div style='margin-bottom: 1rem'></div> <!-- TODO DELETE -->
-        <input type='text' [(ngModel)]='organizationName'>
-        <div style='margin-bottom: 1rem'></div> <!-- TODO DELETE -->
+        <!-- TODO DELETE -->
+        <div style='margin: 1rem'></div>
 
-        <!--<div style='white-space: pre'>{{organizationFilters$ | async | json}}</div>--> <!-- TODO DELETE -->
+        <app-organization-filter [filterData]='organizationFilters$ | async' (selected)='toggleParam("organization", $event)'></app-organization-filter>
 
-        <div style='background-color: #e6f9ff; border-radius: 4px'>
-          <ng-container *ngFor='let sectorId of [1,2,3,4,6]'>
-            <h2>{{sectorName[sectorId]}}</h2>
-
-            <ng-container *ngFor='let organizationFilter of organizationFilters$
-                | async
-                | filterBy: ["sectorId"]: sectorId
-                | filterBy: ["name"]: organizationName
-                | limit: 10'>
-
-              <div style='display: flex; align-items: center; padding: 16px 12px; cursor: pointer' (click)='toggleParam("organization", organizationFilter.id)'>
-                <div style='margin-right: 0.5rem'>
-                  <input type='checkbox' [ngModel]='organizationFilter.enabled'>
-                </div>
+        <!-- TODO DELETE -->
+        <div style='margin: 1rem'></div>
 
-                <div style='display: flex; flex-grow: 1; justify-content: space-between'>
-                  <div>
-                    {{organizationFilter.name}}
-                  </div>
+        <div style='background-color: lightgoldenrodyellow'>
+          <ng-container *ngFor='let languageCodeFilter of languageCodeFilters$ | async'>
+            <app-filter-option [label]='languageCodeFilter.name'
+                               [count]='languageCodeFilter.count'
+                               [value]='languageCodeFilter.enabled'
+                               (valueChange)='toggleParam("language", languageCodeFilter.name)'>
+            </app-filter-option>
+          </ng-container>
+        </div>
 
-                  <div>
-                    ({{organizationFilter.count}})
-                  </div>
-                </div>
-              </div>
+        <!-- TODO DELETE -->
+        <div style='margin: 1rem'></div>
+
+        <div style='background-color: blanchedalmond'>
+          <div style='white-space: pre'>
+            <ng-container *ngFor='let publicationFormatFilter of publicationFormatFilters$ | async'>
+              <app-filter-option [label]='publicationFormatFilter.name'
+                                 [count]='publicationFormatFilter.count'
+                                 [value]='publicationFormatFilter.enabled'
+                                 (valueChange)='toggleParam("format", publicationFormatFilter.id)'>
+              </app-filter-option>
             </ng-container>
-          </ng-container>
+          </div>
+        </div>
 
+        <!-- TODO DELETE -->
+        <div style='margin: 1rem'></div>
 
+        <div style='background-color: lightpink'>
+          <ng-container *ngFor='let publicationAudienceFilter of publicationAudienceFilters$ | async'>
+            <app-filter-option [label]='publicationAudienceFilter.name'
+                               [count]='publicationAudienceFilter.count'
+                               [value]='publicationAudienceFilter.enabled'
+                               (valueChange)='toggleParam("audience", publicationAudienceFilter.id)'>
+            </app-filter-option>
+          </ng-container>
         </div>
 
       </div>