@corp-products/ui-components 3.5.8 → 3.6.0

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

@@ -0,0 +1,140 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, 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 {
+  @Input() items: BreadcrumbItem[] | undefined;
+  isShown: boolean;
+
+  constructor(private activatedRoute: ActivatedRoute, private router: Router) {}
+
+  ngOnInit(): void {
+    if (this.items) {
+      this.isShown = true;
+      return;
+    }
+    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.isShown = !!activeBreadcrumb?.isShown;
+  }
+
+  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 isShown = !!child.snapshot.data['isShown'];
+      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,
+          isShown,
+        };
+
+        // 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].isShown;
+    this.items = this.items.filter((b) => b.label !== '');
+    this.items[this.items.length - 1].isShown = 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/app-breadcrumb/app-breadcrumb.interface.ts

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

package/src/lib/app-button/app-button.component.html

@@ -0,0 +1,7 @@
+<p-button (onFocus)="onFocus.emit()" (onBlur)="onBlur.emit()" (onClick)="onClick.emit()" [size]="size"
+  [loadingIcon]="loadingIcon" [disabled]="disabled" [iconPos]="iconPos" [icon]="icon" [label]="label"
+  [rounded]="rounded" [severity]="severity" [styleClass]="styleClass" [text]="text" [variant]="variant"
+  [loading]="loading" [autofocus]="autofocus" [link]="link" [plain]="plain" [raised]="raised"
+  [loadingIcon]="loadingIcon" [style]="style" [outlined]="outlined">
+  <ng-content></ng-content>
+</p-button>

package/src/lib/app-button/app-button.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { Button, ButtonModule, ButtonStyle } from 'primeng/button';
+
+@Component({
+  imports: [ButtonModule],
+  selector: 'app-button',
+  standalone: true,
+  encapsulation: ViewEncapsulation.None,
+  styleUrl: './app-button.component.scss',
+  templateUrl: './app-button.component.html',
+  providers: [ButtonStyle],
+})
+export class AppButtonComponent extends Button {
+}

package/src/lib/app-button/app-button.ts

@@ -0,0 +1,15 @@
+export type AppButtonSeverity =
+  | 'success'
+  | 'info'
+  | 'warn'
+  | 'danger'
+  | 'help'
+  | 'primary'
+  | 'secondary'
+  | 'contrast';
+
+export type AppButtonSize = 'large' | 'small';
+
+export type AppButtonIconPos = 'left' | 'right' | 'top' | 'bottom';
+
+export type AppButtonVariant = 'outlined' | 'text' | undefined;

package/src/lib/app-button/index.ts

@@ -0,0 +1,2 @@
+export * from './app-button';
+export * from './app-button.component';

package/src/lib/app-dropdown-menu/app-dropdown-menu.component.html

@@ -0,0 +1,22 @@
+@if (showMenu) {
+<app-button (click)="op.toggle($event)" [class]="buttonClass" [iconPos]="buttonIconPosition" [icon]="buttonIcon"
+  [label]="buttonTitle" [styleClass]="buttonStyle" [severity]="buttonSeverity" />
+}
+<p-popover #op [styleClass]="popupMenuStyle === 'white' ? 'white-menu' : 'purple-menu'">
+  <div class="flex flex-col gap-4 text-sm md:text-xs">
+    <ul>
+      @for (item of menuItems; track $index) {
+      @if (item.show) {
+      <li [ngClass]="{'flex-row-reverse': item.iconPosition === 'right'}"
+        [class]="'flex justify-between min-w-[130px] gap-1 items-center cursor-pointer text-sm ' + (item.textColor | popupTextColorClass)"
+        (click)="onMenuItemClick(item)">
+        {{ item.title | translate }}
+        @if (item.icon) {
+        <i [class]="item.icon"></i>
+        }
+      </li>
+      }
+      }
+    </ul>
+  </div>
+</p-popover>

package/src/lib/app-dropdown-menu/app-dropdown-menu.component.scss

@@ -0,0 +1,39 @@
+.p-popover {
+  box-shadow: none;
+  &:is(.purple-menu) {
+    @apply bg-primary text-white text-sm mt-2;
+    li:not(:last-child) {
+      @apply border-b-2 border-purple-700;
+    }
+  }
+  &:is(.white-menu) {
+    li:not(:last-child) {
+      @apply border-b;
+    }
+  }
+  border-radius: 3px;
+  margin-top: 13px;
+  &::before, &::after {
+    display: none;
+  }
+  .p-popover-content {
+    width: auto;
+    min-width: unset;
+
+    ul {
+      li {
+        @apply py-3;
+        &:hover {
+          opacity: 0.7;
+        }
+      }
+      li:first-child {
+        @apply pt-0
+      }
+      li:last-child {
+        @apply pb-0
+      }
+    }
+
+  }
+}

package/src/lib/app-dropdown-menu/app-dropdown-menu.component.spec.ts

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

package/src/lib/app-dropdown-menu/app-dropdown-menu.component.ts

@@ -0,0 +1,43 @@
+import {Component, inject, Input, OnInit, ViewEncapsulation} from '@angular/core';
+import { AppButtonComponent } from '../app-button';
+import { Popover } from 'primeng/popover';
+import { DropdownMenuItem } from './app-dropdown-menu';
+import {Router} from '@angular/router';
+import {AppButtonIconPos, AppButtonSeverity} from '../app-button';
+import { TranslateModule } from '@ngx-translate/core';
+import {NgClass} from "@angular/common";
+import {MenuPopupTextColorPipe} from "./menu-popup.pipe";
+
+@Component({
+  selector: "app-dropdown-menu",
+  standalone: true,
+  imports: [AppButtonComponent, Popover, TranslateModule, NgClass, MenuPopupTextColorPipe],
+  templateUrl: "./app-dropdown-menu.component.html",
+  styleUrl: "./app-dropdown-menu.component.scss",
+  encapsulation: ViewEncapsulation.None
+})
+export class AppDropdownMenuComponent implements OnInit {
+  @Input({ required: true }) buttonTitle: string;
+  @Input({ required: true }) menuItems: DropdownMenuItem[] = [];
+  @Input() popupMenuStyle: "white" | "purple" = "purple";
+  @Input() buttonIcon = "font-icon-plus";
+  @Input() buttonClass: string;
+  @Input() buttonStyle: string;
+  @Input() buttonSeverity: AppButtonSeverity;
+  @Input() buttonIconPosition: AppButtonIconPos = "left";
+  router = inject(Router);
+
+  showMenu: boolean;
+  ngOnInit() {
+    this.showMenu = this.menuItems.some((item) => {
+      return item.show;
+    });
+  }
+  onMenuItemClick(item: DropdownMenuItem): void {
+    if (item.callback) {
+      item.callback();
+    } else if (item.routerLink) {
+      this.router.navigate(Array.isArray(item.routerLink) ? item.routerLink : [item.routerLink], { queryParams: item.queryParams || {} });
+    }
+  }
+}

package/src/lib/app-dropdown-menu/app-dropdown-menu.ts

@@ -0,0 +1,17 @@
+import {Params} from "@angular/router";
+import {AppButtonIconPos} from "../app-button";
+
+export interface DropdownMenuItem {
+  title: string;
+  routerLink?: string;
+  queryParams?: Params;
+  callback?: () => void;
+  icon?: string;
+  show?: boolean;
+  // TODO: add type
+  permissionKey?: string;
+  permissionAction?: string;
+  iconPosition?: AppButtonIconPos;
+  textColor?: DropdownTextColor;
+}
+export type DropdownTextColor = 'white' | 'purple' | 'green';

package/src/lib/app-dropdown-menu/index.ts

@@ -0,0 +1,2 @@
+export * from './app-dropdown-menu';
+export * from './app-dropdown-menu.component';

package/src/lib/app-dropdown-menu/menu-popup.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {DropdownTextColor} from "./app-dropdown-menu";
+
+@Pipe({
+  name: 'popupTextColorClass',
+  standalone: true,
+  pure: true
+})
+export class MenuPopupTextColorPipe implements PipeTransform {
+  transform(color?: DropdownTextColor): string {
+    switch (color) {
+      case 'white': return 'text-white';
+      case 'purple': return 'text-purple-500';
+      case 'green': return 'text-green-500';
+      default: return 'text-white';
+    }
+  }
+}

package/src/lib/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/app-header/app-header.component.ts

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

package/src/lib/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/app-side-menu/app-side-menu.component.ts

@@ -0,0 +1,28 @@
+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 { NgClass } from "@angular/common";
+@Component({
+  selector: "app-side-menu",
+  standalone: true,
+  imports: [RouterModule, NgClass],
+  templateUrl: "./app-side-menu.component.html",
+  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);
+      return;
+    });
+  }
+}

package/src/lib/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/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/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/app-tabs/app-tab.interface.ts

@@ -0,0 +1,27 @@
+import { TemplateRef } from "@angular/core";
+
+interface Tab {
+  title: string;
+  iconName?: string;
+  iconPathCount?: number;
+  disabled?: boolean;
+  count?: number;
+  permissionKey?: string;
+}
+
+export interface RoutedTab extends Tab {
+  link: string;
+}
+export interface TemplateTab<T = unknown> extends Tab {
+  contentTemplate: TemplateRef<unknown>;
+  queryParamValue?: T;
+}
+
+
+export type AppTabs = ({
+  isRouted: true;
+  items: RoutedTab[];
+} | {
+  isRouted: false;
+  items: TemplateTab[];
+})

package/src/lib/app-tabs/app-tabs.component.html

@@ -0,0 +1,37 @@
+@if (tabs && tabs.items.length) {
+<div [class]="tabsStyle + (responsive ? ' full-width' : '') + ' tabs-container'">
+  <p-tabs [value]="selectedTabIndex() || activeTabIndex" scrollable>
+    <p-tablist>
+
+      @for (tab of tabs.items; let i = $index; track i) {
+      <p-tab [value]="i" [routerLink]="tabs.isRouted ? $any(tab).link : null" [disabled]="tab.disabled"
+        (click)="onTabChange(i)">
+        @if (tab.iconName) {
+        <app-ico-moon-card [iconClass]="'text-[17px]'" [iconName]="tab.iconName"
+          [iconPathCount]="tab.iconPathCount || 0" />
+        }
+        <span>{{ tab.title | translate }}
+          @if (tab.count || tab.count === 0) {
+          <p-badge [value]="getTabCount(tab.count)" severity="secondary" />
+          }
+        </span>
+      </p-tab>
+      }
+
+    </p-tablist>
+
+    <p-tabpanels>
+      @if (tabs.isRouted) {
+      <router-outlet></router-outlet>
+      } @else {
+      @for (tab of tabs.items; let i = $index; track i) {
+      <p-tabpanel [value]="i">
+        <ng-container [ngTemplateOutlet]="tab.contentTemplate"></ng-container>
+      </p-tabpanel>
+      }
+      }
+
+    </p-tabpanels>
+  </p-tabs>
+</div>
+}