Next version of fix dashboard dropdowns!

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,36 +121,12 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
 
    function getQueryParams(widgetMetaData: QWidgetMetaData, extraParams: string): string
    {
-      let ampersand = "";
+      let paramMap = new Map<string, string>();
-      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 = "&";
-      }
 
       /////////////////////////////////////////////////////////////////////////////
       // 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)
@@ -159,14 +139,54 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
             const json = JSON.parse(localStorage.getItem(localStorageKey));
             if (json)
             {
-                  params += `${ampersand}${dropdownName}=${json.id}`;
+               paramMap.set(dropdownName, json.id);
-                  ampersand = "&";
-               }
             }
          }
       }
 
-      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;

src/qqq/components/widgets/Widget.tsx

@@ -129,7 +129,6 @@ function Widget(props: React.PropsWithChildren<Props>): 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<Props>): 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<Props>): JSX.Element
 
          dropdownData[index] = (changedData) ? changedData.id : null;
          setDropdownData(dropdownData);
-         setCounter(counter + 1);
 
          /////////////////////////////////////////////////
          // if should store in local storage, do so now //
@@ -252,12 +251,12 @@ function Widget(props: React.PropsWithChildren<Props>): 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++)
@@ -267,23 +266,21 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
             params += "&";
          }
          params += `${props.widgetData.dropdownNameList[i]}=`;
-            if(dropdownData[i])
+         if (dropdownData[i])
          {
             params += `${dropdownData[i]}`;
-
          }
       }
 
-         if(props.reloadWidgetCallback)
+      if (props.reloadWidgetCallback)
       {
          props.reloadWidgetCallback(params);
       }
       else
       {
-            console.log(`No reload widget callback in ${props.widgetMetaData.label}`)
+         console.log(`No reload widget callback in ${props.widgetMetaData.label}`);
       }
    }
-   }, [counter]);
 
    const toggleFullScreenWidget = () =>
    {

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));