alurkerja-react

Made with create-react-library

Install

1npm install --save alurkerja-react

Publish

build project

1yarn build 

build Publish

1yarn publish 

Masukan versi baru dari code yang akan di publish

Alurkerja List

1import React from 'react'
2
3import {  AlurkerjaTable, Card } from "alurkerja-fe";
4
5import { useAlurkerjaSpec } from '../../../AlurkerjaHook';
6const TableCategoryIndex = () => {
7
8  const tableSpec = useAlurkerjaSpec("http://localhost:7878/crud/category/spec")
9
10  return <>
11    <div className="ml-2 mt-12">
12      <Card >
13
14        <AlurkerjaTable
15          spec={tableSpec}
16          tableUrl="http://localhost:7878/crud/category"
17          actionUrl="/crud/category"
18          pageName="Hellow"
19          pageDesc="ini gi ni"
20        ></AlurkerjaTable>
21      </Card>
22    </div>
23  </>
24}
25export default TableCategoryIndex
26

Alurkerja Form

1import React, { useEffect, useState } from 'react'
2
3import { AlurkerjaForm, AlurkerjaTable, Card } from "alurkerja-fe";
4import { useAlurkerjaSpec } from '../../../AlurkerjaHook';
5import { useParams } from 'react-router-dom'
6
7
8const CreateCategory = () => {
9
10  let { id } = useParams();
11
12  const formSpec = useAlurkerjaSpec("http://localhost:7878/crud/category/spec")
13  const [formattedSpec, setFormattedSpec] = useState([]);
14  useEffect(() => {
15    if (id) {
16
17      (async () => {
18
19        const detail = await axios.get("http://localhost:7878/crud/category" + "/" + id);
20        const formattedItem = formSpec.map((item) => {
21          return { ...item, value: detail.data.data[item.name] }
22        })
23        setFormattedSpec(formattedItem)
24      })()
25    } else {
26
27      setFormattedSpec(formSpec)
28    }
29  }, [id, formSpec]);
30
31  return <>
32    <div className="ml-2 mt-12">
33      <Card >
34        {id}
35        <AlurkerjaForm
36          spec={formattedSpec}
37          actionUrl="http://localhost:7878/crud/category"
38          id={id || null}
39          inline={false}
40        ></AlurkerjaForm>
41      </Card>
42    </div>
43  </>
44}
45export default CreateCategory
46

Modify Style All

• .alurkerja-bpmn-[status] : untuk customisasi badge status task.

Modify Style Bootstrap

Custom css class

berikut ini beberapa daftar custom class css yang dapat di override :

• .alurkerja-bootstrap-btn-draft : untuk customisasi button draft
• .alurkerja-bootstrap-btn-create : untuk customisasi button create
• .alurkerja-bootstrap-btn-export : untuk customisasi button export
• .alurkerja-bootstrap-btn-info : untuk customisasi button info
• .alurkerja-bootstrap-btn-refresh : untuk customisasi button refresh
• .alurkerja-bootstrap-btn-filter : untuk customisasi button filter
• .alurkerja-bootstrap-btn-simpan : untuk customisasi button simpan
• .alurkerja-bootstrap-input : untuk customisasi input
• .alurkerja-bootstrap-select : untuk customisasi select
• .alurkerja-bootstrap-textarea : untuk customisasi textarea
• .alurkerja-bootstrap-label : untuk customisasi label
• .alurkerja-bootstrap-btn-zoomin : untuk customisasi button zoomin
• .alurkerja-bootstrap-btn-zoomout : untuk customisasi button zoomout
• .alurkerja-bootstrap-btn-zoomreset : untuk customisasi button zoomreset

Pagination Position

Pada pemanggilan alurkerjatable ubah state paginationPosition menjadi right agar posisi pagination berada di kanan. secara default posisi pagination berada di kiri.

1<AlurkerjaTable paginationPosition="right" />

License

MIT © purwadarozatun