ONeWebComponents

This library was generated with Angular CLI version 8.2.14.

Code scaffolding

Run ng generate component component-name --project ONeWebComponents to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project ONeWebComponents.

Note: Don't forget to add --project ONeWebComponents or else it will be added to the default project in your angular.json file.

Build

Run ng build ONeWebComponents to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build ONeWebComponents, go to the dist folder cd dist/one-web-components and run npm publish.

Dependencies

- PrimeNG
    https://www.primefaces.org/primeng
    npm install primeng --save
    npm install primeicons --save

Available Components

| Component Name | Selector | |----------------|------------| | Component Search | <web-component-search> | | Modal Search | <web-component-search-advance> | | Temp Table | <web-component-temp-table> | | Component Search by Filter | <web-component-search-filter> |

Using

1. Component Search

    - HTML
    
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-2">
        <label>NIK Main RM</label>
        </div>
        <web-component-search (ComponentSearchValue)="setFormComponentSearch($event)"
        [ComponentSearchParam]="KodePos">
        </web-component-search>
    </div>
    
    - component.ts

    KodePos: SearchparamModel = {
        url: environment.PROCIF_API + "ProCIFSrcKodePOS",
        keyText1: "KodePos",
        single: true
    };

    setFormComponentSearch(param) {
        console.log(
        "Result Component Search : " + param.Col1 + " Dan " + param.Col2
        );
    }

2. Component Search Advance

    - HTML
    
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-2">
            <label>Search Account</label>
        </div>
        <web-component-search-advance
            (ComponentSearchValue)="setFormComponentSearchAdvance($event)"
            [ComponentSearchParam]="AccountNumber">
        </web-component-search-advance>
    </div>
    
    - component.ts
        AccountNumber: SearchParamAdvance = {
            title: 'Search Account Existing',
            url: 'ProCIFSrcKodePOS',
            input: {
              type: 'textmask',
              customRules1: '99999999999-9',
              customRules2: '99999999999-9'
            },
    tabs: [
        {
            tabName: 'Search by Account Number',
            searchURL: '',
            searchKey1: {
                label: 'Account Number',
                type: 'textmask',
                data: [],
                customRules1: '99999999999-9',
                customRules2: '99999999999-9',
                value: ''
            },
            searchKey2: {
                label: '',
                type: 'checkbox',
                data: [
                    {
                        id: '1',
                        name: 'Multicurrency'
                    }
                ],
                customRules1: '',
                customRules2: '',
                value: '',
            },
        },
        {
            tabName: 'Branch, Currency, Product',
            searchURL: '',
            searchKey1: {
                label: 'Account Type',
                type: 'dropdown',
                data: [
                    {
                        id: '1',
                        name: 'D Current Account'
                    },
                    {
                        id: '2',
                        name: 'S Savings Account'
                    },
                    {
                        id: '3',
                        name: 'T Time Deposit'
                    }
                ],
                customRules1: '',
                customRules2: '',
                value: '',
                required: true
            },
        searchKey2: {
            label: 'Animals',
            type: 'componentsearch',
            data: [],
            customRules1: {
                url: 'http://blablabla.com/animals',
                keyText1: 'AnimalId',
                keyText2: 'AnimalName'
            },
            value: '',
            required: true
        },
        searchKey3: {
            label: 'Fruits',
            type: 'componentsearch',
            data: [],
            customRules1: {
                url: 'http://blablabla.com/fruits',
                keyText1: 'FruitId',
                keyText2: 'FruitName'
            },
            value: ''
        },
        searchKey4: {
            label: 'Cars',
            type: 'componentsearch',
            data: [],
            customRules1: {
                url: 'http://blablabla.com/cars',
                keyText1: 'CarId',
                keyText2: 'CarName'
            },
            value: ''
        },
    }
];

3. Component Search Filter

 - HTML
    
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-2">
            <label>Search QQName</label>
        </div>
        <web-component-search-filter
            [ComponentSearchParam]="QQName" 
            (ComponentSearchValue)="setFormComponentSearchFilter($event)" >
          </web-component-search-filter>
    </div>

- component.ts

     QQName: SearchParamFilter = {
        title : 'Search QQ',
        keyColumn: 'customername',
        baseUrl: 'http://searchUrl1.com',
        body: {
          NIK: '77777',
          Guid: '45DDB151-62BA-43A5-95350-B176302C486E',
          Branch: '01010',
          MoreIndicator: 'N',
          Module: 'OnBoarding'
        },
        filterBy: [
          {
              type: 'textbox',
              label: 'Name',
              url: 'http://searchUrl1.com',
              by: 'Customername',
              template: {
                  label: ['Nomor Nasabah', 'Nama', 'Nomor Identitas', 'Alamat 1', 'Alamat2'],
                  values: ['customernumber', 'customername', 'iDnumber', 'addressline1', 'addressline1']
              }
          },
          {
              type: 'textbox',
              label: 'CIF',
              url: 'http://searchUrl2.com',,
              by: 'Customernumber',
              template: {
                  label: ['Nomor Nasabah', 'Nomor Identitas', 'Nama', 'Alamat 1', 'Alamat2'],
                  values: ['customernumber', 'iDnumber', 'customername', 'addressline1', 'addressline1']
              }
          },
          {
              type: 'date',
              label: 'Birth Date',
              url: 'http://searchUrl3.com',,
              by: 'DOBMMDDYYYY',
              template: {
                  label: ['Nomor Nasabah', 'Nomor Identitas', 'Nama', 'Alamat 1', 'Alamat2'],
                  values: ['customernumber', 'iDnumber', 'customername', 'addressline1', 'addressline1']
              }
          }
        ]
      };

      setFormComponentSearchFilter(param){
          alert(JSON.stringify(param));
      }