ReactJS | 4. Input Collection

 4. Input Collection

---

Penggunaan Input Collection

Input collection di gunakan oleh react sudah dibuatkan liblary ui kecilnya yang ada di file InputCollection.js

Membuat Controller

Tambahkan Controller semisal TestReactCtr.java pada package controllers dengan fungsi index yang akan mererender index.html

...
public static void inputCollection() {
        render();
    }
...

Tambahkan route

GET /testreact-inputcollection                                       TestReactCtr.inputCollection

Tambahkan view

tambahkan view pada folder TestReactCtr/inputCollection.html

#{extends 'border.html'/}
<div class="container-fluid">
    <!-- Toolbar -->
    <div class="row">
        <div class="col-md-12">
            <!-- Breadcrumb -->
            <ol class="breadcrumb">
                <li><a href="@{PublikCtr.home()}">&{'beranda.label'}</a></li>
                <li class="active">&{'daftar_distributor.label'}</li>
            </ol>
            <!-- End Breadcrumb -->
        </div>
    </div>
    <!-- End Toolbar -->
    #{alert /}
    <div class="row">
        <div class="col-md-12">
          <!-- content --->

            <div id="rx-test-react-input-collection-page-container"></div>
        </div>
    </div>

</div>

id pada div adalah id yang akan digunakan oleh react untuk melakukan mounting component

Tambahkan React View

tambahkan React view dengan file TestReactInputCollectionPage.js pada folder page

import React from 'react';
    import {useForm} from "react-hook-form";
    import {
    InputDateWithLabel,
    InputFormatted,
    InputTextArea,
    InputWithLabel ,
    Select2WithLabel
} from "../Components/InputCollection";
    import {useTranslation} from "react-i18next";

    export const TestReactInputCollectionPage = () => {
        const {
            handleSubmit,
            control,
            watch,
            formState: { errors },
            setValue,
        } = useForm();

        const { t, i18n } = useTranslation()
        const rules = {required: {value: true, message: t('field_ini_harus_di_isi.label')}}

        return (
            <>
                <InputWithLabel
                    label={"Input Text"}
                    control={control}
                    errors={errors}
                    name={"text"}
                />
                <InputWithLabel
                    label={"Input number"}
                    control={control}
                    type={"number"}
                    errors={errors}
                    name={"number"}
                />
                <InputDateWithLabel
                    label={"Input Date"}
                    control={control}
                    type={"number"}
                    errors={errors}
                    name={"date"}
                />
                <Select2WithLabel
                    label={"Select 2 Data"}
                    control={control}
                    type={"number"}
                    errors={errors}
                    options={[
                        {
                            "label" : "DATA",
                            "value" : "DATA"
                        },
                        {
                            "label" : "DATA2",
                            "value" : "DATA"
                        },
                        {
                            "label" : "DATA3",
                            "value" : "DATA"
                        },
                        {
                            "label" : "DATA4",
                            "value" : "DATA"
                        },
                    ]}
                    name={"selectdata"}
                />
                <InputDateWithLabel
                    label={"Input Date Ga Booleh Backdate"}
                    control={control}
                    type={"number"}
                    errors={errors}
                    allowBackdate={false}
                    name={"date"}
                />
                <InputFormatted
                    label={"InputFormatted"}
                    control={control}
                    type={"number"}
                    errors={errors}
                    format={"+##-###########"}
                    name={"numberformatted"}
                />
                <InputTextArea
                    label={"TextArea"}
                    control={control}
                    type={"number"}
                    errors={errors}
                    name={"textarea"}
                />
                <InputFormatted
                    label={t('nomor_telp.label')}
                    control={control}
                    errors={errors}
                    name={"no_telp"}
                    type={"tel"}
                    required={true}
                    rules={{...rules, ... { maxLength: {value: 13 ,message: t('format_telepon_salah.label')},  minLength: {value: 7 ,message: t('format_telepon_salah.label')}}}}
                    placeholder={t('nomor_telepon.label')}
                />

            </>
        )
    }

Tulisan helloworld bisa di ganti

Tambahkan Loader pada index.js

if (document.getElementById('rx-test-react-input-collection-page-container')) {
    const container = document.getElementById("rx-test-react-input-collection-page-container")
    ReactDOM.render(<TestReactInputCollectionPage />, container)
}

Jalankan build react

npm run start

Refresh halaman adan akan muncul tampilan helloworld