Projekt

Obecné

Profil

« Předchozí | Další » 

Revize 0256e698

Přidáno uživatelem castic96 před asi 4 roky(ů)

Re #7802: Implementace vykreslování search page s výsledky
- oprava chyb při subscribe
- oprava chyb v asynchronní komunikaci

Zobrazit rozdíly:

fe/fulltextsearch/src/app/components/pages/browse/table/table.component.html
31 31 
  <div class="row justify-content-center align-items-center">
32 32 

  		




  33
  33
  
    
    <mat-paginator #paginator


  		




  34
  
  
    
                   [length]="dataSource?.data.length"


  		




  
  34
  
    
                   [length]="dataSourceLength | async"


  		




  35
  35
  
    
                   [pageIndex]="0"


  		




  36
  36
  
    
                   [pageSize]="10"


  		




  37
  37
  
    
                   [pageSizeOptions]="[5, 10, 25]">


  		












  

    
      fe/fulltextsearch/src/app/components/pages/browse/table/table.component.ts
    
  





  1
  
  
    
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';


  		




  
  1
  
    
import { Component, OnInit, ViewChild } from '@angular/core';


  		




  2
  2
  
    
import { MatPaginator } from '@angular/material/paginator';


  		




  3
  3
  
    
import { MatSort } from '@angular/material/sort';


  		




  4
  4
  
    
import { MatTable } from '@angular/material/table';


  		




  5
  5
  
    
import { TableDataSource } from './table-datasource';


  		




  6
  6
  
    
import { DocumentResponse } from '../../../../model/DocumentResponse';


  		




  7
  7
  
    
import {QueryService} from '../../../../services/query.service';


  		




  
  8
  
    
import {Observable} from 'rxjs';


  		




  
  9
  
    
import {map, tap} from 'rxjs/operators';


  		




  8
  10
  
    

  		




  9
  11
  
    
@Component({


  		




  10
  12
  
    
  selector: 'app-table-browse',


  		




  11
  13
  
    
  templateUrl: './table.component.html',


  		




  12
  14
  
    
  styleUrls: ['./table.component.css']


  		




  13
  15
  
    
})


  		




  14
  
  
    
export class TableComponent implements AfterViewInit, OnInit {


  		




  
  16
  
    
export class TableComponent implements OnInit {


  		




  15
  17
  
    
  @ViewChild(MatPaginator) paginator: MatPaginator;


  		




  16
  18
  
    
  @ViewChild(MatSort) sort: MatSort;


  		




  17
  19
  
    
  @ViewChild(MatTable) table: MatTable<DocumentResponse>;


  		




  18
  20
  
    
  dataSource: TableDataSource;


  		




  
  21
  
    
  dataSourceLength: Observable<number>;


  		




  19
  22
  
    

  		




  20
  23
  
    
  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */


  		




  21
  24
  
    
  displayedColumns = ['id', 'documentName', 'originDate', 'uploadedDate'];


  		




  ......




  23
  26
  
    
  constructor( private queryService: QueryService ) { }


  		




  24
  27
  
    

  		




  25
  28
  
    
  ngOnInit() {


  		




  26
  
  
    
    this.dataSource = new TableDataSource();


  		




  27
  
  
    
    this.queryService.getDocuments().subscribe( documents => {


  		




  28
  
  
    
      this.dataSource.data = documents;


  		




  29
  
  
    
    });


  		




  30
  
  
    
  }


  		




  31
  
  
    

  		




  32
  
  
    
  ngAfterViewInit() {


  		




  33
  
  
    
    this.dataSource.sort = this.sort;


  		




  34
  
  
    
    this.dataSource.paginator = this.paginator;


  		




  35
  
  
    
    this.table.dataSource = this.dataSource;


  		




  
  29
  
    
    this.dataSourceLength = this.queryService.getDocuments().pipe(


  		




  
  30
  
    
      tap(data => {


  		




  
  31
  
    
        this.dataSource = new TableDataSource();


  		




  
  32
  
    
        this.dataSource.data = data;


  		




  
  33
  
    
        this.table.dataSource = data;


  		




  
  34
  
    
        this.dataSource.sort = this.sort;


  		




  
  35
  
    
        this.dataSource.paginator = this.paginator;


  		




  
  36
  
    
      }),


  		




  
  37
  
    
      map(data => data.length)


  		




  
  38
  
    
    );


  		




  36
  39
  
    
  }


  		




  37
  40
  
    
}


  		












  

    
      fe/fulltextsearch/src/app/components/pages/search/search-paginator/search-paginator.component.html
    
  





  17
  17
  
    
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>


  		




  18
  18
  
    
  </table>


  		




  19
  19
  
    

  		




  20
  
  
    
  <mat-paginator #paginator


  		




  
  20
  
    
  <mat-paginator


  		




  
  21
  
    
      #paginator


  		




  
  22
  
    
      *ngIf="dataSource"


  		




  21
  23
  
    
      [length]="dataSource?.data.length"


  		




  22
  24
  
    
      [pageIndex]="0"


  		




  23
  25
  
    
      [pageSize]="3"


  		












  

    
      fe/fulltextsearch/src/app/components/pages/search/search.component.html
    
  





  13
  13
  
    
      </p>


  		




  14
  14
  
    
    </div>


  		




  15
  15
  
    
    <div class="row"> <!--<img src=" sem dat obrazek v base64 " />-->


  		




  16
  
  
    
        <app-search-paginator [inputData] = "data" style="width: 100%"></app-search-paginator>


  		




  
  16
  
    
        <app-search-paginator [inputData] = "data" style="width: 100%" *ngIf="data"></app-search-paginator>


  		




  17
  17
  
    
    </div>


  		




  18
  18
  
    
  </div>


  		




  19
  19
  
    
</div>


  		












  

    
      fe/fulltextsearch/src/app/components/pages/search/search.component.ts
    
  





  13
  13
  
    
  private queryServiceSubscription$: Subscription;


  		




  14
  14
  
    

  		




  15
  15
  
    
  constructor(private dataHolderService: DataHolderService) {


  		




  16
  
  
    
    this.customSubscribe();


  		




  17
  
  
    
  }


  		




  18
  
  
    

  		




  19
  
  
    
  private customSubscribe(): void {


  		




  20
  16
  
    
    this.queryServiceSubscription$ = this.dataHolderService.storage$.subscribe(data => {


  		




  21
  17
  
    
      if (data != null) {


  		




  22
  18
  
    
        this.data = data;


  		












  

    
      fe/fulltextsearch/src/app/components/shared-components/search-box/search-box.component.ts
    
  





  33
  33
  
    
  }


  		




  34
  34
  
    

  		




  35
  35
  
    
  ngOnDestroy(): void {


  		




  36
  
  
    
    this.queryServiceSubscription$.unsubscribe();


  		




  
  36
  
    
    console.log(this.queryServiceSubscription$);


  		




  
  37
  
    
    if (this.queryServiceSubscription$ !== undefined) {


  		




  
  38
  
    
      console.log('podminka');


  		




  
  39
  
    
      this.queryServiceSubscription$.unsubscribe();


  		




  
  40
  
    
    }


  		




  37
  41
  
    
  }


  		




  38
  42
  
    
}


  		












Také k dispozici:  Unified diff