Cats4uLib Angular Library

Cats4uLib is a angular library which has multiple modules and easy to integrate in angular project

1. tree structure in tabular form
2. code editor
3. single select
4. multi select
5. input dropdown

Demo

link will be add soon

Setup

npm i cats4u-lib

code editor module has dependency on 3rd party library .if you want to use then need to install this dependency

npm i @materia-ui/ngx-monaco-editor --force

Usage Overview

import { Cats4uLibModule } from 'cats4u-lib'
              or
import { CatsTreeViewModule } from 'cats4u-lib/cats-tree-view'

@NgModule({
module: [Cats4uLibModule]
})

Tree Structure

     <cats-tree-view
         [tableHeader]="tableHeader"
         [iconConfig]="iconConfig"
         [tableData]="newsitesDetails"
         [icons]="icons"
         (selectFolder)="newSelectFolder($event)"
         (selectedRow)="selectedRow($event)"
         (singleClickEvent)="singleClickOnRow($event)"
         (doubleClickEvent)="doublClickOnRow($event)"
         (treeStructureData)="treeStructureData($event)"
         [treeType]="'folder'"
         [showExpandedIcon]="showExpandedIcon">
     </cats-tree-view>

tableHeader = [
  {
    headerName: "name",
    field: "name",
    isActive: true,
  },
  {
    headerName: "",
    field: "region.name",
    isActive: true,
    buttonRenderer: InputRendererComponent,
  },
  {
    headerName: "Tenant",
    field: "slug",
    isActive: true,
  },
  {
    headerName: "No of Device",
    field: "devices_count",
    isActive: true,
  },
];

table header

table header pass into tableHeader array which has 4 keys

1. headerName - pass string which you want to display as header of table
2. field - contains key which value you want to display in a row (this key must be exist in tableData array).
3. isActive - set boolean value which means you want to display this header or not (you can hide/show header dynamically using this key value)
4. buttonRenderer - you can pass component for custom style or perform some action in a cell

icons = {
  parentIcon: "/assets/svg-icon/folder.svg",
  parentExpandedIcon: "/assets/svg-icon/folder-open.svg",
  childIcon: "",
  checkboxEnable: true,
  enableRenameOption: true,
  rowSelection: "single",
  treeType: "folder",
  parentCheckboxSelection: true,
  multipleValueCheck: false,
  fieldArray: [
    {
      field: "model_type",
      value: "rack",
      icon: "/assets/svg-icon/device.svg",
      expandedIcon: "/assets/svg-icon/device.svg",
    },
  ],
};

icons input property used for initial data rendering only or we can say parent data

1. parentIcon - parentIcon hold icon for first column
2. parentExpandedIcon - hold icon for first column which is visible after child data called or want to expand
3. rowSelection - can pass 'single' or 'multiple'
4. treeType - can pass 'folder' or 'checkbox'
5. fieldArray - change parent icon based on field value
6. multipleValueCheck - select one or more checkbox

iconConfig = {
  field: "model_type",
  value: "device",
  checkboxEnable: true,
  enableRenameOption: true,
  multipleValueCheck: false,
  fieldArray: [
    {
      field: "model_type",
      value: "rack",
      icon: "/assets/svg-icon/device.svg",
    },
  ],
};

iconConfig input property for child data or row .whenever you expand parent data coreesponding child data append in tree structure table data. let's understand child data properties-

1. field - if you want to add icon only single field than you can declare field otherwise use fieldArray
2. value - pass value related to field .show icon based on this value
3. checkboxEnable - pass boolean value for show/hide checkbox
4. multipleValueCheck - enable/disable multiple checkbox selection
5. fieldArray - show icon based on field value selection

Code Editor

<cats-code-editor
      [sourceCode]="sourceCode"
      [width]="width"
      [height]="height"
      [theme]="theme"
      [isMinimap]="isMinimap"
      [lineNumbers]="lineNumbers"
      [scrollBarSize]="scrollBarSize"
      [language]="'json'"
      (languageCode)="languageCode($event)"
    ></cats-code-editor>

sourceCode - pass data which you want to display width - width of the editor height - height of the editor theme - theme of the editor. 2 types of theme exist 1. vs-dark 2. vs-light or vs isMinimap - display minimap on right hand side lineNumbers - show line numbers in editor language - pass language type which you want to display 1.HTML 2.javascript 3.json 4.typescript languageCde - return updated code

Single Select Dropdown

Multi Select Dropdown

<cats-multi-select-dropdown
  [dropdownList]="optionsList"
  [selectSettings]="selectSetting"
  [placeholder] = "placeholder"
  [selectedItems]="selectedItems"
  (onItemsChange)="onItemsChange($event)"
></cats-multi-select-dropdown>

dropdownList - pass list as array of object selectSettings - has 2 fields 1. idField - pass key than this key represent as unique id for dropdown list 2. textField - pass key than this key text visible in dropdown list

selectSetting = {
  idField: "organisation_id",
  textField: "organisation_name",
};

onItemsChange - provide selected data placeholder - pass string which you want to display in placeholder selectedItems - pass as array of object same as options list

Input Dropdown

<cats-dropdown placeholderName="Enter Text" [optionsList]="optionsList"></cats-dropdown>

optionsList = [
  { id: 2, name: "alpha" },
  { id: 3, name: "gama" },
];

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.