eCosif ā€” Frontend Angular

šŸ”„ Fluxos - ecosif-angular

šŸ“‹ VisĆ£o Geral

Este documento descreve os principais fluxos de dados e interaĆ§Ć£o na aplicaĆ§Ć£o ecosif-angular.

šŸ” Fluxo 1: AutenticaĆ§Ć£o e Login

DescriĆ§Ć£o

Fluxo completo de autenticaĆ§Ć£o do usuĆ”rio, incluindo login local e Azure AD.

Diagrama de SequĆŖncia

sequenceDiagram
    participant User as UsuƔrio
    participant Login as LoginComponent
    participant Auth as AuthService
    participant Token as TokenService
    participant Interceptor as AuthInterceptor
    participant Backend as ecosif-auth
    participant Router as Router

    User->>Login: Preenche credenciais
    User->>Login: Clica em "Login"
    Login->>Auth: login(username, password)
    Auth->>Backend: POST /api/auth/signin
    Backend-->>Auth: { accessToken, user }
    Auth->>Token: saveToken(accessToken)
    Token->>Token: localStorage.setItem('token')
    Auth-->>Login: UserData
    Login->>Router: navigate(['/dashboard'])
    Router->>Router: Verifica AuthGuard
    Router->>Auth: checkAuth()
    Auth->>Token: getToken()
    Token-->>Auth: token vƔlido
    Auth-->>Router: Autenticado
    Router->>User: Redireciona para /dashboard

šŸ“Š Fluxo 2: Carregar Lista de Empresas

DescriĆ§Ć£o

Fluxo de carregamento de dados do backend, exibiĆ§Ć£o e tratamento de erros.

Diagrama de SequĆŖncia

sequenceDiagram
    participant Component as CompanydetailsComponent
    participant Service as CompanyService
    participant Interceptor as AuthInterceptor
    participant Backend as ecosif-masterdata
    participant UI as Template HTML

    Component->>Component: ngOnInit()
    Component->>Service: getCompanies()
    Service->>Interceptor: HTTP GET /api/v1/companies
    Interceptor->>Interceptor: Adiciona token JWT
    Interceptor->>Backend: RequisiĆ§Ć£o autenticada
    Backend-->>Interceptor: 200 OK + dados
    Interceptor-->>Service: Observable<Company[]>
    Service-->>Component: Observable<Company[]>
    Component->>Component: subscribe()
    Component->>Component: this.companies = data
    Component->>UI: [companies] binding
    UI->>User: Exibe lista

šŸ“ Fluxo 3: Criar Novo LanƧamento ContĆ”bil

DescriĆ§Ć£o

Fluxo de criaĆ§Ć£o de lanƧamento com validaĆ§Ć£o e persistĆŖncia.

Diagrama de SequĆŖncia

sequenceDiagram
    participant User as UsuƔrio
    participant Form as CreateEntriesComponent
    participant Service as EntriesService
    participant Validator as Form Validator
    participant Interceptor as AuthInterceptor
    participant Backend as ecosif-moviments

    User->>Form: Preenche formulƔrio
    User->>Form: Clica em "Salvar"
    Form->>Validator: ValidaĆ§Ć£o de formulĆ”rio
    alt FormulƔrio vƔlido
        Validator-->>Form: VƔlido
        Form->>Service: createEntry(entryData)
        Service->>Interceptor: POST /api/v1/entries
        Interceptor->>Backend: RequisiĆ§Ć£o autenticada
        Backend-->>Interceptor: 201 Created + entry
        Interceptor-->>Service: Observable<Entry>
        Service-->>Form: Entry criado
        Form->>Form: Mostra mensagem de sucesso
        Form->>User: Feedback visual
    else FormulƔrio invƔlido
        Validator-->>Form: Erros de validaĆ§Ć£o
        Form->>User: Exibe erros no formulƔrio
    end

šŸ” Fluxo 4: ConfiguraĆ§Ć£o DinĆ¢mica (Runtime Config)

DescriĆ§Ć£o

Carregamento de configuraĆ§Ć£o em runtime antes da inicializaĆ§Ć£o da aplicaĆ§Ć£o.

Diagrama de SequĆŖncia

sequenceDiagram
    participant App as App Initializer
    participant Config as AppConfigService
    participant HTTP as HttpClient
    participant Server as Nginx/assets
    participant Services as Services

    App->>Config: loadConfig()
    Config->>HTTP: GET /assets/config/config.json
    HTTP->>Server: RequisiĆ§Ć£o de config
    Server-->>HTTP: config.json
    HTTP-->>Config: AppConfig
    Config->>Config: this.config = data
    Config-->>App: Config carregada
    App->>Services: Services podem usar config
    Services->>Config: getConfig().apiEndpoints.auth
    Config-->>Services: URL da API

šŸ”„ Fluxo 5: Lazy Loading de MĆ³dulo

DescriĆ§Ć£o

Carregamento sob demanda de mĆ³dulos grandes (lazy loading).

Diagrama de SequĆŖncia

sequenceDiagram
    participant User as UsuƔrio
    participant Router as Angular Router
    participant Module as DashboardModule
    participant Component as DashboardComponent
    participant Service as DashboardService

    User->>Router: Navega para /dashboard
    Router->>Router: Detecta lazy route
    Router->>Router: loadChildren: () => import(...)
    Router->>Module: Carrega mĆ³dulo
    Module->>Module: Inicializa providers
    Module->>Component: Cria DashboardComponent
    Component->>Component: ngOnInit()
    Component->>Service: getDashboardData()
    Service->>Backend: RequisiĆ§Ć£o HTTP
    Backend-->>Service: Dados
    Service-->>Component: Dados
    Component->>User: Exibe dashboard

āš ļø Fluxo 6: Tratamento de Erros

DescriĆ§Ć£o

Fluxo completo de tratamento de erros HTTP e exibiĆ§Ć£o ao usuĆ”rio.

Diagrama de SequĆŖncia

sequenceDiagram
    participant Component as Component
    participant Service as Service
    participant Interceptor as AuthInterceptor
    participant Backend as Backend
    participant ErrorHandler as ErrorHandlerService
    participant UI as Toast/Modal

    Component->>Service: getData()
    Service->>Interceptor: HTTP GET
    Interceptor->>Backend: RequisiĆ§Ć£o
    Backend-->>Interceptor: 500 Internal Server Error
    Interceptor->>ErrorHandler: handleError(error)
    ErrorHandler->>ErrorHandler: Loga erro
    ErrorHandler->>UI: Mostra notificaĆ§Ć£o de erro
    ErrorHandler-->>Service: Observable error
    Service-->>Component: Error observable
    Component->>Component: Error handler (catchError)
    Component->>UI: Feedback ao usuƔrio

šŸ“± Fluxo 7: NavegaĆ§Ć£o entre Rotas

DescriĆ§Ć£o

Fluxo de navegaĆ§Ć£o protegida com verificaĆ§Ć£o de autenticaĆ§Ć£o.

Diagrama de SequĆŖncia

sequenceDiagram
    participant User as UsuƔrio
    participant Router as Router
    participant Guard as AuthGuard
    participant Auth as AuthService
    participant Component as Component

    User->>Router: Navega para /company_detail
    Router->>Guard: canActivate()
    Guard->>Auth: isAuthenticated()
    Auth->>Auth: Verifica token
    alt Token vƔlido
        Auth-->>Guard: true
        Guard-->>Router: Permite acesso
        Router->>Component: Cria componente
        Component->>User: Exibe pƔgina
    else Token invƔlido
        Auth-->>Guard: false
        Guard->>Router: Bloqueia acesso
        Router->>Router: navigate(['/login'])
        Router->>User: Redireciona para login
    end

ƚltima AtualizaĆ§Ć£o: 2025-12-01