techlify-inventory-common 0.0.1

package/projects/inventory-common/src/lib/inventory-common/techlify-filter/techlify-filter.component.html

@@ -0,0 +1,442 @@
+<form
+  [formGroup]="filterForm"
+  fxLayout
+  fxLayoutAlign="start center"
+  fxLayoutGap="10px"
+>
+  <mat-form-field
+    *ngIf="filterForm.get('search')"
+    [appearance]="getFilterConfig('appearance', 'search')"
+  >
+    <mat-label>Search</mat-label>
+    <input
+      formControlName="search"
+      matInput
+      [placeholder]="getFilterConfig('placeholder', 'search')"
+    />
+    <button
+      *ngIf="filterForm.value?.search"
+      mat-icon-button
+      matSuffix
+      (click)="resetField('search')"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </mat-form-field>
+
+  <app-timeline-filter
+    *ngIf="filterForm?.get('duration')"
+    appearance="fill"
+    [labelText]="getFilterConfig('label', 'duration')"
+    [appearance]="getFilterConfig('appearance', 'duration')"
+    formControlName="duration"
+    (selectionChange)="onDurationChange($event)"
+    [showClearButton]="true"
+    [dateFrom]="filterForm.value?.date_from"
+    [dateTo]="filterForm.value?.date_to"
+  ></app-timeline-filter>
+
+  <mat-form-field *ngIf="filterForm.get('payment_method_ids')">
+    <mat-label>Payment Method</mat-label>
+    <app-searchable-selector
+      formControlName="payment_method_ids"
+      apiUrl="api/payment-methods"
+      [multiple]="true"
+      [enableSearch]="false"
+    ></app-searchable-selector>
+    <button
+      *ngIf="filterForm.value?.payment_method_ids"
+      mat-icon-button
+      matSuffix
+      (click)="resetField('payment_method_ids')"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </mat-form-field>
+
+  <ng-container *ngIf="filterForm.get('payment_account_ids')">
+    <mat-form-field *ngxPermissionsOnly="['accountingcommon_account.read']">
+      <mat-label>{{
+        getFilterConfig("label", "payment_account_ids") || "Payment Account"
+      }}</mat-label>
+      <app-searchable-selector
+        formControlName="payment_account_ids"
+        [apiUrl]="
+          getFilterConfig('apiUrl', 'payment_account_ids') || 'api/accounts'
+        "
+        [multiple]="true"
+      ></app-searchable-selector>
+      <button
+        *ngIf="filterForm.value?.payment_account_ids"
+        mat-icon-button
+        matSuffix
+        (click)="resetField('payment_account_ids')"
+      >
+        <mat-icon>close</mat-icon>
+      </button>
+    </mat-form-field>
+  </ng-container>
+
+  <mat-form-field *ngIf="filterForm.get('invoice_status_ids')">
+    <mat-label>Invoice Status</mat-label>
+    <app-searchable-selector
+      formControlName="invoice_status_ids"
+      apiUrl="api/invoice-statuses"
+      [multiple]="true"
+    ></app-searchable-selector>
+    <button
+      *ngIf="filterForm.value?.invoice_status_ids"
+      mat-icon-button
+      matSuffix
+      (click)="resetField('invoice_status_ids')"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </mat-form-field>
+
+  <ng-container *ngIf="filterForm.get('customer_ids')">
+    <mat-form-field *ngxPermissionsOnly="['customer_read']">
+      <mat-label>Customer</mat-label>
+      <app-searchable-selector
+        formControlName="customer_ids"
+        titleField="name"
+        apiUrl="api/customers"
+        [multiple]="true"
+      ></app-searchable-selector>
+      <button
+        *ngIf="filterForm.value?.customer_ids"
+        mat-icon-button
+        matSuffix
+        (click)="resetField('customer_ids')"
+      >
+        <mat-icon>close</mat-icon>
+      </button>
+    </mat-form-field>
+  </ng-container>
+
+  <ng-container
+    *ngIf="
+      filterForm.get('project_ids') &&
+      getFilterConfig('disabled', 'project_ids') === false
+    "
+  >
+    <mat-form-field *ngxPermissionsOnly="['project.read']">
+      <mat-label>Project</mat-label>
+      <app-searchable-selector
+        formControlName="project_ids"
+        apiUrl="api/projects"
+        titleField="project_name"
+        [multiple]="true"
+      ></app-searchable-selector>
+      <button
+        *ngIf="filterForm.value?.project_ids"
+        mat-icon-button
+        matSuffix
+        (click)="resetField('project_ids')"
+      >
+        <mat-icon>close</mat-icon>
+      </button>
+    </mat-form-field>
+  </ng-container>
+
+  <mat-form-field *ngIf="filterForm.get('product_ids')">
+    <mat-label>Product</mat-label>
+    <app-searchable-selector
+      formControlName="product_ids"
+      apiUrl="api/products"
+      titleField="name"
+      [multiple]="true"
+    ></app-searchable-selector>
+    <button
+      *ngIf="filterForm.value?.product_ids"
+      mat-icon-button
+      matSuffix
+      (click)="resetField('product_ids')"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </mat-form-field>
+
+  <mat-form-field *ngIf="filterForm.get('measure_ids')">
+    <mat-label>Measure</mat-label>
+    <app-searchable-selector
+      formControlName="measure_ids"
+      apiUrl="api/product-measures"
+      [multiple]="true"
+    ></app-searchable-selector>
+    <button
+      *ngIf="filterForm.value?.measure_ids"
+      mat-icon-button
+      matSuffix
+      (click)="resetField('measure_ids')"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </mat-form-field>
+
+  <ng-container *ngxPermissionsOnly="['supplier.read']">
+    <mat-form-field
+      *ngIf="filterForm.get('supplier_ids')"
+      [appearance]="getFilterConfig('appearance', 'supplier_ids')"
+    >
+      <mat-label>Supplier</mat-label>
+      <app-searchable-selector
+        formControlName="supplier_ids"
+        titleField="company_name"
+        apiUrl="api/suppliers"
+        [multiple]="true"
+      ></app-searchable-selector>
+      <button
+        *ngIf="filterForm.value?.supplier_ids"
+        mat-icon-button
+        matSuffix
+        (click)="resetField('supplier_ids')"
+      >
+        <mat-icon>close</mat-icon>
+      </button>
+    </mat-form-field>
+  </ng-container>
+
+  <app-timeline-filter
+    appearance="fill"
+    [labelText]="getFilterConfig('label', 'expiry_duration')"
+    *ngIf="filterForm?.get('expiry_duration')"
+    formControlName="expiry_duration"
+    (selectionChange)="onExpiryDurationChange($event)"
+    [showClearButton]="true"
+    [dateFrom]="filterForm.value?.expiry_date_from"
+    [dateTo]="filterForm.value?.expiry_date_to"
+  ></app-timeline-filter>
+
+  <mat-form-field
+    *ngIf="filterForm.get('cost_category_ids')"
+    style="width: 150px"
+  >
+    <mat-label>Cost Category</mat-label>
+    <app-searchable-selector
+      formControlName="cost_category_ids"
+      apiUrl="api/cost-code-categories"
+      [multiple]="true"
+    ></app-searchable-selector>
+    <button
+      *ngIf="filterForm.value?.cost_category_ids"
+      mat-icon-button
+      matSuffix
+      (click)="resetField('cost_category_ids')"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </mat-form-field>
+
+  <mat-form-field *ngIf="filterForm.get('milestone_ids')" style="width: 150px">
+    <mat-label>Milestone</mat-label>
+    <app-searchable-selector
+      formControlName="milestone_ids"
+      apiUrl="api/milestones"
+      [multiple]="true"
+    ></app-searchable-selector>
+    <button
+      *ngIf="filterForm.value?.milestone_ids"
+      mat-icon-button
+      matSuffix
+      (click)="resetField('milestone_ids')"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </mat-form-field>
+
+  <mat-form-field *ngIf="filterForm.get('team_member_ids')">
+    <mat-label>Assignee</mat-label>
+    <app-searchable-selector
+      apiUrl="api/persons"
+      formControlName="team_member_ids"
+      titleField="name"
+      [multiple]="true"
+    >
+    </app-searchable-selector>
+    <button
+      *ngIf="filterForm.value?.team_member_ids"
+      mat-icon-button
+      matSuffix
+      (click)="resetField('team_member_ids')"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </mat-form-field>
+
+  <mat-form-field *ngIf="filterForm.get('fixed_asset_type_ids')">
+    <mat-label>Type</mat-label>
+    <app-searchable-selector
+      formControlName="fixed_asset_type_ids"
+      apiUrl="api/accounting-plus/fixed-asset-types"
+      [multiple]="true"
+    ></app-searchable-selector>
+    <button
+      *ngIf="filterForm.value?.fixed_asset_type_ids"
+      mat-icon-button
+      matSuffix
+      (click)="resetField('fixed_asset_type_ids')"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </mat-form-field>
+
+  <mat-form-field *ngIf="filterForm.get('fixed_asset_document_type_ids')">
+    <mat-label>Type</mat-label>
+    <app-searchable-selector
+      formControlName="fixed_asset_document_type_ids"
+      apiUrl="api/accounting-plus/fixed-asset-document-types"
+      [multiple]="true"
+      [enableSearch]="
+        getFilterConfig('enableSearch', 'fixed_asset_document_type_ids')
+      "
+    ></app-searchable-selector>
+    <button
+      *ngIf="filterForm.value?.fixed_asset_document_type_ids"
+      mat-icon-button
+      matSuffix
+      (click)="resetField('fixed_asset_document_type_ids')"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </mat-form-field>
+
+  <div *ngIf="filterForm.get('fixed_asset_document_status')">
+    <small
+      class="mr-2 text-secondary"
+      *ngIf="getFilterConfig('showLabel', 'fixed_asset_document_status')"
+    >
+      Status
+    </small>
+    <mat-button-toggle-group
+      formControlName="fixed_asset_document_status"
+      [multiple]="false"
+    >
+      <mat-button-toggle value="all">All</mat-button-toggle>
+      <mat-button-toggle value="active">Active</mat-button-toggle>
+      <mat-button-toggle value="expired">Expired</mat-button-toggle>
+    </mat-button-toggle-group>
+  </div>
+
+  <mat-form-field *ngIf="filterForm.get('asset_account_ids')">
+    <mat-label>Asset Account</mat-label>
+    <app-searchable-selector
+      formControlName="asset_account_ids"
+      apiUrl="api/accounts"
+      [multiple]="true"
+    ></app-searchable-selector>
+    <button
+      *ngIf="filterForm.value?.asset_account_ids"
+      mat-icon-button
+      matSuffix
+      (click)="resetField('asset_account_ids')"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </mat-form-field>
+
+  <mat-form-field *ngIf="filterForm.get('depreciation_expense_account_ids')">
+    <mat-label>Depreciation Expense Account</mat-label>
+    <app-searchable-selector
+      [multiple]="true"
+      apiUrl="api/accounts"
+      formControlName="depreciation_expense_account_ids"
+    ></app-searchable-selector>
+    <button
+      *ngIf="filterForm.value?.depreciation_expense_account_ids"
+      mat-icon-button
+      matSuffix
+      (click)="resetField('depreciation_expense_account_ids')"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </mat-form-field>
+
+  <mat-form-field *ngIf="filterForm.get('depreciation_method_ids')">
+    <mat-label>Depreciation Method</mat-label>
+    <app-searchable-selector
+      formControlName="depreciation_method_ids"
+      apiUrl="api/accounting-plus/depreciation-methods"
+      [multiple]="true"
+    ></app-searchable-selector>
+    <button
+      (click)="resetField('depreciation_method_ids')"
+      *ngIf="filterForm.value?.depreciation_method_ids"
+      mat-icon-button
+      matSuffix
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </mat-form-field>
+
+  <mat-form-field
+    *ngIf="filterForm.get('task_status_ids')"
+    style="width: 150px"
+  >
+    <mat-label>Status</mat-label>
+    <app-searchable-selector
+      apiUrl="api/task-statuses"
+      formControlName="task_status_ids"
+      titleField="title"
+      [multiple]="true"
+      [enableSearch]="false"
+    >
+    </app-searchable-selector>
+    <button
+      *ngIf="filterForm.value?.task_status_ids"
+      mat-icon-button
+      matSuffix
+      (click)="resetField('task_status_ids')"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </mat-form-field>
+
+  <mat-form-field *ngIf="filterForm.get('service_center_ids')">
+    <mat-label>Service Center</mat-label>
+    <app-searchable-selector
+      apiUrl="api/accounting-plus/service-centers"
+      formControlName="service_center_ids"
+      titleField="name"
+      [enableSearch]="false"
+      [multiple]="true"
+    >
+    </app-searchable-selector>
+    <button
+      *ngIf="filterForm.value?.service_center_ids"
+      mat-icon-button
+      matSuffix
+      (click)="resetField('service_center_ids')"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </mat-form-field>
+
+  <mat-form-field *ngIf="filterForm.get('fixed_asset_maintenance_status_ids')">
+    <mat-label>Status</mat-label>
+    <app-searchable-selector
+      apiUrl="api/accounting-plus/fixed-asset-maintenance-statuses"
+      formControlName="fixed_asset_maintenance_status_ids"
+      [multiple]="true"
+      [enableSearch]="false"
+    >
+    </app-searchable-selector>
+    <button
+      *ngIf="filterForm.value?.fixed_asset_maintenance_status_ids"
+      mat-icon-button
+      matSuffix
+      (click)="resetField('fixed_asset_maintenance_status_ids')"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </mat-form-field>
+
+  <mat-form-field *ngIf="filterForm.get('group_by')">
+    <mat-label>Group By</mat-label>
+    <mat-select formControlName="group_by">
+      <mat-option value="week">Week</mat-option>
+      <mat-option value="month">Month</mat-option>
+      <mat-option value="year">Year</mat-option>
+    </mat-select>
+  </mat-form-field>
+</form>

package/projects/inventory-common/src/lib/inventory-common/techlify-filter/techlify-filter.component.ts

@@ -0,0 +1,109 @@
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { FormGroup } from "@angular/forms";
+import { RequestHelperService, TimelineValue } from "ngx-techlify-core";
+import { ActivatedRoute } from "@angular/router";
+import { debounceTime, distinctUntilChanged } from "rxjs";
+import moment from "moment";
+
+@Component({
+  selector: "app-techlify-filter",
+  templateUrl: "./techlify-filter.component.html",
+  styleUrls: ["./techlify-filter.component.scss"],
+})
+export class TechlifyFilterComponent implements OnInit {
+  @Input() filterForm!: FormGroup;
+  @Input() filterConfig: any;
+  @Output() filterUpdated: EventEmitter<any> = new EventEmitter();
+
+  constructor(
+    private requestHelperService: RequestHelperService,
+    private activatedRoute: ActivatedRoute
+  ) {}
+
+  ngOnInit(): void {
+    // listen for filter changes
+    this.filterForm.valueChanges.subscribe({
+      next: (value: any) => {
+        const params: any = this.requestHelperService.convertToFormData(value);
+        this.requestHelperService.updateQueryParams(params);
+      },
+    });
+
+    // update form with query params
+    this.requestHelperService.updateFormWithQueryParams(this.filterForm, {
+      duration: { number: true },
+      expiry_duration: { number: true },
+      payment_method_ids: { multiple: true },
+      payment_account_ids: { multiple: true },
+      project_ids: { multiple: true },
+      invoice_status_ids: { multiple: true },
+      customer_ids: { multiple: true },
+      cost_category_ids: { multiple: true },
+      team_member_ids: { multiple: true },
+      task_status_ids: { multiple: true },
+      asset_account_ids: { multiple: true },
+      depreciation_method_ids: { multiple: true },
+      depreciation_expense_account_ids: { multiple: true },
+      fixed_asset_type_ids: { multiple: true },
+      fixed_asset_document_type_ids: { multiple: true },
+      service_center_ids: { multiple: true },
+      fixed_asset_maintenance_status_ids: { multiple: true },
+      milestone_ids: { multiple: true },
+      product_ids: { multiple: true },
+      supplier_ids: { multiple: true },
+      measure_ids: { multiple: true },
+      type_ids: { multiple: true },
+      fixed_asset_ids: { multiple: true },
+    });
+
+    // listen for route change
+    this.activatedRoute.queryParams
+      .pipe(debounceTime(800), distinctUntilChanged())
+      .subscribe((val: any) => {
+        this.filterUpdated.emit(this.filterForm.value);
+      });
+  }
+
+  resetField(field: string) {
+    this.filterForm.get(field)?.setValue("");
+  }
+
+  onDurationChange(timelineValue: TimelineValue) {
+    let { date_to, date_from } = timelineValue;
+    this.filterForm.patchValue(
+      {
+        date_from: date_from ? moment(date_from).format("YYYY-MM-DD") : "",
+        date_to: date_to ? moment(date_to).format("YYYY-MM-DD") : "",
+      },
+      { emitEvent: false }
+    );
+  }
+
+  /**
+   * Update expiry date from and date to on value change.
+   *
+   * @param timelineValue
+   */
+  onExpiryDurationChange(timelineValue: TimelineValue) {
+    let { date_to, date_from } = timelineValue;
+    this.filterForm.patchValue({
+      expiry_date_from: date_from ? moment(date_from).format("YYYY-MM-DD") : "",
+      expiry_date_to: date_to ? moment(date_to).format("YYYY-MM-DD") : "",
+    });
+  }
+
+  /**
+   * Get the attribute value for the field.
+   *
+   * @param attribute
+   * @param field
+   */
+  getFilterConfig(attribute: string, field: string) {
+    if (!this.filterConfig) return "";
+    // Check if the field and attribute exist in the filter config, return the value or an empty string
+    return this.filterConfig[field] &&
+      this.filterConfig[field][attribute] !== undefined
+      ? this.filterConfig[field][attribute]
+      : "";
+  }
+}

package/projects/inventory-common/src/lib/inventory-common/techlify-filter/techlify-filter.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { TechlifyFilterComponent } from "./techlify-filter.component";
+import { ReactiveFormsModule } from "@angular/forms";
+import { FlexLayoutModule } from "@angular/flex-layout";
+import {
+  MaterialModule,
+  SearchableSelectorModule,
+  TimelineFilterModule,
+} from "ngx-techlify-core";
+
+@NgModule({
+  declarations: [TechlifyFilterComponent],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    FlexLayoutModule,
+    SearchableSelectorModule,
+    TimelineFilterModule,
+    MaterialModule,
+  ],
+  exports: [TechlifyFilterComponent],
+})
+export class TechlifyFilterModule {}

package/projects/inventory-common/src/public-api.ts

@@ -0,0 +1,10 @@
+/*
+ * Public API Surface of inventory-common
+ */
+
+export * from './lib/inventory-common/inventory-common-routing.module';
+export * from './lib/inventory-common/inventory-common.module';
+export * from './lib/inventory-common/stock-summary.service';
+
+export * from './lib/inventory-common/techlify-filter/techlify-filter.module';
+export * from './lib/inventory-common/techlify-filter/techlify-filter.component';

package/projects/inventory-common/tsconfig.lib.json

@@ -0,0 +1,17 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/projects/inventory-common/tsconfig.lib.prod.json

@@ -0,0 +1,13 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/projects/inventory-common/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ],
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/public_api.ts

@@ -0,0 +1,23 @@
+export * from './src/app/modules/inventory/inventory.module'
+
+/* Inventory Item */
+export * from './src/app/modules/inventory/inventory-item.model';
+export * from './src/app/modules/inventory/inventory-items.component';
+export * from './src/app/modules/inventory/inventory-item-add.component';
+export * from './src/app/modules/inventory/inventory-item-edit.component';
+export * from './src/app/modules/inventory/inventory-item-view.component';
+export * from './src/app/modules/inventory/inventory-item-selector.component';
+
+/* Item In */
+export * from './src/app/modules/inventory/item-in/inventory-in.model';
+export * from './src/app/modules/inventory/item-in/inventory-in-add.component';
+export * from './src/app/modules/inventory/item-in/inventory-in-edit.component';
+export * from './src/app/modules/inventory/item-in/inventory-in-delete.component';
+export * from './src/app/modules/inventory/item-in/inventory-in-view-all.component';
+
+/* Item Out */
+export * from './src/app/modules/inventory/item-out/inventory-out.model';
+export * from './src/app/modules/inventory/item-out/inventory-out-add.component';
+export * from './src/app/modules/inventory/item-out/inventory-out-delete.component';
+export * from './src/app/modules/inventory/item-out/inventory-out-edit.component';
+export * from './src/app/modules/inventory/item-out/inventory-out-view-all.component';

package/src/.htaccess

@@ -0,0 +1,19 @@
+
+<IfModule mod_rewrite.c>
+	RewriteEngine On
+
+ 	# -- Redirection to https (optional):
+	# Notice: We have to set base-href attribute correctly:
+	# a) If app is on the root of the domain, can just use "/"
+	# b) If not, we need to set "https://" instead of "http://" in base-href attribute
+	# If need this, uncomment the next two commands
+	
+	RewriteCond %{HTTPS} !on
+  	RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}
+
+	RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
+	RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
+
+	RewriteRule ^.*$ - [NC,L]
+	RewriteRule ^(.*) index.html [NC,L]
+</IfModule>