techlify-inventory-common 0.0.1

package/projects/inventory-common/src/lib/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/projects/inventory-common/src/lib/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/projects/inventory-common/src/lib/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/projects/inventory-common/src/lib/inventory-common/product/product-nav-bar/product-nav-bar.component.html

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

package/projects/inventory-common/src/lib/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/projects/inventory-common/src/lib/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/projects/inventory-common/src/lib/inventory-common/product/product-quick-search/product-quick-search.component.html

@@ -0,0 +1,110 @@
+<mat-card style="max-height: 460px; overflow: auto">
+  <mat-card-content class="d-flex justify-content-between align-items-center gap-3">
+    <h3>Products Quick Search</h3>
+
+    <mat-form-field>
+      <mat-label>Search</mat-label>
+      <input type="text" matInput placeholder="Search products" [formControl]="searchControl">
+    </mat-form-field>
+  </mat-card-content>
+  <mat-card-content class="p-0">
+    <table
+      mat-table
+      [dataSource]="models"
+      class="w-100"
+      infiniteScroll
+      [infiniteScrollDistance]="2"
+      [infiniteScrollThrottle]="50"
+      (scrolled)="onScroll()"
+    >
+      <!-- # Column -->
+      <ng-container matColumnDef="#">
+        <th mat-header-cell *matHeaderCellDef>#</th>
+        <td mat-cell *matCellDef="let element; let i = index">{{ i + 1 }}</td>
+      </ng-container>
+
+      <!-- Product Column -->
+      <ng-container matColumnDef="Product">
+        <th mat-header-cell *matHeaderCellDef>Product</th>
+        <td mat-cell *matCellDef="let element">
+          <a
+            [routerLink]="['/inventory/products', element?.id, 'view']"
+            class="text-dark"
+          >
+            {{ element?.name }}
+          </a>
+        </td>
+      </ng-container>
+
+      <!-- SKU Column -->
+      <ng-container matColumnDef="SKU">
+        <th mat-header-cell *matHeaderCellDef>SKU</th>
+        <td mat-cell *matCellDef="let element">{{ element?.sku }}</td>
+      </ng-container>
+
+      <!-- Type Column -->
+      <ng-container matColumnDef="Type">
+        <th mat-header-cell *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>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>
+
+      <!-- On Hand Column -->
+      <ng-container matColumnDef="On Hand">
+        <th mat-header-cell *matHeaderCellDef>On Hand</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element?.stock_balance }}
+        </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">
+            <mat-icon
+              class="cursor-pointer"
+              matTooltip="View"
+              [routerLink]="['/inventory/products', 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"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+
+    <mat-progress-bar mode="indeterminate" *ngIf="isWorking"></mat-progress-bar>
+  </mat-card-content>
+</mat-card>

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

@@ -0,0 +1,102 @@
+import { Component, OnInit } from '@angular/core';
+import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
+import { MatCard, MatCardContent } from '@angular/material/card';
+import {
+  MatCell,
+  MatCellDef,
+  MatColumnDef,
+  MatHeaderCell,
+  MatHeaderCellDef,
+  MatHeaderRow,
+  MatHeaderRowDef,
+  MatRow,
+  MatRowDef,
+  MatTable,
+} from '@angular/material/table';
+import { TechlifyListingControllerInterface } from 'ngx-techlify-core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { MatProgressBar } from '@angular/material/progress-bar';
+import { NgForOf, NgIf } from '@angular/common';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { debounceTime } from 'rxjs';
+import { MatSortHeader } from '@angular/material/sort';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import {ProductModule} from "../product.module";
+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 {ProductService} from "../product.service";
+
+@Component({
+  selector: 'app-product-quick-search',
+  standalone: true,
+  imports: [
+    InfiniteScrollDirective,
+    MatCard,
+    MatCardContent,
+    MatCell,
+    MatCellDef,
+    MatColumnDef,
+    MatHeaderCell,
+    MatHeaderRow,
+    MatTable,
+    MatHeaderCellDef,
+    RouterLink,
+    MatHeaderRowDef,
+    MatRowDef,
+    MatRow,
+    MatProgressBar,
+    NgIf,
+    MatFormField,
+    MatLabel,
+    MatInput,
+    ReactiveFormsModule,
+    NgForOf,
+    MatSortHeader,
+    MatIcon,
+    MatTooltip,
+    ProductModule,
+    RouterLinkActive,
+    StockReceiptFormModule,
+    StockIssueFormModule,
+  ],
+  templateUrl: './product-quick-search.component.html',
+  styleUrl: './product-quick-search.component.scss',
+})
+export class ProductQuickSearchComponent extends TechlifyListingControllerInterface implements OnInit {
+  displayedColumns: string[] = ['#', 'Product', 'SKU', 'Type', 'Categories', 'On Hand', 'Actions'];
+  searchControl: FormControl<any> = new FormControl('');
+
+  constructor(private productService: ProductService) {
+    super();
+    this.lastPage = 0;
+    this.perPage = 1000;
+  }
+
+  ngOnInit() {
+    this.loadData();
+
+    this.searchControl.valueChanges.pipe(debounceTime(500)).subscribe(() => this.reload());
+  }
+
+  loadData() {
+    const params: any = {
+      page: this.page,
+      perPage: this.perPage,
+      search: this.searchControl.value,
+      sort_by: 'created_at|desc',
+      with: 'type,categories',
+    };
+    this.isWorking = true;
+    this.productService.index(params).subscribe({
+      next: (response: any) => {
+        this.models = this.models?.concat(response?.data);
+        this.lastPage = response?.last_page;
+        this.isWorking = false;
+      },
+      error: () => (this.isWorking = false),
+    });
+  }
+}

package/projects/inventory-common/src/lib/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/projects/inventory-common/src/lib/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/projects/inventory-common/src/lib/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;
+}