diff --git a/src/qqq/components/widgets/DashboardWidgets.tsx b/src/qqq/components/widgets/DashboardWidgets.tsx index 77c73da..555706b 100644 --- a/src/qqq/components/widgets/DashboardWidgets.tsx +++ b/src/qqq/components/widgets/DashboardWidgets.tsx @@ -109,7 +109,11 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit { (async() => { - widgetData[index] = await qController.widget(widgetMetaDataList[index].name, getQueryParams(null, data)); + const urlParams = getQueryParams(widgetMetaDataList[index], data); + setCurrentUrlParams(urlParams); + + widgetData[index] = await qController.widget(widgetMetaDataList[index].name, urlParams); + setWidgetCounter(widgetCounter + 1); setWidgetData(widgetData); forceUpdate(); })(); @@ -117,56 +121,72 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit function getQueryParams(widgetMetaData: QWidgetMetaData, extraParams: string): string { - let ampersand = ""; - let params = ""; - - if(entityPrimaryKey) - { - params += `${ampersand}id=${entityPrimaryKey}`; - ampersand = "&"; - } - if(tableName) - { - params += `${ampersand}tableName=${tableName}`; - ampersand = "&"; - } - if(extraParams) - { - params += `${ampersand}${extraParams}`; - ampersand = "&"; - } - if(childUrlParams) - { - params += `${ampersand}${childUrlParams}`; - ampersand = "&"; - } + let paramMap = new Map(); ///////////////////////////////////////////////////////////////////////////// // see if local storage is used for any widget dropdowns, if so, look them // // up and append to the query string // ///////////////////////////////////////////////////////////////////////////// - if(params === "") + let thisWidgetHasDropdowns = widgetMetaData && widgetMetaData.storeDropdownSelections && widgetMetaData.dropdowns; + let parentWidgetHasDropdowns = parentWidgetMetaData && parentWidgetMetaData.storeDropdownSelections && parentWidgetMetaData.dropdowns; + if (thisWidgetHasDropdowns || parentWidgetHasDropdowns) { - let thisWidgetHasDropdowns = widgetMetaData && widgetMetaData.storeDropdownSelections && widgetMetaData.dropdowns; - let parentWidgetHasDropdowns = parentWidgetMetaData && parentWidgetMetaData.storeDropdownSelections && parentWidgetMetaData.dropdowns; - if (thisWidgetHasDropdowns || parentWidgetHasDropdowns) + const metaDataToUse = (thisWidgetHasDropdowns) ? widgetMetaData : parentWidgetMetaData; + for (let i = 0; i < metaDataToUse.dropdowns.length; i++) { - const metaDataToUse = (thisWidgetHasDropdowns) ? widgetMetaData : parentWidgetMetaData; - for (let i = 0; i < metaDataToUse.dropdowns.length; i++) + const dropdownName = metaDataToUse.dropdowns[i].possibleValueSourceName; + const localStorageKey = `${WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT}.${metaDataToUse.name}.${dropdownName}`; + const json = JSON.parse(localStorage.getItem(localStorageKey)); + if (json) { - const dropdownName = metaDataToUse.dropdowns[i].possibleValueSourceName; - const localStorageKey = `${WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT}.${metaDataToUse.name}.${dropdownName}`; - const json = JSON.parse(localStorage.getItem(localStorageKey)); - if (json) - { - params += `${ampersand}${dropdownName}=${json.id}`; - ampersand = "&"; - } + paramMap.set(dropdownName, json.id); } } } - return params; + if(entityPrimaryKey) + { + paramMap.set("id", entityPrimaryKey); + } + + if(tableName) + { + paramMap.set("tableName", tableName); + } + + if(extraParams) + { + let pairs = extraParams.split("&"); + for (let i = 0; i < pairs.length; i++) + { + let nameValue = pairs[i].split("="); + if(nameValue.length == 2) + { + paramMap.set(nameValue[0], nameValue[1]); + } + } + } + + if(childUrlParams) + { + let pairs = childUrlParams.split("&"); + for (let i = 0; i < pairs.length; i++) + { + let nameValue = pairs[i].split("="); + if(nameValue.length == 2) + { + paramMap.set(nameValue[0], nameValue[1]); + } + } + } + + let paramsFromMap = ""; + for (let key of paramMap.keys()) + { + paramsFromMap += `${key}=${paramMap.get(key)}&`; + } + + return paramsFromMap; } const widgetCount = widgetMetaDataList ? widgetMetaDataList.length : 0; diff --git a/src/qqq/components/widgets/Widget.tsx b/src/qqq/components/widgets/Widget.tsx index 0a1b463..fa6f00c 100644 --- a/src/qqq/components/widgets/Widget.tsx +++ b/src/qqq/components/widgets/Widget.tsx @@ -129,7 +129,6 @@ function Widget(props: React.PropsWithChildren): JSX.Element { const navigate = useNavigate(); const [dropdownData, setDropdownData] = useState([]); - const [counter, setCounter] = useState(0); const [fullScreenWidgetClassName, setFullScreenWidgetClassName] = useState(""); function openEditForm(table: QTableMetaData, id: any = null, defaultValues: any, disabledFields: any) @@ -170,6 +169,7 @@ function Widget(props: React.PropsWithChildren): JSX.Element // see if an existing value is stored in local storage, and if so set it in dropdown // /////////////////////////////////////////////////////////////////////////////////////// defaultValue = JSON.parse(localStorage.getItem(localStorageKey)); + dropdownData[index] = defaultValue?.id; } const dropdown = component as Dropdown @@ -235,7 +235,6 @@ function Widget(props: React.PropsWithChildren): JSX.Element dropdownData[index] = (changedData) ? changedData.id : null; setDropdownData(dropdownData); - setCounter(counter + 1); ///////////////////////////////////////////////// // if should store in local storage, do so now // @@ -252,38 +251,36 @@ function Widget(props: React.PropsWithChildren): JSX.Element localStorage.removeItem(`${WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT}.${props.widgetMetaData.name}.${dropdownName}`); } } + + reloadWidget(dropdownData) } } - useEffect(() => + const reloadWidget = (dropdownData: any[]) => { - if(dropdownData && counter > 0) + let params = ""; + for (let i = 0; i < dropdownData.length; i++) { - let params = ""; - for (let i = 0; i < dropdownData.length; i++) + if (i > 0) { - if (i > 0) - { - params += "&"; - } - params += `${props.widgetData.dropdownNameList[i]}=`; - if(dropdownData[i]) - { - params += `${dropdownData[i]}`; - - } + params += "&"; } - - if(props.reloadWidgetCallback) + params += `${props.widgetData.dropdownNameList[i]}=`; + if (dropdownData[i]) { - props.reloadWidgetCallback(params); - } - else - { - console.log(`No reload widget callback in ${props.widgetMetaData.label}`) + params += `${dropdownData[i]}`; } } - }, [counter]); + + if (props.reloadWidgetCallback) + { + props.reloadWidgetCallback(params); + } + else + { + console.log(`No reload widget callback in ${props.widgetMetaData.label}`); + } + } const toggleFullScreenWidget = () => { diff --git a/src/qqq/pages/apps/Home.tsx b/src/qqq/pages/apps/Home.tsx index f2bb0ae..055f6b7 100644 --- a/src/qqq/pages/apps/Home.tsx +++ b/src/qqq/pages/apps/Home.tsx @@ -175,14 +175,6 @@ function AppHome({app}: Props): JSX.Element // eslint-disable-next-line no-nested-ternary const tileSizeLg = 3; - const handleDropdownOnChange = (value: string, index: number) => - { - setTimeout(async () => - { - widgets[index] = await qController.widget(app.widgets[index]); - }, 1); - }; - const hasTablePermission = (tableName: string) => { return tables.find(t => t.name === tableName && (t.readPermission || t.insertPermission || t.editPermission || t.deletePermission));