Skip to content

T
Tia-dev
Commit d0695bc5 authored by Rifka Kurnia Irfiana's avatar Rifka Kurnia Irfiana
Browse files
Options

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

parents 9e511e14 6bceff12
Hide whitespace changes
Inline Side-by-side
Showing with 308 additions and 111 deletions
.babelrc 0 → 100644
View file @ d0695bc5
{
"presets": ["@babel/preset-react", "@babel/preset-env"],
"plugins": ["emotion"]
}
\ No newline at end of file
package-lock.json
View file @ d0695bc5
...@@ -1191,11 +1191,94 @@ ...@@ -1191,11 +1191,94 @@
} }
} }
}, },
"@emotion/cache": {
"version": "10.0.29",
"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
"integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
"requires": {
"@emotion/sheet": "0.9.4",
"@emotion/stylis": "0.8.5",
"@emotion/utils": "0.11.3",
"@emotion/weak-memoize": "0.2.5"
}
},
"@emotion/core": {
"version": "10.0.35",
"resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.35.tgz",
"integrity": "sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw==",
"requires": {
"@babel/runtime": "^7.5.5",
"@emotion/cache": "^10.0.27",
"@emotion/css": "^10.0.27",
"@emotion/serialize": "^0.11.15",
"@emotion/sheet": "0.9.4",
"@emotion/utils": "0.11.3"
}
},
"@emotion/css": {
"version": "10.0.27",
"resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz",
"integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==",
"requires": {
"@emotion/serialize": "^0.11.15",
"@emotion/utils": "0.11.3",
"babel-plugin-emotion": "^10.0.27"
}
},
"@emotion/hash": { "@emotion/hash": {
"version": "0.8.0", "version": "0.8.0",
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
"integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
}, },
"@emotion/memoize": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
},
"@emotion/serialize": {
"version": "0.11.16",
"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
"integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
"requires": {
"@emotion/hash": "0.8.0",
"@emotion/memoize": "0.7.4",
"@emotion/unitless": "0.7.5",
"@emotion/utils": "0.11.3",
"csstype": "^2.5.7"
},
"dependencies": {
"csstype": {
"version": "2.6.13",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.13.tgz",
"integrity": "sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A=="
}
}
},
"@emotion/sheet": {
"version": "0.9.4",
"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
"integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
},
"@emotion/stylis": {
"version": "0.8.5",
"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
},
"@emotion/unitless": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
},
"@emotion/utils": {
"version": "0.11.3",
"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
"integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
},
"@emotion/weak-memoize": {
"version": "0.2.5",
"resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
"integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
},
"@hapi/address": { "@hapi/address": {
"version": "2.1.4", "version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
...@@ -2955,6 +3038,23 @@ ...@@ -2955,6 +3038,23 @@
"object.assign": "^4.1.0" "object.assign": "^4.1.0"
} }
}, },
"babel-plugin-emotion": {
"version": "10.0.33",
"resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz",
"integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==",
"requires": {
"@babel/helper-module-imports": "^7.0.0",
"@emotion/hash": "0.8.0",
"@emotion/memoize": "0.7.4",
"@emotion/serialize": "^0.11.16",
"babel-plugin-macros": "^2.0.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"convert-source-map": "^1.5.0",
"escape-string-regexp": "^1.0.5",
"find-root": "^1.1.0",
"source-map": "^0.5.7"
}
},
"babel-plugin-istanbul": { "babel-plugin-istanbul": {
"version": "5.2.0", "version": "5.2.0",
"resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz", "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz",
...@@ -3033,6 +3133,11 @@ ...@@ -3033,6 +3133,11 @@
"resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz", "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz",
"integrity": "sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA==" "integrity": "sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA=="
}, },
"babel-plugin-syntax-jsx": {
"version": "6.18.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
"integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
},
"babel-plugin-syntax-object-rest-spread": { "babel-plugin-syntax-object-rest-spread": {
"version": "6.13.0", "version": "6.13.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
...@@ -6623,6 +6728,11 @@ ...@@ -6623,6 +6728,11 @@
"pkg-dir": "^3.0.0" "pkg-dir": "^3.0.0"
} }
}, },
"find-root": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
"integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
},
"find-up": { "find-up": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
...@@ -15658,6 +15768,14 @@ ...@@ -15658,6 +15768,14 @@
} }
} }
}, },
"react-spinners": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.9.0.tgz",
"integrity": "sha512-+x6eD8tn/aYLdxZjNW7fSR1uoAXLb9qq6TFYZR1dFweJvckcf/HfP8Pa/cy5HOvB/cvI4JgrYXTjh2Me3S6Now==",
"requires": {
"@emotion/core": "^10.0.15"
}
},
"react-to-print": { "react-to-print": {
"version": "2.9.0", "version": "2.9.0",
"resolved": "https://registry.npmjs.org/react-to-print/-/react-to-print-2.9.0.tgz", "resolved": "https://registry.npmjs.org/react-to-print/-/react-to-print-2.9.0.tgz",
......
package.json
View file @ d0695bc5
...@@ -38,6 +38,7 @@ ...@@ -38,6 +38,7 @@
"react-number-format": "^4.4.1", "react-number-format": "^4.4.1",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-scripts": "3.4.1", "react-scripts": "3.4.1",
"react-spinners": "^0.9.0",
"react-tooltip": "^4.2.8" "react-tooltip": "^4.2.8"
}, },
"scripts": { "scripts": {
......
src/container/BudgetTahunan/ProfitLoss.js
View file @ d0695bc5
...@@ -7,14 +7,14 @@ import AddIcon from '@material-ui/icons/Add'; ...@@ -7,14 +7,14 @@ import AddIcon from '@material-ui/icons/Add';
import { values } from 'ramda'; import { values } from 'ramda';
var ct = require("../../library/CustomTable"); var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable3());
const options = ct.customOptionsFixedColumn(); const options = ct.customOptionsFixedColumn();
const style = { const style = {
position: "sticky", position: "sticky",
left: 0, left: 0,
background: "white",
zIndex: 101, zIndex: 101,
background: "white",
}; };
const style2 = { const style2 = {
position: "sticky", position: "sticky",
...@@ -68,7 +68,6 @@ export default class ProfitLoss extends Component { ...@@ -68,7 +68,6 @@ export default class ProfitLoss extends Component {
item.formula, item.formula,
item.level, item.level,
item.description, item.description,
item.profit_loss.notes,
item.profit_loss.total_actual_before, item.profit_loss.total_actual_before,
item.profit_loss.january, item.profit_loss.january,
item.profit_loss.february, item.profit_loss.february,
...@@ -96,7 +95,6 @@ export default class ProfitLoss extends Component { ...@@ -96,7 +95,6 @@ export default class ProfitLoss extends Component {
i.formula, i.formula,
i.level, i.level,
i.description, i.description,
i.profit_loss.notes,
i.profit_loss.total_actual_before, i.profit_loss.total_actual_before,
i.profit_loss.january, i.profit_loss.january,
i.profit_loss.february, i.profit_loss.february,
...@@ -123,7 +121,6 @@ export default class ProfitLoss extends Component { ...@@ -123,7 +121,6 @@ export default class ProfitLoss extends Component {
val.formula, val.formula,
val.level, val.level,
val.description, val.description,
val.profit_loss.notes,
val.profit_loss.total_actual_before, val.profit_loss.total_actual_before,
val.profit_loss.january, val.profit_loss.january,
val.profit_loss.february, val.profit_loss.february,
...@@ -150,7 +147,6 @@ export default class ProfitLoss extends Component { ...@@ -150,7 +147,6 @@ export default class ProfitLoss extends Component {
items.formula, items.formula,
items.level, items.level,
items.description, items.description,
items.profit_loss.notes,
items.profit_loss.total_actual_before, items.profit_loss.total_actual_before,
items.profit_loss.january, items.profit_loss.january,
items.profit_loss.february, items.profit_loss.february,
...@@ -177,7 +173,6 @@ export default class ProfitLoss extends Component { ...@@ -177,7 +173,6 @@ export default class ProfitLoss extends Component {
itemss.formula, itemss.formula,
itemss.level, itemss.level,
itemss.description, itemss.description,
itemss.profit_loss.notes,
itemss.profit_loss.total_actual_before, itemss.profit_loss.total_actual_before,
itemss.profit_loss.january, itemss.profit_loss.january,
itemss.profit_loss.february, itemss.profit_loss.february,
...@@ -204,7 +199,6 @@ export default class ProfitLoss extends Component { ...@@ -204,7 +199,6 @@ export default class ProfitLoss extends Component {
item1.formula, item1.formula,
item1.level, item1.level,
item1.description, item1.description,
item1.profit_loss.notes,
item1.profit_loss.total_actual_before, item1.profit_loss.total_actual_before,
item1.profit_loss.january, item1.profit_loss.january,
item1.profit_loss.february, item1.profit_loss.february,
...@@ -231,7 +225,6 @@ export default class ProfitLoss extends Component { ...@@ -231,7 +225,6 @@ export default class ProfitLoss extends Component {
item2.formula, item2.formula,
item2.level, item2.level,
item2.description, item2.description,
item2.profit_loss.notes,
item2.profit_loss.total_actual_before, item2.profit_loss.total_actual_before,
item2.profit_loss.january, item2.profit_loss.january,
item2.profit_loss.february, item2.profit_loss.february,
...@@ -258,7 +251,6 @@ export default class ProfitLoss extends Component { ...@@ -258,7 +251,6 @@ export default class ProfitLoss extends Component {
item3.formula, item3.formula,
item3.level, item3.level,
item3.description, item3.description,
item3.profit_loss.notes,
item3.profit_loss.total_actual_before, item3.profit_loss.total_actual_before,
item3.profit_loss.january, item3.profit_loss.january,
item3.profit_loss.february, item3.profit_loss.february,
...@@ -285,7 +277,6 @@ export default class ProfitLoss extends Component { ...@@ -285,7 +277,6 @@ export default class ProfitLoss extends Component {
item4.formula, item4.formula,
item4.level, item4.level,
item4.description, item4.description,
item4.profit_loss.notes,
item4.profit_loss.total_actual_before, item4.profit_loss.total_actual_before,
item4.profit_loss.january, item4.profit_loss.january,
item4.profit_loss.february, item4.profit_loss.february,
...@@ -312,7 +303,6 @@ export default class ProfitLoss extends Component { ...@@ -312,7 +303,6 @@ export default class ProfitLoss extends Component {
item5.formula, item5.formula,
item5.level, item5.level,
item5.description, item5.description,
item5.profit_loss.notes,
item5.profit_loss.total_actual_before, item5.profit_loss.total_actual_before,
item5.profit_loss.january, item5.profit_loss.january,
item5.profit_loss.february, item5.profit_loss.february,
...@@ -339,7 +329,6 @@ export default class ProfitLoss extends Component { ...@@ -339,7 +329,6 @@ export default class ProfitLoss extends Component {
item6.formula, item6.formula,
item6.level, item6.level,
item6.description, item6.description,
item6.profit_loss.notes,
item6.profit_loss.total_actual_before, item6.profit_loss.total_actual_before,
item6.profit_loss.january, item6.profit_loss.january,
item6.profit_loss.february, item6.profit_loss.february,
...@@ -365,7 +354,6 @@ export default class ProfitLoss extends Component { ...@@ -365,7 +354,6 @@ export default class ProfitLoss extends Component {
item6.formula, item6.formula,
item6.level, item6.level,
item6.description, item6.description,
item6.profit_loss.notes,
item6.profit_loss.total_actual_before, item6.profit_loss.total_actual_before,
item6.profit_loss.january, item6.profit_loss.january,
item6.profit_loss.february, item6.profit_loss.february,
...@@ -393,7 +381,6 @@ export default class ProfitLoss extends Component { ...@@ -393,7 +381,6 @@ export default class ProfitLoss extends Component {
item5.formula, item5.formula,
item5.level, item5.level,
item5.description, item5.description,
item5.profit_loss.notes,
item5.profit_loss.total_actual_before, item5.profit_loss.total_actual_before,
item5.profit_loss.january, item5.profit_loss.january,
item5.profit_loss.february, item5.profit_loss.february,
...@@ -421,7 +408,6 @@ export default class ProfitLoss extends Component { ...@@ -421,7 +408,6 @@ export default class ProfitLoss extends Component {
item4.formula, item4.formula,
item4.level, item4.level,
item4.description, item4.description,
item4.profit_loss.notes,
item4.profit_loss.total_actual_before, item4.profit_loss.total_actual_before,
item4.profit_loss.january, item4.profit_loss.january,
item4.profit_loss.february, item4.profit_loss.february,
...@@ -449,7 +435,6 @@ export default class ProfitLoss extends Component { ...@@ -449,7 +435,6 @@ export default class ProfitLoss extends Component {
item3.formula, item3.formula,
item3.level, item3.level,
item3.description, item3.description,
item3.profit_loss.notes,
item3.profit_loss.total_actual_before, item3.profit_loss.total_actual_before,
item3.profit_loss.january, item3.profit_loss.january,
item3.profit_loss.february, item3.profit_loss.february,
...@@ -477,7 +462,6 @@ export default class ProfitLoss extends Component { ...@@ -477,7 +462,6 @@ export default class ProfitLoss extends Component {
item2.formula, item2.formula,
item2.level, item2.level,
item2.description, item2.description,
item2.profit_loss.notes,
item2.profit_loss.total_actual_before, item2.profit_loss.total_actual_before,
item2.profit_loss.january, item2.profit_loss.january,
item2.profit_loss.february, item2.profit_loss.february,
...@@ -505,7 +489,6 @@ export default class ProfitLoss extends Component { ...@@ -505,7 +489,6 @@ export default class ProfitLoss extends Component {
item1.formula, item1.formula,
item1.level, item1.level,
item1.description, item1.description,
item1.profit_loss.notes,
item1.profit_loss.total_actual_before, item1.profit_loss.total_actual_before,
item1.profit_loss.january, item1.profit_loss.january,
item1.profit_loss.february, item1.profit_loss.february,
...@@ -533,7 +516,6 @@ export default class ProfitLoss extends Component { ...@@ -533,7 +516,6 @@ export default class ProfitLoss extends Component {
itemss.formula, itemss.formula,
itemss.level, itemss.level,
itemss.description, itemss.description,
itemss.profit_loss.notes,
itemss.profit_loss.total_actual_before, itemss.profit_loss.total_actual_before,
itemss.profit_loss.january, itemss.profit_loss.january,
itemss.profit_loss.february, itemss.profit_loss.february,
...@@ -561,7 +543,6 @@ export default class ProfitLoss extends Component { ...@@ -561,7 +543,6 @@ export default class ProfitLoss extends Component {
items.formula, items.formula,
items.level, items.level,
items.description, items.description,
items.profit_loss.notes,
items.profit_loss.total_actual_before, items.profit_loss.total_actual_before,
items.profit_loss.january, items.profit_loss.january,
items.profit_loss.february, items.profit_loss.february,
...@@ -589,7 +570,6 @@ export default class ProfitLoss extends Component { ...@@ -589,7 +570,6 @@ export default class ProfitLoss extends Component {
val.formula, val.formula,
val.level, val.level,
val.description, val.description,
val.profit_loss.notes,
val.profit_loss.total_actual_before, val.profit_loss.total_actual_before,
val.profit_loss.january, val.profit_loss.january,
val.profit_loss.february, val.profit_loss.february,
...@@ -617,7 +597,6 @@ export default class ProfitLoss extends Component { ...@@ -617,7 +597,6 @@ export default class ProfitLoss extends Component {
i.formula, i.formula,
i.level, i.level,
i.description, i.description,
i.profit_loss.notes,
i.profit_loss.total_actual_before, i.profit_loss.total_actual_before,
i.profit_loss.january, i.profit_loss.january,
i.profit_loss.february, i.profit_loss.february,
...@@ -644,7 +623,6 @@ export default class ProfitLoss extends Component { ...@@ -644,7 +623,6 @@ export default class ProfitLoss extends Component {
i.formula, i.formula,
i.level, i.level,
i.description, i.description,
i.profit_loss.notes,
i.profit_loss.total_actual_before, i.profit_loss.total_actual_before,
i.profit_loss.january, i.profit_loss.january,
i.profit_loss.february, i.profit_loss.february,
...@@ -672,7 +650,6 @@ export default class ProfitLoss extends Component { ...@@ -672,7 +650,6 @@ export default class ProfitLoss extends Component {
item.formula, item.formula,
item.level, item.level,
item.description, item.description,
item.profit_loss.notes,
item.profit_loss.total_actual_before, item.profit_loss.total_actual_before,
item.profit_loss.january, item.profit_loss.january,
item.profit_loss.february, item.profit_loss.february,
...@@ -787,31 +764,31 @@ export default class ProfitLoss extends Component { ...@@ -787,31 +764,31 @@ export default class ProfitLoss extends Component {
name: "Account", name: "Account",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, backgroundColor: '#354960', width: 388 }}> <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, backgroundColor: '#1c71b8', width: 300 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style }), setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ width: 388 }}> <div style={{ width: 300}}>
{tableMeta.rowData[4] == 0 ? {tableMeta.rowData[4] == 0 ?
<span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span> <span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span>
: :
tableMeta.rowData[4] === 1 ? <div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
<span style={{ fontSize: 12, marginLeft: 20 * Number(tableMeta.rowData[4]) }}>{tableMeta.rowData[0] === 4 ? "" : val}</span> : <span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
<span style={{ fontSize: 12, marginLeft: 20 * Number(tableMeta.rowData[4]) }}>{tableMeta.rowData[0] === 4 ? "" : val}</span> </div>
} }
</div> </div>
) )
} }
} }
}, { }, {
name: "31 Dec 2020 Actual", name: "31-Dec-2020 OL PA",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#354960', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
...@@ -879,10 +856,10 @@ export default class ProfitLoss extends Component { ...@@ -879,10 +856,10 @@ export default class ProfitLoss extends Component {
} }
} }
}, { }, {
name: "January 2021", name: "Jan 2021",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#354960', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
...@@ -951,10 +928,10 @@ export default class ProfitLoss extends Component { ...@@ -951,10 +928,10 @@ export default class ProfitLoss extends Component {
} }
} }
}, { }, {
name: "February 2021", name: "Feb 2021",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#354960', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
...@@ -1023,10 +1000,10 @@ export default class ProfitLoss extends Component { ...@@ -1023,10 +1000,10 @@ export default class ProfitLoss extends Component {
} }
} }
}, { }, {
name: "March 2021", name: "Mar 2021",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#354960', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
...@@ -1095,10 +1072,10 @@ export default class ProfitLoss extends Component { ...@@ -1095,10 +1072,10 @@ export default class ProfitLoss extends Component {
} }
} }
}, { }, {
name: "April 2021", name: "Apr 2021",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#354960', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
...@@ -1170,7 +1147,7 @@ export default class ProfitLoss extends Component { ...@@ -1170,7 +1147,7 @@ export default class ProfitLoss extends Component {
name: "May 2021", name: "May 2021",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#354960', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
...@@ -1239,10 +1216,10 @@ export default class ProfitLoss extends Component { ...@@ -1239,10 +1216,10 @@ export default class ProfitLoss extends Component {
} }
} }
}, { }, {
name: "June 2021", name: "Jun 2021",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#354960', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
...@@ -1311,10 +1288,10 @@ export default class ProfitLoss extends Component { ...@@ -1311,10 +1288,10 @@ export default class ProfitLoss extends Component {
} }
} }
}, { }, {
name: "July 2021", name: "Jul 2021",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#354960', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
...@@ -1383,10 +1360,10 @@ export default class ProfitLoss extends Component { ...@@ -1383,10 +1360,10 @@ export default class ProfitLoss extends Component {
} }
} }
}, { }, {
name: "August 2021", name: "Aug 2021",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#354960', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
...@@ -1455,10 +1432,10 @@ export default class ProfitLoss extends Component { ...@@ -1455,10 +1432,10 @@ export default class ProfitLoss extends Component {
} }
} }
}, { }, {
name: "September 2021", name: "Sep 2021",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#354960', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
...@@ -1527,10 +1504,10 @@ export default class ProfitLoss extends Component { ...@@ -1527,10 +1504,10 @@ export default class ProfitLoss extends Component {
} }
} }
}, { }, {
name: "October 2021", name: "Oct 2021",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#354960', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
...@@ -1599,10 +1576,10 @@ export default class ProfitLoss extends Component { ...@@ -1599,10 +1576,10 @@ export default class ProfitLoss extends Component {
} }
} }
}, { }, {
name: "November 2021", name: "Nov 2021",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#354960', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
...@@ -1671,10 +1648,10 @@ export default class ProfitLoss extends Component { ...@@ -1671,10 +1648,10 @@ export default class ProfitLoss extends Component {
} }
} }
}, { }, {
name: "December 2021", name: "Dec 2021",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#354960', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
...@@ -1743,10 +1720,10 @@ export default class ProfitLoss extends Component { ...@@ -1743,10 +1720,10 @@ export default class ProfitLoss extends Component {
} }
} }
}, { }, {
name: "Current Total", name: "31-Dec-21 MB",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#354960', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
...@@ -1815,11 +1792,11 @@ export default class ProfitLoss extends Component { ...@@ -1815,11 +1792,11 @@ export default class ProfitLoss extends Component {
} }
} }
}, { }, {
name: "31 Dec 2022 Total", name: "31-Dec-22 Forcast",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#354960', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
...@@ -1887,11 +1864,11 @@ export default class ProfitLoss extends Component { ...@@ -1887,11 +1864,11 @@ export default class ProfitLoss extends Component {
} }
} }
}, { }, {
name: "31 Dec 2023 Total", name: "31-Dec-23 Forcast",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#354960', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
...@@ -1980,7 +1957,7 @@ export default class ProfitLoss extends Component { ...@@ -1980,7 +1957,7 @@ export default class ProfitLoss extends Component {
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography> <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
</div> </div>
<div style={{ marginTop: 20, width: this.props.width - 200, height: this.props.height-200 }}> <div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) , height: this.props.height - 400 }}>
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={dataTable2} data={dataTable2}
...@@ -1990,7 +1967,7 @@ export default class ProfitLoss extends Component { ...@@ -1990,7 +1967,7 @@ export default class ProfitLoss extends Component {
</MuiThemeProvider> </MuiThemeProvider>
</div> </div>
</div> </div>
<div className="grid grid-2x"> <div className="grid grid-2x" style={{ marginTop: 20}}>
<div className="col-1"> <div className="col-1">
<button <button
className="button" className="button"
......
src/container/MasterData/ReportItems.js
View file @ d0695bc5
...@@ -604,7 +604,7 @@ export default class ReportItems extends Component { ...@@ -604,7 +604,7 @@ export default class ReportItems extends Component {
if (response.data.status == 'success') { if (response.data.status == 'success') {
let data = response.data.data let data = response.data.data
let listData = data.sort((a, b) => a.item_report_id - b.item_report_id).map((item, index) => { let listData = data.sort((a, b) => a.item_report_id - b.item_report_id).map((item, index) => {
return [index, item.item_report_id, item.report_name, item.company_name, item.order, item.description, item.parent, item.uom, item.weight, item.type_item_report_name, item.status] return [index, item.item_report_id, item.report_name, item.company_name, item.order, item.description, item.parent, item.uom, item.weight, item.type_item_report_name, item.kpi_type, item.max_ach, item.formula_ytd, item.status]
}) })
this.setState({ dataTable: listData, listData: response.data.data }, () => { this.setState({ dataTable: listData, listData: response.data.data }, () => {
console.log(this.state.dataTable); console.log(this.state.dataTable);
...@@ -880,7 +880,7 @@ export default class ReportItems extends Component { ...@@ -880,7 +880,7 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -892,7 +892,7 @@ export default class ReportItems extends Component { ...@@ -892,7 +892,7 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -904,7 +904,7 @@ export default class ReportItems extends Component { ...@@ -904,7 +904,7 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -916,7 +916,7 @@ export default class ReportItems extends Component { ...@@ -916,7 +916,7 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -928,7 +928,7 @@ export default class ReportItems extends Component { ...@@ -928,7 +928,7 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -940,7 +940,7 @@ export default class ReportItems extends Component { ...@@ -940,7 +940,7 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -952,7 +952,7 @@ export default class ReportItems extends Component { ...@@ -952,7 +952,7 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -964,7 +964,7 @@ export default class ReportItems extends Component { ...@@ -964,7 +964,7 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -976,7 +976,43 @@ export default class ReportItems extends Component { ...@@ -976,7 +976,43 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
}
},
{
name: "KPI Type",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
}
},
{
name: "Max Achievement",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
}
},
{
name: "Formula YTD",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -988,7 +1024,7 @@ export default class ReportItems extends Component { ...@@ -988,7 +1024,7 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
......
src/container/Otorisasi/User.js
View file @ d0695bc5
...@@ -15,7 +15,17 @@ import { ExcelRenderer } from 'react-excel-renderer'; ...@@ -15,7 +15,17 @@ import { ExcelRenderer } from 'react-excel-renderer';
import ReactTooltip from "react-tooltip"; import ReactTooltip from "react-tooltip";
import PopUpFailedSave from "../../library/PopUpFailedSave"; import PopUpFailedSave from "../../library/PopUpFailedSave";
import Constant from "../../library/Constant"; import Constant from "../../library/Constant";
import PopUpDelete from "../ApprovalMatrix/PopUpDeleteAM"; import { css } from "@emotion/core";
import HashLoader from "react-spinners/HashLoader";
import ClimbingBoxLoader from "react-spinners/ClimbingBoxLoader"
import SkewLoader from "react-spinners/SkewLoader"
import PropagateLoader from "react-spinners/PropagateLoader"
const override = css`
display: block;
margin: 0 auto;
border-color: red;
`;
var ct = require("../../library/CustomTable"); var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
...@@ -24,6 +34,8 @@ const options = ct.customOptions(); ...@@ -24,6 +34,8 @@ const options = ct.customOptions();
const Alert = withStyles({ const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />); })((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
export default class UserRole extends Component { export default class UserRole extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
...@@ -42,7 +54,8 @@ export default class UserRole extends Component { ...@@ -42,7 +54,8 @@ export default class UserRole extends Component {
buttonEdit: false, buttonEdit: false,
buttonDelete: false, buttonDelete: false,
load: false, load: false,
judul: '' judul: '',
loading: false
} }
} }
...@@ -66,6 +79,7 @@ export default class UserRole extends Component { ...@@ -66,6 +79,7 @@ export default class UserRole extends Component {
} }
getUser() { getUser() {
this.setState({loading: true})
api.create().getUser().then((response) => { api.create().getUser().then((response) => {
if (response.data) { if (response.data) {
if (response.ok) { if (response.ok) {
...@@ -75,7 +89,11 @@ export default class UserRole extends Component { ...@@ -75,7 +89,11 @@ export default class UserRole extends Component {
let listData = data.sort((a, b) => a.user_id - b.user_id).map((item, index) => { let listData = data.sort((a, b) => a.user_id - b.user_id).map((item, index) => {
return [index, item.user_id, item.fullname === null ? '-' : item.fullname, item.email, item.role_name, item.totalCompany, item.status] return [index, item.user_id, item.fullname === null ? '-' : item.fullname, item.email, item.role_name, item.totalCompany, item.status]
}) })
this.setState({ listUser: listData }) this.setState({ listUser: listData }, () => {
setTimeout(() => {
this.setState({loading: false})
}, 2000);
})
} 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")) {
...@@ -87,10 +105,14 @@ export default class UserRole extends Component { ...@@ -87,10 +105,14 @@ export default class UserRole extends Component {
}) })
} }
} else { } else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' }) this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' }, () => {
this.setState({loading: false})
})
} }
} else { } else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' }) this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' }, () => {
this.setState({loading: false})
})
} }
}) })
} }
...@@ -117,6 +139,7 @@ export default class UserRole extends Component { ...@@ -117,6 +139,7 @@ export default class UserRole extends Component {
} }
searchUser() { searchUser() {
this.setState({loading: true})
let payload = { let payload = {
"keyword": this.state.search "keyword": this.state.search
} }
...@@ -128,7 +151,11 @@ export default class UserRole extends Component { ...@@ -128,7 +151,11 @@ export default class UserRole extends Component {
let listData = data.sort((a, b) => a.user_id - b.user_id).map((item, index) => { let listData = data.sort((a, b) => a.user_id - b.user_id).map((item, index) => {
return [index, item.user_id, item.fullname == null ? '-' : item.fullname, item.email, item.role_name, item.totalCompany, item.status] return [index, item.user_id, item.fullname == null ? '-' : item.fullname, item.email, item.role_name, item.totalCompany, item.status]
}) })
this.setState({ listUser: listData }) this.setState({ listUser: listData }, () => {
setTimeout(() => {
this.setState({loading: false})
}, 1500);
})
} 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")) {
...@@ -140,10 +167,14 @@ export default class UserRole extends Component { ...@@ -140,10 +167,14 @@ export default class UserRole extends Component {
}) })
} }
} else { } else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' }) this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' }, () => {
this.setState({loading: false})
})
} }
} else { } else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' }) this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' }, () => {
this.setState({loading: false})
})
} }
}) })
} }
...@@ -647,6 +678,16 @@ export default class UserRole extends Component { ...@@ -647,6 +678,16 @@ export default class UserRole extends Component {
} }
} }
}] }]
const loadingComponent = (
<div style={{position: 'absolute', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)'}}>
<PropagateLoader
// css={override}
size={20}
color={"#274B80"}
loading={this.state.loading}
/>
</div>
);
return ( return (
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
{/* <Row> */} {/* <Row> */}
...@@ -773,7 +814,8 @@ export default class UserRole extends Component { ...@@ -773,7 +814,8 @@ export default class UserRole extends Component {
</div> </div>
</div> </div>
)} )}
<div style={{ padding: 25 }}> <div style={{ padding: 25}}>
{this.state.loading && loadingComponent}
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={this.state.listUser} data={this.state.listUser}
......
src/container/Otorisasi/User/AddUser.js
View file @ d0695bc5
...@@ -192,17 +192,17 @@ export default class AddUser extends Component { ...@@ -192,17 +192,17 @@ export default class AddUser extends Component {
var isEmail = this.isEmail(this.state.email) var isEmail = this.isEmail(this.state.email)
if (R.isEmpty(this.state.fullname)) { if (R.isEmpty(this.state.fullname)) {
this.setState({ errorFullname: true, msgErrorFN: 'Fullname Cannot be Empty.' }) this.setState({ errorFullname: true, msgErrorFN: 'Fullname Cannot be Empty' })
} else if (R.isEmpty(this.state.email)) { } else if (R.isEmpty(this.state.email)) {
this.setState({ errorEmail: true, msgErrorEM: 'Email Cannot be Empty.' }) this.setState({ errorEmail: true, msgErrorEM: 'Email Cannot be Empty' })
} else if (!isEmail) { } else if (!isEmail) {
this.setState({ errorEmail: true, msgErrorEM: 'Please enter a valid email address.' }) this.setState({ errorEmail: true, msgErrorEM: 'Please enter a valid email address' })
} else if (R.isNil(this.state.role)) { } else if (R.isNil(this.state.role)) {
this.setState({ errorRoleName: true, msgErrorRN: 'Role Cannot be Empty.' }) this.setState({ errorRoleName: true, msgErrorRN: 'Role Cannot be Empty' })
} else if (R.isNil(this.state.startDate)) { } else if (R.isNil(this.state.startDate)) {
this.setState({ errorStartDate: true, msgErrorSD: 'Valid From Cannot be Empty.' }) this.setState({ errorStartDate: true, msgErrorSD: 'Valid From Cannot be Empty' })
} else if (R.isNil(this.state.endDate)) { } else if (R.isNil(this.state.endDate)) {
this.setState({ errorEndDate: true, msgErrorED: 'Valid To Cannot be Empty.' }) this.setState({ errorEndDate: true, msgErrorED: 'Valid To Cannot be Empty' })
} else if (this.state.company.length < 1) { } else if (this.state.company.length < 1) {
this.setState({ alert: true, messageAlert: 'Authorization company cannot be empty', tipeAlert: 'warning' }) this.setState({ alert: true, messageAlert: 'Authorization company cannot be empty', tipeAlert: 'warning' })
} }
......
src/container/Otorisasi/User/EditUser.js
View file @ d0695bc5
...@@ -202,17 +202,17 @@ export default class EditUser extends Component { ...@@ -202,17 +202,17 @@ export default class EditUser extends Component {
// console.log(this.state.tempData) // console.log(this.state.tempData)
if (R.isEmpty(this.state.tempData.fullname)) { if (R.isEmpty(this.state.tempData.fullname)) {
this.setState({ errorFullname: true, msgErrorFN: 'Full Name Cannot be Empty.' }) this.setState({ errorFullname: true, msgErrorFN: 'Full Name Cannot be Empty' })
} else if (R.isEmpty(this.state.tempData.email)) { } else if (R.isEmpty(this.state.tempData.email)) {
this.setState({ errorEmail: true, msgErrorEM: 'Email Cannot be Empty.' }) this.setState({ errorEmail: true, msgErrorEM: 'Email Cannot be Empty' })
} else if (!isEmail) { } else if (!isEmail) {
this.setState({ errorEmail: true, msgErrorEM: 'Please enter a valid email address.' }) this.setState({ errorEmail: true, msgErrorEM: 'Please enter a valid email address' })
} else if (R.isNil(this.state.role)) { } else if (R.isNil(this.state.role)) {
this.setState({ errorRoleName: true, msgErrorRN: 'Role Cannot be Empty.' }) this.setState({ errorRoleName: true, msgErrorRN: 'Role Cannot be Empty' })
} else if (R.isNil(this.state.tempData.start_date)) { } else if (R.isNil(this.state.tempData.start_date)) {
this.setState({ errorStartDate: true, msgErrorSD: 'Valid From Cannot be Empty.' }) this.setState({ errorStartDate: true, msgErrorSD: 'Valid From Cannot be Empty' })
} else if (R.isNil(this.state.tempData.end_date)) { } else if (R.isNil(this.state.tempData.end_date)) {
this.setState({ errorEndDate: true, msgErrorED: 'Valid To Cannot be Empty.' }) this.setState({ errorEndDate: true, msgErrorED: 'Valid To Cannot be Empty' })
} }
// else if (this.state.privileges.length < 1) { // else if (this.state.privileges.length < 1) {
// alert('Hak Akses belum di pilih !!') // alert('Hak Akses belum di pilih !!')
......
src/container/Otorisasi/UserRole.js
View file @ d0695bc5
...@@ -14,6 +14,7 @@ import ReactTooltip from "react-tooltip"; ...@@ -14,6 +14,7 @@ import ReactTooltip from "react-tooltip";
import MuiAlert from '@material-ui/lab/Alert'; import MuiAlert from '@material-ui/lab/Alert';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import Constant from "../../library/Constant"; import Constant from "../../library/Constant";
import PropagateLoader from "react-spinners/PropagateLoader"
var ct = require("../../library/CustomTable"); var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
...@@ -37,11 +38,13 @@ class UserRole extends Component { ...@@ -37,11 +38,13 @@ class UserRole extends Component {
buttonCreate: false, buttonCreate: false,
buttonEdit: false, buttonEdit: false,
buttonDelete: false, buttonDelete: false,
load: false load: false,
loading: false
} }
} }
componentDidMount() { componentDidMount() {
this.getRole() this.getRole()
this.getPermission() this.getPermission()
} }
...@@ -55,6 +58,7 @@ class UserRole extends Component { ...@@ -55,6 +58,7 @@ class UserRole extends Component {
} }
getRole() { getRole() {
this.setState({loading: true})
api.create().getRole().then((response) => { api.create().getRole().then((response) => {
if (response.data) { if (response.data) {
if (response.ok) { if (response.ok) {
...@@ -64,13 +68,17 @@ class UserRole extends Component { ...@@ -64,13 +68,17 @@ class UserRole extends Component {
return [index, item.role_id, item.role_name, item.access, item.status] return [index, item.role_id, item.role_name, item.access, item.status]
}) })
// console.log(listData) // console.log(listData)
this.setState({ listRole: listData }) this.setState({ listRole: listData }, () => {
setTimeout(() => {
this.setState({loading: false})
}, 2000);
})
// this.setState({listRole: response.data.data}, () => { // this.setState({listRole: response.data.data}, () => {
// console.log(this.state.listRole) // console.log(this.state.listRole)
// }) // })
} else { } else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => { this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false}, () => {
if (response.data.message.includes("Someone Logged In")) { if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => { setTimeout(() => {
localStorage.removeItem(Constant.TOKEN) localStorage.removeItem(Constant.TOKEN)
...@@ -80,10 +88,10 @@ class UserRole extends Component { ...@@ -80,10 +88,10 @@ class UserRole extends Component {
}) })
} }
} else { } else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' }) this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error', loading: false })
} }
} else { } else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' }) this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false })
} }
}) })
} }
...@@ -283,6 +291,16 @@ class UserRole extends Component { ...@@ -283,6 +291,16 @@ class UserRole extends Component {
} }
} }
}] }]
const loadingComponent = (
<div style={{position: 'absolute', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)'}}>
<PropagateLoader
// css={override}
size={20}
color={"#274B80"}
loading={this.state.loading}
/>
</div>
);
return ( return (
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
{/* <Row> */} {/* <Row> */}
...@@ -338,6 +356,7 @@ class UserRole extends Component { ...@@ -338,6 +356,7 @@ class UserRole extends Component {
</div> </div>
)} )}
<div style={{ padding: 25 }}> <div style={{ padding: 25 }}>
{this.state.loading && loadingComponent}
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={this.state.listRole} data={this.state.listRole}
......
src/container/Otorisasi/UserRole/AddRole.js
View file @ d0695bc5
...@@ -111,13 +111,13 @@ export default class AddRole extends Component { ...@@ -111,13 +111,13 @@ export default class AddRole extends Component {
validasi() { validasi() {
if (R.isEmpty(this.state.roleName)) { if (R.isEmpty(this.state.roleName)) {
this.setState({ errorRoleName: true, msgErrorRN: 'Role Cannot be Empty.' }) this.setState({ errorRoleName: true, msgErrorRN: 'Role Cannot be Empty' })
} else if (R.isNil(this.state.startDate)) { } else if (R.isNil(this.state.startDate)) {
this.setState({ errorStartDate: true, msgErrorSD: 'Valid From Cannot be Empty.' }) this.setState({ errorStartDate: true, msgErrorSD: 'Valid From Cannot be Empty' })
} else if (R.isNil(this.state.endDate)) { } else if (R.isNil(this.state.endDate)) {
this.setState({ errorEndDate: true, msgErrorED: 'Valid To Cannot be Empty.' }) this.setState({ errorEndDate: true, msgErrorED: 'Valid To Cannot be Empty' })
} else if (this.state.privileges.length < 1) { } else if (this.state.privileges.length < 1) {
this.setState({ alert: true, messageAlert: 'You Must Choose the Access Rights.', tipeAlert: 'warning' }) this.setState({ alert: true, messageAlert: 'You Must Choose the Access Rights', tipeAlert: 'warning' })
} else { } else {
this.addRole() this.addRole()
} }
......
src/container/Otorisasi/UserRole/EditRole.js
View file @ d0695bc5
...@@ -124,13 +124,13 @@ export default class EditRole extends Component { ...@@ -124,13 +124,13 @@ export default class EditRole extends Component {
validasi() { validasi() {
if (R.isEmpty(this.state.tempData.role_name)) { if (R.isEmpty(this.state.tempData.role_name)) {
this.setState({ errorRoleName: true, msgErrorRN: 'Role Cannot be Empty.' }) this.setState({ errorRoleName: true, msgErrorRN: 'Role Cannot be Empty' })
} else if (R.isNil(this.state.tempData.start_date)) { } else if (R.isNil(this.state.tempData.start_date)) {
this.setState({ errorStartDate: true, msgErrorSD: 'Valid From Cannot be Empty.' }) this.setState({ errorStartDate: true, msgErrorSD: 'Valid From Cannot be Empty' })
} else if (R.isNil(this.state.tempData.end_date)) { } else if (R.isNil(this.state.tempData.end_date)) {
this.setState({ errorEndDate: true, msgErrorED: 'Valid To Cannot be Empty.' }) this.setState({ errorEndDate: true, msgErrorED: 'Valid To Cannot be Empty' })
} else if (this.state.privileges.length < 1) { } else if (this.state.privileges.length < 1) {
this.setState({ alert: true, messageAlert: 'You Must Choose the Access Rights.', tipeAlert: 'warning' }) this.setState({ alert: true, messageAlert: 'You Must Choose the Access Rights', tipeAlert: 'warning' })
} else { } else {
this.updateRole() this.updateRole()
} }
......
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