techlify-inventory-common 0.0.1

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

package/src/app/@modules/inventory-common/product/product-measures-list/product-measures-list.component.html

@@ -0,0 +1,90 @@
+<div fxLayout="column">
+  <div class="text-center" fxLayoutAlign="center center">
+    <h3 fxLayout>
+      <span class="mt-1"> Product Measures </span>
+      <button
+        mat-raised-button
+        class="ml-2"
+        color="primary"
+        (click)="modifyProductMeasure()"
+      >
+        <mat-icon>add</mat-icon>
+        Product Measure
+      </button>
+    </h3>
+  </div>
+
+  <div fxLayout>
+    <form [formGroup]="filterFormGroup" fxLayout fxLayoutGap="0.5rem">
+      <mat-form-field>
+        <input
+          matInput
+          placeholder="Item Name, Description, etc."
+          formControlName="search"
+        />
+      </mat-form-field>
+    </form>
+
+    <mat-form-field class="ml-2" fxFlex="0 1 calc(11.11% - 0.5rem)">
+      <mat-label>Columns</mat-label>
+      <mat-select [(ngModel)]="displayedColumns" multiple name="column">
+        <mat-option
+          *ngFor="let column of columnDefinitions"
+          [value]="column.def"
+          [disabled]="!column.isShow"
+        >
+          {{ column?.def }}</mat-option
+        >
+      </mat-select>
+    </mat-form-field>
+  </div>
+
+  <table
+    mat-table
+    #table
+    [dataSource]="dataSource"
+    class="mat-elevation-z8 w-100 mt-4 table-hover"
+    infiniteScroll
+    [infiniteScrollDistance]="2"
+    [infiniteScrollThrottle]="50"
+    (scrolled)="onScroll()"
+    [fromRoot]="true"
+    infiniteScrollContainer="mat-sidenav-content"
+    matSort
+    (matSortChange)="sortColumn($event)"
+    matSortDisableClear="true"
+  >
+    <!-- # Column -->
+    <ng-container matColumnDef="#">
+      <th mat-header-cell *matHeaderCellDef>#</th>
+      <td mat-cell *matCellDef="let element; let i = index">{{ i + 1 }}</td>
+    </ng-container>
+
+    <!-- Title Column -->
+    <ng-container matColumnDef="Title">
+      <th mat-header-cell mat-sort-header *matHeaderCellDef>Title</th>
+      <td mat-cell *matCellDef="let element">{{ element.title }}</td>
+    </ng-container>
+
+    <!-- Description Column -->
+    <ng-container matColumnDef="Description">
+      <th mat-header-cell mat-sort-header *matHeaderCellDef>Description</th>
+      <td mat-cell *matCellDef="let element">{{ element.description }}</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" fxLayoutGap="1rem">
+          <button mat-icon-button (click)="modifyProductMeasure(element)">
+            <mat-icon>edit</mat-icon>
+          </button>
+        </div>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+  </table>
+</div>

package/src/app/@modules/inventory-common/product/product-measures-list/product-measures-list.component.spec.ts

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

package/src/app/@modules/inventory-common/product/product-measures-list/product-measures-list.component.ts

@@ -0,0 +1,153 @@
+import { ProductMeasureFormComponent } from "../product-measure-form/product-measure-form.component";
+import { ProductService } from "../product.service";
+import { Component, OnInit } from "@angular/core";
+import { FormBuilder, FormGroup } from "@angular/forms";
+import { MatDialog } from "@angular/material/dialog";
+import { MatTableDataSource } from "@angular/material/table";
+import { ActivatedRoute } from "@angular/router";
+import { FilterService } from "ngx-techlify-core";
+import { debounceTime } from "rxjs/operators";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+
+@UntilDestroy()
+@Component({
+  selector: "app-product-measure-list",
+  templateUrl: "./product-measures-list.component.html",
+})
+export class ProductMeasuresListComponent implements OnInit {
+  public filterFormGroup: 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 productMeasures: any[] = [];
+
+  columnDefinitions = [
+    { def: "#", isShow: true },
+    { def: "Title", isShow: true },
+    { def: "Description", isShow: true },
+    { def: "Actions", isShow: true },
+  ];
+
+  displayedColumns: string[] = ["#", "Title", "Description", "Actions"];
+
+  public dataSource = new MatTableDataSource();
+
+  constructor(
+    private fb: FormBuilder,
+    private dialog: MatDialog,
+    private filterService: FilterService,
+    private activatedRoute: ActivatedRoute,
+    private productService: ProductService
+  ) {
+    this.filterFormGroup = this.fb.group({
+      num_items: [this.num_items + "|" + this.currentPage],
+      search: [""],
+      type_ids: [""],
+      sort_by: [""],
+    });
+  }
+
+  ngOnInit(): void {
+    this.patchFiltersFromRoute();
+    this.listenForChanges();
+    this.loadData();
+  }
+
+  listenForChanges() {
+    this.filterFormGroup.valueChanges
+      .pipe(debounceTime(500), untilDestroyed(this))
+      .subscribe((changes) => {
+        this.filterService.applyFilterToRoute(
+          this.activatedRoute,
+          this.filterFormGroup.value
+        );
+        this.reload();
+      });
+  }
+
+  patchFiltersFromRoute() {
+    this.routeFilters = this.filterService.getFiltersFromRoute(
+      this.activatedRoute,
+      this.filterFormGroup.value
+    );
+    this.filterFormGroup.setValue(this.routeFilters);
+
+    if (this.routeFilters.type_ids) {
+      this.filterFormGroup
+        .get("type_ids")!
+        .setValue(this.routeFilters.type_ids.split(",").map(Number));
+    }
+  }
+
+  async loadData() {
+    let filters = this.filterFormGroup.value;
+    filters.page = this.page;
+    filters.per_page = this.perPage;
+    filters.type_ids = filters.type_ids.toString();
+    filters.num_items = this.num_items + "|" + this.currentPage;
+
+    let res = await this.productService.getProductMeasures(filters);
+
+    if (this.productMeasures.length < 1) {
+      this.productMeasures = res.data;
+    } else {
+      res.data.forEach((item: any) => this.productMeasures.push(item));
+    }
+    this.dataSource = new MatTableDataSource(this.productMeasures);
+    this.totalItems = res.total;
+    this.lastPage = res.last_page || this.page;
+  }
+
+  reload() {
+    this.productMeasures = [];
+    this.currentPage = 1;
+    this.loadData();
+  }
+
+  modifyProductMeasure(model?: any) {
+    const dialogRef = this.dialog.open(ProductMeasureFormComponent, {
+      width: "600px",
+      data: {
+        details: model,
+      },
+    });
+
+    dialogRef.afterClosed().subscribe((result) => {
+      if (result) {
+        this.reload();
+      }
+    });
+  }
+
+  onScroll() {
+    if (this.totalItems > this.productMeasures.length) {
+      this.currentPage += 1;
+      this.loadData();
+    }
+  }
+
+  assignFilter(column: any, direction: string) {
+    if (column) {
+      return this.filterFormGroup
+        .get("sort_by")
+        ?.setValue(column + "|" + direction);
+    }
+  }
+
+  sortColumn(event: any) {
+    var direction = event.direction.toString().toUpperCase();
+    this.assignFilter(event.active, direction);
+  }
+
+  // eslint-disable-next-line @angular-eslint/use-lifecycle-interface
+  // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+  ngOnDestroy(): void {
+    //Called once, before the instance is destroyed.
+    //Add 'implements OnDestroy' to the class.
+  }
+}

package/src/app/@modules/inventory-common/product/product-nav-bar/product-nav-bar.component.html

@@ -0,0 +1,3 @@
+<div>
+  <router-outlet></router-outlet>
+</div>

package/src/app/@modules/inventory-common/product/product-nav-bar/product-nav-bar.component.spec.ts

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

package/src/app/@modules/inventory-common/product/product-nav-bar/product-nav-bar.component.ts

@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-product-nav-bar",
+  templateUrl: "./product-nav-bar.component.html",
+})
+export class ProductNavBarComponent {}

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

@@ -0,0 +1,49 @@
+import { ProductMeasuresListComponent } from "./product-measures-list/product-measures-list.component";
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+import { AuthenticationGuard } from "ngx-techlify-core";
+import { ProductListComponent } from "./product-list/product-list.component";
+import { ProductNavBarComponent } from "./product-nav-bar/product-nav-bar.component";
+import { ProductViewPageComponent } from "./product-view-page/product-view-page.component";
+import { ProductImportPageComponent } from "./product-import-page/product-import-page.component";
+
+const routes: Routes = [
+  {
+    path: "",
+    component: ProductNavBarComponent,
+    children: [
+      {
+        path: "",
+        component: ProductListComponent,
+        canLoad: [AuthenticationGuard],
+      },
+      {
+        path: "import",
+        component: ProductImportPageComponent,
+        canLoad: [AuthenticationGuard],
+      },
+      {
+        path: "measure",
+        component: ProductMeasuresListComponent,
+        canLoad: [AuthenticationGuard],
+      },
+      {
+        path: ":id/view",
+        component: ProductViewPageComponent,
+        canLoad: [AuthenticationGuard],
+      },
+      {
+        path: "**",
+        redirectTo: "",
+        pathMatch: "full",
+        canLoad: [AuthenticationGuard],
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ProductRoutingModule {}

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

@@ -0,0 +1,78 @@
+<div
+  id="tableContainer"
+  #tableContainer
+  fxLayout="column"
+  class="table-container"
+>
+  <div
+    class="text-dark d-flex flex-row justify-content-start align-items-center gap-2"
+  >
+    <mat-icon class="material-symbol-outlined"> campaign </mat-icon>
+    <strong>Product Search</strong>
+  </div>
+  <small class="text-secondary mt-2">
+    Quickly search for a product to be added as a line item.
+  </small>
+  <form [formGroup]="searchFormGroup">
+    <mat-form-field fxFlex="100%">
+      <mat-label>Search</mat-label>
+      <input
+        fxLayout
+        matInput
+        placeholder="Search product, SKU"
+        formControlName="search"
+      />
+    </mat-form-field>
+  </form>
+  <div
+    fxLayout="column"
+    fxLayoutGap="0.5rem"
+    infiniteScroll
+    [infiniteScrollDistance]="2"
+    [infiniteScrollThrottle]="50"
+    [infiniteScrollContainer]="tableContainer"
+    (scrolled)="onScroll()"
+    [fromRoot]="false"
+  >
+    <mat-card
+      class="p-2"
+      style="background: #d9d9d9"
+      *ngFor="let product of products"
+    >
+      <div>
+        <div class="d-flex flex-row justify-content-between align-items-center">
+          <strong class="text-dark">{{ product?.name }}</strong>
+          <strong
+            class="text-primary font-xs cursor-pointer"
+            (click)="addProduct(product)"
+          >
+            Add
+          </strong>
+        </div>
+        <div class="d-flex flex-row justify-content-between align-items-center">
+          <small class="text-secondary">{{ product?.sku }}</small>
+          <mat-icon
+            (click)="viewProduct(product, viewProductTemplate)"
+            class="material-symbol-outlined font-md cursor-pointer"
+          >
+            contact_support
+          </mat-icon>
+        </div>
+      </div>
+    </mat-card>
+  </div>
+</div>
+
+<ng-template #viewProductTemplate let-data>
+  <div mat-dialog-content>
+    <app-product-basic-info
+      [product]="data.product"
+      (saved)="reload()"
+      (deleted)="reload()"
+    ></app-product-basic-info>
+
+    <div class="d-flex justify-content-end mt-2">
+      <button mat-flat-button type="button" mat-dialog-close>Close</button>
+    </div>
+  </div>
+</ng-template>

package/src/app/@modules/inventory-common/product/product-search/product-search.component.scss

@@ -0,0 +1,12 @@
+.table-container {
+  max-height: 600px;
+  overflow-y: scroll;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+::-webkit-scrollbar-button {
+  display: none;
+}

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