62 changed files with 606 additions and 10161 deletions
|
Before Width: | Height: | Size: 77 KiB |
|
Before Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 9.0 KiB |
|
Before Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 162 KiB |
|
Before Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 173 KiB |
|
Before Width: | Height: | Size: 328 KiB |
@ -1,101 +0,0 @@ |
|||||||
{ |
|
||||||
"type": "FeatureCollection", |
|
||||||
"totalFeatures": "unknown", |
|
||||||
"features": [ |
|
||||||
{ |
|
||||||
"type": "Feature", |
|
||||||
"id": "paxel_area_code_20210426.5083", |
|
||||||
"geometry": { |
|
||||||
"type": "MultiPolygon", |
|
||||||
"coordinates": [ |
|
||||||
[ |
|
||||||
[ |
|
||||||
[ |
|
||||||
106.522270001261, |
|
||||||
-6.66321000044036 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.536260000699, |
|
||||||
-6.66382999935416 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.556582195013, |
|
||||||
-6.68497003983464 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.541310000657, |
|
||||||
-6.71486999865072 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.542630000375, |
|
||||||
-6.74058999942815 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.550740756582, |
|
||||||
-6.7473471734325 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.533284161136, |
|
||||||
-6.75148465469226 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.524773753407, |
|
||||||
-6.76232523192311 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.498398062322, |
|
||||||
-6.75218427058684 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.46682763259, |
|
||||||
-6.75104031405846 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.459021692598, |
|
||||||
-6.73381922767441 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.481760000125, |
|
||||||
-6.72494999944212 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.504030000085, |
|
||||||
-6.70412999979885 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.51431934866, |
|
||||||
-6.65951255475977 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.522270001261, |
|
||||||
-6.66321000044036 |
|
||||||
] |
|
||||||
] |
|
||||||
] |
|
||||||
] |
|
||||||
}, |
|
||||||
"geometry_name": "the_geom", |
|
||||||
"properties": { |
|
||||||
"fid": 37287, |
|
||||||
"desa": "MALASARI", |
|
||||||
"provinsi": "JAWA BARAT", |
|
||||||
"kabkot": "BOGOR", |
|
||||||
"kecamatan": "NANGGUNG", |
|
||||||
"post_code": null, |
|
||||||
"city_code": "", |
|
||||||
"ph_code": "", |
|
||||||
"locker_cod": "", |
|
||||||
"area_code": "", |
|
||||||
"id": 37287, |
|
||||||
"cluster_area_code": "", |
|
||||||
"service_ty": null |
|
||||||
} |
|
||||||
} |
|
||||||
], |
|
||||||
"crs": { |
|
||||||
"type": "name", |
|
||||||
"properties": { |
|
||||||
"name": "urn:ogc:def:crs:EPSG::4326" |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,7 +0,0 @@ |
|||||||
{ |
|
||||||
"routes": [ |
|
||||||
{ |
|
||||||
"geometry": "hldhx@lnau`BCG_EaC??cFjAwDjF??uBlKMd@}@z@??aC^yk@z_@se@b[wFdE??wFfE}NfIoGxB_I\\gG}@eHoCyTmPqGaBaHOoD\\??yVrGotA|N??o[N_STiwAtEmHGeHcAkiA}^aMyBiHOkFNoI`CcVvM??gG^gF_@iJwC??eCcA]OoL}DwFyCaCgCcCwDcGwHsSoX??wI_EkUFmq@hBiOqBgTwS??iYse@gYq\\cp@ce@{vA}s@csJqaE}{@iRaqE{lBeRoIwd@_T{]_Ngn@{PmhEwaA{SeF_u@kQuyAw]wQeEgtAsZ}LiCarAkVwI}D??_}RcjEinPspDwSqCgs@sPua@_OkXaMeT_Nwk@ob@gV}TiYs[uTwXoNmT{Uyb@wNg]{Nqa@oDgNeJu_@_G}YsFw]kDuZyDmm@i_@uyIJe~@jCg|@nGiv@zUi_BfNqaAvIow@dEed@dCcf@r@qz@Egs@{Acu@mCum@yIey@gGig@cK_m@aSku@qRil@we@{mAeTej@}Tkz@cLgr@aHko@qOmcEaJw~C{w@kai@qBchBq@kmBS{kDnBscBnFu_Dbc@_~QHeU`IuyDrC_}@bByp@fCyoA?qMbD}{AIkeAgBk_A_A{UsDke@gFej@qH{o@qGgb@qH{`@mMgm@uQus@kL{_@yOmd@ymBgwE}x@ouBwtA__DuhEgaKuWct@gp@cnBii@mlBa_@}|Asj@qrCg^eaC}L{dAaJ_aAiOyjByH{nAuYu`GsAwXyn@ywMyOyqD{_@cfIcDe}@y@aeBJmwA`CkiAbFkhBlTgdDdPyiB`W}xDnSa}DbJyhCrXitAhT}x@bE}Z_@qW_Kwv@qKaaAiBgXvIm}A~JovAxCqW~WanB`XewBbK{_A`K}fBvAmi@xBycBeCauBoF}}@qJioAww@gjHaPopA_NurAyJku@uGmi@cDs[eRaiBkQstAsQkcByNmaCsK_uBcJgbEw@gkB_@ypEqDoqSm@eZcDwjBoGw`BoMegBaU_`Ce_@_uBqb@ytBwkFqiT_fAqfEwe@mfCka@_eC_UmlB}MmaBeWkkDeHwqAoX}~DcBsZmLcxBqOwqE_DkyAuJmrJ\\o~CfIewG|YibQxBssB?es@qGciA}RorAoVajA_nAodD{[y`AgPqp@mKwr@ms@umEaW{dAmb@umAw|@ojBwzDaaJsmBwbEgdCsrFqhAihDquAi`Fux@}_Dui@_eB_u@guCuyAuiHukA_lKszAu|OmaA{wKm}@clHs_A_rEahCssKo\\sgBsSglAqk@yvDcS_wAyTwpBmPc|BwZknFoFscB_GsaDiZmyMyLgtHgQonHqT{hKaPg}Dqq@m~Hym@c`EuiBudIabB{hF{pWifx@snAw`GkFyVqf@y~BkoAi}Lel@wtc@}`@oaXi_C}pZsi@eqGsSuqJ|Lqeb@e]kgPcaAu}SkDwzGhn@gjYh\\qlNZovJieBqja@ed@siO{[ol\\kCmjMe\\isHorCmec@uLebB}EqiBaCg}@m@qwHrT_vFps@kkI`uAszIrpHuzYxx@e{Crw@kpDhN{wBtQarDy@knFgP_yCu\\wyCwyA{kHo~@omEoYmoDaEcPiuAosDagD}rO{{AsyEihCayFilLaiUqm@_bAumFo}DgqA_uByi@swC~AkzDlhA}xEvcBa}Cxk@ql@`rAo|@~bBq{@``Bye@djDww@z_C_cAtn@ye@nfC_eC|gGahH~s@w}@``Fi~FpnAooC|u@wlEaEedRlYkrPvKerBfYs}Arg@m}AtrCkzElw@gjBbh@woBhR{gCwGkgCc[wtCuOapAcFoh@uBy[yBgr@c@iq@o@wvEv@sp@`FajBfCaq@fIipAdy@ewJlUc`ExGuaBdEmbBpBssArAuqBBg}@s@g{AkB{bBif@_bYmC}r@kDgm@sPq_BuJ_s@{X_{AsK_d@eM{d@wVgx@oWcu@??aDmOkNia@wFoSmDyMyCkPiBePwAob@XcQ|@oNdCoSfFwXhEmOnLi\\lbAulB`X_d@|k@au@bc@oc@bqC}{BhwDgcD`l@ed@??bL{G|a@eTje@oS~]cLr~Bgh@|b@}Jv}EieAlv@sPluD{z@nzA_]`|KchCtd@sPvb@wSb{@ko@f`RooQ~e[upZbuIolI|gFafFzu@iq@nMmJ|OeJn^{Qjh@yQhc@uJ~j@iGdd@kAp~BkBxO{@|QsAfYgEtYiGd]}Jpd@wRhVoNzNeK`j@ce@vgK}cJnSoSzQkVvUm^rSgc@`Uql@xIq\\vIgg@~kDyq[nIir@jNoq@xNwc@fYik@tk@su@neB}uBhqEesFjoGeyHtCoD|D}Ed|@ctAbIuOzqB_}D~NgY`\\um@v[gm@v{Cw`G`w@o{AdjAwzBh{C}`Gpp@ypAxn@}mAfz@{bBbNia@??jIab@`CuOlC}YnAcV`@_^m@aeB}@yk@YuTuBg^uCkZiGk\\yGeY}Lu_@oOsZiTe[uWi[sl@mo@soAauAsrBgzBqgAglAyd@ig@asAcyAklA}qAwHkGi{@s~@goAmsAyDeEirB_{B}IsJuEeFymAssAkdAmhAyTcVkFeEoKiH}l@kp@wg@sj@ku@ey@uh@kj@}EsFmG}Jk^_r@_f@m~@ym@yjA??a@cFd@kBrCgDbAUnAcBhAyAdk@et@??kF}D??OL" |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
||||||
@ -1,257 +0,0 @@ |
|||||||
{ |
|
||||||
"geocoded_waypoints": [ |
|
||||||
{ |
|
||||||
"geocoder_status": "OK", |
|
||||||
"place_id": "ChIJT2zELKHxaS4RR5fpIKhtekA", |
|
||||||
"types": [ |
|
||||||
"street_address" |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
"geocoder_status": "OK", |
|
||||||
"place_id": "ChIJdbdzpG7xaS4RUCaaEC6NIOo", |
|
||||||
"types": [ |
|
||||||
"street_address" |
|
||||||
] |
|
||||||
} |
|
||||||
], |
|
||||||
"routes": [ |
|
||||||
{ |
|
||||||
"bounds": { |
|
||||||
"northeast": { |
|
||||||
"lat": -6.245234399999999, |
|
||||||
"lng": 106.8006477 |
|
||||||
}, |
|
||||||
"southwest": { |
|
||||||
"lat": -6.2623544, |
|
||||||
"lng": 106.7885345 |
|
||||||
} |
|
||||||
}, |
|
||||||
"copyrights": "Map data ©2021", |
|
||||||
"legs": [ |
|
||||||
{ |
|
||||||
"distance": { |
|
||||||
"text": "3.0 km", |
|
||||||
"value": 2992 |
|
||||||
}, |
|
||||||
"duration": { |
|
||||||
"text": "9 mins", |
|
||||||
"value": 552 |
|
||||||
}, |
|
||||||
"end_address": "Jl. Melawai 5 No.172, RT.3/RW.1, Melawai, Kec. Kby. Baru, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12160, Indonesia", |
|
||||||
"end_location": { |
|
||||||
"lat": -6.245234399999999, |
|
||||||
"lng": 106.8006477 |
|
||||||
}, |
|
||||||
"start_address": "Jl. Bri Radio Dalam No.34/4, RT.2/RW.15, Gandaria Utara, Kec. Kby. Baru, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12140, Indonesia", |
|
||||||
"start_location": { |
|
||||||
"lat": -6.2623544, |
|
||||||
"lng": 106.7885345 |
|
||||||
}, |
|
||||||
"steps": [ |
|
||||||
{ |
|
||||||
"distance": { |
|
||||||
"text": "1.5 km", |
|
||||||
"value": 1495 |
|
||||||
}, |
|
||||||
"duration": { |
|
||||||
"text": "4 mins", |
|
||||||
"value": 221 |
|
||||||
}, |
|
||||||
"end_location": { |
|
||||||
"lat": -6.2493628, |
|
||||||
"lng": 106.7918222 |
|
||||||
}, |
|
||||||
"html_instructions": "Head <b>north</b> on <b>Jl. Radio Dalam Raya</b> toward <b>Jl. Dwijaya Raya</b><div style=\"font-size:0.9em\">Pass by Alfamart Radio Dalam 4 (on the right)</div>", |
|
||||||
"polyline": { |
|
||||||
"points": "tbfe@icxjSOEs@M}@K}C]m@KUKg@G[EKAQCaAO_@GGAoB[SEaCa@e@Ga@GuB]yA[{Ba@iAYkA[a@KqAi@w@WaA[KCgAYQCMAw@I}AKUCeAOQCoAUMCoAQyAQc@EcBKe@C}@IC?g@E_AG" |
|
||||||
}, |
|
||||||
"start_location": { |
|
||||||
"lat": -6.2623544, |
|
||||||
"lng": 106.7885345 |
|
||||||
}, |
|
||||||
"travel_mode": "DRIVING" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"distance": { |
|
||||||
"text": "0.5 km", |
|
||||||
"value": 532 |
|
||||||
}, |
|
||||||
"duration": { |
|
||||||
"text": "2 mins", |
|
||||||
"value": 99 |
|
||||||
}, |
|
||||||
"end_location": { |
|
||||||
"lat": -6.2491213, |
|
||||||
"lng": 106.7959681 |
|
||||||
}, |
|
||||||
"html_instructions": "Turn <b>right</b> onto <b>Jl. Kramat Pela</b>", |
|
||||||
"maneuver": "turn-right", |
|
||||||
"polyline": { |
|
||||||
"points": "nqce@{wxjSMA\\sBJm@JOBQFa@h@cC@EN_@Le@Hc@?QBQBIDQ@Q@O?UASCSAMCGEGU]QSWWQUq@q@MGQEGAKA" |
|
||||||
}, |
|
||||||
"start_location": { |
|
||||||
"lat": -6.2493628, |
|
||||||
"lng": 106.7918222 |
|
||||||
}, |
|
||||||
"travel_mode": "DRIVING" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"distance": { |
|
||||||
"text": "25 m", |
|
||||||
"value": 25 |
|
||||||
}, |
|
||||||
"duration": { |
|
||||||
"text": "1 min", |
|
||||||
"value": 4 |
|
||||||
}, |
|
||||||
"end_location": { |
|
||||||
"lat": -6.249124, |
|
||||||
"lng": 106.7961904 |
|
||||||
}, |
|
||||||
"html_instructions": "Turn <b>right</b> toward <b>Jl. Barito II</b>", |
|
||||||
"maneuver": "turn-right", |
|
||||||
"polyline": { |
|
||||||
"points": "~oce@yqyjSAK@_@" |
|
||||||
}, |
|
||||||
"start_location": { |
|
||||||
"lat": -6.2491213, |
|
||||||
"lng": 106.7959681 |
|
||||||
}, |
|
||||||
"travel_mode": "DRIVING" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"distance": { |
|
||||||
"text": "0.2 km", |
|
||||||
"value": 154 |
|
||||||
}, |
|
||||||
"duration": { |
|
||||||
"text": "1 min", |
|
||||||
"value": 36 |
|
||||||
}, |
|
||||||
"end_location": { |
|
||||||
"lat": -6.249612600000001, |
|
||||||
"lng": 106.7974484 |
|
||||||
}, |
|
||||||
"html_instructions": "Turn <b>right</b> onto <b>Jl. Barito II</b>", |
|
||||||
"maneuver": "turn-right", |
|
||||||
"polyline": { |
|
||||||
"points": "~oce@esyjS`@_@P[JSJ]DM@KH}@Bu@" |
|
||||||
}, |
|
||||||
"start_location": { |
|
||||||
"lat": -6.249124, |
|
||||||
"lng": 106.7961904 |
|
||||||
}, |
|
||||||
"travel_mode": "DRIVING" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"distance": { |
|
||||||
"text": "0.4 km", |
|
||||||
"value": 414 |
|
||||||
}, |
|
||||||
"duration": { |
|
||||||
"text": "1 min", |
|
||||||
"value": 77 |
|
||||||
}, |
|
||||||
"end_location": { |
|
||||||
"lat": -6.2459198, |
|
||||||
"lng": 106.7979545 |
|
||||||
}, |
|
||||||
"html_instructions": "Turn <b>left</b> onto <b>Jl. Panglima Polim</b> (signs for <b>Senayan</b>/<wbr/><b>Semanggi</b>)<div style=\"font-size:0.9em\">Pass by ATM Bank UOB (on the left)</div>", |
|
||||||
"maneuver": "turn-left", |
|
||||||
"polyline": { |
|
||||||
"points": "`sce@a{yjSmBMgDUyBQGAyDW[CgAIk@E" |
|
||||||
}, |
|
||||||
"start_location": { |
|
||||||
"lat": -6.249612600000001, |
|
||||||
"lng": 106.7974484 |
|
||||||
}, |
|
||||||
"travel_mode": "DRIVING" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"distance": { |
|
||||||
"text": "0.2 km", |
|
||||||
"value": 220 |
|
||||||
}, |
|
||||||
"duration": { |
|
||||||
"text": "1 min", |
|
||||||
"value": 48 |
|
||||||
}, |
|
||||||
"end_location": { |
|
||||||
"lat": -6.245905899999999, |
|
||||||
"lng": 106.7999397 |
|
||||||
}, |
|
||||||
"html_instructions": "Turn <b>right</b> onto <b>Jl. Melawai Raya</b><div style=\"font-size:0.9em\">Pass by MM Juice Melawai (on the right)</div>", |
|
||||||
"maneuver": "turn-right", |
|
||||||
"polyline": { |
|
||||||
"points": "~{be@e~yjS?SAq@?S?A?]Cg@AKD_F" |
|
||||||
}, |
|
||||||
"start_location": { |
|
||||||
"lat": -6.2459198, |
|
||||||
"lng": 106.7979545 |
|
||||||
}, |
|
||||||
"travel_mode": "DRIVING" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"distance": { |
|
||||||
"text": "74 m", |
|
||||||
"value": 74 |
|
||||||
}, |
|
||||||
"duration": { |
|
||||||
"text": "1 min", |
|
||||||
"value": 33 |
|
||||||
}, |
|
||||||
"end_location": { |
|
||||||
"lat": -6.2452361, |
|
||||||
"lng": 106.7999455 |
|
||||||
}, |
|
||||||
"html_instructions": "Turn <b>left</b> after HAZEL Brew Coffee (on the right)", |
|
||||||
"maneuver": "turn-left", |
|
||||||
"polyline": { |
|
||||||
"points": "|{be@sjzjSO?C?_@?qAA" |
|
||||||
}, |
|
||||||
"start_location": { |
|
||||||
"lat": -6.245905899999999, |
|
||||||
"lng": 106.7999397 |
|
||||||
}, |
|
||||||
"travel_mode": "DRIVING" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"distance": { |
|
||||||
"text": "78 m", |
|
||||||
"value": 78 |
|
||||||
}, |
|
||||||
"duration": { |
|
||||||
"text": "1 min", |
|
||||||
"value": 34 |
|
||||||
}, |
|
||||||
"end_location": { |
|
||||||
"lat": -6.245234399999999, |
|
||||||
"lng": 106.8006477 |
|
||||||
}, |
|
||||||
"html_instructions": "Turn <b>right</b> onto <b>Jl. Melawai 9</b><div style=\"font-size:0.9em\">Destination will be on the left</div>", |
|
||||||
"maneuver": "turn-right", |
|
||||||
"polyline": { |
|
||||||
"points": "vwbe@ujzjSAkC" |
|
||||||
}, |
|
||||||
"start_location": { |
|
||||||
"lat": -6.2452361, |
|
||||||
"lng": 106.7999455 |
|
||||||
}, |
|
||||||
"travel_mode": "DRIVING" |
|
||||||
} |
|
||||||
], |
|
||||||
"traffic_speed_entry": [], |
|
||||||
"via_waypoint": [] |
|
||||||
} |
|
||||||
], |
|
||||||
"overview_polyline": { |
|
||||||
"points": "tbfe@icxjScAS{Ei@m@KUKcAM_C]mGeAgAOoEy@eE{@mBg@iCaAmA_@yA]eAKsBOwAS}AYiDc@kF_@yBOh@aDJOBQFa@h@cCPe@ViABc@H[Ba@Ai@Ea@IOg@q@i@m@q@q@MGYGKAAK@_@`@_@\\o@Pk@JiABu@mBMaHg@eHg@k@E?SAeAEsAD_FO?c@?qAAAkC" |
|
||||||
}, |
|
||||||
"summary": "Jl. Radio Dalam Raya", |
|
||||||
"warnings": [], |
|
||||||
"waypoint_order": [] |
|
||||||
} |
|
||||||
], |
|
||||||
"status": "OK" |
|
||||||
} |
|
||||||
@ -1,259 +0,0 @@ |
|||||||
{ |
|
||||||
"type": "FeatureCollection", |
|
||||||
"features": [ |
|
||||||
{ |
|
||||||
"id": "sales.1", |
|
||||||
"geometry_name": "the_geom", |
|
||||||
"type": "Feature", |
|
||||||
"properties": { |
|
||||||
"id": "sales.1", |
|
||||||
"name": "Sales 1" |
|
||||||
}, |
|
||||||
"geometry": { |
|
||||||
"type": "LineString", |
|
||||||
"coordinates": [ |
|
||||||
[ |
|
||||||
106.78853, |
|
||||||
-6.26235 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.78863, |
|
||||||
-6.26201 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.78884, |
|
||||||
-6.26091 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.7889, |
|
||||||
-6.26068 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.78896, |
|
||||||
-6.26057 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.78903, |
|
||||||
-6.26023 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.78918, |
|
||||||
-6.25959 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.78953, |
|
||||||
-6.25824 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.78961, |
|
||||||
-6.25788 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.7899, |
|
||||||
-6.25684 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.7902, |
|
||||||
-6.25585 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.7904, |
|
||||||
-6.2553 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79073, |
|
||||||
-6.25461 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79089, |
|
||||||
-6.25422 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79104, |
|
||||||
-6.25377 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.7911, |
|
||||||
-6.25342 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79118, |
|
||||||
-6.25284 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79128, |
|
||||||
-6.2524 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79141, |
|
||||||
-6.25193 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79159, |
|
||||||
-6.25108 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79175, |
|
||||||
-6.2499 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79183, |
|
||||||
-6.24929 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79264, |
|
||||||
-6.2495 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79272, |
|
||||||
-6.24956 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79281, |
|
||||||
-6.24958 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79298, |
|
||||||
-6.24962 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79364, |
|
||||||
-6.24983 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79383, |
|
||||||
-6.24992 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.7942, |
|
||||||
-6.25004 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79438, |
|
||||||
-6.25006 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79452, |
|
||||||
-6.25011 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79469, |
|
||||||
-6.25013 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.7949, |
|
||||||
-6.25012 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79507, |
|
||||||
-6.25009 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79515, |
|
||||||
-6.25004 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.7954, |
|
||||||
-6.24984 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79563, |
|
||||||
-6.24963 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79588, |
|
||||||
-6.24938 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79592, |
|
||||||
-6.24931 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79596, |
|
||||||
-6.24918 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79597, |
|
||||||
-6.24912 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79603, |
|
||||||
-6.24911 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79619, |
|
||||||
-6.24912 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79635, |
|
||||||
-6.24929 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79659, |
|
||||||
-6.24944 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79681, |
|
||||||
-6.24953 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79718, |
|
||||||
-6.24959 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79745, |
|
||||||
-6.24961 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79752, |
|
||||||
-6.24906 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79772, |
|
||||||
-6.24761 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79792, |
|
||||||
-6.24614 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79795, |
|
||||||
-6.24592 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79805, |
|
||||||
-6.24592 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.7984, |
|
||||||
-6.24591 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79882, |
|
||||||
-6.24588 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79994, |
|
||||||
-6.24591 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79994, |
|
||||||
-6.24583 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79994, |
|
||||||
-6.24565 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.79995, |
|
||||||
-6.24524 |
|
||||||
], |
|
||||||
[ |
|
||||||
106.80065, |
|
||||||
-6.24523 |
|
||||||
] |
|
||||||
] |
|
||||||
} |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
||||||
@ -1,85 +0,0 @@ |
|||||||
{ |
|
||||||
"type": "FeatureCollection", |
|
||||||
"features": [ |
|
||||||
{ |
|
||||||
"id": "sales.1", |
|
||||||
"geometry_name": "the_geom", |
|
||||||
"type": "Feature", |
|
||||||
"properties": { |
|
||||||
"id": "sales.1", |
|
||||||
"name": "Sales 1" |
|
||||||
}, |
|
||||||
"geometry": { |
|
||||||
"type": "Point", |
|
||||||
"coordinates": [ |
|
||||||
106.79569244384766, |
|
||||||
-6.2395378839383016 |
|
||||||
] |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"id": "sales.2", |
|
||||||
"geometry_name": "the_geom", |
|
||||||
"type": "Feature", |
|
||||||
"properties": { |
|
||||||
"id": "sales.2", |
|
||||||
"name": "Sales 2" |
|
||||||
}, |
|
||||||
"geometry": { |
|
||||||
"type": "Point", |
|
||||||
"coordinates": [ |
|
||||||
106.78788185119627, |
|
||||||
-6.2620624718682665 |
|
||||||
] |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"id": "sales.3", |
|
||||||
"geometry_name": "the_geom", |
|
||||||
"type": "Feature", |
|
||||||
"properties": { |
|
||||||
"id": "sales.3", |
|
||||||
"name": "Sales 3" |
|
||||||
}, |
|
||||||
"geometry": { |
|
||||||
"type": "Point", |
|
||||||
"coordinates": [ |
|
||||||
106.81011199951172, |
|
||||||
-6.249349850172153 |
|
||||||
] |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"id": "sales.4", |
|
||||||
"geometry_name": "the_geom", |
|
||||||
"type": "Feature", |
|
||||||
"properties": { |
|
||||||
"id": "sales.4", |
|
||||||
"name": "Sales 4" |
|
||||||
}, |
|
||||||
"geometry": { |
|
||||||
"type": "Point", |
|
||||||
"coordinates": [ |
|
||||||
106.81543350219727, |
|
||||||
-6.215817763782759 |
|
||||||
] |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"id": "sales.5", |
|
||||||
"geometry_name": "the_geom", |
|
||||||
"type": "Feature", |
|
||||||
"properties": { |
|
||||||
"id": "sales.5", |
|
||||||
"name": "Sales 5" |
|
||||||
}, |
|
||||||
"geometry": { |
|
||||||
"type": "Point", |
|
||||||
"coordinates": [ |
|
||||||
106.80745124816895, |
|
||||||
-6.2746041510497355 |
|
||||||
] |
|
||||||
} |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,37 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
const ChatDashboard = (props) => { |
|
||||||
const { dataParams } = props; |
|
||||||
|
|
||||||
const renderComment = (items) => { |
|
||||||
return items.map((item, idx) => { |
|
||||||
return ( |
|
||||||
<div className="chat-content" key={idx}> |
|
||||||
<div className='chat-body'> |
|
||||||
<div className='chat-header'> |
|
||||||
{item.comment_by} |
|
||||||
</div> |
|
||||||
<div className='chat-body-content'> |
|
||||||
{item.comment} |
|
||||||
</div> |
|
||||||
<div className='chat-footer'> |
|
||||||
{item.comment_created} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
return ( |
|
||||||
<div style={{ margin: '0 5px' }} className="box-header-dashboard-project"> |
|
||||||
<div style={{ display: 'flex', justifyContent: 'center' }}> |
|
||||||
<div style={{ marginBottom: '5px', fontSize: '0.8rem', fontWeight: '500' }}>COMMUNICATION</div> |
|
||||||
</div> |
|
||||||
<div className='chat'> |
|
||||||
{renderComment(dataParams)} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
export default ChatDashboard; |
|
||||||
@ -1,34 +0,0 @@ |
|||||||
import React, { useEffect, useMemo, useState } from 'react'; |
|
||||||
import Timeline from 'react-calendar-timeline' |
|
||||||
// make sure you include the timeline stylesheet or the timeline will not be styled
|
|
||||||
import 'react-calendar-timeline/lib/Timeline.css' |
|
||||||
import { useParams } from 'react-router-dom'; |
|
||||||
// import moment from 'moment';
|
|
||||||
// import { USER_VERSION_GANTT_SEARCH, BASE_SIMPRO_LUMEN } from '../../../const/ApiConst';
|
|
||||||
// import axios from "../../../const/interceptorApi"
|
|
||||||
const token = localStorage.getItem("token") |
|
||||||
|
|
||||||
const Gantt = (props) => { |
|
||||||
const { ID } = useParams(); |
|
||||||
const { GANTTID } = useParams(); |
|
||||||
const url = `https://konstruksi-gantt.ospro.id/view-mode/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1` |
|
||||||
|
|
||||||
const RenderGantt = () => ( |
|
||||||
<iframe |
|
||||||
id="frame-gantt" |
|
||||||
src={url} |
|
||||||
style={{ |
|
||||||
width: '100%', |
|
||||||
height: '50vh', |
|
||||||
}} |
|
||||||
scrolling="no" |
|
||||||
frameBorder="0" |
|
||||||
></iframe> |
|
||||||
) |
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<RenderGantt /> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
export default Gantt; |
|
||||||
@ -1,275 +0,0 @@ |
|||||||
import React, { useEffect, useState } from 'react'; |
|
||||||
import { Row, Col, Select, Divider } from 'antd'; |
|
||||||
import moment from 'moment' |
|
||||||
import Gantt from './ganttDashboard'; |
|
||||||
import ChatDashboard from './chatDashboard'; |
|
||||||
import axios from 'axios' |
|
||||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
|
||||||
import { useParams } from 'react-router-dom'; |
|
||||||
import { Badge } from 'reactstrap'; |
|
||||||
import { BASE_OSPRO, BASE_INTEGRATION_V1, TOKEN_ADW } from '../../const/ApiConst'; |
|
||||||
import {formatRibuanDecimal} from "../../const/CustomFunc"; |
|
||||||
import ProgressBar from "./progressBar"; |
|
||||||
import numeral from 'numeral'; |
|
||||||
|
|
||||||
function BoxDashboard({ value, title, secondaryTitle, icon, bgColor }) { |
|
||||||
return ( |
|
||||||
<div style={{ backgroundColor: bgColor }} className='box-header-dashboard-project'> |
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}> |
|
||||||
<div style={{ fontSize: '0.8rem', fontWeight: 500, color: '#fff', textTransform: 'uppercase' }}>{title}</div> |
|
||||||
<div>{icon}</div> |
|
||||||
</div> |
|
||||||
<div style={{ fontSize: '1rem', fontWeight: 500, color: '#fff' }}>{value}</div> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
function RenderHealthProject({params}){ |
|
||||||
if (params == "on-budget") { |
|
||||||
return (<Badge style = {{fontSize:"18px"}} color="success">On Budget</Badge>) |
|
||||||
} else if (params == "warning") { |
|
||||||
return (<Badge style = {{fontSize:"18px"}} color="warning">Warning</Badge>) |
|
||||||
} else { |
|
||||||
return (<Badge style = {{fontSize:"18px"}} color="danger">Danger</Badge>) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const DashboardProject = () => { |
|
||||||
|
|
||||||
const { ID } = useParams(); |
|
||||||
const [STATUSPROJECT, SET_STATUSPROJECT] = useState([]) |
|
||||||
const [PROJECTMGR, SET_PROJECTMGR] = useState([]) |
|
||||||
const [RO, SET_RO] = useState([]) |
|
||||||
// Schedule
|
|
||||||
const [STARTDATE, SET_STARTDATE] = useState([]) |
|
||||||
const [BASELINEFINISHDATE, SET_BASELINEFINISHDATE] = useState([]) |
|
||||||
const [ESTFINISHDATE, SET_ESTFINISHDATE] = useState([]) |
|
||||||
// Financials
|
|
||||||
const [BCWP, SET_BCWP] = useState([]) |
|
||||||
const [ACWP, SET_ACWP] = useState([]) |
|
||||||
const [VARIANCE, SET_VARIANCE] = useState([]) |
|
||||||
const [PROGRESS, SET_PROGRESS] = useState([]) |
|
||||||
const [BUDGET, SET_BUDGET] = useState([]) |
|
||||||
const [PROJECTNAME, SET_PROJECTNAME] = useState([]) |
|
||||||
const [CURRENCYSYMBOL, SET_CURRENCYSYMBOL] = useState([]) |
|
||||||
const [BUDGETHEALTH, SET_BUDGETHEALTH] = useState([]) |
|
||||||
const [COMMENT, SET_COMMENT] = useState([]) |
|
||||||
const [MANPOWER, SET_MANPOWER] = useState([0]) |
|
||||||
|
|
||||||
const token = localStorage.getItem("token") |
|
||||||
const HEADER = { |
|
||||||
headers: { |
|
||||||
"Content-Type": "application/json", |
|
||||||
"Authorization": `Bearer ${token}` |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const HEADER_INTEGRASI = { |
|
||||||
headers: { |
|
||||||
"Content-Type": "application/json", |
|
||||||
"Authorization": `${TOKEN_ADW}` |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const getProjectDetail = async () => { |
|
||||||
const URL = `${BASE_OSPRO}/api/project/dashboard/${ID}` |
|
||||||
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
||||||
|
|
||||||
if (result.data.code !== 200) { |
|
||||||
NotificationManager.error(result.data.message, 'Failed'); |
|
||||||
} |
|
||||||
|
|
||||||
if(result.data.code == 200) { |
|
||||||
let resData = result.data.data; |
|
||||||
SET_BUDGET(resData.rencana_biaya) |
|
||||||
SET_PROJECTMGR(resData.pm) |
|
||||||
SET_RO(resData.company) |
|
||||||
SET_PROJECTNAME(resData.name_project) |
|
||||||
SET_STARTDATE(resData.start) |
|
||||||
SET_BASELINEFINISHDATE(resData.finish) |
|
||||||
SET_CURRENCYSYMBOL(resData.currency_symbol) |
|
||||||
SET_BUDGETHEALTH(resData.budget_health) |
|
||||||
SET_ACWP(resData.actual_cost) |
|
||||||
SET_PROGRESS(resData.progress) |
|
||||||
SET_COMMENT(resData.comment) |
|
||||||
SET_MANPOWER(resData.man_power) |
|
||||||
getDataCostActual(resData.kode_sortname); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const getDataCostActual = async (kode_project) => { |
|
||||||
const URL = `${BASE_INTEGRATION_V1}/api/project_cost?project_no=${kode_project}` |
|
||||||
const result = await axios.get(URL, HEADER_INTEGRASI).then(res => res).catch(err => err.response) |
|
||||||
if (!result.data.data) { |
|
||||||
NotificationManager.error('Integrasi Cost Actual Failed', 'Failed'); |
|
||||||
}else { |
|
||||||
SET_ACWP(result.data.data.total_cost) |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
getProjectDetail(); |
|
||||||
}, []) |
|
||||||
|
|
||||||
|
|
||||||
return ( |
|
||||||
<div style={{ margin: "10px" }}> |
|
||||||
<Row> |
|
||||||
<Col span={9}> |
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', margin: '0 5px' }} className="box-header-dashboard-project"> |
|
||||||
<div><i style={{ color: 'teal' }} class="zmdi zmdi-assignment zmdi-hc-lg"></i></div> |
|
||||||
<div style={{ textTransform: 'uppercase' }}>Project </div> |
|
||||||
<div style={{ fontWeight: 500, color: '#404040', textTransform: 'uppercase' }}> {PROJECTNAME}</div> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
<Col span={4}> |
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', margin: '0 5px' }} className="box-header-dashboard-project"> |
|
||||||
<div><i style={{ color: '#0284c7' }} class="zmdi zmdi-account zmdi-hc-lg"></i></div> |
|
||||||
<div style={{ textTransform: 'uppercase' }}>PM</div> |
|
||||||
<div style={{ fontWeight: 500, color: '#404040', textTransform: 'uppercase' }}>{PROJECTMGR}</div> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
<Col span={7}> |
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', margin: '0 5px' }} className="box-header-dashboard-project"> |
|
||||||
<div><i style={{ color: '#b91c1c' }} class="zmdi zmdi-home zmdi-hc-lg"></i></div> |
|
||||||
<div style={{ textTransform: 'uppercase' }}>Customer</div> |
|
||||||
<div style={{ fontWeight: 500, color: '#404040', textTransform: 'uppercase' }}>{RO}</div> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
<Col span={4}> |
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', margin: '0 5px' }} className="box-header-dashboard-project"> |
|
||||||
<div><i style={{ color: '#e68a00' }} class="zmdi zmdi-calendar-alt zmdi-hc-lg"></i></div> |
|
||||||
<div style={{ textTransform: 'uppercase' }}>Date</div> |
|
||||||
<div style={{ fontWeight: 500, color: '#404040' }}>{moment().format("DD-MM-YYYY")}</div> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<div style={{ paddingTop: 20 }}> |
|
||||||
<Row> |
|
||||||
<Col span={9}> |
|
||||||
<div style={{ margin: '0 5px' }} className="box-header-dashboard-project"> |
|
||||||
<div style={{ margin: '5px 0' }}><h6>SCHEDULE</h6></div> |
|
||||||
<div style={{ padding: '5px 0' }}> |
|
||||||
<Row> |
|
||||||
<Col span={2}><i style={{ color: 'teal' }} class="zmdi zmdi-calendar-alt zmdi-hc-lg"></i></Col> |
|
||||||
<Col span={22}> |
|
||||||
<div style={{ textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}> |
|
||||||
<div>Start Date</div> |
|
||||||
<div style={{ fontWeight: 500, color: '#8c8c8c' }}>{moment(STARTDATE).format("LL")}</div> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</div> |
|
||||||
<div style={{ padding: '5px 0' }}> |
|
||||||
<Row> |
|
||||||
<Col span={2}><i style={{ color: 'teal' }} class="zmdi zmdi-calendar-alt zmdi-hc-lg"></i></Col> |
|
||||||
<Col span={22}> |
|
||||||
<div style={{ textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}> |
|
||||||
<div>Baseline Finish Date</div> |
|
||||||
<div style={{ fontWeight: 500, color: '#8c8c8c' }}>{moment(BASELINEFINISHDATE).format("LL")}</div> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</div> |
|
||||||
<div style={{ padding: '5px 0' }}> |
|
||||||
<Row> |
|
||||||
<Col span={2}><i style={{ color: 'teal' }} class="zmdi zmdi-calendar-alt zmdi-hc-lg"></i></Col> |
|
||||||
<Col span={22}> |
|
||||||
<div style={{ textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}> |
|
||||||
<div>Estimated Finish Date</div> |
|
||||||
<div style={{ fontWeight: 500, color: '#8c8c8c' }}>{moment(ESTFINISHDATE).format("LL")}</div> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
<Col span={10}> |
|
||||||
<div style={{ margin: '0 5px' }} className="box-header-dashboard-project"> |
|
||||||
<div style={{ margin: '5px 0' }}><h6>FINANCIALS</h6></div> |
|
||||||
<div style={{ padding: '5px 0' }}> |
|
||||||
<Row> |
|
||||||
<Col span={2}><i style={{ color: '#059669' }} class="zmdi zmdi-money zmdi-hc-lg"></i></Col> |
|
||||||
<Col span={22}> |
|
||||||
<div style={{ textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}> |
|
||||||
<div>Budget Proyek</div> |
|
||||||
<div style={{ fontWeight: 500, color: '#8c8c8c' }}>{`${formatRibuanDecimal(BUDGET)}`}</div> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</div> |
|
||||||
<div style={{ padding: '5px 0' }}> |
|
||||||
<Row> |
|
||||||
<Col span={2}><i style={{ color: '#059669' }} class="zmdi zmdi-money zmdi-hc-lg"></i></Col> |
|
||||||
<Col span={22}> |
|
||||||
<div style={{ textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}> |
|
||||||
<div>Actual Cost</div> |
|
||||||
<div style={{ fontWeight: 500, color: '#8c8c8c' }}>{`${formatRibuanDecimal(ACWP)}`}</div> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</div> |
|
||||||
<div style={{ padding: '5px 0' }}> |
|
||||||
<Row> |
|
||||||
<Col span={2}><i style={{ color: '#059669' }} class="zmdi zmdi-money zmdi-hc-lg"></i></Col> |
|
||||||
<Col span={22}> |
|
||||||
<div style={{ textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}> |
|
||||||
<div>Variance</div> |
|
||||||
<div style={{ fontWeight: 500, color: '#8c8c8c' }}>{`${formatRibuanDecimal(BUDGET - ACWP)}`}</div> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
</Col> |
|
||||||
<Col span={5}> |
|
||||||
<div style={{ backgroundColor: "#059669" }} className='box-header-dashboard-project'> |
|
||||||
<div style={{ display: 'flex', justifyContent: 'center' }}> |
|
||||||
<div style={{ fontSize: '0.8rem', fontWeight: 500, color: '#fff', textTransform: 'uppercase' }}>Progress</div> |
|
||||||
</div> |
|
||||||
<ProgressBar bgcolor="#ffc355" completed={PROGRESS} /> |
|
||||||
</div> |
|
||||||
<Row> |
|
||||||
<Col span={12}> |
|
||||||
<div style={{ margin: '5px 0' }} className="box-header-dashboard-project"> |
|
||||||
<div style={{ display: 'flex', justifyContent: 'center' }}> |
|
||||||
<div style={{ marginBottom: '5px', fontSize: '0.7rem', fontWeight: '500' }}>HEALTH PROJECT</div> |
|
||||||
</div> |
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-evenly', }}> |
|
||||||
<RenderHealthProject params = {`${BUDGETHEALTH}`}/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
<Col span={12}> |
|
||||||
<div style={{ margin: '5px 0' }} className="box-header-dashboard-project"> |
|
||||||
<div style={{ display: 'flex', justifyContent: 'center' }}> |
|
||||||
<div style={{ marginBottom: '5px', fontSize: '0.7rem', fontWeight: '500' }}>MANPOWER</div> |
|
||||||
</div> |
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-evenly', }}> |
|
||||||
<div style={{ fontWeight: 500, color: '#404040', fontSize: '18px', textTransform: 'uppercase' }}>{MANPOWER}</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
{/* </div> */} |
|
||||||
|
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</div> |
|
||||||
<div style={{ paddingTop: 20 }}> |
|
||||||
<Row> |
|
||||||
<Col span={19}> |
|
||||||
</Col> |
|
||||||
<Col span={5}> |
|
||||||
<ChatDashboard |
|
||||||
dataParams = {COMMENT}/> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
export default DashboardProject; |
|
||||||
@ -1,37 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
|
|
||||||
const ProgressBar = (props) => { |
|
||||||
const { bgcolor, completed } = props; |
|
||||||
|
|
||||||
const containerStyles = { |
|
||||||
height: 25, |
|
||||||
width: '100%', |
|
||||||
backgroundColor: "#e0e0de", |
|
||||||
borderRadius: 50, |
|
||||||
margin: 0 |
|
||||||
} |
|
||||||
|
|
||||||
const fillerStyles = { |
|
||||||
height: '100%', |
|
||||||
width: `${completed}%`, |
|
||||||
backgroundColor: bgcolor, |
|
||||||
borderRadius: 'inherit', |
|
||||||
textAlign: 'right' |
|
||||||
} |
|
||||||
|
|
||||||
const labelStyles = { |
|
||||||
padding: 5, |
|
||||||
color: 'white', |
|
||||||
fontWeight: 'bold' |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div style={containerStyles}> |
|
||||||
<div style={fillerStyles}> |
|
||||||
<span style={labelStyles}>{`${completed}%`}</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default ProgressBar; |
|
||||||
@ -1,72 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import { Table, Tag, Space } from 'antd'; |
|
||||||
const columns = [ |
|
||||||
{ |
|
||||||
title: 'No', |
|
||||||
dataIndex: 'carNo', |
|
||||||
key: 'carNo', |
|
||||||
fixed: 'left', |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Description', |
|
||||||
dataIndex: 'description', |
|
||||||
key: 'description', |
|
||||||
width: 350 |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Severity', |
|
||||||
dataIndex: 'severity', |
|
||||||
key: 'severity', |
|
||||||
render: text => { |
|
||||||
return text == 'low' ? <div className="badge" style={{ backgroundColor: '#e6e600' }}>LOW</div> : |
|
||||||
text == 'medium' ? <div className="badge badge-orange" style={{ backgroundColor: 'orange' }}>MEDIUM</div> : |
|
||||||
<div className="badge badge-danger">HIGH</div> |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Status', |
|
||||||
dataIndex: 'status', |
|
||||||
key: 'status', |
|
||||||
render: text => { |
|
||||||
return text == 'open' ? <div className="badge badge-primary">OPEN</div> : |
|
||||||
text == 'on-progress' ? <div className="badge badge-warning">ON PROGRESS</div> : |
|
||||||
<div className="badge badge-success">DONE</div> |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Assigned', |
|
||||||
dataIndex: 'assigned', |
|
||||||
key: 'assigned', |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Due', |
|
||||||
dataIndex: 'due', |
|
||||||
key: 'due', |
|
||||||
} |
|
||||||
]; |
|
||||||
const data = [ |
|
||||||
{ |
|
||||||
key: '1', |
|
||||||
carNo: 'RIS001', |
|
||||||
description: 'Test Analyst on unplanned leave, risk to project if leave extends pas 5/20', |
|
||||||
severity: 'medium', |
|
||||||
status: 'on-progress', |
|
||||||
due: '05/04/2022', |
|
||||||
assigned: 'John Lennon' |
|
||||||
}, |
|
||||||
{ |
|
||||||
key: '2', |
|
||||||
carNo: 'RIS002', |
|
||||||
description: 'Coffee machine broken, result in extra long breaks to find coffee', |
|
||||||
severity: 'low', |
|
||||||
status: 'open', |
|
||||||
due: '14/011/2022', |
|
||||||
assigned: 'Robert William' |
|
||||||
}, |
|
||||||
]; |
|
||||||
const TableDashboard = () => { |
|
||||||
return ( |
|
||||||
<Table size="small" columns={columns} dataSource={data} scroll={{ y: 300 }} /> |
|
||||||
); |
|
||||||
} |
|
||||||
export default TableDashboard; |
|
||||||
@ -1,51 +0,0 @@ |
|||||||
import React, { Component } from 'react' |
|
||||||
import DataTable from '../../../components/DataTable' |
|
||||||
import {API_LIST_DATA_COUNTRY, API_INSERT_DATA_COUNTRY, API_UPDATE_DATA_COUNTRY, API_DELETE_DATA_COUNTRY } from '../../../const/ApiConst.js' |
|
||||||
|
|
||||||
|
|
||||||
const columns = [{ |
|
||||||
dataField: 'id', |
|
||||||
alias: "Id", |
|
||||||
showInput: false, |
|
||||||
type: "number", |
|
||||||
state: 0 |
|
||||||
}, { |
|
||||||
dataField: 'country_name', |
|
||||||
alias: "Country Name", |
|
||||||
showInput: true, |
|
||||||
type: "text", |
|
||||||
state: "" |
|
||||||
}, { |
|
||||||
dataField: 'last_updated', |
|
||||||
alias: "Last Updated", |
|
||||||
showInput: false, |
|
||||||
type: "text", |
|
||||||
state: "" |
|
||||||
}]; |
|
||||||
|
|
||||||
class MasterCountry extends Component { |
|
||||||
constructor(props) { |
|
||||||
super(props) |
|
||||||
this.state = {} |
|
||||||
} |
|
||||||
|
|
||||||
componentDidMount() {} |
|
||||||
|
|
||||||
render() { |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<DataTable |
|
||||||
title="Country" |
|
||||||
columns={columns} |
|
||||||
urlParamGet={API_LIST_DATA_COUNTRY} |
|
||||||
urlParamInsert={API_INSERT_DATA_COUNTRY} |
|
||||||
urlParamUpdate={API_UPDATE_DATA_COUNTRY} |
|
||||||
urlParamDelete={API_DELETE_DATA_COUNTRY} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
export default MasterCountry; |
|
||||||
@ -1,6 +0,0 @@ |
|||||||
{ |
|
||||||
"name": "MasterCountry", |
|
||||||
"version": "0.0.0", |
|
||||||
"private": true, |
|
||||||
"main": "./MasterCountry.js" |
|
||||||
} |
|
||||||
@ -1,156 +0,0 @@ |
|||||||
import React, { Component } from 'react' |
|
||||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
|
||||||
import { Col, Row, Button, Form, FormGroup, Label, Input } from 'reactstrap'; |
|
||||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
|
||||||
import axios from 'axios' |
|
||||||
|
|
||||||
|
|
||||||
const BASE_URL = "https://oslog.id/geohr-api/"; |
|
||||||
const formState = { |
|
||||||
dataTable: [], |
|
||||||
openDialog: false, |
|
||||||
name: '', |
|
||||||
description: '', |
|
||||||
id: 0, |
|
||||||
idData: 0, |
|
||||||
nameMessage: "", |
|
||||||
} |
|
||||||
|
|
||||||
const ERROR_NAME = "name cannot be empty" |
|
||||||
export default class DialogForm extends Component { |
|
||||||
state = { |
|
||||||
...formState |
|
||||||
} |
|
||||||
|
|
||||||
componentDidUpdate(prevProps, prevState) { |
|
||||||
const { dataEdit, methodAct } = this.props |
|
||||||
if ((prevProps.dataEdit !== dataEdit) && (methodAct == "Edit" || methodAct == "View")) { |
|
||||||
this.setState({ |
|
||||||
idData: dataEdit.id, |
|
||||||
name: dataEdit.name, |
|
||||||
description: dataEdit.description, |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
handleSave = async () => { |
|
||||||
const err = this.handleValidation(); |
|
||||||
let url = BASE_URL + "group-sales/add" |
|
||||||
const { name, description, idData } = this.state |
|
||||||
const { methodAct } = this.props |
|
||||||
console.log(`methodAct`, methodAct) |
|
||||||
if (methodAct === "Add") { |
|
||||||
if (!err) { |
|
||||||
|
|
||||||
const payload = { |
|
||||||
name, |
|
||||||
description, |
|
||||||
} |
|
||||||
const result = await axios.post(url, payload) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
console.log(`result`, result) |
|
||||||
if (result.data.message === "OK") { |
|
||||||
this.props.closeDialog() |
|
||||||
this.setState({ |
|
||||||
...formState, |
|
||||||
}) |
|
||||||
NotificationManager.success('Data group sales berhasil ditambahkan!!', 'Success!!'); |
|
||||||
} else { |
|
||||||
NotificationManager.error(result.data.message); |
|
||||||
} |
|
||||||
} |
|
||||||
} else if (methodAct === "Edit") { |
|
||||||
if (!err) { |
|
||||||
let urlEdit = BASE_URL + `group-sales/${idData}/edit`; |
|
||||||
const payload = { |
|
||||||
name, |
|
||||||
description, |
|
||||||
} |
|
||||||
|
|
||||||
const result = await axios.put(urlEdit, payload) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
console.log(`result edit`, result) |
|
||||||
|
|
||||||
if (result.data.message === "OK") { |
|
||||||
this.props.closeDialog() |
|
||||||
this.setState({ |
|
||||||
...formState, |
|
||||||
}) |
|
||||||
NotificationManager.success('Data group sales berhasil diedit!!', 'Success!!'); |
|
||||||
} else { |
|
||||||
NotificationManager.error(result.data.message); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
handleCancel = () => { |
|
||||||
this.props.closeDialog() |
|
||||||
this.setState({ |
|
||||||
...formState |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
handleValidation = () => { |
|
||||||
const { name } = this.state |
|
||||||
let isError = false; |
|
||||||
const errors = { |
|
||||||
nameMessage: "", |
|
||||||
} |
|
||||||
if (name === "") { |
|
||||||
isError = true |
|
||||||
errors.nameMessage = ERROR_NAME |
|
||||||
} |
|
||||||
this.setState({ |
|
||||||
nameMessage: "", |
|
||||||
...errors, |
|
||||||
}); |
|
||||||
|
|
||||||
return isError; |
|
||||||
} |
|
||||||
|
|
||||||
renderForm = () => { |
|
||||||
const { name, description, nameMessage } = this.state |
|
||||||
return ( |
|
||||||
<Row form> |
|
||||||
<Col md={12}> |
|
||||||
<FormGroup> |
|
||||||
<Label for="exampleEmail">Name</Label> |
|
||||||
<Input type="text" value={name} onChange={ |
|
||||||
(e) => this.setState({ |
|
||||||
name: e.target.value, |
|
||||||
nameMessage: e.target.value !== "" ? "" : ERROR_NAME |
|
||||||
})} placeholder="name" invalid={nameMessage} /> |
|
||||||
</FormGroup> |
|
||||||
</Col> |
|
||||||
<Col md={12}> |
|
||||||
<FormGroup> |
|
||||||
<Label>Description</Label> |
|
||||||
<Input type="text" value={description} onChange={(e) => this.setState({ description: e.target.value })} placeholder="description " /> |
|
||||||
</FormGroup> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
render() { |
|
||||||
const { openDialog, closeDialog, methodAct } = this.props |
|
||||||
return ( |
|
||||||
<Modal isOpen={openDialog} toggle={openDialog} size="md"> |
|
||||||
<ModalHeader toggle={closeDialog}>{methodAct} Group Sales</ModalHeader> |
|
||||||
<ModalBody> |
|
||||||
<Form> |
|
||||||
{this.renderForm()} |
|
||||||
</Form> |
|
||||||
</ModalBody> |
|
||||||
<ModalFooter> |
|
||||||
<Button color="primary" onClick={this.handleSave}>{methodAct}</Button>{' '} |
|
||||||
<Button color="secondary" onClick={this.handleCancel}>Cancel</Button> |
|
||||||
</ModalFooter> |
|
||||||
</Modal> |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,291 +0,0 @@ |
|||||||
import React, { Component } from 'react'; |
|
||||||
import { Card, CardBody, CardHeader, Col, Row, Table, Input, InputGroupButtonDropdown, DropdownToggle, DropdownItem, DropdownMenu, InputGroup } from 'reactstrap'; |
|
||||||
import BootstrapTable from 'react-bootstrap-table-next'; |
|
||||||
import { Button } from 'reactstrap'; |
|
||||||
import axios from 'axios'; |
|
||||||
import SweetAlert from 'react-bootstrap-sweetalert'; |
|
||||||
import DialogForm from './DialogForm'; |
|
||||||
import paginationFactory from 'react-bootstrap-table2-paginator'; |
|
||||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
|
||||||
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; |
|
||||||
import { Pagination } from 'antd'; |
|
||||||
import { Tooltip } from 'reactstrap'; |
|
||||||
|
|
||||||
const BASE_URL = "https://oslog.id/geohr-api/"; |
|
||||||
|
|
||||||
const { SearchBar } = Search; |
|
||||||
|
|
||||||
const NoDataIndication = () => ( |
|
||||||
<div className="spinner"> |
|
||||||
<div className="rect1" /> |
|
||||||
<div className="rect2" /> |
|
||||||
<div className="rect3" /> |
|
||||||
</div> |
|
||||||
); |
|
||||||
|
|
||||||
const column = [ |
|
||||||
{ name: "Name" }, |
|
||||||
{ name: "Description" }, |
|
||||||
] |
|
||||||
|
|
||||||
const LENGTH_DATA = 10 |
|
||||||
export default class index extends Component { |
|
||||||
constructor(props) { |
|
||||||
super(props) |
|
||||||
this.state = { |
|
||||||
data: [], |
|
||||||
openDialog: false, |
|
||||||
typeDialog: 'Save', |
|
||||||
dataEdit: null, |
|
||||||
alertDelete: false, |
|
||||||
idDelete: 0, |
|
||||||
search: "", |
|
||||||
alert: false, |
|
||||||
methodAct: "Add", |
|
||||||
page: 0, |
|
||||||
totalPage: 0, |
|
||||||
rowsPerPage: LENGTH_DATA, |
|
||||||
currentPage: 1, |
|
||||||
splitButtonOpen: false, |
|
||||||
searchDetail: "All", |
|
||||||
searchDetailField: "name", |
|
||||||
tooltipDelete: false, |
|
||||||
tooltipEdit: false |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
async componentDidMount() { |
|
||||||
const { page, rowsPerPage } = this.state |
|
||||||
this.getDataGroupSales(page, rowsPerPage); |
|
||||||
} |
|
||||||
async componentDidUpdate(prevProps, prevState) { |
|
||||||
const { search, rowsPerPage, page } = this.state |
|
||||||
|
|
||||||
if (page !== prevState.page) { |
|
||||||
this.getDataGroupSales(page, rowsPerPage) |
|
||||||
} |
|
||||||
|
|
||||||
if (rowsPerPage !== prevState.rowsPerPage) { |
|
||||||
this.getDataGroupSales(0, rowsPerPage) |
|
||||||
this.setState({ page: 0 }) |
|
||||||
} |
|
||||||
|
|
||||||
if (search !== prevState.search) { |
|
||||||
this.getDataGroupSales(0, rowsPerPage) |
|
||||||
this.setState({ page: 0 }) |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
handleSearch = e => { |
|
||||||
const value = e.target.value |
|
||||||
this.setState({ search: value, page: 0 }) |
|
||||||
}; |
|
||||||
|
|
||||||
|
|
||||||
getDataGroupSales = async (start, length) => { |
|
||||||
const { search, rowsPerPage, searchDetail, searchDetailField } = this.state |
|
||||||
let url = BASE_URL + "group-sales/search"; |
|
||||||
const obj = { |
|
||||||
"paging": { "start": start, "length": length }, |
|
||||||
...searchDetail === "All" && |
|
||||||
{ |
|
||||||
"filter_columns": [ |
|
||||||
{ "name": "name", "value": search.toString() }, |
|
||||||
{ "name": "description", "value": search.toString() }, |
|
||||||
], |
|
||||||
}, |
|
||||||
...searchDetail !== "All" && |
|
||||||
{ |
|
||||||
"columns": [ |
|
||||||
{ "name": searchDetailField, "logic_operator": "ilike", "operator": "and", "value": search.toString() } |
|
||||||
] |
|
||||||
}, |
|
||||||
"orders": { "columns": ["created_date"], "ascending": false } |
|
||||||
} |
|
||||||
|
|
||||||
const result = await axios |
|
||||||
.post(url, obj) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
if (result.data.message == "OK") { |
|
||||||
console.log(`result data`, result.data.data) |
|
||||||
this.setState({ data: result.data.data, totalPage: result.data.totalRecord }); |
|
||||||
} else { |
|
||||||
NotificationManager.error('Failed retreiving data!!', 'Failed'); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
handleOpenDialog = () => { |
|
||||||
this.setState({ openDialog: true, methodAct: "Add" }) |
|
||||||
} |
|
||||||
|
|
||||||
handleCloseDialog = () => { |
|
||||||
this.setState({ openDialog: false }) |
|
||||||
this.getDataGroupSales() |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
handleEditData = (data) => { |
|
||||||
this.setState({ dataEdit: data, openDialog: true, methodAct: "Edit" }) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
onDelete = (id) => { |
|
||||||
this.setState({ |
|
||||||
alertDelete: true, |
|
||||||
idDelete: id |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
handleDeleted = async (param) => { |
|
||||||
const { idDelete } = this.state |
|
||||||
|
|
||||||
if (param === "delete") { |
|
||||||
const result = await axios.delete(`${BASE_URL}/group-sales/${idDelete}/delete`) |
|
||||||
.then((response) => response) |
|
||||||
.catch((error) => error.response) |
|
||||||
this.setState({ |
|
||||||
alertDelete: false, |
|
||||||
alert: true |
|
||||||
}) |
|
||||||
await this.getDataGroupSales() |
|
||||||
} else { |
|
||||||
this.setState({ |
|
||||||
alertDelete: false |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
onShowSizeChange = (current, pageSize) => { |
|
||||||
this.setState({ rowsPerPage: pageSize }) |
|
||||||
} |
|
||||||
|
|
||||||
onPagination = (current, pageSize) => { |
|
||||||
this.setState({ currentPage: current, page: (current - 1) * pageSize }) |
|
||||||
} |
|
||||||
|
|
||||||
toggleDropDown = () => { |
|
||||||
this.setState(prevState => ({ splitButtonOpen: !prevState.splitButtonOpen })) |
|
||||||
} |
|
||||||
|
|
||||||
toggle = (param) => { |
|
||||||
if (param === "edit") { |
|
||||||
this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit })) |
|
||||||
} else if (param === "delete") { |
|
||||||
this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete })) |
|
||||||
} |
|
||||||
} |
|
||||||
render() { |
|
||||||
const { openDialog, data, search, alert, page, totalPage, rowsPerPage, currentPage, searchDetail, searchDetailField, splitButtonOpen, tooltipEdit, tooltipDelete } = this.state |
|
||||||
let noSeq = 0; |
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<NotificationContainer /> |
|
||||||
<SweetAlert show={alert} success title="deleted successfully!" onConfirm={() => this.setState({ alert: false })} onCancel={() => this.setState({ alert: false })}> |
|
||||||
You clicked the button! |
|
||||||
</SweetAlert> |
|
||||||
<SweetAlert |
|
||||||
show={this.state.alertDelete} |
|
||||||
warning |
|
||||||
showCancel |
|
||||||
confirmBtnText="Delete" |
|
||||||
confirmBtnBsStyle="danger" |
|
||||||
title="Are you sure?" |
|
||||||
onConfirm={() => this.handleDeleted("delete")} |
|
||||||
onCancel={() => this.handleDeleted("cancel")} |
|
||||||
focusCancelBtn |
|
||||||
> |
|
||||||
Data group sales akan terhapus!! |
|
||||||
</SweetAlert> |
|
||||||
<DialogForm |
|
||||||
openDialog={openDialog} |
|
||||||
closeDialog={this.handleCloseDialog} |
|
||||||
dataEdit={this.state.dataEdit} |
|
||||||
methodAct={this.state.methodAct} |
|
||||||
/> |
|
||||||
<Card> |
|
||||||
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
|
||||||
<h4>Group Sales</h4> |
|
||||||
<Button color="primary" onClick={() => this.handleOpenDialog('Save')}>Add Group Sales</Button> |
|
||||||
</CardHeader> |
|
||||||
<CardBody> |
|
||||||
<InputGroup style={{ maxWidth: "200px", marginBottom: "20px" }}> |
|
||||||
<Input onChange={this.handleSearch} value={search} type="text" name="search" id="search" placeholder={`Search ${searchDetail}`} /> |
|
||||||
<InputGroupButtonDropdown addonType="prepend" |
|
||||||
isOpen={splitButtonOpen} |
|
||||||
toggle={this.toggleDropDown} |
|
||||||
> |
|
||||||
<DropdownToggle split outline /> |
|
||||||
<DropdownMenu> |
|
||||||
<DropdownItem onClick={ |
|
||||||
() => this.setState({ |
|
||||||
searchDetail: "All", |
|
||||||
searchDetailField: "name" |
|
||||||
})}>All</DropdownItem> |
|
||||||
<DropdownItem onClick={ |
|
||||||
() => this.setState({ |
|
||||||
searchDetail: "Name", |
|
||||||
searchDetailField: "name" |
|
||||||
})}>Name</DropdownItem> |
|
||||||
<DropdownItem onClick={ |
|
||||||
() => this.setState({ |
|
||||||
searchDetail: "Description", |
|
||||||
searchDetailField: "description" |
|
||||||
})}>Description</DropdownItem> |
|
||||||
</DropdownMenu> |
|
||||||
</InputGroupButtonDropdown> |
|
||||||
</InputGroup> |
|
||||||
<Table responsive striped hover> |
|
||||||
<thead> |
|
||||||
<tr> |
|
||||||
<th>Actions</th> |
|
||||||
{column.map((i) => { |
|
||||||
return ( |
|
||||||
<th scope="row">{i.name}</th> |
|
||||||
) |
|
||||||
})} |
|
||||||
</tr> |
|
||||||
</thead> |
|
||||||
<tbody> |
|
||||||
{data.map((n) => { |
|
||||||
return ( |
|
||||||
<tr key={n.id}> |
|
||||||
<td> |
|
||||||
{/* delete */} |
|
||||||
<i id="TooltipDelete" class="cil-trash fa-lg" style={{ color: 'red', marginRight: '10px', cursor: "pointer" }} onClick={() => this.onDelete(n.id)}></i> |
|
||||||
<Tooltip placement="right" isOpen={tooltipDelete} target="TooltipDelete" toggle={() => this.toggle("delete")}> |
|
||||||
Delete |
|
||||||
</Tooltip> |
|
||||||
|
|
||||||
{/* edit */} |
|
||||||
<i id="TooltipEdit" class="cil-pencil fa-lg" style={{ color: 'green', cursor: "pointer", marginRight: '10px', }} onClick={() => this.handleEditData(n)}></i> |
|
||||||
<Tooltip placement="right" isOpen={tooltipEdit} target="TooltipEdit" toggle={() => this.toggle("edit")}> |
|
||||||
Edit |
|
||||||
</Tooltip> |
|
||||||
{/* <i class="cil-search fa-lg" style={{ color: 'blue', cursor: "pointer" }} onClick={() => this.handleDetail(n)}></i> */} |
|
||||||
</td> |
|
||||||
<td>{n.name}</td> |
|
||||||
<td>{n.description}</td> |
|
||||||
</tr> |
|
||||||
) |
|
||||||
})} |
|
||||||
</tbody> |
|
||||||
</Table> |
|
||||||
<Pagination |
|
||||||
showSizeChanger |
|
||||||
onShowSizeChange={this.onShowSizeChange} |
|
||||||
onChange={this.onPagination} |
|
||||||
defaultCurrent={currentPage} |
|
||||||
pageSize={rowsPerPage} |
|
||||||
total={totalPage} |
|
||||||
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]} |
|
||||||
/> |
|
||||||
</CardBody> |
|
||||||
</Card> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,581 +0,0 @@ |
|||||||
import React, { Component } from 'react' |
|
||||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
|
||||||
import { Col, Row, Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap'; |
|
||||||
import Select from 'react-select' |
|
||||||
import axios from 'axios'; |
|
||||||
import moment from 'moment'; |
|
||||||
import { DatePicker } from 'antd'; |
|
||||||
import 'antd/dist/antd.css'; |
|
||||||
import { BASE_URL_GEOHR_API2 } from '../../../const/ApiConst' |
|
||||||
import '../MasterDataStyles.css' |
|
||||||
import SweetAlert from 'react-bootstrap-sweetalert'; |
|
||||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
|
||||||
|
|
||||||
|
|
||||||
const format = 'YYYY-MM-DD'; |
|
||||||
let countError = 0; |
|
||||||
const listGender = [ |
|
||||||
{ |
|
||||||
"value": "L", |
|
||||||
"label": "Laki-laki" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"value": "P", |
|
||||||
"label": "Perempuan" |
|
||||||
}] |
|
||||||
|
|
||||||
const listBlood = [ |
|
||||||
{ |
|
||||||
"value": "A", |
|
||||||
"label": "A" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"value": "AB", |
|
||||||
"label": "AB" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"value": "B", |
|
||||||
"label": "B" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"value": "O", |
|
||||||
"label": "O" |
|
||||||
}] |
|
||||||
|
|
||||||
const API = `https://oslog.id/geohr-api` |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default class DialogForm extends Component { |
|
||||||
constructor(props) { |
|
||||||
super(props) |
|
||||||
this.state = { |
|
||||||
id: 0, |
|
||||||
idDivision:0, |
|
||||||
idRoles:0, |
|
||||||
name:"", |
|
||||||
email:"", |
|
||||||
phoneNumber:"", |
|
||||||
username:"", |
|
||||||
password:"", |
|
||||||
address:"", |
|
||||||
birthPlace: "", |
|
||||||
birthDate: null, |
|
||||||
currentSelectGender: null,
|
|
||||||
hobby: "", |
|
||||||
openDialog: false, |
|
||||||
isParentClick: false, |
|
||||||
currentSelectVal: null, |
|
||||||
dataDivision:[], |
|
||||||
listDivisionSelect:[], |
|
||||||
selectDisable: false, |
|
||||||
dataRoles:[], |
|
||||||
listRolesSelect:[], |
|
||||||
selectDisableRoles: false, |
|
||||||
currentSelectRoles: null, |
|
||||||
currentSelectBlood: null, |
|
||||||
selectDisableBlood: false, |
|
||||||
nik: "", |
|
||||||
files: [], |
|
||||||
showImg: false, |
|
||||||
getUrl: "", |
|
||||||
namePhoto: "", |
|
||||||
alertDelete: false, |
|
||||||
idDelete: 0 , |
|
||||||
dataPhoto: null |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
fileSelectedHandler = (e) => { |
|
||||||
this.setState({ files: [...this.state.files, ...e.target.files] }, () => { |
|
||||||
console.log('test data foto', this.state.files) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
async componentDidMount(){ |
|
||||||
this.getDataRoles() |
|
||||||
this.props.showDialog(this.showDialog); |
|
||||||
} |
|
||||||
|
|
||||||
async componentDidUpdate (prevProps, prevState){ |
|
||||||
const { dataEdit } = this.props |
|
||||||
|
|
||||||
if(this.state.isParentClick===true){ |
|
||||||
if(this.props.typeDialog==="Edit" || this.props.typeDialog==="View"){ |
|
||||||
|
|
||||||
if(dataEdit.role_id!=="" && dataEdit.role_id!==null && dataEdit.role_id!==undefined){ |
|
||||||
this.searchRoles(dataEdit.role_id); |
|
||||||
}
|
|
||||||
|
|
||||||
this.getUrlImagery(dataEdit.id) |
|
||||||
|
|
||||||
this.setState({
|
|
||||||
id:dataEdit.id, |
|
||||||
idRoles: dataEdit.role_id, |
|
||||||
idDivision:dataEdit.employee_division_id, |
|
||||||
username:dataEdit.username || "", |
|
||||||
name:dataEdit.name || "", |
|
||||||
email:dataEdit.email || "", |
|
||||||
password:"", |
|
||||||
phoneNumber:dataEdit.phone_number || "", |
|
||||||
address:dataEdit.address || "", |
|
||||||
birthPlace: dataEdit.birth_place || "", |
|
||||||
birthDate: dataEdit.birth_date || null, |
|
||||||
currentSelectGender: dataEdit.gender ? listGender.find((x) => x.value === dataEdit.gender) : null,
|
|
||||||
hobby: dataEdit.hobby || "", |
|
||||||
nik: dataEdit.ktp_number || "", |
|
||||||
currentSelectBlood: dataEdit.blood_type ? listBlood.find((x) => x.value === dataEdit.blood_type) : null,
|
|
||||||
}) |
|
||||||
}else{ |
|
||||||
this.setState({
|
|
||||||
id:0, |
|
||||||
idDivision:0, |
|
||||||
idRoles:0, |
|
||||||
name:"", |
|
||||||
email:"", |
|
||||||
password:"", |
|
||||||
phoneNumber:"", |
|
||||||
address:"", |
|
||||||
username:"", |
|
||||||
birthPlace: "", |
|
||||||
birthDate: null, |
|
||||||
currentSelectGender: null,
|
|
||||||
hobby: "", |
|
||||||
currentSelectVal:null, |
|
||||||
currentSelectRoles:null, |
|
||||||
nik: "", |
|
||||||
currentSelectBlood: null, |
|
||||||
files: [] |
|
||||||
}) |
|
||||||
} |
|
||||||
this.setState({isParentClick:false}); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
closeImg = () => { |
|
||||||
this.setState({ showImg: false }) |
|
||||||
} |
|
||||||
|
|
||||||
getUrlImagery = async (param) => { |
|
||||||
const payload = { |
|
||||||
"paging": { "start": 0, "length": -1 }, |
|
||||||
"columns": [ |
|
||||||
{ "name": "category", "logic_operator": "=", "value": "employee", "operator": "and" }, |
|
||||||
{ "name": "ref_id", "logic_operator": "=", "value": param.toString(), "operator": "and" } |
|
||||||
], |
|
||||||
"orders": { "columns": ["id"], "ascending": true } |
|
||||||
} |
|
||||||
const resultUrl = await axios.post(`${API}/image/search`, payload).then(response => response).catch(err => err.response) |
|
||||||
this.setState({ files: resultUrl.data.data }) |
|
||||||
console.log(`resultUrl`, resultUrl.data.data) |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
getDataDivision = async () => { |
|
||||||
countError++; |
|
||||||
let url = BASE_URL_GEOHR_API2+`/employee_devision.php?act=get_data`; |
|
||||||
|
|
||||||
const result = await axios |
|
||||||
.get(url) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response ); |
|
||||||
console.log('cek', result) |
|
||||||
|
|
||||||
if(result && result.data && result.data.code_status === 200){ |
|
||||||
this.setState({ dataDivision:result.data.data },()=>{ |
|
||||||
this.setDataDivision(); |
|
||||||
}) |
|
||||||
}else{ |
|
||||||
if(countError<6){ |
|
||||||
this.getDataDivision(); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
getDataRoles = async () => { |
|
||||||
countError++; |
|
||||||
let url = BASE_URL_GEOHR_API2+`/roles.php?act=get_data`; |
|
||||||
|
|
||||||
const result = await axios |
|
||||||
.get(url) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response ); |
|
||||||
console.log('cek', result) |
|
||||||
|
|
||||||
if(result && result.data && result.data.code_status === 200){ |
|
||||||
this.setState({ dataRoles:result.data.data },()=>{ |
|
||||||
this.setDataRoles(); |
|
||||||
}) |
|
||||||
}else{ |
|
||||||
if(countError<6){ |
|
||||||
this.getDataRoles(); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
setDataDivision = () => { |
|
||||||
const { dataDivision } = this.state |
|
||||||
const listDivision = [] |
|
||||||
dataDivision.map((val, index)=> { |
|
||||||
listDivision.push({ |
|
||||||
value:val.id, |
|
||||||
label:val.name |
|
||||||
}) |
|
||||||
}) |
|
||||||
this.setState({ listDivisionSelect:listDivision }) |
|
||||||
} |
|
||||||
|
|
||||||
setDataRoles = () => { |
|
||||||
const { dataRoles } = this.state |
|
||||||
const listRoles = [] |
|
||||||
dataRoles.map((val, index)=> { |
|
||||||
listRoles.push({ |
|
||||||
value:val.id, |
|
||||||
label:val.name |
|
||||||
}) |
|
||||||
}) |
|
||||||
this.setState({ listRolesSelect:listRoles }) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
searchDivision = (id) => { |
|
||||||
let getIndex = this.getIndexDataDivision(id); |
|
||||||
let data = this.state.dataDivision[getIndex] |
|
||||||
this.setState({ idDivision:data.id,currentSelectVal:{value:data.id,label:data.name} }) |
|
||||||
} |
|
||||||
|
|
||||||
getIndexDataDivision = (val) => { |
|
||||||
let index = this.state.dataDivision.findIndex(obj => obj.id === val); |
|
||||||
return index |
|
||||||
} |
|
||||||
|
|
||||||
searchRoles = (id) => { |
|
||||||
let getIndex = this.getIndexDataRoles(id); |
|
||||||
let data = this.state.dataRoles[getIndex] |
|
||||||
this.setState({ idRoles:data.id,currentSelectRoles:{value:data.id,label:data.name} }) |
|
||||||
} |
|
||||||
|
|
||||||
getIndexDataRoles = (val) => { |
|
||||||
let index = this.state.dataRoles.findIndex(obj => obj.id === val); |
|
||||||
return index |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
showDialog = () => { |
|
||||||
this.setState({ isParentClick : true }); |
|
||||||
} |
|
||||||
|
|
||||||
handleDeletePhoto = (data) => { |
|
||||||
this.setState({ alertDelete: true, dataPhoto: data }, () => { |
|
||||||
console.log('data photo', this.state.dataPhoto) |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
handleSave = async () => { |
|
||||||
const {
|
|
||||||
id, |
|
||||||
idDivision, |
|
||||||
username, |
|
||||||
name, |
|
||||||
email, |
|
||||||
password, |
|
||||||
address, |
|
||||||
phoneNumber, |
|
||||||
idRoles, |
|
||||||
birthPlace, |
|
||||||
birthDate, |
|
||||||
currentSelectGender, |
|
||||||
hobby, |
|
||||||
currentSelectBlood, |
|
||||||
nik, |
|
||||||
files, |
|
||||||
currentSelectRoles |
|
||||||
} = this.state |
|
||||||
|
|
||||||
let data = ''; |
|
||||||
if(this.props.typeDialog==="Save"){ |
|
||||||
data = { |
|
||||||
idDivision, |
|
||||||
username, |
|
||||||
name, |
|
||||||
email, |
|
||||||
password, |
|
||||||
address, |
|
||||||
phoneNumber, |
|
||||||
idRoles, |
|
||||||
birthPlace, |
|
||||||
birthDate, |
|
||||||
currentSelectGender, |
|
||||||
hobby, |
|
||||||
nik, |
|
||||||
currentSelectBlood, |
|
||||||
files, |
|
||||||
currentSelectRoles |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
this.props.closeDialog('save', data); |
|
||||||
}else{ |
|
||||||
data = { |
|
||||||
id, |
|
||||||
username, |
|
||||||
name, |
|
||||||
email, |
|
||||||
password, |
|
||||||
address, |
|
||||||
phoneNumber, |
|
||||||
idDivision, |
|
||||||
idRoles, |
|
||||||
birthPlace, |
|
||||||
birthDate, |
|
||||||
currentSelectGender, |
|
||||||
hobby, |
|
||||||
nik,
|
|
||||||
currentSelectBlood, |
|
||||||
currentSelectRoles |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
console.log('test log data', data) |
|
||||||
|
|
||||||
if (files.length > 0) { |
|
||||||
const formData = new FormData() |
|
||||||
files.map((res) => { |
|
||||||
if (res) |
|
||||||
formData.append("ref_id", id); |
|
||||||
formData.append("files", res); |
|
||||||
}) |
|
||||||
await axios.post(`${API}/image/employee/upload`, formData).then(response => response).catch(err => err.response) |
|
||||||
} |
|
||||||
|
|
||||||
this.props.closeDialog('edit', data); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
this.setState({ id:0,idDivision:0,currentSelectVal:null, currentSelectRoles: null, currentSelectGender: null, currentSelectBlood: null }); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
handleCancel = () => { |
|
||||||
this.setState({ id:0,currentSelectVal:null, currentSelectRoles: null, currentSelectGender: null, currentSelectBlood: null }); |
|
||||||
this.props.closeDialog('cancel', 'none') |
|
||||||
} |
|
||||||
|
|
||||||
handleSelectGs = (inputValue, actionMeta) => { |
|
||||||
this.setState({ idDivision:inputValue.value,currentSelectVal:{ value:inputValue.value,label:inputValue.label } }) |
|
||||||
} |
|
||||||
|
|
||||||
handleSelectRoles = (inputValue, actionMeta) => { |
|
||||||
this.setState({ idRoles:inputValue.value,currentSelectRoles:{ value:inputValue.value,label:inputValue.label } }, ()=> { |
|
||||||
console.log("test select role", this.state.currentSelectRoles) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
onConfirmDeletePhoto = async () => { |
|
||||||
const { id, dataPhoto } = this.state |
|
||||||
let url = `https://oslog.id/geohr-api/image/employee/${id}/delete?files=${dataPhoto.image}` |
|
||||||
let result = await axios.delete(url) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
if(result.message!==undefined){ |
|
||||||
|
|
||||||
}else{ |
|
||||||
|
|
||||||
} |
|
||||||
console.log("test data photooo", result) |
|
||||||
|
|
||||||
if (result) { |
|
||||||
this.getUrlImagery(id) |
|
||||||
|
|
||||||
this.setState({ dataPhoto: null, alertDelete: false }) |
|
||||||
NotificationManager.success('Foto berhasil dihapus!!', 'Success!!'); |
|
||||||
} else { |
|
||||||
this.getUrlImagery(id) |
|
||||||
|
|
||||||
this.setState({ dataPhoto: null, alertDelete: false }) |
|
||||||
NotificationManager.error('Foto gagal dihapus!!', 'Failed!!'); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
renderForm = () => { |
|
||||||
const {files} = this.state |
|
||||||
const {typeDialog} = this.props |
|
||||||
let typeRole = localStorage.getItem('role_name') |
|
||||||
|
|
||||||
return( |
|
||||||
<Form> |
|
||||||
<Row> |
|
||||||
<Col md={6} xs={12}> |
|
||||||
{/* <FormGroup> |
|
||||||
<Label className="formLabel">Divisi</Label> |
|
||||||
<Select options={this.state.listDivisionSelect} onChange={this.handleSelectGs} value={this.state.currentSelectVal} isDisabled={typeDialog === "View"} /> |
|
||||||
</FormGroup> */} |
|
||||||
|
|
||||||
<Row> |
|
||||||
<Col md={6} xs={6}> |
|
||||||
<FormGroup> |
|
||||||
<Label className="formLabel">Nama Pengguna</Label> |
|
||||||
<Input readOnly={typeDialog === "View"} type="text" value={this.state.username} onChange={(e) => this.setState({username:e.target.value})} placeholder="" /> |
|
||||||
</FormGroup> |
|
||||||
</Col> |
|
||||||
<Col md={6} xs={6}> |
|
||||||
<FormGroup> |
|
||||||
<Label className="formLabel">Kata Sandi</Label> |
|
||||||
<Input readOnly={typeDialog === "View"} type="password" value={this.state.password} onChange={(e) => this.setState({password:e.target.value})} placeholder="" /> |
|
||||||
{this.props.typeDialog==="Save" ? "" : <p>*Kosongkan jika tidak ada perubahaan</p>} |
|
||||||
|
|
||||||
</FormGroup> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<FormGroup> |
|
||||||
<Label className="formLabel">NIK (KTP)</Label> |
|
||||||
<Input readOnly={typeDialog === "View"} type="text" value={this.state.nik} onChange={(e) => this.setState({nik:e.target.value})} placeholder="" /> |
|
||||||
</FormGroup> |
|
||||||
|
|
||||||
<FormGroup> |
|
||||||
<Label className="formLabel">Nama</Label> |
|
||||||
<Input readOnly={typeDialog === "View"} type="text" value={this.state.name} onChange={(e) => this.setState({name:e.target.value})} placeholder="" /> |
|
||||||
</FormGroup> |
|
||||||
|
|
||||||
<FormGroup> |
|
||||||
<Label className="formLabel">Email</Label> |
|
||||||
<Input readOnly={typeDialog === "View"} type="email" value={this.state.email} onChange={(e) => this.setState({email:e.target.value})} placeholder="" /> |
|
||||||
</FormGroup> |
|
||||||
|
|
||||||
<FormGroup> |
|
||||||
<Label className="formLabel">Nomor Telepon</Label> |
|
||||||
<Input readOnly={typeDialog === "View"} type="number" value={this.state.phoneNumber} onChange={(e) => this.setState({phoneNumber:e.target.value})} placeholder="" /> |
|
||||||
</FormGroup> |
|
||||||
|
|
||||||
<FormGroup> |
|
||||||
{typeDialog !== "View" && ( |
|
||||||
<> |
|
||||||
<Label for="exampleFile">File</Label> |
|
||||||
<Input type="file" name="file" id="exampleFile" multiple onChange={this.fileSelectedHandler} /> |
|
||||||
<FormText>Max Size 1Mb</FormText> |
|
||||||
</> |
|
||||||
)} |
|
||||||
{files && ( |
|
||||||
<div style={{ maxHeight: "300px", maxWidth: "100%", overflowY: "auto",display: "flex", flexDirection: "row" }}> |
|
||||||
{files.map((item) => { |
|
||||||
let checkImg = null |
|
||||||
if (item.image) { |
|
||||||
checkImg = `${API}/assets/images/employee/${item.image}` |
|
||||||
} else { |
|
||||||
checkImg = URL.createObjectURL(item) |
|
||||||
} |
|
||||||
return ( |
|
||||||
<div> |
|
||||||
{typeDialog === "Edit" && ( |
|
||||||
<div onClick={() => this.handleDeletePhoto(item)} style={{cursor: "pointer", position: "absolute", width: 30, height: 30, borderRadius: 30 / 2, backgroundColor: "grey", marginTop: 10, marginLeft: 10, justifyContent: "center", alignContent: "center", paddingTop: 4, paddingLeft: 5 }}> |
|
||||||
<i className="cil-trash fa-lg" style={{ color: 'red'}}></i> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
<img key={item.id} src={checkImg} alt="..." style={{ maxWidth: "150px", maxHeight: "150px" }} /> |
|
||||||
</div> |
|
||||||
) |
|
||||||
})} |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
</FormGroup> |
|
||||||
</Col> |
|
||||||
|
|
||||||
<Col md={6} xs={12}> |
|
||||||
{typeRole === "Superadmin" && ( |
|
||||||
<FormGroup> |
|
||||||
<Label className="formLabel">Roles</Label> |
|
||||||
<Select options={this.state.listRolesSelect} onChange={this.handleSelectRoles} value={this.state.currentSelectRoles} isDisabled={typeDialog === "View"} /> |
|
||||||
</FormGroup> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
<FormGroup> |
|
||||||
<Label className="formLabel">Jenis Kelamin</Label> |
|
||||||
<Select options={listGender} onChange={(inputValue, actionMeta) => this.setState({currentSelectGender: {value: inputValue.value, label: inputValue.label}})} value={this.state.currentSelectGender} isDisabled={typeDialog === "View"} /> |
|
||||||
</FormGroup> |
|
||||||
|
|
||||||
<FormGroup style={{ marginTop: 30 }}> |
|
||||||
<Label className="formLabel">Golongan Darah</Label> |
|
||||||
<Select options={listBlood} onChange={(inputValue, actionMeta) => this.setState({currentSelectBlood: {value: inputValue.value, label: inputValue.label}})} value={this.state.currentSelectBlood} isDisabled={typeDialog === "View"} /> |
|
||||||
</FormGroup> |
|
||||||
|
|
||||||
<Row> |
|
||||||
<Col md={6} xs={12}> |
|
||||||
<FormGroup> |
|
||||||
<Label className="formLabel">Tempat Lahir</Label> |
|
||||||
<Input readOnly={typeDialog === "View"} type="text" value={this.state.birthPlace} onChange={(e) => this.setState({birthPlace:e.target.value})} placeholder="" /> |
|
||||||
</FormGroup> |
|
||||||
</Col> |
|
||||||
<Col md={6} xs={12}> |
|
||||||
<FormGroup> |
|
||||||
<Label className="formLabel">Tanggal Lahir</Label> |
|
||||||
<Row> |
|
||||||
<Col md={12}> |
|
||||||
<DatePicker disabled={typeDialog === "View"} style={{width: "100%"}} onChange={(e, val) => this.setState({birthDate: val})} defaultValue={this.state.birthDate ? moment(this.state.birthDate, format) : null} /> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</FormGroup> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
|
|
||||||
<FormGroup> |
|
||||||
<Label className="formLabel">Alamat</Label> |
|
||||||
<Input readOnly={typeDialog === "View"} type="text" value={this.state.address} onChange={(e) => this.setState({address:e.target.value})} placeholder="" /> |
|
||||||
</FormGroup> |
|
||||||
|
|
||||||
<FormGroup> |
|
||||||
<Label className="formLabel">Hobby</Label> |
|
||||||
<Input readOnly={typeDialog === "View"} type="text" value={this.state.hobby} onChange={(e) => this.setState({hobby:e.target.value})} placeholder="" /> |
|
||||||
</FormGroup> |
|
||||||
|
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Form> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
render() { |
|
||||||
const {typeDialog} = this.props |
|
||||||
return ( |
|
||||||
<Modal size="xl" isOpen={this.props.openDialog} toggle={this.props.toggleDialog}> |
|
||||||
<NotificationContainer /> |
|
||||||
|
|
||||||
<SweetAlert |
|
||||||
show={this.state.alertDelete} |
|
||||||
warning |
|
||||||
showCancel |
|
||||||
confirmBtnText="Delete" |
|
||||||
confirmBtnBsStyle="danger" |
|
||||||
title="Are you sure?" |
|
||||||
onConfirm={this.onConfirmDeletePhoto} |
|
||||||
onCancel={() => this.setState({ alertDelete: false, dataPhoto: null})} |
|
||||||
focusCancelBtn |
|
||||||
> |
|
||||||
Foto Akan Terhapus!! |
|
||||||
</SweetAlert> |
|
||||||
<ModalHeader toggle={() => this.handleCancel()}>{this.props.typeDialog} Karyawan</ModalHeader> |
|
||||||
<ModalBody> |
|
||||||
{this.renderForm()} |
|
||||||
</ModalBody> |
|
||||||
{typeDialog !== "View" && ( |
|
||||||
|
|
||||||
<ModalFooter> |
|
||||||
<Button color="primary" onClick={() => this.handleSave()}>{this.props.typeDialog}</Button>{' '} |
|
||||||
<Button color="secondary" onClick={() => this.handleCancel()}>Cancel</Button> |
|
||||||
</ModalFooter> |
|
||||||
)} |
|
||||||
</Modal> |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,79 +0,0 @@ |
|||||||
import React, { Component } from 'react' |
|
||||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
|
||||||
import { Col, Row, Button, Form, FormGroup, Label, Input } from 'reactstrap'; |
|
||||||
import moment from 'moment'; |
|
||||||
import 'antd/dist/antd.css'; |
|
||||||
|
|
||||||
export default class DialogImport extends Component { |
|
||||||
constructor(props) { |
|
||||||
super(props) |
|
||||||
this.state = { |
|
||||||
dataImport:null, |
|
||||||
openDialog: false, |
|
||||||
isParentClick: false, |
|
||||||
disable: false |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
async componentDidMount(){ |
|
||||||
this.props.showDialog(this.showDialog); |
|
||||||
} |
|
||||||
|
|
||||||
async componentDidUpdate (){ |
|
||||||
if(this.state.isParentClick===true){ |
|
||||||
this.setState({isParentClick:false}); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
showDialog = () => { |
|
||||||
this.setState({ isParentClick : true }); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
handleSave = () => { |
|
||||||
const {
|
|
||||||
dataImport |
|
||||||
} = this.state |
|
||||||
|
|
||||||
|
|
||||||
this.props.closeDialog('import', dataImport); |
|
||||||
this.setState({ dataImport:null }); |
|
||||||
} |
|
||||||
|
|
||||||
handleCancel = () => { |
|
||||||
this.props.closeDialog('cancel', 'none') |
|
||||||
} |
|
||||||
|
|
||||||
importExcel = (e) => { |
|
||||||
e.preventDefault(); |
|
||||||
let file = e.target.files[0]; |
|
||||||
this.setState({dataImport:file}); |
|
||||||
} |
|
||||||
|
|
||||||
renderForm = () => { |
|
||||||
return( |
|
||||||
<Form> |
|
||||||
<FormGroup> |
|
||||||
<Label>Excel</Label> |
|
||||||
<Input type="file" onChange={this.importExcel} /> |
|
||||||
</FormGroup> |
|
||||||
</Form> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
render() { |
|
||||||
return ( |
|
||||||
<Modal isOpen={this.props.openDialog} toggle={this.props.toggleDialog}> |
|
||||||
<ModalHeader toggle={this.props.closeDialog}>Import Data Karyawan</ModalHeader> |
|
||||||
<ModalBody> |
|
||||||
{this.renderForm()} |
|
||||||
</ModalBody> |
|
||||||
<ModalFooter> |
|
||||||
<Button color="primary" onClick={() => this.handleSave()}>Import</Button>{' '} |
|
||||||
<Button color="secondary" onClick={() => this.handleCancel()}>Cancel</Button> |
|
||||||
</ModalFooter> |
|
||||||
</Modal> |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,607 +0,0 @@ |
|||||||
import React, { Component } from 'react'; |
|
||||||
import { Card, CardBody, CardHeader, Col, Row, Table, Input,InputGroup, InputGroupButtonDropdown, DropdownToggle, DropdownItem, DropdownMenu,ButtonDropdown } from 'reactstrap'; |
|
||||||
import { Button } from 'reactstrap'; |
|
||||||
import axios from 'axios'; |
|
||||||
import moment from 'moment'; |
|
||||||
import SweetAlert from 'react-bootstrap-sweetalert'; |
|
||||||
import DialogForm from './DialogForm'; |
|
||||||
import DialogImport from './DialogImport'; |
|
||||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
|
||||||
import { Pagination } from 'antd'; |
|
||||||
import { Tooltip } from 'reactstrap'; |
|
||||||
import * as XLSX from 'xlsx'; |
|
||||||
import { BASE_URL_GEOHR_API2 } from '../../../const/ApiConst' |
|
||||||
import { Icon, InlineIcon } from '@iconify/react'; |
|
||||||
import eyeFilled from '@iconify/icons-ant-design/eye-filled'; |
|
||||||
import { Link } from 'react-router-dom'; |
|
||||||
|
|
||||||
const id_org = window.localStorage.getItem('id_org'); |
|
||||||
const roleName = window.localStorage.getItem('role_name'); |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const momentFormat = 'HH:mm'; |
|
||||||
|
|
||||||
const column = [ |
|
||||||
{ name: "Organasi" }, |
|
||||||
{ name: "Nama" },
|
|
||||||
{ name: "Email" },
|
|
||||||
{ name: "Nomor Handphone" },
|
|
||||||
] |
|
||||||
|
|
||||||
const LENGTH_DATA = 10 |
|
||||||
|
|
||||||
const API = `https://oslog.id/geohr-api` |
|
||||||
|
|
||||||
|
|
||||||
export default class index extends Component { |
|
||||||
constructor(props) { |
|
||||||
super(props) |
|
||||||
this.state = { |
|
||||||
dataTable: [], |
|
||||||
finalData: [], |
|
||||||
openDialog: false, |
|
||||||
typeDialog: 'Save', |
|
||||||
dataEdit: null, |
|
||||||
alertDelete: false, |
|
||||||
idDelete: 0, |
|
||||||
dataGs: [], |
|
||||||
dataIdHo: [], |
|
||||||
search: "", |
|
||||||
page: 0, |
|
||||||
rowsPerPage: LENGTH_DATA, |
|
||||||
currentPage: 1, |
|
||||||
totalPage: 0, |
|
||||||
tooltipEdit: false, |
|
||||||
tooltipDelete: false, |
|
||||||
splitButtonOpen:false, |
|
||||||
searchDetail: "Nama", |
|
||||||
searchDetailField: "name", |
|
||||||
tooltipDetail: false, |
|
||||||
tooltipTambah:false, |
|
||||||
tooltipImport:false, |
|
||||||
tooltipExport:false, |
|
||||||
dataImport: null, |
|
||||||
aksiDropdown:false, |
|
||||||
openDialogImport:false, |
|
||||||
dataExport:false, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
async componentDidMount() { |
|
||||||
this.getDataEmployee(); |
|
||||||
} |
|
||||||
|
|
||||||
async componentDidUpdate(prevProps, prevState) { |
|
||||||
const { search } = this.state |
|
||||||
if (search !== prevState.search) this.getDataEmployee() |
|
||||||
} |
|
||||||
|
|
||||||
toggleAksiDropdown = () => { |
|
||||||
this.setState({aksiDropdown:!this.state.aksiDropdown}); |
|
||||||
} |
|
||||||
|
|
||||||
handleSearch = e => { |
|
||||||
const value = e.target.value |
|
||||||
this.setState({ search: value, currentPage: 1 }) |
|
||||||
}; |
|
||||||
|
|
||||||
getDataEmployee = async () => { |
|
||||||
let start = 0; |
|
||||||
if (this.state.currentPage !== 1) { |
|
||||||
start = (this.state.currentPage * this.state.rowsPerPage) - this.state.rowsPerPage |
|
||||||
} |
|
||||||
let url = BASE_URL_GEOHR_API2 + `/employee.php?act=get_data&start=${start}&length=${this.state.rowsPerPage}&role_name=${roleName}`; |
|
||||||
const formData = new FormData(); |
|
||||||
formData.append("id_org", id_org); |
|
||||||
formData.append('field', this.state.searchDetailField); |
|
||||||
formData.append('value', this.state.search); |
|
||||||
const result = await axios |
|
||||||
.post(url,formData) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
if (result && result.data && result.statusText == "OK") { |
|
||||||
this.setState({ dataTable: result.data.data, totalPage: result.data.total_record }); |
|
||||||
} else { |
|
||||||
NotificationManager.error('Failed retreiving data!!', 'Failed'); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
setListIdHo = (data) => { |
|
||||||
let list = []; |
|
||||||
data.map((val, index) => { |
|
||||||
list.push(val.sales) |
|
||||||
}) |
|
||||||
this.setState({ dataIdHo: list }, () => { |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
handleOpenDialog = (type) => { |
|
||||||
this.setState({ openDialog: true, typeDialog: type }) |
|
||||||
this.showChildDialog(); |
|
||||||
} |
|
||||||
|
|
||||||
handleCloseDialog = async (type, data) => { |
|
||||||
let result = false; |
|
||||||
if (type === "save") { |
|
||||||
result = await this.saveEmployee(data); |
|
||||||
} else if (type === "edit") { |
|
||||||
result = await this.editEmployee(data); |
|
||||||
} |
|
||||||
else if (type === "cancel") { |
|
||||||
result = true; |
|
||||||
} |
|
||||||
|
|
||||||
if (result) { |
|
||||||
this.setState({ openDialog: false }) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
toggleAddDialog = () => { |
|
||||||
this.setState({ openDialog: !this.state.openDialog }) |
|
||||||
} |
|
||||||
|
|
||||||
onConfirmDelete = async () => { |
|
||||||
const { idDelete } = this.state |
|
||||||
let url = BASE_URL_GEOHR_API2 + `/employee.php?act=delete&id=${idDelete}`; |
|
||||||
let result = await axios.get(url) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
if(result.message!==undefined){ |
|
||||||
|
|
||||||
}else{ |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
if (result.data.message === "Data Has Been Deleted") { |
|
||||||
this.getDataEmployee() |
|
||||||
this.setState({ idDelete: 0, alertDelete: false }) |
|
||||||
NotificationManager.success('Data employee berhasil dihapus!!', 'Success!!'); |
|
||||||
} else { |
|
||||||
this.setState({ idDelete: 0, alertDelete: false }) |
|
||||||
NotificationManager.error('Data employee gagal dihapus!!', 'Failed!!'); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
saveEmployee = async (data) => { |
|
||||||
let url = BASE_URL_GEOHR_API2 + "/employee.php?act=input"; |
|
||||||
const formData = new FormData(); |
|
||||||
formData.append('name', data.name); |
|
||||||
formData.append('username', data.username); |
|
||||||
formData.append('phone_number', data.phoneNumber); |
|
||||||
formData.append('email', data.email); |
|
||||||
formData.append('address', data.name); |
|
||||||
formData.append('password', data.password); |
|
||||||
formData.append('birth_place', data.birthPlace); |
|
||||||
formData.append('birth_date', data.birthDate); |
|
||||||
formData.append('gender', data.currentSelectGender ? data.currentSelectGender.value : ""); |
|
||||||
formData.append('hobby', data.hobby); |
|
||||||
formData.append('blood_type', data.currentSelectBlood ? data.currentSelectBlood.value: ""); |
|
||||||
formData.append('ktp_number', data.nik); |
|
||||||
formData.append('role_id', data.currentSelectRoles ? data.currentSelectRoles.value: ""); |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if(data.idRoles!==undefined && data.idRoles!==0 && data.idRoles!==null){ |
|
||||||
formData.append('roles_id', data.idRoles); |
|
||||||
} |
|
||||||
|
|
||||||
let result = await axios.post(url, formData) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
if (!result) { |
|
||||||
return false; |
|
||||||
} |
|
||||||
|
|
||||||
if(result && result.message!==undefined){ |
|
||||||
if (result.message === "Data Has Been Saved") { |
|
||||||
this.getDataEmployee(); |
|
||||||
NotificationManager.success('Data employee berhasil ditambahkan!!', 'Success!!'); |
|
||||||
return true; |
|
||||||
} else { |
|
||||||
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
|
||||||
return false; |
|
||||||
} |
|
||||||
}else{ |
|
||||||
if (result.data.message === "Data Has Been Saved") { |
|
||||||
this.getDataEmployee(); |
|
||||||
NotificationManager.success('Data employee berhasil ditambahkan!!', 'Success!!'); |
|
||||||
return true; |
|
||||||
} else { |
|
||||||
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
|
||||||
return false; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
let ref_id = parseInt(result.data.data.id) |
|
||||||
if (ref_id) { |
|
||||||
if (data.files.length > 0) { |
|
||||||
const formData = new FormData() |
|
||||||
data.files.map((res) => { |
|
||||||
console.log('test data upload photo', res) |
|
||||||
if (res) |
|
||||||
formData.append("ref_id", ref_id); |
|
||||||
formData.append("files", res); |
|
||||||
}) |
|
||||||
await axios.post(`${API}/image/employee/upload`, formData).then(response => response).catch(err => err.response) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
editEmployee = async (data) => { |
|
||||||
let url = BASE_URL_GEOHR_API2 + `/employee.php?act=edit&id=${data.id}&role_name=${roleName}`; |
|
||||||
const formData = new FormData(); |
|
||||||
formData.append('name', data.name); |
|
||||||
formData.append('username', data.username); |
|
||||||
formData.append('phone_number', data.phoneNumber); |
|
||||||
formData.append('email', data.email); |
|
||||||
formData.append('address', data.address); |
|
||||||
formData.append('birth_place', data.birthPlace); |
|
||||||
formData.append('birth_date', data.birthDate); |
|
||||||
formData.append('gender', data.currentSelectGender ? data.currentSelectGender.value : ""); |
|
||||||
formData.append('hobby', data.hobby); |
|
||||||
formData.append('blood_type', data.currentSelectBlood ? data.currentSelectBlood.value: ""); |
|
||||||
formData.append('role_id', data.currentSelectRoles ? data.currentSelectRoles.value: ""); |
|
||||||
|
|
||||||
formData.append('ktp_number', data.nik); |
|
||||||
|
|
||||||
|
|
||||||
if(data.password!==""){ |
|
||||||
formData.append('password', data.password); |
|
||||||
} |
|
||||||
|
|
||||||
if(data.idRoles!==undefined && data.idRoles!==0 && data.idRoles!==null){ |
|
||||||
formData.append('role_id', data.idRoles); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let result = await axios.post(url, formData) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
if (!result) { |
|
||||||
return false; |
|
||||||
} |
|
||||||
|
|
||||||
if(result && result.message!==undefined){ |
|
||||||
if (result.message === "Data Has Been Edited") { |
|
||||||
this.getDataEmployee(); |
|
||||||
NotificationManager.success('Data karyawan berhasil diedit!!', 'Success!!'); |
|
||||||
return true; |
|
||||||
} else { |
|
||||||
NotificationManager.error('Data karyawan gagal diedit!!', 'Failed!!'); |
|
||||||
return false |
|
||||||
} |
|
||||||
}else{ |
|
||||||
if (result.data.message === "Data Has Been Edited") { |
|
||||||
this.getDataEmployee(); |
|
||||||
NotificationManager.success('Data karyawan berhasil diedit!!', 'Success!!'); |
|
||||||
return true; |
|
||||||
} else { |
|
||||||
NotificationManager.error('Data karyawan gagal diedit!!', 'Failed!!'); |
|
||||||
return false; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
handleEdit = (data) => { |
|
||||||
this.setState({ dataEdit: data }); |
|
||||||
this.handleOpenDialog('Edit'); |
|
||||||
} |
|
||||||
|
|
||||||
handleDetail = (data) => { |
|
||||||
this.setState({ dataEdit: data }) |
|
||||||
this.handleOpenDialog('View'); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
handleDelete = (id) => { |
|
||||||
this.setState({ alertDelete: true, idDelete: id }); |
|
||||||
} |
|
||||||
|
|
||||||
onShowSizeChange = (current, pageSize) => { |
|
||||||
this.setState({ rowsPerPage: pageSize }, () => { |
|
||||||
this.getDataEmployee(); |
|
||||||
}) |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
onPagination = (current, pageSize) => { |
|
||||||
this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => { |
|
||||||
this.getDataEmployee(); |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
toggle = (param) => { |
|
||||||
if (param === "edit") { |
|
||||||
this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit })) |
|
||||||
} else if (param === "delete") { |
|
||||||
this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete })) |
|
||||||
} else if (param === "detail") { |
|
||||||
this.setState(prevState => ({ tooltipDetail: !prevState.tooltipDetail })) |
|
||||||
} else if (param === "tambah") { |
|
||||||
this.setState(prevState => ({ tooltipTambah: !prevState.tooltipTambah })) |
|
||||||
} else if (param === "import") { |
|
||||||
this.setState(prevState => ({ tooltipImport : !prevState.tooltipImport })) |
|
||||||
} else if (param === "export") { |
|
||||||
this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport })) |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
toggleDropDown = () => { |
|
||||||
this.setState({splitButtonOpen:!this.state.splitButtonOpen}) |
|
||||||
} |
|
||||||
|
|
||||||
handleDialogImport = () => { |
|
||||||
this.setState({ openDialogImport: true}) |
|
||||||
this.showImportDialog(); |
|
||||||
} |
|
||||||
|
|
||||||
handleCloseImport = (type, file) => { |
|
||||||
if(type==="import"){ |
|
||||||
if(!file){ |
|
||||||
NotificationManager.error('Silahkan masukan file excel!!', 'Failed!!'); |
|
||||||
return false |
|
||||||
} |
|
||||||
|
|
||||||
if (/\.(xls?x)$/i.test(file.name) === false ) {
|
|
||||||
NotificationManager.error('File yang dimasukan bukan format excel (.xsl/.xslx)!!', 'Failed!!'); |
|
||||||
return false |
|
||||||
} |
|
||||||
|
|
||||||
this.importExcel(file); |
|
||||||
|
|
||||||
}else{ |
|
||||||
this.setState({ openDialogImport:false }); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
toggleImportDialog = () => { |
|
||||||
this.setState({ openDialogImport:!this.state.openDialogImport }) |
|
||||||
} |
|
||||||
|
|
||||||
importExcel = async (file) => { |
|
||||||
const url = `${BASE_URL_GEOHR_API2}/employee.php?act=import`;
|
|
||||||
const formData = new FormData(); |
|
||||||
formData.append('file', file); |
|
||||||
const result = await axios |
|
||||||
.post(url, formData) |
|
||||||
.then((res) => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
if(result && result.code_status){ |
|
||||||
if (result.code_status === 200) { |
|
||||||
NotificationManager.success('File imported successfully', 'Success Message'); |
|
||||||
this.getDataEmployee(); |
|
||||||
this.setState({openDialogImport: false}); |
|
||||||
} else { |
|
||||||
NotificationManager.error(result.data.message, "error message"); |
|
||||||
} |
|
||||||
}else{ |
|
||||||
NotificationManager.error("Import data karyawan gagal!!", "error message"); |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
getTemplateExcel = async (event) => { |
|
||||||
event.preventDefault(); |
|
||||||
const url = `${BASE_URL_GEOHR_API2}/dok/template-import-karyawan.xlsx`; |
|
||||||
window.open(url, "_blank"); |
|
||||||
}; |
|
||||||
|
|
||||||
|
|
||||||
handleExportExcel = async () => { |
|
||||||
let start = 0; |
|
||||||
let end = "ALL";
|
|
||||||
let url = BASE_URL_GEOHR_API2 + `/employee.php?act=get_data&start=${start}&length=${end}&role_name=${roleName}`; |
|
||||||
const formData = new FormData(); |
|
||||||
formData.append('field', this.state.searchDetailField); |
|
||||||
formData.append('value', this.state.search); |
|
||||||
const result = await axios |
|
||||||
.post(url,formData) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
if (result && result.data && result.statusText == "OK") { |
|
||||||
const dataRes = result.data.data|| []; |
|
||||||
const dataExport = []; |
|
||||||
dataRes.map((val,index)=> { |
|
||||||
let row = { |
|
||||||
Nama:val.name, |
|
||||||
Organisasi:val.organization_name || "-", |
|
||||||
Nik:val.ktp_number, |
|
||||||
Username:val.username, |
|
||||||
Email:val.email, |
|
||||||
"Nomor Handphone":val.phone_number, |
|
||||||
"Tanggal Lahir":val.birth_date, |
|
||||||
"Tempat Lahir":val.birth_place, |
|
||||||
"Hobby":val.hobby, |
|
||||||
"Jenis Kelamin":val.gender, |
|
||||||
"Golongan Data":val.blood_type, |
|
||||||
} |
|
||||||
dataExport.push(row); |
|
||||||
}) |
|
||||||
this.setState({ dataExport:dataExport },()=> { |
|
||||||
this.exportExcel(); |
|
||||||
}); |
|
||||||
} else { |
|
||||||
NotificationManager.error('Failed retreiving data!!', 'Failed'); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
exportExcel = () => { |
|
||||||
const dataExcel = this.state.dataExport || []; |
|
||||||
const fileName = "Data Karyawan.xlsx"; |
|
||||||
const ws = XLSX.utils.json_to_sheet(dataExcel); |
|
||||||
const wb = XLSX.utils.book_new(); |
|
||||||
XLSX.utils.book_append_sheet(wb, ws, 'Data Karyawan'); |
|
||||||
|
|
||||||
XLSX.writeFile(wb, fileName); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
render() { |
|
||||||
const { tooltipTambah,tooltipImport,tooltipExport,tooltipDetail, dataTable, searchDetail, splitButtonOpen, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipEdit, tooltipDelete } = this.state |
|
||||||
let dataTable2 = dataTable || []; |
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<NotificationContainer /> |
|
||||||
<SweetAlert |
|
||||||
show={this.state.alertDelete} |
|
||||||
warning |
|
||||||
showCancel |
|
||||||
confirmBtnText="Delete" |
|
||||||
confirmBtnBsStyle="danger" |
|
||||||
title="Are you sure?" |
|
||||||
onConfirm={this.onConfirmDelete} |
|
||||||
onCancel={() => this.setState({ alertDelete: false, idDelete: 0 })} |
|
||||||
focusCancelBtn |
|
||||||
> |
|
||||||
Data karyawan akan terhapus!! |
|
||||||
</SweetAlert> |
|
||||||
<DialogForm |
|
||||||
openDialog={openDialog} |
|
||||||
closeDialog={this.handleCloseDialog} |
|
||||||
toggleDialog={() => this.toggleAddDialog} |
|
||||||
typeDialog={this.state.typeDialog} |
|
||||||
dataEdit={this.state.dataEdit} |
|
||||||
showDialog={showDialog => this.showChildDialog = showDialog} |
|
||||||
dataHs={this.state.dataIdHo} |
|
||||||
/> |
|
||||||
<DialogImport |
|
||||||
openDialog={this.state.openDialogImport} |
|
||||||
closeDialog={this.handleCloseImport} |
|
||||||
toggleDialog={() => this.toggleImportDialog} |
|
||||||
showDialog={showDialog => this.showImportDialog = showDialog} |
|
||||||
/> |
|
||||||
<Card> |
|
||||||
<CardHeader style={{margin:0}}> |
|
||||||
<Row style={{padding:0,margin:0}}> |
|
||||||
<Col md={7} xs={7}> |
|
||||||
<h4>Karyawan</h4> |
|
||||||
</Col> |
|
||||||
<Col md={3} xs={3}> |
|
||||||
<InputGroup> |
|
||||||
<Input onChange={this.handleSearch} value={search} type="text" name="search" id="search" placeholder={`Search ${searchDetail}`} /> |
|
||||||
<InputGroupButtonDropdown addonType="prepend" |
|
||||||
isOpen={splitButtonOpen} |
|
||||||
toggle={this.toggleDropDown} |
|
||||||
> |
|
||||||
<DropdownToggle split outline /> |
|
||||||
<DropdownMenu> |
|
||||||
<DropdownItem onClick={ |
|
||||||
() => this.setState({ |
|
||||||
searchDetail: "Nama", |
|
||||||
searchDetailField: "name" |
|
||||||
})}>Nama</DropdownItem> |
|
||||||
<DropdownItem onClick={ |
|
||||||
() => this.setState({ |
|
||||||
searchDetail: "Nomor Handphone", |
|
||||||
searchDetailField: "phone_number" |
|
||||||
})}>Nomor Handphone</DropdownItem> |
|
||||||
<DropdownItem onClick={ |
|
||||||
() => this.setState({ |
|
||||||
searchDetail: "Email", |
|
||||||
searchDetailField: "email" |
|
||||||
})}>Email</DropdownItem> |
|
||||||
<DropdownItem onClick={ |
|
||||||
() => this.setState({ |
|
||||||
searchDetail: "Alamat", |
|
||||||
searchDetailField: "address" |
|
||||||
})}>Alamat</DropdownItem> |
|
||||||
</DropdownMenu> |
|
||||||
</InputGroupButtonDropdown> |
|
||||||
</InputGroup> |
|
||||||
</Col> |
|
||||||
<Col md={2} xs={2} style={{display:"flex",justifyContent:"space-between"}}> |
|
||||||
<Button id="TooltipTambah" color="success" onClick={() => this.handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button> |
|
||||||
<ButtonDropdown id="TooltipImport" direction="down" isOpen={this.state.aksiDropdown} toggle={() => this.toggleAksiDropdown()}> |
|
||||||
<DropdownToggle color="info" caret > |
|
||||||
<i className="fa fa-cloud-upload"></i> |
|
||||||
</DropdownToggle> |
|
||||||
<DropdownMenu> |
|
||||||
<DropdownItem onClick={() => this.handleDialogImport()}>Import Data Karyawan</DropdownItem> |
|
||||||
<DropdownItem onClick={(e) => this.getTemplateExcel(e)}>Download Template</DropdownItem> |
|
||||||
</DropdownMenu> |
|
||||||
</ButtonDropdown> |
|
||||||
<Button id="TooltipExport" color="primary" onClick={()=> this.handleExportExcel()}><i className="fa fa-print"></i></Button> |
|
||||||
<Tooltip placement="right" isOpen={tooltipTambah} target="TooltipTambah" toggle={() => this.toggle("tambah")}> |
|
||||||
Tambah |
|
||||||
</Tooltip> |
|
||||||
<Tooltip placement="right" isOpen={tooltipImport} target="TooltipImport" toggle={() => this.toggle("import")}> |
|
||||||
Import Excel |
|
||||||
</Tooltip> |
|
||||||
<Tooltip placement="right" isOpen={tooltipExport} target="TooltipExport" toggle={() => this.toggle("export")}> |
|
||||||
Export Excel |
|
||||||
</Tooltip> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</CardHeader> |
|
||||||
<CardBody> |
|
||||||
<Table responsive striped hover> |
|
||||||
<thead> |
|
||||||
<tr> |
|
||||||
<th>Aksi</th> |
|
||||||
{column.map((i, index) => { |
|
||||||
return ( |
|
||||||
<th key={index} scope="row">{i.name}</th> |
|
||||||
) |
|
||||||
})} |
|
||||||
</tr> |
|
||||||
</thead> |
|
||||||
<tbody> |
|
||||||
{dataTable2.map((n) => { |
|
||||||
return ( |
|
||||||
<tr key={n.id}> |
|
||||||
<td> |
|
||||||
<i id="TooltipDelete" className="cil-trash fa-lg" style={{ color: 'red', marginRight: '10px', cursor: "pointer" }} onClick={() => this.handleDelete(n.id)}></i> |
|
||||||
<Tooltip placement="right" isOpen={tooltipDelete} target="TooltipDelete" toggle={() => this.toggle("delete")}> |
|
||||||
Hapus |
|
||||||
</Tooltip> |
|
||||||
<i id="TooltipEdit" className="cil-pencil fa-lg" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(n)}></i> |
|
||||||
<Tooltip placement="right" isOpen={tooltipEdit} target="TooltipEdit" toggle={() => this.toggle("edit")}> |
|
||||||
Edit |
|
||||||
</Tooltip> |
|
||||||
<i id="TooltipDetail" style={{ marginLeft: 12, color: "blue", cursor: "pointer", }} onClick={() => this.handleDetail(n)}> |
|
||||||
|
|
||||||
<Icon style={{ marginBottom: 6 }} color="blue" width={22} height={22} icon={eyeFilled} /> |
|
||||||
</i> |
|
||||||
|
|
||||||
<Tooltip placement="right" isOpen={tooltipDetail} target="TooltipDetail" toggle={() => this.toggle("detail")}> |
|
||||||
Detail |
|
||||||
</Tooltip> |
|
||||||
</td> |
|
||||||
<td>{n.organization_name===null ? n.chairman_org || "-" : n.organization_name || "-"}</td> |
|
||||||
<td>{n.name}</td> |
|
||||||
<td>{n.email || "-"}</td> |
|
||||||
<td>{n.phone_number || "-"}</td> |
|
||||||
</tr> |
|
||||||
) |
|
||||||
})} |
|
||||||
</tbody> |
|
||||||
</Table> |
|
||||||
<Pagination |
|
||||||
showSizeChanger |
|
||||||
onShowSizeChange={this.onShowSizeChange} |
|
||||||
onChange={this.onPagination} |
|
||||||
defaultCurrent={currentPage} |
|
||||||
pageSize={rowsPerPage} |
|
||||||
total={totalPage} |
|
||||||
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]} |
|
||||||
/> |
|
||||||
</CardBody> |
|
||||||
</Card> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@ -1,262 +0,0 @@ |
|||||||
import React, { Component } from 'react' |
|
||||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
|
||||||
import { Col, Row, Button, Form, FormGroup, Label, Input } from 'reactstrap'; |
|
||||||
import Select from 'react-select' |
|
||||||
|
|
||||||
export default class DialogForm extends Component { |
|
||||||
constructor(props) { |
|
||||||
super(props) |
|
||||||
this.state = { |
|
||||||
openDialog: false, |
|
||||||
type_sales:'B2B', |
|
||||||
name: '', |
|
||||||
email: '', |
|
||||||
address: '', |
|
||||||
username: '', |
|
||||||
phoneNumber: '', |
|
||||||
password:'', |
|
||||||
id: 0, |
|
||||||
idGs:0, |
|
||||||
isParentClick: false, |
|
||||||
file: [], |
|
||||||
fileObj: [], |
|
||||||
fileArray: [], |
|
||||||
dataGs: [], |
|
||||||
currentSelectVal: null, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
async componentDidMount(){ |
|
||||||
this.props.showDialog(this.showDialog); |
|
||||||
this.cekDataGs() |
|
||||||
} |
|
||||||
|
|
||||||
async componentDidUpdate (){ |
|
||||||
if(this.state.isParentClick===true){ |
|
||||||
await this.cekDataGs() |
|
||||||
if(this.props.typeDialog==="Edit"){ |
|
||||||
let dataGs = this.searchGs(this.props.dataEdit.group_sales); |
|
||||||
this.setState({
|
|
||||||
idGs:this.props.dataEdit.group_sales, |
|
||||||
id:this.props.dataEdit.id, |
|
||||||
name:this.props.dataEdit.name, |
|
||||||
type_sales:this.props.dataEdit.type_sales, |
|
||||||
email: this.props.dataEdit.email, |
|
||||||
address: this.props.dataEdit.address, |
|
||||||
username: this.props.dataEdit.username, |
|
||||||
phoneNumber: this.props.dataEdit.phone_number, |
|
||||||
password:this.props.dataEdit.password, |
|
||||||
currentSelectVal:dataGs |
|
||||||
}) |
|
||||||
}else{ |
|
||||||
this.setState({
|
|
||||||
id:0, |
|
||||||
name:'', |
|
||||||
type_sales:'B2B', |
|
||||||
email: '', |
|
||||||
address:'', |
|
||||||
username: '', |
|
||||||
phoneNumber: '', |
|
||||||
password: '', |
|
||||||
currentSelectVal:null |
|
||||||
}) |
|
||||||
} |
|
||||||
this.setState({isParentClick:false}); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
searchGs = (idGs) => { |
|
||||||
let getIndex = this.getIndexDataGs(idGs); |
|
||||||
return this.state.dataGs[getIndex]; |
|
||||||
} |
|
||||||
|
|
||||||
getIndexDataGs = (val) => { |
|
||||||
let index = this.state.dataGs.findIndex(obj => obj.value === val); |
|
||||||
return index |
|
||||||
} |
|
||||||
|
|
||||||
cekDataGs = () => { |
|
||||||
if(this.state.dataGs.length===0){ |
|
||||||
let data = []; |
|
||||||
this.props.dataGs.map((val,index) => { |
|
||||||
data.push( |
|
||||||
{ |
|
||||||
value: val.id, |
|
||||||
label: val.name |
|
||||||
} |
|
||||||
) |
|
||||||
}); |
|
||||||
this.setState({ dataGs:data }) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
showDialog = () => { |
|
||||||
this.setState({ isParentClick : true }); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
handleSave = () => { |
|
||||||
const { file, name, email, id, address, phoneNumber, password, username, idGs,type_sales } = this.state |
|
||||||
let data = ''; |
|
||||||
if(this.props.typeDialog==="Save"){ |
|
||||||
data = { |
|
||||||
username, |
|
||||||
password, |
|
||||||
name,
|
|
||||||
email,
|
|
||||||
address,
|
|
||||||
phone_number:phoneNumber, |
|
||||||
group_sales:idGs, |
|
||||||
type_sales |
|
||||||
} |
|
||||||
this.props.closeDialog('save', data, file); |
|
||||||
}else{ |
|
||||||
data = { |
|
||||||
id, |
|
||||||
username, |
|
||||||
password, |
|
||||||
name,
|
|
||||||
email,
|
|
||||||
address,
|
|
||||||
phone_number:phoneNumber, |
|
||||||
group_sales:idGs, |
|
||||||
type_sales |
|
||||||
} |
|
||||||
this.props.closeDialog('edit', data, file); |
|
||||||
} |
|
||||||
|
|
||||||
this.setState({ id:'',username:'',password:'',name:'',email:'',address:'',phoneNumber:'',file:[],idGs:0,type_sales:'B2B',currentSelectVal:null }); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
handleCancel = () => { |
|
||||||
this.setState({ id:'',username:'',password:'',name:'',email:'',address:'',phoneNumber:'',file:[],idGs:0,type_sales:'B2B' }); |
|
||||||
this.props.closeDialog('cancel', 'none', 'none') |
|
||||||
} |
|
||||||
|
|
||||||
uploadMultipleImage = (event) => { |
|
||||||
this.setState({ fileObj: [...this.state.fileObj, event.target.files],file: [...this.state.file, event.target.files] }, ()=> { |
|
||||||
this.setUrl() |
|
||||||
}) |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
setUrl = () => { |
|
||||||
for (let i = 0; i < this.state.fileObj[0].length; i++) { |
|
||||||
this.setState({ fileArray: [...this.state.fileArray, URL.createObjectURL(this.state.fileObj[0][i])],fileObj:[] }) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
handleSelectGs = (inputValue, actionMeta) => { |
|
||||||
this.setState({ idGs:inputValue.value,currentSelectVal:{ value:inputValue.value,label:inputValue.label } }) |
|
||||||
} |
|
||||||
|
|
||||||
handleTypeSales = (e) => { |
|
||||||
this.setState({ type_sales:e.target.value }) |
|
||||||
} |
|
||||||
|
|
||||||
renderForm = () => { |
|
||||||
return( |
|
||||||
<Form> |
|
||||||
<Row form> |
|
||||||
<Col md={6}> |
|
||||||
<FormGroup> |
|
||||||
<Label for="exampleEmail">Group Sales </Label> |
|
||||||
<Select options={this.state.dataGs} onChange={this.handleSelectGs} value={this.state.currentSelectVal} /> |
|
||||||
</FormGroup> |
|
||||||
</Col> |
|
||||||
<Col md={6}> |
|
||||||
<FormGroup> |
|
||||||
<Label for="examplePassword">Username</Label> |
|
||||||
<Input type="text" value={this.state.username} onChange={(e)=> this.setState({ username:e.target.value })} placeholder="username " /> |
|
||||||
</FormGroup> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row form> |
|
||||||
<Col md={6}> |
|
||||||
<FormGroup> |
|
||||||
<Label for="exampleEmail">Password </Label> |
|
||||||
<Input type="password" value={this.state.password} onChange={(e)=> this.setState({ password:e.target.value })} placeholder="password" /> |
|
||||||
</FormGroup> |
|
||||||
</Col> |
|
||||||
<Col md={6}> |
|
||||||
<FormGroup> |
|
||||||
<Label for="examplePassword">Name</Label> |
|
||||||
<Input type="text" value={this.state.name} onChange={(e)=> this.setState({ name:e.target.value })} placeholder="name " /> |
|
||||||
</FormGroup> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row form> |
|
||||||
<Col md={6}> |
|
||||||
<FormGroup> |
|
||||||
<Label for="exampleEmail">Email</Label> |
|
||||||
<Input type="email" value={this.state.email} onChange={(e)=> this.setState({ email:e.target.value })} placeholder="email" /> |
|
||||||
</FormGroup> |
|
||||||
</Col> |
|
||||||
<Col md={6}> |
|
||||||
<FormGroup> |
|
||||||
<Label for="examplePassword">Address</Label> |
|
||||||
<Input type="text" value={this.state.address} onChange={(e)=> this.setState({ address:e.target.value })} placeholder="address " /> |
|
||||||
</FormGroup> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row form> |
|
||||||
<Col md={6}> |
|
||||||
<FormGroup> |
|
||||||
<Label for="exampleEmail">Phone Number</Label> |
|
||||||
<Input type="number"value={this.state.phoneNumber} onChange={(e)=> this.setState({ phoneNumber:e.target.value })} placeholder="phone number" /> |
|
||||||
</FormGroup> |
|
||||||
</Col> |
|
||||||
<Col md={6}> |
|
||||||
<Label>Type Sales</Label> |
|
||||||
<Row> |
|
||||||
<Col md={6}> |
|
||||||
<FormGroup check> |
|
||||||
<Label check> |
|
||||||
<Input type="radio" name="radioTypeC" value="B2B" onChange={this.handleTypeSales} checked={this.state.type_sales==="B2B"} />{' '} |
|
||||||
B2B |
|
||||||
</Label> |
|
||||||
</FormGroup> |
|
||||||
</Col> |
|
||||||
<Col md={6}> |
|
||||||
<FormGroup check> |
|
||||||
<Label check> |
|
||||||
<Input type="radio" name="radioTypeC" value="B2C" onChange={this.handleTypeSales} checked={this.state.type_sales==="B2C"} />{' '} |
|
||||||
B2C |
|
||||||
</Label> |
|
||||||
</FormGroup> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<FormGroup> |
|
||||||
<div style={{overflowY:"auto "}}> |
|
||||||
{(this.state.fileArray || []).map((url,index) => ( |
|
||||||
<img key={index} src={url} alt="..." style={{ maxWidth:"150px",maxHeight:"150px" }} /> |
|
||||||
))} |
|
||||||
</div> |
|
||||||
</FormGroup> |
|
||||||
<FormGroup> |
|
||||||
<Label for="exampleAddress">Images</Label> |
|
||||||
<Input type="file" onChange={this.uploadMultipleImage} /> |
|
||||||
</FormGroup> |
|
||||||
|
|
||||||
</Form> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
render() { |
|
||||||
return ( |
|
||||||
<Modal isOpen={this.props.openDialog} toggle={this.props.toggleDialog} size="xl"> |
|
||||||
<ModalHeader toggle={this.props.closeDialog}>Add Sales</ModalHeader> |
|
||||||
<ModalBody> |
|
||||||
{this.renderForm()} |
|
||||||
</ModalBody> |
|
||||||
<ModalFooter> |
|
||||||
<Button color="primary" onClick={() => this.handleSave()}>{this.props.typeDialog}</Button>{' '} |
|
||||||
<Button color="secondary" onClick={() => this.handleCancel()}>Cancel</Button> |
|
||||||
</ModalFooter> |
|
||||||
</Modal> |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,347 +0,0 @@ |
|||||||
import React, { Component } from 'react'; |
|
||||||
import { Card, CardBody, CardHeader, Col, Row, Table, Input, Modal, ModalHeader, ModalBody, ModalFooter, FormGroup, Label } from 'reactstrap'; |
|
||||||
import { Button } from 'reactstrap'; |
|
||||||
import axios from 'axios'; |
|
||||||
import SweetAlert from 'react-bootstrap-sweetalert'; |
|
||||||
import DialogForm from './DialogForm'; |
|
||||||
import { NotificationContainer, NotificationManager} from 'react-notifications'; |
|
||||||
import { Pagination } from 'antd'; |
|
||||||
import { Icon, InlineIcon } from '@iconify/react'; |
|
||||||
import settingOutlined from '@iconify/icons-ant-design/setting-outlined'; |
|
||||||
import {Link} from 'react-router-dom' |
|
||||||
import Select from 'react-select' |
|
||||||
|
|
||||||
import { SketchPicker } from 'react-color'; |
|
||||||
|
|
||||||
|
|
||||||
const BASE_URL = "https://oslog.id/geohr-api/"; |
|
||||||
|
|
||||||
|
|
||||||
const column = [ |
|
||||||
{ name: "Group Sales" }, |
|
||||||
{ name: "Name" }, |
|
||||||
{ name: "Phone Number" }, |
|
||||||
{ name: "Email" }, |
|
||||||
{ name: "Address" }, |
|
||||||
] |
|
||||||
|
|
||||||
const layerSales = [ |
|
||||||
{ |
|
||||||
"id": 1, |
|
||||||
"rule_name": "sales yang incomenya lebih dari 1000000", |
|
||||||
"style": { |
|
||||||
"fill_color": "#22194D", |
|
||||||
}, |
|
||||||
"rule": { |
|
||||||
"column": "income", |
|
||||||
"operator": ">", |
|
||||||
"value": 1000000, |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"id": 2, |
|
||||||
"rule_name": "sales yang punya nama mohammad", |
|
||||||
"style": { |
|
||||||
"fill_color": "#22194D", |
|
||||||
}, |
|
||||||
"rule": { |
|
||||||
"column": "name", |
|
||||||
"operator": "like", |
|
||||||
"value": "mohammad" |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
|
|
||||||
] |
|
||||||
|
|
||||||
const options = [ |
|
||||||
{ value: 'group-sales', label: 'Group Sales' }, |
|
||||||
{ value: 'name', label: 'Name' }, |
|
||||||
{ value: 'phone-number', label: 'Phone Number' }, |
|
||||||
{ value: 'email', label: 'Email' }, |
|
||||||
{ value: 'address', label: 'Address' } |
|
||||||
|
|
||||||
] |
|
||||||
|
|
||||||
const logicOperator = [ |
|
||||||
{ value: '>', label: '>' }, |
|
||||||
{ value: '>=', label: '>=' }, |
|
||||||
{ value: '<', label: '<' }, |
|
||||||
{ value: '<=', label: '<=' }, |
|
||||||
{ value: '==', label: '==' }, |
|
||||||
{ value: '<>', label: '<>' }, |
|
||||||
] |
|
||||||
|
|
||||||
|
|
||||||
const LENGTH_DATA = 10 |
|
||||||
export default class SettingSales extends Component { |
|
||||||
constructor(props) { |
|
||||||
super(props) |
|
||||||
this.state = { |
|
||||||
dataTable: [], |
|
||||||
openDialog: false, |
|
||||||
typeDialog: 'Save', |
|
||||||
dataEdit: null, |
|
||||||
alertDelete: false, |
|
||||||
idDelete: 0, |
|
||||||
dataGs: [], |
|
||||||
search: "", |
|
||||||
page: 0, |
|
||||||
rowsPerPage: LENGTH_DATA, |
|
||||||
currentPage: 1, |
|
||||||
totalPage: 0, |
|
||||||
layersSales: [], |
|
||||||
modalEdit: false, |
|
||||||
modalAdd: false, |
|
||||||
id: 0, |
|
||||||
fill_color: "#000", |
|
||||||
column: "", |
|
||||||
operator: "", |
|
||||||
value: "", |
|
||||||
dataEdit: null, |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
async componentDidMount (){ |
|
||||||
this.getRuleSales() |
|
||||||
} |
|
||||||
|
|
||||||
async componentDidUpdate (prevProps, prevState){ |
|
||||||
const { search } = this.state |
|
||||||
if (search !== prevState.search) this.getRuleSales() |
|
||||||
} |
|
||||||
|
|
||||||
handleOpenDialog = (type) => { |
|
||||||
this.setState({modalEdit: true, typeDialog: type }) |
|
||||||
this.handleSetData() |
|
||||||
} |
|
||||||
|
|
||||||
handleSetData = () => { |
|
||||||
const { dataEdit, typeDialog} = this.state |
|
||||||
if(typeDialog === "Edit") { |
|
||||||
this.setState({ |
|
||||||
id: dataEdit.id, |
|
||||||
rule_name: dataEdit.rule_name, |
|
||||||
fill_color: dataEdit.style.fill_color, |
|
||||||
column: dataEdit.rule.column, |
|
||||||
value: dataEdit.rule.value, |
|
||||||
operator: dataEdit.rule.operator |
|
||||||
|
|
||||||
}) |
|
||||||
} else { |
|
||||||
this.setState({ |
|
||||||
id: 0, |
|
||||||
rule_name: "", |
|
||||||
fill_color: "#000", |
|
||||||
column: null, |
|
||||||
value:"", |
|
||||||
operator: null |
|
||||||
|
|
||||||
}) |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
handleEdit = (data) => { |
|
||||||
this.setState({dataEdit: data}) |
|
||||||
this.handleOpenDialog('Edit') |
|
||||||
console.log('test data edit', data) |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
handleCancel = () => { |
|
||||||
this.setState({ |
|
||||||
|
|
||||||
rule_name: "", |
|
||||||
fill_color: "#000", |
|
||||||
column: null, |
|
||||||
value:"", |
|
||||||
operator: null, |
|
||||||
modalEdit: false |
|
||||||
}) |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
handleSave = () => { |
|
||||||
this.setState({ |
|
||||||
|
|
||||||
rule_name: "", |
|
||||||
fill_color: "#000", |
|
||||||
column: null, |
|
||||||
value:"", |
|
||||||
operator: null, |
|
||||||
modalEdit: false }) |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
toggleAdd = () => { |
|
||||||
this.setState({modalAdd: !this.state.modalAdd}) |
|
||||||
} |
|
||||||
|
|
||||||
getRuleSales = () => { |
|
||||||
this.setState({layersSales: layerSales}) |
|
||||||
} |
|
||||||
|
|
||||||
handleChangeComplete = (color, event) => { |
|
||||||
|
|
||||||
console.log('handleChangeComplete',color, event); |
|
||||||
this.setState({fill_color: color.hex}); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
render() { |
|
||||||
const {layersSales, modalEdit, modalAdd, search, openDialog, currentPage, rowsPerPage,totalPage, dataTable } = this.state |
|
||||||
let noSeq = 0; |
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<NotificationContainer/> |
|
||||||
<SweetAlert |
|
||||||
show={this.state.alertDelete} |
|
||||||
warning |
|
||||||
showCancel |
|
||||||
confirmBtnText="Delete" |
|
||||||
confirmBtnBsStyle="danger" |
|
||||||
title="Are you sure?" |
|
||||||
onConfirm={()=> this.setState({ alertDelete:false })} |
|
||||||
onCancel={()=> this.setState({ alertDelete:false })} |
|
||||||
focusCancelBtn |
|
||||||
> |
|
||||||
Rule sales akan terhapus!! |
|
||||||
</SweetAlert> |
|
||||||
|
|
||||||
<Card> |
|
||||||
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
|
||||||
<h4>Rules Sales</h4> |
|
||||||
<div> |
|
||||||
<Button onClick={this.handleOpenDialog} color="primary" >Add Rule</Button> |
|
||||||
</div> |
|
||||||
</CardHeader> |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<CardBody> |
|
||||||
{layersSales.map((n) => { |
|
||||||
return( |
|
||||||
<Row key={n.id}> |
|
||||||
<Col > |
|
||||||
|
|
||||||
<Card className="layer-list"> |
|
||||||
<CardBody> |
|
||||||
<Row> |
|
||||||
<Col xs={2}> |
|
||||||
<div style={{width: 20, height: 20, backgroundColor: n.style.fill_color }} /> |
|
||||||
</Col> |
|
||||||
|
|
||||||
<Col xs={8} > |
|
||||||
<span className="layer-title">{n.rule_name}</span> |
|
||||||
</Col> |
|
||||||
<Col > |
|
||||||
<div style={{ flexDirection: "row", justifyContent: "flex-end", }}> |
|
||||||
<Button onClick={()=> this.handleEdit(n)} color="success">Edit</Button> |
|
||||||
<Button onClick={()=> this.setState({alertDelete: true})} style={{ marginLeft: 16 }} color="danger">Hapus</Button> |
|
||||||
|
|
||||||
</div> |
|
||||||
|
|
||||||
</Col> |
|
||||||
|
|
||||||
</Row> |
|
||||||
</CardBody> |
|
||||||
</Card> |
|
||||||
|
|
||||||
</Col> |
|
||||||
|
|
||||||
</Row> |
|
||||||
|
|
||||||
|
|
||||||
) |
|
||||||
}) |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
</CardBody> |
|
||||||
</Card> |
|
||||||
<Modal isOpen={modalEdit} toggle={this.handleCancel} > |
|
||||||
<ModalHeader toggle={modalEdit}>Edit Rule Name</ModalHeader> |
|
||||||
<ModalBody> |
|
||||||
<div className="modal-body-container"> |
|
||||||
<FormGroup> |
|
||||||
<Label>Layer Name</Label> |
|
||||||
<Input value={this.state.rule_name} onChange={(e)=> this.setState({ rule_name :e.target.value })} /> |
|
||||||
</FormGroup> |
|
||||||
|
|
||||||
<FormGroup> |
|
||||||
<Label>Fill Color</Label> |
|
||||||
<SketchPicker |
|
||||||
color={ this.state.fill_color } |
|
||||||
onChangeComplete={ this.handleChangeColorComplete } |
|
||||||
/> |
|
||||||
</FormGroup> |
|
||||||
<FormGroup> |
|
||||||
<Label>Rule</Label> |
|
||||||
<Row> |
|
||||||
<Col > |
|
||||||
<Select value={this.state.column} options={options} /> |
|
||||||
</Col> |
|
||||||
<Col> |
|
||||||
<Select value={this.state.operator} options={logicOperator} /> |
|
||||||
|
|
||||||
</Col> |
|
||||||
<Col > |
|
||||||
<Input value={this.state.value} onChange={(e)=> this.setState({ value :e.target.value })} /> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</FormGroup> |
|
||||||
</div> |
|
||||||
</ModalBody> |
|
||||||
<ModalFooter> |
|
||||||
<Button color="primary" onClick={this.handleSave}>Update</Button>{' '} |
|
||||||
<Button color="secondary" onClick={this.handleCancel}>Cancel</Button> |
|
||||||
</ModalFooter> |
|
||||||
</Modal> |
|
||||||
{/* <Modal isOpen={modalAdd} toggle={this.toggleAdd} > |
|
||||||
<ModalHeader toggle={modalEdit}>Add Rule Name</ModalHeader> |
|
||||||
<ModalBody> |
|
||||||
<div className="modal-body-container"> |
|
||||||
<FormGroup> |
|
||||||
<Label>Rule Name</Label> |
|
||||||
<Input /> |
|
||||||
</FormGroup> |
|
||||||
<FormGroup> |
|
||||||
<Label>Fill Color</Label> |
|
||||||
<SketchPicker /> |
|
||||||
</FormGroup> |
|
||||||
<FormGroup> |
|
||||||
<Label>Rule</Label> |
|
||||||
<Row> |
|
||||||
<Col> |
|
||||||
<Select options={options} /> |
|
||||||
</Col> |
|
||||||
<Col> |
|
||||||
<Select options={logicOperator} /> |
|
||||||
|
|
||||||
</Col> |
|
||||||
<Col xs={5}> |
|
||||||
<Input /> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</FormGroup> |
|
||||||
</div> |
|
||||||
</ModalBody> |
|
||||||
<ModalFooter> |
|
||||||
<Button color="primary" onClick={this.toggleAdd}>Save</Button>{' '} |
|
||||||
<Button color="secondary" onClick={this.toggleAdd}>Cancel</Button> |
|
||||||
</ModalFooter> |
|
||||||
</Modal> */} |
|
||||||
|
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,399 +0,0 @@ |
|||||||
import React, { Component } from 'react'; |
|
||||||
import { Card, CardBody, CardHeader, Col, Row, Table, Input, InputGroup, InputGroupButtonDropdown, DropdownToggle, DropdownItem, DropdownMenu } from 'reactstrap'; |
|
||||||
import { Button } from 'reactstrap'; |
|
||||||
import axios from 'axios'; |
|
||||||
import SweetAlert from 'react-bootstrap-sweetalert'; |
|
||||||
import DialogForm from './DialogForm'; |
|
||||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
|
||||||
import { Pagination } from 'antd'; |
|
||||||
import { Icon, InlineIcon } from '@iconify/react'; |
|
||||||
import settingOutlined from '@iconify/icons-ant-design/setting-outlined'; |
|
||||||
import { Link } from 'react-router-dom'; |
|
||||||
import { Tooltip } from 'reactstrap'; |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const BASE_URL = "https://oslog.id/geohr-api/"; |
|
||||||
|
|
||||||
|
|
||||||
const column = [ |
|
||||||
{ name: "Group Sales" }, |
|
||||||
{ name: "Name" }, |
|
||||||
{ name: "Phone Number" }, |
|
||||||
{ name: "Email" }, |
|
||||||
{ name: "Address" }, |
|
||||||
] |
|
||||||
|
|
||||||
const LENGTH_DATA = 10 |
|
||||||
export default class index extends Component { |
|
||||||
constructor(props) { |
|
||||||
super(props) |
|
||||||
this.state = { |
|
||||||
dataTable: [], |
|
||||||
openDialog: false, |
|
||||||
typeDialog: 'Save', |
|
||||||
dataEdit: null, |
|
||||||
alertDelete: false, |
|
||||||
idDelete: 0, |
|
||||||
dataGs: [], |
|
||||||
search: "", |
|
||||||
page: 0, |
|
||||||
rowsPerPage: LENGTH_DATA, |
|
||||||
currentPage: 1, |
|
||||||
totalPage: 0, |
|
||||||
splitButtonOpen: false, |
|
||||||
dropdownOpen: false, |
|
||||||
searchDetail: "All", |
|
||||||
searchDetailField: "name", |
|
||||||
tooltipDelete: false, |
|
||||||
tooltipEdit: false |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
async componentDidMount() { |
|
||||||
this.getDataSales(); |
|
||||||
this.getDataGroupSales(); |
|
||||||
} |
|
||||||
|
|
||||||
async componentDidUpdate(prevProps, prevState) { |
|
||||||
const { search } = this.state |
|
||||||
if (search !== prevState.search) this.getDataSales() |
|
||||||
} |
|
||||||
|
|
||||||
getDataGroupSales = async () => { |
|
||||||
let url = BASE_URL + "group-sales/search"; |
|
||||||
const obj = { |
|
||||||
"paging": { "start": 0, "length": -1 }, |
|
||||||
"columns": [ |
|
||||||
{ |
|
||||||
"name": "name", |
|
||||||
"logic_operator": "ilike", |
|
||||||
"value": "", |
|
||||||
"operator": "and" |
|
||||||
} |
|
||||||
], |
|
||||||
"orders": { "columns": ["name"], "ascending": true } |
|
||||||
} |
|
||||||
|
|
||||||
const result = await axios |
|
||||||
.post(url, obj) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
if (result && result.data && result.data.message == "OK") { |
|
||||||
this.setState({ dataGs: result.data.data }); |
|
||||||
} else { |
|
||||||
NotificationManager.error('Failed retreiving data!!', 'Failed'); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
getDataSales = async () => { |
|
||||||
const { searchDetail, searchDetailField } = this.state |
|
||||||
let url = BASE_URL + "sales/search"; |
|
||||||
let start = 0 |
|
||||||
if (this.state.currentPage !== 1) { |
|
||||||
start = (this.state.currentPage * this.state.rowsPerPage) - this.state.rowsPerPage |
|
||||||
} |
|
||||||
const obj = { |
|
||||||
"paging": { "start": start, "length": this.state.rowsPerPage }, |
|
||||||
...searchDetail === "All" && |
|
||||||
{ |
|
||||||
"filter_columns": [ |
|
||||||
{ "name": "name", "value": this.state.search.toString() }, |
|
||||||
{ "name": "phone_number", "value": this.state.search.toString() }, |
|
||||||
{ "name": "email", "value": this.state.search.toString() }, |
|
||||||
{ "name": "address", "value": this.state.search.toString() }, |
|
||||||
{ "name": "name", "value": this.state.search.toString(), "table_name": "m_group_sales" }, |
|
||||||
], |
|
||||||
}, |
|
||||||
...searchDetail !== "All" && searchDetail !== "Group Sales" && |
|
||||||
{ |
|
||||||
"columns": [ |
|
||||||
{ "name": searchDetailField, "logic_operator": "ilike", "operator": "and", "value": this.state.search.toString() } |
|
||||||
] |
|
||||||
}, |
|
||||||
...searchDetail === "Group Sales" && |
|
||||||
{ |
|
||||||
"columns": [ |
|
||||||
{ "name": searchDetailField, "logic_operator": "ilike", "operator": "and", "value": this.state.search.toString(), "table_name": "m_group_sales" } |
|
||||||
] |
|
||||||
}, |
|
||||||
|
|
||||||
"joins": [ |
|
||||||
{ "name": "group_sales", "column_results": ["name", "description"] } |
|
||||||
], |
|
||||||
"orders": { "columns": ["name"], "ascending": true } |
|
||||||
} |
|
||||||
|
|
||||||
const result = await axios |
|
||||||
.post(url, obj) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
if (result && result.data && result.data.message == "OK") { |
|
||||||
this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord }); |
|
||||||
} else { |
|
||||||
NotificationManager.error('Failed retreiving data!!', 'Failed'); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
handleOpenDialog = (type) => { |
|
||||||
this.setState({ openDialog: true, typeDialog: type }) |
|
||||||
this.showChildDialog(); |
|
||||||
} |
|
||||||
|
|
||||||
handleCloseDialog = (type, data, files) => { |
|
||||||
if (type === "save") { |
|
||||||
this.saveSales(data, files); |
|
||||||
} else if (type === "edit") { |
|
||||||
this.editSales(data, files); |
|
||||||
this.uploadImage(files, data.id); |
|
||||||
} |
|
||||||
|
|
||||||
this.setState({ openDialog: false }) |
|
||||||
} |
|
||||||
|
|
||||||
toggleAddDialog = () => { |
|
||||||
this.setState({ openDialog: !this.state.openDialog }) |
|
||||||
} |
|
||||||
|
|
||||||
onConfirmDelete = async () => { |
|
||||||
const { idDelete } = this.state |
|
||||||
let url = BASE_URL + `sales/${idDelete}/delete`; |
|
||||||
const result = await axios.delete(url) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
if (result && result.data && result.data.message === "OK") { |
|
||||||
this.getDataSales() |
|
||||||
this.setState({ idDelete: 0, alertDelete: false }) |
|
||||||
NotificationManager.success('Data group sales berhasil dihapus!!', 'Success!!'); |
|
||||||
} else { |
|
||||||
this.setState({ idDelete: 0, alertDelete: false }) |
|
||||||
NotificationManager.error('Data group sales galal dihapus!!', 'Failed!!'); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
saveSales = async (obj, files) => { |
|
||||||
let url = BASE_URL + "sales/add"; |
|
||||||
let data = JSON.stringify(obj); |
|
||||||
const result = await axios.post(url, data) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
if (result && result.data && result.data.message === "OK") { |
|
||||||
let ref_id = parseInt(result.data.data.id); |
|
||||||
this.uploadImage(files, ref_id); |
|
||||||
NotificationManager.success('Data sales berhasil ditambahkan!!', 'Success!!'); |
|
||||||
} else { |
|
||||||
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
editSales = async (data) => { |
|
||||||
let url = BASE_URL + `sales/${data.id}/edit`; |
|
||||||
const obj = JSON.stringify(data); |
|
||||||
const result = await axios.put(url, obj) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
if (result && result.data && result.data.message === "OK") { |
|
||||||
this.getDataSales(); |
|
||||||
NotificationManager.success('Data sales berhasil diedit!!', 'Success!!'); |
|
||||||
} else { |
|
||||||
NotificationManager.error('Data sales galal diedit!!', 'Failed!!'); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
uploadImage = async (files, idRef) => { |
|
||||||
if (files.length > 0) { |
|
||||||
let promises = []; |
|
||||||
let response = []; |
|
||||||
let url = BASE_URL + `image/m_sales/upload`; |
|
||||||
files.map((val, index) => { |
|
||||||
let formData = new FormData(); |
|
||||||
formData.append("ref_id", idRef); |
|
||||||
formData.append("files", val[0]); |
|
||||||
promises.push(axios.post(url, formData) |
|
||||||
.then(res => { response.push(res) })) |
|
||||||
}) |
|
||||||
await Promise.all(promises); |
|
||||||
} |
|
||||||
|
|
||||||
this.getDataSales() |
|
||||||
} |
|
||||||
|
|
||||||
handleEdit = (data) => { |
|
||||||
this.setState({ dataEdit: data }); |
|
||||||
this.handleOpenDialog('Edit'); |
|
||||||
} |
|
||||||
|
|
||||||
handleDelete = (id) => { |
|
||||||
this.setState({ alertDelete: true, idDelete: id }); |
|
||||||
} |
|
||||||
|
|
||||||
onShowSizeChange = (current, pageSize) => { |
|
||||||
this.setState({ rowsPerPage: pageSize }, () => { |
|
||||||
this.getDataSales(); |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
onPagination = (current, pageSize) => { |
|
||||||
this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => { |
|
||||||
this.getDataSales(); |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
handleSearch = e => { |
|
||||||
const value = e.target.value |
|
||||||
this.setState({ search: value, currentPage: 1 }) |
|
||||||
}; |
|
||||||
|
|
||||||
toggleDropDown = () => { |
|
||||||
this.setState(prevState => ({ splitButtonOpen: !prevState.splitButtonOpen })) |
|
||||||
} |
|
||||||
|
|
||||||
toggle = (param) => { |
|
||||||
if (param === "edit") { |
|
||||||
this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit })) |
|
||||||
} else if (param === "delete") { |
|
||||||
this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete })) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
render() { |
|
||||||
const { search, openDialog, currentPage, rowsPerPage, totalPage, dataTable, splitButtonOpen, searchDetail, tooltipDelete, tooltipEdit } = this.state |
|
||||||
let noSeq = 0; |
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<NotificationContainer /> |
|
||||||
<SweetAlert |
|
||||||
show={this.state.alertDelete} |
|
||||||
warning |
|
||||||
showCancel |
|
||||||
confirmBtnText="Delete" |
|
||||||
confirmBtnBsStyle="danger" |
|
||||||
title="Are you sure?" |
|
||||||
onConfirm={this.onConfirmDelete} |
|
||||||
onCancel={() => this.setState({ alertDelete: false, idDelete: 0 })} |
|
||||||
focusCancelBtn |
|
||||||
> |
|
||||||
Data group sales akan terhapus!! |
|
||||||
</SweetAlert> |
|
||||||
<DialogForm |
|
||||||
openDialog={openDialog} |
|
||||||
closeDialog={this.handleCloseDialog} |
|
||||||
toggleDialog={() => this.toggleAddDialog} |
|
||||||
typeDialog={this.state.typeDialog} |
|
||||||
dataEdit={this.state.dataEdit} |
|
||||||
showDialog={showDialog => this.showChildDialog = showDialog} |
|
||||||
dataGs={this.state.dataGs} |
|
||||||
/> |
|
||||||
<Card> |
|
||||||
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
|
||||||
<h4>Sales</h4> |
|
||||||
<div> |
|
||||||
<Button color="primary" onClick={() => this.handleOpenDialog('Save')}>Add Sales</Button> |
|
||||||
<Link style={{ marginLeft: 16 }} to="/sales/setting-sales"> |
|
||||||
<Icon width={35} height={35} icon={settingOutlined} /> |
|
||||||
</Link> |
|
||||||
|
|
||||||
</div> |
|
||||||
</CardHeader> |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<CardBody> |
|
||||||
<InputGroup style={{ maxWidth: "200px", marginBottom: "20px" }}> |
|
||||||
<Input onChange={this.handleSearch} value={search} type="text" name="search" id="search" placeholder={`Search ${searchDetail}`} /> |
|
||||||
<InputGroupButtonDropdown addonType="prepend" |
|
||||||
isOpen={splitButtonOpen} |
|
||||||
toggle={this.toggleDropDown} |
|
||||||
> |
|
||||||
<DropdownToggle split outline /> |
|
||||||
<DropdownMenu> |
|
||||||
<DropdownItem onClick={ |
|
||||||
() => this.setState({ |
|
||||||
searchDetail: "All", |
|
||||||
searchDetailField: "name" |
|
||||||
})}>All</DropdownItem> |
|
||||||
<DropdownItem onClick={ |
|
||||||
() => this.setState({ |
|
||||||
searchDetail: "Name", |
|
||||||
searchDetailField: "name" |
|
||||||
})}>Name</DropdownItem> |
|
||||||
<DropdownItem onClick={ |
|
||||||
() => this.setState({ |
|
||||||
searchDetail: "Group Sales", |
|
||||||
searchDetailField: "name" |
|
||||||
})}>Group Sales</DropdownItem> |
|
||||||
<DropdownItem onClick={ |
|
||||||
() => this.setState({ |
|
||||||
searchDetail: "Phone Number", |
|
||||||
searchDetailField: "phone_number" |
|
||||||
})}>Phone Number</DropdownItem> |
|
||||||
<DropdownItem onClick={ |
|
||||||
() => this.setState({ |
|
||||||
searchDetail: "Email", |
|
||||||
searchDetailField: "email" |
|
||||||
})}>Email</DropdownItem> |
|
||||||
<DropdownItem onClick={ |
|
||||||
() => this.setState({ |
|
||||||
searchDetail: "Address", |
|
||||||
searchDetailField: "address" |
|
||||||
})}>Address</DropdownItem> |
|
||||||
</DropdownMenu> |
|
||||||
</InputGroupButtonDropdown> |
|
||||||
</InputGroup> |
|
||||||
<Table responsive striped hover> |
|
||||||
<thead> |
|
||||||
<tr> |
|
||||||
<th>Actions</th> |
|
||||||
{column.map((i, index) => { |
|
||||||
return ( |
|
||||||
<th key={index} scope="row">{i.name}</th> |
|
||||||
) |
|
||||||
})} |
|
||||||
</tr> |
|
||||||
</thead> |
|
||||||
<tbody> |
|
||||||
{dataTable.map((n) => { |
|
||||||
return ( |
|
||||||
<tr key={n.id}> |
|
||||||
<td> |
|
||||||
{/* delete */} |
|
||||||
<i id="TooltipDelete" className="cil-trash fa-lg" style={{ color: 'red', marginRight: '10px', cursor: "pointer" }} onClick={() => this.handleDelete(n.id)}></i> |
|
||||||
<Tooltip placement="right" isOpen={tooltipDelete} target="TooltipDelete" toggle={() => this.toggle("delete")}> |
|
||||||
Delete |
|
||||||
</Tooltip> |
|
||||||
|
|
||||||
{/* edit */} |
|
||||||
<i id="TooltipEdit" className="cil-pencil fa-lg" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(n)}></i> |
|
||||||
<Tooltip placement="right" isOpen={tooltipEdit} target="TooltipEdit" toggle={() => this.toggle("edit")}> |
|
||||||
Edit |
|
||||||
</Tooltip> |
|
||||||
</td> |
|
||||||
<td>{n.join.group_sales_name}</td> |
|
||||||
<td>{n.name}</td> |
|
||||||
<td>{n.phone_number}</td> |
|
||||||
<td>{n.email}</td> |
|
||||||
<td>{n.address}</td> |
|
||||||
</tr> |
|
||||||
) |
|
||||||
})} |
|
||||||
</tbody> |
|
||||||
</Table> |
|
||||||
<Pagination |
|
||||||
showSizeChanger |
|
||||||
onShowSizeChange={this.onShowSizeChange} |
|
||||||
onChange={this.onPagination} |
|
||||||
defaultCurrent={currentPage} |
|
||||||
pageSize={rowsPerPage} |
|
||||||
total={totalPage} |
|
||||||
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]} |
|
||||||
/> |
|
||||||
</CardBody> |
|
||||||
</Card> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,50 +0,0 @@ |
|||||||
import React, { Component } from 'react' |
|
||||||
import DataTable from '../../../components/DataTable' |
|
||||||
import { API_LIST_DATA_SUBDISTRICT, API_INSERT_DATA_SUBDISTRICT, API_UPDATE_DATA_SUBDISTRICT, API_DELETE_DATA_SUBDISTRICT } from '../../../const/ApiConst.js' |
|
||||||
|
|
||||||
const columns = [{ |
|
||||||
dataField: 'id', |
|
||||||
alias: "Id", |
|
||||||
showInput: false, |
|
||||||
type: "number", |
|
||||||
state: 0 |
|
||||||
}, { |
|
||||||
dataField: 'subdistrict_name', |
|
||||||
alias: "Subdistrict Name", |
|
||||||
showInput: true, |
|
||||||
type: "text", |
|
||||||
state: "" |
|
||||||
}, { |
|
||||||
dataField: 'last_updated', |
|
||||||
alias: "Last Updated", |
|
||||||
showInput: false, |
|
||||||
type: "text", |
|
||||||
state: "" |
|
||||||
}]; |
|
||||||
|
|
||||||
class MasterSubdistrict extends Component { |
|
||||||
constructor(props) { |
|
||||||
super(props) |
|
||||||
this.state = {} |
|
||||||
} |
|
||||||
|
|
||||||
componentDidMount() {} |
|
||||||
|
|
||||||
render() { |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<DataTable |
|
||||||
title="Subdistrict" |
|
||||||
columns={columns} |
|
||||||
urlParamGet={API_LIST_DATA_SUBDISTRICT} |
|
||||||
urlParamInsert={API_INSERT_DATA_SUBDISTRICT} |
|
||||||
urlParamUpdate={API_UPDATE_DATA_SUBDISTRICT} |
|
||||||
urlParamDelete={API_DELETE_DATA_SUBDISTRICT} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
export default MasterSubdistrict; |
|
||||||
@ -1,6 +0,0 @@ |
|||||||
{ |
|
||||||
"name": "MasterSubdistrict", |
|
||||||
"version": "0.0.0", |
|
||||||
"private": true, |
|
||||||
"main": "./MasterSubdistrict.js" |
|
||||||
} |
|
||||||
@ -1,50 +0,0 @@ |
|||||||
import React, { Component } from 'react' |
|
||||||
import DataTable from '../../../components/DataTable' |
|
||||||
import { API_LIST_DATA_VILLAGE, API_INSERT_DATA_VILLAGE, API_UPDATE_DATA_VILLAGE, API_DELETE_DATA_VILLAGE } from '../../../const/ApiConst.js' |
|
||||||
|
|
||||||
const columns = [{ |
|
||||||
dataField: 'id', |
|
||||||
alias: "Id", |
|
||||||
showInput: false, |
|
||||||
type: "number", |
|
||||||
state: 0 |
|
||||||
}, { |
|
||||||
dataField: 'village_name', |
|
||||||
alias: "Village Name", |
|
||||||
showInput: true, |
|
||||||
type: "text", |
|
||||||
state: "" |
|
||||||
}, { |
|
||||||
dataField: 'last_updated', |
|
||||||
alias: "Last Updated", |
|
||||||
showInput: false, |
|
||||||
type: "text", |
|
||||||
state: "" |
|
||||||
}]; |
|
||||||
|
|
||||||
class MasterVillage extends Component { |
|
||||||
constructor(props) { |
|
||||||
super(props) |
|
||||||
this.state = {} |
|
||||||
} |
|
||||||
|
|
||||||
componentDidMount() {} |
|
||||||
|
|
||||||
render() { |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<DataTable |
|
||||||
title="VILLAGE" |
|
||||||
columns={columns} |
|
||||||
urlParamGet={API_LIST_DATA_VILLAGE} |
|
||||||
urlParamInsert={API_INSERT_DATA_VILLAGE} |
|
||||||
urlParamUpdate={API_UPDATE_DATA_VILLAGE} |
|
||||||
urlParamDelete={API_DELETE_DATA_VILLAGE} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
export default MasterVillage; |
|
||||||
@ -1,6 +0,0 @@ |
|||||||
{ |
|
||||||
"name": "MasterVillage", |
|
||||||
"version": "0.0.0", |
|
||||||
"private": true, |
|
||||||
"main": "./MasterVillage.js" |
|
||||||
} |
|
||||||
@ -1,106 +0,0 @@ |
|||||||
import React, { Component } from 'react' |
|
||||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
|
||||||
import { Col, Row, Button, Form, FormGroup, Label, Input } from 'reactstrap'; |
|
||||||
import Select from 'react-select' |
|
||||||
import axios from 'axios'; |
|
||||||
import moment from 'moment'; |
|
||||||
import { TimePicker } from 'antd'; |
|
||||||
import 'antd/dist/antd.css'; |
|
||||||
|
|
||||||
export default class DialogForm extends Component { |
|
||||||
constructor(props) { |
|
||||||
super(props) |
|
||||||
this.state = { |
|
||||||
id: 0, |
|
||||||
lat:"", |
|
||||||
lon:"", |
|
||||||
status:"", |
|
||||||
name:"", |
|
||||||
openDialog: false, |
|
||||||
isParentClick: false, |
|
||||||
disable: false |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
async componentDidMount(){ |
|
||||||
this.props.showDialog(this.showDialog); |
|
||||||
} |
|
||||||
|
|
||||||
async componentDidUpdate (){ |
|
||||||
if(this.state.isParentClick===true){ |
|
||||||
const { dataEdit } = this.props |
|
||||||
console.log("cek", dataEdit); |
|
||||||
this.setState({
|
|
||||||
id:dataEdit.id, |
|
||||||
lat:dataEdit.lat, |
|
||||||
lon:dataEdit.lon, |
|
||||||
status:dataEdit.status_response, |
|
||||||
name:dataEdit.employee_name |
|
||||||
}) |
|
||||||
|
|
||||||
this.setState({isParentClick:false}); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
showDialog = () => { |
|
||||||
this.setState({ isParentClick : true }); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
handleSave = () => { |
|
||||||
const {
|
|
||||||
lat, |
|
||||||
lon, |
|
||||||
status, |
|
||||||
id |
|
||||||
} = this.state |
|
||||||
|
|
||||||
let data = { |
|
||||||
lat, |
|
||||||
lon, |
|
||||||
status_response:status, |
|
||||||
id |
|
||||||
} |
|
||||||
this.props.closeDialog('save', data); |
|
||||||
this.setState({ id:0,lat:"",lon:"",status:'active' }); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
handleCancel = () => { |
|
||||||
this.props.closeDialog('cancel', 'none') |
|
||||||
} |
|
||||||
|
|
||||||
renderForm = () => { |
|
||||||
return( |
|
||||||
<Form> |
|
||||||
<FormGroup> |
|
||||||
<Label>Name</Label> |
|
||||||
<Input type="text" value={this.state.name} readOnly /> |
|
||||||
</FormGroup> |
|
||||||
<FormGroup> |
|
||||||
<Label>Status Approval</Label> |
|
||||||
<Input type="select" disabled={this.state.disable} value={this.state.status} onChange={(e)=>this.setState({ status:e.target.value })}> |
|
||||||
<option value="active">Active</option> |
|
||||||
<option value="non active">Non Active</option> |
|
||||||
</Input> |
|
||||||
</FormGroup> |
|
||||||
</Form> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
render() { |
|
||||||
return ( |
|
||||||
<Modal isOpen={this.props.openDialog} toggle={this.props.toggleDialog}> |
|
||||||
<ModalHeader toggle={this.props.closeDialog}>Edit Status Response</ModalHeader> |
|
||||||
<ModalBody> |
|
||||||
{this.renderForm()} |
|
||||||
</ModalBody> |
|
||||||
<ModalFooter> |
|
||||||
<Button color="primary" onClick={() => this.handleSave()}>Save</Button>{' '} |
|
||||||
<Button color="secondary" onClick={() => this.handleCancel()}>Cancel</Button> |
|
||||||
</ModalFooter> |
|
||||||
</Modal> |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,85 +0,0 @@ |
|||||||
import React, { Component } from 'react' |
|
||||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
|
||||||
import { Col, Row, Button, Form, FormGroup, Label, Input } from 'reactstrap'; |
|
||||||
import Map from './Map' |
|
||||||
import 'antd/dist/antd.css'; |
|
||||||
|
|
||||||
const ERROR_LATLON = "Geom cannot be empty" |
|
||||||
const ERROR_COMPANY = "Company cannot be empty" |
|
||||||
const ERROR_NAME = "name cannot be empty" |
|
||||||
const ERROR_RADIUS = "Buffer Radius cannot be empty" |
|
||||||
|
|
||||||
export default class DialogForm extends Component { |
|
||||||
constructor(props) { |
|
||||||
super(props) |
|
||||||
this.state = { |
|
||||||
id: 0, |
|
||||||
lat:0, |
|
||||||
lon:0, |
|
||||||
openDialog: false, |
|
||||||
isParentClick: false, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
async componentDidMount(){ |
|
||||||
this.props.showDialog(this.showDialog); |
|
||||||
} |
|
||||||
|
|
||||||
async componentDidUpdate (){ |
|
||||||
if(this.state.isParentClick===true){ |
|
||||||
const { dataMap } = this.props |
|
||||||
this.setState({
|
|
||||||
lat:dataMap.lat, |
|
||||||
lon:dataMap.lon |
|
||||||
}) |
|
||||||
this.setState({isParentClick:false}); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
showDialog = () => { |
|
||||||
this.setState({ isParentClick : true }); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
handleSave = () => { |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
handleCancel = () => { |
|
||||||
this.props.closeDialog('cancel', 'none') |
|
||||||
} |
|
||||||
|
|
||||||
getLocation = (param) => { |
|
||||||
console.log(`getLocation`, param) |
|
||||||
this.setState({ |
|
||||||
latlonMessage: param != "" ? "" : ERROR_LATLON, |
|
||||||
lat: param.lat, |
|
||||||
lon: param.lng, |
|
||||||
latlon: `lat:${param.lat} lng:${param.lng}` |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
renderForm = () => { |
|
||||||
return( |
|
||||||
<div style={{ width: '100%', minHeight: '100px' }}> |
|
||||||
<Map method={'View'} getLocation={this.getLocation} lat={this.state.lat} lng={this.state.lon} /> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
render() { |
|
||||||
return ( |
|
||||||
<Modal isOpen={this.props.openDialog} toggle={this.props.toggleDialog}> |
|
||||||
<ModalHeader toggle={this.props.closeDialog}>Map</ModalHeader> |
|
||||||
<ModalBody> |
|
||||||
{this.renderForm()} |
|
||||||
</ModalBody> |
|
||||||
<ModalFooter> |
|
||||||
{/* <Button color="primary" onClick={() => this.handleSave()}>{this.props.typeDialog}</Button>{' '} */} |
|
||||||
<Button color="secondary" onClick={() => this.handleCancel()}>Close</Button> |
|
||||||
</ModalFooter> |
|
||||||
</Modal> |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,104 +0,0 @@ |
|||||||
import React, { useEffect, useMemo, useState } from 'react' |
|
||||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
|
||||||
import { Button, Form, FormGroup, Label, Input, Col, Row } from 'reactstrap'; |
|
||||||
import { Select, Table } from 'antd' |
|
||||||
import { BASE_SIMPRO } from '../../../const/ApiConst'; |
|
||||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
|
||||||
import 'antd/dist/antd.css'; |
|
||||||
import axios from 'axios'; |
|
||||||
import moment from 'moment'; |
|
||||||
|
|
||||||
const { Option } = Select |
|
||||||
|
|
||||||
const DialogView = ({ openDialog, closeDialog, toggleDialog, dataPlanning, nameProyekParent }) => { |
|
||||||
const token = localStorage.getItem("token") |
|
||||||
const HEADER = { |
|
||||||
headers: { |
|
||||||
"Content-Type": "application/json", |
|
||||||
"Authorization": `Bearer ${token}` |
|
||||||
} |
|
||||||
} |
|
||||||
const [dataPlan, setDataPlan] = useState([]); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
setDataPlan(dataPlanning) |
|
||||||
}, [dataPlanning]); |
|
||||||
|
|
||||||
|
|
||||||
const RenderTableLaporanPlan = (tableData) => { |
|
||||||
const columns = [ |
|
||||||
{ |
|
||||||
title: 'Tanggal', |
|
||||||
dataIndex: 'tanggal', |
|
||||||
key: 'tanggal', |
|
||||||
render: (text, record) => <>{moment(text.tanggal).format("YYYY-MM-DD")}</>, |
|
||||||
}, |
|
||||||
{ title: 'Jumlah Pekerja', dataIndex: 'jumlah_pekerjaan', key: 'jumlah_pekerjaan' }, |
|
||||||
{ title: 'Status', dataIndex: 'status', key: 'status' }, |
|
||||||
{ title: 'deskripsi', dataIndex: 'deskripsi', key: 'deskripsi' }, |
|
||||||
]; |
|
||||||
|
|
||||||
return ( |
|
||||||
<Table |
|
||||||
size="small" |
|
||||||
columns={columns} |
|
||||||
dataSource={tableData} |
|
||||||
/> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
const RenderTablePlan = useMemo(() => { |
|
||||||
let idx = 0 |
|
||||||
const columns = [ |
|
||||||
{
|
|
||||||
title: 'No',
|
|
||||||
dataIndex: 'no',
|
|
||||||
key: 'id',
|
|
||||||
render: (text, record) => <>{idx+1}</>, |
|
||||||
}, |
|
||||||
|
|
||||||
{ |
|
||||||
title: 'Waspang', |
|
||||||
dataIndex: 'created_by', |
|
||||||
key: 'created_by', |
|
||||||
render: (text, record) => <>{record.created_by}</>, |
|
||||||
}, |
|
||||||
{ title: 'Jumlah Pekerjaan', dataIndex: 'jumlah_pekerjaan', key: 'jumlah_pekerjaan' }, |
|
||||||
{ |
|
||||||
title: 'Deskripsi', |
|
||||||
dataIndex: 'deskripsi', |
|
||||||
key: 'deskripsi', |
|
||||||
render: (text, record) => <>{record.deskripsi}</>, |
|
||||||
}, |
|
||||||
]; |
|
||||||
|
|
||||||
return ( |
|
||||||
<Table |
|
||||||
size="small" |
|
||||||
columns={columns} |
|
||||||
expandable={{ |
|
||||||
expandedRowRender: record => RenderTableLaporanPlan(record.realisasi), |
|
||||||
rowExpandable: record => record.realisasi, |
|
||||||
}} |
|
||||||
dataSource={dataPlan} |
|
||||||
/> |
|
||||||
) |
|
||||||
}, [dataPlan]) |
|
||||||
|
|
||||||
|
|
||||||
return ( |
|
||||||
<Modal size="xl" isOpen={openDialog} toggle={toggleDialog}> |
|
||||||
<ModalHeader className="capitalize" toggle={closeDialog}>View Realisasi</ModalHeader> |
|
||||||
<ModalBody> |
|
||||||
{RenderTablePlan} |
|
||||||
</ModalBody> |
|
||||||
<ModalFooter> |
|
||||||
{/* <Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} */} |
|
||||||
<Button className="capitalize" color="secondary" onClick={closeDialog}>Close</Button> |
|
||||||
</ModalFooter> |
|
||||||
</Modal> |
|
||||||
) |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
export default DialogView; |
|
||||||
@ -1,83 +0,0 @@ |
|||||||
import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react' |
|
||||||
import { MapContainer, TileLayer, Marker, Popup, Polygon } from 'react-leaflet' |
|
||||||
|
|
||||||
const center = { |
|
||||||
lat: -6.200000, |
|
||||||
lng: 106.816666 |
|
||||||
} |
|
||||||
|
|
||||||
const DraggableMarker = (props) => { |
|
||||||
const { method } = props |
|
||||||
let lat = props.lat |
|
||||||
let lng = props.lng |
|
||||||
const currentPos = [lat, lng] |
|
||||||
console.log(`currentPos`, currentPos) |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const [draggable, setDraggable] = useState(true) |
|
||||||
const [position, setPosition] = useState(center) |
|
||||||
|
|
||||||
|
|
||||||
const markerRef = useRef(null) |
|
||||||
const eventHandlers = useMemo( |
|
||||||
() => ({ |
|
||||||
dragend() { |
|
||||||
const marker = markerRef.current |
|
||||||
if (marker != null) { |
|
||||||
setPosition(marker.getLatLng()) |
|
||||||
props.getLocation(marker.getLatLng()) |
|
||||||
} |
|
||||||
}, |
|
||||||
}), |
|
||||||
[], |
|
||||||
) |
|
||||||
return ( |
|
||||||
<> |
|
||||||
|
|
||||||
{method === "View" && ( |
|
||||||
<Marker |
|
||||||
eventHandlers={eventHandlers} |
|
||||||
position={currentPos} |
|
||||||
ref={markerRef}> |
|
||||||
</Marker> |
|
||||||
)} |
|
||||||
|
|
||||||
{method === "Edit" && ( |
|
||||||
<Marker |
|
||||||
draggable={draggable} |
|
||||||
eventHandlers={eventHandlers} |
|
||||||
position={currentPos ? currentPos : position} |
|
||||||
ref={markerRef}> |
|
||||||
</Marker> |
|
||||||
)} |
|
||||||
{method === "Save" && ( |
|
||||||
<Marker |
|
||||||
draggable={draggable} |
|
||||||
eventHandlers={eventHandlers} |
|
||||||
position={position} |
|
||||||
ref={markerRef}> |
|
||||||
</Marker> |
|
||||||
)} |
|
||||||
</> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
const purpleOptions = { color: 'purple' } |
|
||||||
const RenderMap = (props) => { |
|
||||||
let lat = props.lat |
|
||||||
let lng = props.lng |
|
||||||
const currentPos = (lat !== "" && lng !== "") ? [lat, lng] : center |
|
||||||
return ( |
|
||||||
<MapContainer center={currentPos} zoom={13} scrollWheelZoom={false} style={{ height: '70vh' }}> |
|
||||||
{/* <Polygon pathOptions={purpleOptions} positions={polygon} /> */} |
|
||||||
<TileLayer |
|
||||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' |
|
||||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" |
|
||||||
/> |
|
||||||
<DraggableMarker {...props} /> |
|
||||||
</MapContainer> |
|
||||||
) |
|
||||||
} |
|
||||||
export default RenderMap; |
|
||||||
@ -1,608 +0,0 @@ |
|||||||
import React, { Component } from 'react'; |
|
||||||
import { Card, CardBody, CardHeader, Col, Row, Table, Input, InputGroup } from 'reactstrap'; |
|
||||||
import { Button } from 'reactstrap'; |
|
||||||
import axios from 'axios'; |
|
||||||
import moment from 'moment'; |
|
||||||
import SweetAlert from 'react-bootstrap-sweetalert'; |
|
||||||
import DialogForm from './DialogForm'; |
|
||||||
import DialogEdit from './DialogEdit'; |
|
||||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
|
||||||
import { Pagination, Tooltip } from 'antd'; |
|
||||||
import { DatePicker } from 'antd'; |
|
||||||
import * as XLSX from 'xlsx'; |
|
||||||
import { PLANNING_REALISASI_SEARCH, PLANNING_SEARCH } from '../../../const/ApiConst.js'; |
|
||||||
import DialogView from './DialogView'; |
|
||||||
|
|
||||||
|
|
||||||
const { RangePicker } = DatePicker; |
|
||||||
|
|
||||||
const token = window.localStorage.getItem('token'); |
|
||||||
const config = { |
|
||||||
headers:
|
|
||||||
{
|
|
||||||
Authorization : `Bearer ${token}`, |
|
||||||
"Content-type" : `application/json` |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
const proyek_id = localStorage.getItem('proyek_id'); |
|
||||||
const role_id = localStorage.getItem('role_id'); |
|
||||||
|
|
||||||
const column = [ |
|
||||||
{ name: "No" }, |
|
||||||
{ name: "Proyek" }, |
|
||||||
{ name: "Pekerjaan" }, |
|
||||||
{ name: "Target" }, |
|
||||||
{ name: "Actual" }, |
|
||||||
{ name: "Team Leader" }, |
|
||||||
{ name: "Waspang" }, |
|
||||||
{ name: "Tanggal" }, |
|
||||||
{ name: "Lihat" }, |
|
||||||
] |
|
||||||
|
|
||||||
const LENGTH_DATA = 10 |
|
||||||
|
|
||||||
export default class index extends Component { |
|
||||||
constructor(props) { |
|
||||||
super(props) |
|
||||||
this.state = { |
|
||||||
dataTable: [], |
|
||||||
dataExport: [], |
|
||||||
openDialog: false, |
|
||||||
openDialogEdit:false, |
|
||||||
typeDialog: 'Save', |
|
||||||
dataEdit: null, |
|
||||||
alertDelete: false, |
|
||||||
idDelete: 0, |
|
||||||
dataGs: [], |
|
||||||
dataIdHo: [], |
|
||||||
search: "", |
|
||||||
page: 0, |
|
||||||
rowsPerPage: LENGTH_DATA, |
|
||||||
currentPage: 1, |
|
||||||
totalPage: 0, |
|
||||||
tooltipMap: false, |
|
||||||
tooltipDelete: false, |
|
||||||
typeClock: "All", |
|
||||||
startDate:moment(moment().format("YYYY-M-D")), |
|
||||||
endDate:moment(moment().format("YYYY-M-D")), |
|
||||||
currentDay: 'today', |
|
||||||
dataMap:"", |
|
||||||
tooltipExport:false, |
|
||||||
openDialogPlan: false, |
|
||||||
dataRealisasi: [] |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
async componentDidMount() { |
|
||||||
this.getDataReportPlanning(); |
|
||||||
} |
|
||||||
|
|
||||||
async componentDidUpdate(prevProps, prevState) { |
|
||||||
const { search,startDate,dataExport } = this.state |
|
||||||
if (search !== prevState.search) this.getDataReportPlanning() |
|
||||||
if (startDate !== prevState.startDate) this.getDataReportPlanning() |
|
||||||
if (dataExport !== prevState.dataExport){ |
|
||||||
if(dataExport.length > 0){ |
|
||||||
this.exportExcel() |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
handleSearch = e => { |
|
||||||
const value = e.target.value |
|
||||||
this.setState({ search: value, currentPage: 1 }) |
|
||||||
}; |
|
||||||
|
|
||||||
getDataReportPlanning = async () => { |
|
||||||
let start = 0; |
|
||||||
if (this.state.currentPage !== 1 && this.state.currentPage > 1) { |
|
||||||
start = (this.state.currentPage * this.state.rowsPerPage) - this.state.rowsPerPage |
|
||||||
} |
|
||||||
|
|
||||||
let dateStart = moment(this.state.startDate).format("YYYY-MM-DD 00:00:00"); |
|
||||||
let dateEnd = moment(this.state.endDate).format("YYYY-MM-DD 23:59:59"); |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const formData = { |
|
||||||
"columns": [ |
|
||||||
{ |
|
||||||
"name": "created_at", |
|
||||||
"logic_operator": "range", |
|
||||||
"value": dateStart, |
|
||||||
"value1": dateEnd, |
|
||||||
"operator": "AND" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "nama", |
|
||||||
"logic_operator": "ilike", |
|
||||||
"value": this.state.search, |
|
||||||
"operator": "AND", |
|
||||||
} |
|
||||||
], |
|
||||||
"joins": [ |
|
||||||
{ |
|
||||||
"name": "m_proyek", |
|
||||||
"column_join": "proyek_id", |
|
||||||
"column_results": [ |
|
||||||
"nama", |
|
||||||
"biaya", |
|
||||||
"color_progress", |
|
||||||
"jumlah_pekerja", |
|
||||||
"pic", |
|
||||||
"mulai_proyek", |
|
||||||
"akhir_proyek" |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "m_subproyek", |
|
||||||
"column_join": "subproyek_id", |
|
||||||
"column_results": [ |
|
||||||
"nama", |
|
||||||
"biaya", |
|
||||||
"color_progress", |
|
||||||
"jumlah_pekerja", |
|
||||||
"pic", |
|
||||||
"mulai_proyek", |
|
||||||
"akhir_proyek" |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "m_users", |
|
||||||
"column_join": "user_id", |
|
||||||
"column_results": [ |
|
||||||
"name", |
|
||||||
"username", |
|
||||||
"email", |
|
||||||
"phone_number", |
|
||||||
"gender" |
|
||||||
] |
|
||||||
} |
|
||||||
], |
|
||||||
"orders": { |
|
||||||
"columns": [ |
|
||||||
"planning_id" |
|
||||||
], |
|
||||||
"ascending": true |
|
||||||
}, |
|
||||||
"paging": { |
|
||||||
"start": start, |
|
||||||
"length": this.state.rowsPerPage |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
if(parseInt(role_id)!==1){ |
|
||||||
formData.columns.push( |
|
||||||
{ |
|
||||||
"name": "id", |
|
||||||
"logic_operator": "=", |
|
||||||
"value": proyek_id, |
|
||||||
"operator": "AND", |
|
||||||
"table_name": "m_proyek" |
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
const result = await axios |
|
||||||
.post(PLANNING_REALISASI_SEARCH, formData, config) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
if(result && result.data && result.data.code==200){ |
|
||||||
console.log("cek res planning", result.data.data) |
|
||||||
this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord }); |
|
||||||
}else{ |
|
||||||
NotificationManager.error('Gagal Menerima Data!!', 'Failed'); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
handleCloseDialogPlan = () => { |
|
||||||
this.setState({openDialogPlan: false}) |
|
||||||
} |
|
||||||
|
|
||||||
handleOpenDialogPlan = (param) => { |
|
||||||
this.setState({openDialogPlan: true}) |
|
||||||
this.setState({dataRealisasi: param.realisasi}) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
toggleAddDialogPlan = () => { |
|
||||||
this.setState({openDialogPlan: !this.stateopenDialogPlan}) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
handleOpenDialog = (type) => { |
|
||||||
if(type==="Map"){ |
|
||||||
this.setState({ openDialog: true }) |
|
||||||
this.showChildDialog(); |
|
||||||
}else{ |
|
||||||
this.setState({ openDialogEdit: true }) |
|
||||||
this.showDialogEdit(); |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
handleCloseDialog = () => { |
|
||||||
this.setState({ openDialog: false }) |
|
||||||
} |
|
||||||
|
|
||||||
handleCloseDialogEdit = (type, data) => { |
|
||||||
if(type==="save"){ |
|
||||||
this.updateStatusResponse(data); |
|
||||||
} |
|
||||||
this.setState({ openDialogEdit: false }) |
|
||||||
} |
|
||||||
|
|
||||||
toggleMapDialog = () => { |
|
||||||
this.setState({ openDialog: !this.state.openDialog }) |
|
||||||
} |
|
||||||
|
|
||||||
toggleEditDialog = () => { |
|
||||||
this.setState({ openDialogEdit:!this.state.openDialogEdit }); |
|
||||||
} |
|
||||||
|
|
||||||
handleMap = data => { |
|
||||||
this.setState({ dataMap: data }); |
|
||||||
this.handleOpenDialog('Map'); |
|
||||||
} |
|
||||||
|
|
||||||
handleEdit = data => { |
|
||||||
this.setState({ dataEdit:data }); |
|
||||||
this.handleOpenDialog('Edit'); |
|
||||||
} |
|
||||||
|
|
||||||
handleDelete = (id) => { |
|
||||||
this.setState({ alertDelete: true, idDelete: id }); |
|
||||||
} |
|
||||||
|
|
||||||
onShowSizeChange = (current, pageSize) => { |
|
||||||
this.setState({ rowsPerPage: pageSize }, () => { |
|
||||||
this.getDataReportPlanning(); |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
onPagination = (current, pageSize) => { |
|
||||||
this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => { |
|
||||||
this.getDataReportPlanning(); |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
toggle = (param) => { |
|
||||||
if (param === "map") { |
|
||||||
this.setState(prevState => ({ tooltipMap: !prevState.tooltipMap })) |
|
||||||
}else if(param==="edit"){ |
|
||||||
this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit })) |
|
||||||
} else if (param === "delete") { |
|
||||||
this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete })) |
|
||||||
} else if (param === "export") { |
|
||||||
this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport })) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
handleDatePicker = (date, dateString) => { |
|
||||||
this.setState({ startDate:date[0],endDate:date[1] },()=>{ |
|
||||||
this.getDataReportPlanning(); |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
handleTipe = (e) => { |
|
||||||
this.setState({ typeClock:e.target.value }, () => { |
|
||||||
this.getDataReportPlanning(); |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
handleExportExcel = async () => { |
|
||||||
let dateStart = moment(this.state.startDate).format("YYYY-MM-DD 00:00:00"); |
|
||||||
let dateEnd = moment(this.state.endDate).format("YYYY-MM-DD 23:59:59"); |
|
||||||
|
|
||||||
const payload = { |
|
||||||
"columns": [ |
|
||||||
{ |
|
||||||
"name": "created_at", |
|
||||||
"logic_operator": "range", |
|
||||||
"value": dateStart, |
|
||||||
"value1": dateEnd, |
|
||||||
"operator": "AND" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "nama", |
|
||||||
"logic_operator": "ilike", |
|
||||||
"value": this.state.search, |
|
||||||
"operator": "AND", |
|
||||||
} |
|
||||||
], |
|
||||||
"joins": [ |
|
||||||
{ |
|
||||||
"name": "m_proyek", |
|
||||||
"column_join": "proyek_id", |
|
||||||
"column_results": [ |
|
||||||
"nama", |
|
||||||
"biaya", |
|
||||||
"color_progress", |
|
||||||
"jumlah_pekerja", |
|
||||||
"pic", |
|
||||||
"mulai_proyek", |
|
||||||
"akhir_proyek" |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "m_subproyek", |
|
||||||
"column_join": "subproyek_id", |
|
||||||
"column_results": [ |
|
||||||
"nama", |
|
||||||
"biaya", |
|
||||||
"color_progress", |
|
||||||
"jumlah_pekerja", |
|
||||||
"pic", |
|
||||||
"mulai_proyek", |
|
||||||
"akhir_proyek" |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "m_users", |
|
||||||
"column_join": "user_id", |
|
||||||
"column_results": [ |
|
||||||
"name", |
|
||||||
"username", |
|
||||||
"email", |
|
||||||
"phone_number", |
|
||||||
"gender" |
|
||||||
] |
|
||||||
} |
|
||||||
], |
|
||||||
"orders": { |
|
||||||
"columns": [ |
|
||||||
"planning_id" |
|
||||||
], |
|
||||||
"ascending": true |
|
||||||
}, |
|
||||||
"paging": { |
|
||||||
"start": 0, |
|
||||||
"length": -1 |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
if(parseInt(role_id)!==1){ |
|
||||||
payload.columns.push( |
|
||||||
{ |
|
||||||
"name": "id", |
|
||||||
"logic_operator": "=", |
|
||||||
"value": proyek_id, |
|
||||||
"operator": "AND", |
|
||||||
"table_name": "m_proyek" |
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
const result = await axios |
|
||||||
.post(PLANNING_REALISASI_SEARCH, payload, config) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
|
|
||||||
if(result && result.data && result.data.code == 200){ |
|
||||||
let resData = result.data.data; |
|
||||||
const excelData = []; |
|
||||||
resData.map((n, index) => { |
|
||||||
let dataRow = { |
|
||||||
"Proyek": n.join ? n.join.m_proyek_nama : "-", |
|
||||||
"Pekerjaan": n.nama ? n.nama : "-", |
|
||||||
"Target" : n.jumlah_titik ? n.jumlah_titik : "0", |
|
||||||
"Actual" : n.realisasi ? this.renderActual(n.realisasi) : "0", |
|
||||||
"Team Leader" : n.join.m_subproyek_pic ? `${n.join.m_subproyek_pic}` : "-", |
|
||||||
"Waspang" : n.join.m_users_name ? `${n.join.m_users_name}` : "-", |
|
||||||
"Tanggal" : n.target_planning ? moment(n.target_planning).format("DD-MM-YYYY") : "-", |
|
||||||
} |
|
||||||
excelData.push(dataRow) |
|
||||||
}) |
|
||||||
this.setState({dataExport:excelData}) |
|
||||||
}else{ |
|
||||||
NotificationManager.error('Gagal Export Data!!', 'Failed'); |
|
||||||
}
|
|
||||||
} |
|
||||||
|
|
||||||
exportExcel = () => { |
|
||||||
const dataExcel = this.state.dataExport || []; |
|
||||||
const fileName = `Data Planning vs realisasi.xlsx`; |
|
||||||
const ws = XLSX.utils.json_to_sheet(dataExcel); |
|
||||||
const wb = XLSX.utils.book_new(); |
|
||||||
XLSX.utils.book_append_sheet(wb, ws, `Data Planning vs realisasi`); |
|
||||||
|
|
||||||
XLSX.writeFile(wb, fileName); |
|
||||||
this.setState({dataExport:[] }) |
|
||||||
} |
|
||||||
|
|
||||||
updateStatusResponse = async (data) => { |
|
||||||
let url = ``; |
|
||||||
|
|
||||||
const formData = new FormData(); |
|
||||||
formData.append("lat", data.lat); |
|
||||||
formData.append("lon", data.lon); |
|
||||||
formData.append("status_response", data.status_response); |
|
||||||
|
|
||||||
const result = await axios |
|
||||||
.post(url, formData) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
if(result && result.data){ |
|
||||||
if (result.data.code_status == 200) { |
|
||||||
NotificationManager.success('Berhasil update status response!!', 'Success!'); |
|
||||||
} else { |
|
||||||
NotificationManager.error('Gagal update status response!!', 'Failed'); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
renderActual = (realisasi) => { |
|
||||||
let data = realisasi || [] |
|
||||||
let sumActual = 0 |
|
||||||
data.map((val, index) => { |
|
||||||
sumActual += parseInt(val.jumlah_pekerjaan) |
|
||||||
}) |
|
||||||
return sumActual |
|
||||||
} |
|
||||||
|
|
||||||
renderTable = () => { |
|
||||||
const dataTable2 = this.state.dataTable || []; |
|
||||||
return ( |
|
||||||
<tbody> |
|
||||||
{dataTable2.length!==0 ? dataTable2.map((n, index) => { |
|
||||||
return ( |
|
||||||
<tr key={index}> |
|
||||||
<td>{index + 1}</td> |
|
||||||
<td>{ n.join ? n.join.m_proyek_nama : "-" }</td> |
|
||||||
<td>{ n.nama ? n.nama : "-"}</td> |
|
||||||
<td>{ n.jumlah_titik ? n.jumlah_titik : "0" }</td> |
|
||||||
<td>{ n.realisasi ? this.renderActual(n.realisasi) : "0" }</td> |
|
||||||
<td>{ n.join.m_subproyek_pic ? `${n.join.m_subproyek_pic}` : "-" }</td> |
|
||||||
<td>{ n.join.m_users_name ? `${n.join.m_users_name}` : "-" }</td> |
|
||||||
<td>{ n.target_planning ? moment(n.target_planning).format("DD-MM-YYYY") : "-" }</td> |
|
||||||
<td> |
|
||||||
{/* <i id="TooltipDelete" className="cil-trash fa-lg" style={{ color: 'red', marginRight: '10px', cursor: "pointer" }} onClick={() => this.handleDelete(n.id)}></i> |
|
||||||
<Tooltip placement="right" isOpen={this.state.tooltipDelete} target="TooltipDelete" toggle={() => this.toggle("delete")}> |
|
||||||
Delete |
|
||||||
</Tooltip>*/} |
|
||||||
{/* <i id="TooltipEdit" className="cil-pencil fa-lg" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(n)}></i> |
|
||||||
<Tooltip placement="right" isOpen={this.state.tooltipEdit} target="TooltipEdit" toggle={() => this.toggle("edit")}> |
|
||||||
Edit |
|
||||||
</Tooltip> |
|
||||||
{' '} */} |
|
||||||
<Tooltip title="View Realisasi"> |
|
||||||
<i onClick={() => this.handleOpenDialogPlan(n)} id="tooltipMap" className="fa fa-eye fa-lg" style={{ color: 'black', cursor: "pointer" }}></i> |
|
||||||
</Tooltip> |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
) |
|
||||||
}) : <tr> |
|
||||||
<td colSpan="9" align="center">No Data Available</td> |
|
||||||
</tr> |
|
||||||
}
|
|
||||||
</tbody> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
handleChangeDay = (e) => { |
|
||||||
const val = e.target.value; |
|
||||||
this.setState({ currentDay:val }); |
|
||||||
if(val==="today"){ |
|
||||||
this.setState({ |
|
||||||
startDate:moment(moment().format("YYYY-M-D")), |
|
||||||
endDate:moment(moment().format("YYYY-M-D")),
|
|
||||||
currentPage: 1 |
|
||||||
}) |
|
||||||
}else if(val==="3 day"){ |
|
||||||
this.setState({ |
|
||||||
startDate:moment(moment().subtract(3, "days").format("YYYY-M-D")), |
|
||||||
endDate:moment(moment().format("YYYY-M-D")),
|
|
||||||
currentPage: 1 |
|
||||||
}) |
|
||||||
}else if(val==="7 day"){ |
|
||||||
this.setState({ |
|
||||||
startDate:moment(moment().subtract(7, "days").format("YYYY-M-D")), |
|
||||||
endDate:moment(moment().format("YYYY-M-D")),
|
|
||||||
currentPage: 1 |
|
||||||
}) |
|
||||||
}else{ |
|
||||||
this.setState({ |
|
||||||
startDate:moment(moment().format("YYYY-M-D")), |
|
||||||
endDate:moment(moment().format("YYYY-M-D")),
|
|
||||||
currentPage: 1 |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
render() { |
|
||||||
const { tooltipExport,dataTable, openDialogEdit, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipMap, tooltipDelete } = this.state |
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<NotificationContainer /> |
|
||||||
{/* <SweetAlert |
|
||||||
show={this.state.alertDelete} |
|
||||||
warning |
|
||||||
showCancel |
|
||||||
confirmBtnText="Delete" |
|
||||||
confirmBtnBsStyle="danger" |
|
||||||
title="Are you sure?" |
|
||||||
onConfirm={this.onConfirmDelete} |
|
||||||
onCancel={() => this.setState({ alertDelete: false, idDelete: 0 })} |
|
||||||
focusCancelBtn |
|
||||||
> |
|
||||||
Data tipe karyawan akan terhapus!! |
|
||||||
</SweetAlert> */} |
|
||||||
<DialogForm |
|
||||||
openDialog={openDialog} |
|
||||||
closeDialog={this.handleCloseDialog} |
|
||||||
toggleDialog={() => this.toggleMapDialog} |
|
||||||
dataMap={this.state.dataMap} |
|
||||||
showDialog={showDialog => this.showChildDialog = showDialog} |
|
||||||
/> |
|
||||||
<DialogEdit |
|
||||||
openDialog={openDialogEdit} |
|
||||||
closeDialog={this.handleCloseDialogEdit} |
|
||||||
toggleDialog={() => this.toggleEditDialog} |
|
||||||
dataEdit={this.state.dataEdit} |
|
||||||
showDialog={showDialog => this.showDialogEdit = showDialog} |
|
||||||
/> |
|
||||||
<Card> |
|
||||||
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
|
||||||
<h4>Planning Vs Realisasi</h4> |
|
||||||
<div> |
|
||||||
{/* <Button color="primary" onClick={() => this.handleOpenDialog('Save')}>Tambah Broadcast</Button>{' '} */} |
|
||||||
<Tooltip title="Export Excel"> |
|
||||||
<Button id="TooltipExport" color="primary" onClick={()=> this.handleExportExcel()}><i className="fa fa-print"></i></Button> |
|
||||||
</Tooltip> |
|
||||||
</div> |
|
||||||
</CardHeader> |
|
||||||
<CardBody> |
|
||||||
<div style={{ display: "flex", justifyContent: "space-between", marginBottom:"25px" }}> |
|
||||||
<div style={{ width:"100%",display:"inline-flex",alignItems:"center" }}> |
|
||||||
<div style={{ width:"50%",marginRight:"10px",maxWidth:"200px" }}> |
|
||||||
<Input type="select" onChange={(e) => this.handleChangeDay(e)} defaultValue={this.state.currentDay}> |
|
||||||
<option value="today">Hari Ini</option> |
|
||||||
<option value="3 day">3 Hari yang lalu</option> |
|
||||||
<option value="7 day">7 Hari yang lalu</option> |
|
||||||
</Input> |
|
||||||
</div> |
|
||||||
<div style={{ width:"50%" }}> |
|
||||||
<RangePicker size="default" allowClear={false} value={[this.state.startDate, this.state.endDate]} onChange={this.handleDatePicker}/>{' '} |
|
||||||
<Button color="primary" onClick={() => this.getDataReportPlanning()}>Cari</Button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<Input onChange={this.handleSearch} value={search} type="text" name="search" id="search" placeholder="Cari Nama Pekerjaan" style={{ maxWidth: "200px", marginBottom: "20px" }} /> |
|
||||||
</div> |
|
||||||
<Table responsive striped hover> |
|
||||||
<thead> |
|
||||||
<tr> |
|
||||||
{/* <th>Actions</th> */} |
|
||||||
{column.map((i, index) => { |
|
||||||
return ( |
|
||||||
<th key={index} scope="row">{i.name}</th> |
|
||||||
) |
|
||||||
})} |
|
||||||
</tr> |
|
||||||
</thead> |
|
||||||
{ this.renderTable() } |
|
||||||
</Table> |
|
||||||
<Pagination |
|
||||||
showSizeChanger |
|
||||||
onShowSizeChange={this.onShowSizeChange} |
|
||||||
onChange={this.onPagination} |
|
||||||
defaultCurrent={currentPage} |
|
||||||
pageSize={rowsPerPage} |
|
||||||
total={parseInt(totalPage)} |
|
||||||
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]} |
|
||||||
/> |
|
||||||
</CardBody> |
|
||||||
</Card> |
|
||||||
|
|
||||||
<DialogView |
|
||||||
openDialog={this.state.openDialogPlan} |
|
||||||
closeDialog={() => this.handleCloseDialogPlan()} |
|
||||||
toggleDialog={() => this.toggleAddDialogPlan()} |
|
||||||
dataPlanning={this.state.dataRealisasi} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,211 +0,0 @@ |
|||||||
import React, { useEffect, useState } from 'react' |
|
||||||
import { Modal, ModalHeader, ModalBody, ModalFooter,Row,Col } from 'reactstrap'; |
|
||||||
import { Button, Form, FormGroup, Label, Input } from 'reactstrap'; |
|
||||||
import { DatePicker,Select } from 'antd'; |
|
||||||
import moment from 'moment'; |
|
||||||
import 'antd/dist/antd.css'; |
|
||||||
|
|
||||||
const { Option } = Select |
|
||||||
const DialogForm = ({openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, dataRole}) => { |
|
||||||
const [id, setId] = useState(0) |
|
||||||
const [user_id, setUserId] = useState(0) |
|
||||||
const [name, setName] = useState('') |
|
||||||
const [username, setUsername] = useState('') |
|
||||||
const [birth_place, setBirthPlace] = useState('') |
|
||||||
const [birth_date, setBirthDate] = useState(moment(moment().format('YYYY-MM-DD'))) |
|
||||||
const [email, setEmail] = useState('') |
|
||||||
const [phone_number, setPhoneNumber] = useState('') |
|
||||||
const [address, setAddress] = useState('') |
|
||||||
const [gender, setGender] = useState('Laki-laki') |
|
||||||
const [password, setPassword] = useState('') |
|
||||||
const [role_id,setIdRole] = useState(null) |
|
||||||
useEffect(()=> { |
|
||||||
if(typeDialog==="Edit"){ |
|
||||||
if(dataEdit){ |
|
||||||
setId(dataEdit.id) |
|
||||||
setIdRole(3) |
|
||||||
setUserId(dataEdit.user_id) |
|
||||||
if(dataEdit.join){ |
|
||||||
setName(dataEdit.join.m_users_name) |
|
||||||
setEmail(dataEdit.join.m_users_email) |
|
||||||
setBirthDate(dataEdit.join.m_users_birth_date ? moment(moment(dataEdit.join.m_users_birth_date).format("YYYY-MM-DD")) : moment(moment())) |
|
||||||
setBirthPlace(dataEdit.join.m_users_birth_place) |
|
||||||
setPhoneNumber(dataEdit.join.m_users_phone_number) |
|
||||||
setGender(dataEdit.join.m_users_gender || "Laki-laki") |
|
||||||
setAddress(dataEdit.join.m_users_address) |
|
||||||
setUsername(dataEdit.join.m_users_username) |
|
||||||
} |
|
||||||
} |
|
||||||
}else{ |
|
||||||
setId(0) |
|
||||||
setName('') |
|
||||||
setEmail('') |
|
||||||
setBirthDate(moment(moment().format('YYYY-MM-DD'))) |
|
||||||
setBirthPlace('') |
|
||||||
setPhoneNumber('') |
|
||||||
setGender('Laki-laki') |
|
||||||
setAddress('') |
|
||||||
setUsername('') |
|
||||||
setPassword('') |
|
||||||
setIdRole(3) |
|
||||||
setUserId(0) |
|
||||||
} |
|
||||||
},[dataEdit,openDialog]) |
|
||||||
|
|
||||||
const handleSave = () => { |
|
||||||
let data = ''; |
|
||||||
if(typeDialog==="Save"){ |
|
||||||
data = { |
|
||||||
name, |
|
||||||
username, |
|
||||||
phone_number, |
|
||||||
email, |
|
||||||
birth_date, |
|
||||||
birth_place, |
|
||||||
gender, |
|
||||||
address, |
|
||||||
password, |
|
||||||
role_id, |
|
||||||
user_id |
|
||||||
} |
|
||||||
closeDialog('save', data); |
|
||||||
}else{ |
|
||||||
data = { |
|
||||||
id, |
|
||||||
name, |
|
||||||
username, |
|
||||||
phone_number, |
|
||||||
email, |
|
||||||
birth_date, |
|
||||||
birth_place, |
|
||||||
gender, |
|
||||||
address, |
|
||||||
role_id, |
|
||||||
user_id |
|
||||||
} |
|
||||||
|
|
||||||
if(password!==''){ |
|
||||||
data['password'] = password |
|
||||||
} |
|
||||||
|
|
||||||
closeDialog('edit', data); |
|
||||||
} |
|
||||||
setId(0) |
|
||||||
setName('') |
|
||||||
setEmail('') |
|
||||||
setBirthDate(moment(moment().format('YYYY-MM-DD'))) |
|
||||||
setBirthPlace('') |
|
||||||
setPhoneNumber('') |
|
||||||
setGender('Laki-laki') |
|
||||||
setAddress('') |
|
||||||
setUsername('') |
|
||||||
setPassword('') |
|
||||||
setIdRole(3) |
|
||||||
setUserId(0) |
|
||||||
} |
|
||||||
|
|
||||||
const handleCancel = () => { |
|
||||||
closeDialog('cancel', 'none') |
|
||||||
setId(0) |
|
||||||
setName('') |
|
||||||
setEmail('') |
|
||||||
setBirthDate(moment(moment().format('YYYY-MM-DD'))) |
|
||||||
setBirthPlace('') |
|
||||||
setPhoneNumber('') |
|
||||||
setGender('Laki-laki') |
|
||||||
setAddress('') |
|
||||||
setUsername('') |
|
||||||
setPassword('') |
|
||||||
setIdRole(null) |
|
||||||
setUserId(0) |
|
||||||
} |
|
||||||
|
|
||||||
const handleDatePicker = (date, dateString) => { |
|
||||||
setBirthDate(date) |
|
||||||
} |
|
||||||
|
|
||||||
const setupOption = () => { |
|
||||||
return( |
|
||||||
<> |
|
||||||
{dataRole.map((val, index)=> { |
|
||||||
return( |
|
||||||
<Option key={index} value={val.id}>{val.name}</Option> |
|
||||||
) |
|
||||||
})} |
|
||||||
</> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
const onChangeRole = (val) => { |
|
||||||
setIdRole(val) |
|
||||||
} |
|
||||||
|
|
||||||
const renderForm = () => { |
|
||||||
return( |
|
||||||
<Form> |
|
||||||
<Row> |
|
||||||
<Col> |
|
||||||
<FormGroup> |
|
||||||
<Label className="capitalize">Nama</Label> |
|
||||||
<Input type="text" value={name} onChange={(e)=> setName(e.target.value)} placeholder={`Nama..`}/> |
|
||||||
</FormGroup> |
|
||||||
<FormGroup> |
|
||||||
<Label>Tempat Lahir</Label> |
|
||||||
<Input type="text" value={birth_place} onChange={(e)=> setBirthPlace(e.target.value) } placeholder={`Tempat lahir..`} /> |
|
||||||
</FormGroup> |
|
||||||
<FormGroup> |
|
||||||
<Label>Tanggal Lahir</Label> |
|
||||||
<DatePicker style={{width:"100%"}} value={birth_date} onChange={handleDatePicker} /> |
|
||||||
</FormGroup> |
|
||||||
<FormGroup> |
|
||||||
<Label className="capitalize">Jenis Kelamin</Label> |
|
||||||
<Input type="select" value={gender} onChange={(e)=> setGender(e.target.value)} placeholder={`Jenis Kelamin..`}> |
|
||||||
<option value="Laki-laki">Laki-laki</option> |
|
||||||
<option value="Perempuan">Perempuan</option> |
|
||||||
</Input> |
|
||||||
</FormGroup> |
|
||||||
<FormGroup> |
|
||||||
<Label className="capitalize">Alamat</Label> |
|
||||||
<Input type="textarea" value={address} onChange={(e)=> setAddress(e.target.value)} placeholder={`Alamat..`} /> |
|
||||||
</FormGroup> |
|
||||||
</Col> |
|
||||||
<Col> |
|
||||||
<FormGroup> |
|
||||||
<Label>Username</Label> |
|
||||||
<Input type="text" value={username} onChange={(e)=> setUsername(e.target.value)} placeholder="username.." /> |
|
||||||
</FormGroup> |
|
||||||
<FormGroup> |
|
||||||
<Label>Email</Label> |
|
||||||
<Input type="text" value={email} onChange={(e)=> setEmail(e.target.value)} placeholder="email.." /> |
|
||||||
</FormGroup> |
|
||||||
<FormGroup> |
|
||||||
<Label>Nomor Hp</Label> |
|
||||||
<Input type="text" value={phone_number} onChange={(e)=> setPhoneNumber(e.target.value)} placeholder={`Nomor Hp..`} /> |
|
||||||
</FormGroup> |
|
||||||
<FormGroup> |
|
||||||
<Label>Password</Label> |
|
||||||
<Input type="password" value={password} onChange={(e)=> setPassword(e.target.value)} placeholder="password.." /> |
|
||||||
</FormGroup> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Form> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
return ( |
|
||||||
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
|
||||||
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog=="Save" ? `Tambah` : "Edit"} User Waspang</ModalHeader> |
|
||||||
<ModalBody> |
|
||||||
{renderForm()} |
|
||||||
</ModalBody> |
|
||||||
<ModalFooter> |
|
||||||
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} |
|
||||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button> |
|
||||||
</ModalFooter> |
|
||||||
</Modal> |
|
||||||
) |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
export default DialogForm; |
|
||||||
@ -1,156 +0,0 @@ |
|||||||
import React, { useEffect, useState } from 'react' |
|
||||||
import { Modal, ModalHeader, ModalBody, ModalFooter, Row, Col } from 'reactstrap'; |
|
||||||
import { Button, Form, FormGroup, Label, Input } from 'reactstrap'; |
|
||||||
import { Select, DatePicker } from 'antd'; |
|
||||||
import moment from 'moment'; |
|
||||||
import 'antd/dist/antd.css'; |
|
||||||
const proyekId = localStorage.getItem('proyek_id'); |
|
||||||
const { Option } = Select; |
|
||||||
const DialogProyek = ({ openDialog, closeDialog, toggleDialog, dataWaspangProyek, dataProyek, waspangId }) => { |
|
||||||
const [id, setId] = useState(0) |
|
||||||
const [proyek_id, setProyekId] = useState(null) |
|
||||||
const [user_id, setUserId] = useState(null) |
|
||||||
const [userIdAdd, setUserIdAdd] = useState(0) |
|
||||||
const [startDate, setStartDate] = useState(moment(moment())) |
|
||||||
const [endDate, setEndDate] = useState(moment(moment())) |
|
||||||
const [type, setType] = useState("add") |
|
||||||
const [disableSelectProyek, setDisableSelectProyek] = useState(false) |
|
||||||
const [role_id, setRoleId] = useState(localStorage.getItem('role_id')) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (waspangId) { |
|
||||||
setUserIdAdd(waspangId) |
|
||||||
} |
|
||||||
}, [waspangId]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
let data = dataWaspangProyek || [] |
|
||||||
console.log("waspang id", waspangId) |
|
||||||
console.log("role_id", role_id) |
|
||||||
if (data.length > 0) { |
|
||||||
let dataObj = data[0] |
|
||||||
setType("edit") |
|
||||||
setProyekId(dataObj.proyek_id) |
|
||||||
if (dataObj.mulai) { |
|
||||||
setStartDate(moment(moment(dataObj.mulai))) |
|
||||||
} else { |
|
||||||
setStartDate(moment(moment())) |
|
||||||
} |
|
||||||
|
|
||||||
if (dataObj.mulai) { |
|
||||||
setEndDate(moment(moment(dataObj.akhir))) |
|
||||||
} else { |
|
||||||
setEndDate(moment(moment())) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
setUserId(dataObj.user_id) |
|
||||||
setId(dataObj.id) |
|
||||||
} else { |
|
||||||
setProyekId(null) |
|
||||||
setStartDate(moment(moment())) |
|
||||||
setEndDate(moment(moment())) |
|
||||||
setType("add") |
|
||||||
} |
|
||||||
|
|
||||||
if (parseInt(role_id) === 2) { |
|
||||||
setProyekId(parseInt(proyekId)) |
|
||||||
setDisableSelectProyek(true) |
|
||||||
} |
|
||||||
}, [dataWaspangProyek, openDialog]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (parseInt(role_id) === 2) { |
|
||||||
setProyekId(parseInt(proyekId)) |
|
||||||
setDisableSelectProyek(true) |
|
||||||
} |
|
||||||
}, [role_id]) |
|
||||||
const handleCancel = () => { |
|
||||||
closeDialog('cancel', 'none') |
|
||||||
setId(0) |
|
||||||
setProyekId(null) |
|
||||||
} |
|
||||||
|
|
||||||
const onChangeParent = (value) => { |
|
||||||
setProyekId(value) |
|
||||||
} |
|
||||||
|
|
||||||
const setupOption = () => { |
|
||||||
return ( |
|
||||||
<> |
|
||||||
{dataProyek.map((val, index) => { |
|
||||||
return ( |
|
||||||
<Option key={index} value={val.id}>{val.nama}</Option> |
|
||||||
) |
|
||||||
})} |
|
||||||
</> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
const handleStartDate = (date, string) => { |
|
||||||
setStartDate(date) |
|
||||||
} |
|
||||||
|
|
||||||
const handleEndDate = (date, string) => { |
|
||||||
setEndDate(date) |
|
||||||
} |
|
||||||
|
|
||||||
const handleSave = () => { |
|
||||||
let data = { |
|
||||||
type, |
|
||||||
mulai: startDate, |
|
||||||
akhir: endDate, |
|
||||||
proyek_id, |
|
||||||
user_id |
|
||||||
} |
|
||||||
|
|
||||||
if (type === "add") { |
|
||||||
data['user_id'] = userIdAdd |
|
||||||
} |
|
||||||
|
|
||||||
if (type === "edit") { |
|
||||||
data['id'] = id |
|
||||||
} |
|
||||||
|
|
||||||
closeDialog("save", data) |
|
||||||
} |
|
||||||
|
|
||||||
const renderForm = () => { |
|
||||||
return ( |
|
||||||
<Form> |
|
||||||
<FormGroup> |
|
||||||
<Label className="capitalize">Proyek</Label> |
|
||||||
{/* <Input type="text" value={alias} onChange={(e)=> setAlias(e.target.value)} placeholder={`Icon..`} /> */} |
|
||||||
<Select showSearch value={proyek_id} onChange={onChangeParent} placeholder="Select Proyek .." style={{ width: '100%' }} disabled={disableSelectProyek}> |
|
||||||
{setupOption()} |
|
||||||
</Select> |
|
||||||
</FormGroup> |
|
||||||
<FormGroup> |
|
||||||
<Label className="capitalize">Tanggal Mulai</Label> |
|
||||||
<DatePicker style={{ width: "100%" }} value={startDate} onChange={handleStartDate} allowClear={false} /> |
|
||||||
</FormGroup> |
|
||||||
<FormGroup> |
|
||||||
<Label className="capitalize">Tanggal</Label> |
|
||||||
<DatePicker style={{ width: "100%" }} value={endDate} onChange={handleEndDate} allowClear={false} /> |
|
||||||
</FormGroup> |
|
||||||
</Form> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
return ( |
|
||||||
<Modal isOpen={openDialog} toggle={toggleDialog}> |
|
||||||
<ModalHeader className="capitalize" toggle={() => closeDialog("none", "none")}>Save User Proyek</ModalHeader> |
|
||||||
<ModalBody> |
|
||||||
{renderForm()} |
|
||||||
</ModalBody> |
|
||||||
<ModalFooter> |
|
||||||
<Button color="primary" onClick={() => handleSave()}>Save</Button>{' '} |
|
||||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button> |
|
||||||
</ModalFooter> |
|
||||||
</Modal> |
|
||||||
) |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
export default DialogProyek; |
|
||||||
@ -1,686 +0,0 @@ |
|||||||
import React, { useState, useEffect } from 'react'; |
|
||||||
import { Card, CardBody, CardHeader, Col, Row, Table, Input } from 'reactstrap'; |
|
||||||
import { Button } from 'reactstrap'; |
|
||||||
import axios from 'axios'; |
|
||||||
import * as XLSX from 'xlsx'; |
|
||||||
import SweetAlert from 'react-bootstrap-sweetalert'; |
|
||||||
import DialogForm from './DialogForm'; |
|
||||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
|
||||||
import { Pagination, Tooltip } from 'antd'; |
|
||||||
import {
|
|
||||||
USER_ADD, |
|
||||||
USER_SEARCH, |
|
||||||
USER_EDIT, |
|
||||||
USER_DELETE,
|
|
||||||
ROLE_SEARCH, |
|
||||||
USERROLE_ADD, |
|
||||||
USERROLE_EDIT, |
|
||||||
USERROLE_DELETE, |
|
||||||
USERROLE_SEARCH, |
|
||||||
USERPROYEK_SEARCH, |
|
||||||
PROYEK_SEARCH, |
|
||||||
USERPROYEK_EDIT, |
|
||||||
USERPROYEK_ADD |
|
||||||
} from '../../../const/ApiConst.js';import moment from 'moment'; |
|
||||||
import DialogProyek from './DialogProyek'; |
|
||||||
const token = window.localStorage.getItem('token'); |
|
||||||
const config = { |
|
||||||
headers:
|
|
||||||
{
|
|
||||||
Authorization : `Bearer ${token}`, |
|
||||||
"Content-type" : `application/json` |
|
||||||
} |
|
||||||
}; |
|
||||||
const column =
|
|
||||||
[ |
|
||||||
{ name: "Nama" }, |
|
||||||
{ name: "Tempat Lahir" }, |
|
||||||
{ name: "Tanggal Lahir" }, |
|
||||||
{ name: "Nomor Telepon" }, |
|
||||||
{ name: "Email" }, |
|
||||||
{ name: "Proyek"} |
|
||||||
] |
|
||||||
|
|
||||||
|
|
||||||
const IndexUser = ({params}) => { |
|
||||||
const [dataTable, setDatatable] = useState([]) |
|
||||||
const [search, setSearch] = useState('') |
|
||||||
const [currentPage, setCurrentPage] = useState(1) |
|
||||||
const [totalPage, setTotalPage] = useState(0) |
|
||||||
const [openDialog, setOpenDialog] = useState(false) |
|
||||||
const [typeDialog, setTypeDialog] = useState('Save') |
|
||||||
const [idDelete, setIdDelete] = useState(0) |
|
||||||
const [dataProyek, setDataProyek] = useState([]) |
|
||||||
const [alertDelete, setAlertDelete] = useState(false) |
|
||||||
const [dataEdit, setDataEdit] = useState([]) |
|
||||||
const [rowsPerPage, setRowsPerPage] = useState(10) |
|
||||||
const [clickOpenModal, setClickOpenModal] = useState(false) |
|
||||||
const [allDataUserProyek, setAllDataUserProyek] = useState([]) |
|
||||||
const [dataRole, setDataRole] = useState([]) |
|
||||||
const [dataExport, setDataExport] = useState([]) |
|
||||||
const [openDialogProyek, setOpenDialogProyek] = useState(false) |
|
||||||
const [dataWaspangProyek, setDataWaspangProyek] = useState([]) |
|
||||||
const [waspangId, setWaspangId] = useState([]) |
|
||||||
const pageName = params.name; |
|
||||||
useEffect(()=> { |
|
||||||
getAllDataRole(); |
|
||||||
getAllDataProyek(); |
|
||||||
getAllDataUserProyek(); |
|
||||||
},[]) |
|
||||||
|
|
||||||
useEffect(()=> { |
|
||||||
getDataUser(); |
|
||||||
},[search,rowsPerPage,currentPage]) |
|
||||||
|
|
||||||
useEffect(()=> { |
|
||||||
const cekData = dataExport || [] |
|
||||||
if(cekData.length > 0){ |
|
||||||
exportExcel() |
|
||||||
} |
|
||||||
},[dataExport]) |
|
||||||
|
|
||||||
const handleSearch = e => { |
|
||||||
const value = e.target.value |
|
||||||
setSearch(value); |
|
||||||
setCurrentPage(1) |
|
||||||
}; |
|
||||||
|
|
||||||
const getAllDataRole = async () => { |
|
||||||
|
|
||||||
const payload = { |
|
||||||
"paging": {"start": 0, "length": -1}, |
|
||||||
"columns": [ |
|
||||||
{"name": "name", "logic_operator": "ilike", "value": "", "operator": "AND"} |
|
||||||
], |
|
||||||
"joins": [], |
|
||||||
"orders": {"columns": ["id"], "ascending": false} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const result = await axios |
|
||||||
.post(ROLE_SEARCH, payload, config) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
|
|
||||||
if(result && result.data && result.data.code == 200){ |
|
||||||
setDataRole(result.data.data); |
|
||||||
}else{ |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const getAllDataProyek = async () => { |
|
||||||
|
|
||||||
const payload = { |
|
||||||
"paging": {"start": 0, "length": -1}, |
|
||||||
"columns": [ |
|
||||||
{"name": "nama", "logic_operator": "ilike", "value": "", "operator": "AND"} |
|
||||||
], |
|
||||||
"joins": [], |
|
||||||
"orders": {"columns": ["id"], "ascending": false} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const result = await axios |
|
||||||
.post(PROYEK_SEARCH, payload, config) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
if(result && result.data && result.data.code == 200){ |
|
||||||
setDataProyek(result.data.data); |
|
||||||
}else{ |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const getAllDataUserProyek = async () => { |
|
||||||
const formData = { |
|
||||||
"paging": {"start": 0, "length": -1}, |
|
||||||
"columns": [ |
|
||||||
], |
|
||||||
"joins": [ |
|
||||||
{ |
|
||||||
"name":"m_proyek", |
|
||||||
"column_join":"proyek_id", |
|
||||||
"column_results":[ |
|
||||||
"nama", |
|
||||||
] |
|
||||||
} |
|
||||||
], |
|
||||||
"orders": {"columns": ["id"], "ascending": false} |
|
||||||
} |
|
||||||
const result = await axios.post(USERPROYEK_SEARCH, formData, config) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
if(result && result.data && result.data.code===200){ |
|
||||||
setAllDataUserProyek(result.data.data) |
|
||||||
}else{ |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const getDataUser = async () => { |
|
||||||
|
|
||||||
let start = 0; |
|
||||||
|
|
||||||
if (currentPage !== 1 && currentPage > 1) { |
|
||||||
start = (currentPage * rowsPerPage) - rowsPerPage |
|
||||||
} |
|
||||||
|
|
||||||
const payload = { |
|
||||||
"paging":{ |
|
||||||
"start":start, |
|
||||||
"length":rowsPerPage |
|
||||||
}, |
|
||||||
"filter_columns":[ |
|
||||||
{ |
|
||||||
"name":"name", |
|
||||||
"value":"", |
|
||||||
"table_name":"m_users" |
|
||||||
} |
|
||||||
], |
|
||||||
"columns":[ |
|
||||||
{ |
|
||||||
"name":"name", |
|
||||||
"logic_operator":"like", |
|
||||||
"value":search, |
|
||||||
"operator":"AND", |
|
||||||
"table_name":"m_users" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name":"id", |
|
||||||
"logic_operator":"=", |
|
||||||
"value":'3', |
|
||||||
"operator":"AND", |
|
||||||
"table_name":"m_roles" |
|
||||||
} |
|
||||||
], |
|
||||||
"joins":[ |
|
||||||
{ |
|
||||||
"name":"m_users", |
|
||||||
"column_join":"user_id", |
|
||||||
"column_results":[ |
|
||||||
"username", |
|
||||||
"name", |
|
||||||
"email", |
|
||||||
"gender", |
|
||||||
"phone_number", |
|
||||||
"address", |
|
||||||
"birth_place", |
|
||||||
"birth_date" |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name":"m_roles", |
|
||||||
"column_join":"role_id", |
|
||||||
"column_results":[ |
|
||||||
"name" |
|
||||||
] |
|
||||||
} |
|
||||||
], |
|
||||||
"orders":{ |
|
||||||
"columns":[ |
|
||||||
"id" |
|
||||||
], |
|
||||||
"ascending":false |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const result = await axios |
|
||||||
.post(USERROLE_SEARCH, payload, config) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if(result && result.data && result.data.code == 200){ |
|
||||||
setDatatable(result.data.data); |
|
||||||
setTotalPage(result.data.totalRecord); |
|
||||||
}else{ |
|
||||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const handleOpenDialog = async (type) => { |
|
||||||
await setTypeDialog(type) |
|
||||||
setOpenDialog(true) |
|
||||||
} |
|
||||||
|
|
||||||
const handleCloseDialog = (type, data) => { |
|
||||||
if (type === "save") { |
|
||||||
saveUser(data); |
|
||||||
} else if (type === "edit") { |
|
||||||
editUser(data); |
|
||||||
} |
|
||||||
setDataEdit([]) |
|
||||||
setOpenDialog(false) |
|
||||||
} |
|
||||||
|
|
||||||
const toggleAddDialog = () => { |
|
||||||
setOpenDialog(!openDialog) |
|
||||||
} |
|
||||||
|
|
||||||
const onConfirmDelete = async () => { |
|
||||||
let url = USER_DELETE(idDelete); |
|
||||||
|
|
||||||
const result = await axios.delete(url,config) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
if (result && result.data && result.data.code === 200) { |
|
||||||
getDataUser() |
|
||||||
setIdDelete(0) |
|
||||||
setAlertDelete(false) |
|
||||||
NotificationManager.success(`Data user berhasil dihapus!`, 'Success!!'); |
|
||||||
} else { |
|
||||||
setIdDelete(0) |
|
||||||
setAlertDelete(false) |
|
||||||
NotificationManager.error(`Data user gagal dihapus!}`, 'Failed!!'); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const userRoleDelete = async (id) => { |
|
||||||
let url = USERROLE_DELETE(id); |
|
||||||
|
|
||||||
const result = await axios.delete(url,config) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
if (result && result.data && result.data.code === 200) { |
|
||||||
|
|
||||||
} else { |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const saveUser = async (data) => {
|
|
||||||
const formData = data |
|
||||||
|
|
||||||
const result = await axios.post(USER_ADD, formData, config) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
if(result && result.data && result.data.code===200){ |
|
||||||
let dataRes = result.data.data |
|
||||||
addUserRole(dataRes.id, data.role_id) |
|
||||||
} else { |
|
||||||
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
|
||||||
}
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
const editUser = async (data) => { |
|
||||||
|
|
||||||
let url = USER_EDIT(data.user_id) |
|
||||||
|
|
||||||
const formData = data |
|
||||||
|
|
||||||
const result = await axios.put(url, formData, config) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
if(result && result.data && result.data.code===200){ |
|
||||||
editUserRole(data) |
|
||||||
} else { |
|
||||||
NotificationManager.error(`${result.data.message}`, `Failed!!`); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const addUserRole = async (user_id, role_id) => { |
|
||||||
const formData = { |
|
||||||
user_id, |
|
||||||
role_id |
|
||||||
} |
|
||||||
const result = await axios.post(USERROLE_ADD, formData, config) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
if(result && result.data && result.data.code===200){ |
|
||||||
getDataUser(); |
|
||||||
NotificationManager.success(`Data user berhasil ditambahkan`, 'Success!!'); |
|
||||||
} else { |
|
||||||
NotificationManager.error(`${result.data.message}`, `Failed!!`); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const editUserRole = async (data) => { |
|
||||||
let url = USERROLE_EDIT(data.id) |
|
||||||
|
|
||||||
const formData = { |
|
||||||
user_id:data.user_id, |
|
||||||
role_id:data.role_id |
|
||||||
} |
|
||||||
|
|
||||||
const result = await axios.put(url, formData, config) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
if(result && result.data && result.data.code===200){ |
|
||||||
getDataUser(); |
|
||||||
NotificationManager.success(`Data user berhasil di edit`, 'Success!!'); |
|
||||||
} else { |
|
||||||
NotificationManager.error(`${result.data.message}`, `Failed!!`); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
const handleEdit = async (data) => { |
|
||||||
await setDataEdit(data) |
|
||||||
handleOpenDialog('Edit'); |
|
||||||
} |
|
||||||
|
|
||||||
const handleDelete = async (id) => { |
|
||||||
await setAlertDelete(true) |
|
||||||
await setIdDelete(id) |
|
||||||
} |
|
||||||
|
|
||||||
const onShowSizeChange = (current, pageSize) => { |
|
||||||
setRowsPerPage(pageSize) |
|
||||||
} |
|
||||||
|
|
||||||
const onPagination = (current, pageSize) => { |
|
||||||
setCurrentPage(current) |
|
||||||
} |
|
||||||
|
|
||||||
const handleExportExcel = async () => { |
|
||||||
|
|
||||||
const payload = { |
|
||||||
"paging":{ |
|
||||||
"start":0, |
|
||||||
"length":-1 |
|
||||||
}, |
|
||||||
"filter_columns":[ |
|
||||||
{ |
|
||||||
"name":"name", |
|
||||||
"value":"", |
|
||||||
"table_name":"m_users" |
|
||||||
} |
|
||||||
], |
|
||||||
"columns":[ |
|
||||||
{ |
|
||||||
"name":"name", |
|
||||||
"logic_operator":"like", |
|
||||||
"value":search, |
|
||||||
"operator":"AND", |
|
||||||
"table_name":"m_users" |
|
||||||
} |
|
||||||
], |
|
||||||
"joins":[ |
|
||||||
{ |
|
||||||
"name":"m_users", |
|
||||||
"column_join":"user_id", |
|
||||||
"column_results":[ |
|
||||||
"username", |
|
||||||
"name", |
|
||||||
"email", |
|
||||||
"gender", |
|
||||||
"phone_number", |
|
||||||
"address", |
|
||||||
"birth_place", |
|
||||||
"birth_date" |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name":"m_roles", |
|
||||||
"column_join":"role_id", |
|
||||||
"column_results":[ |
|
||||||
"name" |
|
||||||
] |
|
||||||
} |
|
||||||
], |
|
||||||
"orders":{ |
|
||||||
"columns":[ |
|
||||||
"id" |
|
||||||
], |
|
||||||
"ascending":false |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const result = await axios |
|
||||||
.post(USERROLE_SEARCH, payload, config) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
if(result && result.data && result.data.code == 200){ |
|
||||||
let resData = result.data.data; |
|
||||||
const excelData = []; |
|
||||||
resData.map((n, index) => { |
|
||||||
let dataRow = { |
|
||||||
"Name" :n.join.m_users_name ? n.join.m_users_name : "-", |
|
||||||
"Email" :n.join.m_users_email ? n.join.m_users_email : "-", |
|
||||||
"Username" :n.join.m_users_username ? n.join.m_users_username : "-", |
|
||||||
"Phone Number":n.join.m_users_phone_number ? n.join.m_users_phone_number : "-", |
|
||||||
"Address":n.join.m_users_address ? n.join.m_users_address : "-", |
|
||||||
"Birth Date":n.join.m_users_birth_date ? moment(n.join.m_users_birth_date).format("YYYY-MM-DD") : "-", |
|
||||||
"Birth Place":n.join.m_users_birth_place ? n.join.m_users_birth_place : "-", |
|
||||||
"Gender":n.join.m_users_gender ? n.join.m_users_gender : "-" |
|
||||||
} |
|
||||||
excelData.push(dataRow) |
|
||||||
}) |
|
||||||
await setDataExport(excelData); |
|
||||||
}else{ |
|
||||||
NotificationManager.error('Gagal Export Data!!', 'Failed'); |
|
||||||
}
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
const exportExcel = () => { |
|
||||||
const dataExcel = dataExport || []; |
|
||||||
const fileName = `Data ${pageName}.xlsx`; |
|
||||||
const ws = XLSX.utils.json_to_sheet(dataExcel); |
|
||||||
const wb = XLSX.utils.book_new(); |
|
||||||
XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`); |
|
||||||
|
|
||||||
XLSX.writeFile(wb, fileName); |
|
||||||
} |
|
||||||
|
|
||||||
const cancelDelete = () => { |
|
||||||
setAlertDelete(false) |
|
||||||
setIdDelete(0) |
|
||||||
} |
|
||||||
|
|
||||||
const renderRoleProyek = (role_name, user_id) => { |
|
||||||
const userProyek = allDataUserProyek || [] |
|
||||||
let index = userProyek.findIndex(x => parseInt(x.user_id) === parseInt(user_id)); |
|
||||||
if(index>=0){ |
|
||||||
return allDataUserProyek[index].join.m_proyek_nama |
|
||||||
}else{ |
|
||||||
return role_name; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const handleWaspangProyek = async (data) => { |
|
||||||
await setWaspangId(data.user_id) |
|
||||||
getDataWaspangProyek(data.user_id); |
|
||||||
} |
|
||||||
|
|
||||||
const getDataWaspangProyek = async (id) => { |
|
||||||
const formData = { |
|
||||||
"paging": {"start": 0, "length": -1}, |
|
||||||
"columns": [ |
|
||||||
{"name": "user_id", "logic_operator": "=", "value": id.toString(), "operator": "AND"} |
|
||||||
], |
|
||||||
"joins": [], |
|
||||||
"orders": {"columns": ["id"], "ascending": false} |
|
||||||
} |
|
||||||
const result = await axios.post(USERPROYEK_SEARCH, formData, config) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
if(result && result.data && result.data.code===200){ |
|
||||||
let dataRes = result.data.data |
|
||||||
if(dataRes.length > 0){ |
|
||||||
await setDataWaspangProyek(result.data.data) |
|
||||||
setOpenDialogProyek(true) |
|
||||||
}else { |
|
||||||
await setDataWaspangProyek([]) |
|
||||||
setOpenDialogProyek(true) |
|
||||||
} |
|
||||||
|
|
||||||
} else { |
|
||||||
NotificationManager.error(`${result.data.message}`, `Failed!!`); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const closeProyekDialog = (type, data) => { |
|
||||||
if(type==="save"){ |
|
||||||
if(data.type==="add"){ |
|
||||||
saveWaspangProyek(data) |
|
||||||
}else{ |
|
||||||
editWaspangProyek(data) |
|
||||||
} |
|
||||||
} |
|
||||||
setOpenDialogProyek(false) |
|
||||||
} |
|
||||||
|
|
||||||
const saveWaspangProyek = async (data) => { |
|
||||||
const formData = data |
|
||||||
|
|
||||||
const result = await axios.post(USERPROYEK_ADD, formData, config) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
if(result && result.data && result.data.code===200){ |
|
||||||
NotificationManager.success(`Data user proyek berhasil ditambahkan`, 'Success!!'); |
|
||||||
} else { |
|
||||||
NotificationManager.error(`${result.data.message}`, `Failed!!`); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const editWaspangProyek = async (data) => { |
|
||||||
|
|
||||||
let url = USERPROYEK_EDIT(data.id) |
|
||||||
|
|
||||||
const formData = data |
|
||||||
|
|
||||||
const result = await axios.put(url, formData, config) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
if(result && result.data && result.data.code===200){ |
|
||||||
NotificationManager.success(`Data user proyek berhasil diedit`, 'Success!!'); |
|
||||||
} else { |
|
||||||
NotificationManager.error(`${result.data.message}`, `Failed!!`); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const toggleProyekDialog = () => { |
|
||||||
setOpenDialogProyek(!openDialogProyek) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<NotificationContainer /> |
|
||||||
<SweetAlert |
|
||||||
show={alertDelete} |
|
||||||
warning |
|
||||||
showCancel |
|
||||||
confirmBtnText="Delete" |
|
||||||
confirmBtnBsStyle="danger" |
|
||||||
title={`Apakah kamu yakin?`} |
|
||||||
onConfirm={onConfirmDelete} |
|
||||||
onCancel={() => cancelDelete()} |
|
||||||
focusCancelBtn |
|
||||||
> |
|
||||||
Data user waspang akan terhapus!! |
|
||||||
</SweetAlert> |
|
||||||
<DialogForm |
|
||||||
openDialog={openDialog} |
|
||||||
closeDialog={handleCloseDialog} |
|
||||||
toggleDialog={() => toggleAddDialog} |
|
||||||
typeDialog={typeDialog} |
|
||||||
dataEdit={dataEdit} |
|
||||||
clickOpenModal={clickOpenModal} |
|
||||||
dataRole={dataRole} |
|
||||||
/> |
|
||||||
<DialogProyek |
|
||||||
openDialog={openDialogProyek} |
|
||||||
closeDialog={closeProyekDialog} |
|
||||||
dataProyek={dataProyek} |
|
||||||
dataWaspangProyek={dataWaspangProyek} |
|
||||||
toggleDialog={toggleProyekDialog} |
|
||||||
waspangId={waspangId} |
|
||||||
/> |
|
||||||
<Card> |
|
||||||
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
|
||||||
<h4>{pageName}</h4> |
|
||||||
<Row> |
|
||||||
<Col> |
|
||||||
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Cari nama`} /> |
|
||||||
</Col> |
|
||||||
<Col> |
|
||||||
<Tooltip title="Tambah User Waspang"> |
|
||||||
<Button id="TooltipTambah" color="success" onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button> |
|
||||||
</Tooltip> |
|
||||||
<Tooltip title="Export Excel"> |
|
||||||
<Button style={{marginLeft:"5px"}} id="TooltipExport" color="primary" onClick={()=> handleExportExcel()}><i className="fa fa-print"></i></Button> |
|
||||||
</Tooltip> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</CardHeader> |
|
||||||
<CardBody> |
|
||||||
<Table responsive striped hover> |
|
||||||
<thead> |
|
||||||
<tr> |
|
||||||
<th className="capitalize">Aksi</th> |
|
||||||
{column.map((i, index) => { |
|
||||||
return ( |
|
||||||
<th key={index} scope="row">{i.name}</th> |
|
||||||
) |
|
||||||
})} |
|
||||||
</tr> |
|
||||||
</thead> |
|
||||||
<tbody> |
|
||||||
{dataTable.length<=0 ?
|
|
||||||
<tr> |
|
||||||
<td colSpan="7" align="center">No Data Available</td> |
|
||||||
</tr> : null} |
|
||||||
{dataTable.map((n, index) => { |
|
||||||
return ( |
|
||||||
<tr key={index}> |
|
||||||
<td> |
|
||||||
<Tooltip title="Delete"> |
|
||||||
<i id="TooltipDelete" className="fa fa-trash" style={{ color: 'red', marginRight: '10px', cursor: "pointer" }} onClick={() => handleDelete(n.user_id)}></i> |
|
||||||
</Tooltip> |
|
||||||
<Tooltip title="Edit"> |
|
||||||
<i id="TooltipEdit" className="fa fa-pencil" style={{ color: 'green', cursor: "pointer",marginRight: '10px' }} onClick={() => handleEdit(n)}></i> |
|
||||||
</Tooltip> |
|
||||||
<Tooltip title={`Proyek`}> |
|
||||||
<i onClick={() => handleWaspangProyek(n)} style={{color:"black", cursor: "pointer"}} className="cil-task"></i> |
|
||||||
</Tooltip> |
|
||||||
</td> |
|
||||||
<td>{n.join ? n.join.m_users_name : "-"}</td> |
|
||||||
<td>{n.join ? n.join.m_users_birth_place || "-" : "-"}</td> |
|
||||||
<td>{n.join.m_users_birth_date ? moment(n.join.m_users_birth_date).format("YYYY-MM-DD") : "-"}</td> |
|
||||||
<td>{n.join ? n.join.m_users_phone_number : "-"}</td> |
|
||||||
<td>{n.join ? n.join.m_users_email : "-"}</td> |
|
||||||
{/* <td>{n.join ? n.join.m_roles_name : "-"}</td> */} |
|
||||||
<td>{n.join ? n.role_id===3 ? renderRoleProyek(n.join.m_roles_name, n.user_id) : n.join.m_roles_name : "-"}</td> |
|
||||||
</tr> |
|
||||||
) |
|
||||||
})} |
|
||||||
</tbody> |
|
||||||
</Table> |
|
||||||
<Pagination |
|
||||||
showSizeChanger |
|
||||||
onShowSizeChange={onShowSizeChange} |
|
||||||
onChange={onPagination} |
|
||||||
defaultCurrent={currentPage} |
|
||||||
pageSize={rowsPerPage} |
|
||||||
total={totalPage} |
|
||||||
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]} |
|
||||||
/> |
|
||||||
</CardBody> |
|
||||||
</Card> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
export default IndexUser; |
|
||||||
Loading…
Reference in new issue