diff --git a/src/helpers/getQueryParamsForPaginatedEndpoint.js b/src/helpers/getQueryParamsForPaginatedEndpoint.js index 155210b..54f7eac 100644 --- a/src/helpers/getQueryParamsForPaginatedEndpoint.js +++ b/src/helpers/getQueryParamsForPaginatedEndpoint.js @@ -1,9 +1,9 @@ import { isEmpty, pathOr } from 'ramda'; import formatDateString from './formatDateString'; -const getQueryParamsForPaginatedEndpoint = (lazyState, statuses) => { +const getQueryParamsForPaginatedEndpoint = (lazyState, statuses, sortByCol = 'applicationId') => { let sortBy = { - columnName: 'applicationId', + columnName: sortByCol, sortDesc: true }; @@ -13,6 +13,7 @@ const getQueryParamsForPaginatedEndpoint = (lazyState, statuses) => { sortDesc: lazyState.sortOrder === -1 } } + return { globalFilters: { page: lazyState.page ? lazyState.page + 1 : 1, @@ -22,9 +23,10 @@ const getQueryParamsForPaginatedEndpoint = (lazyState, statuses) => { status: statuses, filters: Object.keys(lazyState.filters).reduce((acc, cur) => { const value = pathOr('', ['filters', cur, 'value'], lazyState); + const matchMode = pathOr('', ['filters', cur, 'matchMode'], lazyState); if (!isEmpty(value)) { acc[cur] = typeof value.getMonth === 'function' - ? formatDateString(value) + ? {value: formatDateString(value), matchMode} : lazyState.filters[cur]; } return acc; diff --git a/src/pages/Bandi/components/AllBandiTableAsync/index.js b/src/pages/Bandi/components/AllBandiTableAsync/index.js new file mode 100644 index 0000000..1b90675 --- /dev/null +++ b/src/pages/Bandi/components/AllBandiTableAsync/index.js @@ -0,0 +1,181 @@ +import React, { useEffect, useState, useCallback } from 'react'; +import { __ } from '@wordpress/i18n'; +import { Link } from 'react-router-dom'; + +import translationStrings from '../../../../translationStringsForComponents'; + +// api +import BandoService from '../../../../service/bando-service'; + +// tools +import getTimeParsedFromString from '../../../../helpers/getTimeParsedFromString'; +import getTimeFromISOstring from '../../../../helpers/getTimeFromISOstring'; +import getFormattedDateString from '../../../../helpers/getFormattedDateString'; +import getBandoLabel from '../../../../helpers/getBandoLabel'; +import getBandoSeverity from '../../../../helpers/getBandoSeverity'; +import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint'; + +// components +import { DataTable } from 'primereact/datatable'; +import { Column } from 'primereact/column'; +import { Button } from 'primereact/button'; +import ProperBandoLabel from '../../../../components/ProperBandoLabel'; +import { Dropdown } from 'primereact/dropdown'; +import { Tag } from 'primereact/tag'; +import { Calendar } from 'primereact/calendar'; + +const AllBandiTableAsync = () => { + const [localAsyncRequest, setLocalAsyncRequest] = useState(false); + const [items, setItems] = useState(null); + const [totalRecordsNum, setTotalRecordsNum] = useState(0); + const [lazyState, setLazyState] = useState({ + first: 0, + rows: 5, + page: 0, + sortField: null, + sortOrder: null, + filters: { + name: { value: null, matchMode: 'contains' }, + startDate: { value: null, matchMode: 'date_is' }, + endDate: { value: null, matchMode: 'date_is' }, + status: { value: null, matchMode: 'equals' } + } + }); + const statuses = []; + + const getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'id'), [lazyState]); + + const onPage = (event) => { + setLazyState(event); + }; + + const onSort = (event) => { + event['first'] = 0; + event['page'] = 0; + setLazyState(event); + }; + + const onFilter = useCallback((event) => { + event['first'] = 0; + event['page'] = 0; + setLazyState(event); + }, [lazyState]); + + const getCallback = (resp) => { + if (resp.status === 'SUCCESS') { + const { body, totalRecords, + //currentPage, totalPages, pageSize + } = resp.data; + setTotalRecordsNum(totalRecords); + setItems(getFormattedData(body)); + } + setLocalAsyncRequest(false); + } + + const errGetCallbacks = () => { + setLocalAsyncRequest(false); + } + + const getFormattedData = (data) => { + return [...(data || [])].map((d) => { + d.startDate = new Date(d.dates[0]); + d.endDate = new Date(d.dates[1]); + + return d; + }); + }; + + const actionsBodyTemplate = (rowData) => { + return + + +