@cccteam/ccc-lib 0.0.13 → 0.0.15

package/src/types/constants.ts

@@ -0,0 +1 @@
+export const defaultEmptyFieldValue = '-';

package/src/types/core.actions.ts

@@ -0,0 +1,33 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+// no-namespace rule is disabled because action hygiene prevents import pollution
+
+import { CreateNotificationMessage } from './notification-message';
+
+export namespace ApiInterceptorAction {
+  export class BeginActivity {
+    static readonly type = '[ApiInterceptor] Add Loading Activity';
+    constructor(public process: string) {}
+  }
+  export class EndActivity {
+    static readonly type = '[ApiInterceptor] Remove Loading Activity';
+    constructor(public process: string) {}
+  }
+  export class PublishError {
+    static readonly type = '[ApiInterceptor] Publish Error';
+    constructor(public message: CreateNotificationMessage) {}
+  }
+  export class SetRedirectUrl {
+    static readonly type = '[ApiInterceptor] Set Redirect Url';
+    constructor(public redirectUrl: string) {}
+  }
+}
+
+export namespace HeaderAction {
+  export class ToggleSidenav {
+    static readonly type = '[Header] Toggle Sidenav';
+  }
+
+  export class Logout {
+    static readonly type = '[Header] User Logout';
+  }
+}

package/src/types/{public-api.d.ts → index.ts}

@@ -1,6 +1,9 @@
 export * from './auth.actions';
+export * from './configs';
+export * from './constants';
 export * from './core.actions';
 export * from './notification-message';
 export * from './permissions';
 export * from './session-info';
 export * from './tokens';
+

package/src/types/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

package/src/types/notification-message.ts

@@ -0,0 +1,20 @@
+export enum AlertLevel {
+  ERROR = 'warn',
+  INFO = 'accent',
+  SUCCESS = 'success',
+}
+
+export interface CreateNotificationMessage {
+  duration?: number;
+  message: string;
+  link: string;
+  level: AlertLevel;
+}
+
+export interface NotificationMessage {
+  id: number;
+  duration?: number;
+  message: string;
+  link: string;
+  level: AlertLevel;
+}

package/src/types/{permissions.d.ts → permissions.ts}

@@ -1,17 +1,17 @@
-type Brand<K, T> = K & {
-    __brand: T;
-};
+type Brand<K, T> = K & { __brand: T };
+
 export type Permission = Brand<string, 'Permission'>;
 export type Resource = Brand<string, 'Resource'>;
 export type Domain = Brand<string, 'Domain'>;
 export type FieldName = Brand<string, 'FieldName'>;
 export type Method = Brand<string, 'Method'>;
 export type DomainPermissions = Record<Domain, Record<Resource, Record<Permission, Permissions>>>;
+
 export interface PermissionScope {
-    resource: Resource;
-    permission: Permission;
-    domain: Domain;
+  resource: Resource;
+  permission: Permission;
+  domain: Domain;
 }
-export declare const ReadPermission: Permission;
-export declare const UpdatePermission: Permission;
-export {};
+
+export const ReadPermission = 'Read' as Permission;
+export const UpdatePermission = 'Update' as Permission;

package/src/types/{session-info.d.ts → session-info.ts}

@@ -1,9 +1,10 @@
 import { DomainPermissions } from './permissions';
+
 /**
  * Session Information for a logged in user
  */
 export interface SessionInfo {
-    authenticated: boolean;
-    username: string;
-    permissions: DomainPermissions;
+  authenticated: boolean;
+  username: string;
+  permissions: DomainPermissions;
 }

package/src/types/tokens.ts

@@ -0,0 +1,20 @@
+import { InjectionToken } from '@angular/core';
+import { ResourceMeta } from './configs';
+import { Domain, Permission, Resource } from './permissions';
+
+export const BASE_URL = new InjectionToken<string>('BASE_URL');
+export const API_URL = new InjectionToken<string>('API_URL');
+export const PERMISSION_REQUIRED = new InjectionToken<(resource: Resource, permission: Permission) => boolean>(
+  'PERMISSION_REQUIRED',
+);
+
+export const AVAILABLE_PERMISSIONS = new InjectionToken<{
+  Create: Permission;
+  Delete: Permission;
+  List: Permission;
+  Read: Permission;
+  Update: Permission;
+}>('AVAILABLE_PERMISSIONS');
+export const AVAILABLE_DOMAINS = new InjectionToken<Record<string, Domain>[]>('AVAILABLE_DOMAINS');
+
+export const RESOURCE_META = new InjectionToken<(resource: Resource) => ResourceMeta>('RESOURCE_META');

package/src/ui-alert/alert.component.html

@@ -0,0 +1,13 @@
+<div class="alert" [ngClass]="error.level">
+  <div class="message">
+    <span>{{ error.message }}</span>
+  </div>
+  <div class="alert-end">
+    @if (error.link) {
+    <span [routerLink]="error.link" class="link">View</span>
+    }
+    <button (click)="dismissAlert()" mat-icon-button aria-label="Close Alert">
+      <mat-icon>close</mat-icon>
+    </button>
+  </div>
+</div>

package/src/ui-alert/alert.component.scss

@@ -0,0 +1,48 @@
+.alert {
+  margin: auto;
+  border: 1px solid;
+  max-width: 450px;
+  border-radius: 5px;
+  background-color: lightgray;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.message {
+  padding-left: 15px;
+  max-width: 400px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.alert-end {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+}
+
+.link {
+  cursor: pointer;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.warn {
+  border-color: red;
+  background-color: #fff5f4;
+}
+
+.accent {
+  border-color: #dfb51d;
+  background-color: #fff8e0;
+}
+
+.success {
+  border-color: #4caf50;
+  background-color: #f0fff0;
+}

package/src/ui-alert/alert.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlertComponent } from './alert.component';
+
+describe('AlertComponent', () => {
+  let component: AlertComponent;
+  let fixture: ComponentFixture<AlertComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AlertComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AlertComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/ui-alert/alert.component.ts

@@ -0,0 +1,35 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnInit, Output, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { RouterModule } from '@angular/router';
+import { NotificationMessage } from '@cccteam/ccc-lib/src/types';
+import { NotificationService } from '@cccteam/ccc-lib/src/ui-notification-service';
+
+@Component({
+  selector: 'ccc-alert',
+  templateUrl: './alert.component.html',
+  styleUrls: ['./alert.component.scss'],
+  imports: [MatIconModule, MatButtonModule, CommonModule, RouterModule],
+})
+export class AlertComponent implements OnInit {
+  @Input({ required: true }) error!: NotificationMessage;
+  @Output() dismiss = new EventEmitter();
+
+  errors = inject(NotificationService);
+  ngOnInit(): void {
+    if (this.error.duration === undefined) {
+      this.error.duration = 30000;
+    }
+
+    setTimeout(() => {
+      this.dismissAlert();
+    }, this.error.duration);
+  }
+
+  dismissAlert(): void {
+    if (this.error.id !== undefined) {
+      this.errors.dismissGlobalNotification(this.error);
+    }
+  }
+}

package/src/ui-alert/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "./index.ts"
+  }
+}

package/src/ui-core-service/index.ts

@@ -0,0 +1 @@
+export * from './ui-core.service';

package/src/ui-core-service/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "./index.ts"
+  }
+}

package/src/ui-core-service/ui-core.service.ts

@@ -0,0 +1,34 @@
+import { computed, inject, Injectable, signal } from '@angular/core';
+import { CreateNotificationMessage } from '@cccteam/ccc-lib/src/types';
+import { NotificationService } from '@cccteam/ccc-lib/src/ui-notification-service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UiCoreService {
+  notifications = inject(NotificationService);
+  loadingSignal = signal([] as string[]);
+  sidenavOpened = signal(true);
+  currentSidenavIdentifier = signal('');
+
+  private loading = this.loadingSignal.asReadonly();
+  isLoading = computed(() => this.loading().length > 0);
+
+  publishError(message: CreateNotificationMessage): void {
+    this.notifications.addGlobalNotification(message);
+  }
+
+  beginActivity(process: string): void {
+    if (!this.loading().includes(process)) {
+      this.loadingSignal.update((current) => [...current, process]);
+    }
+  }
+
+  endActivity(process: string): void {
+    this.loadingSignal.update((current) => current.filter((p) => p !== process));
+  }
+
+  toggleSidenav(): void {
+    this.sidenavOpened.update((opened) => !opened);
+  }
+}

package/src/ui-interceptor/api.interceptor.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ApiInterceptor } from './api.interceptor';
+
+xdescribe('ApiInterceptor', () => {
+  beforeEach(() =>
+    TestBed.configureTestingModule({
+      providers: [ApiInterceptor],
+    }),
+  );
+
+  it('should be created', () => {
+    const interceptor: ApiInterceptor = TestBed.inject(ApiInterceptor);
+    expect(interceptor).toBeTruthy();
+  });
+});

package/src/ui-interceptor/api.interceptor.ts

@@ -0,0 +1,45 @@
+import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+import { inject, Injectable, NgZone } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from '@cccteam/ccc-lib/src/auth-service';
+import { AlertLevel, BASE_URL } from '@cccteam/ccc-lib/src/types';
+import { UiCoreService } from '@cccteam/ccc-lib/src/ui-core-service';
+import { CUSTOM_HTTP_REQUEST_OPTIONS } from '@cccteam/ccc-lib/src/util-request-options';
+import { catchError, finalize, Observable, throwError } from 'rxjs';
+
+@Injectable()
+export class ApiInterceptor implements HttpInterceptor {
+  private ui = inject(UiCoreService);
+  private auth = inject(AuthService);
+  private router = inject(Router);
+  private ngZone = inject(NgZone);
+  private baseUrl = inject(BASE_URL);
+
+  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+    this.ui.beginActivity(request.method + ' ' + request.url);
+
+    return next.handle(request).pipe(
+      catchError((error: HttpErrorResponse): Observable<HttpEvent<unknown>> => {
+        if (error.status === 401) {
+          this.ngZone.run(() => {
+            this.auth.redirectUrl.set(this.baseUrl + this.router.url);
+            this.router.navigate(['/login']);
+          });
+        }
+        if (!request.context.get(CUSTOM_HTTP_REQUEST_OPTIONS).suppressGlobalError) {
+          const message = error.error?.message ?? error.message ?? error.error;
+          this.ui.publishError({
+            message: message,
+            level: AlertLevel.ERROR,
+            link: '',
+          });
+        }
+
+        return throwError(() => error);
+      }),
+      finalize(() => {
+        this.ui.endActivity(request.method + ' ' + request.url);
+      }),
+    );
+  }
+}

package/src/ui-interceptor/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "./index.ts"
+  }
+}

package/src/ui-notification-service/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "./index.ts"
+  }
+}

package/src/ui-notification-service/notification.service.ts

@@ -0,0 +1,59 @@
+import { Injectable, signal } from '@angular/core';
+import { CreateNotificationMessage, NotificationMessage } from '@cccteam/ccc-lib/src/types';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class NotificationService {
+  private notificationId = signal(0);
+  private _notifications = signal<NotificationMessage[]>([]);
+  notifications = this._notifications.asReadonly();
+
+  /**
+   * Adds a new global notification.
+   * @param notification The notification message to add.
+   * @returns The unique ID assigned to the notification.
+   */
+  addGlobalNotification(notification: CreateNotificationMessage): number {
+    this.notificationId.update((id) => id + 1);
+    const newNotification: NotificationMessage = {
+      ...notification,
+      id: this.notificationId(),
+    };
+    const existingNotification = this._notifications().find((n) => n.message === newNotification.message);
+    if (existingNotification) {
+      this.updateNotification({ ...existingNotification, ...newNotification });
+      return existingNotification.id;
+    }
+    this._notifications.update((current) => [...current, newNotification]);
+    return newNotification.id;
+  }
+
+  /**
+   * Dismisses a global notification by its ID.
+   * @param notificationId The ID of the notification to dismiss.
+   */
+  dismissGlobalNotificationById(notificationId: number): void {
+    this._notifications.update((current) => current.filter((notification) => notification.id !== notificationId));
+  }
+
+  /**
+   * Dismisses a specific global notification.
+   * @param notification The notification to dismiss.
+   */
+  dismissGlobalNotification(notification: NotificationMessage): void {
+    this.dismissGlobalNotificationById(notification.id);
+  }
+
+  /**
+   * Updates an existing notification.
+   * @param updatedNotification The notification with updated information.
+   */
+  updateNotification(updatedNotification: NotificationMessage): void {
+    this._notifications.update((current) =>
+      current.map((notification) =>
+        notification.id === updatedNotification.id ? { ...notification, ...updatedNotification } : notification,
+      ),
+    );
+  }
+}

package/src/ui-sidenav/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "./index.ts"
+  }
+}

package/src/ui-sidenav/sidenav.component.html

@@ -0,0 +1,60 @@
+<div class="nav-container">
+  <nav>
+    @for (navItem of currentNav(); track navItem) {
+      <ng-container *ngTemplateOutlet="typeRendererTemplate; context: { navItem: navItem }"></ng-container>
+    }
+  </nav>
+</div>
+<ng-template #typeRendererTemplate let-navItem="navItem">
+  @switch (navItem.type) {
+    @case ('header') {
+      <ng-container [ngTemplateOutlet]="headerTemplate" [ngTemplateOutletContext]="{ navItem: navItem }"></ng-container>
+    }
+    @case ('link') {
+      <ng-container [ngTemplateOutlet]="linkTemplate" [ngTemplateOutletContext]="{ navItem: navItem }"></ng-container>
+    }
+    @case ('expandable') {
+      <ng-container
+        [ngTemplateOutlet]="expandableTemplate"
+        [ngTemplateOutletContext]="{ navItem: navItem }"></ng-container>
+    }
+  }
+</ng-template>
+<ng-template #headerTemplate let-navItem="navItem">
+  <div class="link-header">{{ navItem.label }}</div>
+</ng-template>
+<ng-template #linkTemplate let-navItem="navItem">
+  <a [routerLink]="navItem.routerLink" *cccHasPermission="navItem.permission">
+    <div class="nav-item" routerLinkActive="active-link">
+      <div class="link-button">
+        <div class="icon">
+          <mat-icon class="material-icons-outlined" [inline]="true">
+            {{ navItem.icon }}
+          </mat-icon>
+        </div>
+        <div class="text">
+          {{ navItem.label | titlecase }}
+        </div>
+      </div>
+    </div>
+  </a>
+</ng-template>
+<ng-template #expandableTemplate let-navItem="navItem">
+  <div class="nav-item" aria-hidden="true" (click)="navItem.isExpanded = !navItem.isExpanded">
+    <div class="link-button">
+      <div class="icon">
+        <mat-icon class="material-icons-outlined" [inline]="true">
+          {{ navItem.isExpanded ? 'expand_less' : 'expand_more' }}
+        </mat-icon>
+      </div>
+      <div class="text">{{ navItem.label }}</div>
+    </div>
+  </div>
+  @if (navItem.isExpanded) {
+    <div class="expandable-links">
+      @for (navItemChild of navItem.children; track navItemChild) {
+        <ng-container *ngTemplateOutlet="typeRendererTemplate; context: { navItem: navItemChild }"> </ng-container>
+      }
+    </div>
+  }
+</ng-template>

package/src/ui-sidenav/sidenav.component.scss

@@ -0,0 +1,99 @@
+.nav-container {
+  padding: 0;
+  height: 100%;
+}
+
+nav {
+  max-width: 100%;
+  margin: 0px 10px;
+}
+
+.nav-item {
+  width: 100%;
+  height: 48px;
+  font-size: 18px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: #003b49;
+  padding: 0px 15px;
+  position: relative;
+}
+
+.nav-item:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+  transition: background-color 0.1s ease;
+}
+
+.nav-item:active {
+  background-color: rgba(0, 0, 0, 0.1);
+  transition: background-color 0.1s ease;
+}
+
+.link-header {
+  color: #003b49;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 12px;
+  margin: 20px 0px 0px 5px;
+}
+
+.link-button {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+
+  .icon {
+    min-width: 20px;
+    margin-right: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .text {
+    margin-right: 10px;
+    text-align: left;
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    text-decoration: capitalize;
+  }
+}
+
+.expandable-links {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding-left: 30px;
+}
+
+a:active {
+  color: #003b49 !important;
+}
+
+a:link {
+  color: #003b49 !important;
+}
+
+a:visited {
+  color: #003b49 !important;
+}
+
+a {
+  text-decoration: none;
+}
+
+.active-link::before {
+  content: '';
+  position: absolute;
+  left: 3px;
+  width: 5px;
+  height: 38px;
+  background-color: #003b49;
+}
+
+.active-link {
+  background-color: rgba(0, 0, 0, 0.04);
+  position: relative;
+}

package/src/ui-sidenav/sidenav.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidenavComponent } from './sidenav.component';
+
+describe('SidenavComponent', () => {
+  let component: SidenavComponent;
+  let fixture: ComponentFixture<SidenavComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SidenavComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SidenavComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});