techlify-inventory-common 0.0.1

package/src/app/@modules/inventory-common/stock-receipts/stock-receipts-list-page/stock-receipts-list-page.component.ts

@@ -0,0 +1,109 @@
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import {
+  RequestHelperService,
+  TechlifyListingControllerInterface,
+  Timeline,
+} from "ngx-techlify-core";
+import { StockReceiptService } from "../stock-receipt.service";
+import { FormBuilder, FormGroup } from "@angular/forms";
+import { UntilDestroy } from "@ngneat/until-destroy";
+import { Sort } from "@angular/material/sort";
+import { debounceTime } from "rxjs";
+
+@UntilDestroy()
+@Component({
+  selector: "app-stock-receipts-list-page",
+  templateUrl: "./stock-receipts-list-page.component.html",
+  styleUrls: ["./stock-receipts-list-page.component.scss"],
+})
+export class StockReceiptsListPageComponent
+  extends TechlifyListingControllerInterface
+  implements OnInit
+{
+  @Input() product: any;
+  @Output() listUpdated: EventEmitter<any> = new EventEmitter<any>();
+
+  displayedColumns: string[] = [
+    "no",
+    "product",
+    "date",
+    "quantity",
+    "purchase_price",
+    "amount",
+    "particulars",
+    "supplier",
+    "creator",
+    "actions",
+  ];
+  filterConfig: any = {
+    duration: {
+      label: "Date",
+    },
+  };
+
+  constructor(
+    private stockReceiptService: StockReceiptService,
+    private formBuilder: FormBuilder,
+    private requestHelperService: RequestHelperService
+  ) {
+    super();
+    this.lastPage = 0;
+    this.filterForm = this.formBuilder.group({
+      product_ids: [""],
+      duration: [Timeline.THIS_MONTH],
+      date_from: [""],
+      date_to: [""],
+      supplier_ids: [""],
+      measure_ids: [""],
+      sort_by: ["date|desc"],
+    });
+  }
+
+  ngOnInit(): void {
+    (this.filterForm as FormGroup).valueChanges
+      .pipe(debounceTime(500))
+      .subscribe({
+        next: () => this.reload(),
+      });
+    if (this.product) {
+      this.filterForm.get("product_ids")?.setValue(this.product?.id);
+      const index = this.displayedColumns.indexOf("product");
+      if (index !== -1) {
+        this.displayedColumns.splice(index, 1);
+      }
+    }
+  }
+
+  loadData(): void {
+    const params: any = {
+      page: this.page,
+      perPage: this.perPage,
+      with: "creator,supplier,product.measure",
+      ...this.requestHelperService.convertToFormData(this.filterForm.value),
+    };
+    this.isWorking = true;
+    this.stockReceiptService.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;
+      },
+    });
+  }
+
+  onSortChange(sort: Sort) {
+    console.log(sort);
+    let { active, direction } = sort;
+    if (!active) {
+      active = "date";
+    }
+    if (!direction) {
+      direction = "desc";
+      active = "date";
+    }
+    this.filterForm.get("sort_by").setValue(active + "|" + direction);
+  }
+}

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

@@ -0,0 +1,16 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+import { StockReceiptsListPageComponent } from "./stock-receipts-list-page/stock-receipts-list-page.component";
+
+const routes: Routes = [
+  {
+    path: "",
+    component: StockReceiptsListPageComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class StockReceiptsRoutingModule {}

package/src/app/@modules/inventory-common/stock-receipts/stock-receipts.module.ts

@@ -0,0 +1,45 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { StockReceiptsRoutingModule } from "./stock-receipts-routing.module";
+import { StockReceiptsListPageComponent } from "./stock-receipts-list-page/stock-receipts-list-page.component";
+import { MatCardModule } from "@angular/material/card";
+import { MatTableModule } from "@angular/material/table";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import {
+  MaterialModule,
+  SearchableSelectorModule,
+  TimelineFilterModule,
+} from "ngx-techlify-core";
+import { ReactiveFormsModule } from "@angular/forms";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import { InfiniteScrollModule } from "ngx-infinite-scroll";
+import { StockReceiptFormModule } from "./stock-receipt-form/stock-receipt-form.module";
+import { StockReceiptDeleteButtonComponent } from "./stock-receipt-delete-button/stock-receipt-delete-button.component";
+import { PayeeSelectorModule } from "@modules/inventory-common/supplier/payee-selector/payee-selector.module";
+import { TechlifyFilterModule } from "@modules/techlify-filter/techlify-filter.module";
+
+@NgModule({
+  declarations: [
+    StockReceiptsListPageComponent,
+    StockReceiptDeleteButtonComponent,
+  ],
+  exports: [StockReceiptDeleteButtonComponent, StockReceiptsListPageComponent],
+  imports: [
+    CommonModule,
+    StockReceiptsRoutingModule,
+    MatCardModule,
+    TechlifyFilterModule,
+    MatTableModule,
+    MatFormFieldModule,
+    SearchableSelectorModule,
+    TimelineFilterModule,
+    ReactiveFormsModule,
+    PayeeSelectorModule,
+    MatProgressBarModule,
+    InfiniteScrollModule,
+    MaterialModule,
+    StockReceiptFormModule,
+  ],
+})
+export class StockReceiptsModule {}

package/src/app/@modules/inventory-common/stock-summary.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from "@angular/core";
+import { HttpService } from "ngx-techlify-core";
+
+@Injectable({
+  providedIn: "root",
+})
+export class StockSummaryService {
+  constructor(private httpService: HttpService) {}
+
+  /**
+   * Get the stocks summary.
+   *
+   * @param params
+   */
+  summary(params?: any) {
+    return this.httpService.get("api/stocks-summary", { params });
+  }
+}

package/src/app/@modules/inventory-common/supplier/payee-selector/payee-selector/payee-selector.component.html

@@ -0,0 +1,22 @@
+<mat-form-field [appearance]="appearance" class="w-100">
+  <mat-label>{{ label }}</mat-label>
+  <app-searchable-selector
+    apiUrl="api/suppliers"
+    titleField="company_name"
+    sortBy="company_name|asc"
+    [required]="required"
+    [(ngModel)]="value"
+    #payeeSelector="ngModel"
+    name="payeeSelector"
+    [add]="showAddButton"
+    [itemComponent]="SupplierFormComponent"
+    (ngModelChange)="onChange($event)"
+    [addConfig]="{ width: '600px' }"
+    [ngModelOptions]="{ standalone: true }"
+    [multiple]="multiple"
+  >
+  </app-searchable-selector>
+  <mat-error *ngIf="payeeSelector.invalid && payeeSelector.touched">
+    The payee field is required.
+  </mat-error>
+</mat-form-field>

package/src/app/@modules/inventory-common/supplier/payee-selector/payee-selector/payee-selector.component.ts

@@ -0,0 +1,44 @@
+import { Component, forwardRef, Input, OnInit } from "@angular/core";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+import { SupplierFormComponent } from "../../supplier-form/supplier-form.component";
+import { MatFormFieldAppearance } from "@angular/material/form-field";
+
+@Component({
+  selector: "app-payee-selector",
+  templateUrl: "./payee-selector.component.html",
+  styleUrls: ["./payee-selector.component.scss"],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => PayeeSelectorComponent),
+      multi: true,
+    },
+  ],
+})
+export class PayeeSelectorComponent implements ControlValueAccessor {
+  @Input() label = "Payee";
+  @Input() appearance: MatFormFieldAppearance = "fill";
+  @Input() required: boolean = false;
+  @Input() showAddButton: boolean = false;
+  @Input() multiple: boolean = false;
+
+  value: any;
+  onChange: any = () => {};
+  onTouch: any = () => {};
+
+  writeValue(value: any): void {
+    this.value = value;
+    this.onChange(value);
+    this.onTouch(value);
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+  protected readonly SupplierFormComponent = SupplierFormComponent;
+}

package/src/app/@modules/inventory-common/supplier/payee-selector/payee-selector.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { PayeeSelectorComponent } from "./payee-selector/payee-selector.component";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { SearchableSelectorModule } from "ngx-techlify-core";
+
+@NgModule({
+  declarations: [PayeeSelectorComponent],
+  exports: [PayeeSelectorComponent],
+  imports: [
+    CommonModule,
+    MatFormFieldModule,
+    ReactiveFormsModule,
+    SearchableSelectorModule,
+    FormsModule,
+  ],
+})
+export class PayeeSelectorModule {}

package/src/app/@modules/inventory-common/supplier/supplier-form/supplier-form.component.html

@@ -0,0 +1,133 @@
+<form
+  [formGroup]="supplierForm"
+  (ngSubmit)="submit()"
+  class="mat-typography p-3"
+>
+  <div fxLayout="column">
+    <div mat-dialog-title class="text-center">
+      <div>Supplier</div>
+    </div>
+
+    <div fxLayout="row" fxLayoutGap="10px">
+      <mat-form-field fxFlex="50%">
+        <input
+          matInput
+          formControlName="company_name"
+          placeholder="Company Name"
+          autocomplete="off"
+          required
+        />
+        <mat-error *ngIf="isFieldValid('company_name')">
+          {{ getErrorMessage("company_name") }}
+        </mat-error>
+      </mat-form-field>
+      <mat-form-field fxFlex="50%">
+        <input
+          matInput
+          formControlName="contact_name"
+          placeholder="Contact Name"
+          autocomplete="off"
+          required
+        />
+        <mat-error *ngIf="isFieldValid('contact_name')">
+          {{ getErrorMessage("contact_name") }}
+        </mat-error>
+      </mat-form-field>
+    </div>
+
+    <div fxLayout="row" fxLayoutGap="10px">
+      <mat-form-field fxFlex="50%">
+        <mat-label>Types</mat-label>
+        <app-searchable-selector
+          titleField="title"
+          apiUrl="api/supplier-types"
+          formControlName="supplier_type_id"
+        >
+        </app-searchable-selector>
+        <mat-error *ngIf="isFieldValid('supplier_type_id')">
+          {{ getErrorMessage("supplier_type_id") }}
+        </mat-error>
+      </mat-form-field>
+      <mat-form-field fxFlex="50%">
+        <input
+          matInput
+          formControlName="phone"
+          placeholder="Phone"
+          autocomplete="off"
+          required
+        />
+        <mat-error *ngIf="isFieldValid('phone')">
+          {{ getErrorMessage("phone") }}
+        </mat-error>
+      </mat-form-field>
+    </div>
+
+    <div fxLayout="row wrap">
+      <mat-form-field fxFlex="100%" class="mt-1">
+        <input
+          matInput
+          formControlName="email"
+          placeholder="Email"
+          autocomplete="off"
+          required
+        />
+        <mat-error *ngIf="isFieldValid('email')">
+          {{ getErrorMessage("email") }}
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="100%" class="mt-1">
+        <input
+          matInput
+          formControlName="address"
+          placeholder="Address"
+          autocomplete="off"
+          required
+        />
+        <mat-error *ngIf="isFieldValid('address')">
+          {{ getErrorMessage("address") }}
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="100%" class="mt-1">
+        <input
+          matInput
+          formControlName="details"
+          placeholder="Details"
+          autocomplete="off"
+          required
+        />
+        <mat-error *ngIf="isFieldValid('details')">
+          {{ getErrorMessage("details") }}
+        </mat-error>
+      </mat-form-field>
+    </div>
+
+    <div fxLayout="row">
+      <div
+        class="my-2"
+        fxLayout="row"
+        fxLayoutGap="30px"
+        fxLayoutAlign="end"
+        fxFlex="100%"
+      >
+        <button
+          [disabled]="isWorking"
+          mat-flat-button
+          type="button"
+          (click)="dialogRef.close()"
+        >
+          Cancel
+        </button>
+        <button
+          [disabled]="isWorking"
+          mat-raised-button
+          type="submit"
+          color="primary"
+        >
+          Save
+        </button>
+      </div>
+    </div>
+  </div>
+</form>

package/src/app/@modules/inventory-common/supplier/supplier-form/supplier-form.component.ts

@@ -0,0 +1,116 @@
+import { SupplierService } from "./../supplier.service";
+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,
+  TechlifyFormComponentInterface,
+} from "ngx-techlify-core";
+import { lastValueFrom } from "rxjs";
+
+@Component({
+  selector: "app-supplier-form",
+  templateUrl: "./supplier-form.component.html",
+})
+export class SupplierFormComponent
+  extends TechlifyFormComponentInterface
+  implements OnInit
+{
+  override errorMessages: any = {
+    contact_name: {
+      required: "Contact Name is required",
+    },
+    company_name: {
+      required: "Company Name is required",
+    },
+    address: {
+      required: "Address is required",
+    },
+    phone: {
+      required: "Phone is required",
+    },
+    details: {
+      required: "Details is required",
+    },
+    email: {
+      required: "Email is required",
+    },
+    supplier_type_id: {
+      required: "Supplier Type is required",
+    },
+  };
+
+  isWorking: boolean = false;
+  isUpdateMode: boolean = false;
+  supplierForm: FormGroup;
+
+  constructor(
+    private fb: FormBuilder,
+    formValidatorService: FormValidatorService,
+    private alertService: AlertService,
+    private spinnerService: NgxSpinnerService,
+    public dialogRef: MatDialogRef<SupplierFormComponent>,
+    private errorService: ErrorHandlerService,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private supplierService: SupplierService
+  ) {
+    super(formValidatorService);
+    this.supplierForm = this.fb.group({
+      id: [""],
+      contact_name: ["", Validators.compose([Validators.required])],
+      company_name: ["", Validators.compose([Validators.required])],
+      details: ["", Validators.compose([Validators.required])],
+      address: ["", Validators.compose([Validators.required])],
+      phone: ["", Validators.compose([Validators.required])],
+      email: ["", Validators.compose([Validators.required])],
+      supplier_type_id: ["", Validators.compose([Validators.required])],
+    });
+  }
+
+  ngOnInit() {
+    if (this.data.details) {
+      this.isUpdateMode = true;
+      this.supplierForm.patchValue(this.data.details);
+    }
+  }
+
+  async submit() {
+    if (!this.supplierForm.valid) {
+      this.alertService.addAlert("Please Fill All Required Fields", "warn");
+      this.supplierForm.markAllAsTouched();
+      return;
+    }
+
+    var supplier = this.supplierForm.value;
+    try {
+      this.spinnerService.show();
+      this.isWorking = true;
+      let result = this.isUpdateMode
+        ? await lastValueFrom(this.supplierService.update(supplier))
+        : await lastValueFrom(this.supplierService.store(supplier));
+      this.dialogRef.close(result);
+    } catch (error) {
+      this.errorService.handleError(error);
+    } finally {
+      this.isWorking = false;
+      this.spinnerService.hide();
+    }
+  }
+
+  /**Method to evaluate form fields*/
+  override isFieldValid(field: string) {
+    return this.formValidatorService.isFieldValid(field, this.supplierForm);
+  }
+
+  /**Method to find error in form fields*/
+  override getErrorMessage(field: string) {
+    return this.formValidatorService.getErrorMessage(
+      field,
+      this.supplierForm,
+      this.errorMessages
+    );
+  }
+}

package/src/app/@modules/inventory-common/supplier/supplier-form/supplier-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 SupplierFormService extends TechlifyFormService {
+  constructor() {
+    super();
+  }
+}

package/src/app/@modules/inventory-common/supplier/supplier-information/supplier-information.component.html

@@ -0,0 +1,67 @@
+<mat-card>
+  <mat-card-content>
+    <div class="d-flex justify-content-between align-items-center">
+      <h3 class="mb-0">Personal Information</h3>
+      <div class="d-flex justify-content-end align-items-center gap-1">
+        <app-audit-log-for-model
+          [modelId]="supplier?.id"
+          modelType="Supplier"
+          logView="all"
+        ></app-audit-log-for-model>
+        <mat-icon
+          class="material-icons cursor-pointer"
+          (click)="modifySupplier(supplier)"
+        >
+          edit
+        </mat-icon>
+        <mat-icon
+          class="material-icons cursor-pointer"
+          (click)="deleteSupplier(supplier)"
+        >
+          delete
+        </mat-icon>
+      </div>
+    </div>
+
+    <mat-divider></mat-divider>
+
+    <div class="mt-2">
+      <div class="d-flex justify-content-start gap-2">
+        <div>
+          <h3 class="mb-0">{{ supplier?.company_name }}</h3>
+          <span class="status-pill-sm status-light-orange">{{
+            supplier?.type?.title
+          }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="row mt-3">
+      <div class="col-6">
+        <p class="text-muted mb-0">Contact Name</p>
+        <p class="text-wrap">{{ supplier?.contact_name }}</p>
+      </div>
+      <div class="col-6">
+        <p class="text-muted mb-0">Email</p>
+        <p class="text-wrap">{{ supplier?.email }}</p>
+      </div>
+      <div class="col-6">
+        <p class="text-muted mb-0">Phone</p>
+        <p class="text-wrap">{{ supplier?.phone }}</p>
+      </div>
+      <div class="col-6">
+        <p class="text-muted mb-0">Details</p>
+        <p class="text-wrap">{{ supplier?.details }}</p>
+      </div>
+    </div>
+
+    <div class="row mt-2 h-100">
+      <div class="d-flex">
+        <mat-icon class="material-icons text-primary my-auto"
+          >location_on</mat-icon
+        >
+        <p class="ms-2 my-auto">{{ supplier?.address }}</p>
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>

package/src/app/@modules/inventory-common/supplier/supplier-information/supplier-information.component.ts

@@ -0,0 +1,68 @@
+import { Component, Input } from "@angular/core";
+import {
+  ActionPopup,
+  ActionPopupComponent,
+  AlertService,
+  ErrorHandlerService,
+} from "ngx-techlify-core";
+import { SupplierFormComponent } from "../supplier-form/supplier-form.component";
+import { MatDialog } from "@angular/material/dialog";
+import { SupplierService } from "../supplier.service";
+import { Router } from "@angular/router";
+
+@Component({
+  selector: "app-supplier-information",
+  templateUrl: "./supplier-information.component.html",
+})
+export class SupplierInformationComponent {
+  @Input() supplier!: any;
+
+  constructor(
+    private dialog: MatDialog,
+    private supplierService: SupplierService,
+    private alertService: AlertService,
+    private router: Router,
+    private errorService: ErrorHandlerService
+  ) {}
+
+  modifySupplier(model?: any) {
+    const dialogRef = this.dialog.open(SupplierFormComponent, {
+      width: "600px",
+      data: {
+        details: model,
+      },
+    });
+    dialogRef.afterClosed().subscribe((result: any) => {
+      if (result) {
+        location.reload();
+      }
+    });
+  }
+
+  deleteSupplier(id: any) {
+    const dialogRef = this.dialog.open(ActionPopupComponent, {
+      width: "400px",
+      data: <ActionPopup>{
+        title: "Delete Supplier",
+        message: "Are you sure you want to delete this supplier?",
+      },
+      autoFocus: false,
+    });
+
+    dialogRef.afterClosed().subscribe(async (result: any) => {
+      if (result) {
+        try {
+          const result = await this.supplierService.destroy(id);
+          this.alertService.addAlert(
+            "Successfully Deleted Supplier",
+            "success"
+          );
+        } catch (error) {
+          this.errorService.handleError(error);
+        } finally {
+          this.router.navigateByUrl("/suppliers");
+        }
+      }
+    });
+  }
+}