From bee7e15733dd32181f279c4e6aa55e3b7a560562 Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Fri, 21 Feb 2025 12:22:44 +0100 Subject: [PATCH] - saving progress; --- src/assets/scss/components/appForm.scss | 6 + src/assets/scss/components/misc.scss | 7 + .../DataTableAsync/DataTableAsync.js | 114 +++++++--- .../FormField/components/FileSelect/index.js | 97 +++++++++ src/components/FormField/index.js | 4 +- .../components/BandoEditFormStep3/index.js | 6 +- src/pages/BandoFormsEdit/index.js | 8 +- .../components/LatestBandiTableAsync/index.js | 194 ++++++++++++++++++ src/pages/Dashboard/index.js | 4 +- src/tempData.js | 20 ++ 10 files changed, 426 insertions(+), 34 deletions(-) create mode 100644 src/components/FormField/components/FileSelect/index.js create mode 100644 src/pages/Dashboard/components/LatestBandiTableAsync/index.js diff --git a/src/assets/scss/components/appForm.scss b/src/assets/scss/components/appForm.scss index dad056e..608b54e 100644 --- a/src/assets/scss/components/appForm.scss +++ b/src/assets/scss/components/appForm.scss @@ -109,6 +109,12 @@ background-color: var(--table-border-color) } } + + &.fileselect { + .fileselectInner { + flex-direction: row; + } + } } .appForm__field--required.appForm__field--required { diff --git a/src/assets/scss/components/misc.scss b/src/assets/scss/components/misc.scss index 030a350..03bd8f8 100644 --- a/src/assets/scss/components/misc.scss +++ b/src/assets/scss/components/misc.scss @@ -167,6 +167,13 @@ } } +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { + color: white; +} +.p-listbox .p-listbox-list .p-listbox-item.p-highlight { + color: white; +} + .p-inputnumber-input[readonly] { background-color: #e1e1e1; } diff --git a/src/components/DataTableAsync/DataTableAsync.js b/src/components/DataTableAsync/DataTableAsync.js index 030471d..8e6bb34 100644 --- a/src/components/DataTableAsync/DataTableAsync.js +++ b/src/components/DataTableAsync/DataTableAsync.js @@ -1,41 +1,101 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { __ } from '@wordpress/i18n'; +import translationStrings from '../../translationStringsForComponents'; + // components import { DataTable } from 'primereact/datatable'; import { Column } from 'primereact/column'; +import { Button } from 'primereact/button'; +import BandoService from '../../service/bando-service'; -import translationStrings from '../../translationStringsForComponents'; +const DataTableAsync = () => { + const [localAsyncRequest, setLocalAsyncRequest] = useState(false); + const [items, setItems] = useState(null); + const [totalRecordsNum, setTotalRecordsNum] = useState(0); + const [lazyState, setLazyState] = useState({ + first: 0, + rows: 5, + page: 1, + sortField: null, + sortOrder: null, + filters: { + name: { value: '', matchMode: 'contains' } + } + }); -const DataTableAsync = ({ - items = [], - totalRecordsNum = 0, - isLoading = false, - onPageChangeFn = () => { - } - }) => { + const getPaginationQuery = () => { + return { + "globalFilters": { + "page": 0, + "limit": lazyState.rows, + "sortBy": { + "columnName": "ID", + "sortDesc": true + } + } + } + } + + const onPage = (event) => { + setLazyState(event); + }; + + const onSort = (event) => { + setLazyState(event); + }; + + const onFilter = (event) => { + event['first'] = 0; + setLazyState(event); + }; + + const getCallback = (data) => { + if (data.status === 'SUCCESS') { + const { body, totalRecords, currentPage, totalPages, pageSize } = data.data; + setTotalRecordsNum(totalRecords); + const newItems = body.filter(o => o.status === 'PUBLISH'); + setItems(getFormattedBandiData(newItems)); + } + setLocalAsyncRequest(false); + } + + const errGetCallbacks = (data) => { + setLocalAsyncRequest(false); + } + + const getFormattedBandiData = (data) => { + return [...(data || [])].map((d) => { + d.start_date = new Date(d.dates[0]); + d.end_date = new Date(d.dates[1]); + + return d; + }); + }; + + useEffect(() => { + console.log(lazyState) + }, [lazyState]); + + useEffect(() => { + if (!localAsyncRequest) { + setLocalAsyncRequest(true); + const paginationQuery = getPaginationQuery(); + BandoService.getBandiPaginated(paginationQuery, getCallback, errGetCallbacks); + } + }, []); return (
- setFilters(e.filters)}> - +
diff --git a/src/components/FormField/components/FileSelect/index.js b/src/components/FormField/components/FileSelect/index.js new file mode 100644 index 0000000..1a2a7a2 --- /dev/null +++ b/src/components/FormField/components/FileSelect/index.js @@ -0,0 +1,97 @@ +import React, { useEffect, useState } from 'react'; +import { classNames } from 'primereact/utils'; + +// components +import { ListBox } from 'primereact/listbox'; +import { Button } from 'primereact/button'; +import { __ } from '@wordpress/i18n'; + +const FileSelect = ({ + fieldName, + label, + register, + errors, + defaultValue, + config = {}, + infoText = null, + disabled = false, + + }) => { + const [stateFieldData, setStateFieldData] = useState([]); + const [selectedUnconfirmed, setSelectedUnconfirmed] = useState(null); + const cities = [ + { + label: 'Germany', + code: 'DE', + items: [ + { label: 'Berlin', value: 'berlin' }, + { label: 'Frankfurt', value: 'frankfurt' }, + { label: 'Hamburg', value: 'hamburg' }, + { label: 'Munich', value: 'munich' } + ] + }, + { + label: 'USA', + code: 'US', + items: [ + { label: 'Chicago', value: 'chicago' }, + { label: 'Los Angeles', value: 'los Angeles' }, + { label: 'New York', value: 'New York' }, + { label: 'San Francisco', value: 'San Francisco' } + ] + }, + { + label: 'Japan', + code: 'JP', + items: [ + { label: 'Kyoto', value: 'Kyoto' }, + { label: 'Osaka', value: 'Osaka' }, + { label: 'Tokyo', value: 'Tokyo' }, + { label: 'Yokohama', value: 'Yokohama' } + ] + } + ]; + + useEffect(() => { + console.log('selectedUnconfirmed', selectedUnconfirmed) + }, [selectedUnconfirmed]); + + useEffect(() => { + setStateFieldData(defaultValue); + register(fieldName, config) + }, []); + + useEffect(() => { + setStateFieldData(defaultValue); + }, [defaultValue]); + + return ( + <> + +
+ setSelectedUnconfirmed(e.value)} + options={cities} + optionLabel="label" + optionGroupLabel="label" + optionGroupChildren="items" + className="w-full md:w-14rem" + listStyle={{ maxHeight: '130px' }} /> +
+
+
+ {infoText ? {infoText} : null} + ) +} + +export default FileSelect; \ No newline at end of file diff --git a/src/components/FormField/index.js b/src/components/FormField/index.js index 6a60658..e9d7fbd 100644 --- a/src/components/FormField/index.js +++ b/src/components/FormField/index.js @@ -18,6 +18,7 @@ import Fileupload from './components/Fileupload'; import Table from './components/Table'; import PasswordField from './components/PasswordField'; import CriteriaTable from './components/CriteriaTable'; +import FileSelect from './components/FileSelect'; const FormField = (props) => { const fields = { @@ -35,7 +36,8 @@ const FormField = (props) => { checkboxes: Checkboxes, table: Table, criteria_table: CriteriaTable, - password: PasswordField + password: PasswordField, + fileselect: FileSelect, } const Comp = !isNil(fields[props.type]) ? fields[props.type] : null; diff --git a/src/pages/BandoEdit/components/BandoEditFormStep3/index.js b/src/pages/BandoEdit/components/BandoEditFormStep3/index.js index b67b93f..e9db65c 100644 --- a/src/pages/BandoEdit/components/BandoEditFormStep3/index.js +++ b/src/pages/BandoEdit/components/BandoEditFormStep3/index.js @@ -78,7 +78,11 @@ const BandoEditFormStep3 = forwardRef(function () { const getElementItemsCallback = (data) => { if (data.status === 'SUCCESS') { //storeSet.main.elementItems(elementItems.sort((a, b) => a.sortOrder - b.sortOrder)); - storeSet.main.elementItems(data.data.sort((a, b) => a.sortOrder - b.sortOrder)); + storeSet.main.elementItems( + data.data + .filter(o => !['fileselect'].includes(o.name)) + .sort((a, b) => a.sortOrder - b.sortOrder) + ); } storeSet.main.unsetAsyncRequest(); } diff --git a/src/pages/BandoFormsEdit/index.js b/src/pages/BandoFormsEdit/index.js index e739c89..2c55a2b 100644 --- a/src/pages/BandoFormsEdit/index.js +++ b/src/pages/BandoFormsEdit/index.js @@ -24,7 +24,7 @@ import set404FromErrorResponse from '../../helpers/set404FromErrorResponse'; import BandoService from '../../service/bando-service'; // TODO temp data -//import { elementItems } from '../../tempData'; +import { elementItems } from '../../tempData'; const BandoFormsEdit = () => { const { id, formId } = useParams(); @@ -215,10 +215,10 @@ const BandoFormsEdit = () => { const getElementItemsCallback = (data) => { if (data.status === 'SUCCESS') { - //storeSet.main.elementItems(elementItems.sort((a, b) => a.sortOrder - b.sortOrder)); - storeSet.main.elementItems(data.data + storeSet.main.elementItems(elementItems.sort((a, b) => a.sortOrder - b.sortOrder)); + /*storeSet.main.elementItems(data.data .filter(o => o.id !== 22) - .sort((a, b) => a.sortOrder - b.sortOrder)); + .sort((a, b) => a.sortOrder - b.sortOrder));*/ } storeSet.main.unsetAsyncRequest(); } diff --git a/src/pages/Dashboard/components/LatestBandiTableAsync/index.js b/src/pages/Dashboard/components/LatestBandiTableAsync/index.js new file mode 100644 index 0000000..71421ff --- /dev/null +++ b/src/pages/Dashboard/components/LatestBandiTableAsync/index.js @@ -0,0 +1,194 @@ +import React, { useEffect, useState, useCallback } from 'react'; +import { __ } from '@wordpress/i18n'; + +import translationStrings from '../../../../translationStringsForComponents'; + +// api +import BandoService from '../../../../service/bando-service'; + +// components +import { DataTable } from 'primereact/datatable'; +import { Column } from 'primereact/column'; +import { Link } from 'react-router-dom'; +import { Button } from 'primereact/button'; +import ProperBandoLabel from '../../../../components/ProperBandoLabel'; +import { Dropdown } from 'primereact/dropdown'; +import { Tag } from 'primereact/tag'; +import getBandoLabel from '../../../../helpers/getBandoLabel'; +import getBandoSeverity from '../../../../helpers/getBandoSeverity'; + +const LatestBandiTableAsync = () => { + 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: '', matchMode: 'contains' }, + status: { value: '', matchMode: 'contains' } + } + }); + const statuses = ['PUBLISH']; + + const getPaginationQuery = useCallback(() => { + let sortBy = { + "columnName": "ID", + "sortDesc": true + }; + + if (lazyState.sortField) { + sortBy = { + "columnName": lazyState.sortField, + "sortDesc": lazyState.sortOrder === -1 + } + } + return { + "globalFilters": { + "page": lazyState.page ? lazyState.page + 1 : 1, + "limit": lazyState.rows, + sortBy, + status: statuses + } + } + }, [lazyState]); + + const onPage = (event) => { + console.log('onPage', event); + setLazyState(event); + }; + + const onSort = (event) => { + console.log('onSort', event); + setLazyState(event); + }; + + const onFilter = useCallback((event) => { + console.log('onFilter', event); + event['first'] = 0; + setLazyState(event); + }, [lazyState]); + + const getCallback = (data) => { + if (data.status === 'SUCCESS') { + const { body, totalRecords, currentPage, totalPages, pageSize } = data.data; + setTotalRecordsNum(totalRecords); + //const newItems = body.filter(o => o.status === 'PUBLISH'); + setItems(getFormattedBandiData(body)); + } + setLocalAsyncRequest(false); + } + + const errGetCallbacks = (data) => { + setLocalAsyncRequest(false); + } + + const getFormattedBandiData = (data) => { + return [...(data || [])].map((d) => { + d.start_date = new Date(d.dates[0]); + d.end_date = new Date(d.dates[1]); + + return d; + }); + }; + + const actionsBodyTemplate = (rowData) => { + return +