mirror of
https://github.com/usebruno/bruno.git
synced 2024-11-21 23:43:15 +01:00
feat: woekspace switch modal
This commit is contained in:
parent
fad953a983
commit
0709666b03
@ -0,0 +1,18 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
div.workspace {
|
||||
padding: 4px 6px;
|
||||
padding-left: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledWrapper;
|
@ -0,0 +1,32 @@
|
||||
import React from "react";
|
||||
import Modal from "components/Modal/index";
|
||||
import { IconBox } from '@tabler/icons';
|
||||
import { useSelector } from "react-redux";
|
||||
import StyledWrapper from './StyledWrapper';
|
||||
|
||||
const WorkspaceSelectModal = ({onClose, onSelect, title}) => {
|
||||
const { workspaces } = useSelector((state) => state.workspaces);
|
||||
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<Modal
|
||||
size="sm"
|
||||
title={title || "Select Workspace"}
|
||||
hideFooter={true}
|
||||
handleCancel={onClose}
|
||||
>
|
||||
<ul className="mb-2" >
|
||||
{(workspaces && workspaces.length) ? workspaces.map((w) => (
|
||||
<div className="workspace" key={w.uid} onClick={() => onSelect(w.uid)}>
|
||||
<IconBox size={18} strokeWidth={1.5}/> <span className="ml-2">{w.name}</span>
|
||||
</div>
|
||||
)) : (
|
||||
<div>No workspaces found</div>
|
||||
)}
|
||||
</ul>
|
||||
</Modal>
|
||||
</StyledWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
export default WorkspaceSelectModal;
|
@ -1,7 +1,8 @@
|
||||
import React, { useRef, forwardRef, useState, useEffect } from 'react';
|
||||
import Dropdown from 'components/Dropdown';
|
||||
import { IconCaretDown, IconBox, IconSwitch3, IconSettings, IconFolders } from '@tabler/icons';
|
||||
import { IconCaretDown, IconBox, IconSwitch3, IconSettings } from '@tabler/icons';
|
||||
import WorkspaceConfigurer from "../WorkspaceConfigurer";
|
||||
import WorkspaceSelectModal from "../WorkspaceSelectModal";
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { selectWorkspace } from 'providers/ReduxStore/slices/workspaces';
|
||||
import StyledWrapper from './StyledWrapper';
|
||||
@ -9,6 +10,7 @@ import StyledWrapper from './StyledWrapper';
|
||||
const WorkspaceSelector = () => {
|
||||
const dropdownTippyRef = useRef();
|
||||
const [openWorkspacesModal, setOpenWorkspacesModal] = useState(false);
|
||||
const [openSwitchWorkspaceModal, setOpenSwitchWorkspaceModal] = useState(false);
|
||||
const [activeWorkspace, setActiveWorkspace] = useState({});
|
||||
const dispatch = useDispatch();
|
||||
|
||||
@ -36,27 +38,26 @@ const WorkspaceSelector = () => {
|
||||
|
||||
const onDropdownCreate = (ref) => dropdownTippyRef.current = ref;
|
||||
|
||||
const handleSelectWorkspace = (workspace) => {
|
||||
dispatch(selectWorkspace(workspace));
|
||||
}
|
||||
const handleSelectWorkspace = (workspaceUid) => {
|
||||
dispatch(selectWorkspace({workspaceUid: workspaceUid}));
|
||||
setOpenSwitchWorkspaceModal(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledWrapper>
|
||||
{openWorkspacesModal && <WorkspaceConfigurer onClose={() => setOpenWorkspacesModal(false)}/>}
|
||||
{openSwitchWorkspaceModal && <WorkspaceSelectModal onSelect={handleSelectWorkspace} title="Switch Workspace" onClose={() => setOpenSwitchWorkspaceModal(false)}/>}
|
||||
|
||||
<div className="items-center cursor-pointer relative">
|
||||
<Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement='bottom-end'>
|
||||
{/* {workspaces && workspaces.length && workspaces.map((workspace) => (
|
||||
<div className="dropdown-item" onClick={() => handleSelectWorkspace(workspace)} key={workspace.uid}>
|
||||
<span>{workspace.name}</span>
|
||||
</div>
|
||||
))} */}
|
||||
<div className="dropdown-item" onClick={() => handleSelectWorkspace(workspace)}>
|
||||
<div className="dropdown-item" onClick={() => setOpenSwitchWorkspaceModal(true)}>
|
||||
<div className="pr-2 text-gray-600">
|
||||
<IconSwitch3 size={18} strokeWidth={1.5}/>
|
||||
</div>
|
||||
<span>Switch Workspace</span>
|
||||
</div>
|
||||
|
||||
<div className="dropdown-item" onClick={() => handleSelectWorkspace(workspace)}>
|
||||
<div className="dropdown-item" onClick={() => setOpenWorkspacesModal(true)}>
|
||||
<div className="pr-2 text-gray-600">
|
||||
<IconSettings size={18} strokeWidth={1.5}/>
|
||||
</div>
|
||||
@ -64,7 +65,6 @@ const WorkspaceSelector = () => {
|
||||
</div>
|
||||
</Dropdown>
|
||||
</div>
|
||||
{openWorkspacesModal && <WorkspaceConfigurer onClose={() => setOpenWorkspacesModal(false)}/>}
|
||||
</StyledWrapper>
|
||||
);
|
||||
};
|
||||
|
@ -20,7 +20,7 @@ export const workspacesSlice = createSlice({
|
||||
}
|
||||
},
|
||||
selectWorkspace: (state, action) => {
|
||||
state.activeWorkspaceUid = action.payload.uid;
|
||||
state.activeWorkspaceUid = action.payload.workspaceUid;
|
||||
},
|
||||
renameWorkspace: (state, action) => {
|
||||
const { name, uid } = action.payload;
|
||||
|
Loading…
Reference in New Issue
Block a user