Commit 8f79221a authored by EKSAD's avatar EKSAD

Merge branch 'master' of http://103.44.149.204/d.arizona/tia-dev into riri

parents 291a1f4f 9aa6dd57
...@@ -196,6 +196,7 @@ const create = (type = "") => { ...@@ -196,6 +196,7 @@ const create = (type = "") => {
const checkUploadMB = (body) => api.post('transaction/master_budget/check_import', body) const checkUploadMB = (body) => api.post('transaction/master_budget/check_import', body)
const uploadMasterBudget = (body) => api.post('transaction/master_budget/import_master_budget', body) const uploadMasterBudget = (body) => api.post('transaction/master_budget/import_master_budget', body)
const validateSubmitReport = (body) => api.post('transaction/master_budget/validate_save', body) const validateSubmitReport = (body) => api.post('transaction/master_budget/validate_save', body)
const getMonthTransaction = () => api.get('transaction/get_default_month')
const getOpetratingIndID = (body) => api.post('transaction/get_operating_indicator_id', body) const getOpetratingIndID = (body) => api.post('transaction/get_operating_indicator_id', body)
const getAllOperatingInd = (body) => api.post('transaction/get_all_operating_indicator_report', body) const getAllOperatingInd = (body) => api.post('transaction/get_all_operating_indicator_report', body)
...@@ -315,6 +316,7 @@ const create = (type = "") => { ...@@ -315,6 +316,7 @@ const create = (type = "") => {
getMasterBudgetAtt, getMasterBudgetAtt,
uploadAttachment, uploadAttachment,
getPeriodeTransaction, getPeriodeTransaction,
getMonthTransaction,
getRevision, getRevision,
deleteAttachment, deleteAttachment,
getDetailReportMB, getDetailReportMB,
......
...@@ -81,7 +81,7 @@ export default class FixedAssetsMovement extends Component { ...@@ -81,7 +81,7 @@ export default class FixedAssetsMovement extends Component {
item.formula, item.formula,
item.level, item.level,
item.description, item.description,
item.fixed_asset_movement.total_actual_before, item.fixed_asset_movement.total_actual_before === null ? "0" : item.fixed_asset_movement.total_actual_before === "" ? "0" : item.fixed_asset_movement.total_actual_before,
item.fixed_asset_movement.january, item.fixed_asset_movement.january,
item.fixed_asset_movement.february, item.fixed_asset_movement.february,
item.fixed_asset_movement.march, item.fixed_asset_movement.march,
...@@ -115,7 +115,7 @@ export default class FixedAssetsMovement extends Component { ...@@ -115,7 +115,7 @@ export default class FixedAssetsMovement extends Component {
item.formula, item.formula,
item.level, item.level,
item.description, item.description,
item.fixed_asset_movement.total_actual_before, item.fixed_asset_movement.total_actual_before === null ? "0" : item.fixed_asset_movement.total_actual_before === "" ? "0" : item.fixed_asset_movement.total_actual_before,
item.fixed_asset_movement.january, item.fixed_asset_movement.january,
item.fixed_asset_movement.february, item.fixed_asset_movement.february,
item.fixed_asset_movement.march, item.fixed_asset_movement.march,
...@@ -402,6 +402,18 @@ export default class FixedAssetsMovement extends Component { ...@@ -402,6 +402,18 @@ export default class FixedAssetsMovement extends Component {
} }
} }
} }
const handleTotal = (tableMeta) => {
let total = 0
dataTable2[tableMeta.rowIndex].map((item, index) => {
if (index >= 7 && index <= 18) {
let valItem = item == undefined || item == "" ? 0 : item
total += Number(valItem)
}
})
dataTable2[tableMeta.rowIndex][19] = total
return total
// console.log(total);
}
const handleValue = (data) => { const handleValue = (data) => {
let total = 0 let total = 0
dataTable2.map((item, index) => { dataTable2.map((item, index) => {
...@@ -535,6 +547,8 @@ export default class FixedAssetsMovement extends Component { ...@@ -535,6 +547,8 @@ export default class FixedAssetsMovement extends Component {
customBodyRender: (value, tableMeta, updateValue) => { customBodyRender: (value, tableMeta, updateValue) => {
return ( return (
<div style={{ textAlign: 'right' }}> <div style={{ textAlign: 'right' }}>
{console.log(tableMeta)}
{console.log(value)}
{tableMeta.rowData[0] === 4 ? {tableMeta.rowData[0] === 4 ?
null null
: :
...@@ -1637,29 +1651,9 @@ export default class FixedAssetsMovement extends Component { ...@@ -1637,29 +1651,9 @@ export default class FixedAssetsMovement extends Component {
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => { customBodyRender: (value, tableMeta, updateValue) => {
return ( return (
<div style={{ textAlign: 'right' }}> <div style={{ width: 96, textAlign: 'right' }}>
{tableMeta.rowData[0] === 3 ? {tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 4 ?
<div style={{ flex: 1 }}> null : tableMeta.rowData[0] === 2 ?
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
value={value}
onBlur={(event) => {
// updateValue(event.target.value)
handleChange(event.target.value, tableMeta)
console.log(dataTable2)
}}
/>
}
/>
</div> :
tableMeta.rowData[0] === 5 ?
<span style={{ fontSize: 12, textAlign: 'right' }}> <span style={{ fontSize: 12, textAlign: 'right' }}>
<NumberFormat <NumberFormat
thousandSeparator={true} thousandSeparator={true}
...@@ -1669,48 +1663,17 @@ export default class FixedAssetsMovement extends Component { ...@@ -1669,48 +1663,17 @@ export default class FixedAssetsMovement extends Component {
disabled={true} disabled={true}
value={handleValue(tableMeta)} value={handleValue(tableMeta)}
/> />
</span> </span> :
: <span style={{ fontSize: 12, textAlign: 'right' }}>
tableMeta.rowData[0] === 4 ? <NumberFormat
null thousandSeparator={true}
: style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
tableMeta.rowData[0] === 6 ? type="text"
// <NumberFormat placeholder=""
// thousandSeparator={true} disabled={true}
// style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }} value={handleTotal(tableMeta)}
// type="text" />
// placeholder="" </span>}
// disabled={true}
// value={handleFormula(value, tableMeta)}
// />
null
:
tableMeta.rowData[0] === 5 ?
// <NumberFormat
// thousandSeparator={true}
// style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
// type="text"
// placeholder=""
// disabled={true}
// value={handleFormula(value, tableMeta)}
// />
null
:
tableMeta.rowData[0] === 1 ?
// value === "" ?
// null :
// <NumberFormat
// thousandSeparator={true}
// style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
// type="text"
// placeholder=""
// disabled={true}
// value={Number(value)}
// />
null
:
null
}
</div> </div>
) )
} }
......
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -63,6 +63,7 @@ export default class getAllDocument extends Component { ...@@ -63,6 +63,7 @@ export default class getAllDocument extends Component {
item.document_name, item.document_name,
item.description, item.description,
item.company_name, item.company_name,
item.document_month,
item.document_periode, item.document_periode,
item.document_type, item.document_type,
String(Number(item.document_size) / 1000 + ' KB'), String(Number(item.document_size) / 1000 + ' KB'),
...@@ -200,7 +201,6 @@ export default class getAllDocument extends Component { ...@@ -200,7 +201,6 @@ export default class getAllDocument extends Component {
filter: false, filter: false,
sort: false, sort: false,
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
console.log(tableMeta)
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{/* {this.state.btnedit && <span> */} {/* {this.state.btnedit && <span> */}
...@@ -258,6 +258,12 @@ export default class getAllDocument extends Component { ...@@ -258,6 +258,12 @@ export default class getAllDocument extends Component {
} }
} }
}, "File Name", "Description", "Company Name", }, "File Name", "Description", "Company Name",
{
name: "Monthly",
options: {
display: String(this.props.data.value).includes('Manual Book TIA') ? false : true
}
},
{ {
name: "Period", name: "Period",
options: { options: {
......
...@@ -29,6 +29,8 @@ export default class CreateManagementDoc extends Component { ...@@ -29,6 +29,8 @@ export default class CreateManagementDoc extends Component {
msgErrorDocument: '', msgErrorDocument: '',
listPeriode: null, listPeriode: null,
periode: null, periode: null,
listMonth: null,
monthId: null,
description: '', description: '',
errorDesc: false, errorDesc: false,
msgErrorDesc: '', msgErrorDesc: '',
...@@ -46,6 +48,7 @@ export default class CreateManagementDoc extends Component { ...@@ -46,6 +48,7 @@ export default class CreateManagementDoc extends Component {
this.getDataCompany() this.getDataCompany()
this.getDataDocument() this.getDataDocument()
this.getPeriode() this.getPeriode()
this.getMonth()
} }
getDataCompany() { getDataCompany() {
...@@ -85,13 +88,13 @@ export default class CreateManagementDoc extends Component { ...@@ -85,13 +88,13 @@ export default class CreateManagementDoc extends Component {
} }
getDataDocument() { getDataDocument() {
let payload = { // let payload = {
"setting_group_id": 7, // "setting_group_id": 7,
"setting_type_id": 167, // "setting_type_id": 167,
"company_id": 0 // "company_id": 0
} // }
api.create().getDocumentCategory(payload).then(response => { api.create().getDocumentCategory().then(response => {
console.log(response); console.log(response);
if (response.data) { if (response.data) {
if (response.data.status == 'success') { if (response.data.status == 'success') {
...@@ -126,6 +129,7 @@ export default class CreateManagementDoc extends Component { ...@@ -126,6 +129,7 @@ export default class CreateManagementDoc extends Component {
getPeriode() { getPeriode() {
api.create().getPeriodeTransaction().then(response => { api.create().getPeriodeTransaction().then(response => {
let dateNow = new Date let dateNow = new Date
console.log(dateNow)
let year = format(dateNow, 'yyyy') let year = format(dateNow, 'yyyy')
if (response.data) { if (response.data) {
if (response.data.status === "success") { if (response.data.status === "success") {
...@@ -146,6 +150,32 @@ export default class CreateManagementDoc extends Component { ...@@ -146,6 +150,32 @@ export default class CreateManagementDoc extends Component {
}) })
} }
getMonth(){
api.create().getMonthTransaction().then(response => {
let dateNow = new Date
console.log(dateNow)
// let bulan = format(dateNow, 'MMMM')
if (response.data) {
if (response.data.status === "success") {
let data = response.data.data
let monthData = data.map((item) => {
return {
month_id: item.month_id,
month_name: item.month_name
}
})
let defaultProps = {
options: monthData,
getOptionLabel: (option) => option.month_name,
};
// let index = data.sort((a, b) => a - b).findIndex((val) => val == bulan)
// this.setState({ listMonth: defaultProps, month: index == -1 ? monthData[0] : monthData[index] })
this.setState({ listMonth: defaultProps })
}
}
})
}
clearMessage() { clearMessage() {
this.setState({ this.setState({
errorPerusahaan: false, errorPerusahaan: false,
...@@ -171,11 +201,18 @@ export default class CreateManagementDoc extends Component { ...@@ -171,11 +201,18 @@ export default class CreateManagementDoc extends Component {
} }
validasi() { validasi() {
console.log(this.state.monthId.month_id)
if (R.isNil(this.state.getPerusahaan)) { if (R.isNil(this.state.getPerusahaan)) {
this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company Cannot be Empty' }) this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company Cannot be Empty' })
} else if (R.isNil(this.state.getDocument)) { } else if (R.isNil(this.state.getDocument)) {
this.setState({ errorDocument: true, msgErrorDocument: 'Category Cannot be Empty' }) this.setState({ errorDocument: true, msgErrorDocument: 'Category Cannot be Empty' })
} else if (R.isNil(this.state.file)) { }
// else if (R.isNil(this.state.periode)) {
// this.setState({ errorPeriode: true, msgErrorPeriode: 'Period Cannot be Empty' })
// } else if (R.isNil(this.state.monthId)) {
// this.setState({ errorMonth: true, msgErrorMonth: 'Month Cannot be Empty' })
// }
else if (R.isNil(this.state.file)) {
this.setState({ alert: true, messageAlert: 'File Cannot be Empty', tipeAlert: 'warning' }) this.setState({ alert: true, messageAlert: 'File Cannot be Empty', tipeAlert: 'warning' })
} else { } else {
const formData = new FormData(); const formData = new FormData();
...@@ -183,6 +220,7 @@ export default class CreateManagementDoc extends Component { ...@@ -183,6 +220,7 @@ export default class CreateManagementDoc extends Component {
formData.append("companyId", this.state.getPerusahaan.company_id); formData.append("companyId", this.state.getPerusahaan.company_id);
formData.append("settingId", this.state.getDocument.document_category_id); formData.append("settingId", this.state.getDocument.document_category_id);
formData.append("documentPeriode", this.state.periode.periode); formData.append("documentPeriode", this.state.periode.periode);
formData.append("documentMonth", this.state.monthId.month_id);
formData.append("description", this.state.description); formData.append("description", this.state.description);
formData.append("extension", this.state.fileType); formData.append("extension", this.state.fileType);
this.setState({ formData }, ()=> { this.setState({ formData }, ()=> {
...@@ -243,20 +281,20 @@ export default class CreateManagementDoc extends Component { ...@@ -243,20 +281,20 @@ export default class CreateManagementDoc extends Component {
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete <Autocomplete
{...this.state.listPeriode} {...this.state.listMonth}
// debug // debug
clearOnEscape clearOnEscape
id="periode" id="month"
onChange={(event, newInputValue) => this.setState({ periode: newInputValue }, () => { onChange={(event, newInputValue) => this.setState({ monthId: newInputValue }, () => {
this.clearMessage() this.clearMessage()
})} })}
style={{ width: 250 }} style={{ width: 250 }}
renderInput={(params) => renderInput={(params) =>
<TextField {...params} label="Period" margin="normal" style={{ marginTop: 7 }} <TextField {...params} label="Monthly" margin="normal" style={{ marginTop: 7 }}
InputProps={{ ...params.InputProps, style: { fontSize: 11 } }} InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }} InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
/>} />}
value={this.state.periode} value={this.state.monthId}
/> />
</div> </div>
</div> </div>
...@@ -278,6 +316,25 @@ export default class CreateManagementDoc extends Component { ...@@ -278,6 +316,25 @@ export default class CreateManagementDoc extends Component {
value={this.state.getDocument} value={this.state.getDocument}
/> />
</div> </div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.listPeriode}
// debug
clearOnEscape
id="periode"
onChange={(event, newInputValue) => this.setState({ periode: newInputValue }, () => {
this.clearMessage()
})}
style={{ width: 250 }}
renderInput={(params) =>
<TextField {...params} label="Period" margin="normal" style={{ marginTop: 7 }}
InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
/>}
value={this.state.periode}
/>
</div>
</div> </div>
</div> </div>
<div style={{ paddingLeft: 30, paddingRight: 30 }}> <div style={{ paddingLeft: 30, paddingRight: 30 }}>
......
...@@ -29,6 +29,8 @@ export default class EditManagementDoc extends Component { ...@@ -29,6 +29,8 @@ export default class EditManagementDoc extends Component {
msgErrorDocument: '', msgErrorDocument: '',
listPeriode: null, listPeriode: null,
periode: null, periode: null,
listMonth: null,
monthId: null,
description: '', description: '',
errorDesc: false, errorDesc: false,
msgErrorDesc: '', msgErrorDesc: '',
...@@ -38,7 +40,10 @@ export default class EditManagementDoc extends Component { ...@@ -38,7 +40,10 @@ export default class EditManagementDoc extends Component {
messageAlert: '', messageAlert: '',
fileType: '', fileType: '',
konfirmasi: false, konfirmasi: false,
docId:'' docId: '',
document_name: "",
document_size: 0,
loadUpload: false
} }
} }
...@@ -48,7 +53,7 @@ export default class EditManagementDoc extends Component { ...@@ -48,7 +53,7 @@ export default class EditManagementDoc extends Component {
} }
} }
getDetailDoc(){ getDetailDoc() {
api.create().getDetailDocument(this.props.idoc).then(response => { api.create().getDetailDocument(this.props.idoc).then(response => {
console.log(response) console.log(response)
if (response.data) { if (response.data) {
...@@ -61,15 +66,21 @@ export default class EditManagementDoc extends Component { ...@@ -61,15 +66,21 @@ export default class EditManagementDoc extends Component {
categoryId: data.setting_id, categoryId: data.setting_id,
categoryName: data.values, categoryName: data.values,
period: data.document_periode, period: data.document_periode,
getMonthName: data.document_month,
description: data.description, description: data.description,
document_name: data.document_name,
document_size: data.document_size,
// id: data.approval_matrix_id, // id: data.approval_matrix_id,
// status: data.status, // status: data.status,
created: data.created, created: data.created,
updated: data.updated === null ? "" : data.updated updated: data.updated === null ? "" : data.updated,
loadUpload: true
}, () => { }, () => {
this.getDataCompany() this.getDataCompany()
this.getDataDocument() this.getDataDocument()
this.getPeriode()}) this.getPeriode()
this.getMonth()
})
} else { } else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => { this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) { if (response.data.message.includes("Someone Logged In")) {
...@@ -105,7 +116,7 @@ export default class EditManagementDoc extends Component { ...@@ -105,7 +116,7 @@ export default class EditManagementDoc extends Component {
getOptionLabel: (option) => option.company_name, getOptionLabel: (option) => option.company_name,
}; };
let index = typeData.findIndex((val) => val.company_id == this.state.companyId) let index = typeData.findIndex((val) => val.company_id == this.state.companyId)
this.setState({ perusahaan: typeProps, perusahaanData: response.data.data, getPerusahaan: index === -1 ? typeData[0]: typeData[index] }) this.setState({ perusahaan: typeProps, perusahaanData: response.data.data, getPerusahaan: index === -1 ? typeData[0] : typeData[index] })
} else { } else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => { this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) { if (response.data.message.includes("Someone Logged In")) {
...@@ -123,13 +134,13 @@ export default class EditManagementDoc extends Component { ...@@ -123,13 +134,13 @@ export default class EditManagementDoc extends Component {
} }
getDataDocument() { getDataDocument() {
let payload = { // let payload = {
"setting_group_id": 7, // "setting_group_id": 7,
"setting_type_id": 167, // "setting_type_id": 167,
"company_id": 0 // "company_id": 0
} // }
api.create().getDocumentCategory(payload).then(response => { api.create().getDocumentCategory().then(response => {
console.log(response); console.log(response);
if (response.data) { if (response.data) {
if (response.data.status == 'success') { if (response.data.status == 'success') {
...@@ -145,7 +156,7 @@ export default class EditManagementDoc extends Component { ...@@ -145,7 +156,7 @@ export default class EditManagementDoc extends Component {
getOptionLabel: (option) => option.document_category_name, getOptionLabel: (option) => option.document_category_name,
}; };
let index = typeData.findIndex((val) => val.document_category_id == this.state.categoryId) let index = typeData.findIndex((val) => val.document_category_id == this.state.categoryId)
this.setState({ document: typeProps, documentData: response.data.data, getDocument: index === -1 ? typeData[0]: typeData[index] }) this.setState({ document: typeProps, documentData: response.data.data, getDocument: index === -1 ? typeData[0] : typeData[index] })
} else { } else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => { this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) { if (response.data.message.includes("Someone Logged In")) {
...@@ -185,6 +196,31 @@ export default class EditManagementDoc extends Component { ...@@ -185,6 +196,31 @@ export default class EditManagementDoc extends Component {
}) })
} }
getMonth() {
api.create().getMonthTransaction().then(response => {
let dateNow = new Date
// let bulan = format(dateNow, 'MMMM')
if (response.data) {
if (response.data.status === "success") {
let data = response.data.data
let monthData = data.map((item) => {
return {
month_name: item.month_name,
month_id: item.month_id
}
})
let index = monthData.findIndex((val) => val.month_name == this.state.getMonthName)
let defaultProps = {
options: monthData,
getOptionLabel: (option) => option.month_name,
};
// let index = data.sort((a, b) => a - b).findIndex((val) => val.month_name == this.state.getMonth)
this.setState({ listMonth: defaultProps, monthId: index == -1 ? monthData[0] : monthData[index] })
}
}
})
}
clearMessage() { clearMessage() {
this.setState({ this.setState({
errorPerusahaan: false, errorPerusahaan: false,
...@@ -195,6 +231,7 @@ export default class EditManagementDoc extends Component { ...@@ -195,6 +231,7 @@ export default class EditManagementDoc extends Component {
} }
fileHandler = (event) => { fileHandler = (event) => {
console.log(event)
let fileObj = event let fileObj = event
let length = event.name.split(".").length let length = event.name.split(".").length
let fileType = event.name.split(".")[length - 1] let fileType = event.name.split(".")[length - 1]
...@@ -222,18 +259,19 @@ export default class EditManagementDoc extends Component { ...@@ -222,18 +259,19 @@ export default class EditManagementDoc extends Component {
formData.append("file", this.state.file); formData.append("file", this.state.file);
formData.append("companyId", this.state.getPerusahaan.company_id); formData.append("companyId", this.state.getPerusahaan.company_id);
formData.append("settingId", this.state.getDocument.document_category_id); formData.append("settingId", this.state.getDocument.document_category_id);
formData.append("documentMonth", this.state.monthId.month_id);
formData.append("documentPeriode", this.state.periode.periode); formData.append("documentPeriode", this.state.periode.periode);
formData.append("description", this.state.description); formData.append("description", this.state.description);
formData.append("extension", this.state.fileType); formData.append("extension", this.state.fileType);
formData.append("documentId", this.props.idoc); formData.append("documentId", this.props.idoc);
this.setState({ formData }, ()=> { this.setState({ formData }, () => {
this.props.updateDocument(this.state.formData) this.props.updateDocument(this.state.formData)
}) })
} }
} }
deleteFile(e){ deleteFile(e) {
this.setState({ file: null}) this.setState({ file: null })
} }
closeAlert() { closeAlert() {
...@@ -243,171 +281,226 @@ export default class EditManagementDoc extends Component { ...@@ -243,171 +281,226 @@ export default class EditManagementDoc extends Component {
render() { render() {
return ( return (
<div> <div>
<div className="test app-popup-show"> <div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}> <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
<div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}> <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}> <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title"> <div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Edit</span> <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Edit</span>
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
<button
type="button"
className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()}
>
<img src={Images.close} />
</button>
</div> </div>
</div> </div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
<button
type="button"
className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()}
>
<img src={Images.close} />
</button>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20, paddingTop: 20 }}> <div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20, paddingTop: 20 }}>
<div className="column-1"> <div className="column-1">
<div style={{ padding: 10, borderRadius: 5 }}> <div style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete <Autocomplete
{...this.state.perusahaan} {...this.state.perusahaan}
debug debug
// clearOnEscape // clearOnEscape
id="tipe" id="tipe"
onChange={(event, newInputValue) => this.setState({ getPerusahaan: newInputValue }, () => this.clearMessage())} onChange={(event, newInputValue) => this.setState({ getPerusahaan: newInputValue }, () => this.clearMessage())}
renderInput={(params) => renderInput={(params) =>
<TextField {...params} <TextField {...params}
error={this.state.errorPerusahaan} error={this.state.errorPerusahaan}
helperText={this.state.msgErrorPerusahaan} helperText={this.state.msgErrorPerusahaan}
InputProps={{ ...params.InputProps, style: { fontSize: 11 } }} InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }} InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
label="Company Name" />} label="Company Name" />}
value={this.state.getPerusahaan} value={this.state.getPerusahaan}
/> />
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.listMonth}
// debug
clearOnEscape
id="month"
onChange={(event, newInputValue) => this.setState({ monthId: newInputValue }, () => {
this.clearMessage()
})}
style={{ width: 250 }}
renderInput={(params) =>
<TextField {...params} label="Monthly" margin="normal" style={{ marginTop: 7 }}
InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
/>}
value={this.state.monthId}
/>
</div>
</div> </div>
<div className="column-2">
<div style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.document}
// debug
clearOnEscape
id="tipe"
onChange={(event, newInputValue) => this.setState({ getDocument: newInputValue }, () => this.clearMessage())}
renderInput={(params) =>
<TextField {...params}
error={this.state.errorDocument}
helperText={this.state.msgErrorDocument}
InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
label="Category" />}
value={this.state.getDocument}
/>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete <Autocomplete
{...this.state.listPeriode} {...this.state.listPeriode}
// debug // debug
clearOnEscape clearOnEscape
id="periode" id="periode"
onChange={(event, newInputValue) => this.setState({ periode: newInputValue }, () => { onChange={(event, newInputValue) => this.setState({ periode: newInputValue }, () => {
this.clearMessage() this.clearMessage()
})} })}
style={{ width: 250 }} style={{ width: 250 }}
renderInput={(params) => renderInput={(params) =>
<TextField {...params} label="Period" margin="normal" style={{ marginTop: 7 }} <TextField {...params} label="Period" margin="normal" style={{ marginTop: 7 }}
InputProps={{ ...params.InputProps, style: { fontSize: 11 } }} InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }} InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
/>} />}
value={this.state.periode} value={this.state.periode}
/> />
</div>
</div> </div>
</div> </div>
<div className="column-2"> <div style={{ paddingLeft: 30, paddingRight: 30 }}>
<div style={{ padding: 10, borderRadius: 5 }}> {this.state.loadUpload && (
<Autocomplete <UploadFile
{...this.state.document} type={this.state.uploadStatus}
// debug percentage={this.state.percentage}
clearOnEscape result={this.state.result}
id="tipe" acceptedFiles={["xls", "xlsx", "pdf", "PDF"]}
onChange={(event, newInputValue) => this.setState({ getDocument: newInputValue }, () => this.clearMessage())} intent={"management"}
renderInput={(params) => onHandle={(dt) => {
<TextField {...params} this.fileHandler(dt)
error={this.state.errorDocument} this.setState({ uploadStatus: 'idle', percentage: '0' })
helperText={this.state.msgErrorDocument} }}
InputProps={{ ...params.InputProps, style: { fontSize: 11 } }} onDelete={(e) => {
InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }} this.deleteFile(e)
label="Category" />} }}
value={this.state.getDocument} onUpload={() => alert('sukses')}
value={this.state.file}
docSize={this.state.document_size}
docName={this.state.document_name}
/> />
</div> )}
</div> </div>
</div> <div className="margin-top-10px" style={{ paddingLeft: 30, paddingRight: 30, borderRadius: 5, paddingBottom: 20 }}>
<div style={{ paddingLeft: 30, paddingRight: 30 }}> <TextField
<UploadFile style={{ width: '100%' }}
type={this.state.uploadStatus} id="description"
percentage={this.state.percentage} label="Description"
result={this.state.result} value={this.state.description}
acceptedFiles={["xls", "xlsx", "pdf", "PDF"]} inputProps={{
intent={"management"} min: 0,
onHandle={(dt) => { style: {
this.fileHandler(dt) fontSize: 11
this.setState({ uploadStatus: 'idle', percentage: '0' }) }
}} }}
onDelete={(e) => {
this.deleteFile(e)
}}
onUpload={() => alert('sukses')}
/>
</div>
<div className="margin-top-10px" style={{ paddingLeft: 30, paddingRight: 30, borderRadius: 5, paddingBottom: 20 }}>
<TextField
style={{ width: '100%' }}
id="description"
label="Description"
value={this.state.description}
inputProps={{
min: 0,
style: {
fontSize: 11
}
}}
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
color: '#7e8085' color: '#7e8085'
} }
}} }}
name="Description" name="Description"
onChange={(e) => { onChange={(e) => {
this.setState({ this.setState({
description: e.target.value description: e.target.value
}) })
this.clearMessage() this.clearMessage()
}} }}
error={this.state.errorDesc} error={this.state.errorDesc}
helperText={this.state.msgErrorDesc} helperText={this.state.msgErrorDesc}
>
</TextField>
</div>
<div className="margin-top-10px" style={{ paddingLeft: 30, paddingRight: 30, borderRadius: 5, paddingBottom: 20 }}>
<div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '12%' }}>Created By</Typography>
<Typography style={{ fontSize: 11 }}>: {this.state.created}</Typography>
</div>
<div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '12%' }}>Updated By</Typography>
<Typography style={{ fontSize: 11 }}>: {this.state.updated == - null ? "" : this.state.updated}</Typography>
</div>
</div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}>
<button
type="button"
onClick={() => this.props.onClickClose()}
> >
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> </TextField>
<span style={{ color: '#354960', fontSize: 11 }}>Cancel</span>
</div>
</button>
</div> </div>
<div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> <div className="margin-top-10px" style={{ paddingLeft: 30, paddingRight: 30, borderRadius: 5, paddingBottom: 20 }}>
<button <TextField
type="button" style={{ width: '100%' }}
onClick={() => this.validasi()} id="description"
label="Description"
value={this.state.description}
inputProps={{
min: 0,
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
name="Description"
onChange={(e) => {
this.setState({
description: e.target.value
})
this.clearMessage()
}}
error={this.state.errorDesc}
helperText={this.state.msgErrorDesc}
> >
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> </TextField>
<span style={{ color: '#fff', fontSize: 11 }}>Save</span> </div>
</div> <div className="margin-top-10px" style={{ paddingLeft: 30, paddingRight: 30, borderRadius: 5, paddingBottom: 20 }}>
</button> <div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '12%' }}>Created By</Typography>
<Typography style={{ fontSize: 11 }}>: {this.state.created}</Typography>
</div>
<div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '12%' }}>Updated By</Typography>
<Typography style={{ fontSize: 11 }}>: {this.state.updated == - null ? "" : this.state.updated}</Typography>
</div>
</div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}>
<button
type="button"
onClick={() => this.props.onClickClose()}
>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Cancel</span>
</div>
</button>
</div>
<div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
<button
type="button"
onClick={() => this.validasi()}
>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Save</span>
</div>
</button>
</div>
</div> </div>
</div> </div>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
</div> </div>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
</div>
</div> </div>
) )
} }
......
...@@ -45,6 +45,13 @@ class Upload extends Component { ...@@ -45,6 +45,13 @@ class Upload extends Component {
} }
} }
componentDidMount() {
if (this.props.docName !== undefined && this.props.docName !== "") {
console.log('masuk');
this.setState({ docName: this.props.docName, docSize: this.props.docSize, inputVisible: false, editVisible: true })
}
}
onDrop = (acceptedFiles) => { onDrop = (acceptedFiles) => {
const formData = new FormData() const formData = new FormData()
let length = acceptedFiles[0].name.split(".").length let length = acceptedFiles[0].name.split(".").length
...@@ -116,6 +123,7 @@ class Upload extends Component { ...@@ -116,6 +123,7 @@ class Upload extends Component {
if (this.props.intent === "management") { if (this.props.intent === "management") {
this.setState({ this.setState({
previewVisible: false, previewVisible: false,
editVisible: false,
inputVisible: true, inputVisible: true,
uploadProgress: false, uploadProgress: false,
percentage: '0' percentage: '0'
...@@ -124,6 +132,7 @@ class Upload extends Component { ...@@ -124,6 +132,7 @@ class Upload extends Component {
} else { } else {
this.setState({ this.setState({
previewVisible: false, previewVisible: false,
editVisible: false,
inputVisible: true, inputVisible: true,
uploadProgress: false, uploadProgress: false,
percentage: '0' percentage: '0'
...@@ -187,6 +196,29 @@ class Upload extends Component { ...@@ -187,6 +196,29 @@ class Upload extends Component {
</div> </div>
: null} : null}
{/* edit */}
{this.state.editVisible ?
<div className="u-p-file u-p-preview">
<div className="display-flex-normal">
<div className="width width-35px">
<button
onClick={this.onRemove}
className="btn btn-small-circle btn-black"
type="button">
<img src={Images.close} />
</button>
</div>
<div className="width width-full margin-left-10px">
<div className="txt-site txt-12 txt-white txt-bold">
{this.state.docName}
</div>
<div className="txt-site txt-11 txt-white txt-thin">
{this.state.docSize} KB
</div>
</div>
</div>
</div>
: null}
{/* file */} {/* file */}
{this.state.previewVisible {this.state.previewVisible
? ?
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment