techlify-inventory-common 0.0.1

package/src/app/@modules/inventory-common/stock-issuances/stock-issuance-delete-button/stock-issuance-delete-button.component.html

@@ -0,0 +1,32 @@
+<span
+  class="material-symbols-outlined cursor-pointer"
+  (click)="showDeleteConfirmModel(deleteModelTemplate)"
+>
+  delete
+</span>
+
+<ng-template #deleteModelTemplate>
+  <h3 mat-dialog-title>Delete Stock Issuance</h3>
+  <div mat-dialog-content>
+    <p>Are you sure you want to delete the stock issuance record?</p>
+  </div>
+  <div mat-dialog-actions class="d-flex justify-content-end gap-2">
+    <button
+      [disabled]="isDeleting"
+      mat-raised-button
+      type="button"
+      color="warn"
+      (click)="delete()"
+    >
+      Delete
+    </button>
+    <button
+      [disabled]="isDeleting"
+      mat-flat-button
+      mat-dialog-close
+      type="button"
+    >
+      Cancel
+    </button>
+  </div>
+</ng-template>

package/src/app/@modules/inventory-common/stock-issuances/stock-issuance-delete-button/stock-issuance-delete-button.component.ts

@@ -0,0 +1,49 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+} from "@angular/core";
+import { MatDialog } from "@angular/material/dialog";
+import { StockIssuanceService } from "../stock-issuance.service";
+import { AlertService } from "ngx-techlify-core";
+
+@Component({
+  selector: "app-stock-issuance-delete-button",
+  templateUrl: "./stock-issuance-delete-button.component.html",
+  styleUrls: ["./stock-issuance-delete-button.component.scss"],
+})
+export class StockIssuanceDeleteButtonComponent {
+  @Input() stockIssuance: any;
+  @Output() deleted: EventEmitter<any> = new EventEmitter<any>();
+  isDeleting: boolean = false;
+
+  constructor(
+    private matDialog: MatDialog,
+    private stockIssuanceService: StockIssuanceService,
+    private alertService: AlertService
+  ) {}
+
+  showDeleteConfirmModel(templateRef: TemplateRef<any>) {
+    this.matDialog.open(templateRef, { width: "400px" });
+  }
+
+  delete() {
+    this.isDeleting = true;
+    this.stockIssuanceService.delete(this.stockIssuance).subscribe({
+      next: () => {
+        this.matDialog.closeAll();
+        this.isDeleting = false;
+        this.deleted.emit();
+        this.alertService.addAlert(
+          "Stock Issuance deleted successfully!",
+          "success"
+        );
+      },
+      error: () => {
+        this.isDeleting = false;
+      },
+    });
+  }
+}

package/src/app/@modules/inventory-common/stock-issuances/stock-issuance-delete-button/stock-issuance-delete-button.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { StockIssuanceDeleteButtonComponent } from "./stock-issuance-delete-button.component";
+import { MaterialModule } from "ngx-techlify-core";
+
+@NgModule({
+  declarations: [StockIssuanceDeleteButtonComponent],
+  imports: [CommonModule, MaterialModule],
+  exports: [StockIssuanceDeleteButtonComponent],
+})
+export class StockIssuanceDeleteButtonModule {}

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

@@ -0,0 +1,11 @@
+import { Injectable } from "@angular/core";
+import { HttpService, TechlifyServiceBaseClass } from "ngx-techlify-core";
+
+@Injectable({
+  providedIn: "root",
+})
+export class StockIssuanceService extends TechlifyServiceBaseClass {
+  constructor(httpService: HttpService) {
+    super(httpService, "stock-issuances");
+  }
+}

package/src/app/@modules/inventory-common/stock-issuances/stock-issuances-list/stock-issuances-list.component.html

@@ -0,0 +1,165 @@
+<mat-card *ngIf="!product" class="mb-2">
+  <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-2">
+      <h3 class="mb-0">{{ label }}</h3>
+
+      <app-stock-issue-form-button
+        icon="add"
+        [issuableType]="issuableType"
+        [issuableId]="issuableId"
+        (saved)="reload()"
+      ></app-stock-issue-form-button>
+    </div>
+
+    <app-techlify-filter
+      [filterForm]="filterForm"
+      [filterConfig]="filterConfig"
+      (filterUpdated)="reload()"
+    ></app-techlify-filter>
+  </mat-card-content>
+</mat-card>
+
+<mat-card>
+  <mat-card-content *ngIf="product" class="mb-0">
+    <div class="d-flex justify-content-start align-items-center gap-2 mb-2">
+      <span class="material-symbols-outlined"> ungroup </span>
+      <h3 class="mb-0">Stock Issuances</h3>
+
+      <app-stock-issue-form-button
+        [product]="product"
+        icon="add"
+        (saved)="reload(); listUpdated.emit()"
+      ></app-stock-issue-form-button>
+    </div>
+  </mat-card-content>
+  <mat-card-content class="p-0">
+    <table
+      mat-table
+      [dataSource]="models"
+      class="w-100"
+      aria-describedby="Stock Issuances"
+      infiniteScroll
+      [infiniteScrollDistance]="2"
+      [infiniteScrollThrottle]="50"
+      (scrolled)="onScroll()"
+      matSort
+      (matSortChange)="onSortChange($event)"
+    >
+      <!-- # Column -->
+      <ng-container matColumnDef="no">
+        <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 mat-sort-header>Product</th>
+        <td mat-cell *matCellDef="let element">
+          <a
+            [routerLink]="[
+              '/inventory/products/',
+              element?.product?.id,
+              'view'
+            ]"
+          >
+            {{ element?.product?.name }}
+          </a>
+        </td>
+      </ng-container>
+
+      <!-- Date Column -->
+      <ng-container matColumnDef="date">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>
+        <td mat-cell *matCellDef="let element">{{ element?.date | date }}</td>
+      </ng-container>
+
+      <!-- Related Column -->
+      <ng-container matColumnDef="related">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Related</th>
+        <td mat-cell *matCellDef="let element">
+          <a
+            class="text-dark"
+            *ngIf="element?.issuable"
+            [routerLink]="['/maintenances', element?.issuable_id, 'view']"
+          >
+            Maintenance for {{ element?.issuable?.fixed_asset?.name }}
+          </a>
+        </td>
+      </ng-container>
+
+      <!-- Quantity Column -->
+      <ng-container matColumnDef="quantity">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element?.quantity }} {{ element?.product?.measure?.title }}
+        </td>
+      </ng-container>
+
+      <!-- Purchase Price Column -->
+      <ng-container matColumnDef="purchase_price">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          Purchase Price
+        </th>
+        <td mat-cell *matCellDef="let element">
+          {{ element?.purchase_price | currency }}
+        </td>
+      </ng-container>
+
+      <!-- Total Value Column -->
+      <ng-container matColumnDef="amount">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Value</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element?.amount | currency }}
+        </td>
+      </ng-container>
+
+      <!-- Particulars Column -->
+      <ng-container matColumnDef="particulars">
+        <th mat-header-cell *matHeaderCellDef>Particulars</th>
+        <td mat-cell *matCellDef="let element">{{ element?.particulars }}</td>
+      </ng-container>
+
+      <!-- Supplier Column -->
+      <ng-container matColumnDef="supplier">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element?.supplier?.company_name }}
+        </td>
+      </ng-container>
+
+      <!-- Creator Column -->
+      <ng-container matColumnDef="creator">
+        <th mat-header-cell *matHeaderCellDef>Creator</th>
+        <td mat-cell *matCellDef="let element">
+          <p class="mb-1">{{ element?.creator?.name }}</p>
+          <small class="text-secondary">{{ element?.created_at | date }}</small>
+        </td>
+      </ng-container>
+
+      <!-- Actions Column -->
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef>Actions</th>
+        <td mat-cell *matCellDef="let element">
+          <div class="d-flex gap-1">
+            <app-stock-issue-form-button
+              [product]="element.product"
+              [stockIssuance]="element"
+              (saved)="reload(); listUpdated.emit()"
+            ></app-stock-issue-form-button>
+            <app-stock-issuance-delete-button
+              [stockIssuance]="element"
+              (deleted)="reload(); listUpdated.emit()"
+            ></app-stock-issuance-delete-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 *ngIf="isWorking" mode="indeterminate"></mat-progress-bar>
+  </mat-card-content>
+</mat-card>

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

@@ -0,0 +1,113 @@
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import {
+  RequestHelperService,
+  TechlifyListingControllerInterface,
+  Timeline,
+} from "ngx-techlify-core";
+import { FormBuilder, FormGroup } from "@angular/forms";
+import { debounceTime } from "rxjs";
+import { Sort } from "@angular/material/sort";
+import { StockIssuanceService } from "../stock-issuance.service";
+
+@Component({
+  selector: "app-stock-issuances-list",
+  templateUrl: "./stock-issuances-list.component.html",
+  styleUrls: ["./stock-issuances-list.component.scss"],
+})
+export class StockIssuancesListComponent
+  extends TechlifyListingControllerInterface
+  implements OnInit
+{
+  @Input() product: any;
+  @Input() issuableType!: string;
+  @Input() issuableId!: number;
+  @Input() label = "Stock Issuances";
+  @Output() listUpdated: EventEmitter<any> = new EventEmitter<any>();
+
+  filterConfig: any = {
+    duration: {
+      label: "Date",
+    },
+    search: {
+      placeholder: "Search Product Name, SKU, Description, etc",
+    },
+  };
+  displayedColumns: string[] = [
+    "no",
+    "product",
+    "date",
+    "quantity",
+    "related",
+    "particulars",
+    "creator",
+    "actions",
+  ];
+  constructor(
+    private formBuilder: FormBuilder,
+    private requestHelperService: RequestHelperService,
+    private stockIssuanceService: StockIssuanceService
+  ) {
+    super();
+    this.lastPage = 0;
+    this.filterForm = this.formBuilder.group({
+      duration: [Timeline.THIS_MONTH],
+      date_from: [""],
+      date_to: [""],
+      measure_ids: [""],
+      product_ids: [""],
+      search: [""],
+      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,product.measure,issuable.fixedAsset",
+      ...this.requestHelperService.convertToFormData(this.filterForm.value),
+    };
+    if (this.issuableId && this.issuableType) {
+      params.issuable_ids = this.issuableId;
+      params.issuable_types = this.issuableType;
+    }
+    this.isWorking = true;
+    this.stockIssuanceService.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) {
+    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-issuances/stock-issuances-list/stock-issuances-list.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { StockIssuancesListComponent } from "./stock-issuances-list.component";
+import { StockIssueFormModule } from "../stock-issue-form/stock-issue-form.module";
+import { InfiniteScrollModule } from "ngx-infinite-scroll";
+import { StockIssuanceDeleteButtonModule } from "../stock-issuance-delete-button/stock-issuance-delete-button.module";
+import { MaterialModule } from "ngx-techlify-core";
+import { TechlifyFilterModule } from "@modules/techlify-filter/techlify-filter.module";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import { RouterModule } from "@angular/router";
+
+@NgModule({
+  declarations: [StockIssuancesListComponent],
+  imports: [
+    CommonModule,
+    MaterialModule,
+    TechlifyFilterModule,
+    StockIssueFormModule,
+    InfiniteScrollModule,
+    StockIssuanceDeleteButtonModule,
+    MatProgressBarModule,
+    RouterModule,
+  ],
+  exports: [StockIssuancesListComponent],
+})
+export class StockIssuancesListModule {}

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

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

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

@@ -0,0 +1,36 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { StockIssuancesRoutingModule } from "./stock-issuances-routing.module";
+import { MatCardModule } from "@angular/material/card";
+import { InfiniteScrollModule } from "ngx-infinite-scroll";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import { MatSortModule } from "@angular/material/sort";
+import { MatTableModule } from "@angular/material/table";
+import { StockReceiptFormModule } from "../stock-receipts/stock-receipt-form/stock-receipt-form.module";
+import { StockIssueFormModule } from "./stock-issue-form/stock-issue-form.module";
+import { MatDialogModule } from "@angular/material/dialog";
+import { MatButtonModule } from "@angular/material/button";
+import { StockIssuancesListModule } from "./stock-issuances-list/stock-issuances-list.module";
+import { TechlifyFilterModule } from "@modules/techlify-filter/techlify-filter.module";
+
+@NgModule({
+  declarations: [],
+  exports: [],
+  imports: [
+    CommonModule,
+    StockIssuancesRoutingModule,
+    MatCardModule,
+    TechlifyFilterModule,
+    InfiniteScrollModule,
+    MatProgressBarModule,
+    MatSortModule,
+    MatTableModule,
+    StockReceiptFormModule,
+    StockIssueFormModule,
+    MatDialogModule,
+    MatButtonModule,
+    StockIssuancesListModule,
+  ],
+})
+export class StockIssuancesModule {}

package/src/app/@modules/inventory-common/stock-issuances/stock-issue-form/stock-issue-form/stock-issue-form.component.html

@@ -0,0 +1,64 @@
+<h3 class="text-center">
+  {{ stockIssuance?.id ? "Edit" : "Issue" }} Stock for {{ product?.name }}
+</h3>
+<form
+  [formGroup]="form"
+  class="d-flex flex-column gap-1 justify-content-start"
+  (submit)="save()"
+>
+  <mat-form-field *ngIf="!product">
+    <mat-label>Product</mat-label>
+    <app-searchable-selector
+      formControlName="product_id"
+      apiUrl="api/products"
+      titleField="name"
+      (selectedValueChange)="onProductChange($event)"
+    ></app-searchable-selector>
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Date</mat-label>
+    <input
+      matInput
+      [matDatepicker]="datePicker"
+      formControlName="date"
+      (focus)="datePicker.open()"
+    />
+    <mat-datepicker #datePicker></mat-datepicker>
+    <mat-error *ngIf="isFieldValid('date')">
+      {{ getErrorMessage("date") }}
+    </mat-error>
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Quantity</mat-label>
+    <input matInput formControlName="quantity" type="number" min="0" />
+    <mat-error *ngIf="isFieldValid('quantity')">
+      {{ getErrorMessage("quantity") }}
+    </mat-error>
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Particulars</mat-label>
+    <textarea matInput formControlName="particulars" rows="3"></textarea>
+  </mat-form-field>
+
+  <div class="d-flex justify-content-end align-items-center gap-2">
+    <button
+      [disabled]="isWorking"
+      mat-raised-button
+      color="primary"
+      type="submit"
+    >
+      Save
+    </button>
+    <button
+      [disabled]="isWorking"
+      (click)="cancelled.emit()"
+      mat-flat-button
+      type="button"
+    >
+      Cancel
+    </button>
+  </div>
+</form>

package/src/app/@modules/inventory-common/stock-issuances/stock-issue-form/stock-issue-form/stock-issue-form.component.ts

@@ -0,0 +1,115 @@
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import {
+  AlertService,
+  DateUtils,
+  FormValidatorService,
+  TechlifyFormComponentInterface,
+} from "ngx-techlify-core";
+import { FormBuilder, Validators } from "@angular/forms";
+import { Observable } from "rxjs";
+import { StockIssuanceService } from "../../stock-issuance.service";
+
+@Component({
+  selector: "app-stock-issue-form",
+  templateUrl: "./stock-issue-form.component.html",
+  styleUrls: ["./stock-issue-form.component.scss"],
+})
+export class StockIssueFormComponent
+  extends TechlifyFormComponentInterface
+  implements OnInit
+{
+  @Input() product: any;
+  @Input() stockIssuance: any;
+  @Input() issuableType!: string;
+  @Input() issuableId!: number;
+  @Output() saved: EventEmitter<any> = new EventEmitter<any>();
+  @Output() cancelled: EventEmitter<any> = new EventEmitter<any>();
+
+  isWorking!: boolean;
+
+  constructor(
+    formValidatorService: FormValidatorService,
+    private formBuilder: FormBuilder,
+    private stockIssuanceService: StockIssuanceService,
+    private alertService: AlertService,
+    private dateUtils: DateUtils
+  ) {
+    super(formValidatorService);
+    this.errorMessages = {
+      date: {
+        required: "The date field is required.",
+      },
+      quantity: {
+        required: "The quantity field is required.",
+      },
+    };
+
+    this.form = this.formBuilder.group({
+      id: [""],
+      product_id: [""],
+      date: [new Date(), Validators.required],
+      quantity: [1, Validators.required],
+      particulars: [""],
+    });
+  }
+
+  ngOnInit() {
+    if (this.product) {
+      this.form.get("product_id")?.setValue(this.product?.id);
+    }
+    if (this.stockIssuance) {
+      let data: any = { ...this.stockIssuance };
+      if (data.date) {
+        data.date = new Date(data.date);
+      }
+      this.form.patchValue(data);
+    } else {
+      // on create for set default quantity from last record
+      if (this.product?.last_stock_issuance) {
+        const { quantity } = this.product.last_stock_issuance;
+        this.form.patchValue({
+          quantity,
+        });
+      }
+    }
+  }
+
+  save() {
+    if (this.form.invalid) {
+      this.alertService.addAlert("Please check the form for errors", "error");
+      return;
+    }
+    const data: any = {
+      product_id: this.product?.id,
+      ...this.form.value,
+    };
+    if (data.date) {
+      data.date = this.dateUtils.getYYYYMMDDString(data.date);
+    }
+    if (this.issuableId && this.issuableType) {
+      data.issuable_type = this.issuableType;
+      data.issuable_id = this.issuableId;
+    }
+
+    this.isWorking = true;
+    let request: Observable<any> = this.stockIssuanceService.store(data);
+    if (this.stockIssuance?.id) {
+      request = this.stockIssuanceService.update(data);
+    }
+    request.subscribe({
+      next: (response: any) => {
+        this.isWorking = false;
+        this.saved.emit(response?.item);
+        this.alertService.addAlert(
+          "Stock Issuance Saved Successfully!",
+          "success"
+        );
+      },
+      error: () => (this.isWorking = false),
+    });
+  }
+
+  onProductChange(product: any) {
+    this.product = product;
+  }
+}

package/src/app/@modules/inventory-common/stock-issuances/stock-issue-form/stock-issue-form-button/stock-issue-form-button.component.html

@@ -0,0 +1,20 @@
+<span
+  class="material-symbols-outlined cursor-pointer"
+  [class.text-primary]="icon"
+  matTooltip="Stock Issuance"
+  (click)="showStockIssuanceForm(stockIssuanceFormTemplate)"
+>
+  {{ stockIssuance ? "edit" : icon ?? "upload" }}
+</span>
+
+<ng-template #stockIssuanceFormTemplate>
+  <app-stock-issue-form
+    mat-dialog-content
+    [product]="product"
+    [stockIssuance]="stockIssuance"
+    [issuableType]="issuableType"
+    [issuableId]="issuableId"
+    (cancelled)="matDialogRef.close()"
+    (saved)="onStockIssuanceSaved($event)"
+  ></app-stock-issue-form>
+</ng-template>