exposed sortedData, added sort change event in list/grid comp

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx

@@ -369,6 +369,7 @@ export function ListView(props: Props) {
     newData.splice(toIndex, 0, movedItem);
 
     children.listData.dispatchChangeValueAction(newData);
+    children.onEvent.getView()('sortChange');
   };
 
   // log.debug("renders: ", renders);

client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx

@@ -29,7 +29,7 @@ import {
   withFunction,
   WrapContextNodeV2,
 } from "lowcoder-core";
-import { JSONArray, JSONValue } from "util/jsonTypes";
+import { JSONArray, JSONObject, JSONValue } from "util/jsonTypes";
 import { depthEqual, lastValueIfEqual, shallowEqual } from "util/objectUtils";
 import { CompTree, getAllCompItems, IContainer } from "../containerBase";
 import { SimpleContainerComp, toSimpleContainerData } from "../containerBase/simpleContainerComp";
@@ -40,6 +40,7 @@ import { listPropertyView } from "./listViewPropertyView";
 import { getData } from "./listViewUtils";
 import { withMethodExposing } from "comps/generators/withMethodExposing";
 import { SliderControl } from "@lowcoder-ee/comps/controls/sliderControl";
+import { eventHandlerControl, sortChangeEvent } from "@lowcoder-ee/comps/controls/eventHandlerControl";
 
 const childrenMap = {
   noOfRows: withIsLoadingMethod(NumberOrJSONObjectArrayControl), // FIXME: migrate "noOfRows" to "data"
@@ -62,6 +63,7 @@ const childrenMap = {
   horizontal: withDefault(BoolControl, false),
   minHorizontalWidth: withDefault(RadiusControl, '100px'),
   enableSorting: withDefault(BoolControl, false),
+  onEvent: eventHandlerControl([sortChangeEvent] as const),
 };
 
 const ListViewTmpComp = new UICompBuilder(childrenMap, () => <></>)
@@ -183,6 +185,15 @@ ListViewPropertyComp = withExposingConfigs(ListViewPropertyComp, [
       return data;
     },
   }),
+  depsConfig({
+    name: "sortedData",
+    desc: trans("listView.dataDesc"),
+    depKeys: ["listData"],
+    func: (input) => {
+      const { data } = getData(input.listData as JSONObject[]);
+      return data;
+    },
+  }),
   new CompDepsConfig(
     "pageNo",
     (comp) => ({index: comp.children.pagination.children.pageNo.exposingNode() }),

client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx

@@ -55,6 +55,7 @@ export function listPropertyView(compType: ListCompType) {
 
         {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
           <Section name={sectionNames.interaction}>
+            {children.onEvent.getPropertyView()}
             {hiddenPropertyView(children)}
             {showDataLoadingIndicatorsPropertyView(children)}
             {children.enableSorting.propertyView({

client/packages/lowcoder/src/comps/controls/eventHandlerControl.tsx

@@ -489,7 +489,11 @@ export const resetEvent: EventConfigType = {
   value: "reset",
   description: trans("event.resetDesc"),
 };
-
+export const sortChangeEvent: EventConfigType = {
+  label: trans("event.sortChange"),
+  value: "sortChange",
+  description: trans("event.sortChangeDesc"),
+};
 
 // Meeting Events
 

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -463,6 +463,8 @@ export const en = {
     "resetDesc": "Triggers on Reset timer",
     "refresh": "Refresh",
     "refreshDesc": "Triggers on Refresh",
+    "sortChange": "Sort Change",
+    "sortChangeDesc": "Triggers on Sorting Changes",
   },