techlify-inventory-common 0.0.1

package/src/app/@modules/sidebar-layout/expandable-menu/expandable-menu.component.scss

@@ -0,0 +1,20 @@
+.main-nav-items {
+  list-style: none;
+  padding-inline-start: 0;
+  margin-top: 5px;
+  margin-left: 24px;
+  border-left: 1px solid #d9d9d9;
+  font-size: 14px;
+
+  .material-symbols-outlined {
+    font-size: 20px;
+  }
+}
+a:hover,
+.active {
+  color: white !important;
+}
+a {
+  text-decoration: none;
+  color: #787486;
+}

package/src/app/@modules/sidebar-layout/expandable-menu/expandable-menu.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { MenuItem } from "../menu-item.model";
+import { TopMenuService } from "../top-menu/top-menu.service";
+
+@Component({
+  selector: "app-expandable-menu",
+  templateUrl: "./expandable-menu.component.html",
+  styleUrls: ["./expandable-menu.component.scss"],
+})
+export class ExpandableMenuComponent implements OnInit {
+  @Input() item!: MenuItem;
+  @Input() isActive: boolean = false;
+  selectedItem!: MenuItem;
+
+  constructor(public topMenuService: TopMenuService) {}
+
+  ngOnInit(): void {
+    this.topMenuService.getSelectedMenuItem().subscribe({
+      next: (item: MenuItem) => {
+        this.selectedItem = item;
+      },
+    });
+  }
+}

package/src/app/@modules/sidebar-layout/menu-item.model.ts

@@ -0,0 +1,12 @@
+import { Params } from "@angular/router";
+
+export interface MenuItem {
+  title: string;
+  icon: string;
+  link: string;
+  permissions: string[];
+  children?: MenuItem[];
+  display?: "icon" | "button";
+  action?: () => void;
+  queryParams?: Params;
+}

package/src/app/@modules/sidebar-layout/sidebar-administration-menu/sidebar-administration-menu.component.html

@@ -0,0 +1,26 @@
+<div class="sidebar-section-header">
+  <div fxLayout fxLayoutAlign="space-between center">
+    <div fxLayout fxLayoutAlign="start center" fxLayoutGap="5px">
+      <span>Administration</span>
+    </div>
+    <div fxLayout fxLayoutAlign="start center" fxLayoutGap="5px">
+      <mat-icon class="cursor-pointer" (click)="expandMore = !expandMore">
+        {{ !expandMore ? "expand_more" : "expand_less" }}
+      </mat-icon>
+    </div>
+  </div>
+</div>
+<div class="sidebar-section-content" *ngIf="expandMore">
+  <ul class="projects-list">
+    <li class="project-item" routerLinkActive="active">
+      <div fxLayout fxLayoutAlign="space-between center">
+        <a [routerLink]="['/techlify-rbac']"> Users </a>
+      </div>
+    </li>
+    <li class="project-item" routerLinkActive="active">
+      <div fxLayout fxLayoutAlign="space-between center">
+        <a class="cursor-pointer" (click)="logout()"> Logout </a>
+      </div>
+    </li>
+  </ul>
+</div>

package/src/app/@modules/sidebar-layout/sidebar-administration-menu/sidebar-administration-menu.component.ts

@@ -0,0 +1,23 @@
+import { Component } from "@angular/core";
+import { CurrentUserService } from "ngx-techlify-core";
+import { AuthenticationService, CredentialsService } from "ngx-techlify-core";
+import { Router } from "@angular/router";
+
+@Component({
+  selector: "app-sidebar-administration-menu",
+  templateUrl: "./sidebar-administration-menu.component.html",
+})
+export class SidebarAdministrationMenuComponent {
+  expandMore: boolean = false;
+
+  constructor(
+    private authenticationService: AuthenticationService,
+    private router: Router
+  ) {}
+
+  logout(): void {
+    this.authenticationService
+      .logout()
+      .subscribe(() => this.router.navigate(["/login"], { replaceUrl: true }));
+  }
+}

package/src/app/@modules/sidebar-layout/sidebar-layout/sidebar-layout.component.html

@@ -0,0 +1,32 @@
+<app-top-menu [selectedProduct]="selectedProduct"></app-top-menu>
+
+<div class="sidenav d-print-none" *ngIf="!isPrinting">
+  <div
+    fxLayout="column"
+    fxLayoutAlign="space-between"
+    style="margin-bottom: 50px; margin-top: 50px"
+  >
+    <ul class="main-nav-items">
+      <li
+        *ngFor="let item of mainMenuItems"
+        [class.active]="selectedItem && isMenuItemActive(item)"
+        (click)="topMenuService.updateSelectedMenuItem(item)"
+      >
+        <ng-container
+          *ngxPermissionsOnly="
+            item?.permissions ? item.permissions : ['client_admin', 'app_admin']
+          "
+        >
+          <app-expandable-menu
+            [item]="item"
+            [isActive]="selectedItem && isMenuItemActive(item)"
+          ></app-expandable-menu>
+        </ng-container>
+      </li>
+    </ul>
+  </div>
+</div>
+
+<div [class.main]="!isPrinting">
+  <router-outlet></router-outlet>
+</div>

package/src/app/@modules/sidebar-layout/sidebar-layout/sidebar-layout.component.scss

@@ -0,0 +1,48 @@
+$sidebar-width: 70px;
+.sidenav {
+  height: 100%;
+  width: $sidebar-width;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  overflow-x: hidden;
+  background: white;
+  border-right: 1px solid #d9d9d9;
+}
+/* Hide the scrollbar but keep scrolling functionality */
+.sidenav::-webkit-scrollbar {
+  width: 0; /* for Chrome, Safari, and Opera */
+}
+.sidenav {
+  -ms-overflow-style: none; /* for Internet Explorer and Edge */
+  scrollbar-width: none; /* for Firefox */
+}
+
+/* Optional: Add custom styles for the scrollbar track and thumb */
+.sidenav::-webkit-scrollbar-track {
+  background: transparent;
+}
+.sidenav::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+
+.main {
+  margin-left: $sidebar-width;
+  padding: 1rem;
+  margin-top: 40px;
+}
+.main-nav-items {
+  list-style: none;
+  padding-inline-start: 0;
+
+  li:hover,
+  .active {
+    background: rgba(0, 159, 221);
+    color: white !important;
+  }
+}
+.user-profile-container {
+  border-right: 1px solid #d9d9d9;
+  width: inherit;
+}

package/src/app/@modules/sidebar-layout/sidebar-layout/sidebar-layout.component.ts

@@ -0,0 +1,173 @@
+import { Component, OnInit } from "@angular/core";
+import { MenuItem } from "../menu-item.model";
+import { TopMenuService } from "../top-menu/top-menu.service";
+import { Router } from "@angular/router";
+import { MatDialog } from "@angular/material/dialog";
+import { PrintService } from "@modules/@shared/print-button/print.service";
+
+@Component({
+  selector: "app-sidebar-layout",
+  templateUrl: "./sidebar-layout.component.html",
+  styleUrls: ["./sidebar-layout.component.scss"],
+})
+export class SidebarLayoutComponent implements OnInit {
+  isPrinting: boolean = false;
+  selectedItem!: MenuItem;
+  selectedProduct!: string;
+  mainMenuItems: MenuItem[] = [
+    {
+      title: "Dashboard",
+      icon: "grid_view",
+      link: "/inventory/dashboard",
+      permissions: [],
+      children: [
+        {
+          title: "Dashboard",
+          icon: "grid_view",
+          link: "/inventory/dashboard",
+          permissions: [],
+        },
+      ],
+    },
+    {
+      title: "Product",
+      icon: "inventory",
+      link: "/inventory/products",
+      permissions: [],
+      children: [
+        {
+          title: "Products",
+          icon: "inventory",
+          link: "/inventory/products",
+          permissions: [],
+        },
+        {
+          title: "Stock Receipts",
+          icon: "inventory",
+          link: "/inventory/stock-receipts",
+          permissions: [],
+        },
+        {
+          title: "Stock Issuances",
+          icon: "inventory",
+          link: "/inventory/stock-issuances",
+          permissions: [],
+        },
+        {
+          title: "Settings",
+          icon: "settings",
+          link: "",
+          permissions: [],
+          children: [
+            {
+              title: "Category",
+              icon: "inventory",
+              link: "/inventory/categories",
+              permissions: [],
+            },
+            {
+              title: "Measure",
+              icon: "inventory",
+              link: "/inventory/measures",
+              permissions: [],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: "Supplier",
+      icon: "manage_accounts",
+      link: "/inventory/suppliers",
+      permissions: [],
+    },
+    {
+      title: "Admin",
+      icon: "shield_person",
+      link: "/administration",
+      permissions: [],
+      children: [
+        {
+          title: "Users",
+          icon: "assignment_ind",
+          link: "/administration/techlify-rbac",
+          permissions: ["user_read"],
+        },
+        {
+          title: "Audit Logs",
+          icon: "sync_alt",
+          link: "/administration/audit-logs",
+          permissions: [],
+        },
+        {
+          title: "Features",
+          icon: "feature_search",
+          link: "/administration/features",
+          permissions: [],
+        },
+      ],
+    },
+  ];
+
+  constructor(
+    public printService: PrintService,
+    public topMenuService: TopMenuService,
+    private router: Router,
+    public dialog: MatDialog
+  ) {
+    // Listen for print action
+    this.printService
+      .getIsPrinting()
+      .subscribe((val: boolean) => (this.isPrinting = val));
+  }
+
+  ngOnInit(): void {
+    this.getInitialRoute();
+    // get the selected menu item.
+    this.topMenuService.getSelectedMenuItem().subscribe({
+      next: (item: MenuItem) => {
+        this.selectedItem = item;
+      },
+    });
+  }
+
+  findMainParentByPath(path: string, menu: MenuItem[]): MenuItem | null {
+    for (const item of menu) {
+      // Check if the current path starts with the item's link
+      if (path.startsWith(item.link)) {
+        // If this item matches, return it as the topmost parent without going deeper
+        return item;
+      }
+      // No need to traverse children since we want the topmost parent
+    }
+    return null; // No match found
+  }
+
+  isMenuItemActive(item: MenuItem): boolean {
+    // Check if the item itself matches the selected item
+    if (this.selectedItem && this.selectedItem.link === item.link) {
+      return true;
+    }
+
+    // Recursively check if any of the children match the selected item
+    if (item.children && item.children.length > 0) {
+      return item.children.some((child) => this.isMenuItemActive(child));
+    }
+
+    return false;
+  }
+
+  /**
+   * On page refresh get the menu item from route url and set initial menu item.
+   *
+   * @private
+   */
+  private getInitialRoute() {
+    // Get the main url path only, exclude query params
+    const url: string = this.router.url.split("?")[0];
+    const selectedItem = this.findMainParentByPath(url, this.mainMenuItems);
+    if (selectedItem) {
+      this.topMenuService.updateSelectedMenuItem(selectedItem);
+    }
+  }
+}

package/src/app/@modules/sidebar-layout/sidebar-layout-routing.module.ts

@@ -0,0 +1,52 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+import { AuthenticationGuard } from "ngx-techlify-core";
+import { SidebarLayoutComponent } from "@modules/sidebar-layout/sidebar-layout/sidebar-layout.component";
+
+const routes: Routes = [
+  {
+    path: "",
+    component: SidebarLayoutComponent,
+    children: [
+      {
+        path: "inventory",
+        loadChildren: () =>
+          import("@modules/inventory-common/inventory-common.module").then(
+            (m) => m.InventoryCommonModule
+          ),
+        canActivate: [AuthenticationGuard],
+      },
+      {
+        path: "techlify-rbac",
+        loadChildren: () =>
+          import("@modules/user/user.module").then((mod) => mod.UserModule),
+        canLoad: [AuthenticationGuard],
+      },
+      {
+        path: "administration",
+        loadChildren: () =>
+          import("../../@modules/administration/administration.module").then(
+            (m) => m.AdministrationModule
+          ),
+      },
+      {
+        path: "change-password",
+        loadChildren: () =>
+          import("ngx-techlify-core").then((mod) => mod.ChangePasswordModule),
+      },
+      { path: "", redirectTo: "inventory/dashboard", pathMatch: "full" },
+      {
+        path: "**",
+        redirectTo: "inventory/dashboard",
+        pathMatch: "full",
+        canLoad: [AuthenticationGuard],
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SidebarLayoutRoutingModule {}

package/src/app/@modules/sidebar-layout/sidebar-layout.module.ts

@@ -0,0 +1,52 @@
+import { NgModule } from "@angular/core";
+import { CommonModule, NgOptimizedImage } from "@angular/common";
+
+import { SidebarLayoutRoutingModule } from "./sidebar-layout-routing.module";
+import { SidebarLayoutComponent } from "./sidebar-layout/sidebar-layout.component";
+import { MatSidenavModule } from "@angular/material/sidenav";
+import { FlexModule } from "@angular/flex-layout";
+import { MatIconModule } from "@angular/material/icon";
+import { MatExpansionModule } from "@angular/material/expansion";
+import { MatTreeModule } from "@angular/material/tree";
+import { MatButtonModule } from "@angular/material/button";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatInputModule } from "@angular/material/input";
+import { ReactiveFormsModule } from "@angular/forms";
+import { SidebarAdministrationMenuComponent } from "./sidebar-administration-menu/sidebar-administration-menu.component";
+import { MatDialogModule } from "@angular/material/dialog";
+import { ExpandableMenuComponent } from "./expandable-menu/expandable-menu.component";
+import { TopMenuComponent } from "./top-menu/top-menu.component";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { MatMenuModule } from "@angular/material/menu";
+import { NgxPermissionsModule } from "ngx-permissions";
+import { UserMenuModule } from "@modules/@shared/user-menu/user-menu.module";
+
+@NgModule({
+  declarations: [
+    SidebarLayoutComponent,
+    SidebarAdministrationMenuComponent,
+    ExpandableMenuComponent,
+    TopMenuComponent,
+  ],
+  exports: [TopMenuComponent],
+  imports: [
+    CommonModule,
+    SidebarLayoutRoutingModule,
+    MatSidenavModule,
+    FlexModule,
+    MatIconModule,
+    MatExpansionModule,
+    MatTreeModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule,
+    MatDialogModule,
+    NgOptimizedImage,
+    MatTooltipModule,
+    MatMenuModule,
+    NgxPermissionsModule.forChild(),
+    UserMenuModule,
+  ],
+})
+export class SidebarLayoutModule {}

package/src/app/@modules/sidebar-layout/top-menu/top-menu.component.html

@@ -0,0 +1,85 @@
+<div
+  class="fixed-top top-menu-container d-flex justify-content-start align-items-center gap-2"
+  *ngIf="!isPrinting"
+>
+  <a
+    class="text-decoration-none d-flex align-items-center"
+    routerLink="/dashboard"
+  >
+    <img
+      src="assets/images/techlify-logo-xs.png"
+      style="height: 20px"
+      alt="Logo"
+    />
+    <h3 class="mb-0 text-primary">{{ selectedProduct }}</h3>
+  </a>
+  <ng-container *ngFor="let child of menuItem?.children">
+    <ng-container *ngIf="child?.display === 'icon'">
+      <mat-icon
+        [matTooltip]="child.title"
+        color="primary"
+        class="cursor-pointer"
+        (click)="redirectToAction(child)"
+        *ngxPermissionsOnly="child.permissions"
+      >
+        {{ child.icon }}
+      </mat-icon>
+    </ng-container>
+
+    <ng-container *ngIf="child.display !== 'icon'">
+      <ng-container
+        *ngTemplateOutlet="
+          child?.children ? menuItemWithChild : menuItemWithoutChild;
+          context: { item: child }
+        "
+      ></ng-container>
+    </ng-container>
+  </ng-container>
+  <span fxFlex="1 1 auto"></span>
+  <app-user-menu></app-user-menu>
+</div>
+
+<ng-template #menuItemWithChild let-item="item">
+  <a
+    class="d-flex align-items-center gap-2 text-decoration-none text-secondary btn-xs cursor-pointer"
+    [matMenuTriggerFor]="menuWithChildren"
+    *ngxPermissionsOnly="item.permissions"
+  >
+    <span *ngIf="item.icon" class="material-symbols-outlined top-menu-icon">
+      {{ item.icon }}
+    </span>
+    <div class="d-flex justify-content-start align-items-center gap-0">
+      <p class="m-0">{{ item.title }}</p>
+      <span
+        *ngIf="item.children?.length > 0"
+        class="material-symbols-outlined top-menu-icon mt-1"
+      >
+        arrow_drop_down
+      </span>
+    </div>
+  </a>
+  <mat-menu #menuWithChildren="matMenu">
+    <ng-container *ngFor="let child of item?.children">
+      <button
+        *ngxPermissionsOnly="child.permissions"
+        mat-menu-item
+        (click)="redirectToAction(child)"
+      >
+        {{ child.title }}
+      </button>
+    </ng-container>
+  </mat-menu>
+</ng-template>
+
+<ng-template #menuItemWithoutChild let-item="item">
+  <a
+    class="d-flex align-items-center gap-1 text-decoration-none text-secondary btn-xs cursor-pointer"
+    (click)="redirectToAction(item)"
+    *ngxPermissionsOnly="item.permissions"
+  >
+    <span *ngIf="item.icon" class="material-symbols-outlined top-menu-icon">
+      {{ item.icon }}
+    </span>
+    <p class="m-0">{{ item.title }}</p>
+  </a>
+</ng-template>

package/src/app/@modules/sidebar-layout/top-menu/top-menu.component.ts

@@ -0,0 +1,46 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { TopMenuService } from "./top-menu.service";
+import { MenuItem } from "../menu-item.model";
+import { Router } from "@angular/router";
+import { PrintService } from "@modules/@shared/print-button/print.service";
+
+@Component({
+  selector: "app-top-menu",
+  templateUrl: "./top-menu.component.html",
+  styleUrls: ["./top-menu.component.scss"],
+})
+export class TopMenuComponent implements OnInit {
+  @Input() selectedProduct!: string;
+  menuItem!: MenuItem;
+  isPrinting = false;
+
+  constructor(
+    private topMenuService: TopMenuService,
+    private router: Router,
+    private printService: PrintService
+  ) {}
+
+  ngOnInit(): void {
+    this.topMenuService.getSelectedMenuItem().subscribe({
+      next: (item: MenuItem) => {
+        this.menuItem = item;
+      },
+    });
+    this.printService
+      .getIsPrinting()
+      .subscribe((val: boolean) => (this.isPrinting = val));
+  }
+
+  /**
+   * Handle the click action on icon.
+   *
+   * @param child
+   */
+  redirectToAction(child: MenuItem) {
+    if (child.action) {
+      child.action();
+    } else {
+      this.router.navigate([child.link], { queryParams: child?.queryParams });
+    }
+  }
+}

package/src/app/@modules/sidebar-layout/top-menu/top-menu.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from "@angular/core";
+import { BehaviorSubject, Observable } from "rxjs";
+import { MenuItem } from "../menu-item.model";
+
+@Injectable({
+  providedIn: "root",
+})
+export class TopMenuService {
+  constructor() {}
+
+  private initialSelectedItem: MenuItem = {
+    title: "Dashboard",
+    icon: "grid_view",
+    link: "/dashboard",
+    permissions: [],
+  };
+
+  private selectedMenuItem: BehaviorSubject<MenuItem> = new BehaviorSubject(
+    this.initialSelectedItem
+  );
+
+  getSelectedMenuItem(): Observable<MenuItem> {
+    return this.selectedMenuItem.asObservable();
+  }
+
+  updateSelectedMenuItem(menuItem: MenuItem) {
+    this.selectedMenuItem.next(menuItem);
+  }
+}