@aliasghar.ahmed/selector-lib v2.1.1

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

Outputs