library-detail-document-mse

library-detail-document-mse merupakan component yang dapat digunakan menampilkan .

History versi

Features

• details-data-terminal
• details-dokument-template
• details-dual-col-template
• details-fasilitas-cicilan-nol-template
• details-faasilitas-default0template
• details-fasilitas-e-commerce-template
• details-simple-template

Tech

Untuk menggunakan library-detail-document-mse kamu membutuhkan:

• AngularJS - HTML enhanced for web apps!
• node.js - evented I/O for the backend

And of course Dillinger itself is open source with a public repository on GitHub.

Installation

Dillinger requires Node.js v10+ to run.

Install the dependencies and devDependencies and start the server.

cd project
npm i library-detail-document-mse

Development

• update html kamu dengan :

<mse-details-data-terminal-template [dataOutlet]="data"></mse-details-data-terminal-template>

<app-details-dokumen-template [dataList]="data.data.merchantDocuments"></app-details-dokumen-template>

<mse-details-dual-col-template  [title]="'User E-commerce'" 
                                [detailsListLeft]="detailsUserEcommerceLeft" 
                                [detailsListRight]="detailsUserEcommerceRight" 
                                [data]="data">
</mse-details-dual-col-template>

<mse-details-fasilitas-cicilan-nol-template [data]="data.oFacilities">
</mse-details-fasilitas-cicilan-nol-template>

<mse-details-fasilitas-default-template [category]="'outlet'" [data]="data.oFacilities">
</mse-details-fasilitas-default-template>

<mse-details-fasilitas-e-commerce-template [dataList]="data.oFacilities">
</mse-details-fasilitas-e-commerce-template>

<mse-details-simple-template [title]="'Data Pameran'" [detailsList]="detailsOutletNamaPameran" [data]="data">
</mse-details-simple-template>

<app-detail-controller *ngFor="let detail of detailsListPemilik" [detail]="detail" [data]="dataPemilik"></app-detail-controller>

• Typescript

  detailsOutletEcommerce : DetailContent[] =
  [
    {
      jsonName : 'mid',
      label : 'MID',
      type : 'default'
    },
    {
      jsonName : 'jenisOutlet',
      label : 'Jenis Outlet',
      altValue : {'jenisOutlet' : {'ecomm' : 'e-Commerce'}},
      type : 'default'
    },
    {
      jsonName : 'ecommType',
      label : 'Tipe',
      altValue : {'ecommType' : {'pg' : 'Payment Gateway'}},
      type : 'default'
    },
    {
      jsonName : 'name',
      label : 'Nama Outlet',
      type : 'default'
    },
    {
      jsonName : ['mccCode', 'mccName'],
      label : 'Jenis Usaha',
      seperator : ' - ',
      type : 'default'
    },
    {
      jsonName : 'address1',
      label : 'Alamat 1',
      type : 'default'
    },
    {
      jsonName : 'address2',
      label : 'Alamat 2',
      type : 'default'
    },
    {
      type : 'address'
    },
    {
      jsonName : 'phone',
      label : 'Telepon / HP',
      type : 'default'
    },
    {
      jsonName : 'email',
      label : 'Email',
      type : 'default'
    },
    {
      jsonName : 'tipeLokasiUsahaName',
      label : 'Lokasi Usaha',
      type : 'default'
    },
    {
      jsonName : 'ecommIntegration',
      altValue : {'ecommIntegration' : {'0' : '3 Party', '1' : '3 Party dan 2.5 Party', '2' : '3 Party dan 2 Party'}},
      label : 'Fasilitas e-Commerce',
      type : 'children',
      children :
      {
        '0' : 
        [
          {
            jsonName : 'ecommCallbackUrl',
            label : '3 Party Return URL',
            colLabel : 5,
            type : 'default'
          },
          {
            jsonName : 'ecommBackendUrl',
            label : '3 Party Back End URL',
            colLabel : 5,
            type : 'default'
          },
        ],
        '1' : 
        [
          {
            jsonName : 'ecommCallbackUrl',
            label : '3 Party Return URL',
            colLabel : 5,
            type : 'default'
          },
          {
            jsonName : 'ecommBackendUrl',
            label : '3 Party Back End URL',
            colLabel : 5,
            type : 'default'
          },
          {
            jsonName : 'ecommIntegrationReturnUrl',
            label : '2.5 Party Return URL',
            colLabel : 5,
            type : 'default'
          },
          {
            jsonName : 'ecommIntegrationBackendUrl',
            label : '2.5 Party Back End URL',
            colLabel : 5,
            type : 'default'
          },
        ],
        '2' : 
        [
          {
            jsonName : 'ecommCallbackUrl',
            label : '3 Party Return URL',
            colLabel : 5,
            type : 'default'
          },
          {
            jsonName : 'ecommBackendUrl',
            label : '3 Party Back End URL',
            colLabel : 5,
            type : 'default'
          },
          {
            jsonName : 'ecommIntegrationReturnUrl',
            label : '2 Party Return URL',
            colLabel : 5,
            type : 'default'
          },
          {
            jsonName : 'ecommIntegrationBackendUrl',
            label : '2 Party Back End URL',
            colLabel : 5,
            type : 'default'
          },
        ]
      }
    },
    {
      jsonName : 'ecomm3Dsecure',
      altValue : {'ecomm3Dsecure' : {'0' : 'Non-3DS', '1' : '3DS/Partial', '2' : 'Full Autentication Only'}},
      label : '3d Secure',
      type : 'children',
      children :
      {
        '1' : 
        [
          {
            jsonName : 'ecommAmount3Dsecure',
            label : 'Minimum Amount',
            colLabel : 5,
            isNumber : {'ecommAmount3Dsecure' : true},
            type : 'default'
          },
        ]
      }
    },
    {
      jsonName : 'ecommWebUrl',
      label : 'Website Merchant',
      type : 'default'
    },
    {
      jsonName : 'ecommApps',
      label : 'Mobile Apps',
      type : 'default'
    },
    {
      jsonName : 'ecommFraud',
      label : 'Fraud Detection System',
      type : 'input-disabled',
      inputConfig : 
      {
        inputType : 'radio-children' ,
        option : 
        [
          {
            key : 'Ada',
            value : true
          },
          {
            key : 'Tidak',
            value : false
          }
        ]
      },
      children  :
      {
        'true' : 
        [
          {
            jsonName  : 'ecommFraudPspName',
            label : 'Nama PSP',
            type  : 'non-input-text'
          }
        ]
      }
    },
    {
      jsonName : 'ecommInventoryMngmt',
      label : 'Inventory Management',
      type : 'input-disabled',
      inputConfig : 
      {
        inputType : 'radio-children' ,
        option : 
        [
          {
            key : 'Ada',
            value : true
          },
          {
            key : 'Tidak',
            value : false
          }
        ]
      },
    },
    {
      jsonName : ['agentBankCode', 'agentBankName'],
      label : 'Agent Bank',
      seperator : ' - ',
      type : 'default'
    },
    {
      jsonName : 'ecommKlikpayName',
      label : 'Tampilan Nama Merchant di KlikPay',
      type : 'default'
    },
    {
      jsonName : 'ecommMutationName',
      label : 'Tampilan Nama Merchant di Mutasi Rekening',
      type : 'default'
    },
    {
      jsonName : ['merchantSettleCode', 'merchantSettleName'],
      label : 'Kode Settle',
      seperator : ' - ',
      type : 'default'
    },
    {
      jsonName : ['salesCode', 'salesName'],
      label : 'Kode Officer',
      seperator : ' - ',
      type : 'default'
    },
    {
      jsonName : 'memo',
      label : 'Memo',
      type : 'default'
    },
  ]

  detailsUserEcommerceLeft : DetailContent[] =
  [
    {
      label : '<div class="row mt-3"><div class="col"><span><strong>Super Admin</strong></span></div></div>',
      type : 'text-custom'
    },
    {
      type : 'border'
    },
    {
      jsonName : 'ecommSuperAdminName',
      label : 'Nama',
      type : 'default'
    },
    {
      jsonName : 'ecommSuperAdminPhone',
      label : 'Telp/HP',
      type : 'default'
    },
    {
      jsonName : 'ecommSuperAdminEmail',
      label : 'Email',
      type : 'default'
    },
    {
      label : '<div class="row mt-3"><div class="col"><span><strong>Secret Key Receiver</strong></span></div></div>',
      type : 'text-custom'
    },
    {
      type : 'border'
    },
    {
      jsonName : 'ecommKeyReceiverName',
      label : 'Nama',
      type : 'default'
    },
    {
      jsonName : 'ecommKeyReceiverPhone',
      label : 'Telp/HP',
      type : 'default'
    },
    {
      jsonName : 'ecommKeyReceiverEmail',
      label : 'Email',
      type : 'default'
    },
    {
      label : '<div class="row mt-3"><div class="col"><span><strong>Secret Password Receiver</strong></span></div></div>',
      type : 'text-custom'
    },
    {
      type : 'border'
    },
    {
      jsonName : 'ecommPassReceiverName',
      label : 'Nama',
      type : 'default'
    },
    {
      jsonName : 'ecommPassReceiverPhone',
      label : 'Telp/HP',
      type : 'default'
    },
    {
      jsonName : 'ecommPassReceiverEmail',
      label : 'Email',
      type : 'default'
    },
  ]

  detailsUserEcommerceRight : DetailContent[] =
  [
    {
      label : '<div class="row mt-3"><div class="col"><span><strong>Business and Complaint Handling</strong></span></div></div>',
      type : 'text-custom'
    },
    {
      type : 'border'
    },
    {
      jsonName : 'ecommBchName',
      label : 'Nama',
      type : 'default'
    },
    {
      jsonName : 'ecommBchPhone',
      label : 'Telp/HP',
      type : 'default'
    },
    {
      jsonName : 'ecommBchEmail',
      label : 'Email',
      type : 'default'
    },
    {
      label : '<div class="row mt-3"><div class="col"><span><strong>Project Manager</strong></span></div></div>',
      type : 'text-custom'
    },
    {
      type : 'border'
    },
    {
      jsonName : 'ecommPmName',
      label : 'Nama',
      type : 'default'
    },
    {
      jsonName : 'ecommPmPhone',
      label : 'Telp/HP',
      type : 'default'
    },
    {
      jsonName : 'ecommPmEmail',
      label : 'Email',
      type : 'default'
    },
    {
      label : '<div class="row mt-3"><div class="col"><span><strong>Fraud Handling</strong></span></div></div>',
      type : 'text-custom'
    },
    {
      type : 'border'
    },
    {
      jsonName : 'ecommFraudhandlingName',
      label : 'Nama',
      type : 'default'
    },
    {
      jsonName : 'ecommFraudhandlingPhone',
      label : 'Telp/HP',
      type : 'default'
    },
    {
      jsonName : 'ecommFraudhandlingEmail',
      label : 'Email',
      type : 'default'
    },
    
  ]

 detailsListPemilik : DetailContent[] =[
  {
      jsonName : 'name',
      label : 'Nama Pemilik',
      type : 'default'
    }
  ]

Note: parameter inputList dapat berubah-ubah tergantung dengan jenis kebutuhan.

• Input Parameter dan definisi:

 detailsListPemilik : DetailContent[] =[
  {
      jsonName : String,
      label : String,
      type : String
    }
  ]

input Type parameter Details Controler

| Syntax | Description | | ----------- | ----------- | | default | Menampilkan text dalam bentuk text | | address | Menampilkan table alamat seperti keluarahan kodepos, kecamatan, kota, dan provinsi | | address-two | Menampilkan field untuk memilih inputan dalam bentuk dropdown | | multi-value | Menampilkan field untuk memilih inputan dalam bentuk dropdown | | sub-title | Menampilkan field untuk memilih inputan dalam bentuk dropdown | | border | Menampilkan field untuk memilih inputan dalam bentuk dropdown | | multi-json-label | Menampilkan field untuk memilih inputan dalam bentuk dropdown | | input-disabled | Menampilkan field untuk memilih inputan dalam bentuk dropdown | | text-custom | Menampilkan title dengan pilihan kalimat yang anda mau |