techlify-inventory-common 0.0.1

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

@@ -0,0 +1,43 @@
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { StockSummaryService } from "../../stock-summary.service";
+
+@Component({
+  selector: "app-product-basic-info",
+  templateUrl: "./product-basic-info.component.html",
+  styleUrls: ["./product-basic-info.component.scss"],
+})
+export class ProductBasicInfoComponent implements OnInit {
+  @Input() product: any;
+  @Output() saved: EventEmitter<any> = new EventEmitter<any>();
+  @Output() deleted: EventEmitter<any> = new EventEmitter<any>();
+  stockSummary!: any;
+
+  constructor(private stockSummaryService: StockSummaryService) {}
+
+  ngOnInit() {
+    if (this.product) {
+      this.loadProductStocksSummary();
+    }
+  }
+
+  onProductSaved(product: any) {
+    this.product = product;
+    this.saved.emit(this.product);
+  }
+
+  /**
+   * Load product stocks summary.
+   */
+  loadProductStocksSummary() {
+    const params: any = {
+      product_ids: this.product?.id,
+      include:
+        "stock_receipts_quantity_sum,stock_issuances_quantity_sum,stock_quantity_remaining",
+    };
+    this.stockSummaryService.summary(params).subscribe({
+      next: (response: any) => {
+        this.stockSummary = response;
+      },
+    });
+  }
+}

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

@@ -0,0 +1,33 @@
+<mat-icon
+  class="cursor-pointer text-secondary"
+  (click)="showDeleteDialog(deleteProductDialog)"
+>
+  delete
+</mat-icon>
+
+<ng-template #deleteProductDialog>
+  <h3 mat-dialog-title>Delete Product</h3>
+  <div mat-dialog-content>
+    Are you sure? You want to delete the
+    <strong>{{ product?.name }}</strong> ?
+  </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)="deleteProduct()"
+    >
+      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-delete-button/product-delete-button.component.ts

@@ -0,0 +1,53 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+} from "@angular/core";
+import { MatDialog } from "@angular/material/dialog";
+import { ProductService } from "../product.service";
+import { AlertService } from "ngx-techlify-core";
+
+@Component({
+  selector: "app-product-delete-button",
+  templateUrl: "./product-delete-button.component.html",
+  styleUrls: ["./product-delete-button.component.scss"],
+})
+export class ProductDeleteButtonComponent {
+  @Input() product: any;
+  @Output() deleted = new EventEmitter();
+
+  isDeleting!: boolean;
+
+  constructor(
+    private matDialog: MatDialog,
+    private productService: ProductService,
+    private alertService: AlertService
+  ) {}
+
+  /**
+   * Delete the product.
+   */
+  deleteProduct() {
+    this.isDeleting = true;
+    this.productService.delete(this.product).subscribe({
+      next: () => {
+        this.deleted.emit();
+        this.isDeleting = false;
+        this.matDialog.closeAll();
+        this.alertService.addAlert("Product 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-form/product-form.component.html

@@ -0,0 +1,209 @@
+<form [formGroup]="productForm" (submit)="save()">
+  <h3 class="text-center">{{ product?.id ? "Update" : "Create" }} Product</h3>
+  <div fxLayout="column">
+    <div fxLayout="column" *ngIf="isFormSectionShown('basic information')">
+      <h3><strong>Basic Information</strong></h3>
+      <div fxLayout fxLayoutGap="0.5rem">
+        <mat-form-field fxFlex="50%" *ngIf="isFormFieldShown('name')">
+          <input matInput placeholder="Name" formControlName="name" required />
+          <mat-error *ngIf="isFieldValid('name')"
+            >{{ getErrorMessage("name") }}
+          </mat-error>
+        </mat-form-field>
+        <mat-form-field fxFlex="50%" *ngIf="isFormFieldShown('product type')">
+          <mat-label>Product Type</mat-label>
+          <app-searchable-selector
+            apiUrl="api/product-types"
+            formControlName="type_id"
+          >
+          </app-searchable-selector>
+          <mat-error *ngIf="isFieldValid('type_id')"
+            >{{ getErrorMessage("type_id") }}
+          </mat-error>
+        </mat-form-field>
+      </div>
+      <div fxLayout fxLayoutGap="0.5rem">
+        <mat-form-field fxFlex="50%" *ngIf="isFormFieldShown('sku')">
+          <input matInput placeholder="SKU" formControlName="sku" />
+          <mat-error *ngIf="isFieldValid('sku')"
+            >{{ getErrorMessage("sku") }}
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field fxFlex="50%">
+          <mat-label>Category</mat-label>
+          <app-searchable-selector
+            apiUrl="api/product-categories"
+            formControlName="category_ids"
+            [multiple]="true"
+          >
+          </app-searchable-selector>
+          <mat-error *ngIf="isFieldValid('category_ids')">
+            {{ getErrorMessage("category_ids") }}
+          </mat-error>
+        </mat-form-field>
+      </div>
+
+      <div fxLayout fxLayoutGap="0.5rem">
+        <mat-form-field fxFlex="100%" *ngIf="isFormFieldShown('description')">
+          <textarea
+            matInput
+            placeholder="Description"
+            formControlName="description"
+          ></textarea>
+        </mat-form-field>
+      </div>
+    </div>
+
+    <div fxLayout="column" *ngIf="isFormSectionShown('inventory information')">
+      <h3><strong>Inventory Information</strong></h3>
+      <div fxLayout fxLayoutGap="0.5rem">
+        <mat-form-field
+          fxFlex="50%"
+          *ngIf="isFormFieldShown('product measure')"
+        >
+          <mat-label>Measure</mat-label>
+          <app-searchable-selector
+            apiUrl="api/product-measures"
+            formControlName="measure_id"
+          >
+          </app-searchable-selector>
+          <mat-error *ngIf="isFieldValid('measure_id')"
+            >{{ getErrorMessage("measure_id") }}
+          </mat-error>
+        </mat-form-field>
+        <mat-form-field fxFlex="50%" *ngIf="isFormFieldShown('reorder point')">
+          <input
+            matInput
+            placeholder="Reorder Point"
+            formControlName="reorder_point"
+            type="number"
+          />
+          <mat-error *ngIf="isFieldValid('reorder_point')"
+            >{{ getErrorMessage("reorder_point") }}
+          </mat-error>
+        </mat-form-field>
+      </div>
+      <div fxLayout fxLayoutGap="0.5rem">
+        <mat-form-field
+          fxFlex="50%"
+          *ngIf="isFormFieldShown('initial quantity')"
+        >
+          <input
+            matInput
+            placeholder="Initial Quantity"
+            formControlName="initial_quantity"
+          />
+          <mat-error *ngIf="isFieldValid('initial_quantity')"
+            >{{ getErrorMessage("initial_quantity") }}
+          </mat-error>
+        </mat-form-field>
+        <mat-form-field
+          fxFlex="50%"
+          *ngIf="isFormFieldShown('initial quantity date')"
+        >
+          <input
+            matInput
+            [matDatepicker]="pickerInitialQuantityDate"
+            placeholder="Initial Quantity Date"
+            formControlName="initial_quantity_date"
+          />
+          <mat-datepicker-toggle
+            matSuffix
+            [for]="pickerInitialQuantityDate"
+          ></mat-datepicker-toggle>
+          <mat-datepicker #pickerInitialQuantityDate></mat-datepicker>
+          <mat-error *ngIf="isFieldValid('initial_quantity_date')"
+            >{{ getErrorMessage("initial_quantity_date") }}
+          </mat-error>
+        </mat-form-field>
+      </div>
+    </div>
+    <div fxLayout="column" *ngIf="isFormSectionShown('sales information')">
+      <h3><strong>Sale Information</strong></h3>
+      <div fxLayout fxLayoutGap="0.5rem">
+        <mat-form-field fxFlex="50%" *ngIf="isFormFieldShown('sales price')">
+          <input
+            matInput
+            placeholder="Selling Price"
+            formControlName="sale_price"
+            required
+            type="number"
+            step="any"
+          />
+          <mat-error *ngIf="isFieldValid('sale_price')"
+            >{{ getErrorMessage("sale_price") }}
+          </mat-error>
+        </mat-form-field>
+        <mat-form-field
+          fxFlex="50%"
+          *ngIf="isFormFieldShown('condition types')"
+        >
+          <mat-label>Condition</mat-label>
+          <app-searchable-selector
+            apiUrl="api/condition-types"
+            formControlName="condition_type_id"
+          ></app-searchable-selector>
+        </mat-form-field>
+      </div>
+      <div fxLayout fxLayoutGap="0.5rem">
+        <mat-form-field fxFlex="50%" *ngIf="isFormFieldShown('minimum price')">
+          <input
+            matInput
+            placeholder="Minimum Price"
+            formControlName="minimum_price"
+            required
+            type="number"
+            step="any"
+          />
+          <mat-error *ngIf="isFieldValid('minimum_price')"
+            >{{ getErrorMessage("minimum_price") }}
+          </mat-error>
+        </mat-form-field>
+        <mat-form-field fxFlex="50%" *ngIf="isFormFieldShown('maximum price')">
+          <input
+            matInput
+            placeholder="Maximum Price"
+            formControlName="maximum_price"
+            type="number"
+            step="any"
+          />
+        </mat-form-field>
+      </div>
+    </div>
+    <!--    <div fxLayout="column" *ngIf="isFormSectionShown('accounts information')">-->
+    <!--      <h3><strong>Accounts Information</strong></h3>-->
+    <!--      <div fxLayout fxLayoutGap="0.5rem">-->
+    <!--        <mat-form-field fxFlex="50%" *ngIf="isFormFieldShown('income account')">-->
+    <!--          <mat-label>Income Account</mat-label>-->
+    <!--          <app-searchable-selector apiUrl="api/accounts" formControlName="income_account_id"> </app-searchable-selector>-->
+    <!--        </mat-form-field>-->
+    <!--        <mat-form-field fxFlex="50%" *ngIf="isFormFieldShown('expense account')">-->
+    <!--          <mat-label>Expense Account</mat-label>-->
+    <!--          <app-searchable-selector apiUrl="api/accounts" formControlName="expense_account_id">-->
+    <!--          </app-searchable-selector>-->
+    <!--        </mat-form-field>-->
+    <!--      </div>-->
+    <!--    </div>-->
+    <div fxFlex="100%" fxLayout fxLayoutAlign="end" fxLayoutGap="1rem">
+      <button
+        [disabled]="isWorking"
+        mat-button
+        class="mt-2"
+        type="button"
+        (click)="cancelled.emit(true)"
+      >
+        Cancel
+      </button>
+      <button
+        [disabled]="isWorking"
+        mat-raised-button
+        color="primary"
+        class="mt-2"
+        type="submit"
+      >
+        Save
+      </button>
+    </div>
+  </div>
+</form>

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

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { ProductFormComponent } from "./product-form.component";
+
+describe("ProductFormComponent", () => {
+  let component: ProductFormComponent;
+  let fixture: ComponentFixture<ProductFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ProductFormComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProductFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,182 @@
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import moment from "moment";
+import { AlertService, FormValidatorService } from "ngx-techlify-core";
+import { ProductService } from "../product.service";
+import { Observable } from "rxjs";
+import { DatePipe } from "@angular/common";
+import { ProductFormService } from "../product-form.service";
+
+const initial_quantity: number = 0;
+const reorder_point: number = 10;
+
+const errorMessages: any = {
+  type_id: {
+    required: "Please Enter Type",
+  },
+  name: {
+    required: "Please Enter Name",
+  },
+  sale_price: {
+    required: "Please Enter Sales Price",
+  },
+  minimum_price: {
+    required: "Please Enter Minimum Price",
+  },
+  reorder_point: {
+    required: "Please Enter Reorder Point",
+  },
+};
+
+@Component({
+  selector: "app-product-form",
+  templateUrl: "./product-form.component.html",
+})
+export class ProductFormComponent implements OnInit {
+  public productForm: FormGroup;
+  public isWorking: boolean = false;
+  public isUpdate: boolean = false;
+  @Output() saved: EventEmitter<any> = new EventEmitter();
+  @Output() cancelled: EventEmitter<any> = new EventEmitter();
+  @Input() product: any;
+  @Input() displayedFormFields: any[] = [
+    "name",
+    "product type",
+    "sku",
+    "description",
+    "product measure",
+    "reorder point",
+    "initial quantity",
+    "initial quantity date",
+    "sales price",
+    "minimum price",
+    "maximum price",
+    "income account",
+    "expense account",
+  ];
+
+  @Input() displayedFormSections: any[] = [
+    "basic information",
+    "inventory information",
+    "sales information",
+    "accounts information",
+  ];
+
+  constructor(
+    private productService: ProductService,
+    private fb: FormBuilder,
+    private formValidatorService: FormValidatorService,
+    private alertService: AlertService,
+    private datePipe: DatePipe,
+    private productFormService: ProductFormService
+  ) {
+    this.productForm = this.fb.group({
+      id: [""],
+      type_id: [1, Validators.compose([Validators.required])],
+      sku: [""],
+      name: ["", Validators.compose([Validators.required])],
+      initial_quantity: [initial_quantity],
+      initial_quantity_date: [moment().format()],
+      reorder_point: [reorder_point, Validators.compose([Validators.required])],
+      description: [""],
+      sale_price: [0, Validators.compose([Validators.required])],
+      income_account_id: [""],
+      expense_account_id: [""],
+      measure_id: [1],
+      minimum_price: ["", Validators.compose([Validators.required])],
+      maximum_price: [""],
+      condition_type_id: [1],
+      current_quantity: [],
+      category_ids: [""],
+    });
+  }
+
+  ngOnInit() {
+    if (this.product?.id) {
+      this.isUpdate = true;
+      let data = { ...this.product };
+      if (this.product?.categories?.length > 0) {
+        data.category_ids = (this.product.categories as []).map(
+          (category: any) => category?.id
+        );
+      }
+      if (data?.initial_quantity_date) {
+        data.initial_quantity_date = moment(
+          data.initial_quantity_date
+        ).toISOString();
+      }
+      this.productForm.patchValue(data);
+    }
+  }
+
+  async save() {
+    this.productForm.markAllAsTouched();
+    if (this.productForm.invalid) {
+      this.alertService.addAlert("Please Fill All Required Fields", "warn");
+      return;
+    }
+    let product = this.productForm.value;
+    if (product.maximum_price <= 0 || !product.maximum_price) {
+      product.maximum_price = product.minimum_price;
+    }
+
+    if (product?.initial_quantity_date) {
+      product.initial_quantity_date = moment(
+        product.initial_quantity_date
+      ).format("YYYY-MM-DD");
+    }
+    this.isWorking = true;
+    product.with = "type,measure,incomeAccount,expenseAccount";
+
+    let request: Observable<any> = this.productService.store(product);
+    if (this.isUpdate) {
+      request = this.productService.update(product);
+    }
+    request.subscribe({
+      next: (response: any) => {
+        this.saved.emit(response?.item);
+        this.isWorking = false;
+        this.productFormService.listUpdated(true);
+        this.alertService.addAlert("Product saved successfully!", "success");
+      },
+      error: () => (this.isWorking = false),
+    });
+  }
+
+  /**
+   * Method to evaluate form fields
+   */
+  isFieldValid(field: string) {
+    return this.formValidatorService.isFieldValid(field, this.productForm);
+  }
+  /**
+   * Method to find error in form fields
+   */
+  getErrorMessage(field: string) {
+    return this.formValidatorService.getErrorMessage(
+      field,
+      this.productForm,
+      errorMessages
+    );
+  }
+
+  /**
+   * Checks displayed Form Fields array for form field and returns boolean result
+   */
+  isFormFieldShown(fieldName: string): boolean {
+    return (
+      this.displayedFormFields.length > 0 &&
+      this.displayedFormFields.includes(fieldName)
+    );
+  }
+
+  /**
+   * Checks displayed Form Section array for form section and returns boolean result
+   */
+  isFormSectionShown(sectionName: string): boolean {
+    return (
+      this.displayedFormSections.length > 0 &&
+      this.displayedFormSections.includes(sectionName)
+    );
+  }
+}

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

@@ -0,0 +1,17 @@
+<mat-icon
+  color="primary"
+  class="cursor-pointer"
+  [class.text-secondary]="product"
+  (click)="showForm(addProductForm)"
+>
+  {{ product ? "edit" : "add" }}
+</mat-icon>
+
+<ng-template #addProductForm>
+  <app-product-form
+    [product]="product"
+    mat-dialog-content
+    (saved)="onProductSaved($event)"
+    (cancelled)="matDialog.closeAll()"
+  ></app-product-form>
+</ng-template>

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

@@ -0,0 +1,39 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+} from "@angular/core";
+import { MatDialog } from "@angular/material/dialog";
+import { ProductFormService } from "../product-form.service";
+
+@Component({
+  selector: "app-product-form-button",
+  templateUrl: "./product-form-button.component.html",
+  styleUrls: ["./product-form-button.component.scss"],
+})
+export class ProductFormButtonComponent {
+  @Input() product: any;
+  @Output() saved = new EventEmitter();
+
+  constructor(
+    public matDialog: MatDialog,
+    private productFormService: ProductFormService
+  ) {}
+
+  showForm(templateRef: TemplateRef<any>) {
+    this.matDialog.open(templateRef, { width: "600px" });
+  }
+
+  /**
+   * Handle on product saved event.
+   *
+   * @param product
+   */
+  onProductSaved(product: any) {
+    this.saved.emit(product);
+    this.matDialog?.closeAll();
+    this.productFormService.listUpdated(true);
+  }
+}

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

@@ -0,0 +1,11 @@
+import { Injectable } from "@angular/core";
+import TechlifyFormService from '../services/techlify-form-service';
+
+@Injectable({
+  providedIn: "root",
+})
+export class ProductFormService extends TechlifyFormService {
+  constructor() {
+    super();
+  }
+}

package/projects/inventory-common/src/lib/inventory-common/product/product-import-page/product-import-page.component.html

@@ -0,0 +1 @@
+<app-import-csv [config]="importConfig"></app-import-csv>