Penggunaan reset() dan getFillableColumn()

Latar Belakang

Ketika suatu data telah diisi dan user melakukan aksi Simpan Draft. Maka secara tidak langsung data tersebut akan bisa di-edit dan dilakukan aksi Simpan dan Proses yang nantinya tidak akan bisa di-edit kembali.

Masalah datang ketika proses Simpan dan Proses dilakukan, beberapa data pada field required yang telah di-inputkan sebelumny tidak dikenali. Sehingga react-hook-form mengidentifikasi bahwa field tersebut masih kosong.

Solusi

reset()

• Untuk solusi dari permasalahan tersebut adalah dengan menggunakan fungsi reset() yang telah disediakan oleh react-hook-form.

  const { reset } = useForm();

• Fungsi reset() dipanggil ketika setelah selesai memanggil detail dari data dengan parameter pertama adalah data yang didapatkan dari response API.

  const getData = async () => {
    try {
      setIsLoading(true);
  
      const { data } = await axios.get(`/api/${module}/${table}/${id}`);
  
      setData(data.data);
      setIsSupang(!_.isNil(data.data?.kpt213a_id));
  
      setReadOnly(data.data.status !== ApprovalDirekturStatus.DRAFT);
  
      reset(data.data);
      await getKpt201aData(data.data.kpt201a_id);
    } catch (error) {
      console.error(error);
    } finally {
      setIsLoading(false);
    }
  };

getFillableColumn()

• Ketika menggunakan reset() maka semua value yang berasal dari response API akan ter-record. Sehingga ketika melakukan aksi Simpan dan Proses akan banyak data yang terkirim.

• Untuk mengantisipasi attribute-attribute yang tidak diinginkan ikut tersimpan, bisa menggunakan getFillableColum().

• Fungsi getFillableColumn() bertujuan untuk mengambil semua kolom yang ada pada table berdasarkan rules().

• Pemanggilan fungsi getFillableColumn() dilakukan pada fungsi saveAction().

    public function saveAction(CrudModel $model, array $data): CrudModel
    {
        try {
            DB::beginTransaction();
  
            $createdData = Arr::only($data, $this->model->getFillableColumn());
            $model->fill($createdData);
            $model->save();
  
            DB::commit();
  
            return $model;
        } catch (\Throwable $e) {
            report($e);
  
            DB::rollBack();
  
            throw $e;
        }
    }