@ebubekirylmaz/link-test 1.0.0

package/src/layouts/common/ProjectBar/index.jsx

@@ -0,0 +1,325 @@
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import Iconify from "../../../components/Iconify";
+import InputAdornment from "@mui/material/InputAdornment";
+import InputBase from "@mui/material/InputBase";
+import Label from "../../../components/label";
+import List from "@mui/material/List";
+import ResultItem from "./result-item";
+import Scrollbar from "../../../components/scrollbar";
+import SearchNotFound from "../../../components/search-not-found";
+import Stack from "@mui/material/Stack";
+import SvgColor from "../../../components/svg-color";
+import { alpha } from "@mui/material/styles";
+import { applyFilter } from "./utils.js";
+import config from "../../../config/config.js";
+import match from "autosuggest-highlight/match";
+import oauth from "../../../http/oauth.js";
+import parse from "autosuggest-highlight/parse";
+import { useBoolean } from "../../../hooks/use-boolean.js";
+import { useEffect } from "react";
+import { useEventListener } from "../../../hooks/use-event-listener";
+import { useNavigate } from "react-router-dom";
+import useProjects from "../../../hooks/useProjects";
+
+import { Button, DialogActions } from "@mui/material";
+import Dialog, { dialogClasses } from "@mui/material/Dialog";
+import React, { useCallback, useState } from "react";
+import { publish, useEvent } from "@nucleoidai/react-event";
+import { storage, useStorage } from "@nucleoidjs/webstorage";
+import { useMediaQuery, useTheme } from "@mui/material";
+
+function ProjectBar() {
+  const label = config().template?.projectBar?.label;
+  const { appId } = config();
+  const theme = useTheme();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down(435));
+  const { loading, projects, getProjects } = useProjects();
+
+  const [projectCreated] = useEvent("PROJECT_CREATED", { project: null });
+
+  useEffect(() => {
+    console.log("ProjectBar useEffect", projectCreated);
+
+    getProjects();
+  }, [projectCreated]);
+
+  const id = window.matchMedia("projectId").matches;
+  const [selectedProjectId] = useStorage("projectId", id);
+
+  const [selectedProject, setSelectedProject] = useState();
+
+  const navigate = useNavigate();
+
+  const search = useBoolean();
+
+  const [searchQuery, setSearchQuery] = useState("");
+
+  useEffect(() => {
+    if (!selectedProjectId && projects?.length > 0) {
+      search.onTrue();
+    }
+  }, [projects]);
+
+  useEffect(() => {
+    if (projects?.length === 0 && !loading) {
+      publish("PLATFORM", "PROJECT_BAR_DIALOG", {
+        open: true,
+      });
+    }
+  }, [projects]);
+
+  useEffect(() => {
+    if (projectCreated.project) {
+      handleSelect(projectCreated.project);
+    }
+  }, [projectCreated]);
+
+  useEffect(() => {
+    setSelectedProject(
+      projects.find((project) => project.id === selectedProjectId)
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [projects]);
+
+  const AddNewDialogOpen = () => {
+    publish("PLATFORM", "PROJECT_BAR_DIALOG", {
+      open: true,
+    });
+  };
+
+  const handleSelect = (project) => {
+    const { id: projectId } = project;
+
+    const refreshToken = storage.get("link", "refreshToken");
+    const identityProvider = storage.get("link", "identityProvider");
+
+    oauth
+      .post("/oauth", { appId, refreshToken, projectId, identityProvider })
+      .then(({ data }) => {
+        const { refreshToken, accessToken } = data;
+        storage.set("link", "accessToken", accessToken);
+        storage.set("link", "refreshToken", refreshToken);
+        storage.set("projectId", projectId);
+      })
+      .finally(() => {
+        setSelectedProject(project);
+
+        publish("PROJECT_SELECTED", { projectId });
+
+        search.onFalse();
+        setSearchQuery("");
+      });
+  };
+
+  const handleClose = useCallback(() => {
+    search.onFalse();
+    setSearchQuery("");
+  }, [search]);
+
+  const handleKeyDown = (event) => {
+    if (event.key === "k" && event.metaKey) {
+      search.onToggle();
+      setSearchQuery("");
+    }
+  };
+
+  useEventListener("keydown", handleKeyDown);
+
+  const handleSearch = useCallback((event) => {
+    setSearchQuery(event.target.value);
+  }, []);
+
+  const dataFiltered = applyFilter({
+    inputData: projects,
+    query: searchQuery,
+  });
+  const notFound = searchQuery && !dataFiltered.length;
+
+  const renderItems = () => (
+    <List data-cy="item-list" disablePadding>
+      {dataFiltered.map((item) => {
+        const title = item?.name;
+        const icon = item?.icon?.slice(1, -1);
+        const organizationName = item?.organization?.name;
+        const partsTitle = parse(title, match(title, searchQuery));
+        return (
+          <ResultItem
+            name={organizationName}
+            icon={icon || "eva:question-mark-circle"}
+            title={partsTitle}
+            key={`${title}`}
+            groupLabel={searchQuery && title}
+            onClickItem={() => {
+              handleSelect(item);
+              navigate(`/`, { replace: true });
+            }}
+          />
+        );
+      })}
+    </List>
+  );
+
+  const renderButton = (
+    <Stack
+      direction="row"
+      alignItems="center"
+      justifyContent={"flex-start"}
+      sx={{ width: "100%" }}
+    >
+      <IconButton
+        data-cy="open-select-bar-button"
+        onClick={search.onTrue}
+        sx={{
+          color: "text.disabled",
+          typography: "subtitle2",
+          "& .svg-color": {
+            background: (theme) =>
+              selectedProjectId
+                ? `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`
+                : "gray",
+          },
+        }}
+      >
+        <SvgColor
+          src={
+            selectedProjectId
+              ? `https://api.iconify.design/${selectedProject?.icon?.slice(
+                  1,
+                  -1
+                )}.svg`
+              : "https://api.iconify.design/ph:circle-duotone.svg"
+          }
+          sx={{ width: 32, height: 32 }}
+        />
+      </IconButton>
+
+      {!isSmallScreen && (
+        <Label
+          color={selectedProjectId ? "primary" : "default"}
+          onClick={search.onTrue}
+          sx={{
+            px: 0.75,
+            fontSize: 14,
+            cursor: "pointer",
+          }}
+        >
+          {selectedProject ? selectedProject.name : "Select Project"}
+        </Label>
+      )}
+
+      {isSmallScreen && selectedProject && (
+        <Label
+          color="primary"
+          onClick={search.onTrue}
+          sx={{
+            px: 0.75,
+            fontSize: 14,
+            cursor: "pointer",
+          }}
+        >
+          {selectedProject.name.split(" ").slice(0, 2).join(" ")}
+        </Label>
+      )}
+    </Stack>
+  );
+
+  const AddNewButton = (
+    <DialogActions disableSpacing>
+      <Button
+        data-cy="add-new-item-button"
+        fullWidth={true}
+        onClick={AddNewDialogOpen}
+      >
+        <Label
+          sx={{
+            width: "100%",
+            height: "3rem",
+            px: 0.75,
+            fontSize: 18,
+            color: "text.secondary",
+            "&:hover": {
+              borderRadius: 1,
+              borderColor: (theme) => theme.palette.primary.main,
+              backgroundColor: (theme) =>
+                alpha(
+                  theme.palette.primary.main,
+                  theme.palette.action.hoverOpacity
+                ),
+            },
+          }}
+        >
+          Add New {label}
+        </Label>
+      </Button>
+    </DialogActions>
+  );
+
+  return (
+    <>
+      {renderButton}
+
+      <Dialog
+        data-cy="select-bar-dialog"
+        fullWidth={true}
+        maxWidth="sm"
+        open={search.value}
+        onClose={selectedProjectId && handleClose}
+        transitionDuration={{
+          enter: theme.transitions.duration.shortest,
+          exit: 0,
+        }}
+        PaperProps={{
+          sx: {
+            mt: 15,
+            overflow: "unset",
+          },
+        }}
+        sx={{
+          [`& .${dialogClasses.container}`]: {
+            alignItems: "flex-start",
+          },
+        }}
+      >
+        <Box sx={{ p: 3, borderBottom: `solid 1px gray` }}>
+          <InputBase
+            data-cy="item-input"
+            fullWidth={true}
+            autoFocus
+            placeholder="Search..."
+            value={searchQuery}
+            onChange={handleSearch}
+            startAdornment={
+              <InputAdornment position="start">
+                <Iconify
+                  icon="eva:search-fill"
+                  width={24}
+                  sx={{ color: "text.disabled" }}
+                />
+              </InputAdornment>
+            }
+            endAdornment={
+              <Label sx={{ letterSpacing: 1, color: "text.secondary" }}>
+                esc
+              </Label>
+            }
+            inputProps={{
+              sx: { typography: "h6" },
+            }}
+          />
+        </Box>
+
+        <Scrollbar sx={{ p: 3, pt: 2, height: 400 }}>
+          {notFound ? (
+            <SearchNotFound query={searchQuery} sx={{ py: 10 }} />
+          ) : (
+            renderItems()
+          )}
+        </Scrollbar>
+        {AddNewButton}
+      </Dialog>
+    </>
+  );
+}
+
+export default ProjectBar;

package/src/layouts/common/ProjectBar/result-item.jsx

@@ -0,0 +1,90 @@
+import Box from "@mui/material/Box";
+import Label from "../../../components/label";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemText from "@mui/material/ListItemText";
+import React from "react";
+import SvgColor from "../../../components/svg-color";
+import { alpha } from "@mui/material/styles";
+import { useTheme } from "@mui/material/styles";
+
+import { Stack, Typography, useMediaQuery } from "@mui/material";
+
+export default function ResultItem({
+  title,
+  icon,
+  groupLabel,
+  onClickItem,
+  name,
+}) {
+  const theme = useTheme();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down(435));
+
+  const displayTitle = isSmallScreen
+    ? title
+        .map((part) => part.text)
+        .join(" ")
+        .split(" ")
+        .slice(0, 2)
+        .join(" ")
+    : title.map((part, index) => (
+        <Box
+          key={index}
+          component="span"
+          sx={{ color: part.highlight ? "primary.main" : "text.primary" }}
+        >
+          {part.text}
+        </Box>
+      ));
+
+  const displayName = isSmallScreen
+    ? name.split(" ").slice(0, 2).join(" ")
+    : name;
+
+  return (
+    <ListItemButton
+      data-cy="item-button"
+      onClick={onClickItem}
+      sx={{
+        borderBottom: `1px dashed ${theme.palette.divider}`,
+        "&:hover": {
+          borderRadius: 1,
+          borderColor: "primary.main",
+          backgroundColor: alpha(
+            theme.palette.primary.main,
+            theme.palette.action.hoverOpacity
+          ),
+          borderStyle: "dashed",
+          borderWidth: 1,
+        },
+      }}
+    >
+      <Stack>
+        <SvgColor
+          src={`https://api.iconify.design/${icon}.svg`}
+          sx={{
+            width: 32,
+            height: 32,
+            mx: 2,
+            background: `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`,
+          }}
+        />
+      </Stack>
+
+      <ListItemText
+        primary={
+          <Typography variant="subtitle2" sx={{ textTransform: "capitalize" }}>
+            {displayTitle}
+          </Typography>
+        }
+      />
+
+      <Label
+        sx={{ height: "auto", whiteSpace: "normal", wordWrap: "break-word" }}
+      >
+        <Typography variant="caption">{displayName}</Typography>
+      </Label>
+
+      {groupLabel && <Label color="info">{groupLabel}</Label>}
+    </ListItemButton>
+  );
+}

package/src/layouts/common/ProjectBar/utils.js

@@ -0,0 +1,86 @@
+import { flattenArray } from "../../../utils/flatten-array";
+
+// ----------------------------------------------------------------------
+
+export function getAllItems({ data }) {
+  const reduceItems = data
+    .map((list) => handleLoop(list.items, list.subheader))
+    .flat();
+
+  const items = flattenArray(reduceItems).map((option) => {
+    const group = splitPath(reduceItems, option.path);
+
+    return {
+      group: group && group.length > 1 ? group[0] : option.subheader,
+      title: option.title,
+      path: option.path,
+    };
+  });
+
+  return items;
+}
+
+// ----------------------------------------------------------------------
+
+export function applyFilter({ inputData, query }) {
+  if (query) {
+    inputData = inputData.filter(
+      (item) => item.name.toLowerCase().indexOf(query.toLowerCase()) !== -1
+    );
+  }
+
+  return inputData;
+}
+
+// ----------------------------------------------------------------------
+
+export function splitPath(array, key) {
+  let stack = array.map((item) => ({
+    path: [item.title],
+    currItem: item,
+  }));
+
+  while (stack.length) {
+    const { path, currItem } = stack.pop();
+
+    if (currItem.path === key) {
+      return path;
+    }
+
+    if (currItem.children?.length) {
+      stack = stack.concat(
+        currItem.children.map((item) => ({
+          path: path.concat(item.title),
+          currItem: item,
+        }))
+      );
+    }
+  }
+  return null;
+}
+
+// ----------------------------------------------------------------------
+
+export function handleLoop(array, subheader) {
+  return array?.map((list) => ({
+    subheader,
+    ...list,
+    ...(list.children && {
+      children: handleLoop(list.children, subheader),
+    }),
+  }));
+}
+
+// ----------------------------------------------------------------------
+
+export function groupedData(array) {
+  const group = array.reduce((groups, item) => {
+    groups[item.group] = groups[item.group] || [];
+
+    groups[item.group].push(item);
+
+    return groups;
+  }, {});
+
+  return group;
+}

package/src/layouts/common/account-popover.jsx

@@ -0,0 +1,116 @@
+import Avatar from "@mui/material/Avatar";
+import Box from "@mui/material/Box";
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import MenuItem from "@mui/material/MenuItem";
+import React from "react";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { alpha } from "@mui/material/styles";
+import config from "../../config/config";
+import { motion } from "framer-motion";
+import { storage } from "@nucleoidjs/webstorage";
+import { useRouter } from "../../routes/hooks";
+import { useUser } from "../../hooks/use-user";
+import { varHover } from "../../components/animate";
+
+import CustomPopover, { usePopover } from "../../components/custom-popover";
+
+// ----------------------------------------------------------------------
+
+export default function AccountPopover() {
+  const { options } = config().menu;
+  const router = useRouter();
+  const { user } = useUser();
+
+  const popover = usePopover();
+
+  const handleLogout = async () => {
+    try {
+      storage.remove("link", "accessToken");
+      storage.remove("link", "refreshToken");
+      popover.onClose();
+      router.replace("/login");
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const handleClickItem = (path) => {
+    popover.onClose();
+    router.push(path);
+  };
+
+  return (
+    <>
+      <IconButton
+        component={motion.button}
+        whileTap="tap"
+        whileHover="hover"
+        variants={varHover(1.05)}
+        onClick={popover.onOpen}
+        data-cy="account-popover"
+        sx={{
+          width: 40,
+          height: 40,
+          background: (theme) => alpha(theme.palette.grey[500], 0.08),
+          ...(popover.open && {
+            background: (theme) =>
+              `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`,
+          }),
+        }}
+      >
+        <Avatar
+          data-cy="account-popover-avatar"
+          src={user?.avatarUrl}
+          alt={user?.name}
+          sx={{
+            width: 36,
+            height: 36,
+            border: (theme) => `solid 2px ${theme.palette.background.default}`,
+          }}
+        >
+          {user?.name.charAt(0).toUpperCase()}
+        </Avatar>
+      </IconButton>
+
+      <CustomPopover
+        open={popover.open}
+        onClose={popover.onClose}
+        sx={{ width: 200, p: 0 }}
+      >
+        <Box sx={{ p: 2, pb: 1.5 }}>
+          <Typography data-cy="account-popover-name" variant="subtitle2" noWrap>
+            {user?.name}
+          </Typography>
+
+          <Typography variant="body2" sx={{ color: "text.secondary" }} noWrap>
+            {user?.email}
+          </Typography>
+        </Box>
+
+        <Divider sx={{ borderStyle: "dashed" }} />
+
+        <Stack sx={{ p: 1 }}>
+          {options.map((option) => (
+            <MenuItem
+              key={option.label}
+              onClick={() => handleClickItem(option.linkTo)}
+            >
+              {option.label}
+            </MenuItem>
+          ))}
+        </Stack>
+
+        <Divider sx={{ borderStyle: "dashed" }} />
+
+        <MenuItem
+          onClick={handleLogout}
+          sx={{ m: 1, fontWeight: "fontWeightBold", color: "error.main" }}
+        >
+          Logout
+        </MenuItem>
+      </CustomPopover>
+    </>
+  );
+}

package/src/layouts/common/header-shadow.jsx

@@ -0,0 +1,26 @@
+import Box from "@mui/material/Box";
+import React from "react";
+
+// ----------------------------------------------------------------------
+
+export default function HeaderShadow({ sx, ...other }) {
+  return (
+    <Box
+      sx={{
+        left: 0,
+        right: 0,
+        bottom: 0,
+        m: "auto",
+        height: 24,
+        zIndex: -1,
+        opacity: 0.48,
+        borderRadius: "50%",
+        position: "absolute",
+        width: `calc(100% - 48px)`,
+        boxShadow: (theme) => theme.customShadows.z8,
+        ...sx,
+      }}
+      {...other}
+    />
+  );
+}

package/src/layouts/common/header-sim.jsx

@@ -0,0 +1,52 @@
+import AppBar from "@mui/material/AppBar";
+import { HEADER } from "../config-layout";
+import HeaderShadow from "./header-shadow";
+import Logo from "../../components/logo";
+import React from "react";
+import SettingsButton from "./settings-button";
+import Stack from "@mui/material/Stack";
+import Toolbar from "@mui/material/Toolbar";
+import { bgBlur } from "../../theme/css";
+import { useOffSetTop } from "../../hooks/use-off-set-top";
+import { useTheme } from "@mui/material/styles";
+// ----------------------------------------------------------------------
+
+export default function HeaderSim() {
+  const theme = useTheme();
+
+  const offsetTop = useOffSetTop(HEADER.H_DESKTOP);
+
+  return (
+    <AppBar>
+      <Toolbar
+        sx={{
+          justifyContent: "space-between",
+          height: {
+            xs: HEADER.H_MOBILE,
+            md: HEADER.H_DESKTOP,
+          },
+          transition: theme.transitions.create(["height"], {
+            easing: theme.transitions.easing.easeInOut,
+            duration: theme.transitions.duration.shorter,
+          }),
+          ...(offsetTop && {
+            ...bgBlur({
+              color: theme.palette.background.default,
+            }),
+            height: {
+              md: HEADER.H_DESKTOP_OFFSET,
+            },
+          }),
+        }}
+      >
+        <Logo />
+
+        <Stack direction="row" alignItems="center" spacing={1}>
+          <SettingsButton />
+        </Stack>
+      </Toolbar>
+
+      {offsetTop && <HeaderShadow />}
+    </AppBar>
+  );
+}