From f066f97bf96d07c33bc65a02d144c988734171f0 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Thu, 13 Jun 2024 09:47:57 -0300 Subject: [PATCH] refactor: Sort columns in SessionView and MessagesPage components Sort the columns in the SessionView and MessagesPage components using the messagesSorter utility function. This ensures consistent column ordering and improves the user experience when viewing and interacting with the tables. --- .../IOModal/components/SessionView/index.tsx | 5 +-- .../SettingsPage/pages/messagesPage/index.tsx | 7 ++-- src/frontend/src/utils/utils.ts | 33 ++++++++++++------- 3 files changed, 29 insertions(+), 16 deletions(-) diff --git a/src/frontend/src/modals/IOModal/components/SessionView/index.tsx b/src/frontend/src/modals/IOModal/components/SessionView/index.tsx index 401b564f4..ef2c44d44 100644 --- a/src/frontend/src/modals/IOModal/components/SessionView/index.tsx +++ b/src/frontend/src/modals/IOModal/components/SessionView/index.tsx @@ -5,6 +5,7 @@ import useRemoveMessages from "../../../../pages/SettingsPage/pages/messagesPage import useUpdateMessage from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage"; import useAlertStore from "../../../../stores/alertStore"; import { useMessagesStore } from "../../../../stores/messagesStore"; +import { messagesSorter } from "../../../../utils/utils"; export default function SessionView({ rows }: { rows: Array }) { const columns = useMessagesStore((state) => state.columns); @@ -17,7 +18,7 @@ export default function SessionView({ rows }: { rows: Array }) { setSelectedRows, setSuccessData, setErrorData, - selectedRows + selectedRows, ); const { handleUpdate } = useUpdateMessage(setSuccessData, setErrorData); @@ -49,7 +50,7 @@ export default function SessionView({ rows }: { rows: Array }) { rowSelection="multiple" suppressRowClickSelection={true} pagination={true} - columnDefs={columns} + columnDefs={columns.sort(messagesSorter)} rowData={rows} /> ); diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx index 3e9de9dc0..84f1894dd 100644 --- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx @@ -12,6 +12,7 @@ import HeaderMessagesComponent from "./components/headerMessages"; import useMessagesTable from "./hooks/use-messages-table"; import useRemoveMessages from "./hooks/use-remove-messages"; import useUpdateMessage from "./hooks/use-updateMessage"; +import { messagesSorter } from "../../../../utils/utils"; export default function MessagesPage() { const [columns, setColumns] = useState>([]); @@ -26,7 +27,7 @@ export default function MessagesPage() { setSelectedRows, setSuccessData, setErrorData, - selectedRows + selectedRows, ); const { handleUpdate } = useUpdateMessage(setSuccessData, setErrorData); @@ -60,13 +61,13 @@ export default function MessagesPage() { overlayNoRowsTemplate="No data available" onSelectionChanged={(event: SelectionChangedEvent) => { setSelectedRows( - event.api.getSelectedRows().map((row) => row.index) + event.api.getSelectedRows().map((row) => row.index), ); }} rowSelection="multiple" suppressRowClickSelection={true} pagination={true} - columnDefs={columns} + columnDefs={columns.sort(messagesSorter)} rowData={messages} /> diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts index ac1d52d13..aaae69c7b 100644 --- a/src/frontend/src/utils/utils.ts +++ b/src/frontend/src/utils/utils.ts @@ -2,7 +2,7 @@ import { ColDef, ColGroupDef } from "ag-grid-community"; import clsx, { ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; import TableAutoCellRender from "../components/tableComponent/components/tableAutoCellRender"; -import { MODAL_CLASSES } from "../constants/constants"; +import { MESSAGES_TABLE_ORDER, MODAL_CLASSES } from "../constants/constants"; import { APIDataType, InputFieldType } from "../types/api"; import { groupedObjType, @@ -56,7 +56,7 @@ export function normalCaseToSnakeCase(str: string): string { export function toTitleCase( str: string | undefined, - isNodeField?: boolean + isNodeField?: boolean, ): string { if (!str) return ""; let result = str @@ -65,7 +65,7 @@ export function toTitleCase( if (isNodeField) return word; if (index === 0) { return checkUpperWords( - word[0].toUpperCase() + word.slice(1).toLowerCase() + word[0].toUpperCase() + word.slice(1).toLowerCase(), ); } return checkUpperWords(word.toLowerCase()); @@ -78,7 +78,7 @@ export function toTitleCase( if (isNodeField) return word; if (index === 0) { return checkUpperWords( - word[0].toUpperCase() + word.slice(1).toLowerCase() + word[0].toUpperCase() + word.slice(1).toLowerCase(), ); } return checkUpperWords(word.toLowerCase()); @@ -182,7 +182,7 @@ export function checkLocalStorageKey(key: string): boolean { export function IncrementObjectKey( object: object, - key: string + key: string, ): { newKey: string; increment: number } { let count = 1; const type = removeCountFromString(key); @@ -217,7 +217,7 @@ export function groupByFamily( data: APIDataType, baseClasses: string, left: boolean, - flow?: NodeType[] + flow?: NodeType[], ): groupedObjType[] { const baseClassesSet = new Set(baseClasses.split("\n")); let arrOfPossibleInputs: Array<{ @@ -243,7 +243,7 @@ export function groupByFamily( baseClassesSet.has(template.type)) || (template.input_types && template.input_types.some((inputType) => - baseClassesSet.has(inputType) + baseClassesSet.has(inputType), ))) ); }; @@ -263,7 +263,7 @@ export function groupByFamily( hasBaseClassInBaseClasses: foundNode?.hasBaseClassInBaseClasses || nodeData.node!.base_classes?.some((baseClass) => - baseClassesSet.has(baseClass) + baseClassesSet.has(baseClass), ), //seta como anterior ou verifica se o node tem base class displayName: nodeData.node?.display_name, }); @@ -280,10 +280,10 @@ export function groupByFamily( if (!foundNode) { foundNode = { hasBaseClassInTemplate: Object.values(node!.template).some( - checkBaseClass + checkBaseClass, ), hasBaseClassInBaseClasses: node!.base_classes?.some((baseClass) => - baseClassesSet.has(baseClass) + baseClassesSet.has(baseClass), ), displayName: node?.display_name, }; @@ -355,7 +355,7 @@ export function isTimeStampString(str: string): boolean { export function extractColumnsFromRows( rows: object[], mode: "intersection" | "union", - excludeColumns?: Array + excludeColumns?: Array, ): (ColDef | ColGroupDef)[] { let columnsKeys: { [key: string]: ColDef | ColGroupDef } = {}; if (rows.length === 0) { @@ -412,3 +412,14 @@ export function isThereModal(): boolean { const modal = document.body.getElementsByClassName(MODAL_CLASSES); return modal.length > 0; } + +export function messagesSorter(a: any, b: any) { + const indexA = MESSAGES_TABLE_ORDER.indexOf(a.field); + const indexB = MESSAGES_TABLE_ORDER.indexOf(b.field); + + // If the field is not in the MESSAGES_TABLE_ORDER, we can place it at the end. + const orderA = indexA === -1 ? MESSAGES_TABLE_ORDER.length : indexA; + const orderB = indexB === -1 ? MESSAGES_TABLE_ORDER.length : indexB; + + return orderA - orderB; +}