alurkerja-react

Made with create-react-library

Install

npm install --save alurkerja-react

Publish

build project

yarn build 

build Publish

yarn publish 

Masukan versi baru dari code yang akan di publish

Alurkerja List

import React from 'react'

import {  AlurkerjaTable, Card } from "alurkerja-fe";

import { useAlurkerjaSpec } from '../../../AlurkerjaHook';
const TableCategoryIndex = () => {

  const tableSpec = useAlurkerjaSpec("http://localhost:7878/crud/category/spec")

  return <>
    <div className="ml-2 mt-12">
      <Card >

        <AlurkerjaTable
          spec={tableSpec}
          tableUrl="http://localhost:7878/crud/category"
          actionUrl="/crud/category"
          pageName="Hellow"
          pageDesc="ini gi ni"
        ></AlurkerjaTable>
      </Card>
    </div>
  </>
}
export default TableCategoryIndex

Alurkerja Form

import React, { useEffect, useState } from 'react'

import { AlurkerjaForm, AlurkerjaTable, Card } from "alurkerja-fe";
import { useAlurkerjaSpec } from '../../../AlurkerjaHook';
import { useParams } from 'react-router-dom'


const CreateCategory = () => {

  let { id } = useParams();

  const formSpec = useAlurkerjaSpec("http://localhost:7878/crud/category/spec")
  const [formattedSpec, setFormattedSpec] = useState([]);
  useEffect(() => {
    if (id) {

      (async () => {

        const detail = await axios.get("http://localhost:7878/crud/category" + "/" + id);
        const formattedItem = formSpec.map((item) => {
          return { ...item, value: detail.data.data[item.name] }
        })
        setFormattedSpec(formattedItem)
      })()
    } else {

      setFormattedSpec(formSpec)
    }
  }, [id, formSpec]);

  return <>
    <div className="ml-2 mt-12">
      <Card >
        {id}
        <AlurkerjaForm
          spec={formattedSpec}
          actionUrl="http://localhost:7878/crud/category"
          id={id || null}
          inline={false}
        ></AlurkerjaForm>
      </Card>
    </div>
  </>
}
export default CreateCategory

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.

<AlurkerjaTable paginationPosition="right" />

License

MIT © purwadarozatun