Notifications

O Cat UI possui um sistema de notificações onde permite integrar com sua API Backend e exibir no sidebar e caso seja de sua escolha disparar notificações por pushNotification.

Importante

Não é suportado o envio de pushNotifications sem que a aplicação esteja aberta no browser.

Uso

user.service.ts

import { Injectable } from "@angular/core";
import { AppNotification } from "@catrx/ui";
import { Observable } from 'rxjs/internal/Observable';

@Injectable({ providedIn: 'any' })
export class UserService {
  private notifications: AppNotification[] = [
    {
      id: 1,
      title: 'Notificação de Demonstração',
      message: 'Clique para ir até a tela de Formulários Dinâmicos.',
      notifyOnBrowser: false,
      routerLink: '/components/form',
    },
    {
      id: 2,
      title: 'Notificação de Demonstração',
      message: 'Clique para ir até a tela de Datatable.',
      notifyOnBrowser: false,
      routerLink: '/components/datatable',
    },
    {
      id: 3,
      title: 'Notificação de Demonstração',
      message: 'Esta notificação não possui ação de clique.',
      notifyOnBrowser: false,
    },
    {
      id: 4,
      title: 'Notificação de Push',
      message: 'Clique para ir até a tela de Formulários Dinâmicos.',
      notifyOnBrowser: true,
    },
  ];

  public getNotifications() {
    return new Observable<AppNotification[]>((observe) => {
      setTimeout(() => {
        observe.next(this.notifications);
      }, 300);
    });
  }

  public deleteNotification(id: number) {
    return new Observable((observe) => {
      this.notifications = this.notifications.filter(
        (notification) => notification.id !== id
      );
      observe.next(null);
    });
  }

  public deleteNotifications(ids: number[]) {
    return new Observable((observe) => {
      this.notifications = this.notifications.filter(
        (notification) => ids.indexOf(notification.id) < 0
      );
      observe.next(null);
    });
  }
}

app.component.ts

import { Component } from '@angular/core';
import { CatAppService } from '@catrx/ui/core';
import { UserService } from './user.service';
import { CatDynamicComponent } from '@catrx/ui/dynamic-component';
import { LoginComponent } from './login.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  appConfig = this.appService
    .build('Cat UI', { ... })
    .setLogotype({ ... })
    .pushNotifications({
      getNotifications: this.userService.getNotifications(),
      getPermissionToNotifyOnBrowser: true,
      intervalToGet: 30000,
      onDelete: (id) => this.userService.deleteNotification(id),
      onAllDelete: (ids) => this.userService.deleteNotifications(ids),
    })
    .enableDarkMode()
    .generate();

  constructor(
    private appService: CatAppService,
    private userService: UserService) {}
}