diff --git a/src/views/Master/MasterTransaction/DialogForm.js b/src/views/Master/MasterTransaction/DialogForm.js index 94350f9..b97a2f1 100644 --- a/src/views/Master/MasterTransaction/DialogForm.js +++ b/src/views/Master/MasterTransaction/DialogForm.js @@ -1,12 +1,12 @@ import React, { Component } from 'react' -import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Form, FormGroup, Label, Input } from 'reactstrap'; +import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Form, FormGroup, Label } from 'reactstrap'; import 'antd/dist/antd.css'; -import axios from 'axios'; -import { COMPANY_MANAGEMENT_LIST } from '../../../const/ApiConst.js'; import { withTranslation } from 'react-i18next'; -import { NotificationManager } from 'react-notifications'; import { Select, DatePicker } from 'antd'; +import axios from 'axios'; +import { NotificationManager } from 'react-notifications'; import moment from "moment"; +import { COMPANY_MANAGEMENT_LIST } from '../../../const/ApiConst'; const { Option } = Select class DialogForm extends Component { @@ -14,16 +14,12 @@ class DialogForm extends Component { super(props) this.state = { id: 0, - name: "", - ExpiredDateOspro: moment(), - description: "", + ExpiredDateOspro:moment(moment().format("YYYY-MM-DD")), openDialog: false, - companyList: [], - scompany_id:null, - isParentClick: false, - company_id: props.company_id || null, - role_name: props.role_name || '', token: props.token || '', + isParentClick: false, + type_paket: '', + companyList: [], config: { headers: { Authorization: `Bearer ${props.token || ''}`, @@ -34,38 +30,31 @@ class DialogForm extends Component { } async componentDidMount() { + this.getCompanyList(); this.props.showDialog(this.showDialog); - this.getDataProyekCompany(); } async componentDidUpdate() { if (this.state.isParentClick === true) { - if (this.props.typeDialog === "Edit") { - const { dataEdit } = this.props + const { dataEdit } = this.props + if (dataEdit && this.props.typeDialog === "Edit") { this.setState({ id: dataEdit.id, - name: dataEdit.name, - description: dataEdit.description, - scompany_id : dataEdit.company_id + type_paket: dataEdit.type_paket, + ExpiredDateOspro: dataEdit.exp_ospro ? moment(moment(dataEdit.exp_ospro).format("YYYY-MM-DD")) : moment(moment().format("YYYY-MM-DD")), }) } else { this.setState({ id: 0, - name: "", - description: "", - scompany_id:null + type_paket: "", + ExpiredDateOspro: moment(moment().format("YYYY-MM-DD")) }) } this.setState({ isParentClick: false }); } } - - showDialog = () => { - this.setState({ isParentClick: true }); - } - - getDataProyekCompany = async () => { + getCompanyList = async () => { const result = await axios .get(COMPANY_MANAGEMENT_LIST, this.state.config) .then((res) => res) @@ -79,107 +68,85 @@ class DialogForm extends Component { } }; - handleDatePicker = (date, dateString) => { - this.setState({ ExpiredDateOspro: date }) - }; + showDialog = () => { + this.setState({ isParentClick: true }); + } validation = () => { - if (this.state.role_name === 'Super Admin' && !this.state.scompany_id || this.state.scompany_id === "") { - alert("Company data cannot be empty!"); + const {type_paket, ExpiredDateOspro} = this.state; + + if (!type_paket || type_paket === "") { + alert("Type paket cannot be empty!"); return true; } + if(!ExpiredDateOspro || ExpiredDateOspro === "") { + alert("Expired date cannot be empty!"); + return true; + } } handleSave = () => { const { id, - name, - description, - role_name, - company_id, - scompany_id + type_paket, + ExpiredDateOspro } = this.state let data = ''; const err = this.validation(); if(!err) { - if (this.props.typeDialog === "Save") { - data = { - id, - name, - description, - company_id : role_name !== 'Super Admin' ? company_id : scompany_id, - } - this.props.closeDialog('save', data); - } else { + if (this.props.typeDialog === "Edit") { data = { id, - name, - description, - company_id : role_name !== 'Super Admin' ? company_id : scompany_id, + type_paket, + ExpiredDateOspro } - this.props.closeDialog('edit', data); + this.props.closeDialog('edit',data); } } this.setState({ id: 0 }); } handleCancel = () => { - this.props.closeDialog('cancel', 'none') + this.props.closeDialog('cancel','none') } - onChangeCompanyProject = (val) => { - this.setState({scompany_id : val}); + onChangeTypePaket = (val) => { + this.setState({type_paket : val}); }; + handleDatePicker = (date) => { + this.setState({ ExpiredDateOspro: date }) + }; renderForm = () => { - const { t } = this.props; + const {type_paket, ExpiredDateOspro} = this.state; return (
- { - this.state.role_name === 'Super Admin' && ( - - - - - ) - } - - this.setState({ name: e.target.value })} placeholder={this.props.t('inputName')} /> + + + + - - {/* { - // let currentDate = moment(current).format("YYYY-MM-DD"); - // let customDate = moment(this.state.ExpiredDateOspro) - // .add(1, "days") - // .format("YYYY-MM-DD"); - // return current && currentDate < customDate; - // }} + + { + return current && current < moment().startOf('day'); + }} format={"DD-MM-YYYY"} style={{ width: "100%" }} - value={this.state.ExpiredDateOspro} - onChange={this.handleDatePicker()} - /> */} + value={ExpiredDateOspro} + onChange={this.handleDatePicker} + />
) @@ -188,7 +155,7 @@ class DialogForm extends Component { render() { return ( - {this.props.typeDialog == "Save" ? "Tambah" : "Edit"} {this.props.t('Transaksi')} + {this.props.typeDialog} Transaction {this.renderForm()} diff --git a/src/views/Master/MasterTransaction/index.js b/src/views/Master/MasterTransaction/index.js index d3968dc..5a50ab6 100644 --- a/src/views/Master/MasterTransaction/index.js +++ b/src/views/Master/MasterTransaction/index.js @@ -1,15 +1,13 @@ import * as XLSX from 'xlsx'; import DialogForm from './DialogForm'; import React, { Component } from 'react'; -import SweetAlert from 'react-bootstrap-sweetalert'; import axios from 'axios'; import { Button } from 'reactstrap'; import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap'; import { NotificationContainer, NotificationManager } from 'react-notifications'; -import { PROJECT_ROLE_ADD, TRANSACTION_SEARCH, PROJECT_ROLE_EDIT, PROJECT_ROLE_DELETE } from '../../../const/ApiConst.js'; +import { TRANSACTION_EDIT, TRANSACTION_SEARCH, STORAGE_LIMIT_INFORMATION_ALL_COMPANY, TRANSACTION_ADD } from '../../../const/ApiConst.js'; import { Pagination, Tooltip, Table } from 'antd'; import { withTranslation } from 'react-i18next'; -import { checkActMenup } from '../../../const/CustomFunc'; import moment from "moment"; const LENGTH_DATA = 10 @@ -17,17 +15,11 @@ class index extends Component { constructor(props) { super(props); this.state = { - alertDelete: false, - alertNotDelete: false, currentPage: 1, - dataEdit: null, + dataEdit: [], dataExport: [], - dataGs: [], - dataIdHo: [], dataTable: [], - dialogMenuForm: false, - idDelete: 0, - idRoles: 0, + typeDialog: 'Save', menuRoles: [], openDialog: false, page: 0, @@ -40,16 +32,8 @@ class index extends Component { tooltipMenu: false, tooltipTambah: false, totalPage: 0, - typeDialog: 'Save', - company_id: props.company_id || 0, role_name: props.role_name || '', - role_id: props.role_id || 0, - user_id: props.user_id || 0, - isLogin: props.isLogin || false, token: props.token || '', - all_project: props.all_project || null, - hierarchy: props.hierarchy || [], - user_name: props.user_name || '', config: { headers: { Authorization: `Bearer ${props.token || ''}`, @@ -58,7 +42,7 @@ class index extends Component { } }; - + this.columns = [ { title: this.props.t('action'), @@ -66,36 +50,19 @@ class index extends Component { key: 'x', className: 'nowrap', render: (text, record) => <> - - this.handleDelete(text.id)}> - {/* { - checkActMenup('/product-transaction', 'delete') ? - this.handleDelete(text.id)}> - : - null - } */} - - this.handleEdit(text)}> - {/* { - checkActMenup('/product-transaction', 'update') ? - this.handleEdit(text)}> - : - null - } */} + this.handleEdit(text)}> , }, - ...(this.state.role_name === 'Super Admin' ? [ - { - title: "Company Name", - dataIndex: "join_first_company_name", - key: "join_first_company_name", - render: (text, record) => { - return { record.join_first_company_name }; - } - }] : []) - , + { + title: "Company Name", + dataIndex: "join_first_company_name", + key: "join_first_company_name", + render: (text, record) => { + return { record.join_first_company_name }; + } + }, { title: 'Type Paket', dataIndex: 'type_paket', key: 'type_paket', className: "nowrap", render: (text,record) => { return { !["Basic","Free"].includes(record.type_paket) ? 'Enterprise' : record.type_paket} @@ -107,16 +74,26 @@ class index extends Component { return { moment(record.exp_ospro).format('DD MMMM, YYYY') }; } }, + { title: "Storage", dataIndex: 'size', key: 'size', + render: (text, record) => { + return { record.size } MB; + } + }, + { title: "Total Project", dataIndex: 'project_total', key: 'project_total', + render: (text, record) => { + return { record.project_total } Project; + } + }, ]; } async componentDidMount() { - this.getDataTransaction(); + this.getDataLimitasi(); } async componentDidUpdate(prevProps, prevState) { const { search } = this.state - if (search !== prevState.search) this.getDataTransaction() + if (search !== prevState.search) this.getDataLimitasi() } handleSearch = e => { @@ -124,6 +101,20 @@ class index extends Component { this.setState({ search: value, currentPage: 1 }) }; + getDataLimitasi = async () => { + const result = await axios + .get(STORAGE_LIMIT_INFORMATION_ALL_COMPANY, this.state.config) + .then(res => res) + .catch((error) => error.response); + + if (result) { + this.setState({dataLimit: result.data}); + this.getDataTransaction(); + } else { + NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); + } + } + getDataTransaction = async () => { let start = 0; if (this.state.currentPage !== 1 && this.state.currentPage > 1) { @@ -147,11 +138,7 @@ class index extends Component { "joins": [], "orders": { "columns": ["id"], "ascending": false } } - if (this.state.role_name !== "Super Admin") { - formData.columns.push( - { "name": "company_id", "logic_operator": "=", "value": parseInt(this.state.company_id), "operator": "AND" }, - ) - } else { + if (this.state.role_name === "Super Admin") { formData.columns.push( { "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" }, ) @@ -168,7 +155,8 @@ class index extends Component { .catch((error) => error.response); if (result && result.data && result.data.code == 200) { - this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord }); + this.filterDataLimitasi(result.data.data); + this.setState({ totalPage: result.data.totalRecord }); } else { NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); } @@ -181,109 +169,68 @@ class index extends Component { handleCloseDialog = (type, data) => { if (type === "save") { - this.saveRole(data); - } else if (type === "edit") { - this.editRole(data); - } + this.saveTransaction(data); + } else if (type === "edit") { + this.editTransaction(data); + } this.setState({ openDialog: false }) } - - handleOpenDialogMr = () => { - this.setState({ dialogMenuForm: true }) - this.showMenuRolesDialog(); - } - handleCloseDialogMr = (type, data) => { - if (type === "save") { - this.saveMenuRoles(data) - } - this.setState({ dialogMenuForm: false }) - } - toggleAddDialog = () => { this.setState({ openDialog: !this.state.openDialog }) } - onConfirmDelete = async () => { - const { idDelete } = this.state - const url = PROJECT_ROLE_DELETE(idDelete) - - const result = await axios.delete(url, this.state.config) - .then(res => res) - .catch((error) => error.response); - - if (result && result.data && result.data.code === 200) { - this.getDataTransaction() - this.setState({ idDelete: 0, alertDelete: false }) - NotificationManager.success(`Data project role berhasil dihapus`, 'Success!!'); - } else { - this.setState({ idDelete: 0, alertDelete: false }) - NotificationManager.error(`Data project role gagal dihapus`, 'Failed!!'); - } - } - - saveRole = async (data) => { - - const formData = { - name: data.name, - description: data.description, - company_id: data.company_id - } - - const result = await axios.post(PROJECT_ROLE_ADD, formData, this.state.config) - .then(res => res) - .catch((error) => error.response); - - if (result && result.data && result.data.code === 200) { - this.getDataTransaction(); - NotificationManager.success(`Data project role berhasil ditambah`, 'Success!!'); - } else { - NotificationManager.error(`${result.data.message}`, 'Failed!!'); - } - - } - - editRole = async (data) => { - + saveTransaction = async (data) => { + const formData = { + type_paket: data.type_paket, + exp_ospro : data.ExpiredDateOspro, + company_id: data.company_id + } + + const result = await axios.post(TRANSACTION_ADD, formData, this.state.config) + .then(res => res) + .catch((error) => error.response); + + if (result && result.data && result.data.code === 200) { + this.getDataRoles(); + NotificationManager.success(`Data role berhasil ditambahkan`, 'Success!!'); + } else { + NotificationManager.error(`Data role gagal ditambahkan`, 'Failed!!'); + } + } + + editTransaction = async (data) => { const formData = { - name: data.name, - description: data.description, - company_id : data.company_id + type_paket: data.type_paket, + exp_ospro : data.ExpiredDateOspro, } - const url = PROJECT_ROLE_EDIT(data.id) + const url = TRANSACTION_EDIT(data.id) const result = await axios.put(url, formData, this.state.config) .then(res => res) .catch((error) => error.response); if (result && result.data && result.data.code === 200) { - this.getDataTransaction(); - NotificationManager.success(`Data project role berhasil diedit`, 'Success!!'); + this.getDataLimitasi(); + NotificationManager.success(`Data transaksi berhasil diedit`, 'Success!!'); } else { - NotificationManager.error(`Data project role gagal di edit`, `Failed!!`); + NotificationManager.error(`Data transaksi gagal di edit`, `Failed!!`); } - } - handleEdit = (data) => { - this.setState({ dataEdit: data }); + this.setState({ dataEdit: data}); this.handleOpenDialog('Edit'); } - handleDelete = (id) => { - id == '1' ? this.setState({ alertNotDelete: true }) : - this.setState({ alertDelete: true, idDelete: id }); - } - onShowSizeChange = (current, pageSize) => { this.setState({ rowsPerPage: pageSize }, () => { - this.getDataTransaction(); + this.getDataLimitasi(); }) } onPagination = (current, pageSize) => { this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => { - this.getDataTransaction(); + this.getDataLimitasi(); }) } @@ -312,52 +259,17 @@ class index extends Component { } handleExportExcel = async () => { - const payload = { - "paging": { "start": 0, "length": -1 }, - "columns": [], - "group_column": { - "operator": "AND", - "group_operator": "OR", - "where": [ - { - "name": "name", - "logic_operator": "~*", - "value": this.state.search, - } - ] - }, - "joins": [], - "orders": { "columns": ["id"], "ascending": false } - } - if (this.state.role_name !== "Super Admin") { - payload.columns.push( - { "name": "company_id", "logic_operator": "=", "value": this.state.company_id, "operator": "AND" }, - ) - } else { - payload.columns.push( - { "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" }, - ) - payload.joins.push( - { "name": "m_company", "column_join": "company_id", "column_results": ["company_name"] } - ) - payload.group_column.where.push( - { name: "company_name", logic_operator: "~*", value: this.state.search, table_name: "m_company" } - ) - } - const result = await axios - .post(TRANSACTION_SEARCH, payload, this.state.config) - .then(res => res) - .catch((error) => error.response); - if (result && result.data && result.statusText == "OK") { - const dataRes = result.data.data || []; + const {filteredDataTransaction} = this.state; + if(filteredDataTransaction) { + const dataRes = filteredDataTransaction || []; const dataExport = []; dataRes.map((val, index) => { let row = {}; - if (this.state.role_name === 'Super Admin') { - row.Company = val.join_first_company_name; - } - row.Nama = val.name; - row.Deskripsi = val.description; + row.Company = val.join_first_company_name; + row["Type Paket"] = val.type_paket === "" ? "Enterprise" : val.type_paket; + row["Expired Date"] = moment(val.exp_ospro).format("DD-MM-YYYY"); + row.Storage = parseFloat(val.size) + " MB"; + row["Total Project"] = val.project_total + " Project"; dataExport.push(row); }) this.setState({ dataExport: dataExport }, () => { @@ -370,52 +282,38 @@ class index extends Component { exportExcel = () => { const dataExcel = this.state.dataExport || []; - const fileName = "Data Project Role.xlsx"; + const fileName = "Data Transaksi.xlsx"; const ws = XLSX.utils.json_to_sheet(dataExcel); const wb = XLSX.utils.book_new(); - XLSX.utils.book_append_sheet(wb, ws, 'Data Project Role'); + XLSX.utils.book_append_sheet(wb, ws, 'Data Transaksi'); XLSX.writeFile(wb, fileName); } + filterDataLimitasi = (transaction) => { + const { dataLimit } = this.state; + const filteredTransaction = transaction.map(dataParam => { + const matchingData = dataLimit.find(data => dataParam.join_first_company_name === data.company_name); + return { + ...dataParam, + ...matchingData || {} + }; + }); + this.setState({ filteredDataTransaction: filteredTransaction }); + } + + render() { - const { t } = this.props; - const { dataTable, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipEdit, tooltipDelete, tooltipMenu } = this.state - let noSeq = 0; + const { filteredDataTransaction, openDialog, currentPage, rowsPerPage, totalPage, search } = this.state return (
- this.setState({ alertDelete: false, idDelete: 0 })} - focusCancelBtn - > - {this.props.t('deleteMsg')} - - this.setState({ alertNotDelete: false })} - > - Data project role tidak dapat di hapus!! - this.toggleAddDialog} - typeDialog={this.state.typeDialog} dataEdit={this.state.dataEdit} showDialog={showDialog => this.showChildDialog = showDialog} - dataHs={this.state.dataIdHo} - company_id={this.state.company_id} + typeDialog={this.state.typeDialog} role_name={this.state.role_name} token={this.state.token} /> @@ -427,14 +325,8 @@ class index extends Component { - - { - checkActMenup('/roles', 'create') ? - - : - null - } + + @@ -447,7 +339,7 @@ class index extends Component { rowKey="id" size="small" columns={this.columns} - dataSource={dataTable} + dataSource={filteredDataTransaction} pagination={false} bordered={false} />