techlify-inventory-common 0.0.1

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

@@ -0,0 +1,66 @@
+import { Component, OnInit } from "@angular/core";
+import { ImportCsvConfig } from "ngx-techlify-core";
+
+@Component({
+  selector: "app-product-import-page",
+  templateUrl: "./product-import-page.component.html",
+  styleUrls: ["./product-import-page.component.scss"],
+})
+export class ProductImportPageComponent implements OnInit {
+  importConfig: ImportCsvConfig = {
+    apiUrl: "api/products-import",
+    title: "Products",
+    importType: "product",
+    properties: [
+      {
+        label: "Name",
+        value: "name",
+        type: "text",
+      },
+      {
+        label: "SKU",
+        value: "sku",
+        type: "text",
+      },
+      {
+        label: "Initial Quantity",
+        value: "initial_quantity",
+        type: "number",
+      },
+      {
+        label: "Initial Quantity Date",
+        value: "initial_quantity_date",
+        type: "date",
+      },
+      {
+        label: "Reorder Point",
+        value: "reorder_point",
+        type: "number",
+      },
+      {
+        label: "Measure",
+        value: "measure",
+        type: "text",
+      },
+      {
+        label: "Categories",
+        value: "categories",
+        type: "text",
+      },
+    ],
+    sampleFile: {
+      name: "Products Import",
+      path: "assets/product/product-import-sample.csv",
+    },
+    importHistory: {
+      isEnabled: true,
+      type: "product",
+      apiUrl: "api/import-histories",
+    },
+    viewRouterLink: "/inventory/products/",
+  };
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

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

@@ -0,0 +1,254 @@
+<mat-card class="mb-3">
+  <mat-card-content>
+    <form
+      [formGroup]="filterForm"
+      class="d-flex justify-content-between align-items-center gap-2"
+    >
+      <div class="d-flex justify-content-center align-items-center gap-2">
+        <h3 class="mb-0">Products</h3>
+        <app-product-form-button class="mt-2"></app-product-form-button>
+        <span matTooltip="Import" routerLink="import" class="cursor-pointer mt-1 material-symbols-outlined">
+          file_save
+        </span>
+        <app-column-selector
+          mode="icon"
+          class="mt-2 d-print-none"
+          [columnConfigs]="columnConfig"
+          [(selectedColumns)]="selectedColumns"
+        ></app-column-selector>
+      </div>
+
+      <div class="d-flex justify-content-start align-items-center gap-2">
+        <mat-form-field style="width: 120px">
+          <input matInput placeholder="Product" formControlName="search" />
+        </mat-form-field>
+
+        <mat-form-field style="width: 120px">
+          <mat-label>Category</mat-label>
+          <app-searchable-selector
+            apiUrl="api/product-categories"
+            formControlName="category_ids"
+            [multiple]="true"
+          >
+          </app-searchable-selector>
+        </mat-form-field>
+
+        <mat-form-field style="width: 120px">
+          <mat-label>Type</mat-label>
+          <app-searchable-selector
+            apiUrl="api/product-types"
+            formControlName="type_ids"
+            titleField="title"
+            [multiple]="true"
+          >
+          </app-searchable-selector>
+        </mat-form-field>
+        <!--        <mat-form-field style="width: 150px">-->
+        <!--          <mat-label>Income Account</mat-label>-->
+        <!--          <app-searchable-selector-->
+        <!--            apiUrl="api/accounts"-->
+        <!--            formControlName="income_account_ids"-->
+        <!--            titleField="title"-->
+        <!--            [multiple]="true"-->
+        <!--          >-->
+        <!--          </app-searchable-selector>-->
+        <!--        </mat-form-field>-->
+        <!--        <mat-form-field style="width: 150px">-->
+        <!--          <mat-label>Expense Account</mat-label>-->
+        <!--          <app-searchable-selector-->
+        <!--            apiUrl="api/accounts"-->
+        <!--            formControlName="expense_account_ids"-->
+        <!--            titleField="title"-->
+        <!--            [multiple]="true"-->
+        <!--          >-->
+        <!--          </app-searchable-selector>-->
+        <!--        </mat-form-field>-->
+      </div>
+    </form>
+  </mat-card-content>
+</mat-card>
+
+<mat-card>
+  <mat-card-content class="p-0">
+    <table
+      mat-table
+      [dataSource]="dataSource"
+      class="w-100"
+      infiniteScroll
+      [infiniteScrollDistance]="2"
+      [infiniteScrollThrottle]="50"
+      (scrolled)="onScroll()"
+      [fromRoot]="true"
+      matSort
+      (matSortChange)="sortColumn($event)"
+      matSortDisableClear="true"
+      aria-describedby="Products List"
+    >
+      <!-- # Column -->
+      <ng-container matColumnDef="#">
+        <th mat-header-cell *matHeaderCellDef>#</th>
+        <td mat-cell *matCellDef="let element; let i = index">{{ i + 1 }}</td>
+      </ng-container>
+
+      <!-- Name Column -->
+      <ng-container matColumnDef="name">
+        <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th>
+        <td mat-cell *matCellDef="let element">
+          <div class="d-flex flex-column gap-1">
+            <a class="text-decoration-none text-dark" [routerLink]="[element?.id, 'view']">{{ element.name }}</a>
+            <small class="text-secondary" *ngIf="element.type">{{ element.type?.title }}</small>
+          </div>
+        </td>
+      </ng-container>
+
+      <!-- Categories Column -->
+      <ng-container matColumnDef="categories">
+        <th mat-header-cell *matHeaderCellDef>Categories</th>
+        <td mat-cell *matCellDef="let element" style="max-width: 200px">
+          <div
+            *ngIf="element?.categories?.length > 0"
+            class="d-flex justify-content-start align-items-center gap-1 flex-wrap"
+          >
+            <span
+              class="badge bg-secondary"
+              *ngFor="let category of element?.categories"
+            >
+              {{ category?.title }}
+            </span>
+          </div>
+        </td>
+      </ng-container>
+
+      <!-- SKU Column -->
+      <ng-container matColumnDef="sku">
+        <th mat-header-cell mat-sort-header *matHeaderCellDef>SKU</th>
+        <td mat-cell *matCellDef="let element">{{ element.sku }}</td>
+      </ng-container>
+
+      <!-- Initial Quantity Column -->
+      <ng-container matColumnDef="initial_quantity">
+        <th mat-header-cell mat-sort-header *matHeaderCellDef>
+          Initial Quantity
+        </th>
+        <td mat-cell *matCellDef="let element">
+          <p class="mb-0">{{ element.initial_quantity }}</p>
+          <small class="text-secondary" *ngIf="element?.initial_quantity_date">
+            on {{ element?.initial_quantity_date | date }}
+          </small>
+        </td>
+      </ng-container>
+
+      <!-- Stock Receipts Column -->
+      <ng-container matColumnDef="stock_receipts">
+        <th mat-header-cell mat-sort-header="stock_receipts_sum_quantity" *matHeaderCellDef>
+          Stock Receipts
+        </th>
+        <td mat-cell *matCellDef="let element">
+          <p class="mb-0">{{ element?.stock_receipts_sum_quantity }}</p>
+          <small class="text-secondary" *ngIf="element?.last_stock_receipt">
+            last added on {{ element?.last_stock_receipt?.date | date }}
+          </small>
+        </td>
+      </ng-container>
+
+      <!-- Stock Issuances Column -->
+      <ng-container matColumnDef="stock_issuances">
+        <th mat-header-cell mat-sort-header="stock_issuances_sum_quantity" *matHeaderCellDef>
+          Stock Issuances
+        </th>
+        <td mat-cell *matCellDef="let element">
+          <p class="mb-0">{{ element?.stock_issuances_sum_quantity }}</p>
+          <small class="text-secondary" *ngIf="element?.last_stock_issuance">
+            last issued on {{ element?.last_stock_issuance?.date | date }}
+          </small>
+        </td>
+      </ng-container>
+
+      <!-- On Hand Column -->
+      <ng-container matColumnDef="on_hand">
+        <th mat-header-cell mat-sort-header="stock_balance" *matHeaderCellDef>On Hand</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element?.stock_balance }}
+        </td>
+      </ng-container>
+
+      <!-- Reorder Point Column -->
+      <ng-container matColumnDef="reorder_point">
+        <th mat-header-cell mat-sort-header *matHeaderCellDef>Reorder Point</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.reorder_point }}
+        </td>
+      </ng-container>
+
+      <!-- Selling Price Column -->
+      <ng-container matColumnDef="sale_price">
+        <th mat-header-cell mat-sort-header *matHeaderCellDef>Selling Price</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.sale_price | currency }}
+        </td>
+      </ng-container>
+
+      <!-- Income Account Column -->
+      <ng-container matColumnDef="income_account">
+        <th mat-header-cell *matHeaderCellDef>Income Account</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element?.income_account?.title }}
+        </td>
+      </ng-container>
+
+      <!-- Expense Account Column -->
+      <ng-container matColumnDef="expense_account">
+        <th mat-header-cell *matHeaderCellDef>Expense Account</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element?.expense_account?.title }}
+        </td>
+      </ng-container>
+
+      <!-- Creator Column -->
+      <ng-container matColumnDef="creator">
+        <th mat-header-cell *matHeaderCellDef>Creator</th>
+        <td mat-cell *matCellDef="let element">
+          <p class="mb-0">{{ element?.creator?.name }}</p>
+          <small class="text-secondary">{{ element?.created_at | date }}</small>
+        </td>
+      </ng-container>
+
+      <!-- Actions Column -->
+      <ng-container matColumnDef="Actions">
+        <th mat-header-cell *matHeaderCellDef>Actions</th>
+        <td mat-cell *matCellDef="let element">
+          <div class="text-secondary d-flex gap-1">
+            <app-product-form-button
+              [product]="element"
+            ></app-product-form-button>
+            <mat-icon
+              class="cursor-pointer"
+              matTooltip="View"
+              [routerLink]="[element.id, 'view']"
+              routerLinkActive="route-link-active"
+            >
+              remove_red_eye
+            </mat-icon>
+
+            <app-stock-receipt-form-button
+              [product]="element"
+              (saved)="reload()"
+            ></app-stock-receipt-form-button>
+
+            <app-stock-issue-form-button
+              [product]="element"
+              (saved)="reload()"
+            ></app-stock-issue-form-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/projects/inventory-common/src/lib/inventory-common/product/product-list/product-list.component.spec.ts

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

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

@@ -0,0 +1,171 @@
+import { Component, OnInit } from "@angular/core";
+import { FormBuilder, FormControl, FormGroup } from "@angular/forms";
+import { MatDialog } from "@angular/material/dialog";
+import { MatTableDataSource } from "@angular/material/table";
+import { ActivatedRoute } from "@angular/router";
+import {ColumnConfig, RequestHelperService} from "ngx-techlify-core";
+import { ProductService } from "../product.service";
+import { UntilDestroy } from "@ngneat/until-destroy";
+import { debounceTime } from "rxjs/operators";
+import { ProductFormComponent } from "../product-form/product-form.component";
+import { ProductFormService } from "../product-form.service";
+@UntilDestroy()
+@Component({
+  selector: "app-product-list",
+  templateUrl: "./product-list.component.html",
+})
+export class ProductListComponent implements OnInit {
+  public filterForm: FormGroup;
+  public lastPage!: number;
+  public page: number = 1;
+  public perPage: number = 25;
+  public totalItems = 0;
+  public currentPage = 1;
+  public num_items = 25;
+  public routeFilters: any;
+  public products: any[] = [];
+  public dataSource = new MatTableDataSource();
+  isLoading: boolean = false;
+
+  columnConfig: ColumnConfig[] = [
+    { label: '#', def: '#', isSelected: true, isEditable: true },
+    { label: 'Name', def: 'name', isSelected: true, isEditable: true },
+    { label: 'SKU', def: 'sku', isSelected: true, isEditable: true },
+    { label: 'Categories', def: 'categories', isSelected: true, isEditable: true },
+    { label: 'Initial Quantity', def: 'initial_quantity', isSelected: true, isEditable: true },
+    { label: 'Reorder Point', def: 'reorder_point', isSelected: true, isEditable: true },
+    { label: 'Stock Receipts', def: 'stock_receipts', isSelected: true, isEditable: true },
+    { label: 'Stock Issuances', def: 'stock_issuances', isSelected: true, isEditable: true },
+    { label: 'On Hand', def: 'on_hand', isSelected: true, isEditable: true },
+    { label: 'Sale Price', def: 'sale_price', isSelected: true, isEditable: true },
+    { label: 'Income Account', def: 'income_account', isSelected: false, isEditable: true },
+    { label: 'Expense Account', def: 'expense_account', isSelected: false, isEditable: true },
+    { label: 'Creator', def: 'creator', isSelected: false, isEditable: true },
+    { label: 'Actions', def: 'Actions', isSelected: true, isEditable: true },
+  ];
+
+  selectedColumns: ColumnConfig[] = this.columnConfig.filter(col => col.isSelected);
+
+  get displayedColumns(): string[] {
+    return this.selectedColumns.map(col => col.def);
+  }
+
+  importId!: number;
+
+  constructor(
+    private fb: FormBuilder,
+    private dialog: MatDialog,
+    private activatedRoute: ActivatedRoute,
+    private productService: ProductService,
+    private requestHelperService: RequestHelperService,
+    private productFormService: ProductFormService
+  ) {
+    this.filterForm = this.fb.group({
+      search: [""],
+      category_ids: [""],
+      type_ids: [""],
+      income_account_ids: [""],
+      expense_account_ids: [""],
+      sort_by: [""],
+    });
+  }
+
+  ngOnInit(): void {
+    if (this.activatedRoute.snapshot.params?.["import_id"]) {
+      this.importId = parseInt(
+        this.activatedRoute.snapshot.params?.["import_id"]
+      );
+    }
+    // update form with URL query params
+    this.requestHelperService.updateFormWithQueryParams(this.filterForm, {
+      type_ids: { multiple: true },
+      category_ids: { multiple: true },
+      income_account_ids: { multiple: true },
+      expense_account_ids: { multiple: true },
+    });
+    // Update URL query params on filter change
+    this.filterForm.valueChanges.pipe(debounceTime(800)).subscribe(() => {
+      this.requestHelperService.updateQueryParams(
+        this.requestHelperService.convertToFormData({
+          ...this.filterForm.value,
+        })
+      );
+    });
+    // fetch task on params change
+    this.activatedRoute.queryParams
+      .pipe(debounceTime(800))
+      .subscribe(() => this.reload());
+    // listen form product add or update event and reload.
+    this.productFormService.isListUpdated().subscribe((val: boolean) => {
+      if (val && !this.isLoading) {
+        this.reload();
+      }
+    });
+  }
+
+  loadData() {
+    let params: any = {
+      ...this.requestHelperService.convertToFormData(this.filterForm.value),
+    };
+    params.page = this.page;
+    params.perPage = this.perPage;
+    params.num_items = this.num_items + "|" + this.currentPage;
+    params.with = "categories,lastStockReceipt,lastStockIssuance,creator";
+    if (this.importId) {
+      params.import_id = this.importId;
+    }
+    this.isLoading = true;
+
+    this.productService.index(params).subscribe({
+      next: (res: any) => {
+        this.isLoading = false;
+        this.dataSource = new MatTableDataSource(
+          this.dataSource.data.concat(res?.data)
+        );
+        this.totalItems = res.total;
+        // stop reloading data once data loaded.
+        this.productFormService.listUpdated(false);
+      },
+      error: () => (this.isLoading = false),
+    });
+  }
+
+  reload() {
+    if (this.isLoading) return;
+    this.dataSource = new MatTableDataSource();
+    this.currentPage = 1;
+    this.loadData();
+  }
+
+  modifyProduct(model?: any) {
+    const dialogRef = this.dialog.open(ProductFormComponent, {
+      width: "600px",
+      data: {
+        details: model,
+      },
+    });
+    dialogRef.afterClosed().subscribe((result) => {
+      if (result) {
+        this.reload();
+      }
+    });
+  }
+
+  assignFilter(column: any, direction: string) {
+    if (column) {
+      return this.filterForm.get("sort_by")?.setValue(column + "|" + direction);
+    }
+  }
+
+  sortColumn(event: any) {
+    var direction = event.direction.toString().toUpperCase();
+    this.assignFilter(event.active, direction);
+  }
+
+  onScroll() {
+    if (this.totalItems > this.dataSource.data.length) {
+      this.currentPage += 1;
+      this.loadData();
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+<div>
+  <form [formGroup]="productMeasureForm" (ngSubmit)="save()">
+    <h3 class="text-center">Create/Update Product Measure</h3>
+    <div fxLayout="column">
+      <div fxLayout="column">
+        <mat-form-field>
+          <input
+            matInput
+            placeholder="Title"
+            formControlName="title"
+            required
+          />
+          <mat-error *ngIf="isFieldValid('title')"
+            >{{ getErrorMessage("title") }}
+          </mat-error>
+        </mat-form-field>
+        <mat-form-field>
+          <input
+            matInput
+            placeholder="Description"
+            formControlName="description"
+            required
+          />
+          <mat-error *ngIf="isFieldValid('description')"
+            >{{ getErrorMessage("description") }}
+          </mat-error>
+        </mat-form-field>
+        <div fxFlex="100%" fxLayout fxLayoutGap="1rem">
+          <button
+            mat-button
+            class="mt-2"
+            type="button"
+            (click)="dialogRef.close()"
+          >
+            Cancel
+          </button>
+          <button mat-raised-button color="primary" class="mt-2" type="submit">
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>

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

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

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

@@ -0,0 +1,93 @@
+import { Component, Inject, OnInit } from "@angular/core";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
+import { NgxSpinnerService } from "ngx-spinner";
+import {
+  AlertService,
+  ErrorHandlerService,
+  FormValidatorService,
+} from "ngx-techlify-core";
+import { ProductService } from "../product.service";
+
+const errorMessages: any = {
+  title: {
+    required: "Please Enter Title",
+  },
+  description: {
+    required: "Please Enter Description",
+  },
+};
+
+@Component({
+  selector: "app-product-measure-form",
+  templateUrl: "./product-measure-form.component.html",
+})
+export class ProductMeasureFormComponent implements OnInit {
+  public productMeasureForm: FormGroup;
+  public isWorking: boolean = false;
+  public isUpdate: boolean = false;
+  constructor(
+    private productService: ProductService,
+    private fb: FormBuilder,
+    public dialogRef: MatDialogRef<ProductMeasureFormComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private spinnerService: NgxSpinnerService,
+    private formValidatorService: FormValidatorService,
+    private errorService: ErrorHandlerService,
+    private alertService: AlertService
+  ) {
+    this.productMeasureForm = this.fb.group({
+      id: [""],
+      title: ["", Validators.compose([Validators.required])],
+      description: ["", Validators.compose([Validators.required])],
+    });
+  }
+
+  ngOnInit(): void {
+    if (this.data.details) {
+      this.isUpdate = true;
+      this.productMeasureForm.patchValue(this.data.details);
+    }
+  }
+
+  async save() {
+    if (!this.productMeasureForm.valid) {
+      this.alertService.addAlert("Please Fill All Required Fields", "warn");
+      this.productMeasureForm.markAllAsTouched();
+      return;
+    }
+    let productMeasure = this.productMeasureForm.value;
+    try {
+      this.spinnerService.show();
+      this.isWorking = true;
+      let result = this.isUpdate
+        ? await this.productService.updateProductMeasure(productMeasure)
+        : await this.productService.createProductMeasure(productMeasure);
+      this.dialogRef.close(result);
+    } catch (error) {
+      this.errorService.handleError(error);
+    } finally {
+      this.isWorking = false;
+      this.spinnerService.hide();
+    }
+  }
+  /**
+   * Method to evaluate form fields
+   */
+  isFieldValid(field: string) {
+    return this.formValidatorService.isFieldValid(
+      field,
+      this.productMeasureForm
+    );
+  }
+  /**
+   * Method to find error in form fields
+   */
+  getErrorMessage(field: string) {
+    return this.formValidatorService.getErrorMessage(
+      field,
+      this.productMeasureForm,
+      errorMessages
+    );
+  }
+}