Created
September 27, 2024 14:44
-
-
Save bogordesaincom/447e664bb064dbbed2b392de0127475c to your computer and use it in GitHub Desktop.
Pub
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import CashierCartTable from '@/components/Pos/CashierCartTable'; | |
| import CashierTableProduct from '@/components/Pos/CashierTableProduct'; | |
| import LayoutApp from '@/layouts/LayoutApp'; | |
| import { CashierService } from '@/services/cashier-service'; | |
| import { Grid } from '@mantine/core'; | |
| import { createColumnHelper } from '@tanstack/react-table'; | |
| import dayjs from 'dayjs'; | |
| import { useEffect, useState } from 'react'; | |
| import { useTranslation } from 'react-i18next'; | |
| const CashierIndex = () => { | |
| const { t } = useTranslation(); | |
| const modelService = new CashierService(); | |
| const columnHelper = createColumnHelper(); | |
| const [loadtable, setLoadTable] = useState(true); | |
| const [database, setDatabase] = useState([]); | |
| const [paginate, setPaginate] = useState([]); | |
| const [filter, setFilter] = useState(''); | |
| const [category, setCategory] = useState(''); | |
| const [sort, setSort] = useState(''); | |
| const [page, setPage] = useState(0); | |
| const [pageSize, setPageSize] = useState('12'); | |
| //oke pisan | |
| const getRequestParams = (filter, category, sort, page, pageSize) => { | |
| let params = {}; | |
| if (filter) { | |
| params['search'] = filter; | |
| setPage(0); | |
| } | |
| if (category) { | |
| params['category_id'] = category; | |
| } | |
| if (sort) { | |
| params['sort_by'] = sort.sort_by; | |
| params['order_by'] = sort.order_by; | |
| } | |
| if (page) { | |
| params['page'] = page || 0; | |
| } | |
| if (pageSize) { | |
| params['size'] = parseInt(pageSize); | |
| } | |
| return params; | |
| }; | |
| const serviceStack = async () => { | |
| const params = getRequestParams(filter, category, sort, page, pageSize); | |
| const { status, data } = await modelService | |
| .getModelsProducts(params) | |
| .then((res) => res) | |
| .finally(() => setLoadTable(false)) | |
| .catch((err) => err.response); | |
| if (status == 401) { | |
| window.location.pathname = '/dashboard'; | |
| return null; | |
| } | |
| const productMap = data?.data.map((item) => { | |
| if (item.items?.length > 0) { | |
| const findType = item.items.find((sub) => sub.product.type == 'extra'); | |
| if (findType) { | |
| return { | |
| id: item.id, | |
| sku: item.sku, | |
| type: item.category.code, | |
| price_sell: item.price_sell, | |
| name: item.name, | |
| is_stock: item.category.is_stock, | |
| lc_qty: Number(findType.qty), | |
| is_promo: true, | |
| }; | |
| } | |
| } else { | |
| if (item.category.code == 'promo') { | |
| return { | |
| id: item.id, | |
| sku: item.product?.sku, | |
| type: item.category.code, | |
| price_sell: item.price_sell, | |
| name: `${item.name}`, | |
| is_stock: item.category.is_stock, | |
| lc_qty: null, | |
| is_promo: true, | |
| }; | |
| } else { | |
| return { | |
| id: item.id, | |
| sku: item.sku, | |
| type: item.category.code, | |
| price_sell: item.price_sell, | |
| name: item.name, | |
| is_stock: item.category.is_stock, | |
| lc_qty: null, | |
| is_promo: false, | |
| }; | |
| } | |
| } | |
| }); | |
| setPaginate(data?.pagination); | |
| setDatabase(productMap); | |
| }; | |
| useEffect(() => { | |
| serviceStack(); | |
| }, [filter, category, sort, page, pageSize]); | |
| const columns = [ | |
| columnHelper.accessor('id', { | |
| header: () => t('general:table.id'), | |
| cell: (row) => row.renderValue(), | |
| footer: (row) => row.column.id, | |
| enableResizing: true, | |
| size: 400, | |
| maxSize: 480, | |
| minSize: 400, | |
| }), | |
| columnHelper.accessor('name', { | |
| header: () => t('general:table.name'), | |
| cell: (row) => row.renderValue(), | |
| footer: (row) => row.column.name, | |
| enableResizing: true, | |
| size: 280, | |
| maxSize: 400, | |
| minSize: 300, | |
| }), | |
| columnHelper.accessor('sku', { | |
| header: () => t('general:table.sku'), | |
| cell: (row) => row.renderValue(), | |
| footer: (row) => row.column.sku, | |
| enableResizing: true, | |
| size: 280, | |
| maxSize: 400, | |
| minSize: 300, | |
| }), | |
| columnHelper.accessor('price_sell', { | |
| header: () => t('general:table.price_sell'), | |
| cell: (row) => row.renderValue(), | |
| footer: (row) => row.column.price_sell, | |
| enableResizing: true, | |
| size: 280, | |
| maxSize: 400, | |
| minSize: 300, | |
| }), | |
| columnHelper.accessor('created_at', { | |
| header: () => t('general:table.created'), | |
| cell: (row) => dayjs(row.renderValue()).format('DD-MM-YYYY'), | |
| footer: (row) => row.column.created_at, | |
| sortingFn: 'datetime', | |
| enableResizing: true, | |
| size: 280, | |
| maxSize: 400, | |
| minSize: 300, | |
| }), | |
| ]; | |
| const handleChangePage = (value) => { | |
| setPage(value); | |
| }; | |
| const handleChangeSort = (value) => { | |
| setSort(value); | |
| }; | |
| const handleFilters = (value) => { | |
| setFilter(value); | |
| }; | |
| const handleChangeCategory = (value) => { | |
| setCategory(value); | |
| setPage(0); | |
| }; | |
| return ( | |
| <LayoutApp> | |
| <Grid> | |
| <Grid.Col span={{ xl: 7, lg: 7, sm: 7, xs: 12 }}> | |
| <CashierTableProduct | |
| // permission={permissionList} | |
| // permissions={permissions} | |
| data={database} | |
| // createDialog={createDialogModal} | |
| pagination={paginate} | |
| columns={columns} | |
| load={loadtable} | |
| pageSizing={pageSize} | |
| onFilters={(e) => handleFilters(e)} | |
| onCategory={(e) => handleChangeCategory(e)} | |
| onchangePage={(e) => handleChangePage(e)} | |
| onChangeSort={(e) => handleChangeSort(e)} | |
| handleChangePerPageSize={(e) => setPageSize(e)} | |
| /> | |
| </Grid.Col> | |
| <Grid.Col span={{ xl: 5, lg: 5, sm: 5, xs: 12 }}> | |
| <CashierCartTable /> | |
| </Grid.Col> | |
| </Grid> | |
| </LayoutApp> | |
| ); | |
| }; | |
| export default CashierIndex; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment