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/BudgetChannels.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,
InputNumber,
Button,
message,
Modal,
Card,
Table,
} from 'antd';
import {
ExclamationCircleOutlined,
} from '@ant-design/icons';
const { confirm } = Modal;
export default function BudgetChannels(props) {
const { medium_id } = props;
const [result, setResult] = useState({ data: [], page: {} });
const [loading, setLoading] = useState(false);
const formRef = useRef();
const sdataRef = useRef({ p: 1, ps: 25, medium_id: medium_id || 0 });
const cols = [
{ title: "Channel Name", dataIndex: "name" },
{
title: 'Display Order',
dataIndex: 'disp_odr',
},
{
title: 'Status',
dataIndex: 'status',
render: (status) => <div>{status ? (<AntdTag type="success">Active</AntdTag>) : (<AntdTag type="danger">Inactive</AntdTag>)}</div>
},
{
title: '',
dataIndex: 'id',
width: "86px",
render: (id, row) => (
<div className="text-center">
<Button.Group size="small">
<Button type="default" onClick={() => formRef.current.open(row)}>
<i className="fa fa-edit"></i>
</Button>
<Button type="default" onClick={() => deleteRecord(id)}>
<i className="fa fa-times-circle text-danger"></i>
</Button>
</Button.Group>
</div>
)
}
];
const list = (p, ps) => {
setLoading(true);
sdataRef.current.p = p || 1;
sdataRef.current.ps = ps || sdataRef.current.ps;
BudgetService.channels(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);
})
}
const deleteRecord = (id) => {
message.destroy();
confirm({
title: `Are you sure to delete this channel?`,
icon: <ExclamationCircleOutlined />,
content: '',
okText: 'Yes',
okType: 'danger',
cancelText: 'No',
onOk() {
util.showLoader();
BudgetService.deleteChannel(id).then(({ data }) => {
message.success(data.message || 'Deleted');
list();
}).catch(e => {
message.error(e.message);
}).finally(() => {
util.hideLoader();
})
},
onCancel() {
},
})
}
useEffect(() => {
list();
return () => { message.destroy() }
}, []);
return (
<div>
<Card size="small">
<div className="d-flex align-items-center justify-content-between">
<div>
<SearchForm dataRef={sdataRef} onSearch={list} />
</div>
<div>
<Button type="primary" onClick={() => formRef.current.open()}>Add New</Button>
</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-310}}
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>
<AddForm
refOb={formRef}
callback={list}
pageno={sdataRef.current.p}
medium_id={medium_id}
/>
</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="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 AddForm = (props) => {
let { callback, pageno, refOb, medium_id } = props;
const [showModal, setShowModal] = useState(false);
let [data, setData] = useState({});
const handleChange = (v, k) => {
data[k] = v;
setData({ ...data });
}
const handleOk = () => {
message.destroy();
util.showLoader("Saving...");
BudgetService.saveChannel(data).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 } : { medium_id, status: '1' });
setShowModal(true);
}
}
return (
<Modal
title={`${data.id ? 'Edit' : 'Add'} Channel`}
open={showModal}
okText="Save"
onOk={handleOk}
onCancel={handleCancel}
destroyOnClose
maskClosable={false}
width={400}
>
<form onSubmit={e => { e.preventDefault(); handleOk() }} autoComplete="off" spellCheck="false">
<div className="form-group">
<label className="req">Channel Name</label>
<Input value={data.name || ''} onChange={e => handleChange(e.target.value, 'name')} />
</div>
<div className="form-group">
<label>Display Order</label>
<InputNumber value={data.disp_odr || ''} onChange={v => handleChange(v, 'disp_odr')} style={{ width: '100%' }} />
</div>
<div className="form-group">
<label className="req">Status</label>
<div>
<AntdSelect
options={[{ value: '1', label: "Active" }, { value: '0', label: "Inactive" }]}
value={data.status}
onChange={v => { handleChange(v, 'status') }}
/>
</div>
</div>
</form>
</Modal>
)
}
Kontol Shell Bypass