we_bstly-web/src/app/pages/invites/invites.component.ts

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

import { PageEvent } from '@angular/material/paginator';
import { ActivatedRoute } from '@angular/router';

import { FormControl } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { debounceTime } from 'rxjs/operators';
import { I18nService } from '../../services/i18n.service';
import { InviteService } from '../../services/invites.service';
import { QuotaService } from '../../services/quota.service';
import { InviteEditComponent } from './edit/invite.edit';

@Component({
  standalone: false,
  selector: 'app-invites',
  templateUrl: './invites.component.html',
  styleUrls: ['./invites.component.scss']
})
export class InvitesComponent implements OnInit {

  quota: string;
  invites: any;
  others: any;
  inviteQuota: number = 0;
  success: boolean;
  working: boolean;
  datetimeformat: string;
  pageSizeOptions: number[] = [5, 10, 25, 50];
  searchFormControl = new FormControl();
  redeemedFormControl = new FormControl();
  searchOthersFormControl = new FormControl();
  redeemedOthersFormControl = new FormControl();

  inviteColumns = ["starts", "expires", "link", "note", "message", "redeemed", "actions"];
  otherColumns = ["note", "redeemed"];

  constructor(
    private inviteService: InviteService,
    private i18n: I18nService,
    private quotaService: QuotaService,
    public dialog: MatDialog,
    private route: ActivatedRoute) {
  }

  async ngOnInit() {
    this.datetimeformat = this.i18n.get('format.datetime', []);
    this.quota = this.route.snapshot.paramMap.get('quota');

    this.searchFormControl.valueChanges.pipe(debounceTime(500)).subscribe({
      next: (value) => {
        this.inviteService.getPages(this.quota, 0, this.invites.size, value, this.redeemedFormControl.value).subscribe({
          next: (data: any) => {
            this.invites = data;
          },
          error: (error) => { }
        })
      }
    })
    this.redeemedFormControl.valueChanges.subscribe({
      next: (value) => {
        this.inviteService.getPages(this.quota, 0, this.invites.size, this.searchFormControl.value ? this.searchFormControl.value : "", value).subscribe({
          next: (data: any) => {
            this.invites = data;
          },
          error: (error) => { }
        })
      }
    })

    this.searchOthersFormControl.valueChanges.pipe(debounceTime(500)).subscribe({
      next: (value) => {
        this.inviteService.getOthersPages(this.quota, 0, this.others.size, value, this.redeemedOthersFormControl.value).subscribe({
          next: (data: any) => {
            this.others = data;
          },
          error: (error) => { }
        })
      }
    })

    this.redeemedOthersFormControl.valueChanges.subscribe({
      next: (value) => {
        this.inviteService.getOthersPages(this.quota, 0, this.others.size, this.searchOthersFormControl.value ? this.searchOthersFormControl.value : "", value).subscribe({
          next: (data: any) => {
            this.others = data;
          }, error: (error) => { }
        })
      }
    })

    this.update();

  }

  update(): void {
    this.inviteQuota = 0;
    this.quotaService.quotas().subscribe({
      next: (data: any) => {
        for (let quota of data) {
          if (quota.name == "invite_" + this.quota) {
            this.inviteQuota = quota.value;
          }
        }
      }
    })

    if (!this.invites) {
      this.inviteService.get(this.quota).subscribe({
        next: (data: any) => {
          this.invites = data;
        }
      })
    } else {
      this.inviteService.getPages(this.quota, this.invites.number || 0, this.invites.size || 10, this.searchFormControl.value ? this.searchFormControl.value : "", this.redeemedFormControl.value).subscribe({
        next: (data: any) => {
          this.invites = data;
        },
        error: (error) => { }
      })
    }

    this.inviteService.getOthers(this.quota).subscribe({
      next: (data: any) => {
        this.others = data;
      },
      error: (error) => { }
    })
  }

  updatePages(event: PageEvent) {
    this.inviteService.getPages(this.quota, event.pageIndex, event.pageSize, this.searchFormControl.value ? this.searchFormControl.value : "", this.redeemedFormControl.value).subscribe({
      next: (data: any) => {
        this.invites = data;
      },
      error: (error) => { }
    })
  }

  create(): void {
    this.working = true;
    this.inviteService.create(this.quota, {}).subscribe({
      next: (response) => {
        this.update();
        this.working = false;
      },
      error: (error) => {
        this.working = false;
        if (error.status == 409) {
          let errors = {};
          for (let code of error.error) {
            errors[code.field] = errors[code.field] || {};
            errors[code.field][code.code] = true;
          }
        }
      }
    })
  }

  edit(invite) {
    const dialogRef = this.dialog.open(InviteEditComponent, {
      data: invite,
      minWidth: "400px"
    });

    dialogRef.afterClosed().subscribe({
      next: (result) => {
        if (result) {
          this.update();
        }
      }
    });
  }

  updateOthers(event: PageEvent) {
    this.inviteService.getOthersPages(this.quota, event.pageIndex, event.pageSize, this.searchOthersFormControl.value ? this.searchOthersFormControl.value : "", this.redeemedOthersFormControl.value).subscribe({
      next: (data: any) => {
        this.others = data;
      },
      error: (error) => { }
    })
  }
}