ng-prime-tools

v1.0.9

Published

17 days ago

An advanced PrimeNG table for Angular

Downloads

123

0High
0Medium
0Low

jaaizakariae

angular PrimeNG typescript

NG Prime Tools

An advanced PrimeNG tools library for Angular.

Introduction

ng-prime-tools is a collection of advanced tools built on top of PrimeNG for Angular applications.

Installation

To install ng-prime-tools, use the following command:

npm install ng-prime-tools

Compatibility

Angular Version: 17.3.1 or higher
PrimeNG Version: 17.18.0 or higher

Usage

ng-advanced-prime-table

To use the ng-advanced-prime-table component, follow these steps:

Import the Module:
Import the NgAdvancedPrimeTableModule in your Angular module or standalone component.
```
import { NgAdvancedPrimeTableModule, TableColumn, TableTypeEnum } from "ng-prime-tools";
```

Add the Component:

Add the ng-advanced-prime-table component to your template:

<ng-advanced-prime-table [columns]="columns" [data]="data" [hasSearchFilter]="true" [hasColumnFilter]="true" [isPaginated]="true" [totalRecords]="totalRecords" [isSortable]="true"></ng-advanced-prime-table>

Define the Inputs:

In your component, define the necessary inputs for the table:

import { Component, OnInit } from "@angular/core";
import { NgAdvancedPrimeTableModule } from "ng-prime-tools/ng-advanced-prime-table";
import { TableColumn } from "ng-prime-tools/models";
import { TableTypeEnum } from "ng-prime-tools/enums";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [NgAdvancedPrimeTableModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
  columns: TableColumn[] = [];
  data: any[] = [];
  totalRecords: number = 0;

  ngOnInit(): void {
    this.columns = [
      {
        title: "Name",
        code: "name",
        type: TableTypeEnum.STRING,
        isEditable: true,
      },
      {
        title: "Date",
        code: "date",
        type: TableTypeEnum.DATE,
        isEditable: true,
      },
      {
        title: "Amount",
        code: "amount",
        type: TableTypeEnum.AMOUNT,
        currency: "USD",
        isEditable: true,
      },
    ];

    this.data = [
      { name: "John Doe", date: "11/06/2024", amount: 100 },
      { name: "Jane Doe", date: "20/06/2024", amount: 200 },
    ];

    this.totalRecords = this.data.length;
  }
}

Inputs

data (any[]): The data to be displayed in the table.
columns (TableColumn[]): The columns configuration for the table.
totalRecords (number): The total number of records.
rowsPerPage (number[]): The number of rows per page options for pagination.
hasSearchFilter (boolean): Whether the table has a global search filter.
hasColumnFilter (boolean): Whether the table has column-specific filters.
isPaginated (boolean): Whether the table is paginated.
actions (any[]): The actions available for the table rows.
isSortable (boolean): Whether the table columns are sortable.

Outputs

filter (EventEmitter): Emitted when the table is filtered.
search (EventEmitter<any>): Emitted when a global search is performed.

Example

Here's a complete example of how to use the ng-advanced-prime-table component:

import { Component, OnInit } from "@angular/core";
import { CommonModule } from "@angular/common";
import { NgAdvancedPrimeTableModule } from "ng-prime-tools/ng-advanced-prime-table";
import { TableColumn } from "ng-prime-tools/models";
import { TableTypeEnum } from "ng-prime-tools/enums";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [CommonModule, NgAdvancedPrimeTableModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
  columns: TableColumn[] = [];
  data: any[] = [];
  totalRecords: number = 0;

  ngOnInit(): void {
    this.columns = [
      {
        title: "Name",
        code: "name",
        type: TableTypeEnum.STRING,
        isEditable: true,
      },
      {
        title: "Date",
        code: "date",
        type: TableTypeEnum.DATE,
        isEditable: true,
      },
      {
        title: "Amount",
        code: "amount",
        type: TableTypeEnum.AMOUNT,
        currency: "USD",
        isEditable: true,
      },
    ];

    this.data = [
      { name: "ZAK JAAI", date: "11/06/2024", amount: 100 },
      { name: "ZAK2 JAAI", date: "20/06/2024", amount: 200 },
    ];

    this.totalRecords = this.data.length;
  }
}

<ng-advanced-prime-table [columns]="columns" [data]="data" [hasSearchFilter]="true" [hasColumnFilter]="true" [isPaginated]="true" [totalRecords]="totalRecords" [isSortable]="true"></ng-advanced-prime-table>

multi-search-criteria

To use the multi-search-criteria component, follow these steps:

Import the Module:
Import the MultiSearchCriteriaModule in your Angular module or standalone component.
```
import { MultiSearchCriteriaModule, SearchCriteria, SearchCriteriaTypeEnum } from "ng-prime-tools";
```

Add the Component:

Add the multi-search-criteria component to your template:

<multi-search-criteria [title]="'Multi-Criteria Search'" [criteria]="criteria" [data]="data" [mode]="'dynamic'" (filteredData)="onFilteredData($event)" (searchCriteria)="onSearchData($event)"></multi-search-criteria>

Define the Inputs:

In your component, define the necessary inputs for the criteria:

import { Component, OnInit } from "@angular/core";
import { CommonModule } from "@angular/common";
import { MultiSearchCriteriaModule, SearchCriteria, SearchCriteriaTypeEnum, FilterOption } from "ng-prime-tools";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [CommonModule, MultiSearchCriteriaModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
  criteria: SearchCriteria[] = [];
  data: any[] = [];
  filteredData: any[] = [];
  totalRecords: number = 0;

  ngOnInit(): void {
    this.criteria = [
      {
        title: "Name",
        code: "name",
        type: SearchCriteriaTypeEnum.STRING,
      },
      {
        title: "Date Range",
        code: "dateRange",
        type: SearchCriteriaTypeEnum.DATERANGE,
      },
      {
        title: "Amount",
        code: "amount",
        type: SearchCriteriaTypeEnum.AMOUNT,
        currency: "USD",
      },
      {
        title: "Type",
        code: "type",
        type: SearchCriteriaTypeEnum.MULTISELECT,
        filterOptions: [
          { label: "Invoice", value: "Invoice" },
          { label: "Bill", value: "Bill" },
        ],
      },
    ];

    this.data = [
      { name: "ZAK JAAI", date: "11/06/2024", amount: 100, type: "Invoice" },
      { name: "ZAK2 JAAI", date: "20/06/2024", amount: 200, type: "Bill" },
    ];

    this.filteredData = [...this.data];
    this.totalRecords = this.data.length;
  }

  onFilteredData(filteredData: any[]): void {
    this.filteredData = filteredData;
    this.totalRecords = filteredData.length;
  }

  onSearchData(searchCriteria: { [key: string]: any }): void {
    console.log(searchCriteria);
  }
}

Inputs

title (`

string`): The title of the multi-search criteria panel.

criteria (SearchCriteria[]): The search criteria configuration.
data (any[]): The data to be filtered (used in static mode).
mode ('static' | 'dynamic'): The mode of the multi-search criteria component.
- 'static': Filters the data directly within the component.
- 'dynamic': Emits the search criteria to be handled externally (e.g., for server-side filtering).

Outputs

filteredData (EventEmitter<any[]>): Emitted with the filtered data (only in static mode).
searchCriteria (EventEmitter<{ [key: string]: any }>): Emitted with the search criteria (only in dynamic mode).

Example

Here's a complete example of how to use the multi-search-criteria component in dynamic mode:

import { Component, OnInit } from "@angular/core";
import { CommonModule } from "@angular/common";
import { MultiSearchCriteriaModule, SearchCriteria, SearchCriteriaTypeEnum, FilterOption } from "ng-prime-tools";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [CommonModule, MultiSearchCriteriaModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
  criteria: SearchCriteria[] = [];
  data: any[] = [];
  filteredData: any[] = [];
  totalRecords: number = 0;

  ngOnInit(): void {
    this.criteria = [
      {
        title: "Name",
        code: "name",
        type: SearchCriteriaTypeEnum.STRING,
      },
      {
        title: "Date Range",
        code: "dateRange",
        type: SearchCriteriaTypeEnum.DATERANGE,
      },
      {
        title: "Amount",
        code: "amount",
        type: SearchCriteriaTypeEnum.AMOUNT,
        currency: "USD",
      },
      {
        title: "Type",
        code: "type",
        type: SearchCriteriaTypeEnum.MULTISELECT,
        filterOptions: [
          { label: "Invoice", value: "Invoice" },
          { label: "Bill", value: "Bill" },
        ],
      },
    ];

    this.data = [
      { name: "ZAK JAAI", date: "11/06/2024", amount: 100, type: "Invoice" },
      { name: "ZAK2 JAAI", date: "20/06/2024", amount: 200, type: "Bill" },
    ];

    this.filteredData = [...this.data];
    this.totalRecords = this.data.length;
  }

  onFilteredData(filteredData: any[]): void {
    this.filteredData = filteredData;
    this.totalRecords = filteredData.length;
  }

  onSearchData(searchCriteria: { [key: string]: any }): void {
    console.log(searchCriteria);
    // Perform server-side search or any other external data fetching logic
  }
}

<multi-search-criteria [title]="'Multi-Criteria Search'" [criteria]="criteria" [data]="data" [mode]="'dynamic'" (filteredData)="onFilteredData($event)" (searchCriteria)="onSearchData($event)"></multi-search-criteria>

<ng-advanced-prime-table [columns]="columns" [data]="filteredData" [hasSearchFilter]="true" [hasColumnFilter]="true" [isPaginated]="true" [totalRecords]="totalRecords" [isSortable]="true"></ng-advanced-prime-table>

FormBuilder

The FormBuilder component is a powerful and flexible tool for dynamically generating forms with various input types. It allows you to create nested groups, manage validations, and customize the appearance and behavior of your forms.

Components

The FormBuilder leverages several input components to build comprehensive forms:

pt-check-box-input: A customizable checkbox input component.
pt-date-input: A versatile date input component supporting both single date and date range selections.
pt-dropdown: A dropdown input component for selecting from a list of options.
pt-form-builder: The form builder component that dynamically renders form fields.
pt-multi-select: A multi-select dropdown component for selecting multiple values from a list.
pt-number-input: A numeric input component with support for validation and formatting.
pt-switch-input: A switch input component, ideal for toggling settings.
pt-text-area-input: A text area input component for larger, multi-line text entries.
pt-text-input: A standard text input component with support for icons, placeholders, and validation.

Example

Below is an example of how to use the FormBuilder component to create a user registration form with various input fields:

import { Component, OnInit } from "@angular/core";
import { CommonModule } from "@angular/common";
import { ReactiveFormsModule } from "@angular/forms";
import { FormFieldGroup, FormInputTypeEnum, ButtonColorEnum, FormButton, PTFormBuilderModule, InputValidationEnum, FormTextField, FormCheckBoxField, FormSwitchField, FormNumberField, FormDateField, FormDropdownField, FormMultiSelectField, FormTextAreaField } from "ng-prime-tools";

@Component({
  selector: "app-form-builder-tester",
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, PTFormBuilderModule],
  templateUrl: "./form-builder-tester.component.html",
  styleUrls: ["./form-builder-tester.component.css"],
})
export class FormBuilderTesterComponent implements OnInit {
  mainGroup: FormFieldGroup = { fields: [], groups: [] };
  buttons: FormButton[] = [];

  ngOnInit() {
    this.initializeSettings();
  }

  initializeSettings() {
    this.initializeMainGroup();
    this.initializeButtons();
  }

  initializeMainGroup() {
    this.mainGroup = {
      groups: [this.createNameGroup(), this.createSubscriptionGroup(), this.createAgeGroup(), this.createBirthdateGroup(), this.createDateRangeGroup(), this.createAmountGroup(), this.createCountryGroup(), this.createHobbiesGroup(), this.createDescriptionGroup()],
    };
  }

  createNameGroup(): FormFieldGroup {
    return {
      fields: [
        {
          type: FormInputTypeEnum.TEXT,
          label: "First Name",
          name: "firstName",
          required: true,
          placeholder: "Enter your first name",
          iconClass: "pi pi-user",
          iconPosition: "left",
          minLength: 3,
          maxLength: 10,
          inputValidation: InputValidationEnum.ONLY_LETTERS,
        } as FormTextField,
        {
          type: FormInputTypeEnum.TEXT,
          label: "Last Name",
          name: "lastName",
          required: true,
          placeholder: "Enter your last name",
        } as FormTextField,
      ],
    };
  }

  createSubscriptionGroup(): FormFieldGroup {
    return {
      fields: [
        {
          type: FormInputTypeEnum.CHECKBOX,
          label: "Subscribe",
          name: "subscribe",
          required: true,
        } as FormCheckBoxField,
        {
          type: FormInputTypeEnum.SWITCH,
          label: "Active",
          name: "active",
          required: true,
        } as FormSwitchField,
      ],
    };
  }

  createAgeGroup(): FormFieldGroup {
    return {
      fields: [
        {
          type: FormInputTypeEnum.NUMBER,
          label: "Age",
          name: "age",
          minValue: "18",
          maxValue: "40",
          required: true,
          errorText: "Age is required",
          placeholder: "Enter your age",
        } as FormNumberField,
      ],
    };
  }

  createBirthdateGroup(): FormFieldGroup {
    return {
      fields: [
        {
          type: FormInputTypeEnum.DATE,
          label: "Birthdate",
          name: "birthdate",
          required: true,
          dateFormat: "dd/mm/yy",
          hourFormat: "24",
          placeholder: "Select your birthdate",
          dateInputType: "date",
        } as FormDateField,
      ],
    };
  }

  createDateRangeGroup(): FormFieldGroup {
    return {
      fields: [
        {
          type: FormInputTypeEnum.DATE,
          label: "Date Range",
          name: "daterange",
          required: true,
          placeholder: "Select date range",
          dateInputType: "range",
        } as FormDateField,
      ],
    };
  }

  createAmountGroup(): FormFieldGroup {
    return {
      fields: [
        {
          type: FormInputTypeEnum.AMOUNT,
          label: "Amount",
          name: "amount",
          minValue: "100",
          maxValue: "1000",
          required: true,
          currency: "MAD",
          iconPosition: "right",
          placeholder: "Enter the amount",
          decimalDigits: 3,
          numberFormat: "fr-FR",
          disabled: true,
        } as FormNumberField,
      ],
    };
  }

  createCountryGroup(): FormFieldGroup {
    return {
      fields: [
        {
          type: FormInputTypeEnum.SELECT,
          label: "Country",
          name: "country",
          options: [
            { label: "USA", value: "usa" },
            { label: "Canada", value: "canada" },
          ],
          required: true,
          placeholder: "Select your country",
        } as FormDropdownField,
      ],
    };
  }

  createHobbiesGroup(): FormFieldGroup {
    return {
      fields: [
        {
          type: FormInputTypeEnum.MULTISELECT,
          label: "Hobbies",
          name: "hobbies",
          options: [
            { label: "Reading", value: "reading" },
            { label: "Travelling", value: "travelling" },
            { label: "Cooking", value: "cooking" },
          ],
          required: true,
          placeholder: "Select your hobbies",
        } as FormMultiSelectField,
      ],
    };
  }

  createDescriptionGroup(): FormFieldGroup {
    return {
      fields: [
        {
          type: FormInputTypeEnum.TEXTAREA,
          label: "Description",
          name: "description",
          rows: 5,
          required: true,
          errorText: "Description est obligatoire !",
          placeholder: "Enter a description",
          minLength: 10,
          maxLength: 20,
          iconClass: "pi pi-dollar",
          iconPosition: "right",
          disabled: true,
        } as FormTextAreaField,
      ],
    };
  }

  initializeButtons() {
    this.buttons = [
      {
        text: "Custom Action",
        action: this.customAction,
        color: ButtonColorEnum.SUCCESS,
        icon: "pi pi-check",
      },
      { text: "Submit", color: ButtonColorEnum.PRIMARY, isSubmit: true },
      { text: "Clear", color: ButtonColorEnum.SECONDARY, isClear: true },
    ];
  }

  customAction() {
    console.log("Custom action executed");
  }

  onFormSubmit(formData: { [key: string]: any }) {
    console.log("Form submitted with data:", formData);
  }
}

Changelog

Here is the changelog entry for version 1.0.6:

Changelog

Here's an entry you can add to the changelog for version 10.0.9:

Version 10.0.9 - Release Date: [Insert Date]

New Features

ng-advanced-prime-table:
- Loading Indicator: Added loading spinner functionality to provide visual feedback during data fetching.
- Vertical Scrolling: Enabled vertical scrolling to handle large datasets and improve usability.
- Empty Record Message: Introduced a customizable message for when no data is available in the table.
New Components:

Version 1.0.9

pt-metric-card-group & pt-metric-card: Introduced a new metric card component and its group, designed for displaying key performance indicators in a visually appealing way.
pt-chart: Added a new chart component that supports various chart types (line, bar, doughnut, pie, etc.), with extensive customization options.
pt-card: Introduced a new card component for displaying content within a bordered and customizable container.
pt-menu: Added a new menu component to be used within cards, supporting various actions and a customizable layout.

Version 1.0.8

Fix bug on size of buttons exports

Version 1.0.7

New Features

Adding export to pdf and excel buttons in the ng-advanced-prime-table.

  [hasExportExcel]="true"
  [hasExportPDF]="true"
  (exportExcelEvent)="onExportExcel()"
  (exportPdfEvent)="onExportPDF()"

Version 1.0.6

New Features

FormBuilder Component:
Introduced a powerful and flexible FormBuilder component that allows developers to dynamically create forms with various input types. The FormBuilder supports nested groups, input validation, and customizable form behavior. This component simplifies the process of building complex forms by providing a consistent and reusable structure.
New Input Components:
- pt-check-box-input: A customizable checkbox input component for boolean selections.
- pt-date-input: A versatile date input component supporting both single date and date range selections with customizable formats.
- pt-dropdown: A dropdown input component for selecting single options from a list.
- pt-multi-select: A multi-select dropdown component for selecting multiple values from a list.
- pt-number-input: A numeric input component with support for validation (e.g., min/max values) and formatting.
- pt-switch-input: A switch input component for toggling between two states.
- pt-text-area-input: A text area input component for multi-line text entries with customizable rows and validation.
- pt-text-input: A standard text input component with support for icons, placeholders, and input validation.

Version 1.0.5

New Features

multi-search-criteria Component
- Added support for mode input to handle dynamic and static filtering.
  - mode input can be set to 'dynamic' or 'static'. When set to 'dynamic', the component emits search criteria for backend filtering. When set to 'static', the component filters data locally.
- Fixed the bug in the selectAll functionality for multi-select filters.
  - Users can select or deselect all options in a multi-select filter.
ng-advanced-prime-table Component
- Added support for customizable amount formatting.
  - New inputs for columns of type AMOUNT:
    - thousandSeparator (comma or space): Specifies the character used for thousands separator.
    - decimalSeparator (comma or dot): Specifies the character used for decimal separator.
  - Updated the customCurrency pipe to handle optional currency display and customizable separators.

Version 1.0.4

Added multi-search-criteria component.

Version 1.0.3

Initial release with ng-advanced-prime-table component.

License

This project is licensed under the MIT License.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

NG Prime Tools

Table of Contents

Introduction

Installation

Compatibility

Usage

ng-advanced-prime-table

Inputs

Outputs

Example

multi-search-criteria

Inputs

Outputs

Example

FormBuilder

Components

Example

Changelog

Changelog

Version 10.0.9 - Release Date: [Insert Date]

New Features

Version 1.0.9

Version 1.0.8

Version 1.0.7

New Features

Version 1.0.6

New Features

Version 1.0.5

New Features

Version 1.0.4

Version 1.0.3

License