From c9f2e91c99d8a5df0aea45af54117b2d1ff93b32 Mon Sep 17 00:00:00 2001 From: Faris Isa Date: Wed, 5 May 2021 13:03:02 +0700 Subject: [PATCH] manufacture crud done --- src/views/products/manufactures/Add.js | 87 +++++++++++++++ src/views/products/manufactures/Edit.js | 102 ++++++++++++++++++ .../products/manufactures/Manufacture.js | 68 ++++++++++++ .../products/manufactures/Manufactures.js | 95 ++++++++++++++++ .../products/manufactures/components/Form.js | 61 +++++++++++ .../products/manufactures/components/Table.js | 58 ++++++++++ 6 files changed, 471 insertions(+) diff --git a/src/views/products/manufactures/Add.js b/src/views/products/manufactures/Add.js index e69de29..15eac7c 100644 --- a/src/views/products/manufactures/Add.js +++ b/src/views/products/manufactures/Add.js @@ -0,0 +1,87 @@ +import React, { useState, useEffect } from 'react'; +import { useHistory } from 'react-router-dom'; +import Swal from 'sweetalert2'; +import { CCard, CCardBody } from '@coreui/react' +import axiosConfig from "../../../api/axios"; +import Form from './components/Form'; +import Header from '../../.components/CardHeader'; +import Load from '../../.components/Loading'; + + +const Add = () => { + const [value, setValue] = useState(""); + const [load, setLoad] = useState(false); + const history = useHistory(); + let data = { + name: "", + code_name: "" , + } + + useEffect(() => { + + }, []); + + const handleForm = (value) => { + setValue(value); + } + + const handleSubmit = async (e) => { + e.preventDefault(); + setLoad(true); + const token = JSON.parse(sessionStorage.getItem("token")); + let config = { + headers : { authorization: `Bearer ${token}` } + }; + try { + await axiosConfig.post('/manufactures', value, config) + .then(res => { + const data = res.data; + if (data.status === 201){ + setLoad(false); + Swal.fire({ + title: 'Sukses', + text: 'Data berhasil ditambahkan!', + icon: 'success', + timer: 1500, + }); + history.push('/produk/manufaktur'); + } else if (data.status === 500){ + setLoad(false); + Swal.fire({ + title: 'Gagal', + text: 'Periksa kembali kolom form !', + icon: 'warning', + timer: 1500, + }); + } else if (data.status === 404){ + setLoad(false); + Swal.fire({ + title: 'Gagal', + text: 'Error', + icon: 'error', + timer: 1500, + }); + } + }) + } catch (error) { + console.error(error); + } + } + + + return ( + +
+ + { (load === true) ? : + // {handleSubmit(e)}}> +
+ // {/* Submit + // */} + } + + + ) +} + +export default Add; diff --git a/src/views/products/manufactures/Edit.js b/src/views/products/manufactures/Edit.js index e69de29..fd92caf 100644 --- a/src/views/products/manufactures/Edit.js +++ b/src/views/products/manufactures/Edit.js @@ -0,0 +1,102 @@ +import React, { useState, useEffect } from 'react'; +import { useHistory } from 'react-router-dom'; +import Swal from 'sweetalert2'; +import { CCard, CCardBody, CForm, CButton } from '@coreui/react' +import CIcon from '@coreui/icons-react' +import axiosConfig from "../../../api/axios"; +import Form from './components/Form'; +import Header from '../../.components/CardHeader'; +import Load from '../../.components/Loading'; + + +const Edit = ({match}) => { + + const id = match.params.id; + const [data, setData] = useState(); + const [value, setValue] = useState(""); + const [load, setLoad] = useState(true); + const history = useHistory(); + + + useEffect(() => { + const getType = async () => { + try { + await axiosConfig.get(`/manufactures/${id}`).then(res => { + setData(res.data); + setLoad(false) + }) + } catch(error) { + + } + } + getType() + }, [setData]); + + const handleForm = (value) => { + setValue(value); + } + + const handleSubmit = async (e) => { + e.preventDefault(); + setLoad(true); + // const fd = new FormData(); + // fd.append('name', value.model_produk); + // fd.append('code_name', value.code_name); + // fd.append('satuan', value.satuan); + // fd.append('code_satuan', value.code_satuan); + + + const token = JSON.parse(sessionStorage.getItem("token")); + let config = { + headers : { authorization: `Bearer ${token}` } + }; + try { + await axiosConfig.patch(`/manufactures/${id}`, value, config) + .then(res => { + const data = res.data; + if (data.status === 201){ + setLoad(false); + Swal.fire({ + title: 'Sukses', + text: 'Data berhasil diubah!', + icon: 'success', + timer: 1500, + }); + history.push('/produk/manufaktur'); + } else if (data.status === 500){ + setLoad(false); + Swal.fire({ + title: 'Gagal', + text: 'Periksa kembali kolom form !', + icon: 'warning', + timer: 1500, + }); + } else if (data.status === 404){ + setLoad(false); + Swal.fire({ + title: 'Gagal', + text: 'Error', + icon: 'error', + timer: 1500, + }); + } + }) + } catch (error) { + console.error(error); + } + } + + + return ( + +
+ + { (load === true) ? : + + } + + + ) +} + +export default Edit; diff --git a/src/views/products/manufactures/Manufacture.js b/src/views/products/manufactures/Manufacture.js index e69de29..0081f64 100644 --- a/src/views/products/manufactures/Manufacture.js +++ b/src/views/products/manufactures/Manufacture.js @@ -0,0 +1,68 @@ +import React, { useState, useEffect } from 'react'; + +import axiosConfig from "../../../api/axios"; + +import { CCard, CCardBody } from '@coreui/react'; + +import Header from '../../.components/CardHeader'; + +import Loadwait from '../../.components/Loading'; + + +const Type = ({match}) => { + + const id = match.params.id; + const [isload, setIsload] = useState(true) + const [ data, setData ] = useState([]); + const token = JSON.parse(sessionStorage.getItem("token")); + + + useEffect(() => { + let headers = { + authorization: `Bearer ${token}`, + }; + const getData = async () => { + try { + await axiosConfig.get(`/manufactures/${id}`, headers) + .then(res => { + setData(res.data); + setIsload(false); + }) + } catch(error) { + + } + } + + getData(); + }, [setData]); + + const details = data ? Object.entries(data) : <> + + return ( + <> + +
+ { (isload === true) ? : + + + { + details.map(([key, value], index) => { + return ( + + + + + + + ) + }) + } +
{`${key} :`} {value}
+ + } + + + ) +} + +export default Type; diff --git a/src/views/products/manufactures/Manufactures.js b/src/views/products/manufactures/Manufactures.js index e69de29..8a96d9e 100644 --- a/src/views/products/manufactures/Manufactures.js +++ b/src/views/products/manufactures/Manufactures.js @@ -0,0 +1,95 @@ +import React, { useState, useEffect } from 'react' +import { + CCard, + CCardBody, + CCol, + CRow, +} from '@coreui/react'; +import Table from './components/Table'; +import axiosConfig from "../../../api/axios"; +import CardHeader from '../../.components/CardHeader' +import Swal from 'sweetalert2'; + + +const Manufactures = () => { + const [data, setData] = useState([]); + const [load, setLoad] = useState(true); + const token = JSON.parse(sessionStorage.getItem("token")); + + useEffect(() => { + let headers = { + authorization: `Bearer ${token}`, + }; + const getData = async () => { + try { + await axiosConfig.get('/manufactures', headers) + .then((res) => { + setData(res.data); + setLoad(false); + }) + } catch(error) { + + } + }; + + getData() + }, [setData, setLoad]); + + const handleDelete = (id) => { + let headers = { + authorization: `Bearer ${token}`, + }; + const getAlert = () => { + Swal.fire({ + title: 'Yakin menghapus tipe produk ini ?', + text: "Perubahan yang terjadi tidak dapat diubah kembali", + icon: 'warning', + showCancelButton: true, + confirmButtonColor: '#3085d6', + cancelButtonColor: '#d33', + confirmButtonText: 'Ya, hapus tipe ini.' + }).then((result) => { + if (result.isConfirmed) { + try { + setLoad(true); + axiosConfig.delete(`/manufactures/${id}`, headers) + .then(res => { + if (res.status === 200){ + Swal.fire({ + title: 'Sukses', + text: 'Data berhasil dihapus!', + icon: 'success', + timer: 2000, + }); + let filtered = data.reduce((filter,data) => + ( data.id !== id && filter.push(data) ,filter ),[]); + setData(filtered); + setLoad(false) + } + }) + } catch(error) { + console.log(error) + } + } + } + ) + }; + getAlert(); + } + + + return ( + + + + + + + + + + + ) +} + +export default Manufactures; diff --git a/src/views/products/manufactures/components/Form.js b/src/views/products/manufactures/components/Form.js index e69de29..dc9c651 100644 --- a/src/views/products/manufactures/components/Form.js +++ b/src/views/products/manufactures/components/Form.js @@ -0,0 +1,61 @@ +import React, { useState, useEffect } from 'react'; +import { + CForm, + CCol, + CFormGroup, + CFormText, + CInput, + CButton +} from '@coreui/react' +import CIcon from '@coreui/icons-react' +import LabelForm from '../../../.components/form/LabelForm'; + +const Form = (props) => { + const { value, temp, submit } = props; + + const [val, setVal] = useState({ + name: temp.name, + code_name: temp.code_name, + }); + + // send data child -> parent + useEffect(() => { + value(val); + }); + +const handleChange = (e) => { + let target = e.target; + let name = target.name; + let value = target.value; + if (name === "nama_tipe"){ + const temp = {...val, name: value}; + setVal(temp); + } else if (name === "code_tipe"){ + const temp = {...val, code_name: value}; + setVal(temp); + } +} + + + return ( + {submit(e)}}> + + + + + Isian nama manufaktur produk + + + + + + + Isian kode manufaktur produk + + + Submit + + ) +} + +export default Form; diff --git a/src/views/products/manufactures/components/Table.js b/src/views/products/manufactures/components/Table.js index e69de29..68d74f2 100644 --- a/src/views/products/manufactures/components/Table.js +++ b/src/views/products/manufactures/components/Table.js @@ -0,0 +1,58 @@ +import React from 'react'; +import { Link } from 'react-router-dom' +import { + CDataTable, + CButton +} from '@coreui/react'; +import CIcon from '@coreui/icons-react'; + +const Table = (props) => { + const {data, load, del} = props; + + return ( + <> + ( + + ), + }} + /> + + ) +} + +export default Table;
+ + + +
info
+ + + + + +
edit
+ {/* {item.id} */} + + + del(item.id)} + > + +
delete
+ + {/* */} +