techlify-inventory-common 0.0.1

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

@@ -0,0 +1,56 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { MaterialModule } from '../../material.module';
+import { ActionPopup, ActionPopupComponent, AlertService, ErrorHandlerService } from 'ngx-techlify-core';
+import { MatDialog } from '@angular/material/dialog';
+import { lastValueFrom } from 'rxjs';
+import { SupplierService } from '../supplier.service';
+import { NgxPermissionsModule } from 'ngx-permissions';
+
+@Component({
+  selector: 'app-supplier-delete-button',
+  templateUrl: './supplier-delete-button.component.html',
+  styleUrls: ['./supplier-delete-button.component.css'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    MaterialModule,
+    NgxPermissionsModule
+  ],
+})
+export class SupplierDeleteButtonComponent implements OnInit {
+
+  @Input() supplier: any
+  @Output() onDelete: EventEmitter<any> = new EventEmitter<any>()
+
+  constructor(private dialog: MatDialog,
+    private alertService: AlertService,
+    private errorHandler: ErrorHandlerService,
+    private supplierService: SupplierService
+  ) { }
+
+  ngOnInit() {
+  }
+
+  openDialog() {
+    this.dialog.open(ActionPopupComponent, {
+      width: '400px',
+      data: <ActionPopup>{
+        title: 'Delete Supplier',
+        message: 'Are you sure you want to delete the Supplier?',
+      },
+      autoFocus: false,
+    }).afterClosed().subscribe(async (result) => {
+      if (result) {
+        try {
+          await lastValueFrom(this.supplierService.destroy(this.supplier.id))
+          this.alertService.addAlert('Successfully deleted the Supplier', 'success');
+          this.onDelete.emit(this.supplier)
+        } catch (error) {
+          this.errorHandler.handleError(error);
+        }
+      }
+    });
+  }
+
+}

package/projects/inventory-common/src/lib/inventory-common/supplier/supplier-form/supplier-form-button/supplier-form-button.component.html

@@ -0,0 +1,3 @@
+<mat-icon color="primary" class="cursor-pointer" [class.text-secondary]="supplier" (click)="openDialog()">
+  {{ supplier ? "edit" : "add" }}
+</mat-icon>

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

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { SupplierFormButtonComponent } from './supplier-form-button.component';
+
+describe('SupplierFormButtonComponent', () => {
+  let component: SupplierFormButtonComponent;
+  let fixture: ComponentFixture<SupplierFormButtonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SupplierFormButtonComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SupplierFormButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,40 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { MaterialModule } from '../../../material.module';
+import { MatDialog } from '@angular/material/dialog';
+import { SupplierFormComponent } from '../supplier-form.component';
+
+@Component({
+  selector: 'app-supplier-form-button',
+  templateUrl: './supplier-form-button.component.html',
+  styleUrls: ['./supplier-form-button.component.css'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    MaterialModule
+  ],
+})
+export class SupplierFormButtonComponent implements OnInit {
+
+  @Input() supplier: any
+  @Output() onSaved: EventEmitter<any> = new EventEmitter<any>()
+
+  constructor(private matDialog: MatDialog) { }
+
+  ngOnInit() {
+  }
+
+  openDialog() {
+    this.matDialog.open(SupplierFormComponent, {
+      width: '600px',
+      data: {
+        details: this.supplier
+      },
+    }).afterClosed().subscribe((result: any) => {
+      if (result) {
+        this.onSaved.emit(result);
+      }
+    });
+  }
+
+}

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

@@ -0,0 +1,100 @@
+<form
+  (ngSubmit)="submit()"
+  [formGroup]="supplierForm"
+  class="mat-typography"
+>
+  <div class="d-flex flex-column justify-content-start gap-2" mat-dialog-content>
+    <h2 class="mb-2">{{ isUpdateMode ? 'Edit' : 'Create' }} Supplier</h2>
+    <mat-form-field>
+      <mat-label>Company Name</mat-label>
+      <input
+        autocomplete="off"
+        formControlName="company_name"
+        matInput
+        placeholder="Company Name"
+        required
+      />
+      <mat-error *ngIf="isFieldValid('company_name')">
+        {{ getErrorMessage("company_name") }}
+      </mat-error>
+    </mat-form-field>
+    <mat-form-field>
+      <mat-label>Contact Name</mat-label>
+      <input
+        autocomplete="off"
+        formControlName="contact_name"
+        matInput
+        placeholder="Contact Name"
+      />
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>Types</mat-label>
+      <app-searchable-selector
+        apiUrl="api/supplier-types"
+        formControlName="supplier_type_id"
+        titleField="title"
+      >
+      </app-searchable-selector>
+    </mat-form-field>
+    <mat-form-field>
+      <mat-label>Phone</mat-label>
+      <input
+        autocomplete="off"
+        formControlName="phone"
+        matInput
+        placeholder="Phone"
+      />
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>Email</mat-label>
+      <input
+        autocomplete="off"
+        formControlName="email"
+        matInput
+        placeholder="Email"
+        type="email"
+      />
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>Address</mat-label>
+      <input
+        autocomplete="off"
+        formControlName="address"
+        matInput
+        placeholder="Address"
+      />
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>Details</mat-label>
+      <input
+        autocomplete="off"
+        formControlName="details"
+        matInput
+        placeholder="Details"
+      />
+    </mat-form-field>
+
+    <div class="d-flex justify-content-end align-items-center gap-3">
+      <button
+        (click)="dialogRef.close()"
+        [disabled]="isWorking"
+        mat-flat-button
+        type="button"
+      >
+        Cancel
+      </button>
+      <button
+        [disabled]="isWorking"
+        color="primary"
+        mat-raised-button
+        type="submit"
+      >
+        Save
+      </button>
+    </div>
+  </div>
+</form>

package/projects/inventory-common/src/lib/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: [""],
+      company_name: ["", Validators.compose([Validators.required])],
+      details: [""],
+      address: [""],
+      phone: [""],
+      email: [""],
+      supplier_type_id: ["",],
+    });
+  }
+
+  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/projects/inventory-common/src/lib/inventory-common/supplier/supplier-form/supplier-form.service.ts

@@ -0,0 +1,11 @@
+import { Injectable } from "@angular/core";
+import TechlifyFormService from '../../services/techlify-form-service';
+
+@Injectable({
+  providedIn: "root",
+})
+export class SupplierFormService extends TechlifyFormService {
+  constructor() {
+    super();
+  }
+}

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

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

@@ -0,0 +1,32 @@
+import { SupplierViewComponent } from "./supplier-view/supplier-view.component";
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+import { SupplierComponent } from "./supplier.component";
+import { SuppliersListComponent } from "./suppliers-list/suppliers-list.component";
+
+const routes: Routes = [
+  {
+    path: "",
+    component: SupplierComponent,
+    children: [
+      { path: "", component: SuppliersListComponent },
+      {
+        path: ":id/view",
+        component: SupplierViewComponent,
+        children: [
+          {
+            path: "",
+            redirectTo: "incidents",
+            pathMatch: "full",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SupplierRoutingModule {}

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

@@ -0,0 +1,17 @@
+import { Injectable } from "@angular/core";
+import { HttpService } from "ngx-techlify-core";
+
+@Injectable({
+  providedIn: "root",
+})
+export class SupplierTypeService {
+  constructor(private httpService: HttpService) {}
+
+  /**
+   * get all suppliers from API
+   *
+   */
+  index() {
+    return this.httpService.get(`api/supplier-types`);
+  }
+}

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

@@ -0,0 +1,60 @@
+<mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
+
+<div *ngIf="supplier" class="d-flex justify-content-start gap-3">
+  <div style="width: 300px">
+    <app-supplier-information [supplier]="supplier"></app-supplier-information>
+    <mat-card class="mt-3">
+      <mat-card-content class="p-0">
+        <app-note-list
+          modelType="Supplier"
+          [relatedModelId]="supplier?.id"
+        ></app-note-list>
+      </mat-card-content>
+    </mat-card>
+  </div>
+
+  <div style="width: calc(100% - 300px - 1rem)">
+    <mat-card style="width: fit-content">
+      <mat-card-content class="p-0">
+        <mat-tab-group
+          mat-stretch-tabs="false"
+          mat-align-tabs="start"
+          [selectedIndex]="selectedTabIndex"
+          (selectedTabChange)="onTabChange($event)"
+        >
+          <mat-tab>
+            <ng-template mat-tab-label>
+              <div
+                class="d-flex justify-content-start align-items-center gap-1"
+              >
+                <span class="material-symbols-outlined">unknown_document</span>
+                <span class="pl-2">Incidents</span>
+              </div>
+            </ng-template>
+          </mat-tab>
+          <mat-tab>
+            <ng-template mat-tab-label>
+              <div
+                class="d-flex justify-content-start align-items-center gap-1"
+              >
+                <span class="material-symbols-outlined">star</span>
+                <span class="pl-2">Ratings</span>
+              </div>
+            </ng-template>
+          </mat-tab>
+          <mat-tab>
+            <ng-template mat-tab-label>
+              <div
+                class="d-flex justify-content-start align-items-center gap-1"
+              >
+                <span class="material-symbols-outlined">price_change</span>
+                <span class="pl-2">Estimates</span>
+              </div>
+            </ng-template>
+          </mat-tab>
+        </mat-tab-group>
+      </mat-card-content>
+    </mat-card>
+    <router-outlet></router-outlet>
+  </div>
+</div>

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

@@ -0,0 +1,58 @@
+import { lastValueFrom } from "rxjs";
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import { SupplierService } from "../supplier.service";
+import { MatTabChangeEvent } from "@angular/material/tabs";
+
+@Component({
+  selector: "app-supplier-view",
+  templateUrl: "./supplier-view.component.html",
+})
+export class SupplierViewComponent implements OnInit {
+  supplier: any;
+  supplierId: number = 0;
+  selectedTabIndex: number = 0;
+  isLoading: boolean = false;
+
+  constructor(
+    private supplierService: SupplierService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) {}
+
+  ngOnInit(): void {
+    this.route.firstChild?.url.subscribe((url) => {
+      if (url[0].path === "ratings") {
+        this.selectedTabIndex = 1;
+      } else if (url[0].path === "estimates") {
+        this.selectedTabIndex = 2;
+      } else {
+        this.selectedTabIndex = 0;
+      }
+    });
+
+    this.supplierId = this.route.snapshot.params["id"];
+    this.getSupplier(this.supplierId);
+  }
+
+  onTabChange(event: MatTabChangeEvent) {
+    switch (event.index) {
+      case 0:
+        this.router.navigate(["incidents"], { relativeTo: this.route });
+        return;
+      case 1:
+        this.router.navigate(["ratings"], { relativeTo: this.route });
+        return;
+      case 2:
+        this.router.navigate(["estimates"], { relativeTo: this.route });
+        return;
+    }
+  }
+
+  async getSupplier(id: number) {
+    this.isLoading = true;
+    let result: any = await lastValueFrom(this.supplierService.show(id));
+    this.isLoading = false;
+    this.supplier = result.item;
+  }
+}

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

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