techlify-inventory-common 0.0.1

package/src/app/@modules/inventory-common/supplier/supplier-routing.module.ts

@@ -0,0 +1,32 @@
+import { SupplierViewComponent } from "./supplier-view/supplier-view.component";
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+import { SupplierComponent } from "./supplier.component";
+import { SuppliersListComponent } from "./suppliers-list/suppliers-list.component";
+
+const routes: Routes = [
+  {
+    path: "",
+    component: SupplierComponent,
+    children: [
+      { path: "", component: SuppliersListComponent },
+      {
+        path: ":id/view",
+        component: SupplierViewComponent,
+        children: [
+          {
+            path: "",
+            redirectTo: "incidents",
+            pathMatch: "full",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SupplierRoutingModule {}

package/src/app/@modules/inventory-common/supplier/supplier-type.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from "@angular/core";
+import { HttpService } from "ngx-techlify-core";
+
+@Injectable({
+  providedIn: "root",
+})
+export class SupplierTypeService {
+  constructor(private httpService: HttpService) {}
+
+  /**
+   * get all suppliers from API
+   *
+   */
+  index() {
+    return this.httpService.get(`api/supplier-types`);
+  }
+}

package/src/app/@modules/inventory-common/supplier/supplier-view/supplier-view.component.html

@@ -0,0 +1,60 @@
+<mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
+
+<div *ngIf="supplier" class="d-flex justify-content-start gap-3">
+  <div style="width: 300px">
+    <app-supplier-information [supplier]="supplier"></app-supplier-information>
+    <mat-card class="mt-3">
+      <mat-card-content class="p-0">
+        <app-note-list
+          modelType="Supplier"
+          [relatedModelId]="supplier?.id"
+        ></app-note-list>
+      </mat-card-content>
+    </mat-card>
+  </div>
+
+  <div style="width: calc(100% - 300px - 1rem)">
+    <mat-card style="width: fit-content">
+      <mat-card-content class="p-0">
+        <mat-tab-group
+          mat-stretch-tabs="false"
+          mat-align-tabs="start"
+          [selectedIndex]="selectedTabIndex"
+          (selectedTabChange)="onTabChange($event)"
+        >
+          <mat-tab>
+            <ng-template mat-tab-label>
+              <div
+                class="d-flex justify-content-start align-items-center gap-1"
+              >
+                <span class="material-symbols-outlined">unknown_document</span>
+                <span class="pl-2">Incidents</span>
+              </div>
+            </ng-template>
+          </mat-tab>
+          <mat-tab>
+            <ng-template mat-tab-label>
+              <div
+                class="d-flex justify-content-start align-items-center gap-1"
+              >
+                <span class="material-symbols-outlined">star</span>
+                <span class="pl-2">Ratings</span>
+              </div>
+            </ng-template>
+          </mat-tab>
+          <mat-tab>
+            <ng-template mat-tab-label>
+              <div
+                class="d-flex justify-content-start align-items-center gap-1"
+              >
+                <span class="material-symbols-outlined">price_change</span>
+                <span class="pl-2">Estimates</span>
+              </div>
+            </ng-template>
+          </mat-tab>
+        </mat-tab-group>
+      </mat-card-content>
+    </mat-card>
+    <router-outlet></router-outlet>
+  </div>
+</div>

package/src/app/@modules/inventory-common/supplier/supplier-view/supplier-view.component.ts

@@ -0,0 +1,58 @@
+import { lastValueFrom } from "rxjs";
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import { SupplierService } from "../supplier.service";
+import { MatTabChangeEvent } from "@angular/material/tabs";
+
+@Component({
+  selector: "app-supplier-view",
+  templateUrl: "./supplier-view.component.html",
+})
+export class SupplierViewComponent implements OnInit {
+  supplier: any;
+  supplierId: number = 0;
+  selectedTabIndex: number = 0;
+  isLoading: boolean = false;
+
+  constructor(
+    private supplierService: SupplierService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) {}
+
+  ngOnInit(): void {
+    this.route.firstChild?.url.subscribe((url) => {
+      if (url[0].path === "ratings") {
+        this.selectedTabIndex = 1;
+      } else if (url[0].path === "estimates") {
+        this.selectedTabIndex = 2;
+      } else {
+        this.selectedTabIndex = 0;
+      }
+    });
+
+    this.supplierId = this.route.snapshot.params["id"];
+    this.getSupplier(this.supplierId);
+  }
+
+  onTabChange(event: MatTabChangeEvent) {
+    switch (event.index) {
+      case 0:
+        this.router.navigate(["incidents"], { relativeTo: this.route });
+        return;
+      case 1:
+        this.router.navigate(["ratings"], { relativeTo: this.route });
+        return;
+      case 2:
+        this.router.navigate(["estimates"], { relativeTo: this.route });
+        return;
+    }
+  }
+
+  async getSupplier(id: number) {
+    this.isLoading = true;
+    let result: any = await lastValueFrom(this.supplierService.show(id));
+    this.isLoading = false;
+    this.supplier = result.item;
+  }
+}

package/src/app/@modules/inventory-common/supplier/supplier.component.html

@@ -0,0 +1,3 @@
+<div>
+  <router-outlet></router-outlet>
+</div>

package/src/app/@modules/inventory-common/supplier/supplier.component.ts

@@ -0,0 +1,16 @@
+import { Component } from "@angular/core";
+import { SupplierFormComponent } from "./supplier-form/supplier-form.component";
+import { MatDialog } from "@angular/material/dialog";
+import { SupplierFormService } from "./supplier-form/supplier-form.service";
+
+@Component({
+  selector: "app-supplier",
+  templateUrl: "./supplier.component.html",
+  styleUrls: ["./supplier.component.scss"],
+})
+export class SupplierComponent {
+  constructor(
+    public dialog: MatDialog,
+    private supplierFormService: SupplierFormService
+  ) {}
+}

package/src/app/@modules/inventory-common/supplier/supplier.module.ts

@@ -0,0 +1,42 @@
+import {
+  AuditLogForModelModule,
+  NoteModule,
+  SearchableSelectorModule,
+} from "ngx-techlify-core";
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { SupplierRoutingModule } from "./supplier-routing.module";
+import { SupplierComponent } from "./supplier.component";
+import { SupplierViewComponent } from "./supplier-view/supplier-view.component";
+import { SuppliersListComponent } from "./suppliers-list/suppliers-list.component";
+import { SupplierFormComponent } from "./supplier-form/supplier-form.component";
+import { SupplierInformationComponent } from "./supplier-information/supplier-information.component";
+import { FlexModule } from "@angular/flex-layout";
+import { MaterialModule } from "@app/material.module";
+import { ReactiveFormsModule } from "@angular/forms";
+import { InfiniteScrollModule } from "ngx-infinite-scroll";
+
+@NgModule({
+  declarations: [
+    SupplierComponent,
+    SupplierViewComponent,
+    SuppliersListComponent,
+    SupplierFormComponent,
+    SupplierInformationComponent,
+  ],
+  imports: [
+    CommonModule,
+    SupplierRoutingModule,
+    MaterialModule,
+    SearchableSelectorModule,
+    AuditLogForModelModule,
+    NoteModule,
+    FlexModule,
+    MaterialModule,
+    MaterialModule,
+    ReactiveFormsModule,
+    InfiniteScrollModule,
+  ],
+})
+export class SupplierModule {}

package/src/app/@modules/inventory-common/supplier/supplier.service.ts

@@ -0,0 +1,57 @@
+import { Injectable } from "@angular/core";
+import { HttpService } from "ngx-techlify-core";
+import { HttpParams } from "@angular/common/http";
+
+@Injectable({
+  providedIn: "root",
+})
+export class SupplierService {
+  constructor(private httpService: HttpService) {}
+
+  /**
+   * get all suppliers from API
+   *
+   * @param filters Any attributes to filter suppliers by
+   */
+  index(filters?: any) {
+    let queries = new HttpParams({ fromObject: filters });
+    return this.httpService.get(`api/suppliers`, { params: queries });
+  }
+
+  /**
+   * get individual supplier from API (for view page)
+   *
+   * @param id ID of the supplier being requested
+   */
+  show(id: any) {
+    return this.httpService.get(`api/suppliers/${id}`);
+  }
+
+  /**
+   * store a new supplier in the DB
+   *
+   * @param model data from the supplier form that will be stored in the DB
+   */
+  store(model: any) {
+    return this.httpService.post(`api/suppliers`, model);
+  }
+
+  /**
+   * update a supplier in the DB
+   *
+   * @param model.id ID of the supplier being updated
+   * @param model data from the supplier form that will be updated in the DB
+   */
+  update(model: any) {
+    return this.httpService.put(`api/suppliers/${model?.id}`, model);
+  }
+
+  /**
+   * delete a supplier from the DB
+   *
+   * @param id ID of the supplier being deleted
+   */
+  destroy(id: number) {
+    return this.httpService.delete(`api/suppliers/${id}`);
+  }
+}

package/src/app/@modules/inventory-common/supplier/suppliers-list/suppliers-list.component.html

@@ -0,0 +1,140 @@
+<div class="d-flex justify-content-center align-items-center gap-3 mb-3">
+  <h2 class="mb-0">Suppliers</h2>
+  <mat-icon
+    color="primary"
+    class="cursor-pointer"
+    (click)="showAddSupplierDialog()"
+  >
+    add
+  </mat-icon>
+</div>
+<mat-card class="mb-3">
+  <mat-card-content>
+    <form
+      [formGroup]="filterFormGroup"
+      fxLayout
+      fxLayoutGap="1rem"
+      fxLayoutAlign="start center"
+    >
+      <mat-form-field fxFlex="24">
+        <input
+          matInput
+          placeholder="Search Supplier by Name, Phone, Address, Email, Description"
+          formControlName="search"
+        />
+        <mat-icon matSuffix>search</mat-icon>
+      </mat-form-field>
+      <mat-label class="ml-4">Type</mat-label>
+      <mat-button-toggle-group formControlName="supplier_type_ids" multiple>
+        <mat-button-toggle
+          *ngFor="let item of supplierTypes"
+          [value]="item.id"
+          >{{ item.title }}</mat-button-toggle
+        >
+      </mat-button-toggle-group>
+    </form>
+  </mat-card-content>
+</mat-card>
+<mat-card>
+  <mat-card-content class="p-0">
+    <table
+      mat-table
+      #table
+      [dataSource]="dataSource"
+      class="w-100 table-hover"
+      infiniteScroll
+      [infiniteScrollDistance]="2"
+      [infiniteScrollThrottle]="50"
+      (scrolled)="onScroll()"
+      [fromRoot]="true"
+      matSort
+      (matSortChange)="sortColumn($event)"
+      aria-describedby="Suppliers List"
+    >
+      <ng-container matColumnDef="#">
+        <th mat-header-cell *matHeaderCellDef>#</th>
+        <td mat-cell *matCellDef="let element; let i = index">{{ i + 1 }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="company_name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Company</th>
+        <td mat-cell *matCellDef="let element">
+          <div class="d-flex flex-column gap-1">
+            <strong>{{ element?.company_name }}</strong>
+            <span class="status-pill status-pill-sm status-ongoing">
+              {{ element?.type?.title }}
+            </span>
+          </div>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="contact_name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Contact Name</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element?.contact_name }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="phone">
+        <th mat-header-cell *matHeaderCellDef>Phone</th>
+        <td mat-cell *matCellDef="let element">{{ element?.phone }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="address">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Address</th>
+        <td mat-cell *matCellDef="let element">{{ element?.address }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="email">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>
+        <td mat-cell *matCellDef="let element">{{ element?.email }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="details">
+        <th mat-header-cell *matHeaderCellDef>Description</th>
+        <td mat-cell *matCellDef="let element">{{ element?.details }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef>Actions</th>
+        <td mat-cell *matCellDef="let element">
+          <div class="text-secondary" fxLayoutGap="1rem">
+            <app-audit-log-for-model
+              [modelId]="element?.id"
+              modelType="Supplier"
+              logView="all"
+            ></app-audit-log-for-model>
+            <button
+              mat-icon-button
+              [routerLink]="['/suppliers', element.id, 'view']"
+              routerLinkActive="route-link-active"
+              *ngxPermissionsOnly="['supplier.read']"
+            >
+              <mat-icon matTooltip="View">remove_red_eye</mat-icon>
+            </button>
+            <button
+              *ngxPermissionsOnly="['supplier.update']"
+              mat-icon-button
+              (click)="editForm(element)"
+            >
+              <mat-icon>edit</mat-icon>
+            </button>
+            <button
+              *ngxPermissionsOnly="['supplier.delete']"
+              type="button"
+              mat-icon-button
+              (click)="deleteForm(element)"
+            >
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+
+    <mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
+  </mat-card-content>
+</mat-card>

package/src/app/@modules/inventory-common/supplier/suppliers-list/suppliers-list.component.ts

@@ -0,0 +1,240 @@
+import { Component, OnInit } from "@angular/core";
+import { FormGroup, FormBuilder } from "@angular/forms";
+import { MatDialog } from "@angular/material/dialog";
+import { MatTableDataSource } from "@angular/material/table";
+import { ActivatedRoute } from "@angular/router";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import { NgxSpinnerService } from "ngx-spinner";
+import {
+  ActionPopup,
+  ActionPopupComponent,
+  AlertService,
+  ErrorHandlerService,
+  FilterService,
+  TechlifyListingControllerInterface,
+} from "ngx-techlify-core";
+import { debounceTime, lastValueFrom } from "rxjs";
+import { SupplierFormComponent } from "../supplier-form/supplier-form.component";
+import { SupplierTypeService } from "../supplier-type.service";
+import { SupplierService } from "../supplier.service";
+import { SupplierFormService } from "../supplier-form/supplier-form.service";
+@UntilDestroy()
+@Component({
+  selector: "app-suppliers-list",
+  templateUrl: "./suppliers-list.component.html",
+})
+export class SuppliersListComponent
+  extends TechlifyListingControllerInterface
+  implements OnInit
+{
+  displayedColumns: string[] = [
+    "#",
+    "company_name",
+    "contact_name",
+    "phone",
+    "address",
+    "email",
+    "details",
+    "actions",
+  ];
+
+  public filterFormGroup: FormGroup;
+  public dataSource = new MatTableDataSource();
+  public totalItems = 0;
+  public currentPage = 1;
+  public routeFilters: any;
+  public supplierTypes: any;
+  public isLoading: boolean = false;
+
+  constructor(
+    private spinner: NgxSpinnerService,
+    private fb: FormBuilder,
+    private supplierService: SupplierService,
+    private supplierTypeService: SupplierTypeService,
+    private errorHandler: ErrorHandlerService,
+    private filterService: FilterService,
+    private activatedRoute: ActivatedRoute,
+    private alertService: AlertService,
+    private dialog: MatDialog,
+    private supplierFormService: SupplierFormService
+  ) {
+    super();
+    this.page = 1;
+    this.perPage = 25;
+    this.models = [];
+    this.filterFormGroup = this.fb.group({
+      search: [""],
+      supplier_type_ids: ["1,2"],
+      num_items: [this.perPage + "|" + this.currentPage],
+      sort_by: [""],
+    });
+    this.supplierTypes = [];
+  }
+
+  ngOnInit(): void {
+    this.patchFiltersFromRoute();
+    this.listenForChanges();
+    this.getSupplierTypes();
+    this.loadData();
+  }
+
+  override listenForChanges() {
+    // listen for supplier added event to update the list.
+    this.supplierFormService.isListUpdated().subscribe((val: boolean) => {
+      if (val && !this.isLoading) this.reload();
+    });
+    // listen for form group changes.
+    this.filterFormGroup.valueChanges
+      .pipe(debounceTime(500), untilDestroyed(this))
+      .subscribe((changes) => {
+        this.filterService.applyFilterToRoute(
+          this.activatedRoute,
+          this.filterFormGroup.value
+        );
+        this.reload();
+      });
+  }
+
+  patchFiltersFromRoute() {
+    this.routeFilters = this.filterService.getFiltersFromRoute(
+      this.activatedRoute,
+      this.filterFormGroup.value
+    );
+    this.filterFormGroup.setValue(this.routeFilters);
+
+    if (this.routeFilters.supplier_type_ids) {
+      this.filterFormGroup
+        .get("supplier_type_ids")!
+        .setValue(this.routeFilters.supplier_type_ids.split(",").map(Number));
+    }
+  }
+
+  sortColumn(event: any) {
+    var direction = event.direction.toString().toUpperCase();
+    this.assignFilter(event.active, direction);
+  }
+
+  assignFilter(column: any, direction: any) {
+    return this.filterFormGroup
+      .get("sort_by")
+      ?.setValue(column + "|" + direction);
+  }
+
+  async getSupplierTypes() {
+    try {
+      let res: any = await lastValueFrom(this.supplierTypeService.index());
+      this.supplierTypes = res.data;
+      console.log(this.supplierTypes);
+    } catch (error) {
+      this.errorHandler.handleError(error);
+    }
+  }
+
+  async loadData() {
+    let filters = this.filterFormGroup.value;
+    filters.page = this.page = 1;
+    filters.per_page = this.perPage;
+    filters.supplier_type_ids = filters?.supplier_type_ids?.toString();
+    filters.num_items = this.perPage + "|" + this.currentPage;
+    try {
+      this.isLoading = true;
+      let res: any = await lastValueFrom(this.supplierService.index(filters));
+      if (this.models.length < 1) {
+        this.models = res.data;
+      } else {
+        res.data.forEach((item: any) => this.models.push(item));
+      }
+      this.dataSource = new MatTableDataSource(this.models);
+      this.totalItems = res.total;
+      this.lastPage = res.last_page || this.page;
+      // list is updated do not listen form isListUpdated
+      this.supplierFormService.listUpdated(false);
+    } catch (error) {
+      this.errorHandler.handleError(error);
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  override reload() {
+    if (this.isLoading) return;
+    this.models = [];
+    this.currentPage = 1;
+    this.loadData();
+  }
+
+  override onScroll() {
+    if (this.totalItems > this.models.length && !this.isLoading) {
+      this.currentPage += 1;
+      this.loadData();
+    }
+  }
+
+  editForm(model?: any): void {
+    const dialogRef = this.dialog.open(SupplierFormComponent, {
+      width: "400px",
+      autoFocus: false,
+      data: {
+        details: model,
+      },
+    });
+
+    dialogRef.afterClosed().subscribe((result: any) => {
+      if (result) {
+        this.reload();
+      }
+    });
+  }
+  deleteForm(supplier: any): void {
+    const dialogRef = this.dialog.open(ActionPopupComponent, {
+      width: "400px",
+      data: <ActionPopup>{
+        title: "Delete Supplier",
+        message: "Are you sure you want to delete the Supplier?",
+      },
+      autoFocus: false,
+    });
+
+    dialogRef.afterClosed().subscribe(async (result) => {
+      if (result) {
+        this.spinner.show();
+        try {
+          const result = await lastValueFrom(
+            this.supplierService.destroy(supplier.id)
+          );
+          this.alertService.addAlert(
+            "Successfully deleted the Supplier",
+            "success"
+          );
+          this.reload();
+        } catch (error) {
+          this.errorHandler.handleError(error);
+        } finally {
+          this.spinner.hide();
+        }
+      }
+    });
+  }
+
+  /**
+   * Show the supplier create form.
+   *
+   * @param model
+   */
+  showAddSupplierDialog(model?: any) {
+    const dialogRef = this.dialog.open(SupplierFormComponent, {
+      width: "400px",
+      autoFocus: false,
+      data: {
+        model,
+      },
+    });
+
+    dialogRef.afterClosed().subscribe((result: any) => {
+      if (result) {
+        // record added successfully, inform the list component.
+        this.supplierFormService.listUpdated(true);
+      }
+    });
+  }
+}

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

@@ -0,0 +1,10 @@
+<a
+  class="d-flex flex-column gap-1 align-items-center text-center p-2"
+  [class.active]="isActive"
+  [routerLink]="item.link"
+>
+  <span class="material-symbols-outlined">
+    {{ item.icon }}
+  </span>
+  <span class="font-xs">{{ item.title }}</span>
+</a>