techlify-inventory-common 0.0.1

package/projects/inventory-common/src/lib/inventory-common/supplier/supplier.component.ts

@@ -0,0 +1,16 @@
+import { Component } from "@angular/core";
+import { SupplierFormComponent } from "./supplier-form/supplier-form.component";
+import { MatDialog } from "@angular/material/dialog";
+import { SupplierFormService } from "./supplier-form/supplier-form.service";
+
+@Component({
+  selector: "app-supplier",
+  templateUrl: "./supplier.component.html",
+  styleUrls: ["./supplier.component.scss"],
+})
+export class SupplierComponent {
+  constructor(
+    public dialog: MatDialog,
+    private supplierFormService: SupplierFormService
+  ) {}
+}

package/projects/inventory-common/src/lib/inventory-common/supplier/supplier.module.ts

@@ -0,0 +1,46 @@
+import {
+  AuditLogForModelModule,
+  NoteModule,
+  SearchableSelectorModule,
+} from "ngx-techlify-core";
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { SupplierRoutingModule } from "./supplier-routing.module";
+import { SupplierComponent } from "./supplier.component";
+import { SupplierViewComponent } from "./supplier-view/supplier-view.component";
+import { SuppliersListComponent } from "./suppliers-list/suppliers-list.component";
+import { SupplierFormComponent } from "./supplier-form/supplier-form.component";
+import { SupplierInformationComponent } from "./supplier-information/supplier-information.component";
+import { FlexModule } from "@angular/flex-layout";
+import { ReactiveFormsModule } from "@angular/forms";
+import { InfiniteScrollModule } from "ngx-infinite-scroll";
+import { MaterialModule } from '../material.module';
+import { NgxPermissionsModule } from 'ngx-permissions';
+import { SupplierFormButtonComponent } from './supplier-form/supplier-form-button/supplier-form-button.component';
+import { SupplierDeleteButtonComponent } from './supplier-delete-button/supplier-delete-button.component';
+
+@NgModule({
+  declarations: [
+    SupplierComponent,
+    SupplierViewComponent,
+    SuppliersListComponent,
+    SupplierFormComponent,
+    SupplierInformationComponent,
+  ],
+  imports: [
+    CommonModule,
+    SupplierRoutingModule,
+    MaterialModule,
+    SearchableSelectorModule,
+    AuditLogForModelModule,
+    NoteModule,
+    FlexModule,
+    ReactiveFormsModule,
+    InfiniteScrollModule,
+    NgxPermissionsModule,
+    SupplierFormButtonComponent,
+    SupplierDeleteButtonComponent
+  ],
+})
+export class SupplierModule {}

package/projects/inventory-common/src/lib/inventory-common/supplier/supplier.service.ts

@@ -0,0 +1,57 @@
+import { Injectable } from "@angular/core";
+import { HttpService } from "ngx-techlify-core";
+import { HttpParams } from "@angular/common/http";
+
+@Injectable({
+  providedIn: "root",
+})
+export class SupplierService {
+  constructor(private httpService: HttpService) {}
+
+  /**
+   * get all suppliers from API
+   *
+   * @param filters Any attributes to filter suppliers by
+   */
+  index(filters?: any) {
+    let queries = new HttpParams({ fromObject: filters });
+    return this.httpService.get(`api/suppliers`, { params: queries });
+  }
+
+  /**
+   * get individual supplier from API (for view page)
+   *
+   * @param id ID of the supplier being requested
+   */
+  show(id: any) {
+    return this.httpService.get(`api/suppliers/${id}`);
+  }
+
+  /**
+   * store a new supplier in the DB
+   *
+   * @param model data from the supplier form that will be stored in the DB
+   */
+  store(model: any) {
+    return this.httpService.post(`api/suppliers`, model);
+  }
+
+  /**
+   * update a supplier in the DB
+   *
+   * @param model.id ID of the supplier being updated
+   * @param model data from the supplier form that will be updated in the DB
+   */
+  update(model: any) {
+    return this.httpService.put(`api/suppliers/${model?.id}`, model);
+  }
+
+  /**
+   * delete a supplier from the DB
+   *
+   * @param id ID of the supplier being deleted
+   */
+  destroy(id: number) {
+    return this.httpService.delete(`api/suppliers/${id}`);
+  }
+}

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

@@ -0,0 +1,98 @@
+<mat-card class="mb-3">
+  <mat-card-content class="d-flex justify-content-between align-items-center gap-3">
+    <div class="d-flex justify-content-start align-items-center gap-3">
+      <h3 class="mb-0">Suppliers</h3>
+      <app-supplier-form-button (onSaved)="reload()"></app-supplier-form-button>
+    </div>
+    <form [formGroup]="filterForm" class="d-flex justify-content-end align-items-center gap-2">
+      <mat-form-field>
+        <mat-label>Search</mat-label>
+        <input matInput placeholder="Search Supplier by Name, Phone, Address, Email, Description"
+          formControlName="search" />
+        <mat-icon matSuffix>search</mat-icon>
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Type</mat-label>
+        <app-searchable-selector apiUrl="api/supplier-types" formControlName="supplier_type_ids" [multiple]="true">
+        </app-searchable-selector>
+      </mat-form-field>
+    </form>
+  </mat-card-content>
+</mat-card>
+<mat-card>
+  <mat-card-content class="p-0">
+    <table mat-table #table [dataSource]="models" class="w-100 table-hover" infiniteScroll [infiniteScrollDistance]="2"
+      [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [fromRoot]="true" matSort
+      (matSortChange)="sortColumn($event)" aria-describedby="Suppliers List">
+      <ng-container matColumnDef="#">
+        <th mat-header-cell *matHeaderCellDef>#</th>
+        <td mat-cell *matCellDef="let element; let i = index">{{ i + 1 }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="company_name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element?.company_name }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="type">
+        <th mat-header-cell *matHeaderCellDef>Type</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element?.type?.title }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="contact_name">
+        <th mat-header-cell *matHeaderCellDef>Contact</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element?.contact_name }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="phone">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Phone</th>
+        <td mat-cell *matCellDef="let element">{{ element?.phone }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="address">
+        <th mat-header-cell *matHeaderCellDef>Address</th>
+        <td mat-cell *matCellDef="let element">{{ element?.address }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="email">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>
+        <td mat-cell *matCellDef="let element">{{ element?.email }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="details">
+        <th mat-header-cell *matHeaderCellDef>Details</th>
+        <td mat-cell *matCellDef="let element">{{ element?.details }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef>Actions</th>
+        <td mat-cell *matCellDef="let element">
+          <div class="text-secondary d-flex align-items-center gap-1">
+
+            <a class="text-decoration-none text-dark" [routerLink]="['/suppliers', element.id, 'view']"
+              routerLinkActive="route-link-active" *ngxPermissionsOnly="['supplier.read']">
+              <mat-icon matTooltip="View">remove_red_eye</mat-icon>
+            </a>
+            <app-supplier-form-button *ngxPermissionsOnly="['supplier.update']" [supplier]="element"
+              (onSaved)="reload()"></app-supplier-form-button>
+            <app-supplier-delete-button [supplier]="element" (onDelete)="reload()"></app-supplier-delete-button>
+            <app-audit-log-for-model [modelId]="element?.id" modelType="Supplier"
+              logView="all"></app-audit-log-for-model>
+
+          </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="isWorking"></mat-progress-bar>
+  </mat-card-content>
+</mat-card>

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

@@ -0,0 +1,126 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { ActivatedRoute } from '@angular/router';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { NgxSpinnerService } from 'ngx-spinner';
+import {
+  ActionPopup,
+  ActionPopupComponent,
+  AlertService,
+  ErrorHandlerService,
+  FilterService,
+  RequestHelperService,
+  TechlifyListingControllerInterface,
+} from 'ngx-techlify-core';
+import { debounceTime, distinctUntilChanged, lastValueFrom } from 'rxjs';
+import { SupplierFormComponent } from '../supplier-form/supplier-form.component';
+import { SupplierService } from '../supplier.service';
+import { SupplierFormService } from '../supplier-form/supplier-form.service';
+
+@UntilDestroy()
+@Component({
+  selector: 'app-suppliers-list',
+  templateUrl: './suppliers-list.component.html',
+})
+export class SuppliersListComponent extends TechlifyListingControllerInterface implements OnInit {
+  displayedColumns: string[] = [
+    '#',
+    'company_name',
+    'type',
+    'contact_name',
+    'phone',
+    'address',
+    'email',
+    'details',
+    'actions',
+  ];
+
+  constructor(
+    private spinner: NgxSpinnerService,
+    private fb: FormBuilder,
+    private supplierService: SupplierService,
+    private errorHandler: ErrorHandlerService,
+    private filterService: FilterService,
+    private activatedRoute: ActivatedRoute,
+    private alertService: AlertService,
+    private dialog: MatDialog,
+    private supplierFormService: SupplierFormService,
+    private requestHelperService: RequestHelperService
+  ) {
+    super();
+    this.page = 1;
+    this.perPage = 25;
+    this.models = [];
+    this.filterForm = this.fb.group({
+      search: [''],
+      supplier_type_ids: [''],
+      sort_by: ['created_at|desc'],
+    });
+  }
+
+  ngOnInit(): void {
+    this.updateFormWithQueryParams();
+    this.subscribeToFormChanges();
+    this.subscribeToRouteChanges();
+  }
+
+  override listenForChanges() {
+    // listen for supplier added event to update the list.
+    this.supplierFormService.isListUpdated().subscribe((val: boolean) => {
+      if (val && !this.isWorking) this.reload();
+    });
+    // listen for form group changes.
+    this.filterForm.valueChanges.pipe(debounceTime(500), untilDestroyed(this)).subscribe(() => {
+      this.filterService.applyFilterToRoute(this.activatedRoute, this.filterForm.value);
+      this.reload();
+    });
+  }
+
+  sortColumn(event: any) {
+    var direction = event.direction.toString().toUpperCase();
+    this.assignFilter(event.active, direction);
+  }
+
+  assignFilter(column: any, direction: any) {
+    return this.filterForm.get('sort_by')?.setValue(column + '|' + direction);
+  }
+
+  async loadData() {
+    let filters = { ...this.requestHelperService.convertToFormData(this.filterForm.value) };
+    filters.page = this.page = 1;
+    filters.perPage = this.perPage;
+    try {
+      this.isWorking = true;
+      let res: any = await lastValueFrom(this.supplierService.index(filters));
+      this.models = this.models?.concat(res?.data);
+      this.lastPage = res.last_page;
+      // list is updated do not listen form isListUpdated
+      this.supplierFormService.listUpdated(false);
+    } catch (error) {
+      this.errorHandler.handleError(error);
+    } finally {
+      this.isWorking = false;
+    }
+  }
+
+  private updateFormWithQueryParams(): void {
+    this.requestHelperService.updateFormWithQueryParams(this.filterForm, {
+      supplier_type_ids: { multiple: true },
+    });
+  }
+
+  private subscribeToFormChanges(): void {
+    (this.filterForm as FormGroup).valueChanges.pipe(debounceTime(800)).subscribe({
+      next: () => {
+        this.requestHelperService.updateQueryParams(this.requestHelperService.convertToFormData(this.filterForm.value));
+      },
+    });
+  }
+
+  private subscribeToRouteChanges(): void {
+    this.activatedRoute.queryParams.pipe(debounceTime(500), distinctUntilChanged()).subscribe(() => {
+      this.reload();
+    });
+  }
+}