ikan Uploader :
Directory : /var/www/html/shardahospital.org/shardalms/lms/lms/react/src/pages/superbot/
Upload File : |
| Current File : /var/www/html/shardahospital.org/shardalms/lms/lms/react/src/pages/superbot/SuperbotCampaigns.jsx |
/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useState, useRef } from "react";
import AuthService from "../../services/AuthService";
import Service from "../../services/Service";
import LeadsFilterForm from "./LeadsFilterForm";
import { AntdSelect } from "../../components";
import AddedLeads from "./AddedLeads";
import SuperbotRespondedLeads from "./SuperbotRespondedLeads";
import util from "../../util";
import {
Result,
Row,
Col,
Button,
Input,
Card,
Table,
Tabs,
message,
Modal,
Drawer,
Typography,
} from "antd";
import {
ExclamationCircleOutlined,
PlusOutlined,
CloseOutlined,
CheckCircleOutlined,
} from "@ant-design/icons";
const { Text } = Typography;
const $ = window.$;
function CampaignsList({ refOb, openEditForm, masters }) {
const [loading, setLoading] = useState(false);
const [result, setResult] = useState([]);
const [paging, setPaging] = useState({ p: 1, ps: 10 });
const [rowDtl, setRowDtl] = useState(null);
const filterParamsRef = useRef({});
const wh = $(window).height();
const cols = [
{ title: "Campaign Name", dataIndex: "name" },
{ title: "Supuerbot Campaign ID", dataIndex: "superbot_campaign_id" },
{
title: "No. of Leads",
dataIndex: "leads_count",
render: (leads_count, row) => (
<div
className="link w80 text-center"
style={{ border: "1px solid #1890ff", borderRadius: "16px" }}
onClick={() => {
setRowDtl(row);
}}
>
{leads_count}
</div>
),
},
{
title: "Status",
dataIndex: "status",
render: (status) => (
<div>
{status === "Draft" ? (
<Text type="warning" strong>
{status}
</Text>
) : (
<Text type="success" strong>
<CheckCircleOutlined /> {status}
</Text>
)}
</div>
),
},
{
title: "Created",
dataIndex: "created",
width: 100,
render: (dt) => <div>{util.getDate(dt, "DD MMM YYYY")}</div>,
},
{
title: "",
dataIndex: "id",
width: "86px",
render: (id, row) => (
<div className="text-center">
<Button.Group size="small">
<Button onClick={() => openEditForm(row)}>
<i className="fa fa-edit"></i>
</Button>
<Button
onClick={() => deleteRecord(id)}
disabled={row.status === "Published"}
>
<i className="fa fa-times-circle text-danger"></i>
</Button>
</Button.Group>
</div>
),
show: true,
},
];
const closeDrawer = () => {
setRowDtl(null);
getList(filterParamsRef.current, paging.p);
};
const getList = (params = {}, p = 1) => {
filterParamsRef.current = params;
setLoading(true);
Service.superbotCampaigns(params)
.then(({ data }) => {
data.result.forEach((v) => {
v.key = v.id;
});
setResult(data.result);
setPaging({ ...paging, p });
})
.catch((e) => {
message.error(e.message);
})
.finally(() => {
setLoading(false);
});
};
const deleteRecord = (id) => {
message.destroy();
const fn = () => {
setLoading(true);
Service.deleteSuperbotCampaign(id)
.then(({ data }) => {
message.success(data.message || "Deleted");
getList();
})
.catch((e) => {
message.error(e.message);
})
.finally(() => {
setLoading(false);
});
};
Modal.confirm({
title: `Do you want to delete this campaign?`,
icon: <ExclamationCircleOutlined />,
content: "",
okText: "Yes",
okType: "danger",
cancelText: "No",
onOk() {
fn();
},
onCancel() {},
});
};
refOb.current = {
getList,
};
useEffect(() => {
getList();
}, []);
return (
<div className="def-pag-custom">
<Table
size="small"
dataSource={result}
columns={cols}
loading={loading}
scroll={{ y: wh - 220 }}
pagination={{
showTotal: (total, range) =>
`${range[0]}-${range[1]} of ${total} items`,
showSizeChanger: true,
pageSize: paging.ps,
current: paging.p,
onChange: (p, ps) => {
setPaging({ p, ps });
},
}}
/>
<Drawer
title={
<div>
Sent Leads To Superbot -{" "}
<span className="text-secondary">{rowDtl?.name}</span>
</div>
}
open={rowDtl !== null}
placement="right"
width="95%"
destroyOnClose
closable={false}
onClose={closeDrawer}
maskClosable={false}
extra={
<div className="cpointer" onClick={closeDrawer}>
<CloseOutlined />
</div>
}
>
<AddedLeads campaignDtl={rowDtl} masters={masters} />
</Drawer>
</div>
);
}
function ComingLeadsDataForm({ masters }) {
const [saving, setSaving] = useState(false);
const [leads_filter, set_leads_filter] = useState(null);
const [superbot_campaign_id, set_superbot_campaign_id] = useState(null);
const [status, setStatus] = useState("Draft");
const getData = () => {
Service.getSuperbotComingLeadsFilterData().then(({ data }) => {
set_leads_filter(data.result.leads_filter);
set_superbot_campaign_id(data.result.superbot_campaign_id);
setStatus(data.result.status);
});
};
const save = () => {
const fd = { superbot_campaign_id, filters: leads_filter, status };
setSaving(true);
Service.saveSuperbotComingLeadsFilterData(fd)
.then(({ data }) => {
message.success(data.message || "Saved");
})
.catch((e) => {
message.error(e.message);
})
.finally(() => {
setSaving(false);
});
};
useEffect(() => {
getData();
}, []);
return (
<Card title="Data Filter For Coming/Live Leads">
{superbot_campaign_id !== null && (
<div
className="d-flex"
style={{ gap: "16px", flexDirection: "column" }}
>
<LeadsFilterForm
masters={masters}
data={leads_filter}
onChange={(newData) => set_leads_filter(newData)}
forComingLeads
/>
<Row gutter={[16, 16]}>
<Col span="24">
<div className="legend-lbl">
<label>Superbot Campaign ID</label>
<Input
value={superbot_campaign_id}
onChange={(e) => set_superbot_campaign_id(e.target.value)}
/>
</div>
</Col>
<Col span="24">
<div className="legend-lbl">
<label>Status</label>
<AntdSelect
allowClear
options={["Draft", "Published"]}
value={status}
onChange={(v) => setStatus(v)}
/>
</div>
</Col>
</Row>
<div>
<Button
type="primary"
className="w150"
onClick={save}
loading={saving}
>
Save
</Button>
</div>
</div>
)}
</Card>
);
}
function FormModal({ refOb, callback }) {
const [showModal, setShowModal] = useState(false);
const [saving, setSaving] = useState(false);
const [fd, setFd] = useState({});
const handleChange = (v, k) => {
setFd({ ...fd, [k]: v });
};
const handleOk = () => {
message.destroy();
setSaving(true);
Service.saveSuperbotCampaigns(fd)
.then(({ data }) => {
message.success(data.message || "Saved");
callback();
setShowModal(false);
})
.catch((e) => {
message.error(e.message);
})
.finally(() => {
setSaving(false);
});
};
const handleCancel = () => {
setShowModal(false);
};
refOb.current = {
open: (dtl) => {
const d = dtl ? { ...dtl } : { status: "Draft" };
setFd(d);
setShowModal(true);
},
};
return (
<Modal
title={`${fd.id ? "Edit" : "Create"} Superbot Campaign`}
open={showModal}
okText="Save"
onOk={handleOk}
okButtonProps={{ loading: saving }}
onCancel={handleCancel}
cancelText="Close"
destroyOnClose
maskClosable={false}
width={400}
//style={{ top: 20 }}
>
<Row gutter={[16, 16]}>
<Col span="24">
<label className="req">Campaign Name</label>
<Input
value={fd.name || ""}
onChange={(e) => handleChange(e.target.value, "name")}
/>
</Col>
<Col span="24">
<label className="req">Superbot Campaign ID</label>
<Input
value={fd.superbot_campaign_id || ""}
onChange={(e) =>
handleChange(e.target.value, "superbot_campaign_id")
}
/>
</Col>
</Row>
</Modal>
);
}
export default function SuperbotCampaigns() {
const modules = AuthService.getModules();
const [masters, setMasters] = useState({
states: [],
programs: [],
utm_groups: [],
superbot_dispositions: [],
});
const [filterFd, setFilterFd] = useState({ k: "" });
const listRef = useRef({});
const formRef = useRef({});
useEffect(() => {
Service.mastersForLeads().then(({ data }) => setMasters(data.result));
}, []);
if (!modules.superbot_campaign) {
return (
<Result
status="403"
title="403"
subTitle="Sorry, you are not authorized to access this page."
/>
);
}
return (
<div>
<div className="page-heading">Superbot Campaigns</div>
<Tabs
items={[
{
label: "Campaigns",
key: "1",
children: (
<div
className="d-flex"
style={{ gap: "16px", flexDirection: "column" }}
>
<Card size="small" bodyStyle={{ padding: 0 }}>
<div className="above-tbl-filter-pad">
<Row align="middle" justify="space-between">
<Row gutter={[5, 5]}>
<Col>
<Input
placeholder="Enter text..."
allowClear
value={filterFd.k}
onChange={(e) =>
setFilterFd({ ...filterFd, k: e.target.value })
}
/>
</Col>
<Col className="w150">
<AntdSelect
showSearch
allowClear
placeholder="Status (All)"
options={["Draft", "Published"]}
value={filterFd.status}
onChange={(v) => {
setFilterFd({ ...filterFd, status: v });
}}
/>
</Col>
<Col>
<Button
type="primary"
onClick={() => listRef.current.getList(filterFd)}
>
Search
</Button>
</Col>
</Row>
<div>
<Button
type="primary"
onClick={() => formRef.current.open()}
>
<PlusOutlined /> Create New
</Button>
</div>
</Row>
</div>
<div className="bdr-top">
<CampaignsList
refOb={listRef}
openEditForm={(dtl) => formRef.current.open(dtl)}
masters={masters}
/>
</div>
</Card>
<ComingLeadsDataForm masters={masters} />
</div>
),
},
{
label: "Superbot Responded Leads",
key: "2",
children: <SuperbotRespondedLeads masters={masters} />,
},
]}
/>
<FormModal refOb={formRef} callback={() => listRef.current.getList()} />
</div>
);
}
Kontol Shell Bypass