@solidxai/core-ui 0.1.5-beta.9 → 0.1.6

package/dist/components/core/list/SolidDataTable.tsx

@@ -0,0 +1,314 @@
+import React from "react";
+
+export type DataTableStateEvent = {
+  sortField?: string;
+  sortOrder?: 1 | -1 | 0;
+};
+
+type HeaderRenderer = React.ReactNode | (() => React.ReactNode);
+type BodyRenderer = (rowData: any) => React.ReactNode;
+
+export type SolidColumnProps = {
+  field?: string;
+  header?: HeaderRenderer;
+  body?: BodyRenderer;
+  sortable?: boolean;
+  selectionMode?: "multiple" | "single" | null;
+  headerStyle?: React.CSSProperties;
+  style?: React.CSSProperties;
+  className?: string;
+  headerClassName?: string;
+  frozen?: boolean;
+  alignFrozen?: "left" | "right";
+  [key: string]: any;
+};
+
+export function Column(_props: SolidColumnProps) {
+  return null;
+}
+
+type SolidDataTableProps = {
+  value: any[];
+  children: React.ReactNode;
+  size?: "small" | "normal" | "large";
+  viewportHeight?: string;
+  dataKey?: string;
+  emptyMessage?: React.ReactNode;
+  rows?: number;
+  first?: number;
+  totalRecords?: number;
+  rowsPerPageOptions?: number[];
+  onPage?: (event: { first: number; rows: number }) => void;
+  onSort?: (event: DataTableStateEvent) => void;
+  sortField?: string;
+  sortOrder?: 1 | -1 | 0;
+  removableSort?: boolean;
+  selection?: any[];
+  selectionMode?: "checkbox" | null;
+  onSelectionChange?: (event: { value: any[] }) => void;
+  onRowClick?: (event: { data: any }) => void;
+  rowClassName?: (rowData: any) => string;
+  tableClassName?: string;
+  paginatorClassName?: string;
+  currentPageReportTemplate?: string;
+  [key: string]: any;
+};
+
+const cx = (...parts: Array<string | undefined | false>) => parts.filter(Boolean).join(" ");
+
+function renderHeaderNode(header?: HeaderRenderer) {
+  if (typeof header === "function") return header();
+  return header ?? null;
+}
+
+function normalizeColumns(children: React.ReactNode): React.ReactElement<SolidColumnProps>[] {
+  return React.Children.toArray(children).filter((child): child is React.ReactElement<SolidColumnProps> => {
+    return React.isValidElement(child);
+  });
+}
+
+function resolveSortIcon(active: boolean, order: 1 | -1 | 0): string {
+  if (!active || order === 0) return "pi pi-sort-alt";
+  return order === 1 ? "pi pi-sort-amount-up-alt" : "pi pi-sort-amount-down";
+}
+
+function nextSortOrder(active: boolean, order: 1 | -1 | 0, removableSort = true): 1 | -1 | 0 {
+  if (!active || order === 0) return 1;
+  if (order === 1) return -1;
+  return removableSort ? 0 : 1;
+}
+
+export function SolidDataTable({
+  value,
+  children,
+  size = "normal",
+  viewportHeight,
+  dataKey = "id",
+  emptyMessage,
+  rows = 25,
+  first = 0,
+  totalRecords = 0,
+  rowsPerPageOptions = [10, 25, 50, 100],
+  onPage,
+  onSort,
+  sortField,
+  sortOrder = 0,
+  removableSort = true,
+  selection = [],
+  selectionMode,
+  onSelectionChange,
+  onRowClick,
+  rowClassName,
+  tableClassName,
+  paginatorClassName,
+  currentPageReportTemplate = "{first} - {last} of {totalRecords}",
+}: SolidDataTableProps) {
+  const columns = normalizeColumns(children);
+  const pageRows = value ?? [];
+
+  const selectedKeys = new Set((selection || []).map((row: any) => String(row?.[dataKey])));
+  const allSelected = pageRows.length > 0 && pageRows.every((row: any) => selectedKeys.has(String(row?.[dataKey])));
+
+  const start = totalRecords === 0 ? 0 : first + 1;
+  const end = Math.min(first + rows, totalRecords);
+  const currentPage = rows > 0 ? Math.floor(first / rows) + 1 : 1;
+  const totalPages = rows > 0 ? Math.max(1, Math.ceil(totalRecords / rows)) : 1;
+
+  const report = currentPageReportTemplate
+    .replace("{first}", String(start))
+    .replace("{last}", String(end))
+    .replace("{totalRecords}", String(totalRecords));
+
+  const emitSelection = (nextSelection: any[]) => {
+    onSelectionChange?.({ value: nextSelection });
+  };
+
+  const toggleSelectAll = (checked: boolean) => {
+    if (!checked) {
+      const pageKeys = new Set(pageRows.map((row: any) => String(row?.[dataKey])));
+      emitSelection((selection || []).filter((row: any) => !pageKeys.has(String(row?.[dataKey]))));
+      return;
+    }
+    const merged = [...(selection || [])];
+    const mergedKeys = new Set(merged.map((row: any) => String(row?.[dataKey])));
+    pageRows.forEach((row: any) => {
+      const key = String(row?.[dataKey]);
+      if (!mergedKeys.has(key)) merged.push(row);
+    });
+    emitSelection(merged);
+  };
+
+  const toggleRowSelection = (rowData: any, checked: boolean) => {
+    const key = String(rowData?.[dataKey]);
+    if (!checked) {
+      emitSelection((selection || []).filter((row: any) => String(row?.[dataKey]) !== key));
+      return;
+    }
+    emitSelection([...(selection || []), rowData]);
+  };
+
+  const densityClass =
+    size === "small"
+      ? "solid-table-density-compact"
+      : size === "large"
+        ? "solid-table-density-comfortable"
+        : "solid-table-density-cozy";
+
+  return (
+    <div
+      className={cx("solid-data-table-root w-full min-h-0", densityClass)}
+      style={{
+        height: viewportHeight || "100%",
+        maxHeight: viewportHeight || "100%",
+      }}
+    >
+      <div className="solid-data-table-viewport min-h-0 rounded-md border border-border/60 bg-background">
+        <table className={cx("w-full text-sm border-collapse", tableClassName)}>
+          <thead className="solid-data-table-head sticky top-0 z-2">
+            <tr>
+              {columns.map((column, index) => {
+                const props = column.props;
+                const isSelectionColumn = props.selectionMode === "multiple";
+                const isSortable = Boolean(props.sortable && props.field && !isSelectionColumn);
+                const isActiveSort = isSortable && sortField === props.field;
+                const iconClass = resolveSortIcon(Boolean(isActiveSort), sortOrder);
+                return (
+                  <th
+                    key={`header-${index}`}
+                    className={cx(
+                      "solid-data-table-th text-left text-foreground whitespace-nowrap",
+                      isSelectionColumn ? "solid-data-table-selection-col" : undefined,
+                      props.headerClassName
+                    )}
+                    style={{ ...props.style, ...props.headerStyle }}
+                  >
+                    {isSelectionColumn ? (
+                      <input
+                        type="checkbox"
+                        checked={allSelected}
+                        onChange={(e) => toggleSelectAll(e.currentTarget.checked)}
+                        aria-label="Select all rows"
+                      />
+                    ) : (
+                      <button
+                        type="button"
+                        className={cx("solid-table-header-button", isSortable ? "is-sortable" : undefined)}
+                        onClick={() => {
+                          if (!isSortable) return;
+                          const nextOrder = nextSortOrder(Boolean(isActiveSort), sortOrder, removableSort);
+                          onSort?.({
+                            sortField: nextOrder === 0 ? undefined : props.field,
+                            sortOrder: nextOrder,
+                          });
+                        }}
+                      >
+                        {renderHeaderNode(props.header)}
+                        {isSortable ? <i className={iconClass} aria-hidden="true" /> : null}
+                      </button>
+                    )}
+                  </th>
+                );
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            {pageRows.length === 0 ? (
+              <tr>
+                <td className="px-3 py-6 text-center text-muted-foreground" colSpan={Math.max(columns.length, 1)}>
+                  {emptyMessage || "No records found"}
+                </td>
+              </tr>
+            ) : (
+              pageRows.map((rowData: any) => {
+                const key = String(rowData?.[dataKey]);
+                const rowSelected = selectedKeys.has(key);
+                return (
+                  <tr
+                    key={key}
+                    className={cx("solid-data-table-row", rowClassName?.(rowData))}
+                    onClick={(event) => {
+                      const target = event.target as HTMLElement;
+                      if (target.closest("button,a,input,label,[data-no-row-click='true']")) return;
+                      onRowClick?.({ data: rowData });
+                    }}
+                  >
+                    {columns.map((column, index) => {
+                      const props = column.props;
+                      const isSelectionColumn = props.selectionMode === "multiple";
+                      const content = isSelectionColumn
+                        ? (
+                          <input
+                            type="checkbox"
+                            checked={rowSelected}
+                            onChange={(e) => toggleRowSelection(rowData, e.currentTarget.checked)}
+                            onClick={(e) => e.stopPropagation()}
+                            aria-label="Select row"
+                          />
+                        )
+                        : props.body
+                          ? props.body(rowData)
+                          : props.field
+                            ? rowData?.[props.field]
+                            : null;
+                      return (
+                        <td
+                          key={`cell-${key}-${index}`}
+                          className={cx(
+                            "solid-data-table-td align-top text-foreground",
+                            isSelectionColumn ? "solid-data-table-selection-col" : undefined,
+                            props.className
+                          )}
+                          style={props.style}
+                        >
+                          {content}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                );
+              })
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {typeof onPage === "function" ? (
+        <div
+          className={cx("w-full solid-table-paginator solid-table-paginator-align-end flex items-center justify-end gap-3 text-sm rounded-md border border-border/60 px-3 py-1.5 bg-background", paginatorClassName)}
+        >
+          <div className="solid-paginator-meta flex items-center gap-2 ml-auto">
+            <span className="solid-paginator-label">Rows</span>
+            <select
+              value={rows}
+              onChange={(e) => onPage({ first: 0, rows: Number(e.target.value) })}
+              className="solid-paginator-select"
+            >
+              {rowsPerPageOptions.map((option) => (
+                <option key={option} value={option}>{option}</option>
+              ))}
+            </select>
+            <span className="solid-paginator-report">{report}</span>
+          </div>
+          <div className="solid-paginator-actions flex items-center gap-2">
+            <button
+              type="button"
+              className="solid-paginator-btn"
+              onClick={() => onPage({ first: Math.max(0, first - rows), rows })}
+              disabled={currentPage <= 1}
+            >
+              Previous
+            </button>
+            <button
+              type="button"
+              className="solid-paginator-btn"
+              onClick={() => onPage({ first: Math.min((totalPages - 1) * rows, first + rows), rows })}
+              disabled={currentPage >= totalPages}
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/dist/components/core/list/SolidListView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidListView.d.ts","sourceRoot":"","sources":["../../../../src/components/core/list/SolidListView.tsx"],"names":[],"mappings":";AAgCA,OAAO,uCAAuC,CAAC;AAC/C,OAAO,gDAAgD,CAAC;AAyBxD,eAAO,MAAM,+BAA+B,WAgB3C,CAAC;AAGF,eAAO,MAAM,oCAAoC,QAAS,MAAM,QAgB/D,CAAC;AAEF,eAAO,MAAM,6BAA6B,gBAAiB,MAAM,kBAUhE,CAAC;AAGF,eAAO,MAAM,kCAAkC,QAAS,MAAM,eAAe,MAAM,kBAUlF,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6BAA6B,CAAC,EAAE,GAAG,CAAC;IACpC,8BAA8B,CAAC,EAAE,GAAG,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,iBAAiB,CAAC,EAAE,GAAG,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;;;OAKG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;OAIG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB;;;;;;OAMG;IACH,WAAW,EAAE,CAAC,MAAM,EAAE;QACpB,uBAAuB,CAAC,EAAE,GAAG,CAAC;QAC9B,gBAAgB,CAAC,EAAE,GAAG,CAAC;QACvB,sBAAsB,CAAC,EAAE,GAAG,CAAC;QAC7B,2BAA2B,CAAC,EAAE,GAAG,CAAC;KACnC,KAAK,IAAI,CAAC;IACX;;;;OAIG;IACH,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D;;;OAGG;IACH,OAAO,EAAE,CAAC,iBAAiB,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;KAAE,EAAE,KAAK,IAAI,CAAC;IACzE;;;OAGG;IACH,eAAe,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,QAAQ,EAAE,MAAM;QACd,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,aAAa,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;SAAE,EAAE,CAAC;QAClD,YAAY,EAAE,OAAO,CAAC;QACtB,OAAO,EAAE,GAAG,CAAC;QACb,gBAAgB,EAAE,GAAG,CAAC;QACtB,QAAQ,EAAE,GAAG,EAAE,CAAC;QAChB,YAAY,EAAE,MAAM,CAAC;QACrB,OAAO,EAAE,OAAO,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,aAAa,qHA61DxB,CAAC"}
+{"version":3,"file":"SolidListView.d.ts","sourceRoot":"","sources":["../../../../src/components/core/list/SolidListView.tsx"],"names":[],"mappings":";AAgCA,OAAO,uCAAuC,CAAC;AAC/C,OAAO,gDAAgD,CAAC;AAyBxD,eAAO,MAAM,+BAA+B,WAgB3C,CAAC;AAGF,eAAO,MAAM,oCAAoC,QAAS,MAAM,QAgB/D,CAAC;AAEF,eAAO,MAAM,6BAA6B,gBAAiB,MAAM,kBAUhE,CAAC;AAGF,eAAO,MAAM,kCAAkC,QAAS,MAAM,eAAe,MAAM,kBAUlF,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6BAA6B,CAAC,EAAE,GAAG,CAAC;IACpC,8BAA8B,CAAC,EAAE,GAAG,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,iBAAiB,CAAC,EAAE,GAAG,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;;;OAKG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;OAIG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB;;;;;;OAMG;IACH,WAAW,EAAE,CAAC,MAAM,EAAE;QACpB,uBAAuB,CAAC,EAAE,GAAG,CAAC;QAC9B,gBAAgB,CAAC,EAAE,GAAG,CAAC;QACvB,sBAAsB,CAAC,EAAE,GAAG,CAAC;QAC7B,2BAA2B,CAAC,EAAE,GAAG,CAAC;KACnC,KAAK,IAAI,CAAC;IACX;;;;OAIG;IACH,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D;;;OAGG;IACH,OAAO,EAAE,CAAC,iBAAiB,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;KAAE,EAAE,KAAK,IAAI,CAAC;IACzE;;;OAGG;IACH,eAAe,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,QAAQ,EAAE,MAAM;QACd,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,aAAa,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;SAAE,EAAE,CAAC;QAClD,YAAY,EAAE,OAAO,CAAC;QACtB,OAAO,EAAE,GAAG,CAAC;QACb,gBAAgB,EAAE,GAAG,CAAC;QACtB,QAAQ,EAAE,GAAG,EAAE,CAAC;QAChB,YAAY,EAAE,MAAM,CAAC;QACrB,OAAO,EAAE,OAAO,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,aAAa,qHA0xDxB,CAAC"}

package/dist/components/core/list/SolidListView.js

@@ -75,7 +75,7 @@ import { useSearchParams } from "../../../hooks/useSearchParams";
 import { ListViewRowActionPopup } from "./ListViewRowActionPopup";
 import { FilterIcon } from '../../../components/modelsComponents/filterIcon';
 import { OverlayPanel } from "primereact/overlaypanel";
-import { Toast } from "primereact/toast";
+import { showToast } from "../../../redux/features/toastSlice";
 import { Divider } from "primereact/divider";
 import CompactImage from '../../../resources/images/layout/images/compact.png';
 import CozyImage from '../../../resources/images/layout/images/cozy.png';
@@ -460,7 +460,6 @@ export var SolidListView = forwardRef(function (params, ref) {
     // Custom Row Action
     var _70 = useState(false), listViewRowActionPopupState = _70[0], setListViewRowActionPopupState = _70[1];
     var _71 = useState(), listViewRowActionData = _71[0], setListRowActionData = _71[1];
-    var toast = useRef(null);
     // Get the list view data.
     var _72 = useLazyGetSolidEntitiesQuery(), triggerGetSolidEntities = _72[0], _73 = _72[1], solidEntityListViewData = _73.data, isLoading = _73.isLoading, error = _73.error;
     var _74 = useLazyRecoverSolidEntityByIdQuery(), triggerRecoverSolidEntitiesById = _74[0], _75 = _74[1], recoverByIdData = _75.data, recoverByIdIsLoading = _75.isLoading, recoverByIdError = _75.error, recoverByIdIsError = _75.isError, recoverByIdIsSuccess = _75.isSuccess;
@@ -889,14 +888,8 @@ export var SolidListView = forwardRef(function (params, ref) {
         setRecoverDialogVisible(false);
     };
     useEffect(function () {
-        var _a;
         if (recoverByIdIsSuccess && recoverByIdData) {
-            (_a = toast.current) === null || _a === void 0 ? void 0 : _a.show({
-                severity: "success",
-                summary: "Success",
-                detail: recoverByIdData.data.message,
-                life: 3000,
-            });
+            dispatch(showToast({ severity: "success", summary: "Success", detail: recoverByIdData.data.message, life: 3000 }));
             return;
         }
         if (recoverByIdIsError && recoverByIdError) {
@@ -909,8 +902,8 @@ export var SolidListView = forwardRef(function (params, ref) {
     }, [recoverByIdIsSuccess, recoverByIdData, recoverByIdIsError, recoverByIdError, recoverIsError, recoverError]);
     var showError = function (error) { return __awaiter(void 0, void 0, void 0, function () {
         var errorMessages, messages;
-        var _a, _b;
-        return __generator(this, function (_c) {
+        var _a;
+        return __generator(this, function (_b) {
             errorMessages = (_a = error === null || error === void 0 ? void 0 : error.data) === null || _a === void 0 ? void 0 : _a.message;
             messages = Array.isArray(errorMessages)
                 ? errorMessages
@@ -918,29 +911,15 @@ export var SolidListView = forwardRef(function (params, ref) {
                     ? [errorMessages]
                     : [];
             if (messages.length > 0) {
-                (_b = toast === null || toast === void 0 ? void 0 : toast.current) === null || _b === void 0 ? void 0 : _b.show({
-                    severity: "error",
-                    summary: ERROR_MESSAGES.SEND_REPORT,
-                    sticky: true,
-                    //@ts-ignore
-                    content: function (props) { return (_jsx("div", { className: "flex flex-column align-items-left", style: { flex: "1" }, children: messages.map(function (m, index) { return (_jsx("div", { className: "flex align-items-center gap-2", children: _jsx("span", { className: "font-bold text-900", children: String(m) }) }, index)); }) })); },
-                });
+                dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.SEND_REPORT, detail: messages.join(', ') }));
             }
             return [2 /*return*/];
         });
     }); };
     var showFieldError = function (error) { return __awaiter(void 0, void 0, void 0, function () {
-        var _a;
-        return __generator(this, function (_b) {
+        return __generator(this, function (_a) {
             if (error) {
-                (_a = toast === null || toast === void 0 ? void 0 : toast.current) === null || _a === void 0 ? void 0 : _a.show({
-                    severity: "error",
-                    summary: ERROR_MESSAGES.SEND_REPORT,
-                    // sticky: true,
-                    life: 3000,
-                    //@ts-ignore
-                    content: function (props) { return (_jsx("div", { className: "flex flex-column align-items-left", style: { flex: "1" }, children: _jsx("div", { className: "flex align-items-center gap-2", children: _jsx("span", { className: "font-bold text-900", children: String(error) }) }) })); },
-                });
+                dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.SEND_REPORT, detail: String(error), life: 3000 }));
             }
             return [2 /*return*/];
         });
@@ -954,23 +933,12 @@ export var SolidListView = forwardRef(function (params, ref) {
         deleteManySolidEntities(deleteList)
             .unwrap()
             .then(function () {
-            var _a;
-            (_a = toast.current) === null || _a === void 0 ? void 0 : _a.show({
-                severity: 'success',
-                summary: 'Deleted',
-                detail: ERROR_MESSAGES.RECORD_DELETE,
-                life: 3000
-            });
+            dispatch(showToast({ severity: 'success', summary: 'Deleted', detail: ERROR_MESSAGES.RECORD_DELETE, life: 3000 }));
             setDialogVisible(false);
         })
             .catch(function (error) {
-            var _a, _b;
-            (_a = toast.current) === null || _a === void 0 ? void 0 : _a.show({
-                severity: 'error',
-                summary: 'Delete Failed',
-                detail: (_b = error === null || error === void 0 ? void 0 : error.data) === null || _b === void 0 ? void 0 : _b.message,
-                life: 4000
-            });
+            var _a;
+            dispatch(showToast({ severity: 'error', summary: 'Delete Failed', detail: (_a = error === null || error === void 0 ? void 0 : error.data) === null || _a === void 0 ? void 0 : _a.message, life: 4000 }));
         });
     };
     // handle closing of the delete dialog...
@@ -1068,43 +1036,28 @@ export var SolidListView = forwardRef(function (params, ref) {
     };
     var handleDeleteEntity = function () { return __awaiter(void 0, void 0, void 0, function () {
         var response, error_2;
-        var _a, _b, _c, _d, _e, _f;
-        return __generator(this, function (_g) {
-            switch (_g.label) {
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
                 case 0:
-                    _g.trys.push([0, 2, , 3]);
+                    _d.trys.push([0, 2, , 3]);
                     if (!(selectedSolidViewData === null || selectedSolidViewData === void 0 ? void 0 : selectedSolidViewData.id)) {
                         throw new Error(ERROR_MESSAGES.NO_ENTITY_SELECTED);
                     }
                     return [4 /*yield*/, deleteSolidSingleEntiry(selectedSolidViewData.id)];
                 case 1:
-                    response = _g.sent();
+                    response = _d.sent();
                     if (((_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.statusCode) === 200) {
                         setDeleteEntity(false);
-                        (_b = toast.current) === null || _b === void 0 ? void 0 : _b.show({
-                            severity: "success",
-                            summary: ERROR_MESSAGES.DELETED,
-                            detail: ERROR_MESSAGES.ENTITY_DELETE,
-                            life: 3000,
-                        });
+                        dispatch(showToast({ severity: "success", summary: ERROR_MESSAGES.DELETED, detail: ERROR_MESSAGES.ENTITY_DELETE, life: 3000 }));
                     }
                     else {
-                        (_c = toast.current) === null || _c === void 0 ? void 0 : _c.show({
-                            severity: "error",
-                            summary: ERROR_MESSAGES.DELETE_FAIELD,
-                            detail: (_e = (_d = response === null || response === void 0 ? void 0 : response.error) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.error,
-                            sticky: true, // stays until user closes
-                        });
+                        dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.DELETE_FAIELD, detail: (_c = (_b = response === null || response === void 0 ? void 0 : response.error) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.error }));
                     }
                     return [3 /*break*/, 3];
                 case 2:
-                    error_2 = _g.sent();
-                    (_f = toast.current) === null || _f === void 0 ? void 0 : _f.show({
-                        severity: "error",
-                        summary: ERROR_MESSAGES.DELETE_FAIELD,
-                        detail: ERROR_MESSAGES.SOMETHING_WRONG,
-                        sticky: true, // stays until user closes
-                    });
+                    error_2 = _d.sent();
+                    dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.DELETE_FAIELD, detail: ERROR_MESSAGES.SOMETHING_WRONG }));
                     return [3 /*break*/, 3];
                 case 3: return [2 /*return*/];
             }
@@ -1152,7 +1105,7 @@ export var SolidListView = forwardRef(function (params, ref) {
         }
     };
     return (_jsxs("div", { className: "page-parent-wrapper flex", children: [_jsxs("div", { className: "h-full flex-grow-1 ".concat(styles.ListContentWrapper), children: [solidListViewInitialMetaData && queryDataLoaded &&
-                        _jsxs("div", { className: "page-header flex-column lg:flex-row", children: [_jsx(Toast, { ref: toast }), _jsxs("div", { className: "flex justify-content-between w-full", children: [_jsxs("div", { className: "flex gap-3 align-items-center w-full ", children: [_jsxs("div", { className: 'flex align-items-center gap-2', children: [params.embeded !== true &&
+                        _jsxs("div", { className: "page-header flex-column lg:flex-row", children: [_jsxs("div", { className: "flex justify-content-between w-full", children: [_jsxs("div", { className: "flex gap-3 align-items-center w-full ", children: [_jsxs("div", { className: 'flex align-items-center gap-2', children: [params.embeded !== true &&
                                                             _jsx("div", { className: "apps-icon block md:hidden cursor-pointer", onClick: toggleBothSidebars, children: _jsx("i", { className: "pi pi-th-large" }) }), _jsx("p", { className: "m-0 view-title solid-text-wrapper", children: ((_q = (_p = (_o = solidListViewMetaData === null || solidListViewMetaData === void 0 ? void 0 : solidListViewMetaData.data) === null || _o === void 0 ? void 0 : _o.solidView) === null || _p === void 0 ? void 0 : _p.action) === null || _q === void 0 ? void 0 : _q.displayName) || ((_s = (_r = solidListViewMetaData === null || solidListViewMetaData === void 0 ? void 0 : solidListViewMetaData.data) === null || _r === void 0 ? void 0 : _r.solidView) === null || _s === void 0 ? void 0 : _s.displayName) })] }), ((_t = solidListViewLayout === null || solidListViewLayout === void 0 ? void 0 : solidListViewLayout.attrs) === null || _t === void 0 ? void 0 : _t.enableGlobalSearch) === true &&
                                                     params.embeded === false && (_jsx("div", { className: "hidden lg:flex", children: _jsx(SolidGlobalSearchElement, { viewType: "list", showSaveFilterPopup: showSaveFilterPopup, setShowSaveFilterPopup: setShowSaveFilterPopup, ref: solidGlobalSearchElementRef, viewData: solidListViewMetaData, handleApplyCustomFilter: handleApplyCustomFilter, filterPredicates: filterPredicates }, params.modelName) }))] }), _jsxs("div", { className: "flex align-items-center solid-header-buttons-wrapper", children: [((_u = solidListViewLayout === null || solidListViewLayout === void 0 ? void 0 : solidListViewLayout.attrs) === null || _u === void 0 ? void 0 : _u.enableGlobalSearch) === true &&
                                                     params.embeded === false && (_jsx("div", { className: "flex lg:hidden", children: _jsx(Button, { type: "button", size: "small", icon: "pi pi-search", severity: "secondary", outlined: true, className: "solid-icon-button", onClick: function () { return setShowGlobalSearchElement(!showGlobalSearchElement); } }) })), _jsx("div", { className: "hidden lg:flex align-items-center solid-header-buttons-wrapper", children: (_x = (_w = (_v = solidListViewLayout === null || solidListViewLayout === void 0 ? void 0 : solidListViewLayout.attrs) === null || _v === void 0 ? void 0 : _v.headerButtons) === null || _w === void 0 ? void 0 : _w.filter(function (rb) { return rb.attrs.actionInContextMenu != true; })) === null || _x === void 0 ? void 0 : _x.map(function (button, index) { return (_jsx(SolidListViewHeaderButton, { button: button, params: params, solidListViewMetaData: solidListViewMetaData, handleCustomButtonClick: handleCustomButtonClick, selectedRecords: selectedRecords, filters: filters }, index)); }) }), actionsAllowed.includes("".concat(permissionExpression(params.modelName, 'create'))) &&