@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.10

package/dist/components/core/extension/solid-core/mqMessage/list/SolidMqMessagesSummarizeListHeaderAction.tsx

@@ -0,0 +1,185 @@
+import { SolidListFieldWidgetProps } from "../../../../../../types/solid-core";
+import { useState } from "react";
+import { solidGet } from "../../../../../../http/solidHttp";
+import { SolidButton } from "../../../../../shad-cn-ui";
+import { useDispatch } from "react-redux";
+import { closePopup } from "../../../../../../redux/features/popupSlice";
+import { X } from "lucide-react";
+
+// Chart.js imports
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    Tooltip,
+    Legend
+} from "chart.js";
+import { Bar } from "react-chartjs-2";
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
+
+const CHART_COLORS = [
+    "#3b82f6",
+    "#22c55e",
+    "#f59e0b",
+    "#ef4444",
+    "#8b5cf6",
+    "#14b8a6"
+];
+
+const getColor = (index: number) => CHART_COLORS[index % CHART_COLORS.length];
+
+// =========================
+// Pivot Transform
+// =========================
+const transformToPivot = (groupMeta: any[]) => {
+    const pivot: Record<string, Record<string, number>> = {};
+    const stageSet = new Set<string>();
+
+    groupMeta.forEach((item: any) => {
+        const groupValue = item.groupValue || "";
+        const count = item.id_count || 0;
+
+        const parts = groupValue.split("_");
+        const stage = parts.pop();
+        const broker = parts.join("_");
+
+        if (!broker || !stage) return;
+
+        stageSet.add(stage);
+        if (!pivot[broker]) pivot[broker] = {};
+        pivot[broker][stage] = count;
+    });
+
+    const stages = Array.from(stageSet);
+
+    Object.keys(pivot).forEach((broker) => {
+        stages.forEach((stage) => {
+            if (pivot[broker][stage] === undefined) {
+                pivot[broker][stage] = 0;
+            }
+        });
+    });
+
+    return { pivot, stages };
+};
+
+type PivotData = ReturnType<typeof transformToPivot>;
+
+// =========================
+// Chart Component
+// =========================
+const PivotChart = ({ data }: { data: PivotData }) => {
+    const { pivot, stages } = data;
+
+    const queues = Object.keys(pivot).sort((a, b) => {
+        const sum = (q: string) =>
+            stages.reduce((acc, s) => acc + (pivot[q]?.[s] || 0), 0);
+        return sum(b) - sum(a);
+    });
+
+    const chartData = {
+        labels: queues,
+        datasets: stages.map((stage, index) => ({
+            label: stage,
+            data: queues.map((q) => pivot[q]?.[stage] || 0),
+            backgroundColor: getColor(index)
+        }))
+    };
+
+    const options: any = {
+        responsive: true,
+        plugins: { legend: { position: "top" } },
+        scales: {
+            x: { stacked: true },
+            y: { stacked: true, beginAtZero: true }
+        }
+    };
+
+    return <Bar data={chartData} options={options} />;
+};
+
+// =========================
+// Widget
+// =========================
+export const SolidMqMessagesSummarizeListHeaderAction = ({
+    solidListViewMetaData
+}: SolidListFieldWidgetProps) => {
+    const dispatch = useDispatch();
+    const [loading, setLoading] = useState(false);
+    const [pivotData, setPivotData] = useState<PivotData | null>(null);
+
+    const handleContinue = async () => {
+        setLoading(true);
+
+        const selectedRows = solidListViewMetaData?.selectedRows || [];
+
+        const filters = selectedRows
+            .map(
+                (row: any, index: number) =>
+                    `filters[$and][0][$or][${index}][id][$eq]=${row.id}`
+            )
+            .join("&");
+
+        const qs = [
+            "offset=0",
+            "limit=100",
+            "groupBy[0]=messageBroker",
+            "groupBy[1]=stage",
+            "aggregates[0]=id:count",
+            filters || null
+        ]
+            .filter(Boolean)
+            .join("&");
+
+        const res = await solidGet(`/mq-message?${qs}`);
+        setPivotData(transformToPivot(res?.data?.data?.groupMeta ?? []));
+        setLoading(false);
+    };
+
+    return (
+        <div>
+            <div className="solid-filter-dialog-head">
+                <div>
+                    <h3 className="solid-filter-dialog-title">MQ Message Summary</h3>
+                </div>
+                <button
+                    className="solid-radix-dialog-close"
+                    aria-label="Close"
+                    onClick={() => dispatch(closePopup())}
+                >
+                    <X size={16} />
+                </button>
+            </div>
+
+            <div className="solid-filter-dialog-sep" />
+
+            <div className="solid-filter-dialog-body">
+                <div style={{ textAlign: "center",marginBottom:"10px",marginTop:"10px" }}>
+
+                    <p style={{ textAlign: "center", fontSize: "13px", marginBottom: "0" }}>
+                        You can summarize based on selected records or the full dataset.
+                        <br />
+                        Click <strong>Continue</strong> to load the summary.
+                    </p>
+                    <SolidButton
+                        size="small"
+                        loading={loading}
+                        onClick={handleContinue}
+                    >
+                        Continue
+                    </SolidButton>
+
+                </div>
+                {pivotData && (
+                    <div style={{ marginTop: "20px" }}>
+                        <PivotChart data={pivotData} />
+                    </div>
+                )}
+            </div>
+
+
+        </div>
+    );
+};

package/dist/components/core/extension/solid-core/mqMessage/ui/MqMessageStageBadge.d.ts

@@ -0,0 +1,17 @@
+type MqMessageStageBadgeProps = {
+    stage?: any;
+    className?: string;
+    showDot?: boolean;
+    compact?: boolean;
+    fallbackLabel?: string;
+};
+export declare const getMqMessageStageTone: (stage: any) => {
+    backgroundColor: string;
+    color: string;
+    borderColor: string;
+    dotColor: string;
+};
+export declare const getMqMessageStageLabel: (stage: any, fallbackLabel?: string) => string;
+export declare const MqMessageStageBadge: ({ stage, className, showDot, compact, fallbackLabel, }: MqMessageStageBadgeProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MqMessageStageBadge.d.ts.map

package/dist/components/core/extension/solid-core/mqMessage/ui/MqMessageStageBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MqMessageStageBadge.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/core/extension/solid-core/mqMessage/ui/MqMessageStageBadge.tsx"],"names":[],"mappings":"AAAA,KAAK,wBAAwB,GAAG;IAC5B,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAaF,eAAO,MAAM,qBAAqB,UAAW,GAAG;qBAXK,MAAM;WAAS,MAAM;iBAAe,MAAM;cAAY,MAAM;CAchH,CAAC;AAEF,eAAO,MAAM,sBAAsB,UAAW,GAAG,mCAMhD,CAAC;AAEF,eAAO,MAAM,mBAAmB,2DAM7B,wBAAwB,4CA2C1B,CAAC"}

package/dist/components/core/extension/solid-core/mqMessage/ui/MqMessageStageBadge.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var STAGE_TONES = {
+    pending: { backgroundColor: "#6b7280", color: "#fff", borderColor: "rgba(107, 114, 128, 0.18)", dotColor: "#d1d5db" },
+    scheduled: { backgroundColor: "#3b82f6", color: "#fff", borderColor: "rgba(59, 130, 246, 0.18)", dotColor: "#dbeafe" },
+    started: { backgroundColor: "#eab308", color: "#111827", borderColor: "rgba(234, 179, 8, 0.22)", dotColor: "#fef08a" },
+    retry: { backgroundColor: "#f97316", color: "#fff", borderColor: "rgba(249, 115, 22, 0.18)", dotColor: "#fed7aa" },
+    retrying: { backgroundColor: "#ea580c", color: "#fff", borderColor: "rgba(234, 88, 12, 0.18)", dotColor: "#fdba74" },
+    failed: { backgroundColor: "#ef4444", color: "#fff", borderColor: "rgba(239, 68, 68, 0.18)", dotColor: "#fecaca" },
+    succeeded: { backgroundColor: "#22c55e", color: "#fff", borderColor: "rgba(34, 197, 94, 0.18)", dotColor: "#bbf7d0" },
+    default: { backgroundColor: "#9ca3af", color: "#fff", borderColor: "rgba(156, 163, 175, 0.18)", dotColor: "#e5e7eb" },
+};
+export var getMqMessageStageTone = function (stage) {
+    var key = String(stage || "").toLowerCase();
+    return STAGE_TONES[key] || STAGE_TONES.default;
+};
+export var getMqMessageStageLabel = function (stage, fallbackLabel) {
+    if (fallbackLabel === void 0) { fallbackLabel = "—"; }
+    if (stage === null || stage === undefined || stage === "") {
+        return fallbackLabel;
+    }
+    return String(stage).toLowerCase();
+};
+export var MqMessageStageBadge = function (_a) {
+    var stage = _a.stage, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.showDot, showDot = _c === void 0 ? false : _c, _d = _a.compact, compact = _d === void 0 ? false : _d, _e = _a.fallbackLabel, fallbackLabel = _e === void 0 ? "—" : _e;
+    var label = getMqMessageStageLabel(stage, fallbackLabel);
+    if (label === fallbackLabel) {
+        return _jsx("span", { className: "text-muted ".concat(className).trim(), children: fallbackLabel });
+    }
+    var tone = getMqMessageStageTone(stage);
+    return (_jsxs("span", { className: className, style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: showDot ? "6px" : "0",
+            borderRadius: "999px",
+            padding: compact ? "3px 8px" : "4px 10px",
+            fontSize: compact ? "11px" : "12px",
+            fontWeight: 600,
+            textTransform: "capitalize",
+            backgroundColor: tone.backgroundColor,
+            color: tone.color,
+            border: "1px solid ".concat(tone.borderColor),
+            lineHeight: 1,
+            whiteSpace: "nowrap",
+        }, title: label, children: [showDot && (_jsx("span", { "aria-hidden": "true", style: {
+                    width: "7px",
+                    height: "7px",
+                    borderRadius: "999px",
+                    backgroundColor: tone.dotColor,
+                    flex: "0 0 auto",
+                } })), _jsx("span", { children: label })] }));
+};
+//# sourceMappingURL=MqMessageStageBadge.js.map

package/dist/components/core/extension/solid-core/mqMessage/ui/MqMessageStageBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MqMessageStageBadge.js","sourceRoot":"","sources":["../../../../../../../src/components/core/extension/solid-core/mqMessage/ui/MqMessageStageBadge.tsx"],"names":[],"mappings":"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","sourcesContent":["type MqMessageStageBadgeProps = {\n    stage?: any;\n    className?: string;\n    showDot?: boolean;\n    compact?: boolean;\n    fallbackLabel?: string;\n};\n\nconst STAGE_TONES: Record<string, { backgroundColor: string; color: string; borderColor: string; dotColor: string }> = {\n    pending: { backgroundColor: \"#6b7280\", color: \"#fff\", borderColor: \"rgba(107, 114, 128, 0.18)\", dotColor: \"#d1d5db\" },\n    scheduled: { backgroundColor: \"#3b82f6\", color: \"#fff\", borderColor: \"rgba(59, 130, 246, 0.18)\", dotColor: \"#dbeafe\" },\n    started: { backgroundColor: \"#eab308\", color: \"#111827\", borderColor: \"rgba(234, 179, 8, 0.22)\", dotColor: \"#fef08a\" },\n    retry: { backgroundColor: \"#f97316\", color: \"#fff\", borderColor: \"rgba(249, 115, 22, 0.18)\", dotColor: \"#fed7aa\" },\n    retrying: { backgroundColor: \"#ea580c\", color: \"#fff\", borderColor: \"rgba(234, 88, 12, 0.18)\", dotColor: \"#fdba74\" },\n    failed: { backgroundColor: \"#ef4444\", color: \"#fff\", borderColor: \"rgba(239, 68, 68, 0.18)\", dotColor: \"#fecaca\" },\n    succeeded: { backgroundColor: \"#22c55e\", color: \"#fff\", borderColor: \"rgba(34, 197, 94, 0.18)\", dotColor: \"#bbf7d0\" },\n    default: { backgroundColor: \"#9ca3af\", color: \"#fff\", borderColor: \"rgba(156, 163, 175, 0.18)\", dotColor: \"#e5e7eb\" },\n};\n\nexport const getMqMessageStageTone = (stage: any) => {\n    const key = String(stage || \"\").toLowerCase();\n    return STAGE_TONES[key] || STAGE_TONES.default;\n};\n\nexport const getMqMessageStageLabel = (stage: any, fallbackLabel = \"—\") => {\n    if (stage === null || stage === undefined || stage === \"\") {\n        return fallbackLabel;\n    }\n\n    return String(stage).toLowerCase();\n};\n\nexport const MqMessageStageBadge = ({\n    stage,\n    className = \"\",\n    showDot = false,\n    compact = false,\n    fallbackLabel = \"—\",\n}: MqMessageStageBadgeProps) => {\n    const label = getMqMessageStageLabel(stage, fallbackLabel);\n    if (label === fallbackLabel) {\n        return <span className={`text-muted ${className}`.trim()}>{fallbackLabel}</span>;\n    }\n\n    const tone = getMqMessageStageTone(stage);\n\n    return (\n        <span\n            className={className}\n            style={{\n                display: \"inline-flex\",\n                alignItems: \"center\",\n                gap: showDot ? \"6px\" : \"0\",\n                borderRadius: \"999px\",\n                padding: compact ? \"3px 8px\" : \"4px 10px\",\n                fontSize: compact ? \"11px\" : \"12px\",\n                fontWeight: 600,\n                textTransform: \"capitalize\",\n                backgroundColor: tone.backgroundColor,\n                color: tone.color,\n                border: `1px solid ${tone.borderColor}`,\n                lineHeight: 1,\n                whiteSpace: \"nowrap\",\n            }}\n            title={label}\n        >\n            {showDot && (\n                <span\n                    aria-hidden=\"true\"\n                    style={{\n                        width: \"7px\",\n                        height: \"7px\",\n                        borderRadius: \"999px\",\n                        backgroundColor: tone.dotColor,\n                        flex: \"0 0 auto\",\n                    }}\n                />\n            )}\n            <span>{label}</span>\n        </span>\n    );\n};\n\n"]}

package/dist/components/core/extension/solid-core/mqMessage/ui/MqMessageStageBadge.tsx

@@ -0,0 +1,83 @@
+type MqMessageStageBadgeProps = {
+    stage?: any;
+    className?: string;
+    showDot?: boolean;
+    compact?: boolean;
+    fallbackLabel?: string;
+};
+
+const STAGE_TONES: Record<string, { backgroundColor: string; color: string; borderColor: string; dotColor: string }> = {
+    pending: { backgroundColor: "#6b7280", color: "#fff", borderColor: "rgba(107, 114, 128, 0.18)", dotColor: "#d1d5db" },
+    scheduled: { backgroundColor: "#3b82f6", color: "#fff", borderColor: "rgba(59, 130, 246, 0.18)", dotColor: "#dbeafe" },
+    started: { backgroundColor: "#eab308", color: "#111827", borderColor: "rgba(234, 179, 8, 0.22)", dotColor: "#fef08a" },
+    retry: { backgroundColor: "#f97316", color: "#fff", borderColor: "rgba(249, 115, 22, 0.18)", dotColor: "#fed7aa" },
+    retrying: { backgroundColor: "#ea580c", color: "#fff", borderColor: "rgba(234, 88, 12, 0.18)", dotColor: "#fdba74" },
+    failed: { backgroundColor: "#ef4444", color: "#fff", borderColor: "rgba(239, 68, 68, 0.18)", dotColor: "#fecaca" },
+    succeeded: { backgroundColor: "#22c55e", color: "#fff", borderColor: "rgba(34, 197, 94, 0.18)", dotColor: "#bbf7d0" },
+    default: { backgroundColor: "#9ca3af", color: "#fff", borderColor: "rgba(156, 163, 175, 0.18)", dotColor: "#e5e7eb" },
+};
+
+export const getMqMessageStageTone = (stage: any) => {
+    const key = String(stage || "").toLowerCase();
+    return STAGE_TONES[key] || STAGE_TONES.default;
+};
+
+export const getMqMessageStageLabel = (stage: any, fallbackLabel = "—") => {
+    if (stage === null || stage === undefined || stage === "") {
+        return fallbackLabel;
+    }
+
+    return String(stage).toLowerCase();
+};
+
+export const MqMessageStageBadge = ({
+    stage,
+    className = "",
+    showDot = false,
+    compact = false,
+    fallbackLabel = "—",
+}: MqMessageStageBadgeProps) => {
+    const label = getMqMessageStageLabel(stage, fallbackLabel);
+    if (label === fallbackLabel) {
+        return <span className={`text-muted ${className}`.trim()}>{fallbackLabel}</span>;
+    }
+
+    const tone = getMqMessageStageTone(stage);
+
+    return (
+        <span
+            className={className}
+            style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: showDot ? "6px" : "0",
+                borderRadius: "999px",
+                padding: compact ? "3px 8px" : "4px 10px",
+                fontSize: compact ? "11px" : "12px",
+                fontWeight: 600,
+                textTransform: "capitalize",
+                backgroundColor: tone.backgroundColor,
+                color: tone.color,
+                border: `1px solid ${tone.borderColor}`,
+                lineHeight: 1,
+                whiteSpace: "nowrap",
+            }}
+            title={label}
+        >
+            {showDot && (
+                <span
+                    aria-hidden="true"
+                    style={{
+                        width: "7px",
+                        height: "7px",
+                        borderRadius: "999px",
+                        backgroundColor: tone.dotColor,
+                        flex: "0 0 auto",
+                    }}
+                />
+            )}
+            <span>{label}</span>
+        </span>
+    );
+};
+

package/dist/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RolePermissionsManyToManyFieldWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAe5E,eAAO,MAAM,oCAAoC,6BAA8B,yBAAyB,4CAsIvG,CAAC"}
+{"version":3,"file":"RolePermissionsManyToManyFieldWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAe5E,eAAO,MAAM,oCAAoC,6BAA8B,yBAAyB,4CAoHvG,CAAC"}

package/dist/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.js

@@ -9,15 +9,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { capitalize } from "lodash";
-import { Message } from "primereact/message";
-import { Panel } from "primereact/panel";
 import { useEffect, useState } from "react";
-import { Button } from "primereact/button";
+import { SolidButton, SolidCheckbox, SolidMessage, SolidPanel } from "../../../../shad-cn-ui";
 import { useRelationEntityHandler } from "../../../../../components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler";
 import { InlineRelationEntityDialog } from "../../../../../components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog";
-import { Checkbox } from "primereact/checkbox";
 import qs from 'qs';
 var groupByController = function (items) {
     var grouped = {};
@@ -35,9 +32,8 @@ export var RolePermissionsManyToManyFieldWidget = function (_a) {
     var formik = _a.formik, fieldContext = _a.fieldContext;
     var fieldLayoutInfo = fieldContext.field;
     var readOnlyPermission = fieldContext.readOnly;
-    var _j = useState(false), visibleCreateDialog = _j[0], setVisibleCreateDialog = _j[1];
-    var _k = useState({}), visibleDialogs = _k[0], setVisibleDialogs = _k[1];
-    var _l = useRelationEntityHandler({ fieldContext: fieldContext }), allOptions = _l.allOptions, currentValues = _l.currentValues, fetchAllOptions = _l.fetchAllOptions, fetchCurrentValues = _l.fetchCurrentValues, linkItem = _l.linkItem, unlinkItem = _l.unlinkItem, addNewRelation = _l.addNewRelation;
+    var _j = useState({}), visibleDialogs = _j[0], setVisibleDialogs = _j[1];
+    var _k = useRelationEntityHandler({ fieldContext: fieldContext }), allOptions = _k.allOptions, currentValues = _k.currentValues, fetchAllOptions = _k.fetchAllOptions, fetchCurrentValues = _k.fetchCurrentValues, linkItem = _k.linkItem, unlinkItem = _k.unlinkItem, addNewRelation = _k.addNewRelation;
     // On mount: load already-linked permissions into currentValues
     useEffect(function () {
         fetchCurrentValues();
@@ -56,20 +52,16 @@ export var RolePermissionsManyToManyFieldWidget = function (_a) {
             linkItem(item);
         }
     };
-    var getHeaderTemplate = function (controllerName) { return function (options) {
-        var className = "".concat(options.className, " justify-content-space-between");
-        return (_jsxs("div", { className: className, children: [_jsxs("div", { className: "flex align-items-center gap-3", children: [_jsx("label", { className: "form-field-label text-base lg:text-lg font-bold", children: controllerName }), fieldContext.field.attrs.inlineCreate && (_jsxs(_Fragment, { children: [_jsx(Button, { icon: "pi pi-plus", rounded: true, outlined: true, "aria-label": "Add", type: "button", size: "small", onClick: function () {
-                                        return setVisibleDialogs(function (prev) {
-                                            var _a;
-                                            return (__assign(__assign({}, prev), (_a = {}, _a[controllerName] = true, _a)));
-                                        });
-                                    }, className: "custom-add-button", disabled: isUnsaved }), _jsx(InlineRelationEntityDialog, { visible: visibleCreateDialog, setVisible: setVisibleCreateDialog, fieldContext: fieldContext, onCreate: addNewRelation })] }))] }), _jsx("div", { children: options.togglerElement })] }));
-    }; };
     var isUnsaved = ((_c = fieldContext.data) === null || _c === void 0 ? void 0 : _c.id) === undefined || ((_d = fieldContext.data) === null || _d === void 0 ? void 0 : _d.id) === "new";
     var entityName = ((_h = (_g = (_f = (_e = fieldContext.solidFormViewMetaData) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.solidView) === null || _g === void 0 ? void 0 : _g.model) === null || _h === void 0 ? void 0 : _h.displayName) || capitalize(fieldContext.modelName);
     var fieldLabel = fieldLayoutInfo.attrs.label || "Permissions";
     var groupedEntities = groupByController(allOptions || []);
-    return (_jsxs("div", { children: [isUnsaved && (_jsx("div", { className: "mb-2", children: _jsx(Message, { severity: "warn", text: "Please save the ".concat(entityName, " first to assign ").concat(fieldLabel, "."), className: "w-full justify-content-start" }) })), Object.keys(groupedEntities).map(function (controllerName) { return (_jsx(Panel, { toggleable: true, headerTemplate: getHeaderTemplate(controllerName), className: "mt-3 lg:mt-4", children: _jsx("div", { className: "formgrid grid gap-3 lg:gap-0", children: groupedEntities[controllerName].map(function (entity, i) { return (_jsxs("div", { className: "field col-12 lg:col-6 flex gap-2 ".concat(i >= 2 ? 'lg:mt-3' : ''), children: [_jsx(Checkbox, { readOnly: readOnlyPermission || isUnsaved, disabled: isUnsaved, inputId: entity.label, checked: currentValues.some(function (s) { return s.value === entity.value; }), onChange: function () { return handleCheckboxChange(entity); } }), _jsx("label", { htmlFor: entity.label, className: "form-field-label m-0 solid-permisson-form-label", children: entity.label })] }, entity.value)); }) }) }, controllerName)); }), Object.keys(groupedEntities).map(function (controllerName) { return (_jsx(InlineRelationEntityDialog, { visible: visibleDialogs[controllerName] || false, setVisible: function (visible) {
+    return (_jsxs("div", { children: [isUnsaved && (_jsx("div", { className: "mb-2", children: _jsx(SolidMessage, { severity: "warn", text: "Please save the ".concat(entityName, " first to assign ").concat(fieldLabel, "."), className: "w-full justify-content-start" }) })), Object.keys(groupedEntities).map(function (controllerName) { return (_jsx(SolidPanel, { toggleable: true, header: _jsxs("div", { className: "flex align-items-center gap-3 justify-content-between w-full", children: [_jsx("span", { className: "form-field-label text-base lg:text-lg font-bold", children: controllerName }), fieldContext.field.attrs.inlineCreate && (_jsx(SolidButton, { icon: "si si-plus", rounded: true, outlined: true, "aria-label": "Add", type: "button", size: "sm", onClick: function () {
+                                return setVisibleDialogs(function (prev) {
+                                    var _a;
+                                    return (__assign(__assign({}, prev), (_a = {}, _a[controllerName] = true, _a)));
+                                });
+                            }, className: "custom-add-button", disabled: isUnsaved }))] }), className: "mt-3 lg:mt-4", children: _jsx("div", { className: "formgrid grid gap-3 lg:gap-0", children: groupedEntities[controllerName].map(function (entity, i) { return (_jsxs("div", { className: "field col-12 lg:col-6 flex gap-2 ".concat(i >= 2 ? 'lg:mt-3' : ''), children: [_jsx(SolidCheckbox, { readOnly: readOnlyPermission || isUnsaved, disabled: isUnsaved, id: entity.label, checked: currentValues.some(function (s) { return s.value === entity.value; }), onChange: function () { return handleCheckboxChange(entity); } }), _jsx("label", { htmlFor: entity.label, className: "form-field-label m-0 solid-permisson-form-label", children: entity.label })] }, entity.value)); }) }) }, controllerName)); }), Object.keys(groupedEntities).map(function (controllerName) { return (_jsx(InlineRelationEntityDialog, { visible: visibleDialogs[controllerName] || false, setVisible: function (visible) {
                     return setVisibleDialogs(function (prev) {
                         var _a;
                         return (__assign(__assign({}, prev), (_a = {}, _a[controllerName] = visible, _a)));

package/dist/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"RolePermissionsManyToManyFieldWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["import { capitalize } from \"lodash\";\nimport { Message } from \"primereact/message\";\nimport { Panel } from \"primereact/panel\";\nimport { useEffect, useState } from \"react\";\nimport { Button } from \"primereact/button\";\nimport { useRelationEntityHandler } from \"../../../../../components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler\";\nimport { InlineRelationEntityDialog } from \"../../../../../components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog\";\nimport { Checkbox } from \"primereact/checkbox\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport qs from 'qs';\n\nconst groupByController = (items: any[]) => {\n    const grouped: { [key: string]: any[] } = {};\n    items.forEach((item) => {\n        const controllerName = item.label.split(\".\")[0];\n        if (!grouped[controllerName]) {\n            grouped[controllerName] = [];\n        }\n        grouped[controllerName].push(item);\n    });\n    return grouped;\n};\n\nexport const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n    const fieldLayoutInfo = fieldContext.field;\n    const readOnlyPermission = fieldContext.readOnly;\n    const [visibleCreateDialog, setVisibleCreateDialog] = useState(false);\n\n    const [visibleDialogs, setVisibleDialogs] = useState<{ [key: string]: boolean }>({});\n\n    const {\n        allOptions,\n        currentValues,\n        fetchAllOptions,\n        fetchCurrentValues,\n        linkItem,\n        unlinkItem,\n        addNewRelation,\n    } = useRelationEntityHandler({ fieldContext });\n\n    // On mount: load already-linked permissions into currentValues\n    useEffect(() => {\n        fetchCurrentValues();\n    }, [fieldContext.data?.id]);\n\n    // On mount: load all available permissions into allOptions\n    useEffect(() => {\n        const queryData = { offset: 0, limit: 1000 };\n        fetchAllOptions(qs.stringify(queryData, { encodeValuesOnly: true }));\n    }, []);\n\n    const handleCheckboxChange = (item: any) => {\n        const isCurrentlyLinked = currentValues.some((s) => s.value === item.value);\n        if (isCurrentlyLinked) {\n            unlinkItem(item);\n        } else {\n            linkItem(item);\n        }\n    };\n\n    const getHeaderTemplate = (controllerName: string) => (options: any) => {\n        const className = `${options.className} justify-content-space-between`;\n\n        return (\n            <div className={className}>\n                <div className=\"flex align-items-center gap-3\">\n                    <label className=\"form-field-label text-base lg:text-lg font-bold\">\n                        {controllerName}\n                    </label>\n                    {fieldContext.field.attrs.inlineCreate && (\n                        <>\n                            <Button\n                                icon=\"pi pi-plus\"\n                                rounded\n                                outlined\n                                aria-label=\"Add\"\n                                type=\"button\"\n                                size=\"small\"\n                                onClick={() =>\n                                    setVisibleDialogs((prev) => ({\n                                        ...prev,\n                                        [controllerName]: true,\n                                    }))\n                                }\n                                className=\"custom-add-button\"\n                                disabled={isUnsaved}\n                            />\n                            <InlineRelationEntityDialog\n                                visible={visibleCreateDialog}\n                                setVisible={setVisibleCreateDialog}\n                                fieldContext={fieldContext}\n                                onCreate={addNewRelation}\n                            />\n                        </>\n                    )}\n                </div>\n                <div>{options.togglerElement}</div>\n            </div>\n        );\n    };\n\n    const isUnsaved = fieldContext.data?.id === undefined || fieldContext.data?.id === \"new\";\n    const entityName = fieldContext.solidFormViewMetaData?.data?.solidView?.model?.displayName || capitalize(fieldContext.modelName);\n    const fieldLabel = fieldLayoutInfo.attrs.label || \"Permissions\";\n\n    const groupedEntities = groupByController(allOptions || []);\n    return (\n        <div>\n            {isUnsaved && (\n                <div className=\"mb-2\">\n                    <Message severity=\"warn\" text={`Please save the ${entityName} first to assign ${fieldLabel}.`} className=\"w-full justify-content-start\" />\n                </div>\n            )}\n            {Object.keys(groupedEntities).map((controllerName) => (\n                <Panel\n                    key={controllerName}\n                    toggleable\n                    headerTemplate={getHeaderTemplate(controllerName)}\n                    className=\"mt-3 lg:mt-4\"\n                >\n                    <div className=\"formgrid grid gap-3 lg:gap-0\">\n                        {groupedEntities[controllerName].map((entity: any, i: number) => (\n                            <div\n                                key={entity.value}\n                                className={`field col-12 lg:col-6 flex gap-2 ${i >= 2 ? 'lg:mt-3' : ''}`}\n                            >\n                                <Checkbox\n                                    readOnly={readOnlyPermission || isUnsaved}\n                                    disabled={isUnsaved}\n                                    inputId={entity.label}\n                                    checked={currentValues.some((s) => s.value === entity.value)}\n                                    onChange={() => handleCheckboxChange(entity)}\n                                />\n                                <label htmlFor={entity.label} className=\"form-field-label m-0 solid-permisson-form-label\">\n                                    {entity.label}\n                                </label>\n                            </div>\n                        ))}\n                    </div>\n                </Panel>\n            ))}\n            {Object.keys(groupedEntities).map((controllerName) => (\n                <InlineRelationEntityDialog\n                    key={`dialog-${controllerName}`}\n                    visible={visibleDialogs[controllerName] || false}\n                    setVisible={(visible: any) =>\n                        setVisibleDialogs((prev) => ({\n                            ...prev,\n                            [controllerName]: visible,\n                        }))\n                    }\n                    fieldContext={fieldContext}\n                    onCreate={addNewRelation}\n                />\n            ))}\n        </div>\n    );\n};"]}
+{"version":3,"file":"RolePermissionsManyToManyFieldWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["import { capitalize } from \"lodash\";\nimport { useEffect, useState } from \"react\";\nimport { SolidButton, SolidCheckbox, SolidMessage, SolidPanel } from \"../../../../shad-cn-ui\";\nimport { useRelationEntityHandler } from \"../../../../../components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler\";\nimport { InlineRelationEntityDialog } from \"../../../../../components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport qs from 'qs';\n\nconst groupByController = (items: any[]) => {\n    const grouped: { [key: string]: any[] } = {};\n    items.forEach((item) => {\n        const controllerName = item.label.split(\".\")[0];\n        if (!grouped[controllerName]) {\n            grouped[controllerName] = [];\n        }\n        grouped[controllerName].push(item);\n    });\n    return grouped;\n};\n\nexport const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n    const fieldLayoutInfo = fieldContext.field;\n    const readOnlyPermission = fieldContext.readOnly;\n\n    const [visibleDialogs, setVisibleDialogs] = useState<{ [key: string]: boolean }>({});\n\n    const {\n        allOptions,\n        currentValues,\n        fetchAllOptions,\n        fetchCurrentValues,\n        linkItem,\n        unlinkItem,\n        addNewRelation,\n    } = useRelationEntityHandler({ fieldContext });\n\n    // On mount: load already-linked permissions into currentValues\n    useEffect(() => {\n        fetchCurrentValues();\n    }, [fieldContext.data?.id]);\n\n    // On mount: load all available permissions into allOptions\n    useEffect(() => {\n        const queryData = { offset: 0, limit: 1000 };\n        fetchAllOptions(qs.stringify(queryData, { encodeValuesOnly: true }));\n    }, []);\n\n    const handleCheckboxChange = (item: any) => {\n        const isCurrentlyLinked = currentValues.some((s) => s.value === item.value);\n        if (isCurrentlyLinked) {\n            unlinkItem(item);\n        } else {\n            linkItem(item);\n        }\n    };\n\n    const isUnsaved = fieldContext.data?.id === undefined || fieldContext.data?.id === \"new\";\n    const entityName = fieldContext.solidFormViewMetaData?.data?.solidView?.model?.displayName || capitalize(fieldContext.modelName);\n    const fieldLabel = fieldLayoutInfo.attrs.label || \"Permissions\";\n\n    const groupedEntities = groupByController(allOptions || []);\n    return (\n        <div>\n            {isUnsaved && (\n                <div className=\"mb-2\">\n                    <SolidMessage severity=\"warn\" text={`Please save the ${entityName} first to assign ${fieldLabel}.`} className=\"w-full justify-content-start\" />\n                </div>\n            )}\n            {Object.keys(groupedEntities).map((controllerName) => (\n                <SolidPanel\n                    key={controllerName}\n                    toggleable\n                    header={\n                        <div className=\"flex align-items-center gap-3 justify-content-between w-full\">\n                            <span className=\"form-field-label text-base lg:text-lg font-bold\">\n                                {controllerName}\n                            </span>\n                            {fieldContext.field.attrs.inlineCreate && (\n                                <SolidButton\n                                    icon=\"si si-plus\"\n                                    rounded\n                                    outlined\n                                    aria-label=\"Add\"\n                                    type=\"button\"\n                                    size=\"sm\"\n                                    onClick={() =>\n                                        setVisibleDialogs((prev) => ({\n                                            ...prev,\n                                            [controllerName]: true,\n                                        }))\n                                    }\n                                    className=\"custom-add-button\"\n                                    disabled={isUnsaved}\n                                />\n                            )}\n                        </div>\n                    }\n                    className=\"mt-3 lg:mt-4\"\n                >\n                    <div className=\"formgrid grid gap-3 lg:gap-0\">\n                        {groupedEntities[controllerName].map((entity: any, i: number) => (\n                            <div\n                                key={entity.value}\n                                className={`field col-12 lg:col-6 flex gap-2 ${i >= 2 ? 'lg:mt-3' : ''}`}\n                            >\n                                <SolidCheckbox\n                                    readOnly={readOnlyPermission || isUnsaved}\n                                    disabled={isUnsaved}\n                                    id={entity.label}\n                                    checked={currentValues.some((s) => s.value === entity.value)}\n                                    onChange={() => handleCheckboxChange(entity)}\n                                />\n                                <label htmlFor={entity.label} className=\"form-field-label m-0 solid-permisson-form-label\">\n                                    {entity.label}\n                                </label>\n                            </div>\n                        ))}\n                    </div>\n                </SolidPanel>\n            ))}\n            {Object.keys(groupedEntities).map((controllerName) => (\n                <InlineRelationEntityDialog\n                    key={`dialog-${controllerName}`}\n                    visible={visibleDialogs[controllerName] || false}\n                    setVisible={(visible: any) =>\n                        setVisibleDialogs((prev) => ({\n                            ...prev,\n                            [controllerName]: visible,\n                        }))\n                    }\n                    fieldContext={fieldContext}\n                    onCreate={addNewRelation}\n                />\n            ))}\n        </div>\n    );\n};\n"]}

package/dist/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx

@@ -1,11 +1,8 @@
 import { capitalize } from "lodash";
-import { Message } from "primereact/message";
-import { Panel } from "primereact/panel";
 import { useEffect, useState } from "react";
-import { Button } from "primereact/button";
+import { SolidButton, SolidCheckbox, SolidMessage, SolidPanel } from "../../../../shad-cn-ui";
 import { useRelationEntityHandler } from "../../../../../components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler";
 import { InlineRelationEntityDialog } from "../../../../../components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog";
-import { Checkbox } from "primereact/checkbox";
 import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
 import qs from 'qs';
 
@@ -24,7 +21,6 @@ const groupByController = (items: any[]) => {
 export const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
     const fieldLayoutInfo = fieldContext.field;
     const readOnlyPermission = fieldContext.readOnly;
-    const [visibleCreateDialog, setVisibleCreateDialog] = useState(false);
 
     const [visibleDialogs, setVisibleDialogs] = useState<{ [key: string]: boolean }>({});
 
@@ -58,47 +54,6 @@ export const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: S
         }
     };
 
-    const getHeaderTemplate = (controllerName: string) => (options: any) => {
-        const className = `${options.className} justify-content-space-between`;
-
-        return (
-            <div className={className}>
-                <div className="flex align-items-center gap-3">
-                    <label className="form-field-label text-base lg:text-lg font-bold">
-                        {controllerName}
-                    </label>
-                    {fieldContext.field.attrs.inlineCreate && (
-                        <>
-                            <Button
-                                icon="pi pi-plus"
-                                rounded
-                                outlined
-                                aria-label="Add"
-                                type="button"
-                                size="small"
-                                onClick={() =>
-                                    setVisibleDialogs((prev) => ({
-                                        ...prev,
-                                        [controllerName]: true,
-                                    }))
-                                }
-                                className="custom-add-button"
-                                disabled={isUnsaved}
-                            />
-                            <InlineRelationEntityDialog
-                                visible={visibleCreateDialog}
-                                setVisible={setVisibleCreateDialog}
-                                fieldContext={fieldContext}
-                                onCreate={addNewRelation}
-                            />
-                        </>
-                    )}
-                </div>
-                <div>{options.togglerElement}</div>
-            </div>
-        );
-    };
-
     const isUnsaved = fieldContext.data?.id === undefined || fieldContext.data?.id === "new";
     const entityName = fieldContext.solidFormViewMetaData?.data?.solidView?.model?.displayName || capitalize(fieldContext.modelName);
     const fieldLabel = fieldLayoutInfo.attrs.label || "Permissions";
@@ -108,14 +63,38 @@ export const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: S
         <div>
             {isUnsaved && (
                 <div className="mb-2">
-                    <Message severity="warn" text={`Please save the ${entityName} first to assign ${fieldLabel}.`} className="w-full justify-content-start" />
+                    <SolidMessage severity="warn" text={`Please save the ${entityName} first to assign ${fieldLabel}.`} className="w-full justify-content-start" />
                 </div>
             )}
             {Object.keys(groupedEntities).map((controllerName) => (
-                <Panel
+                <SolidPanel
                     key={controllerName}
                     toggleable
-                    headerTemplate={getHeaderTemplate(controllerName)}
+                    header={
+                        <div className="flex align-items-center gap-3 justify-content-between w-full">
+                            <span className="form-field-label text-base lg:text-lg font-bold">
+                                {controllerName}
+                            </span>
+                            {fieldContext.field.attrs.inlineCreate && (
+                                <SolidButton
+                                    icon="si si-plus"
+                                    rounded
+                                    outlined
+                                    aria-label="Add"
+                                    type="button"
+                                    size="sm"
+                                    onClick={() =>
+                                        setVisibleDialogs((prev) => ({
+                                            ...prev,
+                                            [controllerName]: true,
+                                        }))
+                                    }
+                                    className="custom-add-button"
+                                    disabled={isUnsaved}
+                                />
+                            )}
+                        </div>
+                    }
                     className="mt-3 lg:mt-4"
                 >
                     <div className="formgrid grid gap-3 lg:gap-0">
@@ -124,10 +103,10 @@ export const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: S
                                 key={entity.value}
                                 className={`field col-12 lg:col-6 flex gap-2 ${i >= 2 ? 'lg:mt-3' : ''}`}
                             >
-                                <Checkbox
+                                <SolidCheckbox
                                     readOnly={readOnlyPermission || isUnsaved}
                                     disabled={isUnsaved}
-                                    inputId={entity.label}
+                                    id={entity.label}
                                     checked={currentValues.some((s) => s.value === entity.value)}
                                     onChange={() => handleCheckboxChange(entity)}
                                 />
@@ -137,7 +116,7 @@ export const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: S
                             </div>
                         ))}
                     </div>
-                </Panel>
+                </SolidPanel>
             ))}
             {Object.keys(groupedEntities).map((controllerName) => (
                 <InlineRelationEntityDialog
@@ -155,4 +134,4 @@ export const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: S
             ))}
         </div>
     );
-};
+};

package/dist/components/core/field/FieldListViewData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldListViewData.d.ts","sourceRoot":"","sources":["../../../../src/components/core/field/FieldListViewData.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,iBAAiB,+CAgS7B,CAAC"}
+{"version":3,"file":"FieldListViewData.d.ts","sourceRoot":"","sources":["../../../../src/components/core/field/FieldListViewData.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AASD,eAAO,MAAM,iBAAiB,+CAkP7B,CAAC"}