diff --git a/src/apps/admin/pages/components/scheduling-data.tsx b/src/apps/admin/pages/components/scheduling-data.tsx index c032f58..eded63c 100644 --- a/src/apps/admin/pages/components/scheduling-data.tsx +++ b/src/apps/admin/pages/components/scheduling-data.tsx @@ -1,27 +1,58 @@ import dayjs from 'dayjs'; import axios from 'axios'; -import { App, Button, Card, Col, Flex, List, notification, Pagination, Row, Tag, Tooltip } from 'antd'; -import { useEffect, useState } from 'react'; -import { makeColorStatus, STATUS_DATA } from '@pos/base'; +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, UnlockOutlined } from '@ant-design/icons'; +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([]); - const [meta, setMeta] = useState(); + const [schedulingMeta, setSchedulingMeta] = useState(); + + const [loadingForm, setLoadingForm] = useState(false); const handleGetData = async (page: number) => { setLoadingTable(true); await axios - .get('v1/data-scheduling', { params: { page: page, limit: 10 } }) + .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; - setMeta(meta); + setSchedulingMeta(meta); setSchedulingData(data); setLoadingTable(false); }) @@ -34,7 +65,7 @@ export default function SchedulingData() { await axios .patch(`v1/data-scheduling/${id}/active`) .then(() => { - handleGetData(meta?.currentPage); + handleGetData(schedulingMeta?.currentPage); }) .catch((err: any) => { notification.error({ @@ -49,7 +80,7 @@ export default function SchedulingData() { await axios .patch(`v1/data-scheduling/${id}/inactive`) .then(() => { - handleGetData(meta?.currentPage); + handleGetData(schedulingMeta?.currentPage); }) .catch((err: any) => { notification.error({ @@ -64,7 +95,7 @@ export default function SchedulingData() { await axios .delete(`v1/data-scheduling/${id}`) .then(() => { - handleGetData(meta?.currentPage); + handleGetData(schedulingMeta?.currentPage); }) .catch((err: any) => { notification.error({ @@ -74,125 +105,326 @@ export default function SchedulingData() { }); }; + 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 (
- -
- ( - - - - - - -
-
{item.name}
-
{`${dayjs(item?.schedule_date_from).format('DD MMM YYYY')} - ${dayjs(item?.schedule_date_to).format('DD MMM YYYY')}`}
-
-
- - - -
{`${item.indexing_key} %`}
- {item.status} -
- -
- - - + + {schedulingData?.length > 0 && ( + + + )} - /> -
- - - +
+ ( + + + + + + +
+
+ {capitalizeEachWord(item.status)} +
+
{item.name}
+
{`${dayjs(item?.schedule_date_from).format('DD MMM YYYY')} - ${dayjs(item?.schedule_date_to).format('DD MMM YYYY')}`}
+
+
+ + + +
{`${item.indexing_key} %`}
+
+ +
+ + +
); }