techsbcn-storybook 2.12.0 → 2.14.0

package/dist/components/tables/SearchComponent/SearchComponent.d.ts

@@ -10,6 +10,7 @@ export interface SearchComponentProps {
     extraActions?: {
         action: any;
     }[];
+    inlineExtraActions?: boolean;
     filters?: {
         singleFilter?: any;
         doubleFilter?: DoubleFilter;

package/dist/helpers/PermissionHelpers.d.ts

@@ -0,0 +1 @@
+export declare const hasPermission: (permission: string) => boolean;

package/dist/helpers/index.d.ts

@@ -4,3 +4,4 @@ export * from './GroupBy';
 export * from './FileDownloader';
 export * from './hooks';
 export * from './NotificationHelper';
+export * from './PermissionHelpers';

package/dist/index.js

@@ -139,15 +139,17 @@ var SearchComponent = (props) => {
     setAnchorEl(null);
   };
   const randId = Math.random().toString(36).substring(7);
+  const inlineExtraActions = !!props.extraActions && !!props.inlineExtraActions;
+  const extraActions = props.extraActions && /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "extra-actions", sx: { display: "flex", flexWrap: "wrap", gap: 1, mt: inlineExtraActions ? 0 : 2 } }, props.extraActions.map((action, i) => /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, { key: i }, action.action)));
   return /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: `search-component ${props.className}` }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { mb: props.divider ? 2 : 0, px: 2 } }, /* @__PURE__ */ React10__default.default.createElement(material.Grid, { container: true, sx: { alignItems: "center" } }, /* @__PURE__ */ React10__default.default.createElement(
     material.Grid,
     {
       size: {
         xs: props.actions ? 8 : 12,
-        md: props.actions && props.searchBar ? 4 : props.searchBar ? 7 : props.actions ? 6 : 12
+        md: inlineExtraActions ? "grow" : props.actions && props.searchBar ? 4 : props.searchBar ? 7 : props.actions ? 6 : 12
       }
     },
-    /* @__PURE__ */ React10__default.default.createElement(
+    /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: "flex", alignItems: "center", flexWrap: "wrap", gap: 2 } }, /* @__PURE__ */ React10__default.default.createElement(
       material.Box,
       {
         sx: {
@@ -158,7 +160,7 @@ var SearchComponent = (props) => {
         className: `${props.enableAfter ? "main-background-color-after" : ""} title`
       },
       props.title
-    )
+    ), inlineExtraActions && extraActions)
   ), props.actions && /* @__PURE__ */ React10__default.default.createElement(material.Grid, { size: { xs: props.title ? 4 : 12 }, sx: { display: { xs: "block", md: "none" } } }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: { xs: "none", md: "flex" } } }, ActionsList(props.actions)), /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: { xs: "flex", md: "none" } } }, props.actions.length > 1 ? /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { ml: "auto" } }, /* @__PURE__ */ React10__default.default.createElement(
     material.IconButton,
     {
@@ -185,27 +187,36 @@ var SearchComponent = (props) => {
       className: "search-menu-actions"
     },
     props.actions.map((action, i) => /* @__PURE__ */ React10__default.default.createElement(material.MenuItem, { key: i, className: "wrapper-actions" }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "btn-action main-color", sx: { color: "primary.main" } }, action.action)))
-  )) : /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { ml: "auto" }, className: `wrapper-actions ${props.title ? "min-action-width" : ""}` }, ActionsList(props.actions)))), (props.searchBar || props.filters || props.actions) && /* @__PURE__ */ React10__default.default.createElement(material.Grid, { size: { xs: 12, md: props.actions && props.searchBar ? 8 : props.actions ? 6 : 5 } }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React10__default.default.createElement(
-    material.Box,
+  )) : /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { ml: "auto" }, className: `wrapper-actions ${props.title ? "min-action-width" : ""}` }, ActionsList(props.actions)))), (props.searchBar || props.filters || props.actions) && /* @__PURE__ */ React10__default.default.createElement(
+    material.Grid,
     {
-      sx: {
-        ml: "auto",
-        display: "flex",
-        width: "100%",
-        ...(props.searchBar || props.filters) && { mt: { xs: 2, md: 0 } }
+      size: {
+        xs: 12,
+        md: inlineExtraActions ? "auto" : props.actions && props.searchBar ? 8 : props.actions ? 6 : 5
       }
     },
-    props.searchBar,
-    !!props.fixedOpen || props.filters && props.searchBar && /* @__PURE__ */ React10__default.default.createElement(
+    /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React10__default.default.createElement(
       material.Box,
       {
-        onClick: () => setIsOpen(!isOpen),
-        className: "tune-btn main-background-color",
-        sx: { bgcolor: "primary.main", color: "primary.contrastText", "&:hover": { boxShadow: 4 } }
+        sx: {
+          ml: "auto",
+          display: "flex",
+          width: "100%",
+          ...(props.searchBar || props.filters) && { mt: { xs: 2, md: 0 } }
+        }
       },
-      /* @__PURE__ */ React10__default.default.createElement(material.Badge, { badgeContent: props.activeFiltersCount, color: "error" }, /* @__PURE__ */ React10__default.default.createElement(iconsMaterial.Tune, null))
-    )
-  ), props.actions && /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: { xs: "none", md: "block" } }, className: "wrapper-actions" }, ActionsList(props.actions))))), props.extraActions && /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "extra-actions", sx: { display: "flex", flexWrap: "wrap", gap: 1, mt: 2 } }, props.extraActions.map((action, i) => /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, { key: i }, action.action)))), props.divider && /* @__PURE__ */ React10__default.default.createElement(material.Divider, null), /* @__PURE__ */ React10__default.default.createElement(material.Collapse, { in: isOpen }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "filters", sx: { px: 2, mt: 2, mb: props.divider ? 0 : 1 } }, /* @__PURE__ */ React10__default.default.createElement(material.Grid, { container: true, spacing: 3, sx: { justifyContent: "end" } }, props.filters && props.filters.length > 0 && props.filters.map((filter, i) => /* @__PURE__ */ React10__default.default.createElement(material.Grid, { key: i, size: { xs: 12, sm: props.filtersSize ?? 6, xl: props.filtersSize ?? 4 } }, filter.doubleFilter ? DoubleFilter(filter.doubleFilter) : filter.singleFilter))))));
+      props.searchBar,
+      !!props.fixedOpen || props.filters && props.searchBar && /* @__PURE__ */ React10__default.default.createElement(
+        material.Box,
+        {
+          onClick: () => setIsOpen(!isOpen),
+          className: "tune-btn main-background-color",
+          sx: { bgcolor: "primary.main", color: "primary.contrastText", "&:hover": { boxShadow: 4 } }
+        },
+        /* @__PURE__ */ React10__default.default.createElement(material.Badge, { badgeContent: props.activeFiltersCount, color: "error" }, /* @__PURE__ */ React10__default.default.createElement(iconsMaterial.Tune, null))
+      )
+    ), props.actions && /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: { xs: "none", md: "block" } }, className: "wrapper-actions" }, ActionsList(props.actions)))
+  )), !inlineExtraActions && extraActions), props.divider && /* @__PURE__ */ React10__default.default.createElement(material.Divider, null), /* @__PURE__ */ React10__default.default.createElement(material.Collapse, { in: isOpen }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "filters", sx: { px: 2, mt: 2, mb: props.divider ? 0 : 1 } }, /* @__PURE__ */ React10__default.default.createElement(material.Grid, { container: true, spacing: 3, sx: { justifyContent: "end" } }, props.filters && props.filters.length > 0 && props.filters.map((filter, i) => /* @__PURE__ */ React10__default.default.createElement(material.Grid, { key: i, size: { xs: 12, sm: props.filtersSize ?? 6, xl: props.filtersSize ?? 4 } }, filter.doubleFilter ? DoubleFilter(filter.doubleFilter) : filter.singleFilter))))));
 };
 
 // src/components/wrappers/LinearProgressComponent/LinearProgressComponent.scss
@@ -759,6 +770,9 @@ var addNotification = ({
   action: duration === null ? (key) => /* @__PURE__ */ React10__default.default.createElement(material.IconButton, { size: "small", color: "inherit", "aria-label": "close", onClick: () => notistack.closeSnackbar(key) }, /* @__PURE__ */ React10__default.default.createElement(CloseIcon__default.default, { fontSize: "small" })) : void 0
 });
 var removeNotification = (id) => notistack.closeSnackbar(id);
+
+// src/helpers/PermissionHelpers.tsx
+var hasPermission = (permission) => getSession()?.role.includes(permission) ?? false;
 var Spinner = () => /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { textAlign: "center" } }, /* @__PURE__ */ React10__default.default.createElement(material.CircularProgress, { color: "primary", size: 20 }));
 
 // src/components/tables/ImageTableComponent/ImageTableComponent.tsx
@@ -1605,11 +1619,11 @@ var NavIcon = (props) => {
 // src/components/navigation/VerticalNav/VerticalNavItem.tsx
 var VerticalNavItem = (props) => {
   const { pathname } = reactRouter.useLocation();
-  const hasPermission = React10.useMemo(
+  const hasPermission2 = React10.useMemo(
     () => checkPermission(props.item.persmisionAvailable, props.userPermisions),
     [props.item.persmisionAvailable, props.userPermisions]
   );
-  if (!hasPermission) {
+  if (!hasPermission2) {
     return null;
   }
   const isActive = !!reactRouter.matchPath({ path: props.item.end ? props.item.route || "" : `${props.item.route}/*` }, pathname);
@@ -1669,11 +1683,11 @@ var VerticalNavItemCollapse = (props) => {
   const handleClick = () => {
     setOpen(!open);
   };
-  const hasPermission = React10.useMemo(
+  const hasPermission2 = React10.useMemo(
     () => checkPermission(props.item.persmisionAvailable, props.userPermisions),
     [props.item.persmisionAvailable, props.userPermisions]
   );
-  if (!hasPermission) {
+  if (!hasPermission2) {
     return null;
   }
   return /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "nav-item-collapse" }, /* @__PURE__ */ React10__default.default.createElement(
@@ -3009,6 +3023,7 @@ exports.getImageByBase64 = getImageByBase64;
 exports.getImageByBlob = getImageByBlob;
 exports.getJwtToken = getJwtToken;
 exports.getSession = getSession;
+exports.hasPermission = hasPermission;
 exports.logout = logout;
 exports.readFileAsBase64 = readFileAsBase64;
 exports.redirectDownload = redirectDownload;