techlify-inventory-common 0.0.1

package/src/app/@modules/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/src/app/@modules/inventory-common/product/product-summary-chart/product-summary-chart.component.html

@@ -0,0 +1,17 @@
+<!--<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/src/app/@modules/inventory-common/product/product-summary-chart/product-summary-chart.component.ts

@@ -0,0 +1,45 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { ProductService } from "../product.service";
+
+@Component({
+  selector: "app-product-summary-chart",
+  templateUrl: "./product-summary-chart.component.html",
+})
+export class ProductSummaryChartComponent implements OnInit {
+  @Input() height: number = 400;
+  @Input() title = "Product Summary";
+  chart: any = {
+    title: "Pie Chart",
+    type: "PieChart",
+    data: [],
+    options: {
+      pieSliceText: "value",
+    },
+  };
+  isLoading: boolean = false;
+
+  constructor(private productService: ProductService) {}
+
+  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/src/app/@modules/inventory-common/product/product-summary-chart/product-summary-chart.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { MaterialModule } from "ngx-techlify-core";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import { ProductSummaryChartComponent } from "@modules/inventory-common/product/product-summary-chart/product-summary-chart.component";
+import { GoogleChartsModule } from "angular-google-charts";
+
+@NgModule({
+  declarations: [ProductSummaryChartComponent],
+  imports: [
+    CommonModule,
+    MaterialModule,
+    MatProgressBarModule,
+    GoogleChartsModule,
+  ],
+  exports: [ProductSummaryChartComponent],
+})
+export class ProductSummaryChartModule {}

package/src/app/@modules/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/src/app/@modules/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/src/app/@modules/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/src/app/@modules/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/src/app/@modules/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/src/app/@modules/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/src/app/@modules/inventory-common/product/product-tax/product-tax.module.ts

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

package/src/app/@modules/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");
+  }
+}

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

@@ -0,0 +1,34 @@
+<mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
+
+<div
+  *ngIf="product"
+  class="d-flex justify-content-start align-items-start gap-3"
+>
+  <div style="width: calc(25% - 1rem)" class="d-flex flex-column gap-3">
+    <app-product-basic-info
+      [product]="product"
+      #productBasicInfoComponent
+      (deleted)="onProductDeleted()"
+      (saved)="onProductUpdated($event)"
+    ></app-product-basic-info>
+
+    <app-product-tax-list [product]="product"></app-product-tax-list>
+  </div>
+  <div style="width: calc(75%)" class="d-flex flex-column gap-3">
+    <app-stock-receipts-list-page
+      [product]="product"
+      (listUpdated)="
+        getProduct(this.id);
+        productBasicInfoComponent.loadProductStocksSummary()
+      "
+    ></app-stock-receipts-list-page>
+
+    <app-stock-issuances-list
+      [product]="product"
+      (listUpdated)="
+        getProduct(this.id);
+        productBasicInfoComponent.loadProductStocksSummary()
+      "
+    ></app-stock-issuances-list>
+  </div>
+</div>

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

@@ -0,0 +1,63 @@
+import { Component, OnInit } from "@angular/core";
+import { ProductService } from "../product.service";
+import { ActivatedRoute } from "@angular/router";
+import { Location } from "@angular/common";
+
+@Component({
+  selector: "app-product-view-page",
+  templateUrl: "./product-view-page.component.html",
+})
+export class ProductViewPageComponent implements OnInit {
+  public product: any;
+  id: number;
+  isLoading!: boolean;
+
+  constructor(
+    private productService: ProductService,
+    private activatedRoute: ActivatedRoute,
+    private location: Location
+  ) {
+    this.id = this.activatedRoute.snapshot.params?.["id"];
+  }
+
+  ngOnInit(): void {
+    if (this.id) {
+      this.getProduct(this.id);
+    }
+  }
+
+  /**
+   * Get the product details.
+   *
+   * @param productId
+   */
+  getProduct(productId: any) {
+    this.isLoading = true;
+    const params: any = {
+      with: "type,measure,incomeAccount,expenseAccount,categories,lastStockReceipt,lastStockIssuance,taxes.tax.type",
+    };
+    this.productService.show(productId, params).subscribe({
+      next: (result: any) => {
+        this.isLoading = false;
+        this.product = result?.item;
+      },
+      error: () => (this.isLoading = false),
+    });
+  }
+
+  /**
+   * Handle the on product update event.
+   *
+   * @param product
+   */
+  onProductUpdated(product: any) {
+    this.getProduct(this.id);
+  }
+
+  /**
+   * Handle on product delete event.
+   */
+  onProductDeleted() {
+    this.location.back();
+  }
+}

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

@@ -0,0 +1,67 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { ProductRoutingModule } from "./product-routing.module";
+import { ProductListComponent } from "./product-list/product-list.component";
+import { ProductFormComponent } from "./product-form/product-form.component";
+import {
+  ImportCsvModule,
+  MaterialModule,
+  SearchableSelectorModule,
+  TimelineFilterModule,
+} from "ngx-techlify-core";
+import { ProductNavBarComponent } from "./product-nav-bar/product-nav-bar.component";
+import { ProductMeasuresListComponent } from "./product-measures-list/product-measures-list.component";
+import { ProductMeasureFormComponent } from "./product-measure-form/product-measure-form.component";
+import { ProductViewPageComponent } from "./product-view-page/product-view-page.component";
+import { ProductFormButtonComponent } from "./product-form-button/product-form-button.component";
+import { ProductDeleteButtonComponent } from "./product-delete-button/product-delete-button.component";
+import { ProductBasicInfoComponent } from "./product-basic-info/product-basic-info.component";
+import { StockReceiptFormModule } from "../stock-receipts/stock-receipt-form/stock-receipt-form.module";
+import { StockIssueFormModule } from "../stock-issuances/stock-issue-form/stock-issue-form.module";
+import { ProductImportPageComponent } from "./product-import-page/product-import-page.component";
+import { StockReceiptsModule } from "../stock-receipts/stock-receipts.module";
+import { StockIssuancesListModule } from "../stock-issuances/stock-issuances-list/stock-issuances-list.module";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import { ProductTaxModule } from "@modules/inventory-common/product/product-tax/product-tax.module";
+import { InfiniteScrollModule } from "ngx-infinite-scroll";
+import { FlexModule } from "@angular/flex-layout";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+
+@NgModule({
+  declarations: [
+    ProductListComponent,
+    ProductFormComponent,
+    ProductNavBarComponent,
+    ProductMeasuresListComponent,
+    ProductMeasureFormComponent,
+    ProductViewPageComponent,
+    ProductFormButtonComponent,
+    ProductDeleteButtonComponent,
+    ProductBasicInfoComponent,
+    ProductImportPageComponent,
+  ],
+  imports: [
+    CommonModule,
+    ProductRoutingModule,
+    SearchableSelectorModule,
+    TimelineFilterModule,
+    StockReceiptFormModule,
+    StockIssueFormModule,
+    ImportCsvModule,
+    StockReceiptsModule,
+    StockIssuancesListModule,
+    ProductTaxModule,
+    MaterialModule,
+    MatProgressBarModule,
+    InfiniteScrollModule,
+    FlexModule,
+    ReactiveFormsModule,
+    FormsModule,
+  ],
+  exports: [
+    ProductFormComponent,
+    ProductBasicInfoComponent,
+    ProductFormButtonComponent,
+  ],
+})
+export class ProductModule {}

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

@@ -0,0 +1,54 @@
+import { Injectable } from "@angular/core";
+import {
+  DataManager,
+  HttpService,
+  TechlifyServiceBaseClass,
+} from "ngx-techlify-core";
+import { Observable } from "rxjs";
+
+@Injectable({
+  providedIn: "root",
+})
+export class ProductService extends TechlifyServiceBaseClass {
+  constructor(
+    private dataManager: DataManager,
+    public httpService: HttpService
+  ) {
+    super(httpService, "products");
+  }
+
+  getProducts(filters?: any) {
+    return this.dataManager.GET(`api/products`, filters);
+  }
+
+  getProduct(id: any) {
+    return this.dataManager.GET(`api/products/${id}`);
+  }
+
+  createProduct(model: any) {
+    return this.dataManager.POST(`api/products`, model);
+  }
+
+  updateProducts(model: any) {
+    return this.dataManager.PUT(`api/products/${model.id}`, model);
+  }
+  deleteProduct(id: any) {
+    return this.dataManager.DELETE(`api/products/${id}`);
+  }
+
+  getProductMeasures(filters?: any) {
+    return this.dataManager.GET(`api/product-measures`, filters);
+  }
+
+  createProductMeasure(model: any) {
+    return this.dataManager.POST(`api/product-measures`, model);
+  }
+
+  updateProductMeasure(model: any) {
+    return this.dataManager.PUT(`api/product-measures/${model.id}`, model);
+  }
+
+  summary(params?: any): Observable<any> {
+    return this.httpService.get("api/products-summary", { params });
+  }
+}