techlify-inventory-common 0.0.1

package/projects/inventory-common/src/lib/inventory-common/product/product-search/product-search.component.ts

@@ -0,0 +1,153 @@
+import {
+  Component,
+  EventEmitter,
+  OnInit,
+  Output,
+  TemplateRef,
+} from "@angular/core";
+import { FormBuilder, FormGroup } from "@angular/forms";
+import { MatTableDataSource } from "@angular/material/table";
+import { FilterService } from "ngx-techlify-core";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import { ProductService } from "../product.service";
+import { debounceTime } from "rxjs/operators";
+import { ActivatedRoute } from "@angular/router";
+import { ProductViewPageComponent } from "../product-view-page/product-view-page.component";
+import { MatDialog } from "@angular/material/dialog";
+
+@UntilDestroy()
+@Component({
+  selector: "app-product-search",
+  templateUrl: "./product-search.component.html",
+  styleUrls: ["./product-search.component.scss"],
+})
+export class ProductSearchComponent implements OnInit {
+  public searchFormGroup: FormGroup;
+  public lastPage!: number;
+  public page: number = 1;
+  public perPage: number = 7;
+  public totalItems = 0;
+  public currentPage = 1;
+  public num_items = 7;
+  public routeFilters: any;
+  public products: any[] = [];
+
+  columnDefinitions = [
+    { def: "Product Title", isShow: true },
+    { def: "Product Sku", isShow: true },
+    { def: "Actions", isShow: true },
+  ];
+
+  displayedColumns: string[] = ["Product Title", "Product Sku", "Actions"];
+  public dataSource = new MatTableDataSource();
+
+  @Output() productAdded: EventEmitter<any> = new EventEmitter();
+  constructor(
+    private dialog: MatDialog,
+    private fb: FormBuilder,
+    private filterService: FilterService,
+    private productService: ProductService,
+    private activatedRoute: ActivatedRoute
+  ) {
+    this.searchFormGroup = this.fb.group({
+      num_items: [this.num_items + "|" + this.currentPage],
+      search: [""],
+      sort_by: [""],
+    });
+  }
+
+  ngOnInit(): void {
+    this.listenForChanges();
+    this.loadData();
+  }
+
+  listenForChanges() {
+    this.searchFormGroup.valueChanges
+      .pipe(debounceTime(500), untilDestroyed(this))
+      .subscribe((changes) => {
+        this.filterService.applyFilterToRoute(
+          this.activatedRoute,
+          this.searchFormGroup.value
+        );
+        this.reload();
+      });
+  }
+
+  async loadData() {
+    var filters = this.searchFormGroup.value;
+    filters.page = this.page;
+    filters.per_page = this.perPage;
+    filters.num_items = this.num_items + "|" + this.currentPage;
+    filters.with = "taxes.tax.type";
+    var res = await this.productService.getProducts(filters);
+    if (this.products.length < 1) {
+      this.products = res.data;
+    } else {
+      res.data.forEach((item: any) => this.products.push(item));
+    }
+    this.dataSource = new MatTableDataSource(this.products);
+    this.totalItems = res.total;
+    this.lastPage = res.last_page || this.page;
+    this.barCodeAutoAdd();
+  }
+
+  reload() {
+    this.products = [];
+    this.currentPage = 1;
+    this.loadData();
+  }
+
+  addProduct(product: any) {
+    this.productAdded.emit(product);
+  }
+
+  assignFilter(column: any, direction: string) {
+    if (column) {
+      return this.searchFormGroup
+        .get("sort_by")
+        ?.setValue(column + "|" + direction);
+    }
+  }
+
+  /**
+   * Checks search filter for an exact match in a product and adds product to form
+   */
+  barCodeAutoAdd() {
+    var filters = this.searchFormGroup.value;
+    if (filters.search) {
+      let result = this.products.find((obj) => {
+        return obj.sku === filters.search;
+      });
+      if (result) {
+        this.addProduct(result);
+        this.searchFormGroup.get("search")?.patchValue("");
+      }
+    }
+  }
+
+  sortColumn(event: any) {
+    var direction = event.direction.toString().toUpperCase();
+    this.assignFilter(event.active, direction);
+  }
+
+  onScroll() {
+    if (this.totalItems > this.products.length) {
+      this.currentPage += 1;
+      this.loadData();
+    }
+  }
+
+  viewProduct(product: any, viewProductTemplate: TemplateRef<any>) {
+    const dialogRef = this.dialog.open(viewProductTemplate, {
+      width: "800px",
+      data: {
+        product,
+      },
+    });
+    dialogRef.afterClosed().subscribe((result) => {
+      if (result) {
+        this.reload();
+      }
+    });
+  }
+}

package/projects/inventory-common/src/lib/inventory-common/product/product-search/product-search.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { ProductSearchComponent } from "./product-search.component";
+import { InfiniteScrollModule } from "ngx-infinite-scroll";
+import { FlexLayoutModule } from "@angular/flex-layout";
+import { ReactiveFormsModule } from "@angular/forms";
+import { MaterialModule } from "../../../../@shared/material.module";
+import { ProductModule } from "../product.module";
+
+@NgModule({
+  declarations: [ProductSearchComponent],
+  imports: [
+    CommonModule,
+    InfiniteScrollModule,
+    FlexLayoutModule,
+    ReactiveFormsModule,
+    MaterialModule,
+    ProductModule,
+  ],
+  exports: [ProductSearchComponent],
+})
+export class ProductSearchModule {}

package/projects/inventory-common/src/lib/inventory-common/product/product-summary-chart/product-summary-chart.component.html

@@ -0,0 +1,11 @@
+<mat-card>
+    <mat-card-content>
+        <h3>{{ title }}</h3>
+    </mat-card-content>
+    <mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
+    <mat-card-content *ngIf="chart.data?.length > 0">
+        <google-chart class="w-100" [height]="height" [type]="chart.type" [data]="chart.data" [columns]="chart.columns"
+            [options]="chart.options">
+        </google-chart>
+    </mat-card-content>
+</mat-card>

package/projects/inventory-common/src/lib/inventory-common/product/product-summary-chart/product-summary-chart.component.ts

@@ -0,0 +1,62 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MatCard, MatCardContent } from "@angular/material/card";
+import { ChartType, GoogleChartsModule } from "angular-google-charts";
+import { MatProgressBar } from "@angular/material/progress-bar";
+import { NgIf } from "@angular/common";
+import { ProductService } from "../product.service";
+
+@Component({
+  selector: 'app-product-summary-chart',
+  standalone: true,
+  imports: [
+    MatCard,
+    MatCardContent,
+    GoogleChartsModule,
+    MatProgressBar,
+    NgIf
+  ],
+  templateUrl: './product-summary-chart.component.html',
+  styleUrl: './product-summary-chart.component.scss'
+})
+export class ProductSummaryChartComponent implements OnInit {
+  @Input() height: number = 400;
+  @Input() title = 'Product Summary';
+
+  constructor(
+    private productService: ProductService
+  ) {
+  }
+
+  chart: any = {
+    title: 'Pie Chart',
+    type: ChartType.PieChart,
+    data: [],
+    options: {
+      pieSliceText: 'value'
+    }
+  };
+  isLoading: boolean = false;
+
+  ngOnInit() {
+    this.loadData();
+  }
+
+  loadData() {
+    const params: any = {
+      include: 'products_aggregated',
+      group_by: 'category_id',
+    }
+    this.isLoading = true;
+    this.productService.summary(params).subscribe({
+      next: (response: any) => {
+        let data: any[] = [];
+        response?.products_aggregated?.forEach((item: any) => {
+          data.push([item?.title, item?.product_count]);
+        })
+        this.chart.data = data;
+        this.isLoading = false;
+      },
+      error: () => (this.isLoading = false)
+    });
+  }
+}

package/projects/inventory-common/src/lib/inventory-common/product/product-summary-chart/product-summary-chart.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { MaterialModule } from "ngx-techlify-core";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import { GoogleChartsModule } from "angular-google-charts";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MaterialModule,
+    MatProgressBarModule,
+    GoogleChartsModule,
+  ],
+})
+export class ProductSummaryChartModule {}

package/projects/inventory-common/src/lib/inventory-common/product/product-summary-widget/product-summary-widget.component.html

@@ -0,0 +1,9 @@
+<div *ngIf="lowStockProductsCount" class="d-flex justify-content-start align-items-center gap-2">
+  <span class="material-symbols-outlined fs-2 text-danger fw-light">
+    inventory_2
+  </span>
+  <h3 class="mb-0 fw-light">{{ lowStockProductsCount }}</h3>
+  <small class="text-secondary">Low Stock Products</small>
+</div>
+
+<mat-progress-bar *ngIf="isWorking" mode="indeterminate"></mat-progress-bar>

package/projects/inventory-common/src/lib/inventory-common/product/product-summary-widget/product-summary-widget.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {ProductService} from "../product.service";
+import {MatProgressBarModule} from "@angular/material/progress-bar";
+
+@Component({
+  selector: 'app-product-summary-widget',
+  standalone: true,
+  imports: [CommonModule, MatProgressBarModule],
+  templateUrl: './product-summary-widget.component.html',
+  styleUrls: ['./product-summary-widget.component.scss']
+})
+export class ProductSummaryWidgetComponent implements OnInit {
+  lowStockProductsCount!: number;
+  isWorking!: boolean;
+
+  constructor(
+    private productService: ProductService
+  ) { }
+
+  ngOnInit(): void {
+    this.loadData();
+  }
+
+  loadData() {
+    const params: any = {
+      include: 'low_stock_products_count',
+    }
+    this.isWorking = true;
+    this.productService.summary(params).subscribe({
+      next: (response: any) => {
+        this.lowStockProductsCount = response?.low_stock_products_count;
+        this.isWorking = false;
+      },
+      error: () => (this.isWorking = false)
+    });
+  }
+
+}

package/projects/inventory-common/src/lib/inventory-common/product/product-tax/product-tax-delete-button/product-tax-delete-button.component.html

@@ -0,0 +1,32 @@
+<mat-icon
+  class="cursor-pointer text-secondary"
+  (click)="showDeleteDialog(deleteConfirmDialog)"
+>
+  delete
+</mat-icon>
+
+<ng-template #deleteConfirmDialog>
+  <h3 mat-dialog-title>Delete Product Tax</h3>
+  <div mat-dialog-content>
+    Are you sure? You want to delete the product tax?
+  </div>
+  <div mat-dialog-actions class="d-flex justify-content-end gap-1 mb-2">
+    <button
+      [disabled]="isDeleting"
+      type="button"
+      mat-raised-button
+      color="warn"
+      (click)="delete()"
+    >
+      Delete
+    </button>
+    <button
+      [disabled]="isDeleting"
+      type="button"
+      mat-flat-button
+      mat-dialog-close
+    >
+      Cancel
+    </button>
+  </div>
+</ng-template>

package/projects/inventory-common/src/lib/inventory-common/product/product-tax/product-tax-delete-button/product-tax-delete-button.component.ts

@@ -0,0 +1,55 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+} from "@angular/core";
+import { MatDialog } from "@angular/material/dialog";
+import { AlertService } from "ngx-techlify-core";
+import { ProductTaxService } from "../product-tax.service";
+
+@Component({
+  selector: "app-product-tax-delete-button",
+  templateUrl: "./product-tax-delete-button.component.html",
+})
+export class ProductTaxDeleteButtonComponent {
+  @Input() productTax: any;
+  @Output() deleted = new EventEmitter();
+
+  isDeleting!: boolean;
+
+  constructor(
+    private matDialog: MatDialog,
+    private productTaxService: ProductTaxService,
+    private alertService: AlertService
+  ) {}
+
+  /**
+   * Delete the product.
+   */
+  delete() {
+    this.isDeleting = true;
+    this.productTaxService.delete(this.productTax).subscribe({
+      next: () => {
+        this.matDialog?.closeAll();
+        this.deleted.emit();
+        this.isDeleting = false;
+        this.alertService.addAlert(
+          "Product tax deleted successfully!",
+          "success"
+        );
+      },
+      error: () => (this.isDeleting = false),
+    });
+  }
+
+  /**
+   * Show delete product dialog.
+   *
+   * @param templateRef
+   */
+  showDeleteDialog(templateRef: TemplateRef<any>) {
+    this.matDialog.open(templateRef, { width: "500px" });
+  }
+}

package/projects/inventory-common/src/lib/inventory-common/product/product-tax/product-tax-form-button/product-tax-form-button.component.html

@@ -0,0 +1,49 @@
+<mat-icon
+  color="primary"
+  class="cursor-pointer"
+  (click)="showForm(formTemplate)"
+>
+  add
+</mat-icon>
+
+<ng-template #formTemplate>
+  <form
+    [formGroup]="form"
+    (submit)="save()"
+    mat-dialog-content
+    class="d-flex flex-column gap-2"
+  >
+    <h3 class="text-dark">Add tax for {{ product?.name }}</h3>
+    <mat-form-field>
+      <mat-label>Tax</mat-label>
+      <app-searchable-selector
+        formControlName="tax_id"
+        required
+        apiUrl="api/taxes"
+        [enableSearch]="false"
+      ></app-searchable-selector>
+      <mat-error *ngIf="isFieldValid('tax_id')">
+        {{ getErrorMessage("tax_id") }}
+      </mat-error>
+    </mat-form-field>
+
+    <div class="d-flex justify-content-end align-items-center gap-3">
+      <button
+        [disabled]="isSaving"
+        type="submit"
+        mat-raised-button
+        color="primary"
+      >
+        Save
+      </button>
+      <button
+        [disabled]="isSaving"
+        type="button"
+        mat-flat-button
+        mat-dialog-close
+      >
+        Cancel
+      </button>
+    </div>
+  </form>
+</ng-template>

package/projects/inventory-common/src/lib/inventory-common/product/product-tax/product-tax-form-button/product-tax-form-button.component.ts

@@ -0,0 +1,87 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  TemplateRef,
+} from "@angular/core";
+import { MatDialog } from "@angular/material/dialog";
+import {
+  AlertService,
+  FormValidatorService,
+  TechlifyFormComponentInterface,
+} from "ngx-techlify-core";
+import { FormBuilder, Validators } from "@angular/forms";
+import { ProductTaxService } from "../product-tax.service";
+
+@Component({
+  selector: "app-product-tax-form-button",
+  templateUrl: "./product-tax-form-button.component.html",
+})
+export class ProductTaxFormButtonComponent
+  extends TechlifyFormComponentInterface
+  implements OnInit
+{
+  @Input() product: any;
+  @Output() saved: EventEmitter<any> = new EventEmitter();
+
+  isSaving!: boolean;
+
+  constructor(
+    public matDialog: MatDialog,
+    private productTaxService: ProductTaxService,
+    formValidatorService: FormValidatorService,
+    private formBuilder: FormBuilder,
+    private alertService: AlertService
+  ) {
+    super(formValidatorService);
+    this.errorMessages = {
+      tax_id: {
+        required: "The tax field is required.",
+      },
+    };
+
+    this.form = this.formBuilder.group({
+      product_id: [""],
+      tax_id: ["", Validators.required],
+    });
+  }
+
+  ngOnInit() {
+    if (this.product) {
+      this.form.get("product_id")?.setValue(this.product?.id);
+    }
+  }
+
+  showForm(templateRef: TemplateRef<any>) {
+    this.matDialog.open(templateRef, { width: "400px" });
+  }
+
+  save() {
+    this.form.markAllAsTouched();
+    if (this.form.invalid) {
+      this.alertService.addAlert("Please check the form for errors.", "error");
+      return;
+    }
+
+    const data: any = { ...this.form.value };
+    const params: any = {
+      with: "tax.type",
+    };
+    this.isSaving = true;
+
+    this.productTaxService.store(data, params).subscribe({
+      next: (response: any) => {
+        this.isSaving = false;
+        this.matDialog.closeAll();
+        this.alertService.addAlert(
+          "Product tax saved successfully!",
+          "success"
+        );
+        this.saved.emit(response?.item);
+      },
+      error: () => (this.isSaving = false),
+    });
+  }
+}

package/projects/inventory-common/src/lib/inventory-common/product/product-tax/product-tax-list/product-tax-list.component.html

@@ -0,0 +1,48 @@
+<mat-card>
+  <mat-card-content
+    class="pb-3 d-flex justify-content-between align-items-center gap-3"
+  >
+    <div class="d-flex justify-content-start gap-2">
+      <span class="material-symbols-outlined"> percent </span>
+      <strong class="mb-0 text-dark">Product Taxes</strong>
+    </div>
+    <app-product-tax-form-button
+      [product]="product"
+      (saved)="onCreated($event)"
+    ></app-product-tax-form-button>
+  </mat-card-content>
+  <mat-divider></mat-divider>
+  <mat-card-content class="p-0">
+    <table mat-table [dataSource]="models" class="w-100">
+      <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="Tax">
+        <th mat-header-cell *matHeaderCellDef>Tax</th>
+        <td mat-cell *matCellDef="let element">
+          <p class="mb-0">
+            {{ element?.tax?.title }} ({{ element?.tax?.code }})
+          </p>
+          <small class="text-secondary"
+            >{{ element?.tax?.value }} - {{ element?.tax?.type?.title }}</small
+          >
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Actions">
+        <th mat-header-cell *matHeaderCellDef>Actions</th>
+        <td mat-cell *matCellDef="let element; let i = index">
+          <app-product-tax-delete-button
+            [productTax]="element"
+            (deleted)="onDeleted(i)"
+          ></app-product-tax-delete-button>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+  </mat-card-content>
+</mat-card>

package/projects/inventory-common/src/lib/inventory-common/product/product-tax/product-tax-list/product-tax-list.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { TechlifyListingControllerInterface } from "ngx-techlify-core";
+
+@Component({
+  selector: "app-product-tax-list",
+  templateUrl: "./product-tax-list.component.html",
+})
+export class ProductTaxListComponent
+  extends TechlifyListingControllerInterface
+  implements OnInit
+{
+  @Input() product!: any;
+
+  displayedColumns: string[] = ["#", "Tax", "Actions"];
+
+  ngOnInit() {
+    this.loadData();
+  }
+
+  loadData(): void {
+    this.models = this.product?.taxes ?? [];
+  }
+
+  onCreated(productTax: any) {
+    this.models.unshift(productTax);
+    this.models = [...this.models];
+  }
+
+  onDeleted(index: number) {
+    this.models.splice(index, 1);
+    this.models = [...this.models];
+  }
+}

package/projects/inventory-common/src/lib/inventory-common/product/product-tax/product-tax.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { MaterialModule, SearchableSelectorModule } from "ngx-techlify-core";
+import { ReactiveFormsModule } from "@angular/forms";
+import { ProductTaxListComponent } from './product-tax-list/product-tax-list.component';
+import { ProductTaxFormButtonComponent } from './product-tax-form-button/product-tax-form-button.component';
+import { ProductTaxDeleteButtonComponent } from './product-tax-delete-button/product-tax-delete-button.component';
+
+@NgModule({
+  declarations: [
+    ProductTaxListComponent,
+    ProductTaxFormButtonComponent,
+    ProductTaxDeleteButtonComponent,
+  ],
+  imports: [
+    CommonModule,
+    MaterialModule,
+    ReactiveFormsModule,
+    SearchableSelectorModule,
+  ],
+  exports: [ProductTaxListComponent],
+})
+export class ProductTaxModule {}

package/projects/inventory-common/src/lib/inventory-common/product/product-tax/product-tax.service.ts

@@ -0,0 +1,11 @@
+import { Injectable } from "@angular/core";
+import { HttpService, TechlifyServiceBaseClass } from "ngx-techlify-core";
+
+@Injectable({
+  providedIn: "root",
+})
+export class ProductTaxService extends TechlifyServiceBaseClass {
+  constructor(httpService: HttpService) {
+    super(httpService, "product-taxes");
+  }
+}