eiu-app-kit

Thư viện Angular dùng chung cho các SPA EIU: launcher ứng dụng trên header, tin Redmine / feature news, popup “Có gì mới”.

Cài qua npm

npm install eiu-app-kit

Ứng dụng Angular 15+, cùng major với peer dependencies của package.

Cấu hình AppModule (hoặc bootstrapApplication + importProvidersFrom)

import { HttpClientModule } from '@angular/common/http';
import {
  EIU_APP_API_BASE_URL,
  EIU_APP_LAUNCHER_MENU_LOADER
} from 'eiu-app-kit';
import { environment } from './environments/environment';
// import { ProjectService } from '...';

@NgModule({
  imports: [
    HttpClientModule,
    // ...
  ],
  providers: [
    { provide: EIU_APP_API_BASE_URL, useValue: environment.API_EIU_APP },
    {
      provide: EIU_APP_LAUNCHER_MENU_LOADER,
      useFactory: (project: ProjectService) => ({
        loadItems: () => project.getAllProject()
      }),
      deps: [ProjectService]
    }
  ]
})
export class AppModule {}

Kiểu phần tử từ loadItems() phải khớp EiuAppLauncherMenuItem (name_VI, imageUrl, link, sortOrder).

Module layout (ví dụ ThemeModule)

import {
  EiuAppFeatureNewsModule,
  EiuAppLauncherModule,
  EiuAppUserMenuModule
} from 'eiu-app-kit';

@NgModule({
  imports: [CommonModule, EiuAppFeatureNewsModule, EiuAppLauncherModule, EiuAppUserMenuModule]
})
export class ThemeModule {}

Template header / layout

<app-eiu-app-launcher (sidebarToggle)="onToggleMenuSidebar()"></app-eiu-app-launcher>
<app-eiu-user-menu
  [profile]="{ fullName: user.fullName, email: user.email, picture: user.picture }"
  (changePassword)="changePassword()"
  (logout)="logout()"
></app-eiu-user-menu>
<app-feature-news-dialog></app-feature-news-dialog>

sidebarToggle: host tự xử lý (NgRx, v.v.).

User menu component

app-eiu-user-menu không phụ thuộc Keycloak, TokenService hay translate pipe.

• Host truyền dữ liệu qua profile: EiuUserMenuProfile.
• Host tự xử lý logic qua events (changePassword) và (logout).
• Có thể đổi label bằng changePasswordLabel, logoutLabel.

Feature news

Inject FeatureNewsService:

• checkAndShowFeatureNews(userId, projectIdentifier) — khi có tin mới.
• showLatestFeatureNewsManually(userId, projectIdentifier) — mở thủ công.

Hằng số mặc định project Redmine: FEATURE_NEWS_REDMINE_PROJECT_IDENTIFIER.

Khi logout có localStorage.clear(), cân nhắc giữ key prefix FEATURE_NEWS_SEEN_STORAGE_KEY_PREFIX.

Monorepo (path mapping, không publish)

Trong tsconfig của app:

"paths": {
  "eiu-app-kit": ["../projects/eiu-app-kit/src/public-api.ts"]
}

Public API

Xem src/public-api.ts: modules, services, models, EIU_APP_API_BASE_URL, EIU_APP_LAUNCHER_MENU_LOADER.