mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-22 16:38:21 +00:00
init
This commit is contained in:
Rudra
parent
0b1ec0d7cd
commit
2f5c5e88ad
9 changed files with 112 additions and 44 deletions
|
|
@ -8,31 +8,42 @@ import { authenticationService } from '@/_services';
|
|||
import SolidIcon from '@/_ui/Icon/SolidIcons';
|
||||
import { ToolTip } from '@/_components';
|
||||
import { decodeEntities } from '@/_helpers/utils';
|
||||
|
||||
const Menu = (props) => {
|
||||
const { t } = useTranslation();
|
||||
const { admin } = authenticationService.currentSessionValue;
|
||||
const darkMode = localStorage.getItem('darkMode') === 'true';
|
||||
|
||||
return (
|
||||
<components.Menu {...props}>
|
||||
<div className={darkMode && 'dark-theme'} style={{ padding: '4px' }}>
|
||||
{admin && (
|
||||
<>
|
||||
<div
|
||||
className="org-custom-select-header-wrap"
|
||||
style={{ padding: '8px 12px' }}
|
||||
onClick={() => props.selectProps.setShowEditOrg(true)}
|
||||
>
|
||||
<div className="row cursor-pointer d-flex align-items-center">
|
||||
<div className="col-10">{props?.selectProps?.value?.label}</div>
|
||||
<div className="col-1 tj-secondary-btn org-edit-icon">
|
||||
<SolidIcon name="editrectangle" width="14" fill="#3E63DD" />
|
||||
</div>
|
||||
</div>
|
||||
<>
|
||||
<div
|
||||
className="org-custom-select-header-wrap"
|
||||
style={{ padding: '8px 12px' }}
|
||||
// onClick={() => props.selectProps.setShowEditOrg(true)}
|
||||
>
|
||||
<div className="row cursor-pointer d-flex align-items-center">
|
||||
<div className="col-10">Workspaces ({props.options.length})</div>
|
||||
{admin && (
|
||||
<ToolTip message={'Add new workspace'} position="top">
|
||||
<div className="col-1 tj-secondary-btn org-edit-icon" onClick={props.selectProps.setShowCreateOrg}>
|
||||
{/* <SolidIcon name="editrectangle" width="14" fill="#3E63DD" /> */}
|
||||
<SolidIcon
|
||||
name="plus"
|
||||
fill="#3E63DD"
|
||||
className="add-new-workspace-icon"
|
||||
dataCy="add-new-workspace-link"
|
||||
width="18"
|
||||
/>
|
||||
</div>
|
||||
</ToolTip>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
|
||||
<div className={`${darkMode && 'dark-theme'}`}>{props.children}</div>
|
||||
|
||||
<div
|
||||
className="cursor-pointer d-flex align-items-center add-workspace-button"
|
||||
style={{ padding: '4px 12px', color: '#3E63DD' }}
|
||||
|
|
@ -68,12 +79,12 @@ export const CustomSelect = ({ ...props }) => {
|
|||
const [showEditOrg, setShowEditOrg] = useState(false);
|
||||
const [showCreateOrg, setShowCreateOrg] = useState(false);
|
||||
const darkMode = localStorage.getItem('darkMode') === 'true';
|
||||
const currentValue = props?.options.find((option) => option?.value === props?.value);
|
||||
// const currentValue = props?.options.find((option) => option?.value === props?.value);
|
||||
|
||||
return (
|
||||
<>
|
||||
<CreateOrganization showCreateOrg={showCreateOrg} setShowCreateOrg={setShowCreateOrg} />
|
||||
<EditOrganization showEditOrg={showEditOrg} setShowEditOrg={setShowEditOrg} currentValue={currentValue} />
|
||||
{/* <EditOrganization showEditOrg={showEditOrg} setShowEditOrg={setShowEditOrg} currentValue={currentValue} /> */}
|
||||
|
||||
<Select
|
||||
className={`react-select-container ${darkMode && 'dark-theme'}`}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { authenticationService } from '@/_services';
|
||||
import { CustomSelect } from './CustomSelect';
|
||||
import { getAvatar, decodeEntities } from '@/_helpers/utils';
|
||||
|
|
@ -6,6 +6,8 @@ import { appendWorkspaceId, getWorkspaceIdOrSlugFromURL } from '@/_helpers/route
|
|||
import { ToolTip } from '@/_components';
|
||||
import { useCurrentSessionStore } from '@/_stores/currentSessionStore';
|
||||
import { shallow } from 'zustand/shallow';
|
||||
import SolidIcon from '@/_ui/Icon/SolidIcons';
|
||||
import { EditOrganization } from './EditOrganization';
|
||||
|
||||
/* TODO:
|
||||
each workspace related component has organizations list component which can be moved to a single wrapper.
|
||||
|
|
@ -37,29 +39,57 @@ export const OrganizationList = function () {
|
|||
}
|
||||
};
|
||||
|
||||
const options = organizationList.map((org) => ({
|
||||
value: org.id,
|
||||
name: org.name,
|
||||
slug: org.slug,
|
||||
label: (
|
||||
<div className={`align-items-center d-flex tj-org-dropdown ${darkMode && 'dark-theme'}`}>
|
||||
<div
|
||||
className="dashboard-org-avatar "
|
||||
data-cy={`${String(org.name).toLowerCase().replace(/\s+/g, '-')}-avatar`}
|
||||
>
|
||||
{getAvatar(org.name)}
|
||||
const options = organizationList
|
||||
.map((org) => ({
|
||||
value: org.id,
|
||||
name: org.name,
|
||||
slug: org.slug,
|
||||
label: (
|
||||
<div className={`align-items-center d-flex tj-org-dropdown ${darkMode && 'dark-theme'}`}>
|
||||
{org.id === current_organization_id ? (
|
||||
<div className="current-org-avatar">
|
||||
<SolidIcon name="tick" fill="#3E63DD" dataCy="add-new-workspace-link" width="21" />
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="dashboard-org-avatar "
|
||||
data-cy={`${String(org.name).toLowerCase().replace(/\s+/g, '-')}-avatar`}
|
||||
>
|
||||
{getAvatar(org.name)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ToolTip message={org.name} placement="right">
|
||||
<div className="org-name" data-cy={`${String(org.name).toLowerCase().replace(/\s+/g, '-')}-name-selector`}>
|
||||
<span style={{ color: org.id === current_organization_id ? '#3E63DD' : 'var(--slate12)' }}>
|
||||
{decodeEntities(org.name)}
|
||||
</span>
|
||||
</div>
|
||||
</ToolTip>
|
||||
{org.id === current_organization_id ? (
|
||||
<div className="current-org-indicator" data-cy="current-org-indicator" onClick={() => setShowEditOrg(true)}>
|
||||
<SolidIcon name="editable" fill="#3E63DD" dataCy="add-new-workspace-link" width="14" />
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="current-org-indicator"
|
||||
data-cy="current-org-indicator"
|
||||
onClick={() => console.log('Dummy onClick')}
|
||||
>
|
||||
<SolidIcon name="arrowtransfer" fill="#3E63DD" width="14" className="add-new-workspace-icon" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<ToolTip message={org.name} placement="right">
|
||||
<div className="org-name" data-cy={`${String(org.name).toLowerCase().replace(/\s+/g, '-')}-name-selector`}>
|
||||
{decodeEntities(org.name)}
|
||||
</div>
|
||||
</ToolTip>
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
),
|
||||
}))
|
||||
.sort((a, b) => (a.value === current_organization_id ? -1 : b.value === current_organization_id ? 1 : 0));
|
||||
|
||||
const [showEditOrg, setShowEditOrg] = useState(false);
|
||||
const currentValue = organizationList.find((option) => option?.id === current_organization_id);
|
||||
|
||||
return (
|
||||
<div className="org-select-container">
|
||||
<EditOrganization showEditOrg={showEditOrg} setShowEditOrg={setShowEditOrg} currentValue={currentValue} />
|
||||
<CustomSelect
|
||||
isLoading={isGettingOrganizations}
|
||||
options={options}
|
||||
|
|
|
|||
|
|
@ -10663,6 +10663,33 @@ tbody {
|
|||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.current-org-avatar {
|
||||
margin-right: 11px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 7px 8px;
|
||||
gap: 10px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.current-org-indicator {
|
||||
padding: 8px 8px;
|
||||
margin-left: auto;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.current-org-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover .current-org-indicator {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.org-name {
|
||||
color: var(--slate12) !important;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6 KiB After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5 KiB After Width: | Height: | Size: 4.9 KiB |
|
|
@ -8,19 +8,19 @@
|
|||
</p>
|
||||
<div class="social-links">
|
||||
<a target="_blank" href="https://github.com/ToolJet/ToolJet/stargazers">
|
||||
<img class="social-icons" alt="Company" src="cid:github" />
|
||||
<img height="20" width="auto" class="social-icons" alt="Company" src="cid:github" />
|
||||
</a>
|
||||
<a target="_blank" href="https://www.linkedin.com/company/tooljet">
|
||||
<img class="social-icons" alt="Company" src="cid:linkedin" />
|
||||
<img height="20" width="auto" class="social-icons" alt="Company" src="cid:linkedin" />
|
||||
</a>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://www.youtube.com/channel/UCf1p2G5Z7fPpvlBPf4l2I1w"
|
||||
>
|
||||
<img class="social-icons" alt="Company" src="cid:youtube" />
|
||||
<img height="20" width="auto" class="social-icons" alt="Company" src="cid:youtube" />
|
||||
</a>
|
||||
<a target="_blank" href="https://twitter.com/ToolJet">
|
||||
<img class="social-icons" alt="Company" src="cid:twitter" />
|
||||
<img height="20" width="auto" class="social-icons" alt="Company" src="cid:twitter" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<div class="header">
|
||||
<div class="logo-container padding-x-40 padding-y-20">
|
||||
{{#if (eq whiteLabelText "ToolJet")}}
|
||||
<img class="company-logo" alt="Company" src="cid:rocket" />
|
||||
<img height="30" width="auto" class="company-logo" alt="Company" src="cid:rocket" />
|
||||
{{else}}
|
||||
<img class="white-label-logo" alt="Company" src={{whiteLabelLogo}} />
|
||||
<img height="30" width="30" class="white-label-logo" alt="Company" src={{whiteLabelLogo}} />
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in a new issue