@unifylib/ui-lib 1.1.3 → 1.1.5

package/src/lib/components/report-form/report-form.component.ts

@@ -1,599 +0,0 @@
-import {ChangeDetectionStrategy, Component, EventEmitter, Injector, Input, OnInit, Output} from '@angular/core';
-import {FieldInfo} from "../../base-model/field-info";
-import {EMPTY_PAGE_INFO, PageInfo} from "../../base-model/page-info";
-import {TableColumn} from "../../base-model/table-column.interface";
-import {FieldMessage} from "../../base-model/api-response";
-import {TranslateModule, TranslateService} from "@ngx-translate/core";
-import {BackendService} from "../../services/backend-service";
-import {ActivatedRoute, Router} from "@angular/router";
-import {FormBuilder, FormGroup} from "@angular/forms";
-import {formatDate, NgForOf, NgIf} from "@angular/common";
-import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
-import {MatButton, MatButtonModule} from "@angular/material/button";
-import {BaseTableComponent} from "../base-table/base-table.component";
-import {MatIconModule} from "@angular/material/icon";
-import {FilterRequest} from "../../base-model/filter-request";
-import {ReportRequest} from "../../base-model/report-request.model";
-import {Filter} from "../../base-model/filter.model";
-import {TitleBarComponent} from "../title-bar/title-bar.component";
-import {BaseFormCanvasComponent} from "../base-form-canvas/base-form-canvas.component";
-import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
-import {DRILL_DOWN_ACTION, JUNIOR_DOWN_ACTION, SnackMessage, TablePageUserAction} from "../../base-model";
-import {} from "../audit-log-details-dialog/audit-log-details-dialog.component";
-import {MatDialog} from "@angular/material/dialog";
-import {ReportDetailsDialogComponent} from "../report-details-dialog/report-details-dialog.component";
-import { cloneDeep } from 'lodash';
-import {MatTooltip} from "@angular/material/tooltip";
-import {Directionality} from "@angular/cdk/bidi";
-
-
-const NON_REPORT_COLUMNS = ['listAction', 'button', 'checkbox'];
-
-@Component({
-    selector: 'app-report-form',
-    standalone: true,
-  imports: [
-    TitleBarComponent,
-    BaseFormCanvasComponent,
-    MatMenu,
-    MatMenuItem,
-    NgForOf,
-    MatMenuTrigger,
-    MatButtonModule,
-    TranslateModule,
-    BaseTableComponent,
-    NgIf,
-    MatIconModule,
-    MatButton,
-    MatTooltip
-  ],
-    templateUrl: './report-form.component.html',
-    styleUrl: './report-form.component.scss'
-})
-export class ReportFormComponent implements OnInit {
-    @Input()
-    showDetails : any = [];
-
-    @Input()
-    showExtractButton: boolean = true;
-
-    @Input()
-    columns: TableColumn<any>[] =[];
-
-    @Input() actionRequestCallback!: (actionRequest: TablePageUserAction) => TablePageUserAction;
-    @Input() enrichDrillDownReportRequest!: (actionRequest: TablePageUserAction, reportRequest: ReportRequest) => TablePageUserAction;
-    @Input() enrichHyperLinkReportRequest!: (actionRequest: TablePageUserAction, reportRequest: ReportRequest) => TablePageUserAction;
-    @Input() enrichJuniorReportRequest!: (actionRequest: TablePageUserAction, reportRequest: ReportRequest) => TablePageUserAction;
-
-    @Output()
-    userAction: EventEmitter<TablePageUserAction> = new EventEmitter<TablePageUserAction>();
-    activeLevel: number = 1;
-
-    private filterRequest: FilterRequest;
-    x: any;
-    isEditable: boolean = true;
-    fields: FieldInfo[] = [];
-    pageInfo: PageInfo = EMPTY_PAGE_INFO;
-    drillDownPageInfo: PageInfo = EMPTY_PAGE_INFO;
-    drillDownColumns: TableColumn<any>[] = [];
-    hideDrillDownButton: false;
-
-    juniorPageInfo: PageInfo = EMPTY_PAGE_INFO;
-    juniorColumns: TableColumn<any>[] = [];
-
-    columnsDefinition: TableColumn<any>[] = [];
-    types: string[] = ["pdf", "csv", "xlsx"]
-    searchStr: string = '';
-
-    errors: FieldMessage[] = [];
-
-    reloadData: boolean = false;
-    backButtonEnabled: boolean = true;
-
-
-    reportRequest: ReportRequest = new ReportRequest({});
-    childReportRequest: ReportRequest = new ReportRequest({});
-    juniorReportRequest: ReportRequest = new ReportRequest({});
-    public reportForm: FormGroup;
-    readyToSearch = false;
-    private pageSize: any;
-    private dialogReportRequest: any;
-    currentDirection: 'ltr' | 'rtl';
-
-  constructor(private translateService: TranslateService,
-                public backendService: BackendService,
-                private activatedRoute: ActivatedRoute,
-                private injector: Injector,
-                private router: Router,
-                private route: ActivatedRoute,
-                private directionality: Directionality,
-                public dialog: MatDialog,
-                private fb: FormBuilder) {
-       ClassicEditor.defaultConfig = {
-            toolbar: {
-                items: ['heading', '|', 'bold', 'italic', '|', 'bulletedList', 'numberedList']
-            },
-            image: {
-                toolbar: ['imageStyle:side', '|', 'imageTextAlternative']
-            },
-            table: {
-                contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
-            },
-            language: 'en'
-        };
-    }
-
-    disableExportAction : boolean = false;
-
-    ngOnInit(): void {
-      this.currentDirection = this.directionality.value;
-      this.directionality.change.subscribe((value) => {
-        this.currentDirection = value;
-      })
-
-      this.activatedRoute.data.subscribe(data => {
-        this.pageInfo = data['pageInfo'];
-        this.pageSize = this.pageInfo.pageSize ?? 10;
-        this.filterRequest = new FilterRequest(this.pageSize);
-        data['pageInfo'].lazyLoadData = true;
-        this.drillDownPageInfo = data['drillDownPageInfo'];
-        this.drillDownColumns = data['drillDownColumns']?.filter(c => c.property !== 'selectItem');
-        this.hideDrillDownButton = data['hideDrillDownButton'] ?? false;
-        this.juniorPageInfo = data['juniorPageInfo'];
-        this.juniorColumns = data['juniorColumns'];
-        this.columnsDefinition = data['columnsDefinition'].filter(c => (this.drillDownPageInfo && this.drillDownColumns || (!NON_REPORT_COLUMNS.includes(c.type))));
-        this.fields = data['fields'];
-        if (data['enrichDrillDownReportRequest']) {
-          this.enrichDrillDownReportRequest = data['enrichDrillDownReportRequest'](this.injector);
-        }
-        if (data['enrichJuniorReportRequest']) {
-          this.enrichJuniorReportRequest = data['enrichJuniorReportRequest'](this.injector);
-        }
-
-        if (data['enrichHyperLinkReportRequest']) {
-          this.enrichHyperLinkReportRequest = data['enrichHyperLinkReportRequest'](this.injector);
-        }
-      });
-      this.route.queryParamMap.subscribe(params => {
-        const isComparisonReport = params.get('comparisonReport') === 'true';
-
-        if (isComparisonReport) {
-          const comparisonStr = sessionStorage.getItem('comparisonReportPageInfo');
-
-          if (comparisonStr) {
-            const comparisonData = JSON.parse(comparisonStr);
-
-            this.pageInfo.lazyLoadData = comparisonData.lazyLoadData ?? false;
-            this.activeLevel = comparisonData.activeLevel ?? 2;
-            this.isEditable = false;
-            this.backButtonEnabled = false;
-            this.drillDownPageInfo = comparisonData.drillDownPageInfo;
-            this.drillDownColumns = comparisonData.drillDownColumns;
-            this.reportForm = this.fb.group({
-              directorate: [[]],
-              fromDate: [''],
-              toDate: [''],
-              sector: [''],
-            });
-
-            this.reportForm.patchValue(comparisonData.form)
-            this.fields = this.fields.filter(c => c.type !== 'checkbox');
-
-            const reportRequest = comparisonData.reportRequest;
-
-            this.childReportRequest = this.backendService.buildReportRequest(
-              this.drillDownColumns,
-              `${this.drillDownPageInfo.labelsSection}.${this.drillDownPageInfo.id}`,
-              reportRequest,
-              '',
-              this.drillDownPageInfo,
-              'LANDSCAPE'
-            );
-
-          }
-        }
-      });
-        }
-
-
-    // ngOnChanges({item, errors, fields}: SimpleChanges): void {
-    //     // errors?.currentValue?.forEach((msg: FieldMessage) => {
-    //     //     this.backendService.parentForm.get(msg.fieldName)?.setErrors({serverError: msg.message});
-    //     // });
-    //     // if (fields?.currentValue && !fields.isFirstChange()){
-    //     //     this.buildForm();
-    //     // }
-    //     // this.buildForm();
-    // }
-
-    isMatchHeight() {
-        return this.pageInfo.pageHeight === 'match';
-    }
-
-
-    doAction(type: string) {
-      if (this.backendService.parentForm.valid) {
-        this.reloadData = !this.reloadData;
-        const filterRequest: FilterRequest = new FilterRequest(this.pageSize);
-        filterRequest.filters = [];
-        let paramsString: string[] = [];
-        this.fields.filter(x => x.type !== 'spacer').forEach(f => {
-          if (this.getParamValue(f) != null && this.getParamValue(f).toString().trim() !== '')
-          {
-          if (f.type === 'multi-select' || f.type === 'lookup') {
-            // do not filter if this field as cascading for another one and the other one got selected values
-            const childFieldIdx = this.fields.findIndex(field => field.cascadedBy === f.property);
-            if (childFieldIdx > -1 && this.backendService.parentForm.get(this.fields[childFieldIdx].property)?.value?.length > 0) {
-              return;
-            }
-            const idz: number[] = [];
-            const param: string[] = [];
-            if (this.backendService.parentForm.get(f.property)?.value && Array.isArray(this.backendService.parentForm.get(f.property)?.value)
-              && this.backendService.parentForm.get(f.property)?.value.length > 0) {
-              this.backendService.parentForm.get(f.property)?.value.forEach((a: {
-                channelId: number;
-                englishName: string;
-                id: number;
-              }) => {
-                if (f.flattenBySubAttribute) {
-                  idz.push(a[f.flattenBySubAttribute]);
-                  param.push(a[f.flattenBySubAttribute]);
-                } else if (this.fields.find(s => s.property === 'terminalId')) {
-                  idz.push(a.channelId);
-                  param.push(a.englishName);
-                } else {
-                  idz.push(a.id);
-                  param.push(a.englishName);
-                }
-              })
-              filterRequest.filters?.push(new Filter({
-                id: f.property, fieldName: f.property, label: this.translateService.instant(f.label),
-                filterType: 'FILED_FILTER', operator: f.filterOperator,
-                valueObject: idz
-              }));
-              paramsString.push(this.translateService.instant(f.label) + ' : ' + param.join(','));
-            } else if (this.backendService.parentForm.get(f.property)?.value && f.flattenBySubAttribute) {
-              filterRequest.filters?.push(new Filter({
-                id: f.property, fieldName: f.property, label: this.translateService.instant(f.label),
-                filterType: 'FILED_FILTER', operator: f.filterOperator,
-                valueObject: this.getParamValue(f)[f.flattenBySubAttribute]
-              }));
-            }
-          } else {
-            if (this.backendService.parentForm.get(f.property)?.value !== null &&
-              this.backendService.parentForm.get(f.property)?.value !== undefined &&
-              this.backendService.parentForm.get(f.property)?.value !== "") {
-              filterRequest.filters?.push(new Filter({
-                id: f.property, fieldName: f.property, label: this.translateService.instant(f.label),
-                filterType: 'FILED_FILTER', operator: f.filterOperator,
-                valueObject: this.getParamValue(f)
-              }));
-            }
-            paramsString.push(this.translateService.instant(f.label) + ' : ' + this.getParamValueLabel(f));
-          }
-        }})
-        const reportRequest = this.backendService.buildReportRequest(this.columnsDefinition, this.pageInfo.labelsSection + '.' + this.pageInfo.id,
-          filterRequest, type, this.pageInfo, 'LANDSCAPE');
-        reportRequest.searchStr = paramsString.join(' , ');
-        this.reportRequest = reportRequest;
-        // this.activeLevel = 1;
-      } else {
-        this.backendService.topPanelMessage$.next(new SnackMessage('INVALID_REPORT_FORM', true, 'error'));
-      }
-    }
-
-    private getParamValue(f: FieldInfo) {
-        if (f.type === 'date' && this.backendService.parentForm.get(f.property)?.value) {
-            return formatDate(this.backendService.parentForm.get(f.property)?.value, 'yyyy-MM-dd', 'en_US')
-        }else if (f.type === 'checkbox') {
-            return !!this.backendService.parentForm.get(f.property)?.value;
-        }else {
-            return this.backendService.parentForm.get(f.property)?.value;
-        }
-    }
-
-    private getParamValueLabel(f: FieldInfo) {
-        if (f.type === 'checkbox') {
-            return this.backendService.parentForm.get(f.property)?.value ? this.translateService.instant('yes') : this.translateService.instant('no');
-        }else {
-            return this.backendService.parentForm.get(f.property)?.value;
-        }
-    }
-
-  getTitle() {
-    const pageInfoMap = {
-      1: this.pageInfo,
-      2: this.drillDownPageInfo,
-      3: this.juniorPageInfo
-    };
-
-    const currentInfo = pageInfoMap[this.activeLevel] || this.pageInfo;
-    return `${currentInfo.labelsSection}.${currentInfo.id}`;
-  }
-
-    updateForm($event: FormGroup) {
-      this.reportForm = $event;
-      this.backendService.parentForm = $event;
-
-      this.setupDependentFieldWatchers();
-
-      this.backendService.parentForm.valueChanges.subscribe(x => {
-          this.readyToSearch = this.backendService.parentForm.valid;
-        }
-
-      );
-    }
-
-  private setupDependentFieldWatchers() {
-    this.fields
-      .filter(field => field.lookupFilterList && field.lookupFilterList.length > 0)
-      .forEach(field => {
-        const dependentFields = field.lookupFilterList.map(f => f.fieldName);
-
-        dependentFields.forEach(dependentFieldName => {
-          const dependentControl = this.reportForm.get(dependentFieldName);
-          if (dependentControl) {
-            dependentControl.valueChanges.subscribe(() => {
-              const targetControl = this.reportForm.get(field.property);
-              if (targetControl) {
-                targetControl.setValue([]);
-              }
-            });
-          }
-        });
-      });
-  }
-
-  isValidForm() {
-      return this.readyToSearch ;
-
-    }
-
-
-
-  emitUserAction($event: TablePageUserAction) {
-    $event.pageInfo = this.pageInfo;
-    this.doADrillDownAction($event);
-  }
-
-  emitHyperLinkAction($event: TablePageUserAction) {
-    if (!this.shouldProcessEventItem($event.item)) return;
-
-    const item = $event.item;
-    this.prepareDialogReportRequest(item);
-    const reportRequest = this.buildDialogReportRequest();
-    reportRequest.filterRequest.pageIndex = 0
-    const dialogRef = this.dialog.open(ReportDetailsDialogComponent, {
-      data: {
-        pageInfo: this.juniorPageInfo,
-        request: reportRequest,
-        columns: this.juniorColumns,
-        item,
-      },
-      height: '50vw',
-      maxWidth: '120vw',
-      direction: this.currentDirection,
-      disableClose: false,
-    });
-
-    dialogRef.afterOpened().subscribe(() => this.doHyperLinkAction($event));
-    dialogRef.afterClosed().subscribe(() => {});
-  }
-
-  private prepareDialogReportRequest(item: any): void {
-    this.dialogReportRequest = cloneDeep(this.reportRequest);
-    this.dialogReportRequest.filterRequest = { filters: [] };
-
-    this.addStandardFilters(item);
-    this.addOrReplaceFilter('isec1', 'iSec', item['isec_value']);
-    this.addFilterType();
-  }
-
-  private addStandardFilters(item: any): void {
-    const standardFilters = [
-      { key: 'period', value: item['period'] },
-      { key: 'year', value: item['year'] },
-      { key: 'sector', value: item['sectorCode'] },
-      { key: 'directorate', value: item['directorateCode'] },
-      { key: 'subTaxRate', value: item['tax_rate_code'] },
-    ];
-
-    standardFilters.forEach(({ key, value }) =>
-      this.dialogReportRequest.filterRequest.filters.push(
-        this.createFilter(key, key, value)
-      )
-    );
-  }
-
-  private addFilterType(): void {
-    const isTax = this.dialogReportRequest.actionKey?.toLowerCase().includes('tax');
-    const filterType = isTax ? 'TAX' : 'VALUE';
-
-    this.dialogReportRequest.filterRequest.filters.push(
-      this.createFilter('filterType', 'filterType', filterType)
-    );
-  }
-
-  private buildDialogReportRequest(): any {
-    return this.backendService.buildReportRequest(
-      this.juniorColumns,
-      `${this.juniorPageInfo.labelsSection}.${this.juniorPageInfo.id}`,
-      { ...this.dialogReportRequest.filterRequest },
-      '',
-      this.juniorPageInfo,
-      'LANDSCAPE'
-    );
-  }
-
-  private createFilter(key: string, fieldName: string, value: any): Filter {
-    return new Filter({
-      key,
-      fieldName,
-      label: '',
-      filterType: 'FILED_FILTER',
-      operator: 'EQUALS',
-      valueObject: value,
-    });
-  }
-
-  private addOrReplaceFilter(id: string, fieldName: string, value: any): void {
-    const filter = new Filter({
-      id,
-      fieldName,
-      label: '',
-      filterType: 'FILED_FILTER',
-      operator: 'EQUALS',
-      valueObject: value,
-    });
-
-    const filters = this.dialogReportRequest.filterRequest.filters;
-    const existingIndex = filters.findIndex((f: Filter) => f.id === id);
-
-    if (existingIndex !== -1) {
-      filters.splice(existingIndex, 1, filter);
-    } else {
-      filters.push(filter);
-    }
-  }
-
-
-
-  emitJuniorAction($event: TablePageUserAction) {
-    const juniorAction = JUNIOR_DOWN_ACTION;
-    juniorAction.pageInfo = this.drillDownPageInfo;
-    this.doJuniorAction($event);
-  }
-
-  drillDown() {
-    const drilldownaction = DRILL_DOWN_ACTION;
-    drilldownaction.pageInfo = this.drillDownPageInfo;
-    this.doADrillDownAction(drilldownaction);
-  }
-
-  private doJuniorAction($event: TablePageUserAction) {
-    if (this.juniorColumns && this.juniorPageInfo) {
-      if (this.enrichJuniorReportRequest) {
-        if (this.activeLevel === 2) {
-          this.isEditable = false;
-          this.disableExportAction = this.juniorPageInfo.hideReportsExtractButton || false;
-          this.juniorReportRequest = this.backendService.buildReportRequest(this.juniorColumns,
-            this.juniorPageInfo.labelsSection + '.' + this.juniorPageInfo.id,
-            this.reportRequest.filterRequest, '', this.juniorPageInfo, 'LANDSCAPE');
-          this.enrichJuniorReportRequest($event, this.juniorReportRequest);
-        }
-      }
-      this.activeLevel = this.activeLevel +1;
-    }
-  }
-  private doADrillDownAction($event: TablePageUserAction) {
-    if (this.drillDownColumns && this.drillDownPageInfo) {
-      if (this.enrichDrillDownReportRequest) {
-        if (this.activeLevel === 1) {
-          this.isEditable = false;
-          this.childReportRequest = this.backendService.buildReportRequest(this.drillDownColumns,
-            this.drillDownPageInfo.labelsSection + '.' + this.drillDownPageInfo.id,
-            this.reportRequest.filterRequest, '', this.drillDownPageInfo, 'LANDSCAPE');
-          this.disableExportAction = this.drillDownPageInfo.hideReportsExtractButton || false;
-          this.enrichDrillDownReportRequest($event, this.childReportRequest);
-        }
-      }
-      this.activeLevel = this.activeLevel +1;
-    }
-  }
-
-  private doHyperLinkAction($event: TablePageUserAction) {
-    if (this.enrichHyperLinkReportRequest) {
-          this.juniorReportRequest = this.backendService.buildReportRequest(this.juniorColumns,
-            this.juniorPageInfo.labelsSection + '.' + this.juniorPageInfo.id,
-            this.dialogReportRequest.filterRequest, '', this.juniorPageInfo, 'LANDSCAPE');
-          this.disableExportAction = this.juniorPageInfo.hideReportsExtractButton || false;
-          this.enrichHyperLinkReportRequest($event, this.juniorReportRequest);
-    }
-  }
-
-  extractReport(reportType: any) {
-      if (this.activeLevel === 1) {
-        this.reportRequest.reportType = reportType;
-        this.backendService.downloadReport(this.reportRequest, this.pageInfo.apiUri );
-      }
-      else if (this.activeLevel === 2) {
-        this.childReportRequest.reportType = reportType;
-        this.backendService.downloadReport(this.childReportRequest, this.drillDownPageInfo.apiUri );
-      }
-      else if (this.activeLevel === 3) {
-        this.juniorReportRequest.reportType = reportType;
-        this.backendService.downloadReport(this.juniorReportRequest, this.juniorPageInfo.apiUri );
-      }
-    }
-
-  goUp() {
-    this.isEditable = true;
-    this.activeLevel = this.activeLevel -1;
-    this.doAction(this.x);
-    this.reloadData = true;
-    if (this.activeLevel >1) {
-      this.isEditable = false;
-    }
-    this.disableExportAction = false
-  }
-
-  drillDownEnabled() {
-    return this.drillDownPageInfo && !this.hideDrillDownButton && !this.getIsEmptyList();
-  }
-
-  drillDownLabel() {
-    return `${this.pageInfo.labelsSection}.drillDownLabel` ;
-  }
-  getIsEmptyList() {
-    return this.backendService.isEmptyItems || this.disableExportAction === true;
-  }
-  clear() {
-    const currentUrl = this.router.url;
-    this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
-      this.router.navigate([currentUrl]);
-    });
-
-    // if (this.reportForm) {
-    //   this.reportForm.reset();
-    //
-    //   this.fields.forEach(field => {
-    //     if (field.type === 'lookup' || field.type === 'multi-select') {
-    //       const control = this.reportForm.get(field.property);
-    //       if (control) {
-    //         control.setValue([]);
-    //       }
-    //     }
-    //   });
-    // }
-
-  }
-
-
-  isFormEmpty(): boolean {
-    if (!this.reportForm || !this.reportForm.value) {
-      return true;
-    }
-
-    return Object.values(this.reportForm.value).every(value => {
-      if (value === null || value === undefined || value === '') {
-        return true;
-      }
-      return Array.isArray(value) && value.length === 0;
-
-
-    });
-  }
-
-  shouldProcessEventItem(item: any): boolean {
-    const groupByProp = this.pageInfo?.groupByProperty;
-    const groupByValues = this.pageInfo?.groupByValue;
-
-    if (!groupByProp || !groupByValues || !item[groupByProp]) {
-      return true;
-    }
-
-    const value = item[groupByProp].toString();
-
-    return !groupByValues.some(v => value.includes(v) && value.length >= v.length);
-  }
-}

package/src/lib/components/search-bar/search-bar.component.html

@@ -1,51 +0,0 @@
-<div class="mainSearchBar">
-  <div class="search row align-start-center gap-16">
-
-    <mat-form-field appearance="outline" class="search__field flex-50">
-      <input
-        matInput
-        class="search__input"
-        placeholder="Search..."
-        (keydown.enter)="onSearch()"
-        [(ngModel)]="searchValue" />
-    </mat-form-field>
-
-    <mat-form-field appearance="outline" class="search__field flex-15">
-      <mat-select
-        class="search__toggle"
-        [(ngModel)]="searchType"
-        placeholder="Type">
-        <mat-option value="exact">Exact</mat-option>
-        <mat-option value="like">Like</mat-option>
-      </mat-select>
-    </mat-form-field>
-
-    <mat-form-field appearance="outline" class="search__field flex-15">
-      <mat-select
-        class="search__toggle"
-        [(ngModel)]="selectedSortKey"
-        placeholder="Sort By">
-        <mat-option *ngFor="let col of getColumns()" [value]="col.property">
-          {{ labelKey(col) | translate }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
-
-    <mat-form-field appearance="outline" class="search__field flex-10">
-      <mat-select
-        class="search__toggle"
-        [(ngModel)]="selectedSortType"
-        placeholder="Type">
-        <mat-option value="ASC">ASC</mat-option>
-        <mat-option value="DESC">DESC</mat-option>
-      </mat-select>
-    </mat-form-field>
-
-    <div class="search__button row align-center-center">
-      <div class="icon-design" (click)="onSearch()">
-        <mat-icon class="icon-search" color="primary">search</mat-icon>
-      </div>
-    </div>
-
-  </div>
-</div>