angular / angularfire

Angular + Firebase = ❤️
https://firebaseopensource.com/projects/angular/angularfire2
MIT License
7.66k stars 2.19k forks source link

Paginator with 'ő, é, á, ...' #2252

Closed Karman40 closed 3 years ago

Karman40 commented 4 years ago

Version info:

Angular: 8.0.3 Firebase: 7.5.0 AngularFire: 5.2.3

How to reproduce these conditions:

I want a pager for my project with a dynamic filter. This is fine so far. The following is always displayed correctly. Does not display content beginning with "special" characters (he, á,,,,, ... ...) When I press to scroll backwards, he / she displays these characters.

Code:

My service:

  getAllCompetitorData() {
    this.competitors.next(null);
    this.competitors$ = combineLatest(
      this.nameFilter$,
      this.teamFilter$,
      this.sexFilter$,
      this.activeFilter$,
      this.statusFilter$,
      this.ageGroupFilter$,
      this.pageSize$,
      this.page,
     ).pipe(switchMap(([name, team, sex, active, status, ageGroup, pageSize, page]) =>
       this.afs.collection<CompetitorModel>('competitors', ref => {
         let query: firebase.firestore.CollectionReference | firebase.firestore.Query = ref;

         if (name) { query = query.where('keywords', 'array-contains', name); }
         if (team) { query = query.where('team.id', '==', team); }
         if (sex) { query = query.where('sex', '==', sex); }
         if (active) { query = query.where('active', '==', active); }
         if (status) { query = query.where('status', '==', status); }
         if (ageGroup) { query = query.where('ageGroup', '==', ageGroup); }

         query = query.orderBy('name.last').orderBy('name.first');

         if (page === null) { query = query.limit(pageSize); }
         // következő oldal jön
         if (page && page.direction === 'forward') { query = query.startAfter(page.data.name.last).limit(pageSize); }
         // előző oldal jön
         if (page && page.direction === 'backword') { query = query.startAfter(page.data.name.last).limitToLast(pageSize); }

         return query;
       }).valueChanges()
    ));
    this.competitors$.subscribe(competitors => {
      console.log(competitors);
      this.competitors.next(competitors);
    });
  }

My ts:

  constructor(
    private Competitor: CompetitorsService,
  ) {}

  setPaginator(event: PageEvent) {
    this.loading = true;
    console.log(this.Competitor.pageIndex$.value);
    console.log(event.pageIndex);

    // page size change
    if (this.pageOptions.size !== event.pageSize) {
      this.pageOptions.size = event.pageSize;
      this.Competitor.pageSize$.next(this.pageOptions.size);
    }

    // next page
    if (this.pageOptions.index < event.pageIndex) {
      this.pageOptions.index = event.pageIndex;
      this.Competitor.pageIndex$.next(this.pageOptions.index);
      const nextPage = this.competitors[this.competitors.length - 1];
      console.log(nextPage);
      this.Competitor.page.next({data: nextPage, direction: 'forward'});
    }

    // prev page
    if (this.pageOptions.index > event.pageIndex) {
      this.pageOptions.index = event.pageIndex;
      this.Competitor.pageIndex$.next(this.pageOptions.index);
      const prevPage = this.competitors[0];
      console.log(prevPage);
      this.Competitor.page.next({data: prevPage, direction: 'backword'});
    }

  }
  getCompetitors() {
    this.Competitor.getAllCompetitorInfo().subscribe(competitors => {
      if (competitors) {
        this.competitors = competitors;
        this.getTmp();
      }
    });
  }

Screenshots:

after paginate, nothing change: index - 0 Screenshot_1 next page (work's good) - index 1 Screenshot_2 prev page (work's bag) - index 0 Screenshot_3

jamesdaniels commented 3 years ago

This sounds more like an issue with Firestore no? File a bug with the Firebase JS SDK, perhaps? If isolated to AngularFire LMK, happy to reopen and investigate.