angular-alur-kerja-lib v0.2.3-s

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:

[
    {
        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:

    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

<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

<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

<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)

<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

<app-draw-select></app-draw-select>

• Komponen Diagram

<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