Merge branch 'deni-dev(pc)' into 'master'

Deni dev(pc)

See merge request !263

src/api/index.js

@@ -173,6 +173,10 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
   // UPLOAD FOTO
   const uploadFoto = (body) => api.post('attachment/upload_foto', body)
 
+  // MANAGEMENT DOCUMENT
+  const getDocumentCategory = () => api.get('document_category/get_all_document_category')
+  const getAllDocument = (body) => api.post('document/get_all_document', body)
+
   // ------
   // STEP 3
   // ------
@@ -275,7 +279,9 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
     deleteUnitBisnis,
     deleteParameter,
     deletePerusahaan,
-    deleteReportItems
+    deleteReportItems,
+    getDocumentCategory,
+    getAllDocument
   }
 }
 

src/container/BudgetTahunan.js

@@ -288,6 +288,11 @@ export default class BudgetTahunan extends Component {
         this.setState({ alert: false })
     }
 
+    getDataBalanceSheet(data){
+        console.log(data)
+    }
+
+
     render() {
         const columns = ["#", "Jenis Laporan",
             {
@@ -594,6 +599,7 @@ export default class BudgetTahunan extends Component {
                         company={this.state.company}
                         revision={this.state.revisionTable}
                         periode={this.state.periode.periode}
+                        getDataBalanceSheet={this.getDataBalanceSheet.bind(this)}
                         onClickClose={() => this.setState({ visibleBS: false, visibleBudgetTahunan: true })}
                     />
                 )}

src/container/BudgetTahunan/BalanceSheet.js

@@ -708,6 +708,17 @@ export default class BalanceSheet extends Component {
         // }, () => console.log(this.state.dataTable))
     }
 
+    backToMasterBudget(){
+        let data = this.state.dataTable.map(i => {
+            return [
+                i[1], i[4], i[6], i[7], i[8], i[9], i[10], i[11], i[12], i[13], i[14], i[15], i[16], i[17], i[18], i[19], i[20], i[21]
+            ]
+        })
+        // console.log(data);
+        this.props.getDataBalanceSheet(data)
+        this.props.onClickClose()
+    }
+
     render() {
         let dataTable2 = this.state.dataTable
         const handleChange = (value, tableMeta) => {
@@ -771,7 +782,7 @@ export default class BalanceSheet extends Component {
                 setCellProps: () => ({ style }),
                 customBodyRender: (val, tableMeta) => {
                     return (
-                        <div style={{ width: 300}}>
+                        <div style={{ width: 300 }}>
                             {tableMeta.rowData[4] == 0 ?
                                 <span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span>
                                 :
@@ -1957,7 +1968,7 @@ export default class BalanceSheet extends Component {
                                 <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
                             </div>
 
-                            <div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) , height: this.props.height - 400 }}>
+                            <div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150), height: this.props.height - 400 }}>
                                 <MuiThemeProvider theme={getMuiTheme()}>
                                     <MUIDataTable
                                         data={dataTable2}
@@ -1967,7 +1978,7 @@ export default class BalanceSheet extends Component {
                                 </MuiThemeProvider>
                             </div>
                         </div>
-                        <div className="grid grid-2x" style={{ marginTop: 20}}>
+                        <div className="grid grid-2x" style={{ marginTop: 20 }}>
                             <div className="col-1">
                                 <button
                                     className="button"
@@ -1988,9 +1999,19 @@ export default class BalanceSheet extends Component {
                                 <div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960', marginRight: 20 }}>
                                     <Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Cancel</Typography>
                                 </div>
+                                <button
+                                    type="button"
+                                    onClick={() => this.backToMasterBudget()}
+                                    style={{
+                                        backgroundColor: 'transparent',
+                                        cursor: 'pointer',
+                                        borderColor: 'transparent',
+                                    }}
+                                >
                                     <div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', marginRight: 20 }}>
                                         <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save</Typography>
                                     </div>
+                                </button>
                                 <button
                                     className="button"
                                     type="button"

src/container/DocumentManagement/AuditTahunan.js

+import React, { Component } from 'react'
+import MUIDataTable from 'mui-datatables'
+import { createMuiTheme, MuiThemeProvider } from '@material-ui/core';
+import api from '../../api';
+
+
+var ct = require("../../library/CustomTable");
+const getMuiTheme = () => createMuiTheme(ct.customTable());
+const options = ct.customOptionsManagementDocument();
+
+export default class AuditTahunan extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            dataTable: []
+        }
+    }
+
+    componentDidMount() {
+        console.log(this.props.data)
+        this.getData()
+    }
+
+    getData() {
+        let payload = {
+            "company_id": 1,
+            "document_category_id": 1
+        }
+
+        api.create().getAllDocument(payload).then(respone => {
+            let dataTable = respone.data.data.map(item => {
+                return [
+                    item.document_name,
+                    item.description,
+                    item.company_name,
+                    "",
+                    item.document_type,
+                    String(Number(item.document_size) / 1000 + ' MB'),
+                    item.created_by,
+                    item.created_at,
+                ]
+            })
+            this.setState({ dataTable })
+        })
+    }
+
+    render() {
+        let columns = [
+            "Nama File", "Keterangan", "Perusahaan", "Periode", "Tipe", "Ukuran", "Ditambahkan Oleh", "Ditambahkan Tanggal"
+        ]
+        return (
+            <div style={{ width: '100%' }}>
+                <div style={{ display: 'grid', justifyContent: 'flex-end' }}>
+                    <button
+                        type="button"
+                        onClick={() => null}
+                        style={{ marginRight: 25 }}
+                    >
+                        <div style={{ width: 150, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
+                            <span style={{ color: '#fff', fontSize: 11 }}>Add</span>
+                        </div>
+                    </button>
+                </div>
+                <div style={{ padding: 25 }}>
+                    <MuiThemeProvider theme={getMuiTheme()}>
+                        <MUIDataTable
+                            theme={getMuiTheme()}
+                            data={this.state.dataTable}
+                            columns={columns}
+                            options={options}
+                        />
+                    </MuiThemeProvider>
+                </div>
+            </div>
+        )
+    }
+}

src/container/DocumentManagement/DocumentManagement copy.js

+import React, {useEffect} from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+import ReactTooltip from 'react-tooltip';
+import Images from '../../assets/Images';
+import { Paper } from '@material-ui/core';
+import ManualBookTia from './ManualBookTia';
+import api from '../../api';
+
+function TabPanel(props) {
+    const { children, value, index, ...other } = props;
+
+    return (
+        <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`vertical-tabpanel-${index}`}
+            aria-labelledby={`vertical-tab-${index}`}
+            {...other}
+        >
+            {value === index && (
+                <Box p={3}>
+                    <Typography>{children}</Typography>
+                </Box>
+            )}
+        </div>
+    );
+}
+
+TabPanel.propTypes = {
+    children: PropTypes.node,
+    index: PropTypes.any.isRequired,
+    value: PropTypes.any.isRequired,
+};
+
+function a11yProps(index) {
+    return {
+        id: `vertical-tab-${index}`,
+        'aria-controls': `vertical-tabpanel-${index}`,
+    };
+}
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+        // height: 244,
+    },
+    tabs: {
+        borderRight: `1px solid ${theme.palette.divider}`,
+    },
+}));
+
+export default function DocumentManagement() {
+    const classes = useStyles();
+    const [value, setValue] = React.useState(0);
+    const [listData, setListData] = React.useState([])
+
+    const handleChange = (event, newValue) => {
+        setValue(newValue);
+    };
+
+    useEffect(() => {
+        getDataDocument()
+    })
+
+    const getDataDocument = () => {
+        api.create().getDocumentCategory().then(response => {
+            let data = response.data.data
+            setListData(data)
+        })
+    }
+
+    return (
+        <div style={{ flex: 1 }}>
+            <div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
+                <Typography style={{ fontSize: '16px', color: 'white' }}>Document Management</Typography>
+            </div>
+            <Paper style={{ padding: 20 }}>
+                <div style={{ display: 'grid', justifyContent: 'flex-end' }}>
+                    <a data-tip={'Add New'} data-for="create">
+                        <button
+                            style={{
+                                backgroundColor: 'transparent',
+                                cursor: 'pointer',
+                                borderColor: 'transparent',
+                                margin: 5,
+                                marginRight: 20
+                            }}
+                            onClick={() => null}
+                        >
+                            <img src={Images.add} />
+                        </button>
+                    </a>
+                    <ReactTooltip border={true} id="create" place="bottom" type="light" effect="solid" />
+                </div>
+                <div className={classes.root}>
+                    <Tabs
+                        orientation="vertical"
+                        variant="scrollable"
+                        value={value}
+                        onChange={handleChange}
+                        aria-label="Vertical tabs example"
+                        className={classes.tabs}
+                    >
+                        {listData.map((item, index) => {
+                            return (
+                                <Tab label={item.document_category_name} {...a11yProps(index)} />
+                            )
+                        })}
+                    </Tabs>
+                    {listData.map((item, index) => {
+                        return (
+                            <TabPanel value={value} index={index} style={{ width: '100%'}}>
+                                {index === 0 ?
+                                    <ManualBookTia /> :
+                                    <span>Test</span>
+                                }
+                            </TabPanel>
+                        )
+                    })}
+                </div>
+            </Paper>
+        </div>
+    );
+}
\ No newline at end of file

src/container/DocumentManagement/DocumentManagement.js

+import React, { Component } from 'react'
+import { Tabs, Tab, Typography, Paper } from '@material-ui/core'
+import ReactTooltip from 'react-tooltip'
+import Images from '../../assets/Images'
+import ManualBookTia from './ManualBookTia'
+import api from '../../api'
+import AuditTahunan from './AuditTahunan'
+
+export default class DocumentManagement extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            tab: 0,
+            listData: [],
+            id: 0
+        }
+    }
+
+    selectTab = (event, newEvent) => {
+        this.setState({ tab: newEvent })
+    }
+
+    componentDidMount() {
+        this.getDataDocument()
+    }
+
+    getDataDocument() {
+        api.create().getDocumentCategory().then(response => {
+            this.setState({
+                listData: response.data.data,
+                id: response.data.data[0].document_category_id,
+                loadTable: true
+            })
+        })
+    }
+
+    getID(id) {
+        console.log(id);
+        this.setState({ id })
+    }
+
+    render() {
+        return (
+            <div style={{ height: this.props.height, backgroundColor: '#f8f8f8' }}>
+                <div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
+                    <Typography style={{ fontSize: '16px', color: 'white' }}>Management Document</Typography>
+                </div>
+                <div style={{ padding: 20 }}>
+                    <Paper style={{ padding: 20 }}>
+                        <div style={{ display: 'flex' }}>
+                            <Tabs
+                                orientation="vertical"
+                                variant="scrollable"
+                                value={this.state.tab}
+                                onChange={this.selectTab}
+                                aria-label="simple tabs example"
+                                style={{ width: 350 }}
+                            >
+                                {this.state.listData.map((item, index) => {
+                                    return (
+                                        <Tab
+                                            onClick={() => this.setState({ id: item.document_category_id })}
+                                            label={item.document_category_name}
+                                        />
+                                    )
+                                })}
+                            </Tabs>
+                            {this.state.loadTable && (
+                                this.state.id === 2 ?
+                                    <AuditTahunan
+                                        data={this.state.listData[this.state.tab]}
+                                    /> :
+                                    this.state.id === 1 ?
+                                        <ManualBookTia /> :
+                                        <span>Test2</span>
+
+                            )}
+                        </div>
+
+                    </Paper>
+                </div>
+            </div>
+        )
+    }
+}

src/container/DocumentManagement/ManualBookTia.js

+import React, { Component } from 'react'
+import MUIDataTable from 'mui-datatables'
+import { createMuiTheme, MuiThemeProvider } from '@material-ui/core';
+
+
+var ct = require("../../library/CustomTable");
+const getMuiTheme = () => createMuiTheme(ct.customTable());
+const options = ct.customOptions();
+
+export default class ManualBookTia extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            dataTable: []
+        }
+    }
+
+    render() {
+        let columns = [
+            "Nama File", "Keterangan", "Perusahaan", "Tipe", "Ukuran", "Ditambahkan Oleh", "Ditambahkan Tanggal"
+        ]
+        return (
+            <div style={{ width: '100%' }}>
+                <div style={{ display: 'grid', justifyContent: 'flex-end' }}>
+                    <button
+                        type="button"
+                        onClick={() => null}
+                        style={{ marginRight: 25 }}
+                    >
+                        <div style={{ width: 150, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
+                            <span style={{ color: '#fff', fontSize: 11 }}>Add</span>
+                        </div>
+                    </button>
+                </div>
+                <div style={{ padding: 25 }}>
+                    <MuiThemeProvider theme={getMuiTheme()}>
+                        <MUIDataTable
+                            theme={getMuiTheme()}
+                            data={this.state.dataTable}
+                            columns={columns}
+                            options={options}
+                        />
+                    </MuiThemeProvider>
+                </div>
+            </div>
+        )
+    }
+}

src/container/MasterData/Parameter/CreateParameter.js

@@ -433,7 +433,7 @@ export default class CreateParameter extends Component {
             // } else if (R.isEmpty(this.state.tempData.description)) {
             //     this.setState({ errorDeskripsi: true, msgErrorDeskripsi: 'Deskripsi tidak boleh kosong' })
         } else if (R.isEmpty(this.state.tempData.value) && R.isEmpty(this.state.tempData.min_value) && R.isEmpty(this.state.tempData.max_value)) {
-            this.setState({ errorValue: true, msgErrorValue: 'Value tidak boleh kosong' })
+            this.setState({ errorValue: true, msgErrorValue: 'Value Cannot be Empty.' })
         } else if ((!R.isEmpty(this.state.tempData.max_value) && R.isEmpty(this.state.tempData.min_value))) {
             this.setState({ errorMinValue: true, msgErrorMinValue: 'Min Value Cannot be Empty.' })
         } else if (R.isNil(this.state.tempData.start_date)) {
@@ -459,7 +459,7 @@ export default class CreateParameter extends Component {
             // } else if (R.isEmpty(this.state.description)) {
             //     this.setState({ errorDeskripsi: true, msgErrorDeskripsi: 'Deskripsi tidak boleh kosong' })
         } else if ((R.isEmpty(this.state.value) && R.isEmpty(this.state.maxValue) && R.isEmpty(this.state.minValue))) {
-            this.setState({ errorValue: true, msgErrorValue: 'Value tidak boleh kosong' })
+            this.setState({ errorValue: true, msgErrorValue: 'Value Cannot be Empty.' })
         } else if ((!R.isEmpty(this.state.maxValue) && R.isEmpty(this.state.minValue))) {
             this.setState({ errorMinValue: true, msgErrorMinValue: 'Min Value Cannot be Empty.' })
         } else if (R.isNil(this.state.startDate)) {

src/library/CustomTable.js

@@ -528,3 +528,20 @@ exports.customOptionsFixedColumn = function () {
     pagination: false
   }
 }
+
+exports.customOptionsManagementDocument = function () {
+  return {
+    // selectableRows: false,
+    selectableRows: 'none',
+    filterType: 'multiselect',
+    responsive: 'scroll',
+    viewColumns:true,
+    rowsPerPage: 10,
+    rowsPerPageOptions: [10, 20, 30, 50],
+    print: false,
+    download: false,
+    elevation: 5,
+    filter: true,
+    search: true,
+  }
+}
\ No newline at end of file

src/router/homeRoutes.js

@@ -14,6 +14,7 @@ import BudgetTahunan from '../container/BudgetTahunan';
 import RollingOutlook from '../container/RollingOutlook';
 import OperatingIndicator from '../container/OperatingIndicator/OperatingIndicator'
 import MonthlyReport from '../container/MonthlyReport';
+import DocumentManagement from '../container/DocumentManagement/DocumentManagement';
 
 const routes = [
   {
@@ -76,6 +77,10 @@ const routes = [
     path: "/home/monthly-report",
     main: MonthlyReport
   },
+  {
+    path: "/home/document-management",
+    main: DocumentManagement
+  },
   {
     path: "*",
     main: screen404