431 lines
16 KiB
TypeScript
431 lines
16 KiB
TypeScript
import dayjs from 'dayjs';
|
|
import axios from 'axios';
|
|
import { Fragment, useEffect, useState } from 'react';
|
|
import {
|
|
App,
|
|
Badge,
|
|
Button,
|
|
Card,
|
|
Col,
|
|
DatePicker,
|
|
Divider,
|
|
Flex,
|
|
Form,
|
|
Input,
|
|
InputNumber,
|
|
List,
|
|
Modal,
|
|
notification,
|
|
Pagination,
|
|
Row,
|
|
Tag,
|
|
Tooltip,
|
|
} from 'antd';
|
|
import { capitalizeEachWord, makeColorStatus, STATUS_DATA } from '@pos/base';
|
|
|
|
import { DeleteOutlined, EditOutlined, LockOutlined, PlusOutlined, UnlockOutlined } from '@ant-design/icons';
|
|
import { makeColorTextValue } from '../helpers';
|
|
|
|
export default function SchedulingData() {
|
|
const [formModal] = Form.useForm();
|
|
const { modal } = App.useApp();
|
|
const [openModalForm, setOpenModalForm] = useState(false);
|
|
|
|
const [loadingTable, setLoadingTable] = useState(false);
|
|
const [schedulingData, setSchedulingData] = useState<any[]>([]);
|
|
const [schedulingMeta, setSchedulingMeta] = useState<any>();
|
|
|
|
const [loadingForm, setLoadingForm] = useState(false);
|
|
|
|
const handleGetData = async (page: number) => {
|
|
setLoadingTable(true);
|
|
await axios
|
|
.get('v1/data-scheduling', {
|
|
params: {
|
|
page: page,
|
|
limit: 10,
|
|
order_type: 'ASC',
|
|
order_by: 'schedule_date_from',
|
|
schedule_date_from: dayjs().format('YYYY-MM-DD'),
|
|
},
|
|
})
|
|
.then((resp: any) => {
|
|
const data = resp?.data?.data ?? [];
|
|
const meta = resp?.data?.meta;
|
|
setSchedulingMeta(meta);
|
|
setSchedulingData(data);
|
|
setLoadingTable(false);
|
|
})
|
|
.catch(() => {
|
|
setLoadingTable(false);
|
|
});
|
|
};
|
|
|
|
const handleActivate = async (id: string) => {
|
|
await axios
|
|
.patch(`v1/data-scheduling/${id}/active`)
|
|
.then(() => {
|
|
handleGetData(schedulingMeta?.currentPage);
|
|
})
|
|
.catch((err: any) => {
|
|
notification.error({
|
|
message: 'Gagal mengaktifkan data.',
|
|
description:
|
|
err?.message ?? err?.response?.data?.message ?? 'Terjadi kesalahan saat mengaktifkan konfigurasi',
|
|
});
|
|
});
|
|
};
|
|
|
|
const handleDeactivate = async (id: string) => {
|
|
await axios
|
|
.patch(`v1/data-scheduling/${id}/inactive`)
|
|
.then(() => {
|
|
handleGetData(schedulingMeta?.currentPage);
|
|
})
|
|
.catch((err: any) => {
|
|
notification.error({
|
|
message: 'Gagal menonaktifkan data.',
|
|
description:
|
|
err?.message ?? err?.response?.data?.message ?? 'Terjadi kesalahan saat menonaktifkan konfigurasi',
|
|
});
|
|
});
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
await axios
|
|
.delete(`v1/data-scheduling/${id}`)
|
|
.then(() => {
|
|
handleGetData(schedulingMeta?.currentPage);
|
|
})
|
|
.catch((err: any) => {
|
|
notification.error({
|
|
message: 'Gagal menghapus data.',
|
|
description: err?.message ?? err?.response?.data?.message ?? 'Terjadi kesalahan saat menghapus konfigurasi',
|
|
});
|
|
});
|
|
};
|
|
|
|
const handleClickUpdate = async (item: any) => {
|
|
await formModal.setFieldsValue({
|
|
id: item.id,
|
|
name: item.name,
|
|
indexing_key: item.indexing_key,
|
|
schedule_date_from: dayjs(item.schedule_date_from),
|
|
schedule_date_to: dayjs(item.schedule_date_from),
|
|
});
|
|
setOpenModalForm(true);
|
|
};
|
|
|
|
const handleClickCreate = async () => {
|
|
await formModal.resetFields();
|
|
setOpenModalForm(true);
|
|
};
|
|
|
|
const handleCloseModal = async () => {
|
|
await formModal.resetFields();
|
|
setOpenModalForm(false);
|
|
};
|
|
|
|
const handleSubmitModal = async () => {
|
|
const formValues = await formModal.validateFields();
|
|
const dataID = formValues.id;
|
|
|
|
const payload = {
|
|
name: formValues.name,
|
|
indexing_key: formValues.indexing_key,
|
|
schedule_date_from: formValues.schedule_date_from && dayjs(formValues.schedule_date_from).format('YYYY-MM-DD'),
|
|
schedule_date_to: formValues.schedule_date_from && dayjs(formValues.schedule_date_from).format('YYYY-MM-DD'),
|
|
};
|
|
|
|
if (dataID) handleEdit(dataID, payload);
|
|
else handleCreate(payload);
|
|
};
|
|
|
|
const handleCreate = async (payload: any) => {
|
|
setLoadingForm(true);
|
|
await axios
|
|
.post(`v1/data-scheduling`, payload)
|
|
.then(async () => {
|
|
await handleGetData(1);
|
|
await handleCloseModal();
|
|
})
|
|
.catch((err: any) => {
|
|
notification.error({
|
|
message: 'Gagal menyimpan data.',
|
|
description:
|
|
err?.message ?? err?.response?.data?.message ?? 'Terjadi kesalahan saat mengaktifkan konfigurasi',
|
|
});
|
|
})
|
|
.finally(() => {
|
|
setLoadingForm(false);
|
|
});
|
|
};
|
|
|
|
const handleEdit = async (id: string, payload: any) => {
|
|
setLoadingForm(true);
|
|
await axios
|
|
.put(`v1/data-scheduling/${id}`, payload)
|
|
.then(async () => {
|
|
await handleGetData(schedulingMeta?.currentPage);
|
|
await handleCloseModal();
|
|
})
|
|
.catch((err: any) => {
|
|
notification.error({
|
|
message: 'Gagal menyimpan data.',
|
|
description:
|
|
err?.message ?? err?.response?.data?.message ?? 'Terjadi kesalahan saat mengaktifkan konfigurasi',
|
|
});
|
|
})
|
|
.finally(() => {
|
|
setLoadingForm(false);
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
handleGetData(1);
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<Modal
|
|
open={openModalForm}
|
|
onCancel={handleCloseModal}
|
|
cancelButtonProps={{ disabled: loadingForm }}
|
|
okText="Simpan"
|
|
okButtonProps={{ loading: loadingForm }}
|
|
onOk={handleSubmitModal}
|
|
title="FORM KONFIGURASI PENJADWALAN"
|
|
>
|
|
<Form form={formModal} layout="vertical">
|
|
<Form.Item name={['id']} noStyle></Form.Item>
|
|
<Row gutter={[12, 1]}>
|
|
<Col xs={24} sm={12} span={12}>
|
|
<Form.Item name={['name']} label="Label" rules={[{ required: true, message: 'Label harus diisi!' }]}>
|
|
<Input placeholder="Input label" size="large" />
|
|
</Form.Item>
|
|
</Col>
|
|
<Col xs={24} sm={12} span={12}>
|
|
<Form.Item
|
|
name={['indexing_key']}
|
|
label="Total Data"
|
|
rules={[
|
|
{ required: true, message: 'Total data harus diisi!' },
|
|
{ type: 'number', max: 100, message: 'Total data maksimal 100%!' },
|
|
{
|
|
validator(_, value) {
|
|
if (value <= 0) return Promise.reject(new Error('Total data harus lebih dari 0!'));
|
|
return Promise.resolve();
|
|
},
|
|
},
|
|
]}
|
|
>
|
|
<InputNumber style={{ width: '100%' }} addonAfter="%" placeholder="Input value" size="large" />
|
|
</Form.Item>
|
|
</Col>
|
|
<Col xs={24} sm={12} span={12}>
|
|
<Form.Item shouldUpdate noStyle>
|
|
{({ getFieldsValue }) => {
|
|
const values = getFieldsValue();
|
|
const endDate = values?.schedule_date_to;
|
|
|
|
return (
|
|
<Form.Item
|
|
label="Start Date"
|
|
name={'schedule_date_from'}
|
|
rules={[{ required: true, message: 'Start date harus diisi!' }]}
|
|
>
|
|
<DatePicker
|
|
showNow={false}
|
|
style={{ width: '100%' }}
|
|
size="large"
|
|
disabledDate={(date) => {
|
|
if (endDate)
|
|
return (
|
|
(!date.isBefore(endDate) && !date.isSame(endDate)) ||
|
|
date.isBefore(dayjs().subtract(1, 'day'))
|
|
);
|
|
else return date.isBefore(dayjs().subtract(1, 'day'));
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
);
|
|
}}
|
|
</Form.Item>
|
|
</Col>
|
|
<Col xs={24} sm={12} span={12}>
|
|
<Form.Item shouldUpdate noStyle>
|
|
{({ getFieldsValue }) => {
|
|
const values = getFieldsValue();
|
|
const startDate = values?.schedule_date_from;
|
|
|
|
return (
|
|
<Form.Item
|
|
label="End Date"
|
|
name={'schedule_date_to'}
|
|
rules={[{ required: true, message: 'End date harus diisi!' }]}
|
|
>
|
|
<DatePicker
|
|
showNow={false}
|
|
style={{ width: '100%' }}
|
|
size="large"
|
|
disabledDate={(date) => {
|
|
if (startDate) return !date.isAfter(startDate) && !date.isSame(startDate);
|
|
else return date.isBefore(dayjs().subtract(1, 'day'));
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
);
|
|
}}
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
</Form>
|
|
</Modal>
|
|
<div>
|
|
<Flex justify="end">
|
|
<Button type="primary" onClick={handleClickCreate} icon={<PlusOutlined />}>
|
|
Tambah Jadwal
|
|
</Button>
|
|
</Flex>
|
|
{schedulingData?.length > 0 && (
|
|
<Fragment>
|
|
<Divider style={{ margin: 10 }} />
|
|
</Fragment>
|
|
)}
|
|
<div style={{ marginBottom: 10 }}></div>
|
|
<List
|
|
bordered={!schedulingData || schedulingData?.length <= 0}
|
|
style={{ maxHeight: 500, overflow: 'auto' }}
|
|
dataSource={schedulingData}
|
|
loading={loadingTable}
|
|
renderItem={(item) => (
|
|
<List.Item key={item.id} style={{ borderBlockEnd: 'none', padding: 5 }}>
|
|
<Card className="w-full">
|
|
<Flex className="w-full" justify="space-between">
|
|
<Row className="w-full" gutter={[4, 8]}>
|
|
<Col xs={18} sm={12} span={12}>
|
|
<Flex align="center" className="h-full" gap={4}>
|
|
<div>
|
|
<div className="text-xs mb-2" style={{ color: makeColorStatus(item.status) }}>
|
|
{capitalizeEachWord(item.status)}
|
|
</div>
|
|
<div className="text-[#00000099]">{item.name}</div>
|
|
<div className="text-[#00000099]">{`${dayjs(item?.schedule_date_from).format('DD MMM YYYY')} - ${dayjs(item?.schedule_date_to).format('DD MMM YYYY')}`}</div>
|
|
</div>
|
|
</Flex>
|
|
</Col>
|
|
<Col xs={18} sm={12} span={12}>
|
|
<Flex align="center" className="h-full" gap={8}>
|
|
<div
|
|
className={`text-xl font-bold ${makeColorTextValue(item.indexing_key)}`}
|
|
>{`${item.indexing_key} %`}</div>
|
|
</Flex>
|
|
</Col>
|
|
</Row>
|
|
<Flex align="center" gap={4}>
|
|
<Tooltip title="Edit" trigger={'hover'} placement="bottom">
|
|
<Button icon={<EditOutlined />} onClick={() => handleClickUpdate(item)} />
|
|
</Tooltip>
|
|
|
|
{item.status === STATUS_DATA.ACTIVE && (
|
|
<Tooltip title="Inactive" trigger={'hover'} placement="bottom">
|
|
<Button
|
|
icon={<LockOutlined />}
|
|
onClick={() => {
|
|
modal.confirm({
|
|
icon: null,
|
|
cancelText: 'Batal',
|
|
title: 'Nonaktifkan Konfigurasi Penjadwalan?',
|
|
cancelButtonProps: { style: { width: 100 } },
|
|
okButtonProps: { style: { width: 100 } },
|
|
content: (
|
|
<div>
|
|
<div className="font-semibold italic">{`Perhatian: `}</div>
|
|
<div className="italic">{`Konfigurasi yang dinonaktifkan tidak akan diikutsertakan dalam proses penjadwalan hingga Anda mengaktifkannya kembali. Ini berguna untuk menjeda proses penjadwalan tertentu tanpa menghapus konfigurasi.`}</div>
|
|
</div>
|
|
),
|
|
onOk: () => handleDeactivate(item.id),
|
|
});
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
)}
|
|
|
|
{item.status === STATUS_DATA.INACTIVE && (
|
|
<Tooltip title="Active" trigger={'hover'} placement="bottom">
|
|
<Button
|
|
icon={<UnlockOutlined />}
|
|
onClick={() => {
|
|
modal.confirm({
|
|
icon: null,
|
|
cancelText: 'Batal',
|
|
title: 'Aktifkan Konfigurasi Penjadwalan?',
|
|
cancelButtonProps: { style: { width: 100 } },
|
|
okButtonProps: { style: { width: 100 } },
|
|
content: (
|
|
<div>
|
|
<div className="font-semibold italic">{`Perhatian: `}</div>
|
|
<div className="italic">{`Dengan mengaktifkannya, konfigurasi ini akan kembali diperhitungkan dan digunakan dalam proses penjadwalan selanjutnya, sesuai dengan kriteria yang telah ditetapkan.`}</div>
|
|
</div>
|
|
),
|
|
onOk: () => handleActivate(item.id),
|
|
});
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
)}
|
|
|
|
<Tooltip title="Delete" trigger={'hover'} placement="bottom">
|
|
<Button
|
|
icon={<DeleteOutlined />}
|
|
onClick={() => {
|
|
modal.confirm({
|
|
icon: null,
|
|
cancelText: 'Batal',
|
|
title: 'Hapus Konfigurasi Penjadwalan?',
|
|
cancelButtonProps: { style: { width: 100 } },
|
|
okButtonProps: { style: { width: 100 } },
|
|
content: (
|
|
<div>
|
|
<div className="font-semibold italic">{`Perhatian: `}</div>
|
|
<div className="italic">{`Tindakan ini bersifat permanen. Konfigurasi yang terhapus tidak akan lagi disertakan dalam perhitungan atau proses penjadwalan di masa mendatang dan tidak dapat dipulihkan.`}</div>
|
|
</div>
|
|
),
|
|
onOk: () => handleDelete(item.id),
|
|
});
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
</Flex>
|
|
</Flex>
|
|
</Card>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
<div style={{ marginBottom: 10 }}></div>
|
|
{schedulingData?.length > 0 && (
|
|
<Fragment>
|
|
<Divider style={{}} />
|
|
<Flex justify="end" className="mt-2">
|
|
<Pagination
|
|
current={schedulingMeta?.currentPage}
|
|
total={schedulingMeta?.totalItems}
|
|
pageSize={10}
|
|
onChange={async (page) => {
|
|
await handleGetData(page);
|
|
}}
|
|
/>
|
|
</Flex>
|
|
</Fragment>
|
|
)}
|
|
<div className="mt-2">
|
|
<div className="italic font-semibold">Informasi Penting: </div>
|
|
<div className="italic text-[#00000066]">
|
|
{`Daftar konfigurasi penjadwalan diurutkan otomatis berdasarkan Waktu Mulai. Konfigurasi baru akan muncul sesuai urutan tanggalnya, dan jadwal yang sudah terlewat tidak akan ditampilkan.`}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|