techlify-inventory-common 0.0.1

package/src/app/@modules/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/src/app/@modules/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/src/app/@modules/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/src/app/@modules/user/user-layout/user-layout.component.html

@@ -0,0 +1,15 @@
+<div class="p-3 horizontal-navbar position-fixed">
+  <a
+    class="nav-item"
+    fxLayout
+    fxLayoutAlign="start center"
+    fxLayoutGap="5px"
+    routerLink="/techlify-rbac"
+  >
+    <mat-icon>group</mat-icon>
+    <span>Users</span>
+  </a>
+</div>
+<div fxLayoutGap="10px" class="p-2" style="margin-top: 57px">
+  <router-outlet></router-outlet>
+</div>

package/src/app/@modules/user/user-layout/user-layout.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-user-layout",
+  templateUrl: "./user-layout.component.html",
+  styleUrls: ["./user-layout.component.scss"],
+})
+export class UserLayoutComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/src/app/@modules/user/user-routing.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+import { UserLayoutComponent } from "@modules/user/user-layout/user-layout.component";
+
+const routes: Routes = [
+  {
+    path: "",
+    component: UserLayoutComponent,
+    children: [
+      {
+        path: "",
+        loadChildren: () =>
+          import("ngx-techlify-core").then((mod) => mod.NgxTechlifyUsersModule),
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class UserRoutingModule {}

package/src/app/@modules/user/user.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { UserRoutingModule } from "./user-routing.module";
+import { UserLayoutComponent } from "./user-layout/user-layout.component";
+import { MatIconModule } from "@angular/material/icon";
+import { FlexLayoutModule } from "@angular/flex-layout";
+
+@NgModule({
+  declarations: [UserLayoutComponent],
+  imports: [CommonModule, UserRoutingModule, MatIconModule, FlexLayoutModule],
+})
+export class UserModule {}

package/src/app/@modules/user-setting-button/user-setting-button/user-setting-button.component.html

@@ -0,0 +1,15 @@
+<mat-icon class="cursor-pointer" [matMenuTriggerFor]="settingsMenu">
+  <span class="material-icons-outlined"> settings </span>
+</mat-icon>
+<mat-menu #settingsMenu="matMenu">
+  <button mat-menu-item routerLink="/customers" routerLinkActive="active">
+    Customers
+  </button>
+  <button
+    mat-menu-item
+    routerLink="/email-subscriptions"
+    routerLinkActive="active"
+  >
+    Email Subscriptions
+  </button>
+</mat-menu>

package/src/app/@modules/user-setting-button/user-setting-button/user-setting-button.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-user-setting-button",
+  templateUrl: "./user-setting-button.component.html",
+  styleUrls: ["./user-setting-button.component.scss"],
+})
+export class UserSettingButtonComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}