techlify-inventory-common 0.0.1

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

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

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

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

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

@@ -0,0 +1,229 @@
+<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></app-product-form-button>
+        <mat-icon
+          routerLink="import"
+          class="cursor-pointer"
+          matTooltip="Import"
+        >
+          download
+        </mat-icon>
+      </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>-->
+        <mat-form-field>
+          <mat-label>Columns</mat-label>
+          <mat-select [formControl]="displayedColumns" multiple>
+            <mat-option
+              *ngFor="let column of columnDefinitions"
+              [value]="column.def"
+              [disabled]="!column.isShow"
+            >
+              {{ column?.def }}</mat-option
+            >
+          </mat-select>
+        </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">{{ element.name }}</td>
+      </ng-container>
+
+      <!-- Type Column -->
+      <ng-container matColumnDef="type">
+        <th mat-header-cell mat-sort-header *matHeaderCellDef>Type</th>
+        <td mat-cell *matCellDef="let element">{{ element.type?.title }}</td>
+      </ng-container>
+
+      <!-- Categories Column -->
+      <ng-container matColumnDef="categories">
+        <th mat-header-cell *matHeaderCellDef>Category</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 badge-primary"
+              *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">
+          {{ element.initial_quantity }}
+        </td>
+      </ng-container>
+
+      <!-- Initial Quantity Date Column -->
+      <ng-container matColumnDef="initial_quantity_date">
+        <th mat-header-cell mat-sort-header *matHeaderCellDef>
+          Initial Quantity Date
+        </th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.initial_quantity_date }}
+        </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>
+
+      <!-- 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.value; sticky: true"
+      ></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns.value"></tr>
+    </table>
+
+    <mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
+  </mat-card-content>
+</mat-card>

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

@@ -0,0 +1,176 @@
+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 { 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;
+
+  columnDefinitions = [
+    { def: "#", isShow: true },
+    { def: "name", isShow: true },
+    { def: "type", isShow: true },
+    { def: "sku", isShow: true },
+    { def: "initial_quantity", isShow: true },
+    { def: "initial_quantity_date", isShow: true },
+    { def: "reorder_point", isShow: true },
+    { def: "sale_price", isShow: true },
+    { def: "income_account", isShow: true },
+    { def: "expense_account", isShow: true },
+    { def: "Actions", isShow: true },
+  ];
+
+  displayedColumns: FormControl = new FormControl([
+    "#",
+    "name",
+    "type",
+    "categories",
+    "sku",
+    "initial_quantity",
+    "initial_quantity_date",
+    "reorder_point",
+    "sale_price",
+    "income_account",
+    "expense_account",
+    "Actions",
+  ]);
+  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";
+    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/src/app/@modules/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/src/app/@modules/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();
+  });
+});