ikan Uploader :
Directory : /var/www/html/shardahospital.org/shardalms/lms/lms/react/src/pages/tpl/
Upload File : |
| Current File : /var/www/html/shardahospital.org/shardalms/lms/lms/react/src/pages/tpl/BudgetUsers.js |
/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect, useRef } from "react";
import BudgetService from "../../services/BudgetService";
import { AntdPaging, AntdSelect, AntdTag } from "../../components";
import util from "../../util";
import {
Input,
Button,
message,
Modal,
Card,
Table,
Row,
Col,
Checkbox
} from 'antd';
const $ = window.$;
export default function BudgetUsers() {
const [result, setResult] = useState({ data: [], page: {} });
const [loading, setLoading] = useState(false);
const formRef = useRef();
const sdataRef = useRef({ p: 1, ps: 25 });
const cols = [
{ title: "Name", dataIndex: "name" },
{ title: "Email", dataIndex: "email" },
{ title: "Type", dataIndex: "type" },
{ title: "Reporting Type", dataIndex: "reporting_type" },
{
title: 'Status',
dataIndex: 'status',
render: (status) => <div>{status ? (<AntdTag type="success">Active</AntdTag>) : (<AntdTag type="danger">Inactive</AntdTag>)}</div>
},
{
title: '',
dataIndex: 'id',
render: (id, row) => (
<Button
size="small"
onClick={() => {
formRef.current.open({ ...row });
}}
>
{row.budget_channel_ids.length > 0 &&
<i className="fa fa-check-circle mr5 fs11 text-success"></i>
}
Mediums & Channels
</Button>
)
}
];
const list = (p, ps) => {
setLoading(true);
sdataRef.current.p = p || 1;
sdataRef.current.ps = ps || sdataRef.current.ps;
BudgetService.users(sdataRef.current).then(({ data }) => {
data.result.data.forEach((v, i) => { v.key = i; });
setResult(data.result);
}).catch(e => {
message.error(e.message);
}).finally(() => {
setLoading(false);
})
}
useEffect(() => {
list();
return () => { message.destroy() }
}, []);
const wh = $(window).height();
return (
<div>
<Card size="small">
<div className="d-flex align-items-center justify-content-between">
<div>
<SearchForm dataRef={sdataRef} onSearch={list} />
</div>
<div>
</div>
</div>
</Card>
<div className="pt10">
{result.data.length > 0 &&
<div className="mb8">
Showing {result.page.start + 1} - {result.page.start + result.page.total} of {result.page.total_records} records.
</div>
}
<Card size="small" bodyStyle={{ padding: 0 }}>
<Table
size="small"
bordered={false}
dataSource={result.data}
columns={cols}
loading={loading}
scroll={{ y: wh - 270 }}
pagination={false}
className="stripped"
/>
<div className="paging-box">
<AntdPaging
onChange={list}
total={result.page.total_records}
current={result.page.cur_page}
pageSize={sdataRef.current.ps}
showSizeChanger
/>
</div>
</Card>
</div>
<MediumChannelForm
refOb={formRef}
callback={list}
pageno={sdataRef.current.p}
/>
</div>
)
}
const SearchForm = (props) => {
let { dataRef, onSearch } = props;
let [data, setData] = useState({ ...dataRef.current });
const handleChange = (v, k) => {
data[k] = v;
setData({ ...data });
}
useEffect(() => {
dataRef.current = { ...data };
}, [data]);
useEffect(() => {
setData({ ...data, p: dataRef.current.p, ps: dataRef.current.ps });
}, [dataRef.current.p, dataRef.current.ps]);
return (
<form onSubmit={e => e.preventDefault()} autoComplete="off" spellCheck="false">
<div className="d-flex align-items-center">
<div className="w200 mr5">
<AntdSelect
showSearch
allowClear
placeholder="Type (All)"
options={['USER', 'CALLER', 'CALLER_MANAGER', 'CONSULTANT', 'RO', 'CAMPUS', 'CONSULTANT_MANAGER', 'RO_MANAGER', 'CAMPUS_MANAGER']}
value={data.type}
onChange={v => {
handleChange(v, 'type');
}}
/>
</div>
<div className="mr5">
<Input placeholder="Search" allowClear value={data.k} onChange={e => handleChange(e.target.value, 'k')} />
</div>
<div>
<Button type="primary" onClick={() => onSearch()}>Search</Button>
</div>
</div>
</form>
)
}
const MediumChannelForm = (props) => {
let { callback, pageno, refOb } = props;
const [showModal, setShowModal] = useState(false);
const [mediums, setMediums] = useState([]);
const [channels, setChannels] = useState([]);
let [data, setData] = useState({});
/* const handleChange=(v, k)=>{
data[k]=v;
setData({...data});
} */
const handleOk = () => {
message.destroy();
util.showLoader("Saving...");
let fd = { user_id: data.id, budget_channel_ids: data.budget_channel_ids };
BudgetService.assignChannels(fd).then(({ data }) => {
message.success(data.message || 'Saved');
callback(data.id ? pageno : 1);
setShowModal(false);
}).catch(e => {
message.error(e.message);
}).finally(() => {
util.hideLoader();
})
}
const handleCancel = () => {
setShowModal(false);
}
refOb.current = {
...refOb.current,
open: (dtl) => {
setData(dtl ? { ...dtl } : { budget_channel_ids: [] });
setShowModal(true);
}
}
useEffect(() => {
BudgetService.allMediums({ status: 1 }).then(res => { setMediums([...res.data.result.data]) });
BudgetService.allChannels({ status: 1 }).then(res => { setChannels([...res.data.result.data]) });
}, []);
return (
<Modal
title={<div>Assign Medium/Channels - <span className="text-secondary">{data.name}</span></div>}
open={showModal}
okText="Save"
onOk={handleOk}
onCancel={handleCancel}
destroyOnClose
maskClosable={false}
width={800}
style={{ top: 20 }}
>
<div>
{mediums.map((v, i) => (
<div key={i} className="mb15">
<Card
size="small"
type="inner"
title={
<div>
{v.name}
</div>
}
>
<div>
<Row gutter={[16, 16]}>
{channels.filter(c => c.medium_id === v.id).map((c, j) => (
<Col span={8} key={j}>
<Checkbox
checked={data.budget_channel_ids?.includes(c.id)}
onChange={e => {
if (e.target.checked) {
data.budget_channel_ids.push(c.id);
} else {
data.budget_channel_ids.splice(data.budget_channel_ids.indexOf(c.id), 1);
}
setData({ ...data });
}}
>
{c.name}
</Checkbox>
</Col>
))}
</Row>
</div>
</Card>
</div>
))}
</div>
</Modal>
)
}
Kontol Shell Bypass