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

package/dist/components/core/card/SolidCardView.tsx

@@ -0,0 +1,528 @@
+import { permissionExpression } from "../../../helpers/permissions";
+import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
+import { useGetSolidViewLayoutQuery } from "../../../redux/api/solidViewApi";
+import { useLazyCheckIfPermissionExistsQuery } from "../../../redux/api/userApi";
+import qs from "qs";
+import { ChangeEvent, useEffect, useRef, useState } from "react";
+import { SolidLightbox } from "../../shad-cn-ui/SolidLightbox";
+import type { SolidLightboxSlide } from "../../shad-cn-ui/SolidLightbox";
+import { getMediaTypeFromUrl } from "../../../helpers/mediaType";
+import { useDispatch, useSelector } from "react-redux";
+import { showNavbar, toggleNavbar } from "../../../redux/features/navbarSlice";
+import { usePathname } from "../../../hooks/usePathname";
+import { useSearchParams } from "../../../hooks/useSearchParams";
+import { SolidHeaderRequestStatus } from "../../common/SolidHeaderRequestStatus";
+import { SolidCreateButton } from "../common/SolidCreateButton";
+import { SolidGlobalSearchElement } from "../common/SolidGlobalSearchElement";
+import { SolidEmptyListViewPlaceholder } from "../list/SolidEmptyListViewPlaceholder";
+import { getFilterObjectFromLocalStorage, setFilterObjectToLocalStorage } from "../list/SolidListView";
+import { normalizeSolidListTreeKanbanActionPath } from "../../../helpers/routePaths";
+import { SolidCardViewConfigure } from "./SolidCardViewConfigure";
+import { CardGrid } from "./CardGrid";
+import { CardUserViewLayout } from "./CardUserViewLayout";
+import {
+  SolidButton,
+  SolidDialog,
+  SolidDialogBody,
+  SolidDialogClose,
+  SolidDialogHeader,
+  SolidDialogSeparator,
+  SolidDialogTitle,
+  SolidIcon,
+} from "../../shad-cn-ui";
+
+type SolidCardViewParams = {
+  moduleName: string;
+  modelName: string;
+  embeded: boolean;
+};
+
+const deriveCardViewConfig = (solidCardViewMetaData: any) => {
+  const solidView = solidCardViewMetaData?.data?.solidView;
+  const solidFieldsMetadata = solidCardViewMetaData?.data?.solidFieldsMetadata || {};
+  const layoutAttrs = solidView?.layout?.attrs || {};
+  const toPopulate: string[] = [];
+  const toPopulateMedia: string[] = [];
+
+  const findCardNode = (nodes: any[] = []): any => {
+    for (const node of nodes) {
+      if (!node) continue;
+      if (node.type === "card") return node;
+      if (Array.isArray(node.children) && node.children.length > 0) {
+        const nestedCard = findCardNode(node.children);
+        if (nestedCard) return nestedCard;
+      }
+    }
+
+    return null;
+  };
+
+  const extractFields = (nodes: any, result: any[] = []) => {
+    if (!nodes) return result;
+
+    if (Array.isArray(nodes)) {
+      nodes.forEach((node: any) => extractFields(node, result));
+      return result;
+    }
+
+    if (nodes.type === "field") {
+      result.push(nodes);
+    }
+    if (Array.isArray(nodes.children)) {
+      nodes.children.forEach((child: any) => extractFields(child, result));
+    }
+    return result;
+  };
+
+  const cardNode = findCardNode(solidView?.layout?.children || []);
+  const fieldSource = cardNode?.children?.length ? cardNode.children : solidView?.layout?.children || [];
+  const layoutFields = extractFields(fieldSource);
+  layoutFields.forEach((column: any) => {
+    const fieldMetadata = solidFieldsMetadata[column?.attrs?.name];
+    if (!fieldMetadata) return;
+
+    if (fieldMetadata.type === "relation") {
+      toPopulate.push(fieldMetadata.name);
+    }
+    if (fieldMetadata.type === "mediaSingle" || fieldMetadata.type === "mediaMultiple") {
+      toPopulateMedia.push(fieldMetadata.name);
+    }
+  });
+
+  return {
+    rows: layoutAttrs.pageSize || 24,
+    pageSizeOptions: layoutAttrs.pageSizeOptions || [12, 24, 48],
+    toPopulate,
+    toPopulateMedia,
+  };
+};
+
+export const SolidCardView = (params: SolidCardViewParams) => {
+  const visibleNavbar = useSelector((state: any) => state.navbarState?.visibleNavbar);
+  const dispatch = useDispatch();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const solidGlobalSearchElementRef = useRef<any>();
+
+  const [actionsAllowed, setActionsAllowed] = useState<string[]>([]);
+  const [showGlobalSearchElement, setShowGlobalSearchElement] = useState(false);
+  const [viewModes, setViewModes] = useState<any[]>([]);
+  const [filters, setFilters] = useState<any>({ $and: [] });
+  const [cards, setCards] = useState<any[]>([]);
+  const [toPopulate, setToPopulate] = useState<string[]>([]);
+  const [toPopulateMedia, setToPopulateMedia] = useState<string[]>([]);
+  const [rows, setRows] = useState(24);
+  const [rowsPerPageOptions, setRowsPerPageOptions] = useState<any[]>([12, 24, 48]);
+  const [first, setFirst] = useState(0);
+  const [totalRecords, setTotalRecords] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [showSaveFilterPopup, setShowSaveFilterPopup] = useState(false);
+  const [createButtonUrl, setCreateButtonUrl] = useState<string>();
+  const [editButtonUrl, setEditButtonUrl] = useState<string>();
+  const [createActionQueryParams, setCreateActionQueryParams] = useState<Record<string, string>>({});
+  const [openLightbox, setOpenLightbox] = useState(false);
+  const [lightboxUrls, setLightboxUrls] = useState<any[]>([]);
+  const [isLayoutDialogVisible, setLayoutDialogVisible] = useState(false);
+  const [queryDataLoaded, setQueryDataLoaded] = useState(false);
+  const [solidCardViewMetaData, setSolidCardViewMetaData] = useState<any>();
+  const [triggerCheckIfPermissionExists] = useLazyCheckIfPermissionExistsQuery();
+
+  const lightboxSlides: SolidLightboxSlide[] = Array.isArray(lightboxUrls)
+    ? lightboxUrls
+      .map((item: any) => {
+        const src = item?.src || item?.downloadUrl || "";
+        if (!src) {
+          return null;
+        }
+        const mediaType = getMediaTypeFromUrl(src);
+        const slide: SolidLightboxSlide = { src };
+        if (mediaType !== "image") {
+          slide.type = mediaType;
+        }
+        return slide;
+      })
+      .filter((slide): slide is SolidLightboxSlide => !!slide)
+    : [];
+
+  const entityApi = createSolidEntityApi(params.modelName);
+  const { useLazyGetSolidEntitiesQuery } = entityApi;
+  const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();
+
+  const menuItemId = searchParams.get("menuItemId");
+  const menuItemName = searchParams.get("menuItemName");
+  const actionId = searchParams.get("actionId");
+  const actionName = searchParams.get("actionName");
+
+  const cardViewMetaDataQs = qs.stringify(
+    {
+      modelName: params.modelName,
+      moduleName: params.moduleName,
+      viewType: "card",
+      menuItemId,
+      menuItemName,
+      actionId,
+      actionName,
+    },
+    {
+      encodeValuesOnly: true,
+    }
+  );
+
+  const { data: solidCardViewMetaDataResponse } = useGetSolidViewLayoutQuery(cardViewMetaDataQs);
+
+  const editBaseUrl = normalizeSolidListTreeKanbanActionPath(pathname, editButtonUrl || "form");
+  const rowsOptions = rowsPerPageOptions && rowsPerPageOptions.length > 0 ? rowsPerPageOptions : [12, 24, 48];
+  const paginationStart = totalRecords === 0 ? 0 : first + 1;
+  const paginationEnd = Math.min(first + rows, totalRecords);
+  const totalPages = rows > 0 ? Math.max(1, Math.ceil(totalRecords / rows)) : 1;
+  const currentPage = rows > 0 ? Math.floor(first / rows) + 1 : 1;
+  const paginationReport = `${paginationStart} - ${paginationEnd} of ${totalRecords}`;
+  const canGoPrev = currentPage > 1;
+  const canGoNext = currentPage < totalPages;
+
+  const handleRowsChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    const nextRows = Number(event.target.value);
+    setRows(nextRows);
+    setFirst(0);
+  };
+
+  const handlePrevPage = () => {
+    if (!canGoPrev) return;
+    setFirst(Math.max(0, first - rows));
+  };
+
+  const handleNextPage = () => {
+    if (!canGoNext) return;
+    setFirst(Math.min((totalPages - 1) * rows, first + rows));
+  };
+
+  useEffect(() => {
+    const fetchPermissions = async () => {
+      if (!params.modelName) return;
+
+      const permissionNames = [
+        permissionExpression(params.modelName, "create"),
+        permissionExpression(params.modelName, "update"),
+        permissionExpression(params.modelName, "findMany"),
+        permissionExpression("importTransaction", "create"),
+        permissionExpression("exportTransaction", "create"),
+        permissionExpression("userViewMetadata", "create"),
+        permissionExpression("savedFilters", "create"),
+      ];
+
+      const queryString = qs.stringify(
+        { permissionNames },
+        { encodeValuesOnly: true }
+      );
+      const response = await triggerCheckIfPermissionExists(queryString);
+      setActionsAllowed(response.data?.data || []);
+    };
+
+    fetchPermissions();
+  }, [params.modelName]);
+
+  useEffect(() => {
+    if (!solidCardViewMetaDataResponse) return;
+
+    setSolidCardViewMetaData(solidCardViewMetaDataResponse);
+    setViewModes(solidCardViewMetaDataResponse?.data?.viewModes || []);
+
+    const { rows, pageSizeOptions, toPopulate, toPopulateMedia } = deriveCardViewConfig(solidCardViewMetaDataResponse);
+    const persistedFilterObject = typeof window !== "undefined" ? getFilterObjectFromLocalStorage() : null;
+    const restoredFilter = { $and: [] as any[] };
+
+    if (persistedFilterObject?.custom_filter_predicate) {
+      restoredFilter.$and.push(persistedFilterObject.custom_filter_predicate);
+    }
+    if (persistedFilterObject?.search_predicate) {
+      restoredFilter.$and.push(persistedFilterObject.search_predicate);
+    }
+    if (persistedFilterObject?.saved_filter_predicate) {
+      restoredFilter.$and.push(persistedFilterObject.saved_filter_predicate);
+    }
+    if (persistedFilterObject?.predefined_search_predicate) {
+      restoredFilter.$and.push(persistedFilterObject.predefined_search_predicate);
+    }
+
+    setRows(Number(persistedFilterObject?.limit) || rows);
+    setRowsPerPageOptions(pageSizeOptions);
+    setFirst(Number(persistedFilterObject?.offset) || 0);
+    setToPopulate(toPopulate);
+    setToPopulateMedia(toPopulateMedia);
+    setFilters(restoredFilter.$and.length > 0 ? restoredFilter : { $and: [] });
+    setQueryDataLoaded(true);
+
+    const layoutAttrs = solidCardViewMetaDataResponse?.data?.solidView?.layout?.attrs;
+    const createActionUrl = layoutAttrs?.createAction && layoutAttrs?.createAction?.type === "custom"
+      ? layoutAttrs?.createAction?.customComponent
+      : "form/new";
+    const editActionUrl = layoutAttrs?.editAction && layoutAttrs?.editAction?.type === "custom"
+      ? layoutAttrs?.editAction?.customComponent
+      : "form";
+
+    if (layoutAttrs?.createAction) {
+      setCreateActionQueryParams({
+        actionName: layoutAttrs.createAction.name,
+        actionType: layoutAttrs.createAction.type,
+        actionContext: layoutAttrs.createAction.context,
+      });
+    }
+
+    setCreateButtonUrl(createActionUrl);
+    setEditButtonUrl(editActionUrl);
+  }, [solidCardViewMetaDataResponse]);
+
+  useEffect(() => {
+    const fetchCards = async () => {
+      if (!queryDataLoaded || !solidCardViewMetaDataResponse) return;
+
+      setLoading(true);
+
+      const queryData = {
+        offset: first,
+        limit: rows,
+        populate: toPopulate,
+        populateMedia: toPopulateMedia,
+        filters,
+      };
+
+      try {
+        const data: any = await triggerGetSolidEntities(
+          qs.stringify(queryData, { encodeValuesOnly: true })
+        ).unwrap();
+
+        setCards(data?.records || []);
+        setTotalRecords(data?.meta?.totalRecords || 0);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchCards();
+  }, [queryDataLoaded, first, rows, toPopulate, toPopulateMedia, filters, solidCardViewMetaDataResponse]);
+
+  const handleApplyCustomFilter = async (filterPredicates: any) => {
+    const updatedFilter = { $and: [] as any[] };
+
+    if (filterPredicates.custom_filter_predicate) {
+      updatedFilter.$and.push(filterPredicates.custom_filter_predicate);
+    }
+    if (filterPredicates.search_predicate) {
+      updatedFilter.$and.push(filterPredicates.search_predicate);
+    }
+    if (filterPredicates.saved_filter_predicate) {
+      updatedFilter.$and.push(filterPredicates.saved_filter_predicate);
+    }
+    if (filterPredicates.predefined_search_predicate) {
+      updatedFilter.$and.push(filterPredicates.predefined_search_predicate);
+    }
+
+    setFirst(0);
+    setFilters(updatedFilter);
+    setFilterObjectToLocalStorage({
+      offset: 0,
+      limit: rows,
+      custom_filter_predicate: filterPredicates.custom_filter_predicate || {},
+      search_predicate: filterPredicates.search_predicate || {},
+      saved_filter_predicate: filterPredicates.saved_filter_predicate || {},
+      predefined_search_predicate: filterPredicates.predefined_search_predicate || {},
+    });
+  };
+
+  const handleFetchUpdatedRecords = () => {
+    setQueryDataLoaded((current) => !current);
+  };
+
+  const toggleBothSidebars = () => {
+    if (visibleNavbar) {
+      dispatch(toggleNavbar());
+    } else {
+      dispatch(showNavbar());
+    }
+  };
+
+  const cardViewTitle = solidCardViewMetaDataResponse?.data?.solidView?.displayName;
+  const enableGlobalSearch = solidCardViewMetaDataResponse?.data?.solidView?.layout?.attrs?.enableGlobalSearch === true;
+  const showEmptyState = !loading && cards.length === 0;
+  const headerRequestStatusLabel = loading || !queryDataLoaded ? "Loading..." : null;
+
+  return (
+    <div className="page-parent-wrapper solid-list-page-wrapper flex h-full min-h-0 overflow-hidden">
+      <div className="solid-list-content h-full flex flex-column flex-grow-1">
+        <div className="solid-list-surface solid-card-surface flex flex-column flex-1 min-h-0">
+          <div className="page-header solid-list-toolbar solid-card-toolbar flex-column lg:flex-row">
+            <div className="flex justify-content-between w-full solid-list-toolbar-row">
+              <div className="flex gap-3 align-items-center w-full solid-list-toolbar-left">
+                {params.embeded !== true && (
+                  <div className="apps-icon block md:hidden cursor-pointer" onClick={toggleBothSidebars}>
+                    <SolidIcon name="si-th-large" aria-hidden />
+                  </div>
+                )}
+                <p className="m-0 view-title solid-text-wrapper">{cardViewTitle}</p>
+                {enableGlobalSearch && (
+                  <div className="hidden lg:flex">
+                    <SolidGlobalSearchElement
+                      viewType="card"
+                      showSaveFilterPopup={showSaveFilterPopup}
+                      setShowSaveFilterPopup={setShowSaveFilterPopup}
+                      ref={solidGlobalSearchElementRef}
+                      viewData={solidCardViewMetaDataResponse}
+                      handleApplyCustomFilter={handleApplyCustomFilter}
+                    />
+                  </div>
+                )}
+              </div>
+
+              <div className="flex align-items-center solid-header-buttons-wrapper solid-list-toolbar-actions">
+                <SolidHeaderRequestStatus label={headerRequestStatusLabel} />
+                {enableGlobalSearch && (
+                  <div className="flex lg:hidden">
+                    <SolidButton
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="solid-icon-button"
+                      onClick={() => setShowGlobalSearchElement(!showGlobalSearchElement)}
+                      aria-label="Toggle search"
+                      leftIcon={<SolidIcon name="si-search" aria-hidden />}
+                    />
+                  </div>
+                )}
+
+                {actionsAllowed.includes(`${permissionExpression(params.modelName, "create")}`) &&
+                  solidCardViewMetaDataResponse?.data?.solidView?.layout?.attrs?.create !== false && (
+                    <SolidCreateButton
+                      createButtonUrl={createButtonUrl}
+                      createActionQueryParams={createActionQueryParams}
+                      responsiveIconOnly={true}
+                    />
+                  )}
+
+                <SolidButton
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="solid-icon-button"
+                  onClick={() => handleFetchUpdatedRecords()}
+                  aria-label="Refresh cards"
+                  leftIcon={<SolidIcon name="si-refresh" aria-hidden />}
+                />
+
+                <SolidCardViewConfigure
+                  solidCardViewMetaData={solidCardViewMetaDataResponse}
+                  modelName={params.modelName}
+                  actionsAllowed={actionsAllowed}
+                  viewModes={viewModes}
+                  setLayoutDialogVisible={setLayoutDialogVisible}
+                  setShowSaveFilterPopup={setShowSaveFilterPopup}
+                  filters={filters}
+                  handleRefreshView={handleFetchUpdatedRecords}
+                />
+              </div>
+            </div>
+
+            {enableGlobalSearch && showGlobalSearchElement && (
+              <div className="flex lg:hidden">
+                <SolidGlobalSearchElement
+                  viewType="card"
+                  showSaveFilterPopup={showSaveFilterPopup}
+                  setShowSaveFilterPopup={setShowSaveFilterPopup}
+                  ref={solidGlobalSearchElementRef}
+                  viewData={solidCardViewMetaDataResponse}
+                  handleApplyCustomFilter={handleApplyCustomFilter}
+                />
+              </div>
+            )}
+          </div>
+
+          <div className="solid-card-view-content">
+            <div className="solid-card-view-body">
+              {showEmptyState ? (
+                <SolidEmptyListViewPlaceholder
+                  createButtonUrl={createButtonUrl}
+                  createActionQueryParams={createActionQueryParams}
+                  actionsAllowed={actionsAllowed}
+                  params={params}
+                  solidListViewMetaData={solidCardViewMetaDataResponse}
+                  handleFetchUpdatedRecords={handleFetchUpdatedRecords}
+                />
+              ) : (
+                <CardGrid
+                  records={cards}
+                  solidCardViewMetaData={solidCardViewMetaDataResponse?.data}
+                  editButtonUrl={editBaseUrl}
+                  setLightboxUrls={setLightboxUrls}
+                  setOpenLightbox={setOpenLightbox}
+                />
+              )}
+            </div>
+
+            {totalRecords > 0 && (
+              <div className="solid-card-view-pagination">
+                <div className="solid-card-view-pagination-bar solid-table-paginator flex items-center justify-center gap-3 text-sm rounded-md border border-border/60 px-3 py-1.5 bg-background">
+                  <div className="solid-paginator-meta flex items-center gap-2">
+                    <span className="solid-paginator-label">Records</span>
+                    <select
+                      value={rows}
+                      onChange={handleRowsChange}
+                      className="solid-paginator-select"
+                    >
+                      {rowsOptions.map((option) => (
+                        <option key={option} value={option}>
+                          {option}
+                        </option>
+                      ))}
+                    </select>
+                    <span className="solid-paginator-report">{paginationReport}</span>
+                  </div>
+                  <div className="solid-paginator-actions flex items-center gap-2">
+                    <button
+                      type="button"
+                      className="solid-paginator-btn"
+                      onClick={handlePrevPage}
+                      disabled={!canGoPrev}
+                    >
+                      Previous
+                    </button>
+                    <button
+                      type="button"
+                      className="solid-paginator-btn"
+                      onClick={handleNextPage}
+                      disabled={!canGoNext}
+                    >
+                      Next
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {openLightbox && (
+        <SolidLightbox
+          open={openLightbox}
+          slides={lightboxSlides}
+          onClose={() => setOpenLightbox(false)}
+        />
+      )}
+
+      <SolidDialog
+        open={isLayoutDialogVisible}
+        onOpenChange={setLayoutDialogVisible}
+        className="solid-kanban-layout-dialog"
+        style={{ width: "min(800px, calc(100vw - 32px))" }}
+      >
+        <SolidDialogHeader>
+          <SolidDialogTitle>Change Card Layout</SolidDialogTitle>
+          <SolidDialogClose />
+        </SolidDialogHeader>
+        <SolidDialogSeparator />
+        <SolidDialogBody className="solid-kanban-layout-dialog-body">
+          <CardUserViewLayout solidCardViewMetaData={solidCardViewMetaDataResponse} setLayoutDialogVisible={setLayoutDialogVisible} />
+        </SolidDialogBody>
+      </SolidDialog>
+    </div>
+  );
+};

package/dist/components/core/card/SolidCardViewConfigure.d.ts

@@ -0,0 +1,2 @@
+export declare const SolidCardViewConfigure: ({ solidCardViewMetaData, modelName, actionsAllowed, viewModes, setLayoutDialogVisible, setShowSaveFilterPopup, filters, handleRefreshView, }: any) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SolidCardViewConfigure.d.ts.map

package/dist/components/core/card/SolidCardViewConfigure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidCardViewConfigure.d.ts","sourceRoot":"","sources":["../../../../src/components/core/card/SolidCardViewConfigure.tsx"],"names":[],"mappings":"AAqDA,eAAO,MAAM,sBAAsB,iJAShC,GAAG,4CA6ML,CAAC"}

package/dist/components/core/card/SolidCardViewConfigure.js

@@ -0,0 +1,122 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { permissionExpression } from "../../../helpers/permissions";
+import { usePathname } from "../../../hooks/usePathname";
+import { useRouter } from "../../../hooks/useRouter";
+import { useSearchParams } from "../../../hooks/useSearchParams";
+import { useEffect, useState } from "react";
+import { SolidExport } from "../../../components/common/SolidExport";
+import { SolidGenericImport } from "../common/SolidGenericImport/SolidGenericImport";
+import { SolidDialog, SolidDialogBody, SolidDialogClose, SolidDialogDescription, SolidDialogHeader, SolidDialogSeparator, SolidDialogTitle, SolidDropdownMenu, SolidDropdownMenuContent, SolidDropdownMenuItem, SolidDropdownMenuLabel, SolidDropdownMenuRadioGroup, SolidDropdownMenuRadioItem, SolidDropdownMenuSeparator, SolidDropdownMenuSub, SolidDropdownMenuSubContent, SolidDropdownMenuSubTrigger, SolidDropdownMenuTrigger, SolidIcon, } from "../../shad-cn-ui";
+var normalizeViewModes = function (viewModes) {
+    if (viewModes === void 0) { viewModes = []; }
+    return viewModes
+        .map(function (option) {
+        if (!option)
+            return null;
+        if (typeof option === "string") {
+            return {
+                type: option,
+                label: option.charAt(0).toUpperCase() + option.slice(1),
+            };
+        }
+        var type = option.type || option.value;
+        if (!type)
+            return null;
+        return __assign(__assign({}, option), { type: type, label: option.label || (type.charAt(0).toUpperCase() + type.slice(1)) });
+    })
+        .filter(Boolean);
+};
+export var SolidCardViewConfigure = function (_a) {
+    var solidCardViewMetaData = _a.solidCardViewMetaData, modelName = _a.modelName, actionsAllowed = _a.actionsAllowed, viewModes = _a.viewModes, setLayoutDialogVisible = _a.setLayoutDialogVisible, setShowSaveFilterPopup = _a.setShowSaveFilterPopup, filters = _a.filters, handleRefreshView = _a.handleRefreshView;
+    var pathname = usePathname();
+    var router = useRouter();
+    var searchParams = useSearchParams();
+    var _b = useState(""), view = _b[0], setView = _b[1];
+    var _c = useState(false), isCogMenuOpen = _c[0], setIsCogMenuOpen = _c[1];
+    var _d = useState(false), openImportDialog = _d[0], setOpenImportDialog = _d[1];
+    var _e = useState(false), exportView = _e[0], setExportView = _e[1];
+    var visibleViewModes = normalizeViewModes(Array.isArray(viewModes) ? viewModes : []);
+    var showSwitchType = visibleViewModes.length > 1;
+    useEffect(function () {
+        if (typeof pathname === "string") {
+            var pathSegments = pathname.split("/").filter(Boolean);
+            if (pathSegments.length > 0) {
+                setView(pathSegments[pathSegments.length - 1]);
+            }
+        }
+    }, [pathname]);
+    var handleViewChange = function (newViewType) {
+        var _a, _b, _c, _d;
+        if (view === newViewType)
+            return;
+        var nextView = visibleViewModes.find(function (option) { return option.type === newViewType; });
+        var pathSegments = pathname.split("/").filter(Boolean);
+        pathSegments[pathSegments.length - 1] = newViewType;
+        var nextSearchParams = new URLSearchParams(searchParams.toString());
+        var currentQuery = {
+            menuItemId: searchParams.get("menuItemId"),
+            menuItemName: searchParams.get("menuItemName"),
+            actionId: searchParams.get("actionId"),
+            actionName: searchParams.get("actionName"),
+        };
+        var queryFields = {
+            menuItemId: (_a = nextView === null || nextView === void 0 ? void 0 : nextView.menuItemId) !== null && _a !== void 0 ? _a : currentQuery.menuItemId,
+            menuItemName: (_b = nextView === null || nextView === void 0 ? void 0 : nextView.menuItemName) !== null && _b !== void 0 ? _b : currentQuery.menuItemName,
+            actionId: (_c = nextView === null || nextView === void 0 ? void 0 : nextView.actionId) !== null && _c !== void 0 ? _c : currentQuery.actionId,
+            actionName: (_d = nextView === null || nextView === void 0 ? void 0 : nextView.actionName) !== null && _d !== void 0 ? _d : currentQuery.actionName,
+        };
+        Object.entries(queryFields).forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            if (value) {
+                nextSearchParams.set(key, value);
+            }
+            else {
+                nextSearchParams.delete(key);
+            }
+        });
+        var newPath = "/" + pathSegments.join("/");
+        var nextQueryString = nextSearchParams.toString();
+        router.push(nextQueryString ? "".concat(newPath, "?").concat(nextQueryString) : newPath);
+    };
+    var clearLocalstorageCache = function () {
+        var currentPageUrl = window.location.pathname;
+        localStorage.removeItem(currentPageUrl);
+        window.location.reload();
+    };
+    var canImport = Boolean(modelName) &&
+        actionsAllowed.includes("".concat(permissionExpression(modelName, "create"))) &&
+        actionsAllowed.includes("".concat(permissionExpression("importTransaction", "create")));
+    var canExport = Boolean(modelName) &&
+        actionsAllowed.includes("".concat(permissionExpression(modelName, "findMany"))) &&
+        actionsAllowed.includes("".concat(permissionExpression("exportTransaction", "create")));
+    var canCustomizeLayout = actionsAllowed.includes("".concat(permissionExpression("userViewMetadata", "create")));
+    var canSaveCustomFilter = actionsAllowed.includes("".concat(permissionExpression("savedFilters", "create")));
+    return (_jsxs("div", { className: "position-relative", children: [_jsxs(SolidDropdownMenu, { open: isCogMenuOpen, onOpenChange: setIsCogMenuOpen, children: [_jsx(SolidDropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "solid-icon-button solid-header-cog-trigger", "aria-label": "Open card options", children: _jsx(SolidIcon, { name: "si-cog", "aria-hidden": true }) }) }), _jsxs(SolidDropdownMenuContent, { className: "listview-cogwheel-panel", children: [canImport && (_jsxs(SolidDropdownMenuItem, { className: "solid-header-dropdown-item", onSelect: function () {
+                                    setOpenImportDialog(true);
+                                    setIsCogMenuOpen(false);
+                                }, children: [_jsx(SolidIcon, { name: "si-download", className: "solid-header-action-button-icon", "aria-hidden": true }), _jsx("span", { className: "solid-header-action-button-label", children: "Import" })] })), canExport && (_jsxs(SolidDropdownMenuItem, { className: "solid-header-dropdown-item", onSelect: function () {
+                                    setExportView(true);
+                                    setIsCogMenuOpen(false);
+                                }, children: [_jsx(SolidIcon, { name: "si-upload", className: "solid-header-action-button-icon", "aria-hidden": true }), _jsx("span", { className: "solid-header-action-button-label", children: "Export" })] })), (canCustomizeLayout || canSaveCustomFilter) && _jsx(SolidDropdownMenuSeparator, {}), canCustomizeLayout && (_jsxs(SolidDropdownMenuSub, { children: [_jsxs(SolidDropdownMenuSubTrigger, { className: "solid-header-dropdown-item", children: [_jsx(SolidIcon, { name: "si-sliders-h", className: "solid-header-action-button-icon", "aria-hidden": true }), _jsx("span", { className: "solid-header-action-button-label", children: "Customize Layout" })] }), _jsxs(SolidDropdownMenuSubContent, { className: "customize-layout-panel", children: [showSwitchType && (_jsxs(_Fragment, { children: [_jsx(SolidDropdownMenuLabel, { children: "Switch Type" }), _jsx(SolidDropdownMenuRadioGroup, { value: view, onValueChange: handleViewChange, children: visibleViewModes.map(function (option) { return (_jsx(SolidDropdownMenuRadioItem, { value: option.type, children: option.label }, option.type)); }) }), _jsx(SolidDropdownMenuSeparator, {})] })), _jsxs(SolidDropdownMenuItem, { onSelect: function () {
+                                                    setLayoutDialogVisible(true);
+                                                    setIsCogMenuOpen(false);
+                                                }, children: [_jsx(SolidIcon, { name: "si-code", className: "solid-header-action-button-icon", "aria-hidden": true }), _jsx("span", { className: "solid-header-action-button-label", children: "Layout Editor" })] })] })] })), canSaveCustomFilter && (_jsxs(SolidDropdownMenuItem, { className: "solid-header-dropdown-item", onSelect: function () {
+                                    setShowSaveFilterPopup(true);
+                                    setIsCogMenuOpen(false);
+                                }, children: [_jsx(SolidIcon, { name: "si-save", className: "solid-header-action-button-icon", "aria-hidden": true }), _jsx("span", { className: "solid-header-action-button-label", children: "Save Custom Filter" })] })), _jsxs(SolidDropdownMenuItem, { className: "solid-header-dropdown-item", onSelect: function () {
+                                    clearLocalstorageCache();
+                                    setIsCogMenuOpen(false);
+                                }, children: [_jsx(SolidIcon, { name: "si-trash", className: "solid-header-action-button-icon", "aria-hidden": true }), _jsx("span", { className: "solid-header-action-button-label", children: "Clear cache" })] })] })] }), _jsxs(SolidDialog, { open: exportView, onOpenChange: setExportView, className: "solid-kanban-export-dialog", style: { width: "min(960px, calc(100vw - 32px))" }, children: [_jsxs(SolidDialogHeader, { className: "solid-export-dialog-header", children: [_jsxs("div", { children: [_jsx(SolidDialogTitle, { children: "Export" }), _jsx(SolidDialogDescription, { className: "solid-filter-dialog-subtitle m-0", children: "Choose the file format, refine the field set, and save reusable export templates." })] }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogSeparator, {}), _jsx(SolidDialogBody, { className: "solid-kanban-export-dialog-body", children: _jsx(SolidExport, { listViewMetaData: solidCardViewMetaData, filters: filters }) })] }), openImportDialog && (_jsx(SolidGenericImport, { openImportDialog: openImportDialog, setOpenImportDialog: setOpenImportDialog, listViewMetaData: solidCardViewMetaData, handleFetchUpdatedRecords: handleRefreshView }))] }));
+};
+//# sourceMappingURL=SolidCardViewConfigure.js.map