Selector-Lib

This library was generated with Angular CLI version ^14.2.0.

Installation

npm install @aliasghar.ahmed/selector-lib --save

Dependencies

This library has the following peer dependencies.

• "@angular/cdk": "^14.0.4",
• "@angular/common": "^14.0.4",
• "@angular/core": "^14.0.4",
• "@angular/elements": "^14.0.4",
• "@angular/router": "^14.0.4",
• "@angular/forms": "^14.0.4",
• "@circlon/angular-tree-component": "^10.0.1",
• "@ng-bootstrap/ng-bootstrap": "^7.0.0",
• "cdk-drag-scroll": "0.0.6",
• "ngx-perfect-scrollbar": "^10.0.1",
• "rxjs": "~6.6.0"

If your application has all the above dependencies installed then add them in the root tsconfig.json under the path. e.g

• "@angular/": [ "./node_modules/@angular/" ],

This mapping ensures that the library always loads the local copies of the modules it needs.

If your application has font-awesome icons support then selector-lib would not add it again.

Example usage

To enable the selector library import "SelectorLibModule" in your module.

import { SelectorLibModule } from 'selector-lib';
@NgModule({
  declarations: [
 .....
  ],
  imports: [
    .....
    SelectorLibModule
  ],
  providers: [
    ...
  ],
  exports: [
   ...
  ],
   bootstrap: [..]
})
export class YourModule {}

Add the following changes to your component.ts file for enabling the selector library.

import { SelectorLibComponent } from 'selector-lib';

export class Yourcomponent{
  @ViewChild(SelectorLibComponent) selectorDetail: SelectorLibComponent;
  title = 'selector';
  public selectoritems: any;
  constructor() { 
    .....
  }
  ngOnInit(): void { 
    .....
  }
  ngAfterViewInit(): void {
    this.selectorDetail.disposeDimension();
    this.selectoritems = datasetDef; // Refer the Json structure below, for datasetDef definition.
     }
  public onApply(dimensionData): void{
      console.log(dimensionData); // Refer the output table below, for more detials.
      ...
    }

  public resetSelector(resetVal: any): void{
  this.selectoritems = datasetDef; 
  }

public dispose(): void {
  this.selectorDetail.disposeDimension();
}
}

Selector-lib package supports the following selector types:

• Filter selector
• Advance selector

Add the following element to your HTML for enabling filter Selector.

<div style="width:230px;position: absolute;top: 0px;bottom: 0px;padding: 10px;background: #eeeff0;border-right: 1px solid #e4e4e4;">
    <selector-lib
    (selectorData)="onApply($event)"
    (resetSelectedData)="resetSelector($event)"
    [data]="selectoritems"
    #selectorDetail
    ></selector-lib>
</div> 

Add the following element to your HTML for enabling advance Selector.

 <selector-lib
    (selectorData)="onApply($event)"
    (resetSelectedData)="resetSelector($event)"
    [data]="selectoritems"
    #selectorDetail
    ></selector-lib>

 Remove ('uplus-selector') class where you remove selector from your DOM.
 document.body.classList.remove('uplus-selector');

Json structure for selector Input.

const datasetDef = {
    serviceURL: 'Your LD_service Url',
    IsSaveview: true,
    selectorType : 'advanceSelector',//optional key.,
    objectType:'adhoc',//option key.,
    objectId:null,
    dimensions: [
        {
            isAsymmetricSelection: false,
            dimensionName: 'Product',
            dispDimName: 'Product',
            editable: true,
            members: [
              {
                fullPath: 'Product.Standard Hierarchy.TOTAL',
                functionName: null,
                id: ':Category:3506881:3506915:3506918:3506959:4527492',
                isSelected: true,
                level: 'Category',
                name: 'ICE CREAM/SHERBET',
                timeAggregate: null,
                type: null
            }
             ],
            modelId: 1100,
            multiSelect: false,
            visible: true,
            allowedLevels: [
              {
                hierId: 19764169,
                hierFullPath:"Product.Standard Hierarchy",
                levels: ["Departments by Top Parent Companies Hierarchy", "Parent Company"]
              }
            ],
            allowedHierarchies: [
              {
                id: 19764169,
                fullPath: "Product.Standard Hierarchy"
              },
              {
                id: 19764170,
                fullPath: "Product.Departments by Top Parent Companies Hierarchy"
              }
            ],

            multipleHierarchySelections: true, 
             hasCustomObjects: true,
             hasFavorites: true,
             hasOptionalMembers: false
        }, {
            alias: 'MeasuresNo Transformation_7',
            isAsymmetricSelection: false,
            dimensionName: 'Measures',
            dispDimName: 'Measures',
            editable: true,
            id: '354f4fff4d4bf35e:2a6ee58e:176b27824cb:-6bb2',
            members: [
              {
                fullPath: 'Measures.Sales : FOLDER.Dollar Sales',
                functionName: null,
                id: '!M2_1',
                isSelected: true,
                level: 'Sales : FOLDER',
                name: 'Dollar Sales',
                timeAggregate: null,
                type: null
            }
            ],
            modelId: 1100,
            multiSelect: false,
            visible: true
        }, {
            isAsymmetricSelection: false,
            dimensionName: 'Periodicity',
            dispDimName: 'Periodicity',
            editable: true,
            members: [
            {
                fullPath: 'Periodicity.Periodicity : FOLDER.2 Years Ago',
                functionName: null,
                id: '5599880',
                isSelected: true,
                level: 'Periodicity : FOLDER',
                name: '2 Years Ago',
                timeAggregate: null,
                type: null
            }],
            modelId: 1100,
            multiSelect: true,
            visible: true,
        }
    ],
    setDefaultbuttonConfig: false,
      buttonConfig: [
        {
          secondaryButton: true,
          buttonName: 'cancel'
        }, {
        primaryButtonOne: false,
        buttonName: 'Apply'
      },
      {
        primaryButtonTwo: true,
        buttonName: 'Apply & Run'
      }
      ]
};

Inputs

| Name | Description | ----------------------- | ---------------------------------------------------------------------------------------| | data | This is the JSON structure provide to the selector library. All the JSON properties are explained below.
| serviceURL | Add your LDservice URL | IsSaveview | It is a Required Key. Set it true. | selectorType | It is an optional key. The selector library has type as Filter by default. We can access the simple and advance selector from filter Selector. To enable the advance selector set the value of selectorType as "advanceSelector". | objectType | It is an optional key to specify the type of object type in service URL. | objectId | It is an optional key to specify the id of an object in service URL. | hasCustomObjects | It is an optional key to enable or disable custom object option in hierarchy dropdown. | hasFavorites | It is an optional key to enable or disable favorite option in hierarchy dropdown. | hasOptionalMembers | It is an optional key to enable the Apply button by default for option members.By default it is false. | dimensions | Contains an array of dimension objects. |allowedLevels | this is an optional array of allowed levels. which will display in advance selector's level dropdown. |allowedHierarchies | this is an optional array of allowed hierarchies. which will display in advance selector's selected hierarchcy dropdown |multipleHierarchySelections| To select multiple hierarchies we need to enable this flag. TheDefault state is true. |setDefaultbuttonConfig | Set this property false for customizing the visibility of the advance selector buttons. Refer to the button configuration in the above JSON structure.

Outputs

| Name | Function Name | Description | ------------------------------------ | ----------------- | -------------------------------------------------------------------------| | selectorData / dimensionData | onApply | This function will Emit an array of dimension objects on click of Apply->Run/Apply&Run button. It contains the selected/unselected members from the selector. | resetSelectedData | resetSelector | This function will reset the selector changes. | disposeDimension | dispose | This function will clean the selector resources.