@corp-products/app-core 0.0.1

package/README.md

@@ -0,0 +1,3 @@
+# core
+
+This library was generated with [Nx](https://nx.dev).

package/eslint.config.js

@@ -0,0 +1,48 @@
+const nx = require('@nx/eslint-plugin');
+const baseConfig = require('../../eslint.config.js');
+
+module.exports = [
+  ...baseConfig,
+  {
+    files: ['**/*.json'],
+    rules: {
+      '@nx/dependency-checks': [
+        'error',
+        {
+          ignoredFiles: ['{projectRoot}/eslint.config.{js,cjs,mjs}'],
+        },
+      ],
+    },
+    languageOptions: {
+      parser: require('jsonc-eslint-parser'),
+    },
+  },
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {},
+  },
+];

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/libs/core",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@corp-products/app-core",
+  "version": "0.0.1",
+  "author": "shireen Omar",
+  "description": "shared UI components across our apps",
+  "peerDependencies": {
+    "@angular/common": "^18.2.0",
+    "@angular/core": "^18.2.0",
+    "@corp-products/ui-components": "^0.0.1"
+  },
+  "keywords": [
+    "angular",
+    "library"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "sideEffects": false
+}

package/project.json

@@ -0,0 +1,29 @@
+{
+  "name": "core",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/core/src",
+  "prefix": "",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:package",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "project": "libs/core/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "libs/core/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "libs/core/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+export * from "./lib/core/services/base-pagination-service";
+export * from "./lib/core/components";
+export * from "./lib/core/services";
+export * from "./lib/core/interfaces";
+export * from "./lib/core/guards";
+export * from "./lib/core/interceptors";
+export * from "./lib/core/enums";
+export * from "./lib/core/directives";
+export * from "./lib/core/core-config";

package/src/lib/core/components/app-breadcrumb/app-breadcrumb.component.html

@@ -0,0 +1,7 @@
+@if(isShownBreadcrumb) {
+  <nav class="flex gap-x-3 text-[12px]  w-full items-center mb-5">
+    <div class="card flex justify-center">
+      <p-breadcrumb [model]="items"></p-breadcrumb>
+    </div>
+  </nav>
+}

package/src/lib/core/components/app-breadcrumb/app-breadcrumb.component.scss

@@ -0,0 +1,8 @@
+.p-breadcrumb-list {
+  li:first-child a {
+    @apply text-secondary;
+  }
+  .p-breadcrumb-separator {
+    transform: scale(0.7);
+  }
+}

package/src/lib/core/components/app-breadcrumb/app-breadcrumb.component.ts

@@ -0,0 +1,125 @@
+import {CommonModule} from '@angular/common';
+import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+import {ActivatedRoute, NavigationEnd, Router, RouterModule} from '@angular/router';
+import {MenuItem} from 'primeng/api';
+import {Breadcrumb} from 'primeng/breadcrumb';
+import {filter} from 'rxjs';
+import {BreadCrumbExtraData, BreadcrumbItem} from './app-breadcrumb.interface';
+
+@Component({
+  selector: 'app-breadcrumb',
+  templateUrl: './app-breadcrumb.component.html',
+  styleUrl: './app-breadcrumb.component.scss',
+  standalone: true,
+  imports: [CommonModule, Breadcrumb, RouterModule],
+  encapsulation: ViewEncapsulation.None,
+})
+export class AppBreadcrumbComponent implements OnInit {
+  items: BreadcrumbItem[] | undefined;
+  isShownBreadcrumb: boolean;
+
+  constructor(private activatedRoute: ActivatedRoute, private router: Router) {
+  }
+
+  ngOnInit(): void {
+    this.router.events
+      .pipe(filter(event => event instanceof NavigationEnd))
+      .subscribe((e) => {
+        // remove duplicates
+        this.items = (this._createBreadcrumbs(this.activatedRoute.root) as BreadcrumbItem[]).filter(
+          (item, index, self) =>
+            index === self.findIndex((t) => t.label === item.label && t.routerLink === item.routerLink)
+        );
+        this._checkHiddenBreadcrumb();
+        this._checkEmpty();
+      });
+  }
+
+  private _checkHiddenBreadcrumb() {
+    const activeBreadcrumb = this.items?.find((item) => {
+      return item.routerLink === this.router.url
+    });
+    this.isShownBreadcrumb = !!activeBreadcrumb?.isShownBreadcrumb
+  }
+
+  private _createBreadcrumbs(activatedRoute: ActivatedRoute, routerLink = '', breadcrumbs: MenuItem[] = []): any {
+    const children: ActivatedRoute[] = activatedRoute.children;
+
+    if (children.length === 0) {
+      return breadcrumbs;
+    }
+
+    for (const child of children) {
+      const routeURL: string = child.snapshot.url.map(segment => segment.path).join('/');
+      if (routeURL !== '') {
+        routerLink += `/${routeURL}`;
+      }
+
+      let label = child.snapshot.data["breadcrumb"];
+      const notClickableBreadcrumb = !!child.snapshot.data["notClickableBreadcrumb"];
+      const isShownBreadcrumb = !!child.snapshot.data["isShownBreadcrumb"];
+      const extraBreadcrumbs: BreadCrumbExtraData[] = child.snapshot.data["extraBreadcrumbs"] || [];
+      if (!(typeof label === 'undefined' || label === null)) {
+        const data = activatedRoute.snapshot.firstChild?.data || {};
+        // Resolve dynamic breadcrumb label
+        if (label && label.startsWith("[") && label.endsWith("]")) {
+          label = this._getRecursiveKey(data, label.slice(1, -1).split("."));
+        }
+
+        // Resolve dynamic URL parts
+        const resolveDynamicUrl = (route: string): string => {
+          return route.replace(/\[([^\]]+)]/g, (_, key) => this._getRecursiveKey(data, key.split(".")) || '');
+        };
+
+        const mainBreadcrumb: MenuItem = {label, routerLink, data, notClickableBreadcrumb, isShownBreadcrumb};
+
+        // Process extra breadcrumbs
+        const beforeBreadcrumbs: MenuItem[] = [];
+        const afterBreadcrumbs: MenuItem[] = [];
+
+        extraBreadcrumbs.forEach(extra => {
+          let extraLabel = extra.label || '';
+          if (extraLabel.startsWith("[") && extraLabel.endsWith("]")) {
+            extraLabel = this._getRecursiveKey(data, extraLabel.slice(1, -1).split("."));
+          }
+
+          const extraUrl = resolveDynamicUrl(extra.routerLink || '');
+
+          const extraBreadcrumb: MenuItem = {...extra, label: extraLabel, routerLink: extraUrl};
+
+          if (extra.position === "before") {
+            beforeBreadcrumbs.push(extraBreadcrumb);
+          } else {
+            afterBreadcrumbs.push(extraBreadcrumb);
+          }
+        });
+
+        // Merge breadcrumbs
+        breadcrumbs.push(...beforeBreadcrumbs, mainBreadcrumb, ...afterBreadcrumbs);
+      }
+      return this._createBreadcrumbs(child, routerLink, breadcrumbs);
+    }
+  }
+
+  private _checkEmpty() {
+    if (!this.items) return
+    const lastBreadcrumbVisibility = this.items[this.items.length - 1].isShownBreadcrumb;
+    this.items = this.items.filter(b => b.label !== '');
+    this.items[this.items.length - 1].isShownBreadcrumb = lastBreadcrumbVisibility;
+  }
+
+  private _getRecursiveKey(obj: Record<string, any>, keys: string[]): any | undefined {
+    if (keys.length === 0) {
+      return undefined;
+    }
+
+    const [currentKey, ...remainingKeys] = keys;
+    if (currentKey in obj) {
+      if (remainingKeys.length > 0) {
+        return this._getRecursiveKey(obj[currentKey], remainingKeys);
+      }
+      return obj[currentKey];
+    }
+    return undefined;
+  };
+}

package/src/lib/core/components/app-breadcrumb/app-breadcrumb.interface.ts

@@ -0,0 +1,15 @@
+import {MenuItem} from "primeng/api";
+
+export interface BreadcrumbItem {
+  notClickableBreadcrumb: boolean;
+  label: string;
+  routerLink: string;
+  isShownBreadcrumb: boolean;
+  extraBreadcrumbs?: BreadCrumbExtraData[];
+}
+
+export interface BreadCrumbPosition {
+  position: 'before' | 'after'
+}
+
+export type BreadCrumbExtraData = MenuItem & BreadCrumbPosition;

package/src/lib/core/components/app-header/app-header.component.html

@@ -0,0 +1,26 @@
+<div class="px-10 flex justify-between items-center bg-white shadow-md py-3 h-16">
+  <div class="d-flex md:hidden w-fit">
+    <!-- Burger Icon for Mobile -->
+    <app-button icon="font-icon-burger-icon text-[25px]" size="large" variant="text"
+                (clickEmitter)="toggleMenu.emit()"/>
+  </div>
+  <div class="d-flex items-center justify-content-between gap-1">
+    <app-button
+      *hasPermissions="[PermissionsActions.CREATE];key: UserPermissionsEnum.BOD"
+      iconPos="right" icon="font-icon-plus" (clickEmitter)="createButtonClicked.emit()"
+                [title]="'actions.create' | translate"/>
+  </div>
+
+  <div class="flex items-center gap-1">
+    @if (userInfo) {
+      <div class="flex flex-col items-end justify-center">
+        <p class="text-sm">{{ userInfo.userName }}</p>
+        <p class="text-gray-500 mb-0 text-[10px]">{{ userInfo.email }}</p>
+      </div>
+
+      <img src="assets/images/user-placeholder.jpg" class="w-9 h-9 object-cover rounded-full" alt=""/>
+    }
+    <p-menu #menu [model]="items" [popup]="true"></p-menu>
+    <button (click)="menu.toggle($event)" class="mb-2"><i class="font-icon-Vector text-[6px]"></i></button>
+  </div>
+</div>

package/src/lib/core/components/app-header/app-header.component.ts

@@ -0,0 +1,48 @@
+import { Component, EventEmitter, Input, Output, ViewEncapsulation } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { AppButtonComponent } from "@corp-products/ui-components";
+import { MenuItem } from "primeng/api";
+import { Menu } from "primeng/menu";
+import { AuthService } from "../../services";
+import { finalize } from "rxjs";
+import { UserInfo } from "../../interfaces";
+import { TranslatePipe } from "@ngx-translate/core";
+import { PermissionsActions, UserPermissionsEnum } from "../../enums";
+import { HasPermissionsDirective } from "../../directives";
+@Component({
+  selector: "app-header",
+  templateUrl: "./app-header.component.html",
+  styleUrl: "./app-header.component.scss",
+  standalone: true,
+  imports: [RouterModule, AppButtonComponent, Menu, TranslatePipe, HasPermissionsDirective],
+  encapsulation: ViewEncapsulation.None
+})
+export class AppHeaderComponent {
+  @Output() createButtonClicked = new EventEmitter();
+  @Output() toggleMenu = new EventEmitter<boolean>();
+  @Input() userInfo: UserInfo;
+  items: MenuItem[] | undefined = [
+    {
+      items: [
+        {
+          label: "خــــروج",
+          command: () => this.logout()
+        }
+      ]
+    }
+  ];
+  UserPermissionsEnum = UserPermissionsEnum;
+  PermissionsActions = PermissionsActions;
+  constructor(private authService: AuthService) {}
+
+  logout(): void {
+    this.authService
+      .logoutFromSSO()
+      .pipe(
+        finalize(() => {
+          this.authService.clearAuth();
+        })
+      )
+      .subscribe();
+  }
+}

package/src/lib/core/components/app-side-menu/app-side-menu.component.html

@@ -0,0 +1,20 @@
+<nav
+  [ngClass]="{ 'max-w-0 md:max-w-[500px]': !isOpen, 'max-w-[500px]': isOpen  }"
+  class="md:flex h-100 bg-primary flex text-white flex-col py-2 text-center gap-y-10 transition-all w-24 hover:md:w-48 duration-500">
+  <a [routerLink]="'/'"><i class="font-icon-STC-Logo text-[20px] pt-4 block px-4"></i></a>
+  <ul class="flex flex-col flex-grow">
+    @for (item of filteredMenu; track $index) {
+      <li>
+        <a
+          [routerLinkActive]="'bg-primary_dark border-secondary'"
+          [routerLink]="item.link"
+          class="flex flex-col py-3 px-4 border-r-2 border-primary transition-all hover:bg-primary_dark hover:border-secondary">
+          <i [class]="item.icon + ' text-[17px] mb-1'"></i>
+          <span class="text-[10px] truncate">{{ item.label }}</span>
+        </a>
+      </li>
+    }
+  </ul>
+
+  <a href="#"><i class="font-icon-setting text-[20px] pb-4 block px-4"></i></a>
+</nav>

package/src/lib/core/components/app-side-menu/app-side-menu.component.ts

@@ -0,0 +1,30 @@
+import {Component, inject, Input, OnInit, ViewEncapsulation} from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { SideMenuItem } from './side-menu';
+import { BASE_SIDE_MENU_ITEMS } from './side-menu-items';
+import {PermissionsService} from "../../services";
+import {PermissionsActions, UserPermissionsEnum} from "../../enums";
+import {NgClass} from "@angular/common";
+@Component({
+  selector: "app-side-menu",
+  standalone: true,
+  imports: [RouterModule, NgClass],
+  templateUrl: "./app-side-menu.component.html",
+  styleUrl: "./app-side-menu.component.scss",
+  encapsulation: ViewEncapsulation.None
+})
+export class AppSideMenuComponent implements OnInit {
+  @Input() isOpen!: boolean;
+  menuItems: SideMenuItem[] = BASE_SIDE_MENU_ITEMS;
+  permissionsService = inject(PermissionsService);
+  filteredMenu: SideMenuItem[];
+
+  ngOnInit(): void {
+    this.filteredMenu = this.menuItems.filter((item) => {
+      if (!item.permissionKey) {
+        return true;
+      }
+      return this.permissionsService.checkKeyHasPermission(item.permissionKey as UserPermissionsEnum, PermissionsActions.VIEW);
+    });
+  }
+}

package/src/lib/core/components/app-side-menu/routes-names.ts

@@ -0,0 +1,28 @@
+import { RouteNameItem } from "./side-menu";
+
+export const ROUTES_NAME: RouteNameItem = {
+  board: {
+    name: '/board-page',
+  },
+  users: {
+    name: '/users',
+  },
+  // reports: {
+  //   name: '/reports',
+  // },
+  meetings: {
+    name: '/meeting-page',
+  },
+  // tasks: {
+  //   name: '/tasks',
+  // },
+  // imported: {
+  //   name: '/imported',
+  // },
+  // exported: {
+  //   name: '/exported',
+  // },
+  // board: {
+  //   name: '/board',
+  // },
+};

package/src/lib/core/components/app-side-menu/side-menu-items.ts

@@ -0,0 +1,45 @@
+import { ROUTES_NAME } from './routes-names';
+import { SideMenuItem } from './side-menu';
+
+export const BASE_SIDE_MENU_ITEMS: SideMenuItem[] = [
+  {
+    label: 'الإجتماعات',
+    icon: 'font-icon-menu-board',
+    link: ROUTES_NAME['meetings'].name
+  },
+  {
+    label: 'اللجان و المجالس',
+    icon: 'font-icon-people',
+    link: ROUTES_NAME['board'].name
+  },
+  // {
+  //   label: 'المستخدمين',
+  //   icon: 'font-icon-profile-2user',
+  //   link: ROUTES_NAME['users'].name,
+  // },
+  // {
+  //   label: 'الإجتماعات',
+  //   icon: 'font-icon-menu-board',
+  //   link: ROUTES_NAME['meetings'].name,
+  // },
+  // {
+  //   label: 'مهامي',
+  //   icon: 'font-icon-task-square',
+  //   link: ROUTES_NAME['tasks'].name,
+  // },
+  // {
+  //   label: 'الوارد',
+  //   icon: 'font-icon-directbox-receive',
+  //   link: ROUTES_NAME['imported'].name,
+  // },
+  // {
+  //   label: 'الصادر',
+  //   icon: 'font-icon-directbox-send',
+  //   link: ROUTES_NAME['exported'].name,
+  // },
+  // {
+  //   label: 'التقارير',
+  //   icon: 'font-icon-status-up',
+  //   link: ROUTES_NAME['reports'].name,
+  // },
+];

package/src/lib/core/components/app-side-menu/side-menu.ts

@@ -0,0 +1,12 @@
+export interface SideMenuItem {
+  label: string;
+  icon: string;
+  link: string;
+  permissionKey?: string;
+}
+
+export interface RouteNameItem {
+  [key: string]: {
+    name: string;
+  };
+}

package/src/lib/core/components/global-loader/global-loader.component.html

@@ -0,0 +1,18 @@
+@if (loaderService.isLoading$ | async; as data) {
+  @if (data.show) {
+    <div
+      class="fixed inset-0 z-[1111] flex justify-center items-center"
+      [ngClass]="{
+       'bg-white/75': data?.isSystemLoader,
+       'absolute': !data?.isSystemLoader
+     }"
+      >
+      <div class="text-center flex flex-col gap-5 items-center">
+        <div
+          class="animate-spin inline-block w-12 h-12 border-[3px] border-current border-t-transparent text-gray-800 rounded-full">
+        </div>
+        <span>{{ 'loading' | translate }}</span>
+      </div>
+    </div>
+  }
+}

package/src/lib/core/components/global-loader/global-loader.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GlobalLoaderComponent } from 'libs/core/src/lib/core/components/global-loader/global-loader.component';
+
+describe("LoaderComponent", () => {
+  let component: GlobalLoaderComponent;
+  let fixture: ComponentFixture<GlobalLoaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [GlobalLoaderComponent]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GlobalLoaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/core/components/global-loader/global-loader.component.ts

@@ -0,0 +1,16 @@
+import { AsyncPipe, NgClass } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import {TranslatePipe} from "@ngx-translate/core";
+import {LoaderService} from "../../services";
+
+@Component({
+  selector: "global-loader",
+  templateUrl: "./global-loader.component.html",
+  styleUrls: ["./global-loader.component.scss"],
+  standalone: true,
+  imports: [AsyncPipe, NgClass, TranslatePipe]
+})
+export class GlobalLoaderComponent {
+  @Input() color: string;
+  constructor(public loaderService: LoaderService) {}
+}

package/src/lib/core/components/index.ts

@@ -0,0 +1,4 @@
+export * from './app-breadcrumb/app-breadcrumb.component';
+export * from './app-header/app-header.component';
+export * from './app-side-menu/app-side-menu.component';
+export * from './global-loader/global-loader.component';

package/src/lib/core/components/no-access/no-access.component.html

@@ -0,0 +1,10 @@
+<div class="flex items-center justify-center flex-col h-full gap-4 w-full">
+  <img [src]="imageSrc" alt="no-access" class="h-[300px]"/>
+  <strong class="text-secondary font-size-22">{{ 'oops' | translate }}</strong>
+  <p class="font-size-22 text-gray-500">{{ 'do_not_have_permission' | translate }}</p>
+
+  @if (authService.isUserLoggedIn$ | async) {
+    <app-button (click)="router.navigate(['/'])" [title]="'home' | translate"/>
+  }
+
+</div>

package/src/lib/core/components/no-access/no-access.component.ts

@@ -0,0 +1,19 @@
+import { Component, inject } from "@angular/core";
+import { Router } from "@angular/router";
+import { AuthService } from "../../services/auth.service";
+import { AsyncPipe } from "@angular/common";
+import { TranslatePipe } from "@ngx-translate/core";
+import { AppButtonComponent } from "@ui-components";
+
+@Component({
+  selector: "app-no-access",
+  templateUrl: "./no-access.component.html",
+  styleUrls: ["./no-access.component.scss"],
+  imports: [AsyncPipe, TranslatePipe, AppButtonComponent],
+  standalone: true
+})
+export class NoAccessComponent {
+  imageSrc: string = "assets/images/no-access.svg";
+  authService = inject(AuthService);
+  public router = inject(Router);
+}

package/src/lib/core/core-config.ts

@@ -0,0 +1,11 @@
+import { InjectionToken } from "@angular/core";
+
+export interface CoreConfig {
+  apiUrl: string;
+  production: boolean;
+  gatewayUrl: string;
+  loginUrl: string;
+  logoutEndpoint: string;
+}
+
+export const CORE_CONFIG = new InjectionToken<CoreConfig>("CoreConfig");

package/src/lib/core/directives/index.ts

@@ -0,0 +1 @@
+export * from './permissions.directive';