Apa itu Alukerja UI

Alurkerja UI merupakan library yang menyediakan fitur standar seperti library UI yang menyediakan komponen siap pakai namun Alurkerja UI juga menyediakan komponen untuk membantu mempercepat pembuatan fitur CRUD dengan bantuan Alurkerja BE sebagai spec generator nya. library ini open source sehingga developer lain bisa contribute langsung.

Fitur

1. TableLowcode dengan hanya mengirimkan baseUrl dan specPath. komponen ini sudah bisa melakukan fungsi CRUD. mekanisme nya seperti apa?

   1. komponen akan melakukan HTTP request ke `<baseUrl><specPath>/spec`
   2. responsenya merupakan spesifikasi hasil dari spec generator Alurkerja BE
   3. setelah spec berhasil didapat, komponen akan mengambil key `path` dari spec lalu kembali melakukan HTTP request ke `<baseUrl><path>` untuk mendapatkan list data nya
   4. setelah list data didapatkan, komponen kembali mengolah spec dengan mengabil key `fields` disorting, dimapping dan difilter. contoh filter nya jika salah satu object di fields nilai `is_hidden_in_list` nya true maka dia tidak dimunculkan di table, sortingnya diurutkan berdasarkan key `list_order`
   5. hasil mapping itu akan berupa array of object berisikan key yg harus sesuai dengan respose HTTP Request yang berisikan list data dan format nya pun harus sesuai standar
   6. secara paralel spec nya juga akan diolah untuk menentukan apakah tablenya bisa create/edit/detail/delete

2. Formlowcode Formlowcode perlu terintegrasi dengan React Hook Form dengan mengirimkan formState, handleSubmit, control, dan setValue. diluar itu sama seperti TableLowcode dia hanya perlu baseUrl dan specPath dan akan menghasilkan form dengan validasi nya sesuai spec

3. Etc diluar komponen itu Alurkerja UI punya komponen2 basic seperti Button, Input, Modal, Calendar, dll

Link

1. Repositori Dokumentasi & Library v1
2. Repositori Library v0
3. Website Dokumentasi Alurkerja UI

Contoh Spec

   {
      show_as_menu: true,
      name: 'Pengajuan Izin',
      is_bpmn: true,
      is_usertask: false,
      can_bulk: false,
      can_create: true,
      can_delete: false,
      can_edit: true,
      can_detail: true,
      label: 'Takwim',
      base_url: 'https://joglo-api.merapi.javan.id',
      path: '/workflow/v1/bpmn/pengajuanizin',
      description: 'Pengajuan Izin',
      header_action: [
         {
            label: 'Tambah',
            action_label: 'Tambah Pengajuan',
            method: 'post',
            form_type: 'new_page',
            path: '/workflow/v1/bpmn/pengajuanizin',
            icon: 'plus',
            type: 'primary',
         },
      ],
      field_action: [
         {
            label: 'Detail',
            action_label: 'Detail Payslip',
            method: 'get',
            form_type: 'modal',
            path: '/workflow/v1/bpmn/pengajuanizin/{id}',
            icon: 'eye',
            type: 'primary',
         },
         {
            label: 'Edit',
            action_label: 'Kemaskini Takwim',
            method: 'put',
            form_type: 'modal',
            path: '/workflow/v1/bpmn/pengajuanizin/{id}',
            icon: 'edit',
            type: 'primary',
         },
         {
            label: 'Hapus',
            action_label: 'Hapus Takwim',
            method: 'delete',
            form_type: 'confirm_modal',
            confirm: {
               title: 'Hapus Data',
               message: 'Adakah anda pasti ingin memadam data ini?',
               confirm_text: 'Ya, Teruskan',
               cancel_text: 'Batal',
            },
            path: '/workflow/v1/bpmn/pengajuanizin/{id}',
            icon: 'trash',
            type: 'danger',
         },
      ],
      fields: {
         id: {
            name: 'id',
            label: 'Id',
            required: true,
            searchable: false,
            filterable: false,
            sortable: true,
            type: 'number',
            form_field_type: 'INPUT_NUMBER',
            primary: false,
            is_hidden_in_create: true,
            is_hidden_in_edit: true,
            is_hidden_in_list: false,
            is_hidden_in_detail: true,
            rules: ['required', 'integer'],
            format: '',
            prefix: '',
            suffix: '',
            list_order: 6,
            create_order: 6,
            edit_order: 6,
         },
         jenis_pengajuan: {
            name: 'id',
            label: 'Id',
            required: true,
            searchable: false,
            filterable: false,
            sortable: true,
            type: 'number',
            form_field_type: 'INPUT_NUMBER',
            primary: false,
            is_hidden_in_create: true,
            is_hidden_in_edit: true,
            is_hidden_in_list: false,
            is_hidden_in_detail: true,
            rules: ['required', 'integer'],
            format: '',
            prefix: '',
            suffix: '',
            list_order: 6,
            create_order: 6,
            edit_order: 6,
         },
         action: {
            name: 'action',
            label: 'Id',
            required: true,
            searchable: false,
            filterable: false,
            sortable: true,
            type: 'number',
            form_field_type: 'INPUT_NUMBER',
            primary: false,
            is_hidden_in_create: true,
            is_hidden_in_edit: true,
            is_hidden_in_list: false,
            is_hidden_in_detail: true,
            rules: ['required', 'integer'],
            format: '',
            prefix: '',
            suffix: '',
            list_order: 6,
            create_order: 6,
            edit_order: 6,
         },
         jam_mulai: {
            name: 'jenis_pengajuan',
            label: 'jenis',
            required: true,
            searchable: false,
            filterable: false,
            sortable: true,
            type: 'number',
            form_field_type: 'INPUT_STRING',
            primary: false,
            is_hidden_in_create: true,
            is_hidden_in_edit: true,
            is_hidden_in_list: false,
            is_hidden_in_detail: true,
            rules: ['required', 'integer'],
            format: '',
            prefix: '',
            suffix: '',
            list_order: 6,
            create_order: 6,
            edit_order: 6,
         },
      },
   }