ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix(transaction): merge limit user to transaction management feature

pull/1/head
Watiah11 8 months ago
parent
ee1417f75c
commit
a50f9b93e9
2 changed files with 164 additions and 305 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 147
      src/views/Master/MasterTransaction/DialogForm.js
  2. 266
      src/views/Master/MasterTransaction/index.js

147
src/views/Master/MasterTransaction/DialogForm.js
Unescape View File

@ -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
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,13 +68,19 @@ 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;
}
}
@ -93,93 +88,65 @@ class DialogForm extends Component {
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 (
<Form>
{
this.state.role_name === 'Super Admin' && (
<FormGroup>
<Label className="capitalize">Assign Company Project<span style={{ color: "red" }}>*</span></Label>
<FormGroup>
<Label className="capitalize">Type Paket<span style={{ color: "red" }}>*</span></Label>
<Select
showSearch
filterOption={(inputValue, option) =>
option.children.toLowerCase().includes(inputValue.toLowerCase())
}
value={this.state.scompany_id}
defaultValue={this.state.scompany_id}
onChange={this.onChangeCompanyProject}
style={{ width: "100%" }}
>
{this.state.companyList.map((res) => (
<Option key={res.id} value={res.id}>
{res.company_name}
</Option>
))}
value={type_paket === "" ? "Enterprise" : type_paket}
defaultValue={type_paket}
onChange={this.onChangeTypePaket}
style={{ width: "100%" }}>
<Option key={1} value="Free">Free</Option>
<Option key={2} value="Basic">Basic</Option>
<Option key={3} value="">Enterprise</Option>
</Select>
</FormGroup>
)
}
<FormGroup>
<Label>{this.props.t('Type Paket')}</Label>
<Input type="text" value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} placeholder={this.props.t('inputName')} />
</FormGroup>
<FormGroup>
<Label className="capitalize" style={{ fontWeight: "bold" }}>
Expired Date<span style={{ color: "red" }}>*</span>
</Label>
{/* <DatePicker
// disabledDate={(current) => {
// 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;
// }}
<Label className="capitalize">Expired Date<span style={{ color: "red" }}>*</span></Label>
<DatePicker
disabledDate={(current) => {
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}
/>
</FormGroup>
</Form>
)
@ -188,7 +155,7 @@ class DialogForm extends Component {
render() {
return (
<Modal isOpen={this.props.openDialog} toggle={this.props.toggleDialog}>
<ModalHeader toggle={this.props.closeDialog}>{this.props.typeDialog == "Save" ? "Tambah" : "Edit"} {this.props.t('Transaksi')}</ModalHeader>
<ModalHeader toggle={this.props.closeDialog}>{this.props.typeDialog} Transaction</ModalHeader>
<ModalBody>
{this.renderForm()}
</ModalBody>

266
src/views/Master/MasterTransaction/index.js
Unescape View File

@ -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 || ''}`,
@ -66,27 +50,11 @@ class index extends Component {
key: 'x',
className: 'nowrap',
render: (text, record) => <>
<Tooltip title={this.props.t('delete')}>
<i className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => this.handleDelete(text.id)}></i>
{/* {
checkActMenup('/product-transaction', 'delete') ?
<i className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => this.handleDelete(text.id)}></i>
:
null
} */}
</Tooltip>
<Tooltip title={this.props.t('edit')}>
<i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(text)}></i>
{/* {
checkActMenup('/product-transaction', 'update') ?
<i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(text)}></i>
:
null
} */}
</Tooltip>
</>,
},
...(this.state.role_name === 'Super Admin' ? [
{
title: "Company Name",
dataIndex: "join_first_company_name",
@ -94,8 +62,7 @@ class index extends Component {
render: (text, record) => {
return <span>{ record.join_first_company_name }</span>;
}
}] : [])
,
},
{ title: 'Type Paket', dataIndex: 'type_paket', key: 'type_paket', className: "nowrap",
render: (text,record) => {
return <span>{ !["Basic","Free"].includes(record.type_paket) ? 'Enterprise' : record.type_paket}</span>
@ -107,16 +74,26 @@ class index extends Component {
return <span>{ moment(record.exp_ospro).format('DD MMMM, YYYY') }</span>;
}
},
{ title: "Storage", dataIndex: 'size', key: 'size',
render: (text, record) => {
return <span>{ record.size } MB</span>;
}
},
{ title: "Total Project", dataIndex: 'project_total', key: 'project_total',
render: (text, record) => {
return <span>{ record.project_total } Project</span>;
}
},
];
}
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);
this.saveTransaction(data);
} else if (type === "edit") {
this.editRole(data);
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) => {
saveTransaction = async (data) => {
const formData = {
name: data.name,
description: data.description,
type_paket: data.type_paket,
exp_ospro : data.ExpiredDateOspro,
company_id: data.company_id
}
const result = await axios.post(PROJECT_ROLE_ADD, formData, this.state.config)
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.getDataTransaction();
NotificationManager.success(`Data project role berhasil ditambah`, 'Success!!');
this.getDataRoles();
NotificationManager.success(`Data role berhasil ditambahkan`, 'Success!!');
} else {
NotificationManager.error(`${result.data.message}`, 'Failed!!');
NotificationManager.error(`Data role gagal ditambahkan`, 'Failed!!');
}
}
editRole = async (data) => {
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["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 (
<div>
<NotificationContainer />
<SweetAlert
show={this.state.alertDelete}
warning
showCancel
confirmBtnText="Delete"
confirmBtnBsStyle="danger"
title={this.props.t('deleteConfirm')}
onConfirm={this.onConfirmDelete}
onCancel={() => this.setState({ alertDelete: false, idDelete: 0 })}
focusCancelBtn
>
{this.props.t('deleteMsg')}
</SweetAlert>
<SweetAlert
show={this.state.alertNotDelete}
warning
confirmBtnText="Can't Delete"
confirmBtnBsStyle="danger"
title="Data can't be delete!"
onConfirm={() => this.setState({ alertNotDelete: false })}
>
Data project role tidak dapat di hapus!!
</SweetAlert>
<DialogForm
openDialog={openDialog}
closeDialog={this.handleCloseDialog}
toggleDialog={() => 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 {
<Input onChange={this.handleSearch} value={search} type="text" name="search" id="search" placeholder={this.props.t('search')} />
</Col>
<Col>
<Tooltip title={this.props.t('rolesAdd')}>
{
checkActMenup('/roles', 'create') ?
<Button Button id="TooltipTambah" color="success" onClick={() => this.handleOpenDialog('Save')}><i className="fa fa-plus"></i>
</Button>
:
null
}
<Tooltip title="Transaction Add">
<Button Button id="TooltipTambah" color="success" onClick={() => this.handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
</Tooltip>
<Tooltip title={this.props.t('exportExcel')}>
<Button style={{ marginLeft: "5px" }} id="TooltipExport" color="primary" onClick={() => this.handleExportExcel()}><i className="fa fa-print"></i></Button>
@ -447,7 +339,7 @@ class index extends Component {
rowKey="id"
size="small"
columns={this.columns}
dataSource={dataTable}
dataSource={filteredDataTransaction}
pagination={false}
bordered={false}
/>

Write Preview
Loading…
Cancel
Save