Skip to content
This repository has been archived by the owner on Jun 10, 2024. It is now read-only.

Commit

Permalink
Merge pull request #80 from sarbull/main
Browse files Browse the repository at this point in the history 
Implement AssetCatalog back button functionality
  • Loading branch information
@bogdan-sava
bogdan-sava authored Oct 13, 2022
2 parents ae575f4 + c4af9eb commit 967ac0a
Show file tree
Hide file tree
Showing 4 changed files with 184 additions and 385 deletions.
228 changes: 71 additions & 157 deletions dist/esm/components/Assets/Catalog/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,121 +10,44 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useEffect } from 'react';
import { Checkbox, TextInput, MultiSelect, Button, LoadingOverlay } from '@mantine/core';
import { authHeader, egeriaFetch } from 'egeria-js-commons';
import { useSearchParams, useNavigate } from 'react-router-dom';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import QualifiedName from './qualified-name';
import DisplayNameCellRenderer from './displayNameCellRenderer';
const QUERY_MIN_LENGTH = 3;
const TYPES_MIN_SELECTED = 1;
const PAGE_SIZE_INCREASE_VALUE = 25;
import { ASSET_CATALOG_PATH, PAGE_SIZE_INCREASE_VALUE, getQueryParams, getQueryParamsPath, fetchTypes, fetchRawData } from 'egeria-js-commons';
/**
* Initial empty form value.
*/
const emptyForm = {
q: '',
types: [],
exactMatch: false,
caseSensitive: false,
pageSize: 25
};
/**
* Initial types data value.
*/
const emptyTypesData = [];
const getQueryParams = (searchParams) => {
var _a;
return {
q: searchParams.get('q') || '',
types: ((_a = searchParams.get('types')) === null || _a === void 0 ? void 0 : _a.split(',')) || [],
exactMatch: searchParams.get('exactMatch') === "true" ? true : false,
caseSensitive: searchParams.get('caseSensitive') === "true" ? true : false,
pageSize: searchParams.get('pageSize') ? parseInt(searchParams.get('pageSize')) : PAGE_SIZE_INCREASE_VALUE
};
};
const getQueryParamsPath = (formData) => {
const { q, exactMatch, caseSensitive, types, pageSize } = formData;
let queryParams = [];
if (q) {
queryParams.push(`q=${q}`);
}
if (types && types.length > 0) {
queryParams.push(`types=${types.join(',')}`);
}
if (exactMatch) {
queryParams.push(`exactMatch=true`);
}
if (caseSensitive) {
queryParams.push(`caseSensitive=true`);
}
if (types) {
queryParams.push(`pageSize=${pageSize}`);
}
return queryParams;
};
const fetchData = (uri, method, callback) => __awaiter(void 0, void 0, void 0, function* () {
const res = yield egeriaFetch(uri, method, Object.assign({}, authHeader()), {});
const data = yield res.json();
if (callback) {
callback(data);
}
else {
return data;
}
});
const fetchRawData = (formData, apiUrl) => __awaiter(void 0, void 0, void 0, function* () {
const { q, types } = formData;
if (q.length >= QUERY_MIN_LENGTH && types.length >= TYPES_MIN_SELECTED) {
const _queryParams = getQueryParamsPath(formData);
const path = `${apiUrl || ''}/api/assets/search${_queryParams.length ? `?${_queryParams.join('&')}` : ``}`;
const rawData = yield fetchData(path, 'GET');
return rawData;
}
else {
return [];
}
});
const fetchTypes = (apiUrl) => __awaiter(void 0, void 0, void 0, function* () {
let typesData = yield fetchData(`${apiUrl || ''}/api/assets/types`, 'GET');
typesData = [
...typesData.map((d) => {
return {
value: d.name,
label: d.name
};
})
];
return typesData;
});
const initData = (formData, callback, apiUrl) => __awaiter(void 0, void 0, void 0, function* () {
const typesData = yield fetchTypes(apiUrl);
const rawData = yield fetchRawData(formData, apiUrl);
if (callback) {
callback({ types: typesData, rawData: rawData });
}
});
export function EgeriaAssetCatalog(props) {
// const [ URLSearchParams ] = useSearchParams();
const { apiUrl } = props;
const [searchParams, setSearchParams] = useSearchParams();
const queryParams = getQueryParams(searchParams);
// const { q, types, exactMatch, caseSensitive, pageSize } = searchParams;
// console.log(q, types, exactMatch, caseSensitive, pageSize);
const navigate = useNavigate();
const [data, setData] = useState({
const [typesData, setTypesData] = useState({
isLoading: false,
typesData: [...emptyTypesData, ...queryParams.types]
});
const [form, setForm] = useState(Object.assign(Object.assign({}, emptyForm), queryParams));
const [rowData, setRowData] = useState({
isLoading: false,
typesData: [...emptyTypesData, ...queryParams.types],
form: Object.assign(Object.assign({}, emptyForm), queryParams),
rowData: []
});
const { isLoading, rowData, typesData } = data;
useEffect(() => {
const _queryParams = getQueryParams(searchParams);
setData(Object.assign(Object.assign({}, data), { form: Object.assign({}, _queryParams) }));
}, [searchParams]);
// const [isLoading, setIsLoading] = useState(false);
// const [typesData, setTypesData] = useState([...emptyTypesData, ...queryParams.types]);
// const [formData, setFormData] = useState({...emptyForm, ...queryParams});
// const [userFormData, setUserFormData] = useState({...emptyForm, ...queryParams});
// const [rowData, setRowData]: any = useState([]);
const { apiUrl } = props;
// const { exactMatch, caseSensitive, q, types } = userFormData;
// const { pageSize } = formData;
/*
* Contains AGGrid data-table information and config.
*/
const gridOptions = {
suppressCellFocus: true,
defaultColDef: {
Expand Down Expand Up @@ -161,75 +84,66 @@ export function EgeriaAssetCatalog(props) {
params.columnApi.autoSizeColumns(allColumnIds, true);
}
};
// useEffect(() => {
// const bringTypes = async () => {
// const rawTypesData = await fetchTypes(apiUrl);
// setData({...data, typesData: [...rawTypesData]});
// };
// bringTypes();
// }, []);
// useEffect(() => {
// const { form } = data;
// setData({...data, isLoading: true});
// const queryData = async () => {
// const rowData = await fetchRawData(form, apiUrl);
// setData({
// ...data,
// isLoading: false,
// rowData: [...rowData],
// form: {
// ...queryParams
// }
// });
// };
// queryData();
// }, [URLSearchParams]);
// const submit = async () => {
// const { form } = data;
// goTo(form);
// // setData({
// // ...data,
// // isLoading: true,
// // form: {
// // ...form
// // }
// // });
// // const rowData = await fetchRawData(form, apiUrl);
// // setData({
// // ...data,
// // isLoading: false,
// // rowData: [...rowData]
// // });
// };
useEffect(() => {
const _queryParams = getQueryParams(searchParams);
setForm(Object.assign({}, _queryParams));
}, [searchParams]);
useEffect(() => {
setTypesData(Object.assign(Object.assign({}, typesData), { isLoading: true }));
const bringTypes = () => __awaiter(this, void 0, void 0, function* () {
const rawTypesData = yield fetchTypes(apiUrl);
setTypesData({
isLoading: false,
typesData: [...rawTypesData]
});
});
bringTypes();
}, []);
useEffect(() => {
const _queryParams = getQueryParams(searchParams);
setRowData(Object.assign(Object.assign({}, rowData), { isLoading: true }));
const queryData = () => __awaiter(this, void 0, void 0, function* () {
const _rowData = yield fetchRawData(Object.assign(Object.assign({}, form), _queryParams), apiUrl);
setRowData({
isLoading: false,
rowData: [
..._rowData
]
});
});
queryData();
}, [searchParams]);
/*
* Submit handler for the main form.
*/
const submit = () => {
const { form } = data;
setSearchParams(form);
console.log('submitted');
};
/*
* Submit handler for the main form on ENTER keypress.
*/
const handleEnterPress = (e) => {
if (e.key === 'Enter') {
submit();
}
};
const loadMore = () => { };
// const loadMore = () => {
// const { form } = data;
// const newPageSize = form.pageSize + PAGE_SIZE_INCREASE_VALUE;
// const newFormData = {...form, pageSize: newPageSize};
// // TODO: check if last page (new array === last data array)
// setData({
// ...data,
// form: {
// ...newFormData
// }
// });
// goTo(newFormData);
// };
// const goTo = (formData: formData) => {
// const path = `/assets/catalog`;
// const queryParams = getQueryParamsPath(formData);
// navigate(`${path}${queryParams.length ? `?${queryParams.join('&')}` : ``}` );
// };
console.log('data = ', data);
return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ style: { display: 'flex', alignItems: 'stretch', flexDirection: 'column', position: 'relative', height: '100%', } }, { children: [_jsx(LoadingOverlay, { visible: isLoading }), _jsxs("div", Object.assign({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 10 } }, { children: [_jsx(TextInput, { mr: "xl", style: { minWidth: 180 }, placeholder: "Search", value: data.form.q, onKeyPress: handleEnterPress, onChange: (event) => setData(Object.assign(Object.assign({}, data), { form: Object.assign(Object.assign({}, data.form), { q: event.currentTarget.value }) })) }), _jsx(MultiSelect, { mr: "xl", style: { minWidth: 230 }, data: typesData, value: data.form.types, placeholder: "Types", onChange: (value) => setData(Object.assign(Object.assign({}, data), { form: Object.assign(Object.assign({}, data.form), { types: [...value] }) })) }), _jsx(Checkbox, { mr: "xl", label: 'Exact match', checked: data.form.exactMatch, onChange: (event) => setData(Object.assign(Object.assign({}, data), { form: Object.assign(Object.assign({}, data.form), { exactMatch: event.currentTarget.checked }) })) }), _jsx(Checkbox, { mr: "xl", label: 'Case sensitive', checked: data.form.caseSensitive, onChange: (event) => setData(Object.assign(Object.assign({}, data), { form: Object.assign(Object.assign({}, data.form), { caseSensitive: event.currentTarget.checked }) })) }), _jsx(Button, Object.assign({ onClick: () => submit() }, { children: "Search" }))] })), _jsx("div", Object.assign({ className: "ag-theme-alpine", style: { width: '100%', height: '100%' } }, { children: _jsx(AgGridReact, { gridOptions: gridOptions, rowData: rowData }) })), _jsx("div", { children: _jsx(Button, Object.assign({ size: "xs", compact: true, fullWidth: true, onClick: () => loadMore(), style: { marginBottom: 1, marginTop: 10 } }, { children: "Load more..." })) })] })) }));
/*
* Load more handler for loading more elements, pagintation.
*/
const loadMore = () => {
const newPageSize = form.pageSize + PAGE_SIZE_INCREASE_VALUE;
const newFormData = Object.assign(Object.assign({}, form), { pageSize: newPageSize });
// TODO: check if last page (new array === last data array)
setForm(Object.assign({}, newFormData));
goTo(newFormData);
};
/*
* Method used to update current browser's URL.
*/
const goTo = (formData) => {
const path = ASSET_CATALOG_PATH;
const queryParams = getQueryParamsPath(formData);
navigate(`${path}${queryParams.length ? `?${queryParams.join('&')}` : ``}`);
};
return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ style: { display: 'flex', alignItems: 'stretch', flexDirection: 'column', position: 'relative', height: '100%', } }, { children: [_jsx(LoadingOverlay, { visible: rowData.isLoading || typesData.isLoading }), _jsxs("div", Object.assign({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 10 } }, { children: [_jsx(TextInput, { mr: "xl", style: { minWidth: 180 }, placeholder: "Search", value: form.q, onKeyPress: handleEnterPress, onChange: (event) => setForm(Object.assign(Object.assign({}, form), { q: event.currentTarget.value })) }), _jsx(MultiSelect, { mr: "xl", style: { minWidth: 230 }, data: typesData.typesData, value: form.types, placeholder: "Types", onChange: (value) => setForm(Object.assign(Object.assign({}, form), { types: [...value] })) }), _jsx(Checkbox, { mr: "xl", label: 'Exact match', checked: form.exactMatch, onChange: (event) => setForm(Object.assign(Object.assign({}, form), { exactMatch: event.currentTarget.checked })) }), _jsx(Checkbox, { mr: "xl", label: 'Case sensitive', checked: form.caseSensitive, onChange: (event) => setForm(Object.assign(Object.assign({}, form), { caseSensitive: event.currentTarget.checked })) }), _jsx(Button, Object.assign({ onClick: () => submit() }, { children: "Search" }))] })), _jsx("div", Object.assign({ className: "ag-theme-alpine", style: { width: '100%', height: '100%' } }, { children: _jsx(AgGridReact, { gridOptions: gridOptions, rowData: rowData.rowData }) })), _jsx("div", { children: _jsx(Button, Object.assign({ size: "xs", compact: true, fullWidth: true, onClick: () => loadMore(), style: { marginBottom: 1, marginTop: 10 } }, { children: "Load more..." })) })] })) }));
}
20 changes: 10 additions & 10 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 4 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "egeria-ui-components",
"version": "4.0.2",
"version": "4.0.3",
"private": true,
"files": [
"dist",
Expand All @@ -15,7 +15,6 @@
"@mantine/next": "4.2.9",
"ag-grid-community": "^28.1.1",
"ag-grid-react": "^28.1.1",
"egeria-js-commons": "github:odpi/egeria-js-commons#4.0.0",
"egeria-ui-core": "github:odpi/egeria-ui-core#4.0.1",
"happi-graph": "github:odpi/happi-graph#4.0.0",
"react": "^18.2.0",
Expand Down Expand Up @@ -63,5 +62,8 @@
"node-sass": "^7.0.1",
"react-scripts": "^5.0.1",
"typescript": "^4.8.4"
},
"dependencies": {
"egeria-js-commons": "github:odpi/egeria-js-commons#4.0.1"
}
}
Loading

0 comments on commit 967ac0a

Please sign in to comment.