wahyun
1 year ago
4 changed files with 298 additions and 276 deletions
@ -1,99 +1,99 @@ |
|||||||
import React, { useEffect, useState } from 'react' |
import React, { useEffect, useState } from 'react' |
||||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
||||||
import { Button, Form, FormGroup, Label, Input, Col, Row } from 'reactstrap'; |
import { Button, Form, FormGroup, Label, Input, Col, Row } from 'reactstrap'; |
||||||
import { Select } from 'antd'; |
import { Select } from 'antd'; |
||||||
import moment from 'moment'; |
import moment from 'moment'; |
||||||
import 'antd/dist/antd.css'; |
import 'antd/dist/antd.css'; |
||||||
|
|
||||||
const { Option } = Select |
const { Option } = Select |
||||||
|
|
||||||
const DialogForm = ({openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, dataMenu}) => { |
const DialogForm = ({openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, dataMenu}) => { |
||||||
const [id, setId] = useState(0) |
const [id, setId] = useState(0) |
||||||
const [name, setName] = useState('') |
const [name, setName] = useState('') |
||||||
const [descripton, setDescription] = useState('') |
const [descripton, setDescription] = useState('') |
||||||
const [status, setStatus] = useState('') |
const [status, setStatus] = useState('') |
||||||
|
|
||||||
|
|
||||||
useEffect(()=> { |
useEffect(()=> { |
||||||
if(typeDialog==="Edit"){ |
if(typeDialog==="Edit"){ |
||||||
console.log("data edit", dataEdit) |
console.log("data edit", dataEdit) |
||||||
setId(dataEdit.id) |
setId(dataEdit.id) |
||||||
setName(dataEdit.nama) |
setName(dataEdit.nama) |
||||||
setDescription(dataEdit.keterangan) |
setDescription(dataEdit.keterangan) |
||||||
setStatus(dataEdit.status) |
setStatus(dataEdit.status) |
||||||
}else{ |
}else{ |
||||||
setId(0) |
setId(0) |
||||||
setName('') |
setName('') |
||||||
setDescription('') |
setDescription('') |
||||||
setStatus('') |
setStatus('') |
||||||
} |
} |
||||||
},[dataEdit,openDialog]) |
},[dataEdit,openDialog]) |
||||||
|
|
||||||
const handleSave = () => { |
const handleSave = () => { |
||||||
let data = ''; |
let data = ''; |
||||||
if(typeDialog==="Save"){ |
if(typeDialog==="Save"){ |
||||||
data = { |
data = { |
||||||
nama:name, |
nama:name, |
||||||
keterangan:descripton, |
keterangan:descripton, |
||||||
status |
status |
||||||
} |
} |
||||||
|
|
||||||
closeDialog('save', data); |
closeDialog('save', data); |
||||||
}else{ |
}else{ |
||||||
data = { |
data = { |
||||||
id, |
id, |
||||||
nama:name, |
nama:name, |
||||||
keterangan:descripton, |
keterangan:descripton, |
||||||
status |
status |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
closeDialog('edit', data); |
closeDialog('edit', data); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
const handleCancel = () => { |
const handleCancel = () => { |
||||||
closeDialog('cancel', 'none') |
closeDialog('cancel', 'none') |
||||||
setId(0) |
setId(0) |
||||||
setName('') |
setName('') |
||||||
setDescription('') |
setDescription('') |
||||||
setStatus('') |
setStatus('') |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
const renderForm = () => { |
const renderForm = () => { |
||||||
return( |
return( |
||||||
<Form> |
<Form> |
||||||
<FormGroup> |
<FormGroup> |
||||||
<Label className="capitalize">Nama Alert</Label> |
<Label className="capitalize">Nama Alert</Label> |
||||||
<Input type="text" value={name} onChange={(e)=> setName(e.target.value)} placeholder={`Waspang tidak sesuai target..`}/> |
<Input type="text" value={name} onChange={(e)=> setName(e.target.value)} placeholder={`Waspang tidak sesuai target..`}/> |
||||||
</FormGroup> |
</FormGroup> |
||||||
<FormGroup> |
<FormGroup> |
||||||
<Label className="capitalize">Keterangan</Label> |
<Label className="capitalize">Keterangan</Label> |
||||||
<Input type="text" value={descripton} onChange={(e)=> setDescription(e.target.value)} placeholder={`Rencana vs actual tidak sesuai..`} /> |
<Input type="text" value={descripton} onChange={(e)=> setDescription(e.target.value)} placeholder={`Rencana vs actual tidak sesuai..`} /> |
||||||
</FormGroup> |
</FormGroup> |
||||||
<FormGroup> |
<FormGroup> |
||||||
<Label className="capitalize">Status</Label> |
<Label className="capitalize">Status</Label> |
||||||
<Input type="text" value={status} onChange={(e)=> setStatus(e.target.value)} placeholder={`Warning..`} /> |
<Input type="text" value={status} onChange={(e)=> setStatus(e.target.value)} placeholder={`Warning..`} /> |
||||||
</FormGroup> |
</FormGroup> |
||||||
</Form> |
</Form> |
||||||
) |
) |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
return ( |
return ( |
||||||
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
||||||
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog=="Save" ? `Tambah` : "Edit"} Config Alert</ModalHeader> |
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog=="Save" ? `Tambah` : "Edit"} Config Alert</ModalHeader> |
||||||
<ModalBody> |
<ModalBody> |
||||||
{renderForm()} |
{renderForm()} |
||||||
</ModalBody> |
</ModalBody> |
||||||
<ModalFooter> |
<ModalFooter> |
||||||
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} |
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} |
||||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button> |
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button> |
||||||
</ModalFooter> |
</ModalFooter> |
||||||
</Modal> |
</Modal> |
||||||
) |
) |
||||||
|
|
||||||
} |
} |
||||||
|
|
||||||
export default DialogForm; |
export default DialogForm; |
||||||
|
@ -1,172 +1,172 @@ |
|||||||
import Bell from '@iconify/icons-ion/notifications-outline'; |
import Bell from '@iconify/icons-ion/notifications-outline'; |
||||||
import BellOff from '@iconify/icons-ion/notifications-off-outline'; |
import BellOff from '@iconify/icons-ion/notifications-off-outline'; |
||||||
import React, { useState, useEffect } from 'react'; |
import React, { useState, useEffect } from 'react'; |
||||||
import axios from 'axios'; |
import axios from 'axios'; |
||||||
import { CALERTUSER_SEARCH,CONFIGALERT_SEARCH,CALERTUSER_DELETE, CALERTUSER_ADD } from '../../../const/ApiConst.js'; |
import { CALERTUSER_SEARCH,CONFIGALERT_SEARCH,CALERTUSER_DELETE, CALERTUSER_ADD } from '../../../const/ApiConst.js'; |
||||||
import { Card as ACard,Row, Col, Switch } from 'antd'; |
import { Card as ACard,Row, Col, Switch } from 'antd'; |
||||||
import { Card, CardBody, CardHeader, Input } from 'reactstrap'; |
import { Card, CardBody, CardHeader, Input } from 'reactstrap'; |
||||||
import { Icon } from '@iconify/react'; |
import { Icon } from '@iconify/react'; |
||||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||||
|
|
||||||
const token = window.localStorage.getItem('token'); |
const token = window.localStorage.getItem('token'); |
||||||
const userID = window.localStorage.getItem('user_id'); |
const userID = window.localStorage.getItem('user_id'); |
||||||
|
|
||||||
const Index = ({params}) => { |
const Index = ({params}) => { |
||||||
|
|
||||||
const [alertUser, setAlertUser] = useState([]) |
const [alertUser, setAlertUser] = useState([]) |
||||||
const [checked, setChecked] = useState({}) |
const [checked, setChecked] = useState({}) |
||||||
const [dataTable, setDatatable] = useState([]) |
const [dataTable, setDatatable] = useState([]) |
||||||
const [onSetSwitch, setOnSetSwitch] = useState(false) |
const [onSetSwitch, setOnSetSwitch] = useState(false) |
||||||
const pageName = params.name; |
const pageName = params.name; |
||||||
|
|
||||||
const config = { |
const config = { |
||||||
headers: |
headers: |
||||||
{ |
{ |
||||||
Authorization : `Bearer ${token}`, |
Authorization : `Bearer ${token}`, |
||||||
"Content-type" : `application/json` |
"Content-type" : `application/json` |
||||||
} |
} |
||||||
}; |
}; |
||||||
|
|
||||||
useEffect(()=> { |
useEffect(()=> { |
||||||
getDataConfigAlert(); |
getDataConfigAlert(); |
||||||
},[]) |
},[]) |
||||||
|
|
||||||
useEffect(() => { |
useEffect(() => { |
||||||
getDataConfigAlertUser(); |
getDataConfigAlertUser(); |
||||||
},[dataTable]) |
},[dataTable]) |
||||||
|
|
||||||
const getDataConfigAlert = async () => { |
const getDataConfigAlert = async () => { |
||||||
const payload = { |
const payload = { |
||||||
"paging": {"start": 0, "length": -1}, |
"paging": {"start": 0, "length": -1}, |
||||||
"columns": [ |
"columns": [ |
||||||
{"name": "nama", "logic_operator": "ilike", "value": "", "operator": "AND"} |
{"name": "nama", "logic_operator": "ilike", "value": "", "operator": "AND"} |
||||||
], |
], |
||||||
"joins": [], |
"joins": [], |
||||||
"orders": {"columns": ["id"], "ascending": false} |
"orders": {"columns": ["id"], "ascending": false} |
||||||
} |
} |
||||||
|
|
||||||
const result = await axios |
const result = await axios |
||||||
.post(CONFIGALERT_SEARCH, payload, config) |
.post(CONFIGALERT_SEARCH, payload, config) |
||||||
.then(res => res) |
.then(res => res) |
||||||
.catch((error) => error.response); |
.catch((error) => error.response); |
||||||
|
|
||||||
if(result && result.data && result.data.code == 200){ |
if(result && result.data && result.data.code == 200){ |
||||||
let resData = result.data.data |
let resData = result.data.data |
||||||
let checkedAlert = {} |
let checkedAlert = {} |
||||||
resData.map((val, index) => { |
resData.map((val, index) => { |
||||||
checkedAlert[val.id] = false |
checkedAlert[val.id] = false |
||||||
}); |
}); |
||||||
setChecked(checkedAlert); |
setChecked(checkedAlert); |
||||||
setDatatable(resData); |
setDatatable(resData); |
||||||
}else{ |
}else{ |
||||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
const getDataConfigAlertUser = async () => { |
const getDataConfigAlertUser = async () => { |
||||||
const payload = { |
const payload = { |
||||||
"paging": {"start": 0, "length": -1}, |
"paging": {"start": 0, "length": -1}, |
||||||
"columns": [ |
"columns": [ |
||||||
{"name": "user_id", "logic_operator": "=", "value": localStorage.getItem('user_id'), "operator": "AND"} |
{"name": "user_id", "logic_operator": "=", "value": localStorage.getItem('user_id'), "operator": "AND"} |
||||||
], |
], |
||||||
"joins": [], |
"joins": [], |
||||||
"orders": {"columns": ["id"], "ascending": false} |
"orders": {"columns": ["id"], "ascending": false} |
||||||
} |
} |
||||||
|
|
||||||
const result = await axios |
const result = await axios |
||||||
.post(CALERTUSER_SEARCH, payload, config) |
.post(CALERTUSER_SEARCH, payload, config) |
||||||
.then(res => res) |
.then(res => res) |
||||||
.catch((error) => error.response); |
.catch((error) => error.response); |
||||||
|
|
||||||
if(result && result.data && result.data.code == 200){ |
if(result && result.data && result.data.code == 200){ |
||||||
let resData = result.data.data |
let resData = result.data.data |
||||||
let configAlert = []; |
let configAlert = []; |
||||||
resData.map((val, index) => { |
resData.map((val, index) => { |
||||||
configAlert.push(val.config_alert_id); |
configAlert.push(val.config_alert_id); |
||||||
let indexRes = dataTable.findIndex(x => x.id === val.config_alert_id); |
let indexRes = dataTable.findIndex(x => x.id === val.config_alert_id); |
||||||
if(indexRes >= 0){ |
if(indexRes >= 0){ |
||||||
let id = dataTable[indexRes].id; |
let id = dataTable[indexRes].id; |
||||||
let tempChecked = checked; |
let tempChecked = checked; |
||||||
tempChecked[id] = true; |
tempChecked[id] = true; |
||||||
setChecked(tempChecked); |
setChecked(tempChecked); |
||||||
} |
} |
||||||
}); |
}); |
||||||
window.localStorage.setItem('userConfigAlert', configAlert.join()); |
window.localStorage.setItem('userConfigAlert', configAlert.join()); |
||||||
setOnSetSwitch(false) |
setOnSetSwitch(false) |
||||||
setAlertUser(result.data.data); |
setAlertUser(result.data.data); |
||||||
}else{ |
}else{ |
||||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
const onChange = (checked, id) => { |
const onChange = (checked, id) => { |
||||||
setOnSetSwitch(true) |
setOnSetSwitch(true) |
||||||
if(checked){ |
if(checked){ |
||||||
addConfigAlertUser(id); |
addConfigAlertUser(id); |
||||||
}else{ |
}else{ |
||||||
setDeleteConfigAlertUser(id) |
setDeleteConfigAlertUser(id) |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
const addConfigAlertUser = async (id) => { |
const addConfigAlertUser = async (id) => { |
||||||
const formData = { |
const formData = { |
||||||
"user_id":parseInt(localStorage.getItem('user_id')), |
"user_id":parseInt(localStorage.getItem('user_id')), |
||||||
"config_alert_id":id |
"config_alert_id":id |
||||||
} |
} |
||||||
|
|
||||||
const result = await axios.post(CALERTUSER_ADD, formData, config) |
const result = await axios.post(CALERTUSER_ADD, formData, config) |
||||||
.then(res => res) |
.then(res => res) |
||||||
.catch((error) => error.response); |
.catch((error) => error.response); |
||||||
|
|
||||||
if(result && result.data && result.data.code===200){ |
if(result && result.data && result.data.code===200){ |
||||||
getDataConfigAlertUser(); |
getDataConfigAlertUser(); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
const setDeleteConfigAlertUser = async (id) => { |
const setDeleteConfigAlertUser = async (id) => { |
||||||
let indexCek = alertUser.findIndex(x => x.user_id === parseInt(localStorage.getItem('user_id')) && x.config_alert_id === id); |
let indexCek = alertUser.findIndex(x => x.user_id === parseInt(localStorage.getItem('user_id')) && x.config_alert_id === id); |
||||||
if(indexCek >= 0){ |
if(indexCek >= 0){ |
||||||
let idAlert = alertUser[indexCek].id |
let idAlert = alertUser[indexCek].id |
||||||
deleteConfigAlertUser(idAlert) |
deleteConfigAlertUser(idAlert) |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
const deleteConfigAlertUser = async (id) => { |
const deleteConfigAlertUser = async (id) => { |
||||||
const url = CALERTUSER_DELETE(id) |
const url = CALERTUSER_DELETE(id) |
||||||
const result = await axios.delete(url, config) |
const result = await axios.delete(url, config) |
||||||
.then(res => res) |
.then(res => res) |
||||||
.catch((error) => error.response); |
.catch((error) => error.response); |
||||||
if (result && result.data && result.data.code === 200) { |
if (result && result.data && result.data.code === 200) { |
||||||
getDataConfigAlert(); |
getDataConfigAlert(); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
return ( |
return ( |
||||||
<div> |
<div> |
||||||
<NotificationContainer /> |
<NotificationContainer /> |
||||||
<Card> |
<Card> |
||||||
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
||||||
<h4 className="capitalize">{pageName}</h4> |
<h4 className="capitalize">{pageName}</h4> |
||||||
</CardHeader> |
</CardHeader> |
||||||
<CardBody> |
<CardBody> |
||||||
<Row gutter={16}> |
<Row gutter={16}> |
||||||
{dataTable.map((val, index) => ( |
{dataTable.map((val, index) => ( |
||||||
<Col key={index} md={{span:5,offset:1}} xs={{span:11,offset:1}}> |
<Col key={index} md={{span:5,offset:1}} xs={{span:11,offset:1}}> |
||||||
<ACard style={{height:"100%"}} actions={[ |
<ACard style={{height:"100%"}} actions={[ |
||||||
<Switch checked={checked[val.id] ? true : false} onChange={(checked) => onChange(checked, val.id)} disabled={onSetSwitch} />, |
<Switch checked={checked[val.id] ? true : false} onChange={(checked) => onChange(checked, val.id)} disabled={onSetSwitch} />, |
||||||
]}> |
]}> |
||||||
<div style={{height:'100%',width:'100%',display:'flex',justifyContent:'center', alignItems:'center', textAlign:'center', flexDirection:'column'}}> |
<div style={{height:'100%',width:'100%',display:'flex',justifyContent:'center', alignItems:'center', textAlign:'center', flexDirection:'column'}}> |
||||||
<i style={{marginBottom:"25px"}}><Icon icon={checked[val.id] ? Bell : BellOff} color="black" width="100" height="100" /></i> |
<i style={{marginBottom:"25px"}}><Icon icon={checked[val.id] ? Bell : BellOff} color="black" width="100" height="100" /></i> |
||||||
<p style={{marginBottom:"0"}}>{val.nama}</p> |
<p style={{marginBottom:"0"}}>{val.nama}</p> |
||||||
</div> |
</div> |
||||||
</ACard> |
</ACard> |
||||||
</Col> |
</Col> |
||||||
))} |
))} |
||||||
</Row> |
</Row> |
||||||
</CardBody> |
</CardBody> |
||||||
</Card> |
</Card> |
||||||
</div> |
</div> |
||||||
) |
) |
||||||
} |
} |
||||||
|
|
||||||
export default Index; |
export default Index; |
||||||
|
Loading…
Reference in new issue