pb-paging v1.0.0

PbPaging

This library was generated with Angular CLI version 15.0.0.

Description

Compatible with Bootstrap 4 and Feather Icon

Usage Example

Version : v1.0.0

<!-- FILE : file.component.html -->
<lib-pb-paging [config]="SampleViewConfigObj"></lib-pb-paging>

// FILE : file.component.ts

// first of all, import configuration file.
// configuration file will be explain in the last of Usage Example section.
import samplePagingConfigObj from "src/app/objects/paging/sample-paging-config-obj";

// Inside component class, declare 1 variable that has PagingConfigObj type.
SamplePagingConfigObj: PagingConfigObj = samplePagingConfigObj;

// And its done.
// Now, we set up the configuration file.
// Create a file with name sample-paging-config-obj.ts in view folder. Relative Path: src\app\objects\paging\sample-paging-config-obj.ts
// Then, configure your setting in that file like this.
// FILE : sample-paging-config-obj.ts
import { NavigationConstant } from "src/app/constants/NavigationConstant";
import { PagingConfigObj } from "../global/paging-config-obj";

const samplePagingConfigObj: PagingConfigObj = new PagingConfigObj();
samplePagingConfigObj.queryKey = "pagingSample";
samplePagingConfigObj.filters = [
  {
    title: "Date",
    key: "column_date",
    controlName: "controlDate",
    type: "date", //date|text|dropdown
    operator: "gte", //get|gt|lte|lt|like
    dropdownConfig: null,
  },
  {
    title: "Title Code",
    key: "title_code",
    controlName: "titleCode",
    type: "text", //date|text|dropdown
    operator: "like",  //get|gt|lte|lt|like|eq
    dropdownConfig: null,
  },
  {
    title: "Status",
    key: "is_active",
    controlName: "IsActive",
    type: "dropdown", //date|text|dropdown
    operator: "eq",  //get|gt|lte|lt|like|eq
    dropdownConfig: {
      options: [  // here is the optins. options is an array and can be one or more.
        {
          text: "All",
          value: "",
        },
        {
          text: "Active",
          value: "1",
        },
        {
          text: "Inactive",
          value: "0",
        },
      ],
    },
  },
];
samplePagingConfigObj.headers = [
  {
    text: "Title Code",
    key: "TitleCode", // object from response in query paging response
    value: null,  // in this initial config, this value has to be a null value.
    position: "center", //center|left|right
    link: {
      href: "http://www.angular.io",
      target: "_blank",
    },
    actions: [],  // if this field is not an action, its value must be an empty array.
  },
  {
    text: "Title Name",
    key: "TitleName", // object from response in query paging response
    value: null,  // in this initial config, this value has to be a null value.
    position: "center", //center|left|right
    link: null, // if this field is not null. It means, for this column is a link rows.
    actions: [],  // if this field is not an action, its value must be an empty array.
  },
  {
    text: "Title Desc",
    key: "TitleDesc", // object from response in query paging response
    value: null,  // in this initial config, this value has to be a null value.
    position: "center", //center|left|right
    link: null,  // if this field is not null. It means, for this column is a link rows.
    actions: [],  // if this field is not an action, its value must be an empty array.
  },
  {
    text: "Actions",
    key: null,
    value: null,
    position: "center",
    link: null,
    actions: [
      {
        colorType: "success",
        icon: "ft-edit-2",
        title: "Edit",
        to: NavigationConstant.SAMPLE,
      },
      {
        colorType: "danger",
        icon: "ft-trash",
        title: "Delete",
        to: NavigationConstant.DASHBOARD,
      },
    ],
  },
];

export default samplePagingConfigObj;

// Those settings allow us to create a view component that support common field and also field with link value.
// And it is done.

Changeset :

Version Pattern : v(ComponentVersion),(ModuleVersion),(SyntaxVersion or README)

Version : v1.0.0

• Initial pb-paging

Author

13 Januari 2023 - Firman Tri Anggara - firmantrianggara@gmail.com