Browse Source

fix list style

pull/2/head
ardhi 2 years ago
parent
commit
518f52cfbe
  1. 34
      src/App.js
  2. BIN
      src/assets/img/profile.png
  3. 72
      src/const/en.json
  4. 28
      src/const/i18n.js
  5. 75
      src/const/id.json
  6. 52
      src/containers/DefaultLayout/DefaultLayout.js
  7. 7
      src/routes.js
  8. 7
      src/services/api/base.js
  9. 3
      src/utils/LangUtils.js
  10. 2
      src/views/Dashboard/DashboardBOD.js
  11. 104
      src/views/Master/MasterBroadcast/DialogDetail.js
  12. 277
      src/views/Master/MasterBroadcast/DialogForm.js
  13. 372
      src/views/Master/MasterBroadcast/index.js
  14. 19
      src/views/Master/MasterRoles/index.js
  15. 11
      src/views/Report/k3/index.js
  16. 235
      src/views/SimproV2/PanicButton/index.js
  17. 4
      src/views/SimproV2/ProjectType/index.js
  18. 72
      src/views/SimproV2/ResourceMaterial/DialogForm.js
  19. 101
      src/views/SimproV2/ResourceMaterial/index.js
  20. 39
      src/views/SimproV2/ResourceTools/DialogEditReqTools.js
  21. 32
      src/views/SimproV2/ResourceTools/DialogForm.js
  22. 76
      src/views/SimproV2/ResourceTools/index.js
  23. 30
      src/views/SimproV2/ResourceWorker/index.js
  24. 265
      src/views/SimproV2/Settings/DialogForm.js
  25. 257
      src/views/SimproV2/Settings/index.js

34
src/App.js

@ -5,7 +5,7 @@ import 'react-notifications/lib/notifications.css';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { persistor, store } from './appredux/store';
import { handleChangeLng } from "../src/utils/LangUtils";
const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;
const DefaultLayout = React.lazy(() => import('./containers/DefaultLayout'));
@ -22,22 +22,22 @@ class App extends Component {
render() {
return (
<Provider store={store}>
<HashRouter>
<React.Suspense fallback={loading()}>
<Switch>
<Route exact path="/login" name="Login Page" render={props => <Login {...props} />} />
{/* <Route exact path="/home" name="Home" render={props => <DefaultLayout {...props}/>} /> */}
<Route exact path="/register" name="Register Page" render={props => <Register {...props} />} />
<Route exact path="/404" name="Page 404" render={props => <Page404 {...props} />} />
<Route exact path="/403" name="Page 403" render={props => <Page403 {...props} />} />
<Route exact path="/500" name="Page 500" render={props => <Page500 {...props} />} />
<Route exact path="/map/view" name="Map" render={props => <SiopasMap {...props} />} />
{/*<Route exact path="/layerswitcher" name="Layer Switcher" render={props => <LayerSwitcherExample {...props}/>} />*/}
{/*<Route exact path="/muidt" name="Mui Datatable Example" render={props => <MuiDatatablesExample {...props}/>} />*/}
<Route path="/" name="Home" render={props => <DefaultLayout {...props} />} />
</Switch>
</React.Suspense>
</HashRouter>
<HashRouter>
<React.Suspense fallback={loading()}>
<Switch>
<Route exact path="/login" name="Login Page" render={props => <Login {...props} />} />
{/* <Route exact path="/home" name="Home" render={props => <DefaultLayout {...props}/>} /> */}
<Route exact path="/register" name="Register Page" render={props => <Register {...props} />} />
<Route exact path="/404" name="Page 404" render={props => <Page404 {...props} />} />
<Route exact path="/403" name="Page 403" render={props => <Page403 {...props} />} />
<Route exact path="/500" name="Page 500" render={props => <Page500 {...props} />} />
<Route exact path="/map/view" name="Map" render={props => <SiopasMap {...props} />} />
{/*<Route exact path="/layerswitcher" name="Layer Switcher" render={props => <LayerSwitcherExample {...props}/>} />*/}
{/*<Route exact path="/muidt" name="Mui Datatable Example" render={props => <MuiDatatablesExample {...props}/>} />*/}
<Route path="/" name="Home" render={props => <DefaultLayout {...props} />} />
</Switch>
</React.Suspense>
</HashRouter>
</Provider>
);
}

BIN
src/assets/img/profile.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

72
src/const/en.json

@ -3,26 +3,46 @@
"7days": "7 Days Ago",
"action": "Action",
"add": "Add",
"address": "Address",
"all": "All",
"assetType": "Asset Type",
"broadcastAdd": "Add Broadcast",
"broadcastDetail": "Detail Broadcast",
"broadcastDescription": "Description Broadcast",
"birthPlace": "Birth Place",
"birthDate": "Birth Date",
"ChecklistK3Add": "Add Checklist K3",
"cancel": "Cancel",
"close": "Close",
"color": "Color",
"date": "Date",
"dateSend": "Send Date",
"dateAbsent": "Absent Date",
"dateReport": "Report Date",
"dateRequired": "Required Date",
"dateFOM": "FOM Date",
"datePR": "PR Date",
"datePO": "PO Date",
"dateDelivery": "Delivery Date",
"dateReceived": "Received Date",
"dateDeliverySite": "Delivery to Site Date",
"dateReceivedWerehouse": "Received to Warehouse Date",
"delete": "Delete",
"deleteMsg": "Delete this data ?",
"deleteConfirm": "Are you sure ?",
"description": "Description",
"division": "Division",
"divisionAdd": "Add Division",
"employeeType": "Employee Type",
"edit": "Edit",
"export": "Export",
"exportExcel": "Export Excel",
"exportPdf": "Export Pdf",
"gearUse": "Gear Used",
"gearNotUse": "Gear Not used",
"gender": "Gender",
"hr": "Human Resource",
"hradd": "Add Human Resource",
"icon": "Icon",
"inputIcon": "Input Code Icon",
"inputName": "Input Name",
@ -31,31 +51,64 @@
"inputAliasMenu": "Input Menu Alias",
"inputOrder": "Input Order",
"inputUrl": "Input URL",
"inputMsg": "Input Message",
"inputTitle": "Input Title",
"inputUOM": "Input UOM",
"inputAsset": "Input Asset",
"inputQTY": "Input QTY",
"inputQtyReceived": "Input QTY Received",
"inputUnitPrice": "Input Unit Price",
"inputPrice": "Input Price",
"inputEmail": "Input Email",
"inputNoPhone": "Input Phone Number",
"inputNik": "Input NIK (KTP)",
"image": "Image",
"imageCheck": "Selfie Presence",
"locIn": "Location In",
"locOut": "Location Out",
"map": "Map",
"materialResource": "Materials Resource",
"materialRequest": "Materials Request",
"materialDelivery": "Materials Delivery to site",
"menuRoles": "Roles Menu",
"menuAdd": "Add Menu",
"nik": "ID Card",
"message": "Message",
"messageBroadcast": "Broadcast Message",
"messageNotification": "Notification Message",
"nik": "NIK (KTP/ID Card)",
"name": "Name",
"nameHR": "Name Human Resource",
"nameRole": "Name Role",
"nameDivision": "Name Division",
"nameProjectType": "Project Type",
"nameProjectRole": "Project Role",
"nameAsset": "Name Asset",
"noData": "Data not yet available",
"order": "Order",
"Own": "Owner",
"ownershipStatus": "Ownership Status",
"ownershipName": "Ownership Name",
"parentMenu": "Parent Menu",
"phase": "Project Phase",
"projectType": "Add Project Type",
"projectPhase": "Add Project Phase",
"presenceIn": "Presence In",
"presenceOut": "Presence Out",
"panicButton": "Panic Button",
"price": "Price",
"qty": "QTY",
"qtyReceived": "QTY Received",
"retryPassword": "Rety Password",
"required": "Required",
"rent": "Rent",
"rolesAdd": "Add Roles",
"roles": "Roles",
"receiver": "Receiver",
"resourceToolsAdd": "Add Tools Resource",
"restrictions": "Work area restrictions",
"search": "Search",
"save": "Save",
"saveSend": "Save & Send",
"searchType": "Search Project Type",
"searchPhase": "Search Project Phase",
"searchDivision": "Search Division",
@ -66,9 +119,26 @@
"searchProject": "All / Select Projects",
"searchMenu": "Search Menu",
"searchHR": "Search Human Resource",
"searchToolsRequest": "Search Tools Request",
"searchToolsDelivery": "Search Tools Delivery",
"searchTools": "Search Tools",
"searchMaterial": "Search Material",
"statusResponse": "Status Response",
"statusSend": "Status Send",
"selectOwnershipStatus": "Select Ownership Status",
"selectRole": "Select Role",
"selectDivision": "Select Division",
"selectGender": "Select Gender",
"today": "Today",
"title": "Title",
"titleNotification": "Notification Title",
"toolsRequest": "Tools Request",
"toolsResource": "Tools Resource",
"toolsDelivery": "Tools Delivery",
"user": "User",
"uom": "UOM",
"uomAdd": "Add UOM",
"unitPrice": "Unit Price",
"workDuration": "Work Duration",
"workAreaIn": "Work Area In",
"workAreaOut": "Work Area Out"

28
src/const/i18n.js

@ -2,23 +2,27 @@ import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import en from "./en.json";
import id from "./id.json";
const fallbackLng = "en";
i18n
.use(initReactI18next)
.init({
resources: {
en: { translation: en },
id: { translation: id },
},
fallbackLng,
debug: true,
fallbackLng: 'id',
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
},
resources: {
en: {
translation: en,
},
id: {
translation: id,
}
},
lng: localStorage.getItem("lng") || "id",
lng: localStorage.getItem("language") || fallbackLng,
});
export default i18n;
// Set up an event listener to update the language in localStorage whenever the language is changed
i18n.on("languageChanged", (lng) => {
localStorage.setItem("language", lng);
});
export default i18n;

75
src/const/id.json

@ -3,13 +3,30 @@
"7days": "7 Hari Yang lalu",
"action": "Aksi",
"add": "Tambah",
"address": "Alamat",
"all": "Semua",
"assetType": "Tipe Aset",
"broadcastAdd": "Tambah Pesan Siaran",
"broadcastDetail": "Detail Pesan Siaran",
"broadcastDescription": "Deskripsi Pesan Siaran",
"birthPlace": "Tempat Lahir",
"birthDate": "Tanggal Lahir",
"ChecklistK3Add": "Tambah Ceklis K3",
"cancel": "Batal",
"close": "Tutup",
"color": "Warna",
"date": "Tanggal",
"dateSend": "Tanggal Kirim",
"dateAbsent": "Tanggal Absen",
"dateReport": "Tanggal Lapor",
"dateRequired": "Tanggal Permintaan",
"dateFOM": "Tanggal FOM",
"datePR": "Tanggal PR",
"datePO": "Tanggal PO",
"dateDelivery": "Tanggal Pengiriman",
"dateReceived": "Tanggal Penerimaan",
"dateDeliverySite": "Tanggal Pengiriman ke Lokasi",
"dateReceivedWerehouse": "Tanggal Penerimaan ke Gudang",
"delete": "Hapus",
"deleteMsg": "Hapus Data Ini ?",
"deleteConfirm": "Apakah Anda Yakin ?",
@ -20,41 +37,80 @@
"export": "Ekspor",
"exportExcel": "Ekspor Excel",
"exportPdf": "Ekspor Pdf",
"employeeType": "Tipe Pegawai",
"gearUse": "Perlengkapan Dikenakan",
"gearNotUse": "Perlengkapan Tidak Dikenakan",
"gender": "Jenis Kelamin",
"hr": "Pegawai",
"hradd": "Tambah Pegawai",
"icon": "Ikon",
"inputIcon": "Masukan Kode Ikon",
"inputName": "Masukan Nama",
"inputaddress": "Masukan Alamat",
"inputBrithPlace": "Masukan Tempat Lahir",
"inputBrithDate": "Pilih Tanggal Lahir",
"inputDescription": "Masukan Deskripsi",
"inputParentMenu": "Pilih Induk Menu",
"inputAliasMenu": "Masukan Alias Menu",
"inputOrder": "Masukan Urutan",
"inputUrl": "Masukan URL",
"inputMsg": "Masukan Pesan",
"inputTitle": "Masukan Judul",
"inputUOM": "Masukan Satuan",
"inputAsset": "Masukan Aset",
"inputQTY": "Masukan Satuan",
"inputQtyReceived": "Masukan Kuantitas Yang Diterima",
"inputUnitPrice": "Masukan Harga Satuan",
"inputPrice": "Masukan Harga",
"inputEmail": "Masukan Email",
"inputNoPhone": "Masukan No Telp",
"inputNik": "Masukan NIK (KTP)",
"image": "Gambar",
"imageCheck": "Lihat Selfie Presensi",
"locIn": "Lokasi Masuk",
"locOut": "Lokasi Pulang",
"menuRoles": "Menu Peran",
"menuAdd": "Tambah Menu",
"nik": "NIK",
"map": "Peta",
"materialResource": "Manajemen Material",
"materialRequest": "Permintaan Material",
"materialDelivery": "Pengiriman Material Ke Lokasi",
"message": "Pesan",
"messageBroadcast": "Pesan Siaran",
"messageNotification": "Pesan Notifikasi",
"nik": "NIK (KTP/ID Card)",
"nameDivision": "Nama Divisi",
"name": "Nama",
"nameHR": "Nama Pegawai",
"nameRole": "Nama Peran",
"nameProjectType": "Tipe Proyek",
"nameProjectRole": "Peran Proyek",
"nameAsset": "Nama Aset",
"noData": "Data Belum tersedia",
"order": "Urutan",
"own": "Milik Sendiri",
"ownershipStatus": "Status Kepemilikan",
"ownershipName": "Nama Pemilik",
"parentMenu": "Menu Induk",
"phase": "Fase Proyek",
"projectType": "Tambah Tipe Proyek",
"projectPhase": "Tambah Fase Proyek",
"presenceIn": "Waktu Masuk",
"presenceOut": "Waktu Pulang",
"panicButton": "Tombol Panik",
"price": "Harga",
"qty": "Kuantitas",
"qtyReceived": "Kuantitas Diterima",
"retryPassword": "Konfirmasi Password",
"required": "Wajib Diisi",
"rent": "Sewa",
"rolesAdd": "Tambah Roles",
"roles": "Peran",
"receiver": "Penerima",
"resourceToolsAdd": "Tambah Data Alat",
"restrictions": "Pembatasan Area Kerja",
"save": "Simpan",
"saveSend": "Simpan & Kirim",
"search": "Cari",
"searchType": "Cari Tipe Proyek",
"searchPhase": "Cari Fase Proyek",
@ -66,9 +122,26 @@
"searchProject": "Semua / Pilih Proyek",
"searchMenu": "Cari Menu",
"searchHR": "Cari Nama Pegawai",
"searchToolsRequest": "Cari Permintaan Alat",
"searchToolsDelivery": "Cari Pengiriman Alat",
"searchTools": "Cari Alat",
"searchMaterial": "Cari Material",
"statusResponse": "Status Respon",
"statusSend": "Status Kirim",
"selectOwnershipStatus": "Pilih Status Kepemilikan",
"selectRole": "Pilih Peran",
"selectDivision": "Pilih Divisi",
"selectGender": "Pilih Jenis Kelamin",
"today": "Hari Ini",
"title": "Judul",
"titleNotification": "Judul Notifikasi",
"toolsRequest": "Permintaan Alat",
"toolsResource": "Manajemen Alat",
"toolsDelivery": "Pengiriman Alat",
"user": "Pengguna",
"uom": "Satuan",
"uomAdd": "Tambah Satuan",
"unitPrice": "Harga Satuan",
"workDuration": "Durasi Kerja",
"workAreaIn": "Area Kerja In",
"workAreaOut": "Area Kerja Out"

52
src/containers/DefaultLayout/DefaultLayout.js

@ -1,10 +1,10 @@
import React, { Component, Suspense, Divider } from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import * as router from 'react-router-dom';
import { Container } from 'reactstrap';
import { Badge, Container, UncontrolledDropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem } from 'reactstrap';
import axios from 'axios';
import { ALERTUSER_SEARCH, ALERT_SEARCH, MENU_SEARCH, ROLEMENU_SEARCH, ALERTUSER_STATUSVIEW, ALERT_STATUSVIEW, MENU_MANAGEMENT, CONTROL_MONITORING_SEARCH } from '../../const/ApiConst';
import user_logo from '../../assets/img/avatars/user.png'
import {
AppAside,
AppFooter,
@ -51,7 +51,7 @@ class DefaultLayout extends Component {
const menu = localStorage.getItem("menu_login")
if (menu) this.setMenu(JSON.parse(menu))
this.getAppBreadcrumb();
if(!localStorage.getItem("token")){
if (!localStorage.getItem("token")) {
this.signOut();
}
}
@ -92,14 +92,14 @@ class DefaultLayout extends Component {
loading = () => <div className="animated fadeIn pt-1 text-center">Loading...</div>
async signOut(e) {
if (e) {
e.preventDefault()
}
await localStorage.removeItem("role_id");
await window.localStorage.clear();
this.props.history.replace('/login')
async signOut(e) {
if (e) {
e.preventDefault()
}
await localStorage.removeItem("role_id");
await window.localStorage.clear();
this.props.history.replace('/login')
}
getDataMenu = async () => {
errorCount++;
@ -212,7 +212,7 @@ class DefaultLayout extends Component {
});
}
else {
if (!window.location.href.includes("dashboard")){
if (!window.location.href.includes("dashboard")) {
return <AppBreadcrumb appRoutes={this.state.finalRoutes} router={router} />
}
}
@ -238,16 +238,22 @@ class DefaultLayout extends Component {
{/* <DefaultHeader history={this.props.history} onLogout={e => this.signOut(e)} /> */}
{/* </Suspense> */}
{/* </div> */}
<hr/>
<hr />
<AppSidebarHeader />
<AppSidebarForm />
<Suspense>
{this.getMenu()}
</Suspense>
<AppSidebarFooter />
<a className="nav-link" onClick={e => this.signOut(e)}>
<i className="nav-icon fa fa-sign-out"></i> Logout
</a>
<UncontrolledDropdown direction="down">
<DropdownToggle nav>
<i className="nav-icon fa fa-user-circle"></i> {localStorage.getItem('user_name')}
</DropdownToggle>
<DropdownMenu right>
<DropdownItem href="#/settings"><i class="fa fa-cogs"></i> Settings</DropdownItem>
<DropdownItem onClick={e => this.signOut(e)}><i className="fa fa-sign-out"></i> Logout</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<AppSidebarMinimizer />
</AppSidebar>
<main className="main">
@ -267,7 +273,7 @@ class DefaultLayout extends Component {
)} />
) : (null);
})}
<Redirect from="/" to="/dashboard" />
<Redirect from="/" to="/dashboard" />
</Switch>
</Suspense>
</Container>
@ -279,13 +285,13 @@ class DefaultLayout extends Component {
</AppAside>
</div>
{!this.isKominfo ?
(
<AppFooter>
<Suspense fallback={this.loading()}>
<DefaultFooter />
</Suspense>
</AppFooter>
) : null
(
<AppFooter>
<Suspense fallback={this.loading()}>
<DefaultFooter />
</Suspense>
</AppFooter>
) : null
}
</div>
);

7
src/routes.js

@ -47,12 +47,12 @@ const DashboardBOD = React.lazy(() => import('./views/Dashboard/DashboardBOD'));
const DashboardCustomer = React.lazy(() => import('./views/Dashboard/DashboardCustomer'));
const DashboardProject = React.lazy(() => import('./views/Dashboard/DashboardProject'));
const MapMonitoring = React.lazy(() => import('./views/MapMonitoring'));
const Settings = React.lazy(() => import('./views/SimproV2/Settings'));
const routes = [
{ path: '/', exact: true, name: 'Home' },
// { path: '/dashboard', name: 'Dashboard', component: Dashboard},
{ path: '/dashboard', name: 'DashboardBOD', component: DashboardBOD},
{ path: '/dashboard-customer/:PROJECT_ID/:GANTT_ID', name: 'DashboardCustomer', component: DashboardCustomer},
{ path: '/dashboard', name: 'DashboardBOD', component: DashboardBOD },
{ path: '/dashboard-customer/:PROJECT_ID/:GANTT_ID', name: 'DashboardCustomer', component: DashboardCustomer },
{ path: '/dashboard-project/:PROJECT_ID/:GANTT_ID', exact: true, name: 'Dashboard Project', component: DashboardProject },
{ path: '/projects', exact: true, name: 'Projects', component: CreatedProyek },
{ path: '/projects/:id/:project/gantt', exact: true, name: 'Gantt', component: Gantt },
@ -102,6 +102,7 @@ const routes = [
{ path: '/working-hour', exact: true, name: 'Working Hour', component: Shift },
{ path: '/map-monitoring', exact: true, name: 'Map Monitoring', component: MapMonitoring },
// { path: '/dashboard-project/:ID/:GANTTID', exact: true, name: 'Dashboard Project', component: DashboardProject },
{ path: '/settings', exact: true, name: 'Settings', component: Settings },
];
export default routes;

7
src/services/api/base.js

@ -1,4 +1,5 @@
import axios from 'axios';
import { toast } from "react-toastify";
export default class RequestApi {
// static Request() {
// // axios.interceptors.request.use(function (config) {
@ -47,7 +48,8 @@ export default class RequestApi {
if (err.response) {
if (err.response.status === 307 || err.response.status === 403 || err.response.status === 401) {
// console.log(err.response);
alert('Token expired, please re-login');
// alert('Token expired, please re-login');
toast.error("Token expired, please re-login");
// clearAllState();
window.localStorage.clear();
window.location.reload();
@ -56,7 +58,8 @@ export default class RequestApi {
}
}
if (err && err.message && err.message.includes('401')) {
alert('Token expired, please re-login');
// alert('Token expired, please re-login');
toast.error("Token expired, please re-login");
// clearAllState();
window.localStorage.clear();
window.location.reload();

3
src/utils/LangUtils.js

@ -1,6 +1,7 @@
import i18n from "../const/i18n";
export const handleChangeLng = (lng) => {
console.log("Changing language to:", lng);
i18n.changeLanguage(lng);
localStorage.setItem("lng", lng);
};
};

2
src/views/Dashboard/DashboardBOD.js

@ -318,7 +318,7 @@ const DashboardBOD = () => {
tableData.push({
"id": item.id,
"last_gantt_id": item.lastGanttId?.last_gantt_id,
"kode_sortname": item.kode_sortname?.kode_sortname ? item.kode_sortname : "-",
"kode_sortname": item.kode_sortname ? item.kode_sortname : "-",
"project_name": item.nama,
"project_manager": item.pm?.name,
"planned_interval": `${item.mulai_proyek ? moment(item.mulai_proyek).format('DD/MM/YYYY') : '-'} - ${item.akhir_proyek ? moment(item.akhir_proyek).format('DD/MM/YYYY') : '-'}`,

104
src/views/Master/MasterBroadcast/DialogDetail.js

@ -6,19 +6,20 @@ import Select from 'react-select';
import axios from 'axios';
import { BASE_URL_GEOHR_API } from '../../../const/ApiConst';
import { Transfer } from 'antd';
import { withTranslation } from 'react-i18next';
const ERROR_TITLE = "judul is required!"
const ERROR_MESSAGE = "message is required!"
const BASE_URL = "https://oslog.id/geohr-api/";
let countError = 0;
export default class DialogDetail extends Component {
class DialogDetail extends Component {
constructor(props) {
super(props)
this.state = {
this.state = {
openDialog: false,
isParentClick: false,
dataListDetail:[],
id:0,
dataListDetail: [],
id: 0,
}
}
@ -31,8 +32,8 @@ export default class DialogDetail extends Component {
const { dataDetail } = this.props
console.log("cek data detail", dataDetail)
this.setState({
id:dataDetail.id
},() => {
id: dataDetail.id
}, () => {
this.getDataDetail();
this.setState({ isParentClick: false });
});
@ -41,38 +42,38 @@ export default class DialogDetail extends Component {
getDataDetail = async () => {
countError++;
let url = BASE_URL_GEOHR_API+`/broadcast-detail/search?broadcastId=${this.state.id}`;
let url = BASE_URL_GEOHR_API + `/broadcast-detail/search?broadcastId=${this.state.id}`;
const payload = {
"paging": {"start": 0, "length": 25},
"orders": {"columns": ["id"], "ascending": true},
"columns": [
{"name": "status_send", "logic_operator": "ilike", "value":"", "operator": "AND"}
],
"joins": [
{"name": "m_broadcast", "column_results": ["title_notif","message_notif","description","status_send"], "column_join":"broadcast_id"}
]
"paging": { "start": 0, "length": 25 },
"orders": { "columns": ["id"], "ascending": true },
"columns": [
{ "name": "status_send", "logic_operator": "ilike", "value": "", "operator": "AND" }
],
"joins": [
{ "name": "m_broadcast", "column_results": ["title_notif", "message_notif", "description", "status_send"], "column_join": "broadcast_id" }
]
}
const result = await axios
.post(url,payload)
.post(url, payload)
.then(res => res)
.catch((error) => error.response );
console.log('cek data detail', result.data)
.catch((error) => error.response);
console.log('cek data detail', result.data)
if(result && result.data && result.data.code === 200){
if (result.data.data && result.data.data.broadcast_details) {
this.setState({ dataListDetail:result.data.data.broadcast_details })
}
}else{
if(countError<6){
this.getDataDetail();
}
if (result && result.data && result.data.code === 200) {
if (result.data.data && result.data.data.broadcast_details) {
this.setState({ dataListDetail: result.data.data.broadcast_details })
}
} else {
if (countError < 6) {
this.getDataDetail();
}
}
}
showDialog = () => {
this.setState({ isParentClick: true });
}
handleCloseDialog = () => {
this.props.closeDialog()
}
@ -80,38 +81,39 @@ export default class DialogDetail extends Component {
render() {
return (
<Modal size="xl" isOpen={this.props.openDialog} toggle={this.props.toggleDialog}>
<ModalHeader toggle={this.handleCloseDialog}>Detail Broadcast</ModalHeader>
<ModalHeader toggle={this.handleCloseDialog}>{this.props.t('broadcastDetail')}</ModalHeader>
<ModalBody>
<Table>
<thead>
<Table>
<thead>
<tr>
<th>Status Send</th>
<th>Tanggal Kirim</th>
<th>Deskripsi</th>
<th>Judul Notifikasi</th>
<th>Pesan Notifikasi</th>
<th>{this.props.t('statusSend')}</th>
<th>{this.props.t('dateSend')}</th>
<th>{this.props.t('description')}</th>
<th>{this.props.t('titleNotification')}</th>
<th>{this.props.t('messageNotification')}</th>
</tr>
</thead>
<tbody>
{this.state.dataListDetail.map((val, index) => {
return(
<tr key={index}>
<td>{val.join.status_send==="" ? "-" :val.status_send}</td>
<td>{val.join.created_date==="" ? "-" : moment(val.created_date).format("YYYY-MM-DD HH:mm:ss")}</td>
<td>{val.join.broadcast_description==="" ? "-" : val.join.broadcast_description}</td>
<td>{val.join.broadcast_title_notif==="" ? "-" : val.join.broadcast_title_notif}</td>
<td>{val.join.broadcast_message_notif==="" ? "-" : val.join.broadcast_message_notif}</td>
</tr>
</thead>
<tbody>
{this.state.dataListDetail.map((val, index) => {
return (
<tr key={index}>
<td>{val.join.status_send === "" ? "-" : val.status_send}</td>
<td>{val.join.created_date === "" ? "-" : moment(val.created_date).format("YYYY-MM-DD HH:mm:ss")}</td>
<td>{val.join.broadcast_description === "" ? "-" : val.join.broadcast_description}</td>
<td>{val.join.broadcast_title_notif === "" ? "-" : val.join.broadcast_title_notif}</td>
<td>{val.join.broadcast_message_notif === "" ? "-" : val.join.broadcast_message_notif}</td>
</tr>
)
})}
</tbody>
</Table>
})}
</tbody>
</Table>
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={this.handleCloseDialog}>Close</Button>
<Button color="secondary" onClick={this.handleCloseDialog}>{this.props.t('close')}</Button>
</ModalFooter>
</Modal>
)
}
}
export default withTranslation()(DialogDetail);

277
src/views/Master/MasterBroadcast/DialogForm.js

@ -5,15 +5,16 @@ import Select from 'react-select';
import axios from 'axios';
import { BASE_URL_GEOHR_API2, ROLE_SEARCH, USER_WASPANG } from '../../../const/ApiConst';
import { Transfer } from 'antd';
import { withTranslation } from 'react-i18next';
const token = window.localStorage.getItem('token');
const config = {
headers:
{
Authorization : `Bearer ${token}`,
"Content-type" : `application/json`
headers:
{
Authorization: `Bearer ${token}`,
"Content-type": `application/json`
}
};
@ -23,7 +24,7 @@ const ERROR_MESSAGE = "message is required!"
const BASE_URL = "https://oslog.id/geohr-api/";
const roleName = window.localStorage.getItem('role_name');
let countError = 0;
export default class DialogForm extends Component {
class DialogForm extends Component {
constructor(props) {
super(props)
this.state = {
@ -37,7 +38,7 @@ export default class DialogForm extends Component {
errorMessage: "",
errorDivision: "",
errorEmployee: "",
penerima:"all",
penerima: "all",
displayKaryawan: "none",
displayDivisi: "none",
listOrganizationSelect: [],
@ -45,12 +46,12 @@ export default class DialogForm extends Component {
dataEmployee: [],
dataSourceEmployee: [],
idOrganization: 0,
targetKeys:[],
targetKeys: [],
selectedKeys: [],
allEmployeeId:[],
allEmployeeId: [],
idEmployeeDivision: [],
idOrganization:[],
disableTransfer:true
idOrganization: [],
disableTransfer: true
}
}
@ -86,7 +87,7 @@ export default class DialogForm extends Component {
showDialog = () => {
this.setState({ isParentClick: true });
}
validate = () => {
@ -109,12 +110,12 @@ export default class DialogForm extends Component {
this.setState({ errorMessage: "message minimum 3-200 karakter!" })
}
if(penerima=== "division"){
if(this.state.idOrganization===0){
if (penerima === "division") {
if (this.state.idOrganization === 0) {
this.setState({ errorDivision: "Silahkan pilih divisi penerima!" })
}
}else if(penerima==="karyawan"){
if(this.state.selectedKeys.length===0){
} else if (penerima === "karyawan") {
if (this.state.selectedKeys.length === 0) {
this.setState({ errorEmployee: "Silahkan pilih karyawan penerima!" })
}
}
@ -133,18 +134,18 @@ export default class DialogForm extends Component {
let idSend = [];
let send_to_type = "all";
if(penerima==="all"){
if (penerima === "all") {
idSend = this.state.allEmployeeId;
send_to_type = "all";
}else if(penerima==="division"){
} else if (penerima === "division") {
idSend = this.state.idOrganization;
send_to_type = "roles";
}else if(penerima==="karyawan"){
} else if (penerima === "karyawan") {
idSend = this.state.targetKeys;
send_to_type = "users";
}
idSend = idSend.map(function(e){
idSend = idSend.map(function (e) {
return e.toString()
});
@ -153,13 +154,13 @@ export default class DialogForm extends Component {
description,
message,
send_to_type,
id:idSend
id: idSend
}
if (param === 'registered' || param === 'send') {
this.props.handleSaveBroadcast(param, data)
}
this.setState({ id: 0,idOrganization:0,currentSelectDiv:null,targetKeys:[],penerima:"all",displayKaryawan:"none",displayDivisi:"none",disableTransfer:true });
this.setState({ id: 0, idOrganization: 0, currentSelectDiv: null, targetKeys: [], penerima: "all", displayKaryawan: "none", displayDivisi: "none", disableTransfer: true });
}
}
@ -168,18 +169,18 @@ export default class DialogForm extends Component {
}
handleChangePenerima = type => {
if(type==="organization"){
this.setState({ displayDivisi:"block",displayKaryawan:"none",disableTransfer:true,errorDivision:"",targetKeys:[] })
}else if(type==="karyawan"){
this.setState({ displayKaryawan:"block",displayDivisi:"none",disableTransfer:false,errorEmployee:"",idEmployeeDivision:[],currentSelectDiv:null })
}else{
this.setState({ displayKaryawan:"none",displayDivisi:"none",disableTransfer:true,errorDivision:"",errorEmployee:"",targetKeys:[],idEmployeeDivision:[],currentSelectDiv:null })
if (type === "organization") {
this.setState({ displayDivisi: "block", displayKaryawan: "none", disableTransfer: true, errorDivision: "", targetKeys: [] })
} else if (type === "karyawan") {
this.setState({ displayKaryawan: "block", displayDivisi: "none", disableTransfer: false, errorEmployee: "", idEmployeeDivision: [], currentSelectDiv: null })
} else {
this.setState({ displayKaryawan: "none", displayDivisi: "none", disableTransfer: true, errorDivision: "", errorEmployee: "", targetKeys: [], idEmployeeDivision: [], currentSelectDiv: null })
}
this.setState({ penerima:type });
this.setState({ penerima: type });
}
handleSelectOrganization = (inputValue, actionMeta) => {
this.setState({ idOrganization:inputValue.value,currentSelectDiv:{ value:inputValue.value,label:inputValue.label },errorDivision:"" }, () => {
this.setState({ idOrganization: inputValue.value, currentSelectDiv: { value: inputValue.value, label: inputValue.label }, errorDivision: "" }, () => {
this.setEmployeeOrganization();
});
}
@ -188,17 +189,17 @@ export default class DialogForm extends Component {
let arrEd = this.state.dataEmployee;
let cek = arrEd.filter(this.filterId)
this.setState({ idEmployeeDivision:cek })
this.setState({ idEmployeeDivision: cek })
}
filterId= (val) => {
filterId = (val) => {
return val.organization_id == this.state.idOrganization
}
getDataRole = async () => {
const payload = {
"orders": {"columns": ["id"], "ascending": false}
"orders": { "columns": ["id"], "ascending": false }
}
const result = await axios
@ -207,106 +208,106 @@ export default class DialogForm extends Component {
.catch((error) => error.response);
console.log('test role', result)
if(result && result.data && result.data.code === 200){
this.setState({ dataDivision:result.data.data },()=>{
this.setDataOrganization();
})
}else{
}
if (result && result.data && result.data.code === 200) {
this.setState({ dataDivision: result.data.data }, () => {
this.setDataOrganization();
})
} else {
}
}
setDataOrganization = () => {
const { dataDivision } = this.state
const listOrganization = []
dataDivision.map((val, index)=> {
dataDivision.map((val, index) => {
listOrganization.push({
value:val.id,
label:val.name
value: val.id,
label: val.name
})
})
this.setState({ listOrganizationSelect:listOrganization })
this.setState({ listOrganizationSelect: listOrganization })
}
getDataUsers = async () => {
const payload = {
"paging":{
"start":0,
"length":10
"paging": {
"start": 0,
"length": 10
},
"filter_columns":[
{
"name":"name",
"value":"",
"table_name":"m_users"
}
"filter_columns": [
{
"name": "name",
"value": "",
"table_name": "m_users"
}
],
"columns":[
{
"name":"name",
"logic_operator":"like",
"value":"",
"operator":"AND",
"table_name":"m_users"
},
{
"name":"id",
"logic_operator":"=",
"value":"3",
"operator":"AND",
"table_name":"m_roles"
}
"columns": [
{
"name": "name",
"logic_operator": "like",
"value": "",
"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"
]
}
"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
"orders": {
"columns": [
"id"
],
"ascending": false
}
}
}
const result = await axios
const result = await axios
.post(USER_WASPANG, payload, config)
.then(res => res)
.catch((error) => error.response);
console.log('test role', result)
if (result && result.data && result.code == "200") {
this.setState({ dataEmployee: result.data }, ()=> {
this.setDataEmployee();
});
} else {
}
if (result && result.data && result.code == "200") {
this.setState({ dataEmployee: result.data }, () => {
this.setDataEmployee();
});
} else {
}
}
setDataEmployee = () => {
const listEmployee = [];
const allIdEmployee = [];
this.state.dataEmployee.map((val, index)=> {
this.state.dataEmployee.map((val, index) => {
allIdEmployee.push(val.id);
listEmployee.push({
key: val.id,
@ -315,55 +316,56 @@ export default class DialogForm extends Component {
});
})
this.setState({ dataSourceEmployee: listEmployee, allEmployeeId:allIdEmployee })
this.setState({ dataSourceEmployee: listEmployee, allEmployeeId: allIdEmployee })
}
handleChangeTransfer = (nextTargetKeys, direction, moveKeys) => {
this.setState({ targetKeys: nextTargetKeys,errorEmployee:"" });
this.setState({ targetKeys: nextTargetKeys, errorEmployee: "" });
};
handleSelectChangeTransfer = (sourceSelectedKeys, targetSelectedKeys) => {
this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys],errorEmployee:"" });
this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys], errorEmployee: "" });
};
renderForm = () => {
const t = this.props
const { errorTitle, errorMessage } = this.state
return (
<Form>
<FormGroup>
<Label>Penerima</Label>
<Input type="select" value={this.state.penerima} onChange={(e) => this.handleChangePenerima(e.target.value )}>
<option value="all">All</option>
<option value="organization">Roles</option>
<option value="karyawan">Users</option>
<Label>{this.props.t('receiver')}</Label>
<Input type="select" value={this.state.penerima} onChange={(e) => this.handleChangePenerima(e.target.value)}>
<option value="all">{this.props.t('all')}</option>
<option value="organization">{this.props.t('roles')}</option>
<option value="karyawan">{this.props.t('user')}</option>
</Input>
</FormGroup>
<FormGroup style={{display:this.state.displayDivisi}}>
<Label>Roles</Label>
<FormGroup style={{ display: this.state.displayDivisi }}>
<Label>{this.props.t('roles')}</Label>
<Select options={this.state.listOrganizationSelect} onChange={this.handleSelectOrganization} value={this.state.currentSelectDiv} />
{this.state.errorDivision && <FormFeedback>{this.state.errorDivision}</FormFeedback>}
</FormGroup>
<FormGroup style={{display:this.state.displayKaryawan}}>
<Label>Users</Label>
{ !this.state.disableTransfer &&
<FormGroup style={{ display: this.state.displayKaryawan }}>
<Label>{this.props.t('user')}</Label>
{!this.state.disableTransfer &&
<Transfer
dataSource={this.state.dataSourceEmployee}
showSearch
titles={['', 'Terpilih']}
targetKeys={this.state.targetKeys}
selectedKeys={this.state.selectedKeys}
onChange={this.handleChangeTransfer}
onSelectChange={this.handleSelectChangeTransfer}
render={item => item.title}
disabled={this.state.disableTransfer}
/>
dataSource={this.state.dataSourceEmployee}
showSearch
titles={['', 'Terpilih']}
targetKeys={this.state.targetKeys}
selectedKeys={this.state.selectedKeys}
onChange={this.handleChangeTransfer}
onSelectChange={this.handleSelectChangeTransfer}
render={item => item.title}
disabled={this.state.disableTransfer}
/>
}
{this.state.errorEmployee && <FormFeedback>{this.state.errorEmployee}</FormFeedback>}
</FormGroup>
<FormGroup>
<Label>Judul</Label>
<Label>{this.props.t('title')}</Label>
<Input invalid={errorTitle} type="text" value={this.state.title}
onChange={(e) =>
this.setState(
@ -371,26 +373,26 @@ export default class DialogForm extends Component {
errorTitle: e.target.value !== "" ? "" : ERROR_TITLE,
title: e.target.value
})}
placeholder="judul.." />
placeholder={this.props.t('inputTitle')} />
{errorTitle && (
<FormFeedback>{errorTitle}</FormFeedback>
)}
</FormGroup>
<FormGroup>
<Label>Pesan Broadcast</Label>
<Label>{this.props.t('messageBroadcast')}</Label>
<Input
invalid={errorMessage}
style={{ minHeight: "100px" }}
type="textarea"
value={this.state.message}
onChange={(e) => this.setState({ errorMessage: e.target.value !== "" ? "" : ERROR_MESSAGE, message: e.target.value })} placeholder="pesan.." />
onChange={(e) => this.setState({ errorMessage: e.target.value !== "" ? "" : ERROR_MESSAGE, message: e.target.value })} placeholder={this.props.t('inputMsg')} />
{errorMessage && (
<FormFeedback>{errorMessage}</FormFeedback>
)}
</FormGroup>
<FormGroup>
<Label>Deskripsi Broadcast</Label>
<Input style={{ minHeight: "100px" }} type="textarea" value={this.state.description} onChange={(e) => this.setState({ description: e.target.value })} placeholder="deskripsi.." />
<Label>{this.props.t('broadcastDescription')}</Label>
<Input style={{ minHeight: "100px" }} type="textarea" value={this.state.description} onChange={(e) => this.setState({ description: e.target.value })} placeholder={this.props.t('inputDescription')} />
</FormGroup>
</Form>
)
@ -408,16 +410,17 @@ export default class DialogForm extends Component {
render() {
return (
<Modal isOpen={this.props.openDialog} toggle={this.props.toggleDialog}>
<ModalHeader toggle={this.handleCloseDialog}>Broadcast</ModalHeader>
<ModalHeader toggle={this.handleCloseDialog}>{this.props.t('broadcastDetail')}</ModalHeader>
<ModalBody>
{this.renderForm()}
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={() => this.handleSave("send")}>{`Simpan & Kirim`}</Button>{' '}
<Button color="primary" onClick={() => this.handleSave("registered")}>Simpan</Button>{' '}
<Button color="secondary" onClick={this.handleCloseDialog}>Cancel</Button>
<Button color="primary" onClick={() => this.handleSave("send")}>{this.props.t('saveSend')}</Button>{' '}
<Button color="primary" onClick={() => this.handleSave("registered")}>{this.props.t('save')}</Button>{' '}
<Button color="secondary" onClick={this.handleCloseDialog}>{this.props.t('cancel')}</Button>
</ModalFooter>
</Modal>
)
}
}
export default withTranslation()(DialogForm);

372
src/views/Master/MasterBroadcast/index.js

@ -10,32 +10,25 @@ import { Button, Card, CardBody, CardHeader, DropdownItem, DropdownMenu, Dropdow
import { DatePicker, Pagination } from 'antd';
import { NotificationContainer, NotificationManager } from 'react-notifications';
import { Tooltip } from 'reactstrap';
import { withTranslation } from 'react-i18next';
const { RangePicker } = DatePicker;
const token = window.localStorage.getItem('token');
const config = {
headers:
{
Authorization : `Bearer ${token}`,
"Content-type" : `application/json`
Authorization: `Bearer ${token}`,
"Content-type": `application/json`
}
};
const id_org = window.localStorage.getItem('id_org');
const roleName = window.localStorage.getItem('role_name');
const column = [
{ name: "Aksi" },
{ name: "Judul" },
{ name: "Pesan" },
{ name: "Deskripsi" },
{ name: "Status" },
{ name: "Tanggal" },
]
const LENGTH_DATA = 10
export default class index extends Component {
class index extends Component {
constructor(props) {
super(props)
this.state = {
@ -43,10 +36,10 @@ export default class index extends Component {
alertDelete: false,
currentDay: 'today',
currentPage: 1,
dataDetail:[],
dataDetail: [],
dataEdit: null,
dataExport: [],
dataExport:[],
dataExport: [],
dataGs: [],
dataIdHo: [],
dataTable: [],
@ -63,13 +56,13 @@ export default class index extends Component {
splitButtonOpen: false,
startDate: moment(moment().format("YYYY-M-D")),
statusSend: '',
toltipDetail:false,
toltipDetail: false,
tooltipDelete: false,
tooltipEdit: false,
tooltipExport:false,
tooltipTambah:false,
tooltipresend:false,
tooltipsend:false,
tooltipExport: false,
tooltipTambah: false,
tooltipresend: false,
tooltipsend: false,
totalPage: 0,
typeClock: "All",
typeDialog: 'Save',
@ -129,19 +122,19 @@ export default class index extends Component {
"length": this.state.rowsPerPage,
"start": start
}
}
}
if(this.state.search!=="" && this.state.search!==null){
if (this.state.search !== "" && this.state.search !== null) {
}
const result = await axios
.post(url, payload, config)
.then(res => res)
.catch((error) => error.response);
.post(url, payload, config)
.then(res => res)
.catch((error) => error.response);
if (result && result.data) {
if(result.data.code===200){
if (result.data.code === 200) {
this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord });
}else{
} else {
NotificationManager.error('Failed retreiving data!!', 'Failed');
}
} else {
@ -195,15 +188,15 @@ export default class index extends Component {
"send_to_type": "all",
"message_notif": data.message,
"description": data.description,
}
}
const paramRoles = {
"title_notif": data.title,
"status_send": type,
"send_to_type": "roles",
"message_notif": data.message,
"description": data.description,
"send_to_id": data.id
"title_notif": data.title,
"status_send": type,
"send_to_type": "roles",
"message_notif": data.message,
"description": data.description,
"send_to_id": data.id
}
const paramUsers = {
@ -213,63 +206,63 @@ export default class index extends Component {
"message_notif": data.message,
"description": data.description,
"send_to_id": data.id.map((id, index) => id)
}
if(data.send_to_type === "all") {
const result = await axios.post(url, param, config)
.then(res => res)
.catch((error) => error.response);
if (result) {
if(result.data){
if(result.data.code===200){
this.getDataBroadcast();
NotificationManager.success('Broadcast berhasil terkirimkan', 'Success!!');
}else{
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
}else{
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
}else{
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
} else if(data.send_to_type === "roles") {
const result = await axios.post(url, paramRoles, config)
.then(res => res)
.catch((error) => error.response);
if (result) {
if(result.data){
if(result.data.code===200){
this.getDataBroadcast();
NotificationManager.success('Broadcast berhasil terkirimkan', 'Success!!');
}else{
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
}else{
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
}else{
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
} else if(data.send_to_type === "users") {
const result = await axios.post(url, paramUsers, config)
.then(res => res)
.catch((error) => error.response);
if (result) {
if(result.data){
if(result.data.code === 200){
this.getDataBroadcast();
NotificationManager.success('Broadcast berhasil terkirimkan', 'Success!!');
}else{
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
}else{
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
}else{
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
}
}
if (data.send_to_type === "all") {
const result = await axios.post(url, param, config)
.then(res => res)
.catch((error) => error.response);
if (result) {
if (result.data) {
if (result.data.code === 200) {
this.getDataBroadcast();
NotificationManager.success('Broadcast berhasil terkirimkan', 'Success!!');
} else {
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
} else {
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
} else {
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
} else if (data.send_to_type === "roles") {
const result = await axios.post(url, paramRoles, config)
.then(res => res)
.catch((error) => error.response);
if (result) {
if (result.data) {
if (result.data.code === 200) {
this.getDataBroadcast();
NotificationManager.success('Broadcast berhasil terkirimkan', 'Success!!');
} else {
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
} else {
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
} else {
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
} else if (data.send_to_type === "users") {
const result = await axios.post(url, paramUsers, config)
.then(res => res)
.catch((error) => error.response);
if (result) {
if (result.data) {
if (result.data.code === 200) {
this.getDataBroadcast();
NotificationManager.success('Broadcast berhasil terkirimkan', 'Success!!');
} else {
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
} else {
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
} else {
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
}
}
@ -300,7 +293,7 @@ export default class index extends Component {
this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete }))
} else if (param === "tambah") {
this.setState(prevState => ({ tooltipTambah: !prevState.tooltipTambah }))
} else if (param === "export") {
} else if (param === "export") {
this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport }))
}
}
@ -330,25 +323,25 @@ export default class index extends Component {
let dateEnd = this.state.endDate;
const formData = new FormData();
formData.append("startDate", dateStart.format("YYYY-M-D")+" 00:00:00");
formData.append("endDate", dateEnd.format("YYYY-M-D")+" 23:59:59");
formData.append("startDate", dateStart.format("YYYY-M-D") + " 00:00:00");
formData.append("endDate", dateEnd.format("YYYY-M-D") + " 23:59:59");
formData.append('field', this.state.searchDetailField);
formData.append("start", start);
formData.append("length", "all");
if(this.state.search!=="" && this.state.search!==null){
if (this.state.search !== "" && this.state.search !== null) {
formData.append('value', this.state.search);
}
const result = await axios
.post(url, formData)
.then(res => res)
.catch((error) => error.response);
.post(url, formData)
.then(res => res)
.catch((error) => error.response);
if (result && result.data) {
if(result.data.code_status===200){
if (result.data.code_status === 200) {
this.setState({ dataExport: result.data.data }, () => {
this.exportExcel();
});
}else{
} else {
}
} else {
}
@ -378,19 +371,19 @@ export default class index extends Component {
handleDetail = (data) => {
console.log("ceh handle detail", data)
this.setState({ dataDetail:data },()=> {
this.setState({ dataDetail: data }, () => {
this.showDetailDialog();
this.setState({ openDialogDetail:true });
this.setState({ openDialogDetail: true });
});
}
toggleTooltip = (type) => {
if(type==="detail"){
this.setState({ toltipDetail:!this.state.toltipDetail })
}else if(type==="resend"){
this.setState({ tooltipresend:!this.state.tooltipresend })
}else if(type==="send"){
this.setState({ tooltipsend:!this.state.tooltipsend })
if (type === "detail") {
this.setState({ toltipDetail: !this.state.toltipDetail })
} else if (type === "resend") {
this.setState({ tooltipresend: !this.state.tooltipresend })
} else if (type === "send") {
this.setState({ tooltipsend: !this.state.tooltipsend })
}
}
@ -417,6 +410,15 @@ export default class index extends Component {
}
renderTable = () => {
const column = [
{ name: this.props.t('action') },
{ name: this.props.t('title') },
{ name: this.props.t('message') },
{ name: this.props.t('description') },
{ name: "Status" },
{ name: this.props.t('date') },
]
const t = this.props
const dataTable2 = this.state.dataTable || [];
return (
<tbody>
@ -425,10 +427,10 @@ export default class index extends Component {
<tr key={n.id}>
<td width={93}>
<Row>
{n.status_send === 'completed' || n.status_send === 'failed' || n.status_send === 'send' ?
this.renderBtnResend(n.id) :
this.renderBtnSend(n.id)
}
{n.status_send === 'completed' || n.status_send === 'failed' || n.status_send === 'send' ?
this.renderBtnResend(n.id) :
this.renderBtnSend(n.id)
}
<Col>
<i id="TooltipDetail" className="fa fa-eye fa-lg" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleDetail(n)}></i>
<Tooltip placement="right" isOpen={this.state.toltipDetail} target="TooltipDetail" toggle={() => this.toggleTooltip("detail")}>
@ -446,7 +448,7 @@ export default class index extends Component {
</tr>
)
}) : <tr>
<td colSpan={column.length} align="center">Data Tidak Tersedia</td>
<td colSpan={column.length} align="center">{this.props.t('noData')}</td>
</tr>
}
</tbody>
@ -458,46 +460,55 @@ export default class index extends Component {
}
handleCloseDetail = () => {
this.setState({ openDialogDetail:false })
this.setState({ openDialogDetail: false })
}
toggleDialogDetail = () => {
this.setState({ openDialogDetail:!this.state.openDialogDetail })
this.setState({ openDialogDetail: !this.state.openDialogDetail })
}
handleChangeDay = (e) => {
const val = e.target.value;
this.setState({ currentDay:val });
if(val==="today"){
this.setState({ currentDay: val });
if (val === "today") {
this.setState({
startDate:moment(moment().format("YYYY-M-D")),
endDate:moment(moment().format("YYYY-M-D")),
startDate: moment(moment().format("YYYY-M-D")),
endDate: moment(moment().format("YYYY-M-D")),
currentPage: 1
})
}else if(val==="3 day"){
} else if (val === "3 day") {
this.setState({
startDate:moment(moment().subtract(3, "days").format("YYYY-M-D")),
endDate:moment(moment().format("YYYY-M-D")),
startDate: moment(moment().subtract(3, "days").format("YYYY-M-D")),
endDate: moment(moment().format("YYYY-M-D")),
currentPage: 1
})
}else if(val==="7 day"){
} else if (val === "7 day") {
this.setState({
startDate:moment(moment().subtract(7, "days").format("YYYY-M-D")),
endDate:moment(moment().format("YYYY-M-D")),
startDate: moment(moment().subtract(7, "days").format("YYYY-M-D")),
endDate: moment(moment().format("YYYY-M-D")),
currentPage: 1
})
}else{
console.log("test 2 test",val);
} else {
console.log("test 2 test", val);
this.setState({
startDate:moment(moment().format("YYYY-M-D")),
endDate:moment(moment().format("YYYY-M-D")),
startDate: moment(moment().format("YYYY-M-D")),
endDate: moment(moment().format("YYYY-M-D")),
currentPage: 1
})
}
}
render() {
const { tooltipTambah, tooltipExport,dataTable, splitButtonOpen, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipEdit, tooltipDelete, statusSend } = this.state
const column = [
{ name: this.props.t('action') },
{ name: this.props.t('title') },
{ name: this.props.t('message') },
{ name: this.props.t('description') },
{ name: "Status" },
{ name: this.props.t('date') },
]
const t = this.props;
const { tooltipTambah, tooltipExport, dataTable, splitButtonOpen, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipEdit, tooltipDelete, statusSend } = this.state
return (
<div>
<NotificationContainer />
@ -507,7 +518,7 @@ export default class index extends Component {
showCancel
confirmBtnText="Yes!"
confirmBtnBsStyle="danger"
title="Are your sure?"
title={this.props.t('deleteConfirm')}
onConfirm={this.onConfirmBroadcast}
onCancel={() => this.setState({ alertBroadcast: false })}
focusCancelBtn
@ -537,63 +548,63 @@ export default class index extends Component {
<Row>
<Col >
<Button id="TooltipTambah" color="success" onClick={() => this.handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
<Button style={{marginLeft:"5px"}} 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 Broadcast
</Tooltip>
<Tooltip placement="right" isOpen={tooltipExport} target="TooltipExport" toggle={() => this.toggle("export")}>
Export Excel
</Tooltip>
<Button style={{ marginLeft: "5px" }} 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")}>
{this.props.t('broadcastAdd')}
</Tooltip>
<Tooltip placement="right" isOpen={tooltipExport} target="TooltipExport" toggle={() => this.toggle("export")}>
{this.props.t('exprotExcel')}
</Tooltip>
</Col>
</Row>
</CardHeader>
<CardBody>
<div style={{ display: "flex", justifyContent: "space-between", marginBottom:"25px" }}>
<div style={{ width:"100%",display:"inline-flex",alignItems:"center" }}>
<div style={{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={{ }}>
<RangePicker size="default" allowClear={false} value={[this.state.startDate, this.state.endDate]} onChange={this.handleDatePicker}/>{' '}
<Button color="primary" onClick={() => this.getDataPanicButton()}>Cari</Button>
</div>
<div style={{ display: "flex", justifyContent: "space-between", marginBottom: "25px" }}>
<div style={{ width: "100%", display: "inline-flex", alignItems: "center" }}>
<div style={{ marginRight: "10px", maxWidth: "200px" }}>
<Input type="select" onChange={(e) => this.handleChangeDay(e)} defaultValue={this.state.currentDay}>
<option value="today">{this.props.t('today')}</option>
<option value="3 day">{this.props.t('3days')}</option>
<option value="7 day">{this.props.t('7days')}</option>
</Input>
</div>
<div style={{}}>
<RangePicker size="default" allowClear={false} value={[this.state.startDate, this.state.endDate]} onChange={this.handleDatePicker} />{' '}
<Button color="primary" onClick={() => this.getDataPanicButton()}>{this.props.t('search')}</Button>
</div>
<InputGroup style={{maxWidth:"200px"}}>
<Input onChange={this.handleSearch} value={search} type="text" name="search" id="search" placeholder={`Cari ${this.state.searchDetail}`} />
<InputGroupButtonDropdown addonType="prepend"
isOpen={splitButtonOpen}
toggle={this.toggleDropDown}
>
<DropdownToggle split outline />
<DropdownMenu>
<DropdownItem onClick={
() => this.setState({
searchDetail: "Judul",
searchDetailField: "title_notif"
})}>Judul</DropdownItem>
<DropdownItem onClick={
() => this.setState({
searchDetail: "Deskripsi",
searchDetailField: "description"
})}>Deskripsi</DropdownItem>
<DropdownItem onClick={
() => this.setState({
searchDetail: "Pesan",
searchDetailField: "message_notif"
})}>Pesan</DropdownItem>
<DropdownItem onClick={
() => this.setState({
searchDetail: "Status",
searchDetailField: "status_send"
})}>Status</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
</InputGroup>
</div>
<InputGroup style={{ maxWidth: "200px" }}>
<Input onChange={this.handleSearch} value={search} type="text" name="search" id="search" placeholder={`${this.props.t('search')} ${this.state.searchDetail}`} />
<InputGroupButtonDropdown addonType="prepend"
isOpen={splitButtonOpen}
toggle={this.toggleDropDown}
>
<DropdownToggle split outline />
<DropdownMenu>
<DropdownItem onClick={
() => this.setState({
searchDetail: this.props.t('title'),
searchDetailField: "title_notif"
})}>Judul</DropdownItem>
<DropdownItem onClick={
() => this.setState({
searchDetail: this.props.t('description'),
searchDetailField: "description"
})}>Deskripsi</DropdownItem>
<DropdownItem onClick={
() => this.setState({
searchDetail: this.props.t('message'),
searchDetailField: "message_notif"
})}>Pesan</DropdownItem>
<DropdownItem onClick={
() => this.setState({
searchDetail: "Status",
searchDetailField: "status_send"
})}>Status</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
</InputGroup>
</div>
<Table responsive striped hover>
<thead>
<tr>
@ -621,3 +632,4 @@ export default class index extends Component {
)
}
}
export default withTranslation()(index);

19
src/views/Master/MasterRoles/index.js

@ -89,6 +89,9 @@ class index extends Component {
async componentDidUpdate(prevProps, prevState) {
const { search } = this.state
if (search !== prevState.search) this.getDataRoles()
if (prevProps.dataExport !== this.props.dataExport && this.props.dataExport.length > 0) {
this.handleExportExcel();
}
}
handleSearch = e => {
@ -324,16 +327,20 @@ class index extends Component {
handleExportExcel = async () => {
let start = 0;
let end = "ALL";
let url = BASE_URL + "roles.php?act=get_data";
const formData = new FormData();
formData.append('field', 'name');
if (this.state.search !== "") {
formData.append('value', this.state.search);
const formData = {
"paging": { "start": start, "length": this.state.rowsPerPage },
"columns": [
{ "name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND" }
],
"joins": [],
"orders": { "columns": ["id"], "ascending": false }
}
const result = await axios
.post(url, formData)
.post(ROLE_SEARCH, formData, config)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.statusText == "OK") {
const dataRes = result.data.data || [];
const dataExport = [];

11
src/views/Report/k3/index.js

@ -129,13 +129,6 @@ class index extends Component {
}
}
getDataLaporanK3 = async () => {
let start = 0;
@ -450,11 +443,11 @@ class index extends Component {
<td>{n.k3_checked.length ? n.k3_checked.join() : "-"}</td>
<td>{n.k3_not_checked.length ? n.k3_not_checked.join() : "-"}</td>
<td>{n.description ? n.description : "-"}</td>
<td> {n.image ? <Tooltip title="Lihat Foto"><i onClick={() => this.lihatFoto(n.image)} className='fa fa-image'></i></Tooltip> : ""}</td>
<td> {n.image ? <Tooltip title={t('image')}><i onClick={() => this.lihatFoto(n.image)} className='fa fa-image'></i></Tooltip> : ""}</td>
</tr>
)
}) : <tr>
<td colSpan="9" align="center">No Data Available</td>
<td colSpan="9" align="center">{this.props.t('noData')}</td>
</tr>
}
</tbody>

235
src/views/SimproV2/PanicButton/index.js

@ -11,6 +11,7 @@ import { DatePicker } from 'antd';
import { NotificationContainer, NotificationManager } from 'react-notifications';
import { PANIC_BUTTON_UPDATE, PANIC_BUTTON_SEARCH } from '../../../const/ApiConst';
import { Pagination, Tooltip } from 'antd';
import { withTranslation } from 'react-i18next';
const id_org = window.localStorage.getItem('id_org');
const roleName = window.localStorage.getItem('role_name');
@ -19,8 +20,8 @@ const token = window.localStorage.getItem('token');
const config = {
headers:
{
Authorization : `Bearer ${token}`,
"Content-type" : `application/json`
Authorization: `Bearer ${token}`,
"Content-type": `application/json`
}
};
@ -28,16 +29,11 @@ const { RangePicker } = DatePicker;
const momentFormat = 'HH:mm';
const column = [
{ name: "Action" },
{ name: "Date" },
{ name: "Employee Name " },
{ name: "Status Response" },
]
const LENGTH_DATA = 10
export default class index extends Component {
class index extends Component {
constructor(props) {
super(props)
this.state = {
@ -48,18 +44,18 @@ export default class index extends Component {
dataExport: [],
dataGs: [],
dataIdHo: [],
dataMap:"",
dataMap: "",
dataTable: [],
endDate:moment(moment().format("YYYY-M-D")),
endDate: moment(moment().format("YYYY-M-D")),
idDelete: 0,
openDialog: false,
openDialogEdit:false,
openDialogEdit: false,
page: 0,
rowsPerPage: LENGTH_DATA,
search: "",
startDate:moment(moment().format("YYYY-M-D")),
startDate: moment(moment().format("YYYY-M-D")),
tooltipDelete: false,
tooltipExport:false,
tooltipExport: false,
tooltipMap: false,
totalPage: 0,
typeClock: "All",
@ -72,7 +68,7 @@ export default class index extends Component {
}
async componentDidUpdate(prevProps, prevState) {
const { search,startDate } = this.state
const { search, startDate } = this.state
if (search !== prevState.search) this.getDataPanicButton()
if (startDate !== prevState.startDate) this.getDataPanicButton()
}
@ -88,39 +84,39 @@ export default class index extends Component {
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");
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 = {
"paging":{
"start":start,
"length":this.state.rowsPerPage
"paging": {
"start": start,
"length": this.state.rowsPerPage
},
"filter_columns":[
{
"name":"name",
"value":"",
"table_name":"m_users"
}
"filter_columns": [
{
"name": "name",
"value": "",
"table_name": "m_users"
}
],
"columns":[
{"name": "created_at", "logic_operator": "range", "value": dateStart, "value1": dateEnd, "operator": "AND"},
{"name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND", "table_name":"m_users"}
"columns": [
{ "name": "created_at", "logic_operator": "range", "value": dateStart, "value1": dateEnd, "operator": "AND" },
{ "name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND", "table_name": "m_users" }
],
"joins":[
{
"name":"m_users",
"column_join":"user_id",
"column_results":[
"name",
]
}
"joins": [
{
"name": "m_users",
"column_join": "user_id",
"column_results": [
"name",
]
}
],
"orders":{
"columns":[
"id"
],
"ascending":false
"orders": {
"columns": [
"id"
],
"ascending": false
}
}
@ -128,9 +124,9 @@ export default class index extends Component {
.post(PANIC_BUTTON_SEARCH, payload, config)
.then(res => res)
.catch((error) => error.response);
if(result && result.data){
if (result && result.data) {
if (result && result.data && result.data.code == 200) {
this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord,dataExport:result.data.data_export });
this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord, dataExport: result.data.data_export });
} else {
NotificationManager.error('Gagal Menerima Data!!', 'Failed');
}
@ -138,10 +134,10 @@ export default class index extends Component {
}
handleOpenDialog = (type) => {
if(type==="Map"){
if (type === "Map") {
this.setState({ openDialog: true })
this.showChildDialog();
}else{
} else {
this.setState({ openDialogEdit: true })
this.showDialogEdit();
}
@ -153,7 +149,7 @@ export default class index extends Component {
}
handleCloseDialogEdit = (type, data) => {
if(type==="save"){
if (type === "save") {
this.updateStatusResponse(data);
}
this.setState({ openDialogEdit: false })
@ -164,7 +160,7 @@ export default class index extends Component {
}
toggleEditDialog = () => {
this.setState({ openDialogEdit:!this.state.openDialogEdit });
this.setState({ openDialogEdit: !this.state.openDialogEdit });
}
handleMap = data => {
@ -173,7 +169,7 @@ export default class index extends Component {
}
handleEdit = data => {
this.setState({ dataEdit:data });
this.setState({ dataEdit: data });
this.handleOpenDialog('Edit');
}
@ -196,7 +192,7 @@ export default class index extends Component {
toggle = (param) => {
if (param === "map") {
this.setState(prevState => ({ tooltipMap: !prevState.tooltipMap }))
}else if(param==="edit"){
} else if (param === "edit") {
this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit }))
} else if (param === "delete") {
this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete }))
@ -206,13 +202,13 @@ export default class index extends Component {
}
handleDatePicker = (date, dateString) => {
this.setState({ startDate:date[0],endDate:date[1] },()=>{
this.setState({ startDate: date[0], endDate: date[1] }, () => {
this.getDataPanicButton();
})
}
handleTipe = (e) => {
this.setState({ typeClock:e.target.value }, () => {
this.setState({ typeClock: e.target.value }, () => {
this.getDataPanicButton();
});
}
@ -221,27 +217,27 @@ export default class index extends Component {
const dataExcel = this.state.dataTable || [];
const fileName = "Panic Button.xlsx";
let dataExport = [];
dataExcel.map((val)=>{
dataExcel.map((val) => {
let row = {
"Tanggal": moment(val.created_date).format("DD-MM-YYYY HH:MM:SS"),
"Nama Karyawan" : val.employee_name,
"Latitude" : val.lan,
"Longitude" : val.lon,
"Status" : val.status_response
"Nama Karyawan": val.join_first_name,
"Latitude": val.lat,
"Longitude": val.lon,
"Status": val.status_response
}
dataExport.push(row);
})
const ws = XLSX.utils.json_to_sheet(dataExport);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Panic Button');
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Panic Button');
XLSX.writeFile(wb, fileName);
XLSX.writeFile(wb, fileName);
}
updateStatusResponse = async (data) => {
let url = PANIC_BUTTON_UPDATE(data.id);
let payload = {
"user_id" : data.user_id,
"user_id": data.user_id,
"lat": data.lat,
"lon": data.lon,
"status_response": data.status_response,
@ -253,7 +249,7 @@ export default class index extends Component {
.put(url, payload, config)
.then(res => res)
.catch((error) => error.response);
if(result && result.data){
if (result && result.data) {
if (result.data.code == 200) {
this.getDataPanicButton()
NotificationManager.success('Berhasil update status response!!', 'Success!');
@ -264,65 +260,73 @@ export default class index extends Component {
}
renderTable = () => {
const t = this.props;
const dataTable2 = this.state.dataTable || [];
return (
<tbody>
{dataTable2.length!==0 ? dataTable2.map((n) => {
return (
<tr key={n.id}>
<td>
<Tooltip title="Edit">
<i id="TooltipEdit" className="cil-pencil fa-lg" style={{ color: 'green', cursor: "pointer", marginRight: 15 }} onClick={() => this.handleEdit(n)}></i>
</Tooltip>
<Tooltip title="Map">
<i id="tooltipMap" className="fa fa-map fa-lg" style={{ color: 'black', cursor: "pointer" }} onClick={() => this.handleMap(n)}></i>
</Tooltip>
</td>
<td>{ n.created_date!==null ? moment(n.created_at).format("DD-MM-YYYY HH:mm:ss") : "-" }</td>
<td>{ n.join_first_name !==null ? n.join_first_name : "-" }</td>
<td>{ n.status_response!==null ? n.status_response : "-" }</td>
</tr>
)
}) : <tr>
<td colSpan="4" align="center">No Data Available</td>
</tr>
}
</tbody>
{dataTable2.length !== 0 ? dataTable2.map((n) => {
return (
<tr key={n.id}>
<td>
<Tooltip title={this.props.t('edit')}>
<i id="TooltipEdit" className="fa fa-edit" style={{ color: 'green', cursor: "pointer", marginRight: 15 }} onClick={() => this.handleEdit(n)}></i>
</Tooltip>
<Tooltip title={this.props.t('map')}>
<i id="tooltipMap" className="fa fa-map" style={{ color: 'black', cursor: "pointer" }} onClick={() => this.handleMap(n)}></i>
</Tooltip>
</td>
<td>{n.created_date !== null ? moment(n.created_at).format("DD-MM-YYYY HH:mm:ss") : "-"}</td>
<td>{n.join_first_name !== null ? n.join_first_name : "-"}</td>
<td>{n.status_response !== null ? n.status_response : "-"}</td>
</tr>
)
}) : <tr>
<td colSpan="4" align="center">No Data Available</td>
</tr>
}
</tbody>
)
}
handleChangeDay = (e) => {
const val = e.target.value;
this.setState({ currentDay:val });
if(val==="today"){
this.setState({ currentDay: val });
if (val === "today") {
this.setState({
startDate:moment(moment().format("YYYY-M-D")),
endDate:moment(moment().format("YYYY-M-D")),
startDate: moment(moment().format("YYYY-M-D")),
endDate: moment(moment().format("YYYY-M-D")),
currentPage: 1
})
}else if(val==="3 day"){
} else if (val === "3 day") {
this.setState({
startDate:moment(moment().subtract(3, "days").format("YYYY-M-D")),
endDate:moment(moment().format("YYYY-M-D")),
startDate: moment(moment().subtract(3, "days").format("YYYY-M-D")),
endDate: moment(moment().format("YYYY-M-D")),
currentPage: 1
})
}else if(val==="7 day"){
} else if (val === "7 day") {
this.setState({
startDate:moment(moment().subtract(7, "days").format("YYYY-M-D")),
endDate:moment(moment().format("YYYY-M-D")),
startDate: moment(moment().subtract(7, "days").format("YYYY-M-D")),
endDate: moment(moment().format("YYYY-M-D")),
currentPage: 1
})
}else{
} else {
this.setState({
startDate:moment(moment().format("YYYY-M-D")),
endDate:moment(moment().format("YYYY-M-D")),
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
const column = [
{ name: this.props.t('action') },
{ name: this.props.t('date') },
{ name: this.props.t('nameHR') },
{ name: this.props.t('statusResponse') },
]
const t = this.props;
const { tooltipExport, dataTable, openDialogEdit, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipMap, tooltipDelete } = this.state
return (
<div>
<NotificationContainer />
@ -342,29 +346,29 @@ export default class index extends Component {
/>
<Card>
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
<h4>Panic Button</h4>
<h4>{this.props.t('panicButton')}</h4>
<div>
<Tooltip title="Export Excel">
<Button id="TooltipExport" color="primary" onClick={()=> this.handleExportExcel()}><i className="fa fa-print"></i></Button>
</Tooltip>
<Tooltip title={this.props.t('exportExcel')}>
<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.getDataPanicButton()}>Cari</Button>
</div>
<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">{this.props.t('today')}</option>
<option value="3 day">{this.props.t('3days')}</option>
<option value="7 day">{this.props.t('7days')}</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.getDataPanicButton()}>{this.props.t('search')}</Button>
</div>
</div>
</div>
<Table responsive striped hover>
<thead>
<tr>
@ -375,7 +379,7 @@ export default class index extends Component {
})}
</tr>
</thead>
{ this.renderTable() }
{this.renderTable()}
</Table>
<Pagination
showSizeChanger
@ -392,3 +396,4 @@ export default class index extends Component {
)
}
}
export default withTranslation()(index);

4
src/views/SimproV2/ProjectType/index.js

@ -11,7 +11,7 @@ import { NotificationContainer, NotificationManager } from 'react-notifications'
import { PROJECT_TYPE_ADD, PROJECT_TYPE_EDIT, PROJECT_TYPE_DELETE, PROJECT_TYPE_SEARCH } from '../../../const/ApiConst';
import { Pagination, Button, Tooltip, Table } from 'antd';
import { useTranslation } from 'react-i18next';
import { handleChangeLng } from '../../../utils/LangUtils';
import { handleChangeLng } from "../../../utils/LangUtils";
const url = "";
const proyek_id = localStorage.getItem('proyek_id');
const role_id = localStorage.getItem('role_id');
@ -85,7 +85,7 @@ const ProjectType = ({ params }) => {
}
],
"orders": {
"ascending": true,
"ascending": false,
"columns": [
'id'
]

72
src/views/SimproV2/ResourceMaterial/DialogForm.js

@ -7,6 +7,7 @@ import { DatePicker, Tooltip, Select } from 'antd';
import { formatRupiah, formatNumber } from '../../../const/CustomFunc'
import moment from 'moment';
import 'antd/dist/antd.css';
import { useTranslation } from 'react-i18next';
const { Option } = Select
const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, dataUom }) => {
@ -26,7 +27,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
const [poDate, setPoDate] = useState(null)
const [receivedDate, setReceivedDate] = useState(null)
const [deliveryDate, setDeliveryDate] = useState(null)
const { t } = useTranslation()
@ -173,22 +174,21 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
<Row>
<Col md={12}>
<FormGroup>
<Label className="capitalize">Material Name</Label>
<Input type="text" value={materialName} onChange={(e) => setMaterialName(e.target.value)} placeholder={`Input material name...`} />
<Label className="capitalize">{t('name')}</Label>
<Input type="text" value={materialName} onChange={(e) => setMaterialName(e.target.value)} placeholder={t('inputName')} />
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">QTY</Label>
<Input type="number" value={qty} onChange={(e) => setQty(e.target.value)} placeholder={`Input qty...`} />
<Label className="capitalize">{t('qty')}</Label>
<Input type="number" value={qty} onChange={(e) => setQty(e.target.value)} placeholder={t('inputQty')} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">UOM</Label>
<Label className="capitalize">{t('uom')}</Label>
<Select showSearch defaultValue={uom} onChange={(val) => setUom(val)} placeholder="Select Uom" style={{ width: '100%' }}>
{setupSelectUom()}
</Select>
@ -201,8 +201,8 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Unit Price</Label>
<Input type="text" value={unitPrice} onChange={(e) => setUnitPrice(formatNumber(e.target.value))} placeholder={`Unit Price...`} />
<Label className="capitalize">{t('unitPrice')}</Label>
<Input type="text" value={unitPrice} onChange={(e) => setUnitPrice(formatNumber(e.target.value))} placeholder={t('inputUnitPrice')} />
</FormGroup>
</Col>
<Col md={6}>
@ -215,8 +215,8 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
<Row>
<Col md={12}>
<FormGroup>
<Label className="capitalize">Description</Label>
<Input row="2" type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder={`Description ...`} />
<Label className="capitalize">{t('description')}</Label>
<Input row="2" type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder={t('inputDescription')} />
</FormGroup>
</Col>
</Row>
@ -243,21 +243,21 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Price</Label>
<Input type="text" value={priceReq} onChange={(e) => setPriceReq(formatNumber(e.target.value))} placeholder={`Input Price ...`} />
<Label className="capitalize">{t('price')}</Label>
<Input type="text" value={priceReq} onChange={(e) => setPriceReq(formatNumber(e.target.value))} placeholder={t('inputPrice')} />
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Description</Label>
<Input row="2" type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder={`Description ...`} />
<Label className="capitalize">{t('description')}</Label>
<Input row="2" type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder={t('inputDescription')} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Required Date</Label>
<Label className="capitalize">{t('dateRequired')}</Label>
<DatePicker style={{ width: "100%" }} value={requiredDate} onChange={(date, dateString) => setRequiredDate(date)} />
</FormGroup>
</Col>
@ -265,13 +265,13 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">QTY</Label>
<Label className="capitalize">{t('qty')}</Label>
<Input type="number" min="0" value={qty} onChange={(e) => setQty(e.target.value)} placeholder={`Input QTY...`} disabled />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">UOM</Label>
<Label className="capitalize">{t('uom')}</Label>
<Input type="text" value={uom} onChange={(e) => setUom(e.target.value)} placeholder={`Input UOM...`} disabled />
</FormGroup>
</Col>
@ -279,13 +279,13 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">QTY Received</Label>
<Input type="number" min="0" max={qty} value={qtyReceived} onChange={(e) => setQtyReceived(e.target.value)} placeholder={`Input QTY Received...`} />
<Label className="capitalize">{t('qtyReceived')}</Label>
<Input type="number" min="0" max={qty} value={qtyReceived} onChange={(e) => setQtyReceived(e.target.value)} placeholder={t('inputQtyReceived')} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">FOM Date</Label>
<Label className="capitalize">{t('dateFOM')}</Label>
<DatePicker style={{ width: "100%" }} value={fomDate} onChange={(date, dateString) => setFomDate(date)} />
</FormGroup>
</Col>
@ -293,13 +293,13 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">PR Date</Label>
<Label className="capitalize">{t('datePR')}</Label>
<DatePicker style={{ width: "100%" }} value={prDate} onChange={(date, dateString) => setPrDate(date)} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">PO Date</Label>
<Label className="capitalize">{t('datePO')}</Label>
<DatePicker style={{ width: "100%" }} value={poDate} onChange={(date, dateString) => setPoDate(date)} />
</FormGroup>
</Col>
@ -307,13 +307,13 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Received to Warehouse Date</Label>
<Label className="capitalize">{t('dateReceivedWerehouse')}</Label>
<DatePicker style={{ width: "100%" }} value={receivedDate} onChange={(date, dateString) => setReceivedDate(date)} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Delivery to Site Date</Label>
<Label className="capitalize">{t('dateDeliverySite')}</Label>
<DatePicker style={{ width: "100%" }} value={deliveryDate} onChange={(date, dateString) => setDeliveryDate(date)} />
</FormGroup>
</Col>
@ -339,8 +339,8 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Description</Label>
<Input row="2" type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder={`Description ...`} />
<Label className="capitalize">{t('description')}</Label>
<Input row="2" type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder={t('inputDescription')} />
</FormGroup>
</Col>
<Col md={6}>
@ -353,13 +353,13 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">QTY</Label>
<Label className="capitalize">{t('qty')}</Label>
<Input type="number" value={qty} onChange={(e) => setQty(e.target.value)} placeholder={`Input QTY...`} disabled />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">UOM</Label>
<Label className="capitalize">{t('uom')}</Label>
<Input type="text" value={uom} onChange={(e) => setUom(e.target.value)} placeholder={`Input UOM...`} disabled />
</FormGroup>
</Col>
@ -367,13 +367,13 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">QTY Received</Label>
<Label className="capitalize">{t('qtyReceived')}</Label>
<Input type="number" min="0" max={qty} value={qtyReceived} onChange={(e) => setQtyReceived(e.target.value)} placeholder={`Input QTY Received...`} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">FOM Date</Label>
<Label className="capitalize">{t('dateFOM')}</Label>
<DatePicker style={{ width: "100%" }} value={fomDate} onChange={(date, dateString) => setFomDate(date)} />
</FormGroup>
</Col>
@ -381,13 +381,13 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">PR Date</Label>
<Label className="capitalize">{t('datePR')}</Label>
<DatePicker style={{ width: "100%" }} value={prDate} onChange={(date, dateString) => setPrDate(date)} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">PO Date</Label>
<Label className="capitalize">{t('datePO')}</Label>
<DatePicker style={{ width: "100%" }} value={poDate} onChange={(date, dateString) => setPoDate(date)} />
</FormGroup>
</Col>
@ -395,13 +395,13 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Received Date</Label>
<Label className="capitalize">{t('dateReceived')}</Label>
<DatePicker style={{ width: "100%" }} value={receivedDate} onChange={(date, dateString) => setReceivedDate(date)} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Delivery Date</Label>
<Label className="capitalize">{t('dateDelivery')}</Label>
<DatePicker style={{ width: "100%" }} value={deliveryDate} onChange={(date, dateString) => setDeliveryDate(date)} />
</FormGroup>
</Col>
@ -421,7 +421,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={() => handleSave()}>{typeDialog === 'Save' ? 'Save' : 'Edit'}</Button>{' '}
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button>
</ModalFooter>
</Modal>

101
src/views/SimproV2/ResourceMaterial/index.js

@ -16,6 +16,7 @@ import {
REQUEST_MATERIAL_SEARCH, REQUEST_MATERIAL_EDIT,
REQUEST_MATERIAL_UPDATE_WAREHOUSE_SITE, SATUAN_SEARCH
} from '../../../const/ApiConst';
import { useTranslation } from 'react-i18next';
const { TabPane } = Tabs;
const { Panel } = Collapse;
@ -60,7 +61,7 @@ const Resource = ({ params }) => {
const [totalPage, setTotalPage] = useState(0)
const [typeDialog, setTypeDialog] = useState('Save')
const pageName = params.name;
const { t } = useTranslation()
useEffect(() => {
getDataReqMaterial()
getDataSatuan()
@ -514,23 +515,23 @@ const Resource = ({ params }) => {
const RenderTable = useMemo(() => {
const columns = [
{
title: 'Action',
title: t('action'),
dataIndex: '',
key: 'x',
className: 'nowrap',
render: (text, record) => <>
<Tooltip title="Edit">
<Button size="small" type="link" style={{ color: 'orange' }} onClick={() => handleEdit(text, 'Edit')}><i className="fa fa-edit"></i></Button>
<Tooltip title={t('edit')}>
<Button size="small" type="link" style={{ color: 'green' }} onClick={() => handleEdit(text, 'Edit')}><i className="fa fa-edit"></i></Button>
</Tooltip>
<Tooltip title="Hapus">
<Tooltip title={t('delete')}>
<Button size="small" type="link" style={{ color: 'red' }} onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
</Tooltip>
</>,
},
{ title: 'Material Name', dataIndex: 'name', key: 'name' },
{ title: 'QTY', dataIndex: 'qty', key: 'qty' },
{ title: 'UOM', dataIndex: 'uom', key: 'uom' },
{ title: 'Description', dataIndex: 'description', key: 'description' },
{ title: t('name'), dataIndex: 'name', key: 'name' },
{ title: t('qty'), dataIndex: 'qty', key: 'qty' },
{ title: t('uom'), dataIndex: 'uom', key: 'uom' },
{ title: t('description'), dataIndex: 'description', key: 'description' },
{ title: 'Status', dataIndex: 'status', key: 'status' }
];
@ -547,31 +548,31 @@ const Resource = ({ params }) => {
const RenderRequestMaterialTable = useMemo(() => {
const columns = [
{
title: 'Action',
title: t('action'),
dataIndex: '',
key: 'id',
className: "nowrap",
render: (text, record) => <>
<Tooltip title="Edit Request Resource">
<Button size="small" type="link" style={{ color: 'orange' }} onClick={() => handleEdit(text, 'EditMatReq')}><i className="fa fa-edit"></i></Button>
<Tooltip title={`${t('edit')} ${t('materialRequest')}`}>
<Button size="small" type="link" style={{ color: 'green' }} onClick={() => handleEdit(text, 'EditMatReq')}><i className="fa fa-edit"></i></Button>
</Tooltip>{" "}
<Tooltip title="Delete Request Resource">
<Tooltip title={`${t('delete')} ${t('materialRequest')}`}>
<Button size="small" type="link" style={{ color: 'red' }} onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
</Tooltip>
</>,
},
{ title: 'Status', dataIndex: 'status', key: 'status', render: (text, record) => renderLabelStatus(text) },
{ title: 'Description', dataIndex: 'description', key: 'description' },
{ title: 'Required Date', dataIndex: 'required_date', key: 'required_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{moment(text).format("D-M-YYYY")}</div>) },
{ title: 'QTY', dataIndex: 'qty', key: 'qty', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
{ title: 'UOM', dataIndex: 'uom', key: 'uom', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
{ title: 'QTY Received', dataIndex: 'qty_received', key: 'qty_received', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
{ title: 'Unit Price', dataIndex: 'price', key: 'price', render: (text, record) => { return renderFormatNumber(text, "Rp") } },
{ title: 'FOM Date', dataIndex: 'fom_date', key: 'fom_date', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{moment(text).format("D-M-YYYY")}</div>) },
{ title: 'PR Date', dataIndex: 'pr_date', key: 'pr_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
{ title: 'PO Date', dataIndex: 'po_date', key: 'po_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
{ title: 'Received Date', dataIndex: 'received_date', key: 'received_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
{ title: 'Delivery Date', dataIndex: 'delivery_date', key: 'delivery_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
{ title: t('description'), dataIndex: 'description', key: 'description' },
{ title: t('dateRequired'), dataIndex: 'required_date', key: 'required_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{moment(text).format("D-M-YYYY")}</div>) },
{ title: t('qty'), dataIndex: 'qty', key: 'qty', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
{ title: t('uom'), dataIndex: 'uom', key: 'uom', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
{ title: t('qtyReceived'), dataIndex: 'qty_received', key: 'qty_received', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
{ title: t('unitPrice'), dataIndex: 'price', key: 'price', render: (text, record) => { return renderFormatNumber(text, "Rp") } },
{ title: t('dateFOM'), dataIndex: 'fom_date', key: 'fom_date', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{moment(text).format("D-M-YYYY")}</div>) },
{ title: t('datePR'), dataIndex: 'pr_date', key: 'pr_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
{ title: t('datePO'), dataIndex: 'po_date', key: 'po_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
{ title: t('dateReceived'), dataIndex: 'received_date', key: 'received_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
{ title: t('dateDelivery'), dataIndex: 'delivery_date', key: 'delivery_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
];
let componentGroup = [];
@ -599,32 +600,32 @@ const Resource = ({ params }) => {
const RenderMaterialDeliveryTable = useMemo(() => {
const columns = [
{
title: 'Action',
title: t('action'),
dataIndex: '',
key: 'id',
className: "nowrap",
render: (text, record) => <>
{text.status == "receipt to warehouse" ? <>
<Tooltip title="Edit Request Resource">
<Button size="small" type="link" style={{ color: 'orange' }} onClick={() => handleEdit(text, 'EditMatDelv')}><i className="fa fa-edit"></i></Button>
</Tooltip>{" "}<Tooltip title="Delete Request Resource">
<Tooltip title={`${t('edit')} ${t('materialRequest')}`}>
<Button size="small" type="link" style={{ color: 'green' }} onClick={() => handleEdit(text, 'EditMatDelv')}><i className="fa fa-edit"></i></Button>
</Tooltip>{" "}<Tooltip title={`${t('delete')} ${t('materialRequest')}`}>
<Button size="small" type="link" style={{ color: 'red' }} onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
</Tooltip>
</> : "-"}
</>,
},
{ title: 'Status', dataIndex: 'status', key: 'status' },
{ title: 'Description', dataIndex: 'description', key: 'description' },
{ title: 'Required Date', dataIndex: 'required_date', key: 'required_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{moment(text).format("D-M-YYYY")}</div>) },
{ title: 'QTY', dataIndex: 'qty', key: 'qty', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
{ title: 'UOM', dataIndex: 'uom', key: 'uom', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
{ title: 'QTY Received', dataIndex: 'qty_received', key: 'qty_received', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
{ title: 'FOM Date', dataIndex: 'fom_date', key: 'fom_date', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{moment(text).format("D-M-YYYY")}</div>) },
{ title: 'PR Date', dataIndex: 'pr_date', key: 'pr_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
{ title: 'PO Date', dataIndex: 'po_date', key: 'po_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
{ title: 'Received Date', dataIndex: 'received_date', key: 'received_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
{ title: 'Delivery Date', dataIndex: 'delivery_date', key: 'delivery_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
{ title: t('description'), dataIndex: 'description', key: 'description' },
{ title: t('dateRequired'), dataIndex: 'required_date', key: 'required_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{moment(text).format("D-M-YYYY")}</div>) },
{ title: t('qty'), dataIndex: 'qty', key: 'qty', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
{ title: t('uom'), dataIndex: 'uom', key: 'uom', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
{ title: t('qtyReceived'), dataIndex: 'qty_received', key: 'qty_received', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
{ title: t('dateFOM'), dataIndex: 'fom_date', key: 'fom_date', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{moment(text).format("D-M-YYYY")}</div>) },
{ title: t('datePR'), dataIndex: 'pr_date', key: 'pr_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
{ title: t('datePO'), dataIndex: 'po_date', key: 'po_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
{ title: t('dateReceived'), dataIndex: 'received_date', key: 'received_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
{ title: t('dateDelivery'), dataIndex: 'delivery_date', key: 'delivery_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
];
let componentGroup = [];
@ -655,13 +656,13 @@ const Resource = ({ params }) => {
<h4 className="capitalize">{pageName}</h4>
<Row>
<Col>
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Search...`} />
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={t('searchMaterial')} />
</Col>
<Col>
<Tooltip title="Add Material Resource">
<Tooltip title={`${t('add')} ${t('materialResource')}`}>
<Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
</Tooltip>
<Tooltip title="Export Excel">
<Tooltip title={t('exportExcel')}>
<Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcelMatResource()}><i className="fa fa-print"></i></Button>
</Tooltip>
</Col>
@ -688,13 +689,13 @@ const Resource = ({ params }) => {
return (
<Card>
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
<h4 className="capitalize">Material Request</h4>
<h4 className="capitalize">{t('materialRequest')}</h4>
<Row>
<Col>
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Search...`} />
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={t('searchMaterial')} />
</Col>
<Col>
<Tooltip title="Export Excel">
<Tooltip title={t('exportExcel')}>
<Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcelRequestMaterial()}><i className="fa fa-print"></i></Button>
</Tooltip>
</Col>
@ -713,7 +714,7 @@ const Resource = ({ params }) => {
return (
<Card>
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
<h4 className="capitalize">Material Delivery to Site</h4>
<h4 className="capitalize">{t('materialDelivery')}</h4>
<Row>
<Col>
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Search...`} />
@ -743,12 +744,12 @@ const Resource = ({ params }) => {
showCancel
confirmBtnText="Delete"
confirmBtnBsStyle="danger"
title={`Are you sure?`}
title={t('deleteConfirm')}
onConfirm={onConfirmDelete}
onCancel={() => cancelDelete()}
focusCancelBtn
>
Delete this data
{t('deleteMsg')}
</SweetAlert>
<DialogForm
openDialog={openDialog}
@ -761,13 +762,13 @@ const Resource = ({ params }) => {
dataUom={dataSatuan}
/>
<Tabs defaultActiveKey="1">
<TabPane tab="Material Resource Pool" key="1">
<TabPane tab={t('materialResource')} key="1">
{CardMasterMaterial}
</TabPane>
<TabPane tab="Material Request" key="2">
<TabPane tab={t('materialRequest')} key="2">
{CardMaterialRequest}
</TabPane>
<TabPane tab="Material Delivery to Site" key="3">
<TabPane tab={t('materialDelivery')} key="3">
{CardMaterialDelivery}
</TabPane>
</Tabs>

39
src/views/SimproV2/ResourceTools/DialogEditReqTools.js

@ -8,6 +8,7 @@ import { AXIOS, REQUEST_TOOLS_EDIT, BASE_SIMPRO, TYPE_PROYEK, USER_LIST, USERPRO
import axios from "../../../const/interceptorApi"
import { NotificationContainer, NotificationManager } from 'react-notifications';
import _, { initial } from 'underscore'
import { useTranslation } from 'react-i18next';
const { Option } = Select
@ -40,7 +41,7 @@ const DialogTools = ({ openDialog, closeDialog, toggleDialog, idTask, handleClos
const [description, setDescription] = useState("");
const [ownershipStatus, setOwnershipStatus] = useState("")
const [ownershipName, setOwnershipName] = useState("")
const { t } = useTranslation()
const handleClearData = () => {
setStatus("")
@ -131,13 +132,13 @@ const DialogTools = ({ openDialog, closeDialog, toggleDialog, idTask, handleClos
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Asset Type</Label>
<Label className="capitalize">{t('assetType')}</Label>
<Input type="text" value={assetType} onChange={(e) => setAssetType(e.target.value)} placeholder={`Input Asset Type...`} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Asset Name</Label>
<Label className="capitalize">{t('nameAsset')}</Label>
<Input type="text" value={assetName} onChange={(e) => setAssetName(e.target.value)} placeholder={`Input Asset Name...`} />
</FormGroup>
</Col>
@ -145,19 +146,19 @@ const DialogTools = ({ openDialog, closeDialog, toggleDialog, idTask, handleClos
<Row>
<Col md={3}>
<FormGroup>
<Label className="capitalize">QTY</Label>
<Input type="text" value={qty} onChange={(e) => setQty(e.target.value)} placeholder={`Input QTY...`} />
<Label className="capitalize">{t('QTY')}</Label>
<Input type="text" value={qty} onChange={(e) => setQty(e.target.value)} placeholder={t('inputQty')} />
</FormGroup>
</Col>
<Col md={3}>
<FormGroup>
<Label className="capitalize">QTY Received</Label>
<Input type="text" value={qtyReceived} onChange={(e) => setQtyReceived(e.target.value)} placeholder={`Input QTY Received...`} />
<Label className="capitalize">{t('qtyReceived')}</Label>
<Input type="text" value={qtyReceived} onChange={(e) => setQtyReceived(e.target.value)} placeholder={t('inputQtyReceived')} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">UOM</Label>
<Label className="capitalize">{t('UOM')}</Label>
<Input type="text" value={uom} onChange={(e) => setUom(e.target.value)} placeholder={`Input UOM...`} />
</FormGroup>
</Col>
@ -165,24 +166,24 @@ const DialogTools = ({ openDialog, closeDialog, toggleDialog, idTask, handleClos
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Required Date</Label>
<Label className="capitalize">{t('dateRequired')}</Label>
<DatePicker style={{ width: "100%" }} value={requiredDate} onChange={handleDatePicker} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Description</Label>
<Input type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder={`Input Description...`} />
<Label className="capitalize">{t('description')}</Label>
<Input type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder={t('inputDescription')} />
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Ownership Status</Label>
<Select showSearch value={ownershipStatus} defaultValue={ownershipStatus} onChange={(val) => setOwnershipStatus(val)} placeholder="Select ownership status" style={{ width: '100%' }}>
<Option value="own">Own</Option>
<Option value="rent">Rent</Option>
<Label className="capitalize">{t('ownershipStatus')}</Label>
<Select showSearch value={ownershipStatus} defaultValue={ownershipStatus} onChange={(val) => setOwnershipStatus(val)} placeholder={t('selectOwnershipStatus')} style={{ width: '100%' }}>
<Option value="own">{t('own')}</Option>
<Option value="rent">{t('rent')}</Option>
</Select>
</FormGroup>
</Col>
@ -190,7 +191,7 @@ const DialogTools = ({ openDialog, closeDialog, toggleDialog, idTask, handleClos
ownershipStatus === 'rent' ?
<Col md={6}>
<FormGroup>
<Label className="capitalize">Ownership Name</Label>
<Label className="capitalize">{t('ownershipName')}</Label>
<Input type="text" value={ownershipName} onChange={(e) => setOwnershipName(e.target.value)} placeholder={`Input Ownership Name...`} />
</FormGroup>
</Col>
@ -206,13 +207,13 @@ const DialogTools = ({ openDialog, closeDialog, toggleDialog, idTask, handleClos
return (
<>
<Modal size="xl" isOpen={openDialog} toggle={toggleDialog}>
<ModalHeader className="capitalize" toggle={closeDialog}>Add Tools</ModalHeader>
<ModalHeader className="capitalize" toggle={closeDialog}>{`${t('edit')} ${t('toolsRequest')}`}</ModalHeader>
<ModalBody>
{renderForm()}
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={handleSaveResource}>Save</Button>{' '}
<Button className="capitalize" color="secondary" onClick={() => handleCloseDialogFormTools()}>Batal</Button>
<Button color="primary" onClick={handleSaveResource}>{t('save')}</Button>{' '}
<Button className="capitalize" color="secondary" onClick={() => handleCloseDialogFormTools()}>{t('cancel')}</Button>
</ModalFooter>
</Modal>
</>

32
src/views/SimproV2/ResourceTools/DialogForm.js

@ -3,12 +3,8 @@ import {
Modal, ModalHeader, ModalBody, ModalFooter,
Button, Form, FormGroup, Label, Input, Col, Row
} from 'reactstrap';
import { DatePicker, Tooltip, Select, Input as InputAntd } from 'antd';
import moment from 'moment';
import 'antd/dist/antd.css';
import { formatRupiah, formatNumber } from '../../../const/CustomFunc'
import { ROLE_SEARCH } from '../../../const/ApiConst'
const { Option } = Select
import { useTranslation } from 'react-i18next';
const token = window.localStorage.getItem('token');
const config = {
@ -26,7 +22,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
const [qty, setQty] = useState('')
const [assetType, setAssetType] = useState('')
const [description, setDescription] = useState('')
const { t } = useTranslation()
useEffect(() => {
if (typeDialog === "Edit") {
setId(dataEdit.id)
@ -88,36 +84,36 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Name</Label>
<Input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder={`Name...`} />
<Label className="capitalize">{t('name')}</Label>
<Input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder={t('inputName')} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Asset Type</Label>
<Input type="text" value={assetType} onChange={(e) => setAssetType(e.target.value)} placeholder={`Asset Type...`} />
<Label className="capitalize">{t('assetType')}</Label>
<Input type="text" value={assetType} onChange={(e) => setAssetType(e.target.value)} placeholder={t('inputAsset')} />
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">UOM</Label>
<Input type="text" value={uom} onChange={(e) => setUom(e.target.value)} placeholder={`UOM...`} />
<Label className="capitalize">{t('UOM')}</Label>
<Input type="text" value={uom} onChange={(e) => setUom(e.target.value)} placeholder={t('inputUOM')} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">QTY</Label>
<Input type="number" value={qty} onChange={(e) => setQty(e.target.value)} placeholder={`QTY...`} />
<Label className="capitalize">{t('QTY')}</Label>
<Input type="number" value={qty} onChange={(e) => setQty(e.target.value)} placeholder={t('inputQTY')} />
</FormGroup>
</Col>
</Row>
<Row>
<Col md={12}>
<FormGroup>
<Label className="capitalize">Description</Label>
<Input type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder={`Description...`} />
<Label className="capitalize">{t('description')}</Label>
<Input type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder={t('inputDescription')} />
</FormGroup>
</Col>
</Row>
@ -129,13 +125,13 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
return (
<>
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} Tools Resource</ModalHeader>
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} {t('toolsResource')}</ModalHeader>
<ModalBody>
{renderForm()}
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '}
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button>
</ModalFooter>
</Modal>
</>

76
src/views/SimproV2/ResourceTools/index.js

@ -5,15 +5,14 @@ import React, { useState, useEffect, useMemo } from 'react';
import SweetAlert from 'react-bootstrap-sweetalert';
import _, { initial } from 'underscore'
import axios from "../../../const/interceptorApi"
import moment from 'moment'
import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap';
import { DownloadOutlined } from '@ant-design/icons';
import { NotificationContainer, NotificationManager } from 'react-notifications';
import { Pagination, Table, Button, Tooltip, Tabs, Collapse } from 'antd';
import { renderLabelStatus } from '../../../const/CustomFunc';
import {
TOOLS_RESOURCE_ADD, TOOLS_RESOURCE_SEARCH, REQUEST_TOOLS_SEARCH, TOOLS_RESOURCE_EDIT, TOOLS_RESOURCE_DELETE
} from '../../../const/ApiConst';
import { useTranslation } from 'react-i18next';
const { TabPane } = Tabs;
const { Panel } = Collapse;
@ -61,6 +60,7 @@ const ResourceWorker = ({ params }) => {
const [totalPage, setTotalPage] = useState(0)
const [typeDialog, setTypeDialog] = useState('Save')
const pageName = params.name;
const { t } = useTranslation();
useEffect(() => {
getDataReqTools()
@ -508,24 +508,24 @@ const ResourceWorker = ({ params }) => {
const RenderTable = useMemo(() => {
const columns = [
{
title: 'Action',
title: t('action'),
dataIndex: '',
key: 'x',
className: 'nowrap',
render: (text, record) => <>
<Tooltip titl="Edit">
<Button size="small" type="link" style={{ color: 'orange' }} onClick={() => handleEdit(text)}><i className="fa fa-edit"></i></Button>
<Tooltip title={t('edit')}>
<Button size="small" type="link" style={{ color: 'green' }} onClick={() => handleEdit(text)}><i className="fa fa-edit"></i></Button>
</Tooltip>
<Tooltip title="Hapus">
<Tooltip title={t('delete')}>
<Button size="small" type="link" style={{ color: 'red' }} onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
</Tooltip>
</>,
},
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Asset Type', dataIndex: 'asset_type', key: 'asset_type' },
{ title: 'UOM', dataIndex: 'uom', key: 'uom' },
{ title: 'QTY', dataIndex: 'qty', key: 'qty' },
{ title: 'Description', dataIndex: 'description', key: 'description' },
{ title: t('name'), dataIndex: 'name', key: 'name' },
{ title: t('assetType'), dataIndex: 'asset_type', key: 'asset_type' },
{ title: t('uom'), dataIndex: 'uom', key: 'uom' },
{ title: t('qty'), dataIndex: 'qty', key: 'qty' },
{ title: t('description'), dataIndex: 'description', key: 'description' },
];
return (
<Table
@ -543,13 +543,13 @@ const ResourceWorker = ({ params }) => {
<h4 className="capitalize">{pageName}</h4>
<Row>
<Col>
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Search...`} />
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={t('searchTools')} />
</Col>
<Col>
<Tooltip title="Add Resource">
<Tooltip title={t('resourceToolsAdd')}>
<Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
</Tooltip>
<Tooltip title="Export Excel">
<Tooltip title={t('exportExcel')}>
<Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcelToolsResource()}><i className="fa fa-print"></i></Button>
</Tooltip>
</Col>
@ -588,32 +588,32 @@ const ResourceWorker = ({ params }) => {
let columns = [
{
title: 'Action',
title: t('action'),
dataIndex: '',
key: 'x',
render: (text, record) => <>
{type == "delivery" ? "-" : (
<> <Tooltip title="Edit">
<Button size="small" type="link" style={{ color: 'orange' }} onClick={() => handleClickEditReqTools(text)}><i className="fa fa-edit"></i></Button>
<> <Tooltip title={t('edit')}>
<Button size="small" type="link" style={{ color: 'green' }} onClick={() => handleClickEditReqTools(text)}><i className="fa fa-edit"></i></Button>
</Tooltip>
<Tooltip title="Hapus">
<Tooltip title={t('delete')}>
<Button size="small" type="link" style={{ color: 'red' }} onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
</Tooltip></>
)}
</>,
},
{ title: 'Status', dataIndex: 'status', key: 'status', render: (text, record) => renderLabelStatus(text) },
{ title: 'Name', dataIndex: 'asset_name', key: 'asset_name' },
{ title: 'Asset Type', dataIndex: 'asset_type', key: 'asset_type' },
{ title: 'UOM', dataIndex: 'uom', key: 'uom' },
{ title: 'QTY', dataIndex: 'qty', key: 'qty' },
{ title: t('name'), dataIndex: 'asset_name', key: 'asset_name' },
{ title: t('assetType'), dataIndex: 'asset_type', key: 'asset_type' },
{ title: t('uom'), dataIndex: 'uom', key: 'uom' },
{ title: t('qty'), dataIndex: 'qty', key: 'qty' },
];
if (type === 'request') {
columns.push({ title: 'QTY Received', dataIndex: 'qty_received', key: 'qty_received' });
columns.push({ title: t('qtyReceived'), dataIndex: 'qty_received', key: 'qty_received' });
}
columns.push({ title: 'Ownership Status', dataIndex: 'ownership_status', key: 'ownership_status' });
columns.push({ title: 'Ownership Name', dataIndex: 'ownership_name', key: 'ownership_name' });
columns.push({ title: t('ownershipStatus'), dataIndex: 'ownership_status', key: 'ownership_status' });
columns.push({ title: t('ownershipName'), dataIndex: 'ownership_name', key: 'ownership_name' });
return (
<Table
@ -627,13 +627,13 @@ const ResourceWorker = ({ params }) => {
const RenderToolsRequest = () => <Card>
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
<h4 className="capitalize">Tools Request</h4>
<h4 className="capitalize">{t('toolsRequest')}</h4>
<Row>
<Col>
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Search...`} />
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={t('searchToolsRequest')} />
</Col>
<Col>
<Tooltip title="Export Excel">
<Tooltip title={t('exportExcel')}>
<Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcelToolsRequest()}><i className="fa fa-print"></i></Button>
</Tooltip>
</Col>
@ -651,20 +651,20 @@ const ResourceWorker = ({ params }) => {
})}
</Collapse>
:
<div style={{ textAlign: 'center', color: 'red', marginTop: 50, marginBottom: 50 }}>No data available</div>
<div style={{ textAlign: 'center', color: 'red', marginTop: 50, marginBottom: 50 }}>{t('noData')}</div>
}
</CardBody>
</Card>
const RenderToolsDeliver = () => <Card>
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
<h4 className="capitalize">Tools Delivery</h4>
<h4 className="capitalize">{t('toolsDelivery')}</h4>
<Row>
<Col>
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Search...`} />
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={t('searchToolsDelivery')} />
</Col>
<Col>
<Tooltip title="Export Excel">
<Tooltip title={t('exportExcel')}>
<Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcelToolsDeliver()}><i className="fa fa-print"></i></Button>
</Tooltip>
</Col>
@ -682,7 +682,7 @@ const ResourceWorker = ({ params }) => {
})}
</Collapse>
:
<div style={{ textAlign: 'center', color: 'red', marginTop: 50, marginBottom: 50 }}>No data available</div>
<div style={{ textAlign: 'center', color: 'red', marginTop: 50, marginBottom: 50 }}>{t('noData')}</div>
}
</CardBody>
</Card>
@ -707,12 +707,12 @@ const ResourceWorker = ({ params }) => {
showCancel
confirmBtnText="Delete"
confirmBtnBsStyle="danger"
title={`Are you sure?`}
title={t('deleteConfirm')}
onConfirm={onConfirmDelete}
onCancel={() => cancelDelete()}
focusCancelBtn
>
Delete this data
{t('deleteMsg')}
</SweetAlert>
<DialogForm
openDialog={openDialog}
@ -727,13 +727,13 @@ const ResourceWorker = ({ params }) => {
{RenderDialogFormTools}
<Tabs defaultActiveKey="1">
<TabPane tab="Tools Resource Pool" key="1">
<TabPane tab={t('toolsResource')} key="1">
{RenderToolsResource()}
</TabPane>
<TabPane tab="Tools Request" key="2">
<TabPane tab={t('toolsRequest')} key="2">
{RenderToolsRequest()}
</TabPane>
<TabPane tab="Tools Delivery" key="3">
<TabPane tab={t('toolsDelivery')} key="3">
{RenderToolsDeliver()}
</TabPane>
</Tabs>

30
src/views/SimproV2/ResourceWorker/index.js

@ -12,7 +12,7 @@ import { Pagination, Table, Button, Tooltip } from 'antd';
import {
PROYEK_SEARCH, USER_ADD, USER_SEARCH, USER_EDIT, USER_DELETE, ROLE_SEARCH, DIVISI_SEARCH, USER_SHIFT_ADD
} from '../../../const/ApiConst';
import { useTranslation } from 'react-i18next';
const url = "";
const proyek_id = localStorage.getItem('proyek_id');
const role_id = localStorage.getItem('role_id');
@ -52,7 +52,7 @@ const ResourceWorker = ({ params }) => {
const [typeDialog, setTypeDialog] = useState('Save')
const [typeDialogShift, setTypeDialogShift] = useState('Save')
const pageName = params.name;
const { t } = useTranslation();
useEffect(() => {
getRoleList()
getDivisiList()
@ -468,15 +468,15 @@ const ResourceWorker = ({ params }) => {
const RenderTable = useMemo(() => {
const columns = [
{
title: 'Action',
title: t('action'),
dataIndex: '',
key: 'x',
render: (text, record) => <>
<Tooltip title="Edit">
<Tooltip title={t('edit')}>
<Button size="small" type="link" style={{ color: 'orange' }} onClick={() => handleEdit(text)}><i className="fa fa-edit"></i></Button>
</Tooltip>
<Tooltip title="Hapus">
<Tooltip title={t('delete')}>
<Button size="small" type="link" style={{ color: 'red' }} onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
</Tooltip>
<Tooltip title="Set User">
@ -485,12 +485,12 @@ const ResourceWorker = ({ params }) => {
</>,
},
{ title: 'NIK (KTP/ ID Card)', dataIndex: 'ktp_number', key: 'ktp_number' },
{ title: 'Employee Name', dataIndex: 'name', key: 'name' },
{ title: 'Divisi', dataIndex: 'join_second_name', key: 'join_second_name' },
{ title: 'Employee Type', dataIndex: 'employee_type', key: 'employee_type' },
{ title: t('nik'), dataIndex: 'ktp_number', key: 'ktp_number' },
{ title: t('nameHR'), dataIndex: 'name', key: 'name' },
{ title: t('division'), dataIndex: 'join_second_name', key: 'join_second_name' },
{ title: t('employeeType'), dataIndex: 'employee_type', key: 'employee_type' },
{
title: 'Role',
title: t('roles'),
dataIndex: 'join_first_name',
key: 'join_first_name',
render: (text, record) => <>{record.join_first_name}</>
@ -519,12 +519,12 @@ const ResourceWorker = ({ params }) => {
showCancel
confirmBtnText="Delete"
confirmBtnBsStyle="danger"
title={`Are you sure?`}
title={t('deleteConfirm')}
onConfirm={onConfirmDelete}
onCancel={() => cancelDelete()}
focusCancelBtn
>
Delete this data
{t('deleteMsg')}
</SweetAlert>
<DialogForm
openDialog={openDialog}
@ -549,13 +549,13 @@ const ResourceWorker = ({ params }) => {
<h4 className="capitalize">{pageName}</h4>
<Row>
<Col>
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Search...`} />
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={t('searchHR')} />
</Col>
<Col>
<Tooltip title="Add Resource">
<Tooltip title={t('hradd')}>
<Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
</Tooltip>
<Tooltip title="Export Excel">
<Tooltip title={t('exportExcel')}>
<Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button>
</Tooltip>
</Col>

265
src/views/SimproV2/Settings/DialogForm.js

@ -0,0 +1,265 @@
import React, { useEffect, useState } from 'react'
import {
Modal, ModalHeader, ModalBody, ModalFooter,
Button, Form, FormGroup, Label, Input, Col, Row,
Nav, NavItem, NavLink, TabContent, TabPane
} from 'reactstrap';
import { Select, DatePicker } from 'antd';
const { Option } = Select
const DialogForm = ({
openDialog,
closeDialog,
toggleDialog,
typeDialogProp,
roleList,
nameProp,
noHpProp,
idNumberProp,
genderProp,
birthdayPlaceProp,
birthdayDateProp,
addressProp,
emailProp,
userNameProp,
}) => {
const token = window.localStorage.getItem('token');
const [typeDialog, setTypeDialog] = useState(typeDialogProp)
const [userName, setUserName] = useState(userNameProp)
const [name, setName] = useState(nameProp)
const [noHp, setNohp] = useState(noHpProp)
const [gender, setGender] = useState(genderProp)
const [address, setAddres] = useState(addressProp)
const [birthdayPlace, setBirthdayplace] = useState(birthdayPlaceProp)
const [birthdayDate, setBirthdaydate] = useState(birthdayDateProp)
const [idNumber, setIdnumber] = useState(idNumberProp)
const [email, setEmail] = useState(emailProp)
const [password, setPassword] = useState('')
const [oldPassword, setOldPassword] = useState('')
const [newPassword, setNewPassword] = useState('')
const [newPasswordConfirm, setNewPasswordConfirm] = useState('')
const [activeTab, setActiveTab] = useState('tab1')
const handleSave = () => {
let data = '';
if (typeDialog === "Personal") {
data = {
name: name,
phone_number: noHp,
gender: gender,
ktp_number: idNumber,
birth_place: birthdayPlace,
address: address,
};
if (birthdayDate) {
data.birth_date = birthdayDate;
}
closeDialog('profile', data)
} else if (typeDialog === "Account") {
data = {
username: userName,
email: email,
password: newPassword,
}
closeDialog('profile', data)
}
}
const handleCancel = () => {
closeDialog('cancel', 'none')
}
const setupSelectRole = () => {
return (
<>
{roleList.map((val, index) => {
return (
<Option key={index} value={val.id}>{val.name}</Option>
)
})}
</>
)
}
const renderForm = () => {
return (
<Form>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Nama</Label>
<Input type="text" value={name || nameProp} onChange={(e) => setName(e.target.value)} />
</FormGroup>
<FormGroup>
<Label className="capitalize">ID Number</Label>
<Input type="text" value={idNumber || idNumberProp} onChange={(e) => setIdnumber(e.target.value)} />
</FormGroup>
<FormGroup>
<Label className="capitalize">Alamat</Label>
<Input type="text" value={address || addressProp} onChange={(e) => setAddres(e.target.value)} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Nomor Handphone</Label>
<Input type="text" value={noHp || noHpProp} onChange={(e) => setNohp(e.target.value)} />
</FormGroup>
<FormGroup>
<Label className="capitalize">Gender</Label>
<Input type="select" value={gender || genderProp} onChange={(e) => setGender(e.target.value)}>
<option value="">Please select</option>
<option value="Laki-laki">Male</option>
<option value="Perempuan">Female</option>
</Input>
</FormGroup>
<FormGroup>
<Label className="capitalize">Tempat Lahir</Label>
<Input type="text" value={birthdayPlace || birthdayPlaceProp} onChange={(e) => setBirthdayplace(e.target.value)} />
</FormGroup>
<FormGroup>
<Label className="capitalize">Tanggal Lahir</Label>
<DatePicker style={{ width: "100%" }} value={birthdayDate} defaultValue={birthdayDateProp} onChange={(date, dateString) => setBirthdaydate(date)} />
</FormGroup>
</Col>
</Row>
</Form>
)
}
const renderFormAccount = () => {
return (
<Form>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Username</Label>
<Input type="text" value={userName || userNameProp} onChange={(e) => setUserName(e.target.value)} />
</FormGroup>
<FormGroup>
<Label className="capitalize">Email</Label>
<Input type="text" value={email || emailProp} onChange={(e) => setEmail(e.target.value)} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Old password</Label>
<Input type="text" value={oldPassword} onChange={(e) => setOldPassword(e.target.value)} />
</FormGroup>
<FormGroup>
<Label className="capitalize">New password</Label>
<Input type="text" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
</FormGroup>
<FormGroup>
<Label className="capitalize">Confirm new password</Label>
<Input type="text" value={newPasswordConfirm} onChange={(e) => setNewPasswordConfirm(e.target.value)} />
</FormGroup>
</Col>
</Row>
</Form>
)
}
const renderFormSetting = () => {
return (
<Form>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Username</Label>
<Input type="text" value={userName || userNameProp} onChange={(e) => setUserName(e.target.value)} />
</FormGroup>
<FormGroup>
<Label className="capitalize">Email</Label>
<Input type="text" value={email || emailProp} onChange={(e) => setEmail(e.target.value)} />
</FormGroup>
</Col>
</Row>
</Form>
)
}
return (
<>
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
<ModalHeader className="capitalize" toggle={closeDialog}>
Update {typeDialog == "Personal" ? `Personal` : "Account"} Data
</ModalHeader>
<ModalBody>
<Nav tabs>
<NavItem>
<NavLink
onClick={() => {
setActiveTab("tab1");
setTypeDialog("Personal");
}}
active={activeTab === "tab1"}
>
Personal
</NavLink>
</NavItem>
<NavItem>
<NavLink
onClick={() => {
setActiveTab("tab2");
setTypeDialog("Account");
}}
active={activeTab === "tab2"}
>
Account
</NavLink>
</NavItem>
<NavItem>
<NavLink
onClick={() => {
setActiveTab("tab3");
setTypeDialog("Setting");
}}
active={activeTab === "tab3"}
>
Setting
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="tab1">
{renderForm()}
</TabPane>
<TabPane tabId="tab2">
{renderFormAccount()}
</TabPane>
<TabPane tabId="tab3">
{renderFormSetting()}
</TabPane>
</TabContent>
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={() => handleSave()}>{typeDialog == "Profile" ? `Profile` : "Save"}</Button> {' '}
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>
</ModalFooter>
</Modal>
</>
)
}
export default DialogForm;

257
src/views/SimproV2/Settings/index.js

@ -0,0 +1,257 @@
import * as XLSX from 'xlsx';
import React, { useState, useEffect, useMemo } from 'react';
import SweetAlert from 'react-bootstrap-sweetalert';
import axios from "../../../const/interceptorApi"
import { Card, CardBody, CardHeader, Col, Row, Input, Table, Button } from 'reactstrap';
import { NotificationContainer, NotificationManager } from 'react-notifications';
import { Pagination, Tooltip } from 'antd';
import { USER_EDIT, SATUAN_ADD, SATUAN_EDIT, SATUAN_DELETE, SATUAN_SEARCH } from '../../../const/ApiConst';
import profile from '../../../assets/img/profile.png'
import DialogForm from './DialogForm'
import { ROLE_SEARCH, BASE_OSPRO } from '../../../const/ApiConst'
const Setting = ({ params }) => {
const token = localStorage.getItem("token")
const config = {
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${token}`
}
}
const pageName = params.name;
const [openDialog, setOpenDialog] = useState(false)
const [typeDialog, setTypeDialog] = useState('Personal')
const [id, setId] = useState(0)
const [roleList, setRoleList] = useState([])
const [userProfile, setUserprofile] = useState(null)
const [userName, setUserName] = useState("")
const [name, setName] = useState('')
const [noHp, setNohp] = useState("")
const [gender, setGender] = useState("")
const [address, setAddres] = useState("")
const [birthdayPlace, setBirthdayplace] = useState("")
const [birthdayDate, setBirthdaydate] = useState("")
const [idNumber, setIdnumber] = useState("")
const [divisi, setDivisi] = useState("")
const [role, setRole] = useState("")
const [email, setEmail] = useState("")
const [employeeType, setEmployeeType] = useState("")
console.log('divisi', divisi)
console.log('divisi', role)
console.log('divisi', email)
// console.log('userProfile', userProfile)
useEffect(() => {
getDataProfileUser();
getRoleList()
}, [])
useEffect(() => {
if (userProfile && userProfile != {}) {
setId(userProfile?.id)
setUserName(userProfile?.username);
setName(userProfile?.name);
setEmail(userProfile?.email);
setNohp(userProfile?.phone_number);
setAddres(userProfile?.address);
setIdnumber(userProfile?.ktp_number);
setGender(userProfile?.gender);
// setDivisi(userProfile?.divisi.name);
// setRole(userProfile?.role.name);
setBirthdayplace(userProfile?.birth_place);
setBirthdaydate(userProfile?.birth_date);
setEmployeeType(userProfile?.employee_type);
}
}, [userProfile])
const handleOpenDialog = (type) => {
setOpenDialog(true)
setTypeDialog(type)
}
const handleCloseDialog = (type, data) => {
if (type === "profile") {
saveProfile(data);
}
setOpenDialog(false)
}
const saveProfile = async (data) => {
let urlEdit = USER_EDIT(id)
const formData = data
const result = await axios.put(urlEdit, formData, config)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
getDataProfileUser();
NotificationManager.success(`Data resource berhasil diedit`, 'Success!!');
} else {
NotificationManager.error(`Data resource gagal di edit`, `Failed!!`);
}
}
const toggleAddDialog = () => {
setOpenDialog(!openDialog)
}
const getRoleList = async () => {
const formData = {
"paging": { "start": 0, "length": -1 },
"orders": { "columns": ["id"], "ascending": false }
}
const result = await axios
.post(ROLE_SEARCH, formData, config)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code == 200) {
setRoleList(result.data.data);
}
}
const getDataProfileUser = async () => {
const id = localStorage.getItem("user_id")
const url = `${BASE_OSPRO}/api/human-resource/edit/${id}`
const result = await axios
.get(url, config)
.then((res) => res)
.catch((error) => error.response);
console.log("data User :", result);
if (result && result.data && result.data.code == 200) {
let dataRes = result.data.data;
setUserprofile(dataRes);
} else {
NotificationManager.error("Gagal Mengambil Data!!", "Failed");
}
};
return (
<div>
<NotificationContainer />
<DialogForm
openDialog={openDialog}
closeDialog={handleCloseDialog}
toggleDialog={() => toggleAddDialog}
typeDialogProp={typeDialog}
roleList={roleList}
nameProp={name}
noHpProp={noHp}
idNumberProp={idNumber}
genderProp={gender}
divisiProp={divisi}
birthdayPlaceProp={birthdayPlace}
birthdayDateProp={birthdayDate}
addressProp={address}
emailProp={email}
userNameProp={userName}
/>
<Card>
<Row style={{ padding: '10px' }}>
<Col md={11}>
<img src={profile} height="80" width="80" />
</Col>
<Col md={1}>
<Button color="primary" onClick={() => handleOpenDialog('Personal')}>Edit Profil</Button>
</Col>
</Row>
</Card>
<Card>
<Col>
<tr>
<td><b>Profile Setting</b></td>
</tr>
</Col>
<Col>
<tbody>
<tr>
<td><b>Nama &nbsp; </b> </td>
<td> : &nbsp;{name}</td>
</tr>
<tr>
<td><b>Username &nbsp; </b> </td>
<td> : &nbsp;{userName}</td>
</tr>
<tr>
<td><b>Email &nbsp; </b></td>
<td>: &nbsp;{email}</td>
</tr>
<tr>
<td><b>Password &nbsp; </b> &nbsp;</td>
<td> : &nbsp;**********</td>
</tr>
<tr>
<td><b>Nomor Handphone &nbsp; </b></td>
<td>: &nbsp; {noHp}</td>
</tr>
<tr>
<td><b>Alamat &nbsp; </b></td>
<td>: &nbsp; {address}</td>
</tr>
<tr>
<td><b>ID Number &nbsp; </b></td>
<td>: &nbsp; {idNumber}</td>
</tr>
<tr>
<td><b>Gender &nbsp; </b></td>
<td> : &nbsp; {gender}</td>
</tr>
<tr>
<td><b>Divisi &nbsp; </b></td>
<td> : &nbsp; {divisi}</td>
</tr>
<tr>
<td><b>employee &nbsp; </b></td>
<td> : &nbsp; {divisi}</td>
</tr>
<tr>
<td><b>Role &nbsp; </b></td>
<td>: &nbsp; {role}</td>
</tr>
<tr>
<td><b>Tempat Lahir &nbsp;</b></td>
<td>: &nbsp; {birthdayPlace}</td>
</tr>
<tr>
<td><b>Tanggal Lahir &nbsp; </b></td>
<td>: &nbsp; {birthdayDate}</td>
</tr>
</tbody>
<br />
</Col>
</Card>
</div>
)
}
export default Setting;
Loading…
Cancel
Save