# Readme

## Install Latest
- `npm i angular-alur-kerja-lib`

## Create CRUD Command
- ng g crud-component-alur-kerja:crud-component --name=<nama_collection_bpmn> --path=src/app/pages(metronic path) untuk melakukan generate otamatis
- contoh `ng g crud-component-alur-kerja:crud-component --name=organization --path=src/app/pages`
- setelah itu masuk ke folder src/app/pages/organization
- sesuaikan beberapa konfigurasi
- masuk ke organization.service.ts, edit dan sesuaikan bagian variable API_URL
- contoh `API_URL = '${environment.apiUrl}/crud/organization'`;
- edit dan sesuaikan header (jika API nya menggunakan bearer token)
- contoh `myHeader = getAWSHeaders(localStorage.getItem('id_token'))`
- edit dan sesuaikan `function filterForm() dan filter()` utk menambah filter pencarian, secara default pencarian nya menggunakan id
- comment `function getForms()` pada `ngOnInit()` jika tidak ingin menggunakan manual form bukan mengambil dari BE
- jika ingin menambah pada tabel nya, bisa edit dan sesuaikan pada file `organization.component.html`
- jika ingin menambah sorting pada tabel gunakan code ini, taruh code ini di dalam th nya `<app-sort-icon column="<paramater_di_be_nya>" [activeColumn]="sorting.column" [activeDirection]="sorting.direction" (sort)="sort($event)"></app-sort-icon>`
- jika ingin memakai form manual tanpa dari BE, cukup edit `const transFormArrForm` dengan format array object, seperti berikut:
```sh
[
    {
        title: 'Nama',
        form: 'name',
        type: 'text',
        mandatory: true
    }
]
```
- edit dan sesuaikan `function prepareFormData() dan prepareFormEdit()` pada file src/app/pages/organization/component/edit-organization-modal.component.ts, kedua function tsb berfungsi sebagai payload json object utk dikirim ke BE, sesuaikan dengan kebutuhan BE, contoh seperti berikut:
```sh
    prepareFormData() {
        //    OVERRIDE THIS
        const formData = this.formGroup.value;
        this.formObj.name = formData.name;
        this.formObj.code = formData.code;
    }

    prepareFormEdit() {
        //    OVERRIDE THIS
        const formData = this.formGroup.value;
        return {
            name: formData.name,
            code: formData.code,
        };
    }
```

## Create BPMN Command

- ng g crud-component-alur-kerja:bpmn-component --name=<nama_collection_bpmn> --path=src/app/pages(metronic path) untuk melakukan generate otamatis
- contoh `ng g crud-component-alur-kerja:crud-component --name=single-approval --path=src/app/pages`
- setelah itu masuk ke folder src/app/pages/single-approval
- sesuaikan beberapa konfigurasi
- masuk ke organization.service.ts, edit dan sesuaikan bagian variable API_URL
- contoh `API_URL = '${environment.apiUrl}/crud/singleApproval'`;
- edit dan sesuaikan header (jika API nya menggunakan bearer token)
- contoh `myHeader = getAWSHeaders(localStorage.getItem('id_token'))`
- edit dan sesuaikan `function filterForm() dan filter()` utk menambah filter pencarian, secara default pencarian nya menggunakan id
- untuk saat ini customization di bpmn cuman segitu saja (akan segera menyusul)...

## List Komponen yang sudah tersedia
- CRUD Table
- Bpmn Viewer
- Form
  -- text
  -- textarea
  -- select (get from api)
  -- radio
  -- checkbox
  -- signature
  -- date

## Penggunaan Komponen
- Yang sudah dalam komponen masih di BPMN saja, untuk CRUD menyusul
---
- Komponen Form untuk type Variable dan DTO
```sh
<app-base-edit-bpmn
        [formGroupParent]="formGroup"
        [arrGroup]="arrParamsGroup"
        [listInput]="listInput"
        [show]="show"
></app-base-edit-bpmn>
```
- formGroup itu ya formGroup di angular
- arrParamsGroup itu array object isinya bentuk skeleton dari datanya
- listInput itu array tipe form input yang bsa di handle
- show boolean utk show or not aja sih
---
- Komponent Form untuk type Decision
```sh
<app-base-edit-bpmn-decision
        [formGroupParent]="formGroup"
        [formName]="'decision'"
        [typeDecision]="typeDecision"
        [arrDecision]="arrDecision"
    ></app-base-edit-bpmn-decision>
```
- formGroup itu ya formGroup di angular
- formName utk nama di inputnya, utk bpmn defaulnya decision
- typeDecision itu array object isinya bentuk skeleton dari datanya
- arrDecision itu array utk pilihan radionya
---
- Komponen Date
```sh
<app-date-select
        [formGroupParent]="formGroupParent"
        [labelName]="item.title"
        formName="{{item.form}}"
      >
</app-date-select>
```
- formGroup itu ya formGroup di angular
- formName utk nama di inputnya, utk bpmn defaulnya decision
- labelName utk judulnya
---
- Komponen Select biasa (yang searching menyusul)
```sh
<app-common-select2
        *ngIf="item.type == 'select'"
        [formGroupParent]="formGroupParent"
        link="{{item.metaData.url}}"
        selectId="{{item.metaData.key}}"
        selectName="{{item.metaData.value}}"
        [labelName]="item.title"
        formName="{{item.form}}"
      >
</app-common-select2>
```
- formGroup itu ya formGroup di angular
- formName utk nama di inputnya, utk bpmn defaulnya decision
- labelName utk judulnya
- selectName buat nentuin name di select
- selectId buat nentuin id di selectnya
- link untuk nembak API
---
- Komponnen Draw Signature
```sh
<app-draw-select></app-draw-select>
```
---
- Komponen Diagram
```sh
<app-diagram-tes [url]="diagramUrl" [myHeader]="myHeader" (importDone)="handleImported($event)"></app-diagram-tes>
```
- url itu url untuk nembak api nya
- myHeader utk label
- importDone itu function setelah selesai load api