update issues filter

src/ipa-bcfier-ui/src/app/components/bcf-file/bcf-file.component.html

@@ -1,65 +1,90 @@
 <div class="wrapper">
   <div class="issue-list">
-    <div class="issue-list-buttons">
-      <button mat-raised-button color="primary" (click)="addIssue()">
-        Add Issue
-      </button>
-      <button
-        mat-raised-button
-        color="warn"
-        [disabled]="!selectedTopic"
-        (click)="removeIssue()"
-      >
-        Delete Issue
-      </button>
-    </div>
-    <div>
-      <mat-form-field class="dark-theme">
-        <mat-label>Search</mat-label>
-        <input
-          matInput
-          placeholder="Title or description"
-          [(ngModel)]="search"
-        />
-        @if (search) {
-        <button matSuffix mat-icon-button (click)="search = ''">
-          <mat-icon>close</mat-icon>
-        </button>
-        }
-      </mat-form-field>
-    </div>
-    <div class="topic-list">
-      <mat-card
-        *ngFor="let topic of bcfFile.topics | topicFilter : search"
-        (click)="selectTopic(topic)"
-      >
-        <mat-progress-bar
-          mode="determinate"
-          [color]="selectedTopic?.id === topic.id ? 'primary' : 'accent'"
-          value="100"
-        ></mat-progress-bar>
-        <mat-card-header>
-          <mat-card-title-group>
-            <mat-card-title>{{ topic.title }}</mat-card-title>
-            <mat-card-subtitle>{{
-              topic.creationDate | date : "dd.MM.yyyy"
-            }}</mat-card-subtitle>
-
-            <img mat-card-md-image [bcfierTopicPreviewImage]="topic" />
-          </mat-card-title-group>
-        </mat-card-header>
-        <mat-card-content>
-          <div class="topic-info dark-theme">
-            <mat-icon color="primary">chat</mat-icon>
-            {{ topic.comments.length }}
+    <mat-drawer-container [hasBackdrop]="true">
+      <mat-drawer #drawer mode="over">
+        <div class="filter-container">
+          <bcfier-issue-filters
+            [issueStatuses$]="issueStatuses$"
+            [issueTypes$]="issueTypes$"
+            [users$]="users$"
+            (acceptedFilters)="filterIssues($event); drawer.close()"
+          ></bcfier-issue-filters>
+        </div>
+      </mat-drawer>
+      <mat-drawer-content>
+        <div #filterWrap>
+          <div class="issue-list-buttons">
+            <button mat-raised-button color="primary" (click)="addIssue()">
+              Add Issue
+            </button>
+            <button
+              mat-raised-button
+              color="warn"
+              [disabled]="!selectedTopic"
+              (click)="removeIssue()"
+            >
+              Delete Issue
+            </button>
           </div>
-          <div class="topic-info dark-theme">
-            <mat-icon color="primary">visibility</mat-icon>
-            {{ topic.viewpoints.length }}
+
+          <div class="filter-wrapper">
+            <mat-form-field class="dark-theme">
+              <mat-label>Search</mat-label>
+              <input
+                matInput
+                placeholder="Title or description"
+                [(ngModel)]="search"
+              />
+              @if (search) {
+              <button matSuffix mat-icon-button (click)="search = ''">
+                <mat-icon>close</mat-icon>
+              </button>
+              }
+            </mat-form-field>
+            <mat-icon (click)="drawer.toggle()">filter_list</mat-icon>
           </div>
-        </mat-card-content>
-      </mat-card>
-    </div>
+        </div>
+
+        <div
+          class="topic-list"
+          [style.height]="
+            'calc(100% - ' + filterWrap.offsetHeight + 'px - 20px)'
+              | bcfierSafeUrl : 'style'
+          "
+        >
+          <mat-card
+            *ngFor="let topic of filtredTopics | topicFilter : search"
+            (click)="selectTopic(topic)"
+          >
+            <mat-progress-bar
+              mode="determinate"
+              [color]="selectedTopic?.id === topic.id ? 'primary' : 'accent'"
+              value="100"
+            ></mat-progress-bar>
+            <mat-card-header>
+              <mat-card-title-group>
+                <mat-card-title>{{ topic.title }}</mat-card-title>
+                <mat-card-subtitle>{{
+                  topic.creationDate | date : "dd.MM.yyyy"
+                }}</mat-card-subtitle>
+
+                <img mat-card-md-image [bcfierTopicPreviewImage]="topic" />
+              </mat-card-title-group>
+            </mat-card-header>
+            <mat-card-content>
+              <div class="topic-info dark-theme">
+                <mat-icon color="primary">chat</mat-icon>
+                {{ topic.comments.length }}
+              </div>
+              <div class="topic-info dark-theme">
+                <mat-icon color="primary">visibility</mat-icon>
+                {{ topic.viewpoints.length }}
+              </div>
+            </mat-card-content>
+          </mat-card>
+        </div>
+      </mat-drawer-content>
+    </mat-drawer-container>
   </div>
   <div class="issue-details">
     <bcfier-topic-detail

src/ipa-bcfier-ui/src/app/components/bcf-file/bcf-file.component.scss

@@ -9,7 +9,6 @@
   margin-top: 4px;
   margin-left: 4px;
   display: flex;
-  flex-direction: column;
   width: 30%;
   height: 100%;
   overflow: auto;
@@ -30,6 +29,7 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
+  overflow: auto;
 }
 
 mat-form-field {
@@ -53,3 +53,28 @@ mat-card-content {
   width: 70%;
   overflow: auto;
 }
+
+.filter-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+}
+
+mat-drawer-container {
+  width: 100%;
+}
+
+mat-drawer {
+  width: 90%;
+  padding: 5px;
+}
+
+mat-drawer-content {
+  padding: 10px;
+  overflow: hidden;
+}
+
+.filter-container {
+  height: inherit;
+}

src/ipa-bcfier-ui/src/app/components/bcf-file/bcf-file.component.ts

@@ -1,8 +1,8 @@
 import { BcfFile, BcfTopic } from '../../../generated/models';
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormControl, FormGroup, FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
@@ -12,6 +12,16 @@ import { TopicDetailComponent } from '../topic-detail/topic-detail.component';
 import { TopicFilterPipe } from '../../pipes/topic-filter.pipe';
 import { TopicPreviewImageDirective } from '../../directives/topic-preview-image.directive';
 import { getNewRandomGuid } from '../../functions/uuid';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import {
+  IFilters,
+  IssueFiltersComponent,
+} from '../issue-filters/issue-filters.component';
+import { SafeUrlPipe } from '../../pipes/safe-url.pipe';
+import { IssueStatusesService } from '../../services/issue-statuses.service';
+import { IssueTypesService } from '../../services/issue-types.service';
+import { UsersService } from '../../services/users.service';
+import { IssueFilterService } from '../../services/issue-filter.service';
 
 @Component({
   selector: 'bcfier-bcf-file',
@@ -27,17 +37,25 @@ import { getNewRandomGuid } from '../../functions/uuid';
     TopicFilterPipe,
     MatProgressBarModule,
     TopicDetailComponent,
+    MatSidenavModule,
+    IssueFiltersComponent,
+    SafeUrlPipe,
   ],
   templateUrl: './bcf-file.component.html',
   styleUrl: './bcf-file.component.scss',
 })
 export class BcfFileComponent {
   @Input() bcfFile!: BcfFile;
-
+  issueStatuses$ = inject(IssueStatusesService).issueStatuses;
+  issueTypes$ = inject(IssueTypesService).issueTypes;
+  users$ = inject(UsersService).users;
+  issueFilterService = inject(IssueFilterService);
   selectedTopic: BcfTopic | null = null;
+  filtredTopics: BcfTopic[] = [];
 
   ngOnInit() {
     this.selectedTopic = this.bcfFile.topics[0] || null;
+    this.filtredTopics = [...this.bcfFile.topics];
   }
 
   private _search = '';
@@ -93,4 +111,34 @@ export class BcfFileComponent {
       this.selectedTopic = null;
     }
   }
+
+  filterIssues(filters: FormGroup<IFilters>): void {
+    const { status, type, users, issueRange } = filters.value;
+    if (
+      status === undefined ||
+      type === undefined ||
+      users === undefined ||
+      issueRange === undefined ||
+      issueRange?.start === undefined ||
+      issueRange?.end === undefined
+    ) {
+      return;
+    }
+
+    const isValuePresentInFilters =
+      !!status || !!type || !!users || !!issueRange.start || !!issueRange.end;
+
+    this.filtredTopics = isValuePresentInFilters
+      ? [
+          ...this.issueFilterService.filterIssue(
+            this.bcfFile.topics,
+            status,
+            type,
+            users,
+            issueRange?.start,
+            issueRange?.end
+          ),
+        ]
+      : this.bcfFile.topics;
+  }
 }

src/ipa-bcfier-ui/src/app/components/issue-filters/issue-filters.component.html

@@ -0,0 +1,57 @@
+<div class="container" [formGroup]="filtersForm">
+  <div class="container_filters">
+    <mat-form-field class="dark-theme">
+      <mat-label>Status</mat-label>
+      <mat-select formControlName="status">
+        @for (status of (issueStatuses$ | async)?.values(); track status) {
+        <mat-option [value]="status">{{ status }}</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field class="dark-theme">
+      <mat-label>Type</mat-label>
+      <mat-select formControlName="type">
+        @for (type of (issueTypes$ | async)?.values(); track type) {
+        <mat-option [value]="type">{{ type }}</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field class="dark-theme">
+      <mat-label>Responsible</mat-label>
+      <mat-select formControlName="users">
+        @for (user of (users$ | async); track user) {
+        <mat-option [value]="user">{{ user }}</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field formGroupName="issueRange">
+      <mat-label>Due Date</mat-label>
+      <mat-date-range-input [rangePicker]="picker">
+        <input matStartDate formControlName="start" placeholder="Start date" />
+        <input matEndDate formControlName="end" placeholder="End date" />
+      </mat-date-range-input>
+      <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
+      <mat-datepicker-toggle
+        matIconSuffix
+        [for]="picker"
+      ></mat-datepicker-toggle>
+      <mat-date-range-picker #picker></mat-date-range-picker>
+
+      @if (filtersForm.get('issueRange.start')?.hasError('matStartDateInvalid'))
+      {
+      <mat-error>Invalid start date</mat-error>
+      } @if (filtersForm.get('issueRange.end')?.hasError('matEndDateInvalid')) {
+      <mat-error>Invalid end date</mat-error>
+      }
+    </mat-form-field>
+  </div>
+  <button
+    mat-flat-button
+    color="primary"
+    (click)="acceptFilters()"
+    [disabled]="filtersForm.invalid"
+  >
+    Accept
+  </button>
+  <button mat-flat-button color="warn" (click)="clearFilters()">Clear</button>
+</div>

src/ipa-bcfier-ui/src/app/components/issue-filters/issue-filters.component.scss

@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  height: 99%;
+  &_filters {
+    flex: 1;
+  }
+}
+
+mat-form-field {
+  width: 100%;
+}
+
+button {
+  margin: 5px;
+}