diff --git a/lfr/pkg/assets/tpl/cx/liferay-portal/workspaces/liferay-sample-workspace/client-extensions/liferay-sample-fds-cell-renderer/package.json b/lfr/pkg/assets/tpl/cx/liferay-portal/workspaces/liferay-sample-workspace/client-extensions/liferay-sample-fds-cell-renderer/package.json index 24d9ade..3956409 100644 --- a/lfr/pkg/assets/tpl/cx/liferay-portal/workspaces/liferay-sample-workspace/client-extensions/liferay-sample-fds-cell-renderer/package.json +++ b/lfr/pkg/assets/tpl/cx/liferay-portal/workspaces/liferay-sample-workspace/client-extensions/liferay-sample-fds-cell-renderer/package.json @@ -1,6 +1,6 @@ { "dependencies": { - "@liferay/js-api": "0.4.0-pre.0", + "@liferay/js-api": "0.5.1-pre.0", "serve": "^14.2.0" }, "description": "Liferay Sample Frontend Data Set Cell Renderer", diff --git a/lfr/pkg/assets/tpl/cx/liferay-portal/workspaces/liferay-sample-workspace/client-extensions/liferay-sample-fds-filter/package.json b/lfr/pkg/assets/tpl/cx/liferay-portal/workspaces/liferay-sample-workspace/client-extensions/liferay-sample-fds-filter/package.json index 155df2b..d583606 100644 --- a/lfr/pkg/assets/tpl/cx/liferay-portal/workspaces/liferay-sample-workspace/client-extensions/liferay-sample-fds-filter/package.json +++ b/lfr/pkg/assets/tpl/cx/liferay-portal/workspaces/liferay-sample-workspace/client-extensions/liferay-sample-fds-filter/package.json @@ -1,6 +1,6 @@ { "dependencies": { - "@liferay/js-api": "0.4.0-pre.0", + "@liferay/js-api": "0.5.1-pre.0", "serve": "^14.2.0" }, "description": "Liferay Sample FDS Filter", diff --git a/lfr/pkg/assets/tpl/cx/liferay-portal/workspaces/liferay-sample-workspace/client-extensions/liferay-sample-fds-filter/src/index.ts b/lfr/pkg/assets/tpl/cx/liferay-portal/workspaces/liferay-sample-workspace/client-extensions/liferay-sample-fds-filter/src/index.ts index 90bb562..7fa1c41 100644 --- a/lfr/pkg/assets/tpl/cx/liferay-portal/workspaces/liferay-sample-workspace/client-extensions/liferay-sample-fds-filter/src/index.ts +++ b/lfr/pkg/assets/tpl/cx/liferay-portal/workspaces/liferay-sample-workspace/client-extensions/liferay-sample-fds-filter/src/index.ts @@ -3,34 +3,60 @@ * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06 */ -import type {FDSFilterHTMLElementBuilder} from '@liferay/js-api/data-set'; +import type { + FDSFilter, + FDSFilterHTMLElementBuilderArgs, +} from '@liferay/js-api/data-set'; -const mySampleFilter: FDSFilterHTMLElementBuilder = ({filter, setFilter}) => { - const div = document.createElement('div'); - const button = document.createElement('button'); +// Declare the structure of the internal data that describes the filter state (in this case it will +// be the plain odata string the user enters through the filter's UI). + +type FilterData = string; + +function descriptionBuilder(selectedData: FilterData): string { + return selectedData; +} + +function htmlElementBuilder({ + filter, + setFilter, +}: FDSFilterHTMLElementBuilderArgs): HTMLElement { const input = document.createElement('input'); - div.className = 'dropdown-item'; + if (filter.selectedData) { + input.value = filter.selectedData; + } + + input.className = 'form-control'; + input.placeholder = 'Search with Odata'; + + const button = document.createElement('button'); button.className = 'btn btn-block btn-secondary btn-sm mt-2'; button.innerText = 'Submit'; button.onclick = () => setFilter({ - odataFilterString: input.value, selectedData: input.value, }); - if (filter.selectedData) { - input.value = filter.selectedData; - } + const div = document.createElement('div'); - input.className = 'form-control'; - input.placeholder = 'Search with Odata'; + div.className = 'dropdown-item'; div.appendChild(input); div.appendChild(button); return div; +} + +function oDataQueryBuilder(selectedData: FilterData): string { + return selectedData; +} + +const fdsFilter: FDSFilter = { + descriptionBuilder, + htmlElementBuilder, + oDataQueryBuilder, }; -export default mySampleFilter; +export default fdsFilter;