react-bootstrap#Tab JavaScript Examples
The following examples show how to use
react-bootstrap#Tab.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: hardwareWallets.js From xpub-tool with MIT License | 6 votes |
|
HardwareWallets = ({ purpose, accountNumber, network }) => {
const path = accountDerivationPath({ purpose, accountNumber, network })
return (
<Tabs id="hardware-wallet-selector">
{[LEDGER, TREZOR].map(type => (
<Tab key={type} eventKey={type} title={type.toUpperCase()}>
<ExtPubKeyImporter
key={path}
network={network}
bip32Path={path}
keystore={type}
/>
</Tab>
))}
</Tabs>
)
}
Example #2
| Source File: OwnersSearch.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 6 votes |
|
export default function OwnersSearch({ loading, onOwnersSearch = () => {}}) {
const [currentTab, setCurrentTab] = useState(SEARCH_TYPES.USER);
const [searchState, setFormState, resetFormState] = useFormState();
return (
<div className="owners-search">
<h3><Message msgId={'cadastrapp.proprietaire.title'}/></h3>
<Tabs
onSelect={k => setCurrentTab(k)}
className="not-scrolled-tab"
activeKey={currentTab}
defaultActiveKey={SEARCH_TYPES.USER}>
<Tab
eventKey={SEARCH_TYPES.USER} title={<Message msgId={'cadastrapp.proprietaire.tab1'}/>}>
<User
values={searchState?.[SEARCH_TYPES.USER] ?? {}}
setValue={(key, value) => setFormState(SEARCH_TYPES.USER, key, value)} />
</Tab>
<Tab eventKey={SEARCH_TYPES.OWNER_ID} title={<Message msgId={'cadastrapp.proprietaire.tab2'}/>}>
<OwnerId
values={searchState?.[SEARCH_TYPES.OWNER_ID] ?? {}}
setValue={(key, value) => setFormState(SEARCH_TYPES.OWNER_ID, key, value)} />
</Tab>
<Tab eventKey={SEARCH_TYPES.OWNER_LOT} title={<Message msgId={'cadastrapp.proprietaire.tab3'}/>}>
<Lot
values={searchState?.[SEARCH_TYPES.OWNER_LOT] ?? {}}
setValue={(key, value) => setFormState(SEARCH_TYPES.OWNER_LOT, key, value)} />
</Tab>
</Tabs>
<SearchButtons
loading={loading}
valid={isSearchValid(currentTab, searchState[currentTab])}
onClear={() => resetFormState(currentTab)}
onSearch={() => {
onOwnersSearch(SEARCH_TYPES.USER, searchState[currentTab]);
}} />
</div>
);
}
Example #3
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 6 votes |
|
function SharePreviewPopup(url, projectName, playlistName = null) {
confirmAlert({
// eslint-disable-next-line react/prop-types
customUI: ({ onClose }) => (
<div className="share-project-preview-url project-share-check">
<Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
<Tab eventKey="profile" title="Share">
{playlistName ? (
<ShareProject
url={url}
playlistName={playlistName}
onClose={onClose}
/>
) : (<ShareProject url={url} projectName={projectName} onClose={onClose} />)}
</Tab>
<Tab eventKey="home" title="Embed">
{playlistName ? (
<Embed
url={url}
playlistName={playlistName}
onClose={onClose}
/>
) : (
<Embed
url={url}
projectName={projectName}
onClose={onClose}
/>
)}
</Tab>
</Tabs>
</div>
),
});
return <div />;
}
Example #4
| Source File: InformationContent.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 6 votes |
|
export default function InformationContent({
parcelle,
owners = [],
letters = [],
fiuc = {},
fiucHistoryMutation = [],
fiscalSubDiv = [],
authLevel = {},
additionalData = {}
}) {
const { isCNIL1, isCNIL2 } = authLevel; // TODO: get from state/props
return (
<Tabs defaultActiveKey={1} id="uncontrolled-tab-example" onSelect={() => /* refresh table column sizes */ setTimeout(() => {window.dispatchEvent(new Event('resize'));}, 500)}>
<Tab eventKey={1} title={<Message msgId="cadastrapp.duc.parcelle"/>}>
<Plot isCNIL1={isCNIL1} isCNIL2={isCNIL2} parcelle={parcelle} fiuc={fiuc} {...additionalData}/>
</Tab>
{isCNIL1 || isCNIL2 ? <Tab eventKey={2} title={<Message msgId="cadastrapp.duc.propietaire" />}>
<Owners owners={owners} parcelle={parcelle} />
</Tab> : undefined}
{isCNIL1 || isCNIL2 ? <Tab eventKey={3} title={<Message msgId="cadastrapp.duc.copropietaire" />}>
<CoOwners parcelle={parcelle}/>
</Tab> : undefined}
{isCNIL2 ? <Tab eventKey={4} title={<Message msgId="cadastrapp.duc.batiments" />}>
<Buildings parcelle={parcelle} letters={letters}/>
</Tab> : undefined}
{isCNIL2 ? <Tab eventKey={5} title={<Message msgId="cadastrapp.duc.subdiv" />}>
<FiscalSubDivisions parcelle={parcelle} fiscalSubDiv={fiscalSubDiv} />
</Tab> : undefined}
<Tab eventKey={6} title={<Message msgId="cadastrapp.duc.histomut" />}>
<HistoryMutation parcelle={parcelle} fiucHistoryMutation={fiucHistoryMutation} />
</Tab>
</Tabs>
);
}
Example #5
| Source File: userCategoriesTopicsContainer.js From community-forum-frontend with GNU General Public License v3.0 | 6 votes |
|
function UserCategoriesTopicsContainer(props) {
return (
<Tabs variant="pills" defaultActiveKey="categories">
<Tab
eventKey="categories"
title={`Categories (${props.categoriesCreated.length})`}
>
<Row className="user-categories-topics-list">
{props.categoriesCreated.map((category) => (
<Col key={category._id} md={props.columnValue}>
<CategoryTopicCard entityType="category" category={category} />
</Col>
))}
</Row>
</Tab>
<Tab
eventKey="topics"
title={`Topics (${props.topicsCreated.length})`}
>
<Row className="user-categories-topics-list">
{props.topicsCreated.map((topic) => (
<Col key={topic._id} md={props.columnValue}>
<CategoryTopicCard
entityType="topic"
category={{ _id: topic.parentCategory }}
topic={topic}
/>
</Col>
))}
</Row>
</Tab>
</Tabs>
);
}
Example #6
| Source File: TabsMenu.js From gatsby-ipfs-web-wallet with MIT License | 6 votes |
|
function TabsMenu (props) {
const menuComponents = MenuComponents(props)
return (
<>
{menuComponents.length > 0 && (
<Tabs
defaultActiveKey='Configure'
id='configure-tabs'
onSelect={props.onSelect}
>
<Tab title='General' eventKey='Configure' />
{menuComponents.map((menuItem, i) => (
<Tab
key={`${menuItem.id}-${i}`}
eventKey={menuItem.key}
title={menuItem.key}
{...props}
/>
))}
</Tabs>
)}
</>
)
}
Example #7
| Source File: KeyFeatures.js From Website2020 with MIT License | 5 votes |
|
function Posts() {
useEffect(() => {
window.scrollTo(0, 0);
});
return (
<>
<div className="mt-5">
<Container>
<div className="title-block">
<Row className="mt-5 justify-content-center heading-component">
<div style={{ textAlign: 'center', marginBottom:'20px' }}>
<h2 style={{ fontSize: "4.5rem", margin:'0' }}>ANAHITA</h2>
{/* <h3 style={{ fontSize: "3rem" }}>The Goddess of Water</h3> */}
</div>
</Row>
</div>
<Row className="d-flex col-main justify-content-center">
<Col sm="12" lg="8" className="my-auto text-center mt-5">
<div className="iframe-container">
<iframe style={{ boxShadow: 'none' }} title="A 3D model" className="cad-model sketchfab-responsive" src="https://sketchfab.com/models/21c78ab51dda4c7a9445b4fb0b877e22/embed?autospin=1&autostart=1&preload=1" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div>
</Col>
<Col sm="12" lg="4" className="featureCol my-auto">
<div className="briefspec">
<Tabs defaultActiveKey="home" id="uncontrolled-tab">
<Tab className="tab-content" eventKey="home" title="Overview">
<div className="my-1">
{specs.brief}
</div>
<div>
<a className="tdr-button" href="https://drive.google.com/file/d/1AN2uvKzoERqeampDUTVilUPUmSCickFL/view?usp=sharing" target="_blank" rel="noopener noreferrer">
Report
</a>
</div>
</Tab>
<Tab className="tab-content" eventKey="specs" title="Specifications">
<Table bordered className="my-1">
<tbody>
{
specs.specsTable.map(
(data) => (
<tr>
<td style={{ width: '30%', fontWeight: 'bold' }}>{data.name}</td>
<td>{data.spec}</td>
</tr>
)
)
}
</tbody>
</Table>
</Tab>
</Tabs>
</div>
</Col>
</Row>
</Container>
</div>
</>
);
}
Example #8
| Source File: App.js From LinkedIn-Scraper with Apache License 2.0 | 5 votes |
|
function App() {
return (
<div>
<Navbar bg="dark" variant="dark" expand="lg">
<Navbar.Brand href="#home">
<span role="img" aria-label="logo">
?
</span>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="https://github.com/xtstc131/LinkedIn-Scraper">
About
</Nav.Link>
<Nav.Link href="#home">Contact</Nav.Link>
<Nav.Link href="https://github.com/xtstc131/LinkedIn-Scraper">
Contribute
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<Jumbotron className="text-center jumbotron">
<Container>
<Row>
<Col></Col>
<Col xs={6}>
<h1 className="my-head">
{/* <span
className="typer"
id="main"
data-words=""
data-delay="100"
data-colors="#FFFFFF,#9ac4f8"
data-delete-delay="1000"
></span>
<span className="cursor" data-owner="main"></span> */}
MalloCat, A LinkedIn Scraper
</h1>
<p className="lead ">
MalloCat is a platform for displaying the latest Software
Engineer job information to the new graduates. Supported by
automatic running crawlers targeting on LinkedIn.
</p>
<p>
<Button
className="rounded-pill"
variant="outline-light"
href="https://github.com/xtstc131/LinkedIn-Scraper"
>
Github
<img className="btn_logo" src={github_logo} alt="" />
</Button>
</p>
</Col>
<Col></Col>
</Row>
</Container>
</Jumbotron>
<hr className="my-4"></hr>
<div className="content">
<Container>
<Tabs>
<Tab eventKey="linkedin_fulltime" title="Full-time">
<Table source="linkedin_fulltime"></Table>
</Tab>
<Tab eventKey="linkedin_intern" title="Intern">
<Table source="linkedin_intern"></Table>
</Tab>
</Tabs>
<p>© 2020. All rights reserved.</p>
<img
src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Flinkedin-spider.netlify.app"
alt=""
/>
</Container>
</div>
</div>
);
}
Example #9
| Source File: PlotSearch.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 5 votes |
|
export default function PlotsSearch({onSearch = () => {}, loading}) {
const [currentTab, setCurrentTab] = useState('reference');
const [searchState, setFormState, resetFormState] = useFormState();
return (
<div className="plots-search">
<h3><Message msgId={'cadastrapp.parcelle.title'}/></h3>
<Tabs
className="not-scrolled-tab"
onSelect={k => setCurrentTab(k)}
activeKey={currentTab}
defaultActiveKey={currentTab}>
<Tab eventKey={SEARCH_TYPES.REFERENCE} title={<Message msgId={'cadastrapp.parcelle.tab1'}/>}>
<Reference
values={searchState?.[SEARCH_TYPES.REFERENCE] ?? {}}
setValue={(key, value) => setFormState(SEARCH_TYPES.REFERENCE, key, value) }/>
</Tab>
<Tab eventKey={SEARCH_TYPES.ADDRESS} title={<Message msgId={'cadastrapp.parcelle.tab2'}/>}
style={{ height: 220 }}>
<Address
values={searchState?.[SEARCH_TYPES.ADDRESS] ?? {}}
setValue={(key, value) => setFormState(SEARCH_TYPES.ADDRESS, key, value)} />
</Tab>
<Tab eventKey={SEARCH_TYPES.ID} title={<Message msgId={'cadastrapp.parcelle.tab3'}/>}>
<Identifier
values={searchState?.[SEARCH_TYPES.ID] ?? {}}
setValue={(key, value) => setFormState(SEARCH_TYPES.ID, key, value)} />
</Tab>
<Tab eventKey={SEARCH_TYPES.LOT} title={<Message msgId={'cadastrapp.parcelle.tab4'}/>}>
<Lot
values={searchState?.[SEARCH_TYPES.LOT] ?? {}}
setValue={(key, value) => setFormState(SEARCH_TYPES.LOT, key, value)} />
</Tab>
</Tabs>
<SearchButtons
loading={loading}
valid={isSearchValid(currentTab, searchState[currentTab])}
onClear={() => resetFormState(currentTab)}
onSearch={() => onSearch(currentTab, searchState[currentTab])}
/>
</div>
);
}
Example #10
| Source File: App.js From stake-nucypher with GNU Affero General Public License v3.0 | 5 votes |
|
render() {
return <>
<StoreProvider>
<Router>
<Navbar expand="lg">
<Navbar.Brand href="#" className="mr-auto">
<div className="logo">
</div>
</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="/">Staking</Nav.Link>
<Nav.Link href="/worklock">Worklock</Nav.Link>
</Nav>
<div className="float-right h4 m-5">
<a href="https://github.com/cryptoseal86/stake-nucypher" target="_blank" rel="noopener noreferrer">
<FaGithub></FaGithub>
</a>
</div>
</Navbar>
<div className="App">
<Switch>
<Route exact path="/">
<div className="staker-container">
<Container>
<Tabs defaultActiveKey="stake" activeKey={this.state.key} className="tab-controls d-flex mx-auto" onSelect={this.handleSelectTab.bind(this)}>
<Tab eventKey="stake" title="Stake">
<StakerDashboard onTabChange={this.handleSelectTab.bind(this)}></StakerDashboard>
</Tab>
<Tab eventKey="withdraw" title="Withdraw">
<WithdrawDashboard></WithdrawDashboard>
</Tab>
<Tab eventKey="history" title="History">
<HistoryDashboard></HistoryDashboard>
</Tab>
</Tabs>
</Container>
</div>
</Route>
<Route path="/worklock">
<div className="staker-container">
<Container>
<WorkLockDashboard></WorkLockDashboard>
</Container>
</div>
</Route>
</Switch>
</div>
</Router>
</StoreProvider>
</>;
}
Example #11
| Source File: Edit.jsx From maps with MIT License | 5 votes |
|
Edit = (props) => {
const { id } = useParams();
const [key, setKey] = useState("home");
const [coop, setCoop] = useState(null);
useEffect(() => {
if (coop == null) {
CoopService.getById(id, function (data) {
//data.addresses.map((address) => {
// address.locality.state = address.locality.state.id;
//});
setCoop(data);
});
}
}, [props]);
if (coop == null) {
return <></>;
}
return (
<Route path="/edit/:id/:tab">
{({ match, history }) => {
const { tab } = match ? match.params : {};
return (
<>
<h5>{coop.name}</h5>
<Tabs
activeKey={tab}
onSelect={(nextTab) => history.push(`/edit/${id}/${nextTab}`)}
>
<Tab eventKey="home" title="Home">
<FormContainer coop={coop} />
</Tab>
<Tab eventKey="people" title="People">
<ListPeople coop={coop} />
</Tab>
</Tabs>
</>
);
}}
</Route>
);
}
Example #12
| Source File: ipfs-tabs.js From gatsby-ipfs-web-wallet with MIT License | 5 votes |
|
render () {
const { commandOutput } = _this.state
const { statusOutput, appStatusOutput } = _this.props
return (
<Row>
<Col md={12}>
<Tabs
defaultActiveKey='status'
id='ipfs-coord-tabs'
className='mb-3 nav-tabs-custom'
>
<Tab eventKey='status' title='Status'>
<Text
id='statusLog'
name='statusLog'
inputType='textarea'
labelPosition='none'
rows={20}
readOnly
value={appStatusOutput}
onChange={() => {
// Prevents DOM error
}}
/>
</Tab>
<Tab eventKey='ipfs-coord' title='IPFS Coord'>
<Text
id='ipfsCoordLog'
name='ipfsCoordLog'
inputType='textarea'
labelPosition='none'
rows={20}
readOnly
value={statusOutput}
onChange={() => {
// Prevents DOM error
}}
/>
</Tab>
<Tab eventKey='command' title='Command'>
<Text
id='commandLog'
name='commandLog'
inputType='textarea'
labelPosition='none'
rows={20}
readOnly
value={`${commandOutput ? `${commandOutput}>` : '>'}`}
onChange={() => {
// Prevents DOM error
}}
/>
<Text
id='commandInput'
name='commandInput'
inputType='tex'
labelPosition='none'
value={this.state.commandInput}
onChange={this.handleTextInput}
onKeyDown={_this.handleCommandKeyDown}
/>
</Tab>
</Tabs>
</Col>
</Row>
)
}
Example #13
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
function ActivityCreate(props) {
const organization = useSelector((state) => state.organization);
const { teamPermission } = useSelector((state) => state.team);
const { selectedPlaylist } = useSelector((state) => state.playlist);
const { permission } = organization;
const { match } = props;
const dispatch = useDispatch();
useEffect(() => {
dispatch(loadPlaylistAction(match.params.projectId, match.params.playlistId));
}, []);
useEffect(() => {
if (Object.keys(teamPermission).length === 0 && selectedPlaylist?.project?.team?.id && organization?.currentOrganization?.id) {
dispatch(getTeamPermission(organization?.currentOrganization?.id, selectedPlaylist?.project?.team?.id));
}
}, [teamPermission, selectedPlaylist, organization?.currentOrganization?.id]);
return (
<>
<div>
<div className="content-wrapper create-activity">
<div className="content">
{/* header */}
<div className="intro-header">
<div className="title-line">
<h2>Edit Resource</h2>
<div className="line" />
</div>
<Link to={`/org/${organization.currentOrganization?.domain}/project/${match.params.projectId}`}>
<div className="back-playlist">
<FontAwesomeIcon icon="arrow-left" />
Back to Playlist
</div>
</Link>
</div>
{/* Tabs */}
{(Object.keys(teamPermission).length ? teamPermission?.Team?.includes('team:edit-activity') : permission?.Activity?.includes('activity:edit')) ? (
<Tab.Container id="left-tabs-example" defaultActiveKey="edit">
<Row>
<Col sm={3}>
<Nav variant="pills" className="flex-column">
<Nav.Item>
<Nav.Link eventKey="edit">
<FontAwesomeIcon icon="edit" />
Edit Activity
</Nav.Link>
</Nav.Item>
</Nav>
</Col>
<Col sm={9}>
<Tab.Content>
<Tab.Pane eventKey="edit">
<ActivityWizard />
</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
) : <Alert variant="danger" alt="">You are not authorized to edit this activity.</Alert>}
</div>
</div>
</div>
</>
);
}
Example #14
| Source File: Participation.js From Website2020 with MIT License | 5 votes |
|
function Posts() {
return (
<>
<div className="section landing-section">
<Container className="text-center">
<Tabs defaultActiveKey="studentcompetitions" id="uncontrolled-tab-example" className="">
<Tab eventKey="studentcompetitions" title="Competitions" className="tab-body">
<Row>
<Col md="6" className="my-auto">
<h2 className="mt-0 mb-3 tab-heading">Student Competitions</h2>
<p className="tab-content">
We aim to participate in National and International
student-level AUV compeititions - Robosub (organised by AUVSI),
Singapore AUV Challenge, and the NIOT-Student AUV Challenge.
</p>
</Col>
<Col md="6" className="text-center">
<img src={combinedimage} className="tab-image" />
</Col>
</Row>
</Tab>
<Tab eventKey="researchpotential" title="Research" className="tab-body">
<Row>
<Col md="6" className="my-auto">
<h2 className="mt-0 mb-3 tab-heading">Research Potential</h2>
<p className="tab-content">
Contribute to the development in the fields of marine
technology, and implement cutting-edge research ideas to our
vehicles
</p>
</Col>
<Col md="6" className="text-center">
<img src={resimage} className="tab-image" />
</Col>
</Row>
</Tab>
<Tab eventKey="training" title="Training" className="tab-body">
<Row>
<Col md="6" className="my-auto">
<h2 className="mt-0 mb-3 tab-heading">Training</h2>
<p className="tab-content">
Team AUV-IITK provides training to all its new recruits in the
various field of Robotics. It is because of this training that
many of the past members of team AUV-IITK are pursuing their
careers in robotics and doing exceptionally well owing to their
strong foundation.
</p>
</Col>
<Col md="6" className="text-center">
<img src={trainimage} className="mt-3 mb-3 tab-image" />
</Col>
</Row>
</Tab>
<Tab eventKey="socialprojects" title="Community" className="tab-body">
<Row>
<Col md="6" className="my-auto">
<h2 className="mt-0 mb-3 tab-heading">Social Projects</h2>
<p className="tab-content">
Apart from Robotics competitions, team AUV-IITK also actively
participates various hackathon and undertakes projects owing its
responsibility to the society.
</p>
</Col>
<Col md="6" className="text-center">
<img src={csrimage} className="tab-image" />
</Col>
</Row>
</Tab>
</Tabs>
</Container>
</div>
</>
)
}
Example #15
| Source File: activityOptions.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
function MyVerticallyCenteredModal(props) {
const { activity, activeType } = props;
return (
<Modal
{...props}
size="lg"
className="video_activity"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
<img src={logo} alt="" />
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Tabs defaultActiveKey={activeType} id="uncontrolled-tab-example">
<Tab eventKey="demo" title="Demo">
{!!activity && activity.demo_activity_id ? (
<Suspense fallback={<div>Loading</div>}>
<H5PPreview
activityId={activity.demo_activity_id.trim()}
tokenrequire={false}
showltipreview
/>
</Suspense>
) : (
<div className="stayTuned">
<h1>Stay Tuned!</h1>
<h5>Demo will be available Soon</h5>
</div>
)}
</Tab>
<Tab eventKey="video" title="Video">
{!!activity && !!activity.demo_video_id ? (
<iframe
width="100%"
height="400"
src={
`https://www.youtube.com/embed/${activity.demo_video_id.split('/').length > 0
&& activity.demo_video_id.split('/')[activity.demo_video_id.split('/').length - 1]}`
}
title={activity.demo_video_id}
/>
) : (
<div className="stayTuned">
<h1>Stay Tuned!</h1>
<h5>Video will be available Soon</h5>
</div>
)}
</Tab>
</Tabs>
</Modal.Body>
</Modal>
);
}
Example #16
| Source File: SwapWA.js From plenty-interface with GNU General Public License v3.0 | 4 votes |
|
SwapWA = (props) => {
const { tokenIn, setTokenIn, tokenOut, setTokenOut } = useLocationStateInWrappedAssets();
const activeTab = 'wrappedswap';
const [searchQuery, setSearchQuery] = useState('');
const [show, setShow] = useState(false);
const [showConfirmSwap, setShowConfirmSwap] = useState(false);
const [slippage, setSlippage] = useState(0.5);
const [recepient, setRecepient] = useState('');
const [tokenType, setTokenType] = useState('tokenIn');
const [firstTokenAmount, setFirstTokenAmount] = useState('');
const [secondTokenAmount, setSecondTokenAmount] = useState('');
const [swapData, setSwapData] = useState({});
const [computedOutDetails, setComputedOutDetails] = useState({});
const [showConfirmTransaction, setShowConfirmTransaction] = useState(false);
const [getTokenPrice, setGetTokenPrice] = useState({});
const [userBalances, setUserBalances] = useState({});
const [loading, setLoading] = useState(false);
const [loaderMessage, setLoaderMessage] = useState({});
const [tokenContractInstances, setTokenContractInstances] = useState({});
const [loaderInButton, setLoaderInButton] = useState(false);
const [balanceUpdate, setBalanceUpdate] = useState(false);
const pairExist = useMemo(() => {
return !!config.WRAPPED_ASSETS[config.NETWORK][tokenIn.name].REF_TOKEN[tokenOut.name];
}, [tokenIn, tokenOut]);
useEffect(() => {
if (
Object.prototype.hasOwnProperty.call(tokenIn, 'name') &&
Object.prototype.hasOwnProperty.call(tokenOut, 'name')
) {
if (tokenIn.name) {
const tokenout = getReferenceToken(tokenIn.name);
setTokenOut(tokenout);
}
}
}, [tokenIn, tokenOut]);
useEffect(() => {
if (props.walletAddress) {
const updateBalance = async () => {
setTokenContractInstances({});
const tzBTCName = 'tzBTC';
const balancePromises = [];
tokenIn.name === tzBTCName
? balancePromises.push(fetchtzBTCBalance(props.walletAddress))
: balancePromises.push(getUserBalanceByRpc(tokenIn.name, props.walletAddress));
tokenOut.name === tzBTCName
? balancePromises.push(fetchtzBTCBalance(props.walletAddress))
: balancePromises.push(getUserBalanceByRpc(tokenOut.name, props.walletAddress));
const balanceResponse = await Promise.all(balancePromises);
setUserBalances((prev) => ({
...prev,
...balanceResponse.reduce(
(acc, cur) => ({
...acc,
[cur.identifier]: cur.balance,
}),
{},
),
}));
};
updateBalance();
}
}, [tokenIn, tokenOut, props, balanceUpdate]);
const handleClose = () => {
setShow(false);
setShowConfirmSwap(false);
setSearchQuery('');
setShowConfirmTransaction(false);
};
const handleTokenType = (type) => {
setBalanceUpdate(false);
setShow(true);
setTokenType(type);
setLoading(false);
};
const handleTokenInput = (input) => {
setFirstTokenAmount(input);
setComputedOutDetails({});
if (input === '' || isNaN(input)) {
setFirstTokenAmount('');
setSecondTokenAmount('');
setComputedOutDetails({
tokenOut_amount: '',
fees: 0,
});
} else {
let computedData;
if (pairExist) {
computedData = computeTokenOutput(
parseFloat(input),
swapData.tokenIn_supply,
swapData.tokenOut_supply,
swapData.exchangeFee,
slippage,
);
} else {
computedData = computeTokenOutForRouteBase(parseFloat(input), swapData, slippage);
}
setComputedOutDetails(computedData);
setLoading(false);
}
};
const handleOutTokenInput = (input) => {
setSecondTokenAmount(input);
setComputedOutDetails({});
if (input === '' || isNaN(input)) {
setFirstTokenAmount('');
setSecondTokenAmount('');
setComputedOutDetails({
tokenOut_amount: '',
fees: 0,
});
} else {
let computedData;
if (pairExist) {
computedData = computeOutputBasedOnTokenOutAmount(
parseFloat(input),
swapData.tokenIn_supply,
swapData.tokenOut_supply,
swapData.exchangeFee,
slippage,
);
} else {
computedData = computeTokenOutForRouteBaseByOutAmount(
parseFloat(input),
swapData,
slippage,
);
}
setFirstTokenAmount(computedData.tokenIn_amount);
setComputedOutDetails(computedData);
}
};
const fetchUserWalletBalance = () => {
setLoaderInButton(true);
};
useEffect(() => {
if (!props.walletAddress) {
return;
}
setLoaderInButton(true);
}, [props.walletAddress]);
useEffect(() => {
//setLoading(true);
setLoaderInButton(true);
getTokenPrices().then((tokenPrice) => {
setGetTokenPrice(tokenPrice);
//setLoading(false);
});
}, []);
const handleLoaderMessage = (type, message) => {
setLoaderMessage({
type: type,
message: message,
});
setLoading(false);
};
const resetAllValues = () => {
setSlippage(0.05);
setRecepient('');
setTokenType('tokenIn');
setFirstTokenAmount('');
setSecondTokenAmount('');
setComputedOutDetails({
tokenOut_amount: '',
});
};
const selectToken = (token) => {
setLoaderInButton(true);
setFirstTokenAmount('');
setSecondTokenAmount('');
setSwapData({});
setComputedOutDetails({
tokenOut_amount: '',
});
//setLoading(true);
if (tokenType === 'tokenIn') {
setTokenIn({
name: token.name,
image: token.image,
});
} else {
setTokenOut({
name: token.name,
image: token.image,
});
}
handleClose();
};
return (
<>
<div className="bg-themed my-0 swap-content-container leftToRightFadeInAnimation-4">
<Tabs
activeKey={activeTab}
className="swap-container-tab remove-border-bottom"
mountOnEnter={true}
unmountOnExit={true}
>
<Tab eventKey="wrappedswap" title="Swap Wrapped Assets">
<SwapContent
walletAddress={props.walletAddress}
setFirstTokenAmount={handleTokenInput}
firstTokenAmount={firstTokenAmount}
secondTokenAmount={secondTokenAmount}
connecthWallet={props.connecthWallet}
tokenIn={tokenIn}
tokenOut={tokenOut}
tokens={wrappedTokens}
handleTokenType={handleTokenType}
swapData={swapData}
computedOutDetails={computedOutDetails}
userBalances={userBalances}
tokenContractInstances={tokenContractInstances}
getTokenPrice={getTokenPrice}
setSlippage={setSlippage}
setRecepient={setRecepient}
recepient={recepient}
slippage={slippage}
loading={loading}
setLoading={setLoading}
handleLoaderMessage={handleLoaderMessage}
loaderMessage={loaderMessage}
setShowConfirmSwap={setShowConfirmSwap}
showConfirmSwap={showConfirmSwap}
handleClose={handleClose}
setLoaderMessage={setLoaderMessage}
resetAllValues={resetAllValues}
handleOutTokenInput={handleOutTokenInput}
setSecondTokenAmount={setSecondTokenAmount}
fetchUserWalletBalance={fetchUserWalletBalance}
loaderInButton={loaderInButton}
setLoaderInButton={setLoaderInButton}
setShowConfirmTransaction={setShowConfirmTransaction}
showConfirmTransaction={showConfirmTransaction}
theme={props.theme}
setBalanceUpdate={setBalanceUpdate}
/>
</Tab>
</Tabs>
</div>
<WrappedTokenModal
show={show}
activeTab={activeTab}
onHide={handleClose}
selectToken={selectToken}
tokens={wrappedTokens}
tokenIn={tokenIn}
tokenOut={tokenOut}
tokenType={tokenType}
searchQuery={searchQuery}
setSearchQuery={setSearchQuery}
/>
</>
);
}
Example #17
| Source File: index.js From contributor-graph with Apache License 2.0 | 4 votes |
|
ActivityChart = ({
repoList = ["apache/apisix"],
showAlert,
onDelete,
onLoading,
}) => {
const [loading, setLoading] = React.useState(false);
const [dataSource, setDataSource] = React.useState({});
const [xAxis] = React.useState(["1970-01-01"]);
const [shareModalVisible, setShareModalVisible] = React.useState(false);
const [openAlert, setOpenAlert] = React.useState(false);
const getShareParams = () =>
`?chart=contributorMonthlyActivity&repo=${repoList.join(",")}`;
const [, setCopied] = useClipboard(`https://git-contributor.com/${getShareParams()}`, { successDuration: 3000 });
const Alert = (props) => {
return <MuiAlert elevation={6} variant="filled" {...props} />;
};
const [option, setOption] = React.useState(
generateMonthlyActivityOption({
handleShareClick: () => {
const params = getShareParams();
handleShareToTwitterClick(params, repoList);
},
handleCopyClick: () => {
setCopied();
setOpenAlert(true);
},
handleDownloadClick: () => {
const params = getShareParams();
saveAs(`https://contributor-overtime-api.apiseven.com/contributors-svg${params}`, 'text.svg');
},
})
);
const Dialog = React.useCallback(() => {
return (
<CustomizedDialogs
open={shareModalVisible}
params={getShareParams()}
onChange={() => {
setShareModalVisible(false);
}}
/>
);
}, [shareModalVisible]);
const updateSeries = (passXAxis) => {
const newClonedOption = cloneDeep(
generateMonthlyActivityOption({
handleShareClick: () => {
const params = getShareParams();
handleShareToTwitterClick(params, repoList);
},
handleCopyClick: () => {
setCopied();
setOpenAlert(true);
},
handleDownloadClick: () => {
const params = getShareParams();
saveAs(`https://contributor-overtime-api.apiseven.com/contributors-svg${params}`, 'text.svg');
},
})
);
const datasetWithFilters = [
["ContributorNum", "Repo", "Date", "DateValue"],
];
const legend = [];
const limitDate = new Date(passXAxis[0]).getTime();
Object.entries(dataSource).forEach(([key, value]) => {
legend.push(key);
value.forEach((item) => {
datasetWithFilters.push([
item.contributorNum,
item.repo,
item.date,
new Date(item.date).getTime(),
]);
});
});
const newDateSet = datasetWithFilters.sort(
(a, b) => new Date(a[2]) - new Date(b[2])
);
const filterDataset = legend.map((item) => ({
id: item,
fromDatasetId: "dataset_raw",
transform: {
type: "filter",
config: {
and: [
{ dimension: "Repo", "=": item },
{ dimension: "DateValue", gte: limitDate },
],
},
},
}));
const series = legend.map((item) => ({
name: item,
type: "line",
datasetId: item,
showSymbol: false,
encode: {
x: "Date",
y: "ContributorNum",
itemName: "Repo",
tooltip: ["ContributorNum"],
},
}));
if (series.length === 1) {
series[0].areaStyle = {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: DEFAULT_COLOR + "80",
},
{
offset: 1,
color: DEFAULT_COLOR + "00",
},
]),
};
series[0].itemStyle = {
normal: {
color: DEFAULT_COLOR,
lineStyle: {
color: DEFAULT_COLOR,
},
},
};
}
newClonedOption.dataset = [
{
id: "dataset_raw",
source: newDateSet,
},
].concat(filterDataset);
newClonedOption.series = series;
newClonedOption.legend.data = legend;
setOption(newClonedOption);
};
const fetchData = (repo) => {
if (repo === "null" || repo === null) {
repo = "apache/apisix";
}
return new Promise((resolve, reject) => {
fetch(
`https://contributor-overtime-api.apiseven.com/monthly-contributor?repo=${repo}`
)
.then((response) => {
if (!response.ok) {
onDelete(repo);
let message = "";
switch (response.status) {
case 403:
message = "Hit rate limit";
break;
case 404:
message = "Repo format error / Repo not found";
break;
default:
message = "Request Error";
break;
}
throw message;
}
return response.json();
})
.then((myJson) => {
resolve({ repo, ...myJson });
})
.catch((e) => {
showAlert(e, "error");
reject();
});
});
};
React.useEffect(() => {
updateSeries(xAxis);
window.parent.postMessage({ legend: Object.keys(dataSource) }, "*");
window.history.pushState(null, null, getShareParams());
}, [dataSource, xAxis]);
React.useEffect(() => {
onLoading(loading);
}, [loading]);
React.useEffect(() => {
const datasourceList = Object.keys(dataSource);
if (datasourceList.length > repoList.length) {
const deleteList = datasourceList.filter(
(item) => !repoList.includes(item)
);
console.log("deleteList: ", deleteList);
const clonedDatasource = cloneDeep(dataSource);
setDataSource(omit(clonedDatasource, deleteList));
return;
}
const updateList = repoList.filter(
(item) => !datasourceList.includes(item)
);
setLoading(true);
Promise.all(updateList.map((item) => fetchData(item)))
.then((data) => {
const tmpDataSouce = {};
data.forEach((item) => {
const { Contributors = [], repo } = item;
const data = Contributors.map((item) => ({
repo,
contributorNum: item.Num,
date: item.Month,
}));
if (!tmpDataSouce[item.repo]) {
tmpDataSouce[repo] = data;
}
});
const clonedDatasource = cloneDeep(dataSource);
setDataSource({ ...clonedDatasource, ...tmpDataSouce });
setLoading(false);
})
.catch(() => {
setLoading(false);
});
}, [repoList]);
return (
<>
<div
className="content"
style={{
display: "flex",
justifyContent: "center",
}}
>
<Dialog />
<Snackbar
anchorOrigin={{ vertical: "top", horizontal: "center" }}
autoHideDuration={6000}
open={openAlert}
onClose={() => setOpenAlert(false)}
key={"topcenter"}
>
<Alert severity='success' onClose={() => setOpenAlert(false)}>
Copy link successfully
</Alert>
</Snackbar>
<div className="right" style={{ width: "90%", marginTop: "10px" }}>
<div id="chart">
<Tab.Container defaultActiveKey="contributor">
<Row>
<Col>
<Tab.Content>
<Tab.Pane eventKey="contributor">
<ReactECharts
option={option}
ref={(e) => {
if (e) {
const echartInstance = e.getEchartsInstance();
// then you can use any API of echarts.
window.echartInstance = echartInstance;
}
}}
style={{ height: 550 }}
showLoading={loading}
notMerge
/>
<DialogBox
params={getShareParams()}
/>
<MarkdownLink
params={getShareParams()}
type="contributorMonthlyActivity"
/>
</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
</div>
</div>
</div>
</>
);
}
Example #18
| Source File: LoginPage.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { email, password, rememberMe, error, clicked, activeTab, showPassword } = this.state;
const { isLoading, domain } = this.props;
console.log('domain', domain);
return (
<div className="auth-page">
<Logo />
{!clicked ? (
<div className="auth-container">
<div className="d-flex align-items-center justify-content-between">
<h1 className="auth-title ">Welcome to {window.__RUNTIME_CONFIG__.REACT_APP_INSTANT_NAME || 'Curriki'}</h1>
{/* <strong>OR</strong> */}
{/* <button
type="button"
className="btn btn-outline-primary text-uppercase"
onClick={this.goToRegister}
>
Sign Up
</button> */}
</div>
{/* <h2 className="auth-subtitle">Powering the creation of the world’s Most Immersive Learning Experience</h2> */}
<p className="auth-Pdescrip">Sign Up and start making a difference in the way learning experiences are created.</p>
<form onSubmit={this.onSubmit} autoComplete="off" className="auth-form">
<div className="form-group text-center mb-0">
<GoogleLogin
clientId={global.config.gapiClientId}
theme="dark"
render={(renderProps) => (
<button type="button" className="google-button" onClick={renderProps.onClick} disabled={renderProps.disabled}>
<img src={googleIcon} alt="googleIcon" style={{ float: 'left', paddingRight: '19.23px' }} />
Continue with Google
</button>
)}
onSuccess={this.onGoogleLoginSuccess}
onFailure={this.onGoogleLoginFailure}
cookiePolicy="single_host_origin"
/>
</div>
{window.__RUNTIME_CONFIG__.REACT_APP_STEMULI === 'true' && (
<div className="form-group text-center mb-4">
<button
type="button"
className="email-button"
onClick={() => {
window.location.href = `${window.__RUNTIME_CONFIG__.REACT_APP_API_URL}/oauth/stemuli/redirect`;
}}
>
<img src={stemuliIcon} alt="stemuli icon" style={{ float: 'left', paddingRight: '19.23px' }} />
<span>Continue with Stemuli</span>
</button>
</div>
)}
<div className="form-group text-center mb-0">
<button
type="button"
className="email-button"
onClick={() =>
this.setState({
clicked: true,
})
}
>
<img src={emailIcon} alt="email icon" style={{ float: 'left', paddingRight: '19.23px' }} />
<span>Continue with Email</span>
</button>
</div>
</form>
<p className="auth-description">
New to Curriki?
<a onClick={this.goToRegister}>Sign up</a>
</p>
<p className="auth-p2-descrip">
By clicking the Sign Up button, you are creating a CurrikiStudio account, and you agree to Currikis
<a href="/" target="_blank">
Terms of Use
</a>
and
<a href="/" target="_blank">
Privacy Policy.
</a>
</p>
</div>
) : (
<div className="auth-container">
<div className="d-flex align-items-center justify-content-between">
<h1 className="auth-title">Welcome to {window.__RUNTIME_CONFIG__.REACT_APP_INSTANT_NAME || 'Curriki'}</h1>
</div>
<p className="auth-Pdescrip">Start making a difference in the way learning experiences are created.</p>
<div className="content-section">
<Tabs
defaultActiveKey={activeTab}
activeKey={activeTab}
id="uncontrolled-tab-example"
onSelect={(key) => {
this.setState({ activeTab: key });
if (key === 'Sign up') this.goToRegister();
}}
>
<Tab eventKey="Log in" title="Log in">
<div className="module-content">
<form onSubmit={this.onSubmit} autoComplete="off" className="auth-form">
<div className="form-group">
{/* <FontAwesomeIcon icon="envelope" /> */}
<span>Email</span>
<input
autoFocus
className="input-box"
// type="email"
name="email"
required
value={email}
onChange={this.onChangeField}
/>
</div>
<div className="form-group">
{/* <FontAwesomeIcon icon="lock" /> */}
<span style={{ display: 'flex', justifyContent: 'space-between' }}>
Password
<div className="show-password" onClick={() => this.setState({ showPassword: !showPassword })}>
<img src={eye} alt="show-password" />
Show
</div>
</span>
<input
className="password-box"
type={showPassword ? 'text' : 'password'}
name="password"
placeholder="********"
required
value={password}
onChange={this.onChangeField}
/>
</div>
<div className="form-group remember-me">
<label>
<input type="checkbox" name="rememberMe" value={rememberMe} onChange={this.onChangeField} />
Keep me logged in.
</label>
<div className="forgot-password-box">
<Link to="/forgot-password">Forgot Password ?</Link>
</div>
</div>
<div className="form-group">
<Error error={error} />
</div>
<div className="form-button">
<button type="submit" className="btn btn-primary submit" disabled={isLoading || this.isDisabled()}>
{isLoading ? <img src={loader} alt="" /> : 'Log in'}
</button>
</div>
{true ? (
<>
{/* <div className="vertical-line">
<div className="line" />
<p className="line-or">or</p>
<div className="line" />
</div> */}
{/* <p className="auth-description text-center">
New to Curriki?
<a onClick={this.goToRegister}>
Sign up
</a>
</p> */}
<div className="form-group text-center mb-0">
<GoogleLogin
clientId={global.config.gapiClientId}
theme="dark"
render={(renderProps) => (
<button type="button" className="google-button" onClick={renderProps.onClick} disabled={renderProps.disabled}>
<img src={googleIcon} alt="googleIcon" />
<div>Log in with Google</div>
</button>
)}
onSuccess={this.onGoogleLoginSuccess}
onFailure={this.onGoogleLoginFailure}
cookiePolicy="single_host_origin"
/>
</div>
</>
) : null}
<div className="termsandcondition">
By clicking the "Login" button, you agree to Curriki' s{' '}
<a
target="_blank"
href={domain?.tos_type == 'URL' || domain?.tos_url != null ? domain?.tos_url : `/org/${domain?.domain}/terms-policy-content/tos_content`}
>
Terms of Use
</a>{' '}
and{' '}
<a
target="_blank"
href={
domain?.privacy_policy_type == 'URL' || domain?.privacy_policy_url != null
? domain?.privacy_policy_url
: `/org/${domain?.domain}/terms-policy-content/privacy_policy_content`
}
>
Privacy Policy.
</a>
</div>
</form>
</div>
</Tab>
{domain?.self_registration === true && <Tab eventKey="Sign up" title="Sign up" />}
</Tabs>
</div>
</div>
)}
{/* <img src={bg} className="bg1" alt="" /> */}
{/* <img src={bg1} className="bg2" alt="" /> */}
</div>
);
}
Example #19
| Source File: announcement.js From community-forum-frontend with GNU General Public License v3.0 | 4 votes |
|
render() {
return (
<div>
<div className="AnnouncementsHeading">Activities</div>
<div className="navTabs">
<Tabs defaultActiveKey="Announcements" id="uncontrolled-tab-example">
<Tab
eventKey="Announcements"
title="Announcements"
className="Announcementtab"
>
<div className="announcements">
{announcementData.map((announcement) => {
return (
<div className="announcement">
<div className="topannouncement">
<Avatar
className="avatar"
src={announcement.avatarUrl}
></Avatar>
<div className="text">
<div>{announcement.description}</div>
<div className="bottomannouncement">
{announcement.author}, {announcement.topicName}
</div>
</div>
<IconContext.Provider
value={{ color: "#F04B58", size: "24px" }}
>
<div className="icon">
<MdInfoOutline />
</div>
</IconContext.Provider>
</div>
</div>
);
})}
</div>
</Tab>
<Tab eventKey="Recents" title="Recents" className="recenttab">
<div className="announcements">
<div className="announcement">
<div className="topannouncement">
<Avatar className="avatar"></Avatar>
<div className="text">
<div>
@Jaskirat Singh Mentioned you in the comments in the
Topic: “Random”.
</div>
</div>
</div>
</div>
<div className="announcement">
<div className="topannouncement">
<Avatar className="avatar"></Avatar>
<div className="text">
<div>
@Jaskirat Singh Mentioned you in the comments in the
Topic: “Random”.
</div>
</div>
</div>
</div>
<div className="announcement">
<div className="topannouncement">
<Avatar className="avatar"></Avatar>
<div className="text">
<div>
@Jaskirat Singh Mentioned you in the comments in the
Topic: “Random”.
</div>
</div>
</div>
</div>
<div className="announcement">
<div className="topannouncement">
<Avatar className="avatar"></Avatar>
<div className="text">
<div>
@Jaskirat Singh Mentioned you in the comments in the
Topic: “Random”.
</div>
</div>
</div>
</div>
</div>
</Tab>
</Tabs>
</div>
</div>
);
}
Example #20
| Source File: userroles.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function UserRoles() {
const dispatch = useDispatch();
const { permission, activeOrganization, activePermission, permissionsId, roles, currentOrganization } = useSelector((state) => state.organization);
const AdminList = ['Organization', 'Projects', 'Activities', 'Integrations', 'Users'];
// organization all projects
const projectEditName = [
'organization:upload-thumb',
'organization:edit-project',
'organization:delete-project',
'organization:view-library-request-project',
'organization:review-library-request-project',
];
const projectViewName = ['organization:view-all-project'];
const [projectEdit, setProjectEdit] = useState([12, 309, 310, 314, 315]);
const [projectView, setProjectView] = useState([371]);
// organization import/export project
const projectexportEditName = ['organization:export-project', 'organization:import-project', 'organization:download-project'];
const projectexportViewName = ['organization:view-exported-project'];
const [projectExportEdit, setProjectExportEdit] = useState([]);
const [projectExportView, setProjectExportView] = useState([]);
// organization user
const userEditName = [
'organization:add-user',
'organization:invite-members',
'organization:update-user',
'organization:delete-user',
'organization:add-admin',
'organization:delete-admin',
'organization:remove-user',
];
const userViewName = ['organization:view-user'];
const [userEdit, setUserEdit] = useState([]);
const [userView, setUserView] = useState([]);
// organization manage roles
const userRoleEditName = ['organization:add-role', 'organization:edit-role'];
const userRoleViewName = ['organization:view-role'];
const [userRolesEdit, setUserRolesEdit] = useState([]);
const [userRoleView, setUserRoleView] = useState([]);
// org org
const orgEditName = ['organization:edit', 'organization:delete', 'organization:create'];
const orgViewName = ['organization:view'];
const [orgEdit, setOrgEdit] = useState([]);
const [orgView, setOrgView] = useState([]);
// org activity item
const orgActivityItemEditName = ['organization:create-activity-item', 'organization:delete-activity-item', 'organization:edit-activity-item'];
const orgActivityItemViewName = ['organization:view-activity-item'];
const [activityItemEdit, setActivityItemEdit] = useState([]);
const [activityItemView, setActivityItemView] = useState([]);
// org activity type
const orgActivityTypeEditName = ['organization:create-activity-type', 'organization:delete-activity-type', 'organization:edit-activity-type'];
const orgActivityTypeViewName = ['organization:view-activity-type'];
const [activityTypeEdit, setActivityTypeEdit] = useState([]);
const [activityTypeView, setActivityTypeView] = useState([]);
// org lms type
const orglmsEditName = ['organization:create-lms-setting', 'organization:delete-lms-setting', 'organization:edit-lms-setting'];
const orglmsViewName = ['organization:view-lms-setting'];
const [lmsSettingEdit, setlmsSettingEdit] = useState([]);
const [lmsSettingView, setLmsSettingView] = useState([]);
// org all lti type
const orgltiEditName = ['organization:create-all-setting', 'organization:delete-all-setting', 'organization:edit-all-setting'];
const orgltiViewName = ['organization:view-all-setting'];
const [ltiSettingEdit, setltiSettingEdit] = useState([]);
const [ltiSettingView, setLtiSettingView] = useState([]);
// org brightcove
const orgBrightCoveEditName = ['organization:create-brightcove-setting', 'organization:delete-brightcove-setting', 'organization:edit-brightcove-setting'];
const orgBrightCoveViewName = ['organization:view-brightcove-setting'];
const [orgBrightCoveEdit, setOrgBrightCoveEdit] = useState([]);
const [orgBrightCoveView, setOrgBrightCoveView] = useState([]);
// author team
const authorteamEditName = ['team:create', 'team:edit', 'team:delete'];
const authorteamViewName = ['team:view'];
const [teamEdit, setTeamEdit] = useState([]);
const [teamView, setTeamView] = useState([]);
// author project
const authorProjectEditName = [
'project:edit',
'project:delete',
'project:create',
'project:request-indexing',
'project:favorite',
'project:publish',
'project:upload-thumb',
'project:recent',
];
const authorProjectViewName = ['project:view', 'project:share', 'project:clone'];
const [AuthorProjectEdit, setAuthorProjectEdit] = useState([]);
const [AuthorProjectView, setAuthorProjectView] = useState([]);
// author playlist
const authorPlaylistEditName = ['playlist:edit', 'playlist:delete', 'playlist:create'];
const authorPlaylistViewName = ['playlist:view', 'playlist:publish', 'playlist:duplicate'];
const [AuthorplayListEdit, setAuthorPlayListEdit] = useState([]);
const [AuthorplayListView, setAuthorplayListView] = useState([]);
// author activity
const authorActivityEditName = ['activity:edit', 'activity:delete', 'activity:create', 'activity:upload'];
const authorActivityViewName = ['activity:view', 'activity:share', 'activity:duplicate'];
const [authorActivityEdit, setAuthorActivityEdit] = useState([]);
const [authorActivityView, setAuthorActivityView] = useState([]);
// author video
const authorVideoEditName = [];
const authorVideoViewName = ['video:view'];
const [authorVideoEdit, setauthorVideoEdit] = useState([]);
const [authorVideoView, setauthorVideoView] = useState([]);
// organization Independent activities
const independentactivitiesEditName = ['independent-activity:create', 'independent-activity:edit', 'independent-activity:delete'];
const independentactivitiesViewName = ['independent-activity:view', 'independent-activity:share', 'independent-activity:duplicate'];
const [independentactivitiesEdit, setIndependentactivitiesEdit] = useState([]);
const [independentactivitiesView, setIndependentactivitiesView] = useState([]);
const [checkRoles, setCheckRoles] = useState('');
useEffect(() => {
const extractPermission = [];
if (activePermission) {
activePermission?.[0]?.permissions?.map((data) => {
extractPermission.push(String(data.id));
});
}
console.log('extractPermission:', extractPermission);
setCheckRoles(extractPermission);
}, [activePermission]);
useEffect(() => {
dispatch(getAllPermissionId(activeOrganization?.id));
dispatch(roleDetail(activeOrganization.id, roles[0]?.id));
}, [activeOrganization]);
useEffect(() => {
var permissionIdArray = [];
console.log('permissionsId?.Organization:', permissionsId?.Organization);
permissionsId?.Organization.filter((data) => projectEditName.includes(data.name) && permissionIdArray.push(data.id));
setProjectEdit(permissionIdArray);
permissionIdArray = [];
permissionsId?.Organization.filter((data) => projectViewName.includes(data.name) && permissionIdArray.push(data.id));
setProjectView(permissionIdArray);
permissionIdArray = [];
permissionsId?.Organization.filter((data) => projectexportEditName.includes(data.name) && permissionIdArray.push(data.id));
setProjectExportEdit(permissionIdArray);
permissionIdArray = [];
permissionsId?.Organization.filter((data) => projectexportViewName.includes(data.name) && permissionIdArray.push(data.id));
setProjectExportView(permissionIdArray);
permissionIdArray = [];
// organization user project
permissionsId?.Organization.filter((data) => userEditName.includes(data.name) && permissionIdArray.push(data.id));
setUserEdit(permissionIdArray);
permissionIdArray = [];
permissionsId?.Organization.filter((data) => userViewName.includes(data.name) && permissionIdArray.push(data.id));
setUserView(permissionIdArray);
permissionIdArray = [];
permissionsId?.Organization.filter((data) => userRoleEditName.includes(data.name) && permissionIdArray.push(data.id));
setUserRolesEdit(permissionIdArray);
permissionIdArray = [];
permissionsId?.Organization.filter((data) => userRoleViewName.includes(data.name) && permissionIdArray.push(data.id));
setUserRoleView(permissionIdArray);
permissionIdArray = [];
// org org
permissionsId?.Organization.filter((data) => orgEditName.includes(data.name) && permissionIdArray.push(data.id));
setOrgEdit(permissionIdArray);
permissionIdArray = [];
permissionsId?.Organization.filter((data) => orgViewName.includes(data.name) && permissionIdArray.push(data.id));
setOrgView(permissionIdArray);
permissionIdArray = [];
// organization activity
permissionsId?.Organization.filter((data) => orgActivityTypeEditName.includes(data.name) && permissionIdArray.push(data.id));
setActivityTypeEdit(permissionIdArray);
permissionIdArray = [];
permissionsId?.Organization.filter((data) => orgActivityTypeViewName.includes(data.name) && permissionIdArray.push(data.id));
setActivityTypeView(permissionIdArray);
permissionIdArray = [];
permissionsId?.Organization.filter((data) => orgActivityItemEditName.includes(data.name) && permissionIdArray.push(data.id));
setActivityItemEdit(permissionIdArray);
permissionIdArray = [];
permissionsId?.Organization.filter((data) => orgActivityItemViewName.includes(data.name) && permissionIdArray.push(data.id));
setActivityItemView(permissionIdArray);
permissionIdArray = [];
// org lms
permissionsId?.Organization.filter((data) => orglmsEditName.includes(data.name) && permissionIdArray.push(data.id));
setlmsSettingEdit(permissionIdArray);
permissionIdArray = [];
permissionsId?.Organization.filter((data) => orglmsViewName.includes(data.name) && permissionIdArray.push(data.id));
setLmsSettingView(permissionIdArray);
permissionIdArray = [];
permissionsId?.Organization.filter((data) => orgltiEditName.includes(data.name) && permissionIdArray.push(data.id));
setltiSettingEdit(permissionIdArray);
permissionIdArray = [];
permissionsId?.Organization.filter((data) => orgltiViewName.includes(data.name) && permissionIdArray.push(data.id));
setLtiSettingView(permissionIdArray);
permissionIdArray = [];
permissionsId?.Organization.filter((data) => orgBrightCoveEditName.includes(data.name) && permissionIdArray.push(data.id));
setOrgBrightCoveEdit(permissionIdArray);
permissionIdArray = [];
permissionsId?.Organization.filter((data) => orgBrightCoveViewName.includes(data.name) && permissionIdArray.push(data.id));
setOrgBrightCoveView(permissionIdArray);
permissionIdArray = [];
// author project
permissionsId?.Project.filter((data) => authorProjectEditName.includes(data.name) && permissionIdArray.push(data.id));
setAuthorProjectEdit(permissionIdArray);
permissionIdArray = [];
permissionsId?.Project.filter((data) => authorProjectViewName.includes(data.name) && permissionIdArray.push(data.id));
setAuthorProjectView(permissionIdArray);
permissionIdArray = [];
// author Playlist
permissionsId?.Playlist.filter((data) => authorPlaylistEditName.includes(data.name) && permissionIdArray.push(data.id));
setAuthorPlayListEdit(permissionIdArray);
permissionIdArray = [];
permissionsId?.Playlist.filter((data) => authorPlaylistViewName.includes(data.name) && permissionIdArray.push(data.id));
setAuthorplayListView(permissionIdArray);
permissionIdArray = [];
// author activity
permissionsId?.Activity.filter((data) => authorActivityEditName.includes(data.name) && permissionIdArray.push(data.id));
setAuthorActivityEdit(permissionIdArray);
permissionIdArray = [];
permissionsId?.Activity.filter((data) => authorActivityViewName.includes(data.name) && permissionIdArray.push(data.id));
setAuthorActivityView(permissionIdArray);
permissionIdArray = [];
// author team
permissionsId?.Team.filter((data) => authorteamEditName.includes(data.name) && permissionIdArray.push(data.id));
setTeamEdit(permissionIdArray);
permissionIdArray = [];
permissionsId?.Team.filter((data) => authorteamViewName.includes(data.name) && permissionIdArray.push(data.id));
setTeamView(permissionIdArray);
permissionIdArray = [];
// video team
permissionsId?.Video.filter((data) => authorVideoViewName.includes(data.name) && permissionIdArray.push(data.id));
setauthorVideoView(permissionIdArray);
permissionIdArray = [];
}, [permissionsId]);
return (
<div className="user-roles">
{/* <h2>Roles Permissions</h2> */}
{true ? (
<div className="box-group">
<Formik
initialValues={{
role_id: activePermission?.[0]?.id,
permissions: checkRoles,
}}
enableReinitialize
onSubmit={async (values) => {
dispatch(updateRole(activeOrganization.id, values, currentOrganization.id));
}}
>
{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
setFieldValue,
/* and other goodies */
}) => (
<form onSubmit={handleSubmit}>
<div className="form-group-create dynamic-roles">
{true && (
<div className="dynamic-roles-title-btn">
<div>
<h2>Edit “{activePermission && activePermission[0]?.display_name}” permissions</h2>
</div>
<div
className="button-group"
// style={{ marginTop: '17px' }}
// style={{ display: "flex", justifyContent: "flex-end" }}
>
<button type="submit" className="update-permission">
<img src={updateImg} alt="update" />
<h5> Update permissions</h5>
</button>
</div>
</div>
)}
<Tab.Container id="left-tabs-example" defaultActiveKey="manual-3">
<Row className="roles-permission-tab-row">
<Col className="roles-permission-tab" sm={2}>
<Nav variant="pills" className="flex-column">
<div className="role-permission-tab-name" id="role-permission-tab-id">
{!!permissionsId && (
<Nav.Item>
<Nav.Link eventKey="manual-3">
All Permissions
<img className="image-tag" />
</Nav.Link>
</Nav.Item>
)}
</div>
{!!permissionsId &&
AdminList.map((data, counter) => {
return (
<div className="role-permission-tab-name" id="role-permission-tab-id">
<Nav.Item>
<Nav.Link eventKey={String(counter)}>
{data}
<img className="image-tag" />
</Nav.Link>
</Nav.Item>
</div>
);
})}
<div className="role-permission-tab-name" id="role-permission-tab-id">
{!!permissionsId && (
<Nav.Item>
<Nav.Link eventKey="manual-2">
Authoring
<img className="image-tag" />
</Nav.Link>
</Nav.Item>
)}
</div>
</Nav>
</Col>
<Col className="detail-permission-tab" sm={10}>
<Tab.Content>
<Tab.Pane eventKey="manual-3">
<div className="all-permission-heading">
<h6>All permissions</h6>
</div>
<Card.Body
className="flex-column"
style={{
// background: '#f7faff',
margin: '8px 32px 32px 10px',
}}
>
<div className="permission">
<NewEdit
setFieldValue={setFieldValue}
type={'Organization'}
permissions={values.permissions}
currentFeatureView={orgView}
currentFeatureEdit={orgEdit}
bold
/>
</div>
{/* Independent activities Start */}
{/* <div className="permission">
<div className="selection-tab-custom">
<div className="form-group custom-select-style-for-sub">
<NewEdit
setFieldValue={setFieldValue}
type={'Independent activities'}
permissions={values.permissions}
currentFeatureView={[independentactivitiesView]}
currentFeatureEdit={[independentactivitiesEdit]}
bold
/>
</div>
</div>
<div className="permission-about">
<NewEdit
setFieldValue={setFieldValue}
type={'All independent activities'}
permissions={values.permissions}
currentFeatureView={independentactivitiesView}
currentFeatureEdit={independentactivitiesEdit}
/>
<NewEdit
setFieldValue={setFieldValue}
type={'Exported activities'}
permissions={values.permissions}
currentFeatureView={independentactivitiesView}
currentFeatureEdit={independentactivitiesEdit}
/>
</div>
</div> */}
{/* Independent activities End */}
<div className="permission">
<div className="selection-tab-custom">
<div className="form-group custom-select-style-for-sub">
<NewEdit
setFieldValue={setFieldValue}
type={'Projects'}
permissions={values.permissions}
currentFeatureView={[...projectView, ...projectExportView]}
currentFeatureEdit={[...projectEdit, ...projectExportEdit]}
bold
/>
</div>
</div>
{/* <h6>Project</h6> */}
<div className="permission-about">
<NewEdit
setFieldValue={setFieldValue}
type={'All Project'}
permissions={values.permissions}
currentFeatureView={projectView}
currentFeatureEdit={projectEdit}
/>
<NewEdit
setFieldValue={setFieldValue}
type={'import/export Projects'}
permissions={values.permissions}
currentFeatureView={projectExportView}
currentFeatureEdit={projectExportEdit}
/>
</div>
</div>
<div className="permission">
<div className="selection-tab-custom">
<div className="form-group custom-select-style-for-sub">
<NewEdit
setFieldValue={setFieldValue}
type={'Activities'}
permissions={values.permissions}
currentFeatureView={[...activityTypeView, ...activityItemView]}
currentFeatureEdit={[...activityTypeEdit, ...activityItemEdit]}
bold
/>
</div>
</div>
<div className="permission-about">
<NewEdit
setFieldValue={setFieldValue}
type={'Activity types'}
permissions={values.permissions}
currentFeatureView={activityTypeView}
currentFeatureEdit={activityTypeEdit}
/>
<NewEdit
setFieldValue={setFieldValue}
type={'Activity Items'}
permissions={values.permissions}
currentFeatureView={activityItemView}
currentFeatureEdit={activityItemEdit}
/>
</div>
</div>
<div className="permission">
<div className="selection-tab-custom">
<div className="form-group custom-select-style-for-sub">
<NewEdit
setFieldValue={setFieldValue}
type={'Users'}
permissions={values.permissions}
currentFeatureView={[...userView, ...userRoleView]}
currentFeatureEdit={[...userEdit, ...userRolesEdit]}
bold
/>
</div>
</div>
{/* <h6>User</h6> */}
<div className="permission-about">
<NewEdit
setFieldValue={setFieldValue}
type={'Users'}
permissions={values.permissions}
currentFeatureView={userView}
currentFeatureEdit={userEdit}
/>
<NewEdit
setFieldValue={setFieldValue}
type={'Manage Roles'}
permissions={values.permissions}
currentFeatureView={userRoleView}
currentFeatureEdit={userRolesEdit}
/>
</div>
</div>
<div className="permission">
<div className="selection-tab-custom">
<div className="form-group custom-select-style-for-sub">
<NewEdit
setFieldValue={setFieldValue}
type={'Integrations'}
permissions={values.permissions}
currentFeatureView={[...lmsSettingView, ...ltiSettingView, ...orgBrightCoveView]}
currentFeatureEdit={[...lmsSettingEdit, ...ltiSettingEdit, ...orgBrightCoveEdit]}
bold
/>
</div>
</div>
<div className="permission-about">
<NewEdit
setFieldValue={setFieldValue}
type={'LMS Settings'}
permissions={values.permissions}
currentFeatureView={lmsSettingView}
currentFeatureEdit={lmsSettingEdit}
/>
<NewEdit
setFieldValue={setFieldValue}
type={'LTI Tools'}
permissions={values.permissions}
currentFeatureView={ltiSettingView}
currentFeatureEdit={ltiSettingEdit}
/>
<NewEdit
setFieldValue={setFieldValue}
type={'BrightCove'}
permissions={values.permissions}
currentFeatureView={orgBrightCoveView}
currentFeatureEdit={orgBrightCoveEdit}
/>
</div>
</div>
<div className="permission">
<div className="selection-tab-custom">
<div className="form-group custom-select-style-for-sub">
<NewEdit
setFieldValue={setFieldValue}
type={'Authoring'}
bold
permissions={values.permissions}
currentFeatureView={[...AuthorProjectView, ...AuthorplayListView, ...authorActivityView, ...teamView]}
currentFeatureEdit={[...AuthorProjectEdit, ...AuthorplayListEdit, ...authorActivityEdit, ...teamEdit]}
/>
</div>
</div>
<div className="for-authoring">
<NewEdit
setFieldValue={setFieldValue}
type={'Project'}
permissions={values.permissions}
currentFeatureView={AuthorProjectView}
currentFeatureEdit={AuthorProjectEdit}
/>
<br />
<NewEdit
setFieldValue={setFieldValue}
type={'Playlist'}
permissions={values.permissions}
currentFeatureView={AuthorplayListView}
currentFeatureEdit={AuthorplayListEdit}
/>
<br />
<NewEdit
setFieldValue={setFieldValue}
type={'Activities'}
permissions={values.permissions}
currentFeatureView={authorActivityView}
currentFeatureEdit={authorActivityEdit}
/>
<br />
<NewEdit
setFieldValue={setFieldValue}
type={'Teams'}
permissions={values.permissions}
currentFeatureView={teamView}
currentFeatureEdit={teamEdit}
/>
<br />
<NewEdit
setFieldValue={setFieldValue}
type={'My interactive video'}
permissions={values.permissions}
currentFeatureView={authorVideoView}
currentFeatureEdit={authorVideoEdit}
hideEdit
/>
</div>
</div>
</Card.Body>
</Tab.Pane>
<Tab.Pane eventKey="manual-2">
<Card.Body
className="flex-column"
style={{
background: '#f7faff',
margin: '32px',
}}
>
<div className="selection-tab-custom">
<div className="form-group custom-select-style-for-sub">
<NewEdit
setFieldValue={setFieldValue}
type={'Authoring'}
bold
permissions={values.permissions}
currentFeatureView={[...AuthorProjectView, ...AuthorplayListView, ...authorActivityView, ...teamView]}
currentFeatureEdit={[...AuthorProjectEdit, ...AuthorplayListEdit, ...authorActivityEdit, ...teamEdit]}
/>
</div>
</div>
<div className="for-authoring">
<NewEdit
setFieldValue={setFieldValue}
type={'Project'}
permissions={values.permissions}
currentFeatureView={AuthorProjectView}
currentFeatureEdit={AuthorProjectEdit}
/>
<br />
<NewEdit
setFieldValue={setFieldValue}
type={'Playlist'}
permissions={values.permissions}
currentFeatureView={AuthorplayListView}
currentFeatureEdit={AuthorplayListEdit}
/>
<br />
<NewEdit
setFieldValue={setFieldValue}
type={'Activities'}
permissions={values.permissions}
currentFeatureView={authorActivityView}
currentFeatureEdit={authorActivityEdit}
/>
<br />
<NewEdit
setFieldValue={setFieldValue}
type={'Teams'}
permissions={values.permissions}
currentFeatureView={teamView}
currentFeatureEdit={teamEdit}
/>
<br />
<NewEdit
setFieldValue={setFieldValue}
type={'My interactive video'}
permissions={values.permissions}
currentFeatureView={authorVideoView}
currentFeatureEdit={authorVideoEdit}
hideEdit
/>
</div>
</Card.Body>
</Tab.Pane>
<Tab.Pane eventKey="0">
<Card.Body
className="flex-column"
style={{
background: '#f7faff',
margin: '32px',
}}
>
<NewEdit
setFieldValue={setFieldValue}
type={'Organization'}
permissions={values.permissions}
currentFeatureView={orgView}
currentFeatureEdit={orgEdit}
bold
/>
</Card.Body>
</Tab.Pane>
<Tab.Pane eventKey="1">
<Card.Body
className="flex-column"
style={{
background: '#f7faff',
margin: '32px',
}}
>
<div className="selection-tab-custom">
<div className="form-group custom-select-style-for-sub">
<NewEdit
setFieldValue={setFieldValue}
type={'Projects'}
permissions={values.permissions}
currentFeatureView={[...projectView, ...projectExportView]}
currentFeatureEdit={[...projectEdit, ...projectExportEdit]}
bold
/>
</div>
</div>
<div className="permission-about d-flex">
<NewEdit
setFieldValue={setFieldValue}
type={'All Project'}
permissions={values.permissions}
currentFeatureView={projectView}
currentFeatureEdit={projectEdit}
/>
<NewEdit
setFieldValue={setFieldValue}
type={'import/export Projects'}
permissions={values.permissions}
currentFeatureView={projectExportView}
currentFeatureEdit={projectExportEdit}
/>
</div>
</Card.Body>
</Tab.Pane>
<Tab.Pane eventKey="2">
<Card.Body
className="flex-column"
style={{
background: '#f7faff',
margin: '32px',
}}
>
<div className="selection-tab-custom">
<div className="form-group custom-select-style-for-sub">
<NewEdit
setFieldValue={setFieldValue}
type={'Activities'}
permissions={values.permissions}
currentFeatureView={[...activityTypeView, ...activityItemView]}
currentFeatureEdit={[...activityTypeEdit, ...activityItemEdit]}
bold
/>
</div>
</div>
<div className="permission-about d-flex">
<NewEdit
setFieldValue={setFieldValue}
type={'Activity types'}
permissions={values.permissions}
currentFeatureView={activityTypeView}
currentFeatureEdit={activityTypeEdit}
/>
<NewEdit
setFieldValue={setFieldValue}
type={'Activity Items'}
permissions={values.permissions}
currentFeatureView={activityItemView}
currentFeatureEdit={activityItemEdit}
/>
</div>
</Card.Body>
</Tab.Pane>
<Tab.Pane eventKey="3">
<Card.Body
className="flex-column"
style={{
background: '#f7faff',
margin: '32px',
}}
>
<div className="selection-tab-custom">
<div className="form-group custom-select-style-for-sub">
<NewEdit
setFieldValue={setFieldValue}
type={'Integrations'}
permissions={values.permissions}
currentFeatureView={[...lmsSettingView, ...ltiSettingView, ...orgBrightCoveView]}
currentFeatureEdit={[...lmsSettingEdit, ...ltiSettingEdit, ...orgBrightCoveEdit]}
bold
/>
</div>
</div>
<div className="permission-about d-flex">
<NewEdit
setFieldValue={setFieldValue}
type={'LMS Settings'}
permissions={values.permissions}
currentFeatureView={lmsSettingView}
currentFeatureEdit={lmsSettingEdit}
/>
<NewEdit
setFieldValue={setFieldValue}
type={'LTI Tools'}
permissions={values.permissions}
currentFeatureView={ltiSettingView}
currentFeatureEdit={ltiSettingEdit}
/>
<NewEdit
setFieldValue={setFieldValue}
type={'BrightCove'}
permissions={values.permissions}
currentFeatureView={orgBrightCoveView}
currentFeatureEdit={orgBrightCoveEdit}
/>
</div>
</Card.Body>
</Tab.Pane>
<Tab.Pane eventKey="4">
<Card.Body
className="flex-column"
style={{
background: '#f7faff',
margin: '32px',
}}
>
<div className="selection-tab-custom">
<div className="form-group custom-select-style-for-sub">
<NewEdit
setFieldValue={setFieldValue}
type={'Users'}
permissions={values.permissions}
currentFeatureView={[...userView, ...userRoleView]}
currentFeatureEdit={[...userEdit, ...userRolesEdit]}
bold
/>
</div>
</div>
{/* <h6>User</h6> */}
<div className="permission-about d-flex">
<NewEdit
setFieldValue={setFieldValue}
type={'Users'}
permissions={values.permissions}
currentFeatureView={userView}
currentFeatureEdit={userEdit}
/>
<NewEdit
setFieldValue={setFieldValue}
type={'Manage Roles'}
permissions={values.permissions}
currentFeatureView={userRoleView}
currentFeatureEdit={userRolesEdit}
/>
</div>
</Card.Body>
</Tab.Pane>
{/* Independent activities start */}
<Tab.Pane eventKey="5">
<Card.Body
className="flex-column"
style={{
background: '#f7faff',
margin: '32px',
}}
>
<div className="selection-tab-custom">
<div className="form-group custom-select-style-for-sub">
<NewEdit
setFieldValue={setFieldValue}
type={'Independent activities'}
permissions={values.permissions}
currentFeatureView={[independentactivitiesView]}
currentFeatureEdit={[independentactivitiesEdit]}
bold
/>
</div>
</div>
{/* <h6>User</h6> */}
<div className="permission-about d-flex">
{/* <NewEdit
setFieldValue={setFieldValue}
type={"Users"}
permissions={values.permissions}
currentFeatureView={userView}
currentFeatureEdit={userEdit}
/>
<NewEdit
setFieldValue={setFieldValue}
type={"Manage Roles"}
permissions={values.permissions}
currentFeatureView={userRoleView}
currentFeatureEdit={userRolesEdit}
/> */}
</div>
</Card.Body>
</Tab.Pane>
{/* Independent activities end */}
</Tab.Content>
</Col>
</Row>
</Tab.Container>
{/* */}
<div className="error">{errors.title && touched.title && errors.title}</div>
</div>
</form>
)}
</Formik>
</div>
) : (
<>
<br />
<Alert variant="danger">Not authorized to access this.</Alert>
</>
)}
</div>
);
}
Example #21
| Source File: adminPage.js From community-forum-frontend with GNU General Public License v3.0 | 4 votes |
|
render() {
return (
<Container fluid>
<NavBar
history={this.props.history}
toggleSidebar={this.toggleSidebar}
/>
<Container className="container-mid admin-page-container">
<Tab.Container defaultActiveKey="members">
<Row>
<Col sm={3} className={this.state.dashboardSidebarClass}>
<Nav variant="pills">
<Nav.Item>
<Nav.Link eventKey="members">
<GroupIcon />
Members
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="insights">
<EqualizerIcon />
Insights
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="maintenance">
<PowerIcon />
Maintenance Mode
</Nav.Link>
</Nav.Item>
</Nav>
</Col>
<Col sm={3} className="admin-page-tab-selector-base"></Col>
<Col sm={12} md={9}>
<Tab.Content>
<Tab.Pane eventKey="members">
<MembersSection />
</Tab.Pane>
<Tab.Pane eventKey="insights">
<InsightsSection />
</Tab.Pane>
<Tab.Pane eventKey="maintenance">
<h2 className="main-heading">Maintenance Mode</h2>
<Row className="center-row">
<Col>
<label className="primary-checkpoint-container admin-page-checkpoint-container">
<h6>Toggle Maintenance Mode :</h6>
<input
type="checkbox"
checked={
this.props.organization.isUnderMaintenance
}
onClick={() => {
this.props.toggleMaintenanceMode();
}}
></input>
<div class="primary-checkpoint"></div>
</label>
</Col>
</Row>
<Row className="center-row">
<Col>
<p className="admin-page-maintenance-text">
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur.
</p>
</Col>
</Row>
</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
</Container>
</Container>
);
}
Example #22
| Source File: pills.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
export default function Pills(props) {
const { modules, type, subType, allProjectTab, setAllProjectTab, setModalShow, setModalShowTeam, setrowData, setActivePageNumber, users, setUsers } = props;
const [key, setKey] = useState(modules?.filter((data) => !!data)[0]);
const [subTypeState, setSubTypeState] = useState(subType);
// All User Business Logic Start
const dispatch = useDispatch();
const organization = useSelector((state) => state.organization);
const { activityTypes, activityItems, usersReport, allbrightCove, teams } = useSelector((state) => state.admin);
const [userReportsStats, setUserReportStats] = useState(null);
const admin = useSelector((state) => state.admin);
const [activePage, setActivePage] = useState(1);
const [size, setSize] = useState(10);
const [projectFilterObj, setProjectFilterObj] = useState({
author_id: null,
created_from: null,
created_to: null,
updated_from: null,
updated_to: null,
indexing: null,
shared: null,
});
const { activeOrganization, roles, permission, searchUsers, allSuborgList } = organization;
const [activeRole, setActiveRole] = useState('');
const { activeTab, activityType } = admin;
const [currentTab, setCurrentTab] = useState('All Projects');
const [searchAlertToggler, setSearchAlertToggler] = useState(1);
const [searchAlertTogglerStats, setSearchAlertTogglerStats] = useState(1);
const [searchQuery, setSearchQuery] = useState('');
const [searchQueryProject, setSearchQueryProject] = useState('');
const [searchQueryStats, setSearchQueryStats] = useState('');
const [searchQueryActivities, setSearchQueryActivities] = useState('');
const [searchQueryTeam, setSearchQueryTeam] = useState('');
const [allProjectUserTab, setAllProjectUserTab] = useState(null);
const [allProjectIndexTab, setAllProjectIndexTab] = useState(null);
const [libraryReqSelected, setLibraryReqSelected] = useState(false);
const [lmsProject, setLmsProject] = useState(null);
const [lmsBrightCove, setlmsBrightCove] = useState(null);
const [defaultSso, setDefaultSso] = useState(null);
const [defaultSsoFilterBy, setDefaultSsoFilterBy] = useState('');
const [ltiTool, setLtiTool] = useState(null);
const [ltiToolFilterBy, setLtiToolFilterBy] = useState('');
const [jobs, setJobs] = useState(null);
const [jobType, SetJobType] = useState({ value: 1, display_name: 'Pending' });
const [logs, setLogs] = useState(null);
const [logType, SetLogType] = useState({ value: 'all', display_name: 'All' });
const [changeIndexValue, setChangeIndexValue] = useState('0');
const [orderBy, setOrderBy] = useState('desc');
const [currentOrderBy, setCurrentOrderBy] = useState('');
const [orderByColumn, setOrderByColumn] = useState('');
const dataRedux = useSelector((state) => state);
const [subjects, setSubjects] = useState(null);
const [educationLevel, setEducationLevel] = useState(null);
const [authorTag, setAuthorTag] = useState(null);
const [activityLayout, setActivityLayout] = useState(null);
const [lmsProjectFilterBy, setLmsProjectFilterBy] = useState('');
const [searchLayoutQuery, setSearchLayoutQuery] = useState('');
const [searchSubjectsQuery, setSearchSubjectsQuery] = useState('');
const [searchAuthorTagQuery, setSearchAuthorTagQuery] = useState('');
const [searchEducationLevelQuery, setSearchEducationLevelQuery] = useState('');
const [searchActivityTypesQuery, setSearchActivityTypesQuery] = useState('');
const [searchActivityItemsQuery, setSearchActivityItemsQuery] = useState('');
useEffect(() => {
setKey(modules?.filter((data) => !!data)[0]);
}, [activeTab]);
useEffect(() => {
setlmsBrightCove(allbrightCove);
}, [allbrightCove]);
const searchUsersFromOrganization = async (query, page) => {
if (query.length > 1) {
const result = await dispatch(searchUserInOrganization(activeOrganization?.id, query, searchUsers ? activePage : 1, activeRole, size, orderByColumn, currentOrderBy));
if (result?.data?.length > 0) {
setUsers(result);
setSearchAlertToggler(1);
} else {
setSearchAlertToggler(0);
}
}
};
const searchQueryChangeHandler = async ({ target }) => {
if (target.value.trim().length) {
if (!!alphaNumeric(target.value)) {
setSearchQuery(target.value);
}
searchUsersFromOrganization(target.value, activePage);
setActivePage(searchUsers ? activePage : 1);
if (target.value.trim().length > 1) setUsers(null);
} else {
dispatch(clearSearchUserInOrganization());
setActivePage(1);
setSearchQuery('');
const result = await dispatch(getOrgUsers(activeOrganization?.id, 1, activeRole, size, searchQuery, orderByColumn, currentOrderBy));
setUsers(result);
}
};
const searchProjectQueryChangeHandler = async (query, index, type) => {
// if (type === 'Library requests') {
// if (!!query) {
// setAllProjectIndexTab(null);
// const searchapi = adminService.userSerchIndexs(activeOrganization?.id, activePage, index, query);
// searchapi
// .then((data) => {
// setAllProjectIndexTab(data);
// })
// .catch((e) => setAllProjectIndexTab([]));
// } else {
// setActivePage(1);
// const searchapi = adminService.getAllProjectIndex(activeOrganization?.id, 1, index);
// searchapi.then((data) => {
// setAllProjectIndexTab(data);
// });
// }
// } else
if (type === 'All Projects') {
if (!!query) {
setAllProjectTab(null);
const allproject = adminService.getAllProjectSearch(activeOrganization?.id, 1, query, size, orderByColumn, currentOrderBy);
allproject
.then((data) => {
setAllProjectTab(data);
})
.catch((e) => setAllProjectTab([]));
} else {
setActivePage(1);
const allproject = adminService.getAllProject(activeOrganization?.id, 1, size);
allproject.then((data) => {
setAllProjectTab(data);
});
}
} else if (type === 'user') {
if (!!query) {
setAllProjectUserTab(null);
const userproject = adminService.getUserProjectSearch(activeOrganization?.id, activePage, query);
userproject
.then((data) => {
setAllProjectUserTab(data);
})
.catch((e) => setAllProjectUserTab([]));
} else {
setActivePage(1);
const userproject = adminService.getUserProject(activeOrganization?.id, 1);
userproject.then((data) => {
setAllProjectUserTab(data);
});
}
}
};
useMemo(() => {
if (activeTab !== 'Users') setActiveRole(null);
}, [activeTab]);
useMemo(async () => {
if (activeOrganization && type === 'Users' && subTypeState === 'All Users') {
if (searchQuery.length > 1) {
const result = await dispatch(getOrgUsers(activeOrganization?.id, activePage, activeRole, size, searchQuery, orderByColumn, currentOrderBy));
setSearchQuery(searchQuery);
setUsers(result);
} else if (organization?.users?.data?.length > 0 && activePage === organization?.activePage && !activeRole) {
setUsers(organization?.users);
} else if (activeRole) {
const result = await dispatch(getOrgUsers(activeOrganization?.id, activePage, activeRole, size, searchQuery, orderByColumn, currentOrderBy));
setUsers(result);
}
}
if (type === 'Organization') {
dispatch(getsubOrgList(activeOrganization?.id, size, activePage, searchQuery, orderByColumn, currentOrderBy));
}
}, [activeOrganization, activePage, type, subTypeState, activeTab, activeRole, organization?.users?.length, size]);
// All Users Business Logic End
useMemo(async () => {
setAllProjectTab && setAllProjectTab(null);
setAllProjectUserTab(null);
setAllProjectIndexTab(null);
if (activeOrganization && type === 'Projects' && currentTab == 'All Projects') {
if (libraryReqSelected) {
if (searchQueryProject) {
const allproject = adminService.userSerchIndexs(activeOrganization?.id, activePage, 1, searchQueryProject, size);
allproject
.then((data) => {
setAllProjectTab(data);
})
.catch((e) => setAllProjectTab([]));
} else {
const result = await adminService.getAllProjectIndex(
activeOrganization?.id,
activePage || 1,
1,
size,
projectFilterObj.author_id || undefined,
projectFilterObj.created_from || undefined,
projectFilterObj.created_to || undefined,
projectFilterObj.updated_from || undefined,
projectFilterObj.updated_to || undefined,
projectFilterObj.shared
);
setAllProjectTab(result);
}
} else {
if (searchQueryProject) {
const allproject = adminService.getAllProjectSearch(activeOrganization?.id, activePage, searchQueryProject, size, orderByColumn, currentOrderBy);
allproject
.then((data) => {
setAllProjectTab(data);
})
.catch((e) => setAllProjectTab([]));
} else {
const result = await adminService.getAllProject(
activeOrganization?.id,
activePage || 1,
size,
projectFilterObj.author_id || null,
projectFilterObj.created_from || null,
projectFilterObj.created_to || null,
projectFilterObj.updated_from || null,
projectFilterObj.updated_to || null,
projectFilterObj.shared,
projectFilterObj.indexing,
searchQuery,
orderByColumn,
currentOrderBy
);
setAllProjectTab(result);
}
}
} else if (activeOrganization && type === 'Projects' && currentTab === 'Exported Projects') {
if (searchQueryProject) {
const userproject = adminService.getAllExportedProject(activePage, size, searchQueryProject);
userproject
.then((data) => {
setAllProjectUserTab(data);
})
.catch((e) => setAllProjectUserTab([]));
} else {
const result = await adminService.getAllExportedProject(activePage || 1, size);
setAllProjectUserTab(result);
}
}
// if (activeOrganization && type === 'Projects' && currentTab === 'Library requests') {
// if (searchQueryProject) {
// const searchapi = adminService.userSerchIndexs(activeOrganization?.id, activePage, changeIndexValue, searchQueryProject, size);
// searchapi
// .then((data) => {
// setAllProjectIndexTab(data);
// })
// .catch((e) => setAllProjectIndexTab([]));
// } else {
// const result = await adminService.getAllProjectIndex(
// activeOrganization?.id,
// activePage || 1,
// changeIndexValue,
// size,
// projectFilterObj.author_id || undefined,
// projectFilterObj.created_from || undefined,
// projectFilterObj.created_to || undefined,
// projectFilterObj.updated_from || undefined,
// projectFilterObj.updated_to || undefined,
// projectFilterObj.shared
// );
// setAllProjectIndexTab(result);
// }
// }
}, [activeOrganization?.id, type, activePage, changeIndexValue, currentTab, size, searchQueryProject, libraryReqSelected]);
// Activity Tab Business Logic
useEffect(() => {
if (type === 'Activities' && subTypeState === 'Activity Items') {
//pagination
dispatch(getActivityItems(activeOrganization?.id, searchActivityItemsQuery, activePage, size, orderByColumn, currentOrderBy));
dispatch(updatePageNumber(activePage));
} else if (type === 'Activities' && subTypeState === 'Activity Items' && activePage === 1) {
//on page 1
dispatch(getActivityItems(activeOrganization?.id, searchActivityItemsQuery, activePage, size, orderByColumn, currentOrderBy));
dispatch(updatePageNumber(activePage));
}
}, [type, subTypeState, activePage, size, activeOrganization]);
useEffect(() => {
if (type === 'Activities' && subTypeState === 'Activity Layouts' && activePage) {
//pagination
dispatch(getActivityTypes(activeOrganization?.id, activePage, size, orderByColumn, currentOrderBy, searchActivityTypesQuery));
dispatch(updatePageNumber(activePage));
} else if (type === 'Activities' && subTypeState === 'Activity Types') {
//on page 1
// dispatch(loadResourceTypesAction());
dispatch(getActivityTypes(activeOrganization?.id, activePage, size, orderByColumn, currentOrderBy, searchActivityTypesQuery))
dispatch(updatePageNumber(activePage));
}
}, [activePage, subTypeState, type, size, activeOrganization]);
const searchActivitiesQueryHandler = async (query, subTypeRecieved) => {
if (subTypeRecieved === 'Activity Types') {
if (query) {
await dispatch(loadResourceTypesAction(query, ''));
} else {
await dispatch(loadResourceTypesAction());
}
} else if (subTypeRecieved === 'Activity Items') {
if (query) {
const encodeQuery = encodeURI(searchQueryActivities);
await dispatch(getActivityItems(activeOrganization?.id, encodeQuery, activePage, size));
} else if (query === '') {
await dispatch(getActivityItems(activeOrganization?.id, searchActivityItemsQuery, activePage, size));
}
}
};
// Stats User Report
useEffect(() => {
if (type === 'Stats' && subTypeState === 'Report' && searchQueryStats) {
setUserReportStats(null);
let result = dispatch(getUserReport('all', size, activePage, searchQueryStats));
result.then((data) => {
setUserReportStats(data);
});
} else if (type === 'Stats' && subTypeState === 'Report' && (activePage !== organization?.activePage || size !== organization?.size)) {
//pagination
setUserReportStats(null);
let result = dispatch(getUserReport('all', size, activePage, ''));
result.then((data) => {
setUserReportStats(data);
});
} else if (type === 'Stats' && subTypeState === 'Report' && (activePage === 1 || size === 10)) {
//on page 1
setUserReportStats(null);
let result = dispatch(getUserReport('all'));
result.then((data) => {
setUserReportStats(data);
});
}
if (type === 'Stats' && subTypeState === 'Queues: Jobs' && searchQueryStats) {
let result = dispatch(getJobListing(jobType.value, size, activePage, searchQueryStats));
result.then((data) => setJobs(data.data));
} else if (type === 'Stats' && subTypeState === 'Queues: Jobs' && (activePage !== organization?.activePage || size !== organization?.size) && jobType) {
const result = dispatch(getJobListing(jobType.value, size, activePage));
result.then((data) => {
setJobs(data.data);
});
} else if (type === 'Stats' && subTypeState === 'Queues: Jobs' && (activePage === 1 || size === 10)) {
const result = dispatch(getJobListing(jobType.value));
result.then((data) => {
setJobs(data.data);
});
}
if (type === 'Stats' && subTypeState === 'Queues: Logs' && searchQueryStats) {
let result = dispatch(getLogsListing(logType.value, size, activePage, searchQueryStats));
result.then((data) => setLogs(data.data));
} else if (type === 'Stats' && subTypeState === 'Queues: Logs' && (activePage !== organization?.activePage || size !== organization?.size) && logType) {
const result = dispatch(getLogsListing(logType.value, size, activePage));
result.then((data) => {
setLogs(data.data);
});
} else if (type === 'Stats' && subTypeState === 'Queues: Logs' && (activePage === 1 || size === 10)) {
const result = dispatch(getLogsListing(logType.value));
result.then((data) => {
setLogs(data.data);
});
}
}, [activePage, subTypeState, type, size, jobType, logType]);
const searchUserReportQueryHandler = async (query, subTypeRecieved) => {
if (subTypeRecieved === 'Report') {
if (query) {
setUserReportStats(null);
let result = await dispatch(getUserReport('all', size, undefined, query));
setUserReportStats(result);
if (result?.data?.length > 0) {
setSearchAlertTogglerStats(1);
} else {
setSearchAlertTogglerStats(0);
}
} else {
setUserReportStats(null);
let result = await dispatch(getUserReport('all', size, 1));
setUserReportStats(result);
setActivePage(1);
}
}
if (subTypeRecieved === 'Queues: Jobs') {
if (query) {
let result = dispatch(getJobListing(jobType.value, size, undefined, query));
result.then((data) => {
setJobs(data.data);
if (data?.data?.length > 0) {
setSearchAlertTogglerStats(1);
} else {
setSearchAlertTogglerStats(0);
}
});
} else {
let result = dispatch(getJobListing(jobType.value, size, activePage));
result.then((data) => setJobs(data.data));
}
}
if (subTypeRecieved === 'Queues: Logs') {
if (query) {
let result = dispatch(getLogsListing(logType.value, size, undefined, query));
result.then((data) => {
setLogs(data.data);
if (data?.data?.length > 0) {
setSearchAlertTogglerStats(1);
} else {
setSearchAlertTogglerStats(0);
}
});
} else {
let result = dispatch(getLogsListing(logType.value, size, activePage));
result.then((data) => setLogs(data.data));
}
}
};
//LMS project ***************************************
useMemo(async () => {
if (type === 'LMS') {
dispatch(getLmsProject(activeOrganization?.id, activePage || 1, size, searchQuery, orderByColumn, currentOrderBy, lmsProjectFilterBy));
}
if (type === 'LMS') {
dispatch(getLtiTools(activeOrganization?.id, activePage || 1, size, searchQuery, orderByColumn, currentOrderBy, ltiToolFilterBy));
}
if (type === 'LMS') {
dispatch(allBrightCove(activeOrganization?.id, size, activePage || 1));
}
}, [type, size, activePage, activeOrganization?.id]);
useEffect(() => {
if (dataRedux.admin.ltiTools) {
setLtiTool(dataRedux.admin.ltiTools);
}
}, [dataRedux.admin.ltiTools]);
useEffect(() => {
if (dataRedux.admin.defaultSso) {
setDefaultSso(dataRedux.admin.defaultSso);
}
}, [dataRedux.admin.defaultSso]);
useEffect(() => {
if (dataRedux.admin.lmsIntegration) {
setLmsProject(dataRedux.admin.lmsIntegration);
}
}, [dataRedux.admin.lmsIntegration]);
useMemo(async () => {
if (subTypeState === 'Subjects') {
dispatch(getSubjects(activeOrganization?.id, activePage || 1, size, searchSubjectsQuery, orderByColumn, currentOrderBy));
dispatch(updatePageNumber(activePage));
}
if (subTypeState === 'Education Level') {
dispatch(getEducationLevel(activeOrganization?.id, activePage || 1, size, searchEducationLevelQuery, orderByColumn, currentOrderBy));
dispatch(updatePageNumber(activePage));
}
if (subTypeState === 'Author Tags') {
dispatch(getAuthorTag(activeOrganization?.id, activePage || 1, size, searchAuthorTagQuery, orderByColumn, currentOrderBy));
dispatch(updatePageNumber(activePage));
}
if (type === 'Activities') {
dispatch(getActivityLayout(activeOrganization?.id, activePage || 1, size, searchLayoutQuery, orderByColumn, currentOrderBy));
}
}, [type, subTypeState, activePage, activeOrganization?.id, size, currentOrderBy]);
useEffect(() => {
if (dataRedux.admin.subjects) {
setSubjects(dataRedux.admin.subjects);
}
}, [dataRedux.admin.subjects]);
useEffect(() => {
if (dataRedux.admin.education_level) {
setEducationLevel(dataRedux.admin.education_level);
}
}, [dataRedux.admin.education_level]);
useEffect(() => {
if (dataRedux.admin.author_tags) {
setAuthorTag(dataRedux.admin.author_tags);
}
}, [dataRedux.admin.author_tags]);
useEffect(() => {
if (dataRedux.admin.activity_layouts) {
setActivityLayout(dataRedux.admin.activity_layouts);
}
}, [dataRedux.admin.activity_layouts]);
const searchQueryChangeHandlerLMS = (search) => {
setLmsProject(null);
setActivePage(1);
const encodeQuery = encodeURI(search.target.value);
setSearchQuery(encodeQuery);
const result = adminService.getLmsProject(activeOrganization?.id, 1, size, encodeQuery, orderByColumn, currentOrderBy, lmsProjectFilterBy);
result.then((data) => {
setLmsProject(data);
});
};
const searchQueryChangeHandlerLMSBrightCove = (search) => {
setlmsBrightCove(null);
setActivePage(1);
const encodeQuery = encodeURI(search.target.value);
dispatch(allBrightCoveSearch(activeOrganization?.id, encodeQuery, size, 1));
};
const searchQueryChangeHandlerActivityTypes = (search) => {
// setlmsBrightCove(null);
setActivePage(1);
const encodeQuery = encodeURI(search.target.value);
setSearchActivityTypesQuery(encodeQuery);
dispatch(getActivityTypes(activeOrganization?.id, 1, size, '', '', encodeQuery));
};
const searchQueryChangeHandlerActivityItems = (search) => {
// setlmsBrightCove(null);
setActivePage(1);
const encodeQuery = encodeURI(search.target.value);
setSearchActivityItemsQuery(encodeQuery);
dispatch(getActivityItems(activeOrganization?.id, encodeQuery, activePage, size));
};
const filterActivityItems = (type) => {
setActivePage(1);
dispatch(getActivityItems(activeOrganization?.id, searchActivityItemsQuery, activePage, size, '', '', type));
};
const searchQueryChangeHandlerActivityLayouts = (search) => {
// setlmsBrightCove(null);
setActivePage(1);
const encodeQuery = encodeURI(search.target.value);
setSearchLayoutQuery(encodeQuery);
dispatch(getActivityLayout(activeOrganization?.id, 1, size, encodeQuery, orderByColumn, currentOrderBy));
};
const searchQueryChangeHandlerOrg = (search) => {
setActivePage(1);
const encodeQuery = encodeURI(search.target.value);
setSearchQuery(encodeQuery);
dispatch(getsubOrgList(activeOrganization?.id, size, 1, encodeQuery, orderByColumn, currentOrderBy));
};
//Default SSO ***************************************
useMemo(async () => {
if (type === 'DefaultSso') {
dispatch(getDefaultSso(activeOrganization?.id, activePage, size, searchQuery, orderByColumn, currentOrderBy, defaultSsoFilterBy));
}
}, [type, activePage, activeOrganization?.id, size]);
const searchQueryChangeHandlerDefautSso = (search) => {
setDefaultSso(null);
setActivePage(1);
const encodeQuery = encodeURI(search.target.value);
setSearchQuery(encodeQuery);
const result = adminService.getDefaultSso(activeOrganization?.id, 1, size, encodeQuery, orderByColumn, currentOrderBy, defaultSsoFilterBy);
result.then((data) => {
setDefaultSso(data);
});
};
const searchQueryChangeHandlerLtiTool = (search) => {
setLtiTool(null);
setActivePage(1);
const encodeQuery = encodeURI(search.target.value);
setSearchQuery(encodeQuery);
const result = adminService.getLtiTools(activeOrganization?.id, 1, size, encodeQuery, orderByColumn, currentOrderBy, ltiToolFilterBy);
result.then((data) => {
setLtiTool(data);
});
};
const searchQueryChangeHandlerSubjects = (search) => {
setSubjects(null);
setActivePage(1);
const encodeQuery = encodeURI(search.target.value);
setSearchSubjectsQuery(encodeQuery);
const result = adminService.getSubjects(activeOrganization?.id, 1, size, encodeQuery, orderByColumn, currentOrderBy);
result.then((data) => {
setSubjects(data);
});
};
const searchQueryChangeHandlerEducationLevel = (search) => {
setEducationLevel(null);
setActivePage(1);
const encodeQuery = encodeURI(search.target.value);
setSearchEducationLevelQuery(encodeQuery);
const result = adminService.getEducationLevel(activeOrganization?.id, 1, size, encodeQuery, orderByColumn, currentOrderBy);
result.then((data) => {
setEducationLevel(data);
});
};
const searchQueryChangeHandlerAuthorTag = (search) => {
setAuthorTag(null);
setActivePage(1);
const encodeQuery = encodeURI(search.target.value);
setSearchAuthorTagQuery(encodeQuery);
const result = adminService.getAuthorTag(activeOrganization?.id, 1, size, encodeQuery, orderByColumn, currentOrderBy);
result.then((data) => {
setAuthorTag(data);
});
};
const filterLtiTool = (item) => {
setLtiTool(null);
setActivePage(1);
setLtiToolFilterBy(item);
const result = adminService.getLtiTools(activeOrganization?.id, 1, size, searchQuery, orderByColumn, currentOrderBy, item);
result.then((data) => {
setLtiTool(data);
});
};
const filterDefaultSso = (filterBy) => {
setDefaultSso(null);
setActivePage(1);
setDefaultSsoFilterBy(filterBy);
const result = adminService.getDefaultSso(activeOrganization?.id, 1, size, searchQuery, orderByColumn, currentOrderBy, filterBy);
result.then((data) => {
setDefaultSso(data);
});
};
const filterLmsSetting = (filterBy) => {
setLmsProject(null);
setActivePage(1);
setLmsProjectFilterBy(filterBy);
const result = adminService.getLmsProject(activeOrganization?.id, 1, size, searchQuery, orderByColumn, currentOrderBy, filterBy);
result.then((data) => {
setLmsProject(data);
});
};
useEffect(() => {
// if (subTypeState === 'Library requests') {
// setActivePage(1);
// setCurrentTab('Library requests');
// setChangeIndexValue(0);
// } else
if (subTypeState === 'All Projects') {
setActivePage(1);
setCurrentTab('All Projects');
setKey('All Projects');
}
}, [subTypeState]);
useEffect(() => {
if (activeTab === 'Projects') {
setSubTypeState(key);
setCurrentTab(key);
setLibraryReqSelected(false);
} else {
setSubTypeState(key);
}
}, [activeTab, key]);
useEffect(() => {
if (activeOrganization && type === 'Teams') {
dispatch(teamsActionAdminPanel(activeOrganization?.id, searchQueryTeam, activePage, size, orderByColumn, currentOrderBy))
}
}, [size, activePage, activeOrganization, searchQueryTeam]);
const filterSearch = useCallback(() => {
setAllProjectTab(null);
if (libraryReqSelected) {
const libraryrequest = adminService.getAllProjectIndex(
activeOrganization?.id,
activePage,
1,
size,
projectFilterObj.author_id || undefined,
projectFilterObj.created_from || undefined,
projectFilterObj.created_to || undefined,
projectFilterObj.updated_from || undefined,
projectFilterObj.updated_to || undefined,
projectFilterObj.shared
);
libraryrequest
.then((data) => {
setAllProjectTab(data);
})
.catch((e) => setAllProjectTab([]));
} else {
const allproject = adminService.getAllProject(
activeOrganization?.id,
activePage,
size,
projectFilterObj.author_id || null,
projectFilterObj.created_from || null,
projectFilterObj.created_to || null,
projectFilterObj.updated_from || null,
projectFilterObj.updated_to || null,
projectFilterObj.shared,
projectFilterObj.indexing
);
allproject
.then((data) => {
setAllProjectTab(data);
})
.catch((e) => setAllProjectTab([]));
}
}, [projectFilterObj]);
const handleSort = async (column, subType) => {
if (subType == 'LTI Tools') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Name':
col = 'tool_name';
break;
default:
col = 'tool_name';
}
dispatch(getLtiTools(activeOrganization?.id, activePage || 1, size, searchQuery, col, orderBy, ltiToolFilterBy));
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'Activity Types') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Order':
col = 'order';
break;
default:
col = 'order';
}
dispatch(getActivityTypes(activeOrganization?.id, activePage || 1, size, col, orderBy, searchActivityTypesQuery));
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'Activity Items') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Order':
col = 'order';
break;
default:
col = 'order';
}
dispatch(getActivityItems(activeOrganization?.id, searchActivityItemsQuery, activePage || 1, size, col, orderBy,));
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'Activity Layouts') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Order':
col = 'order';
break;
default:
col = 'order';
}
dispatch(getActivityLayout(activeOrganization?.id, activePage || 1, size, searchLayoutQuery, col, orderBy));
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'Subjects') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Order':
col = 'order';
break;
default:
col = 'order';
}
dispatch(getSubjects(activeOrganization?.id, activePage || 1, size, searchSubjectsQuery, col, orderBy,));
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'Education Level') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Order':
col = 'order';
break;
default:
col = 'order';
}
dispatch(getEducationLevel(activeOrganization?.id, activePage || 1, size, searchEducationLevelQuery, col, orderBy));
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'Author Tags') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Order':
col = 'order';
break;
default:
col = 'order';
}
dispatch(getAuthorTag(activeOrganization?.id, activePage || 1, size, searchAuthorTagQuery, col, orderBy));
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'Organization') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Name':
col = 'name';
break;
default:
col = 'name';
}
dispatch(getsubOrgList(activeOrganization?.id, size, activePage || 1, searchQuery, col, orderBy));
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'DefaultSso') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Site Name':
col = 'site_name';
break;
default:
col = 'site_name';
}
dispatch(getDefaultSso(activeOrganization?.id, activePage || 1, size, searchQuery, col, orderBy, defaultSsoFilterBy));
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'LMS settings') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Type':
col = 'lms_name';
break;
default:
col = 'lms_name';
}
dispatch(getLmsProject(activeOrganization?.id, activePage || 1, size, searchQuery, col, orderBy, lmsProjectFilterBy));
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'All Users') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'First Name':
col = 'first_name';
break;
default:
col = 'first_name';
}
const result = await dispatch(getOrgUsers(activeOrganization?.id, activePage, activeRole, size, searchQuery, col, orderBy));
setUsers(result)
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'All Projects') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Created':
col = 'created_at';
break;
default:
col = 'created_at';
}
const result = await adminService.getAllProjectSearch(activeOrganization?.id, activePage, searchQueryProject, size, col, orderBy);
setAllProjectTab(result);
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'Exported Projects') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Created Date':
col = 'created_at';
break;
default:
col = 'created_at';
}
const result = await adminService.getAllExportedProject(activePage || 1, size, '', col, orderBy);
setAllProjectUserTab(result);
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'All teams') {
let col = '';
switch (column) {
case 'Created':
col = 'created_at';
break;
default:
col = 'created_at';
}
dispatch(teamsActionAdminPanel(activeOrganization?.id, searchQueryTeam, activePage, size, col, orderBy));
setCurrentOrderBy(orderBy);
let order = orderBy == 'ASC' ? 'DESC' : 'ASC';
setOrderBy(order);
setOrderByColumn(col);
}
};
const resetProjectFilter = () => {
setAllProjectTab(null);
setProjectFilterObj({
author_id: null,
created_from: null,
created_to: null,
updated_from: null,
updated_to: null,
shared: null,
indexing: null,
});
if (libraryReqSelected) {
const libraryrequest = adminService.getAllProjectIndex(activeOrganization?.id, activePage, 1, size);
libraryrequest
.then((data) => {
setAllProjectTab(data);
})
.catch((e) => setAllProjectTab([]));
} else {
const allproject = adminService.getAllProject(activeOrganization?.id, activePage, size);
allproject
.then((data) => {
setAllProjectTab(data);
})
.catch((e) => setAllProjectTab([]));
}
};
return (
<Tabs
defaultActiveKey={modules?.filter((data) => !!data)[0]}
id="controlled-tab-example"
activeKey={key}
onSelect={(key) => {
setSubTypeState(key);
setKey(key);
setActivePage(1);
setSearchQueryProject('');
setSearchAlertTogglerStats(1);
dispatch(resetPageNumber());
setSearchQueryStats('');
if (key === 'Exported Projects') {
setCurrentTab('Exported Projects');
setLibraryReqSelected(false);
} else if (key === 'All Projects' || libraryReqSelected) {
setCurrentTab('All Projects');
setLibraryReqSelected(false);
}
}}
>
{modules
?.filter((data) => !!data)
?.map((asset) => (
<Tab key={asset} eventKey={asset} title={asset}>
<div key={asset} className="module-content-inner">
{type === 'Users' && subTypeState === 'All Users' && (
<Starter
paginationCounter={true}
search={true}
print={false}
btnText="Add user"
btnAction="create_user"
importUser={true}
filter={false}
tableHead={columnData.userall}
sortCol={columnData.userallSortCol}
handleSort={handleSort}
data={users}
activePage={activePage}
size={size}
setSize={setSize}
activeRole={activeRole}
setActiveRole={setActiveRole}
subTypeState={'All Users'}
subType={'All Users'}
searchQuery={searchQuery}
setSearchQuery={setSearchQuery}
searchQueryChangeHandler={searchQueryChangeHandler}
searchAlertToggler={searchAlertToggler}
setActivePage={setActivePage}
type={type}
roles={roles}
inviteUser={true}
/>
)}
{type === 'Users' && subTypeState === 'Manage Roles' && (
<Starter
paginationCounter={false}
search={false}
print={false}
btnText="Add Role"
btnAction="add_role"
importUser={false}
filter={false}
subTypeState={subTypeState}
tableHead={[]}
subType="Manage Roles"
sortCol={[]}
handleSort={handleSort}
data={[]}
activeRole={activeRole}
setActiveRole={setActiveRole}
type={type}
roles={roles}
permissionRender={permission?.Organization?.includes('organization:view-role')}
/>
)}
{type === 'Organization' && (
<Starter
search={true}
print={false}
btnText="Add Organization"
btnAction="add_org"
importUser={false}
filter={false}
tableHead={columnData.organization}
sortCol={columnData.organizationSortCol}
handleSort={handleSort}
paginationCounter={true}
size={size}
setSize={setSize}
data={allSuborgList}
type={type}
activePage={activePage}
setActivePage={setActivePage}
searchQueryChangeHandler={searchQueryChangeHandlerOrg}
/>
)}
{type === 'LMS' && subTypeState === 'LMS settings' && (
<Starter
paginationCounter={true}
size={size}
setSize={setSize}
subType={'LMS settings'}
search={true}
print={false}
btnText="Add LMS settings"
btnAction="add_lms"
importUser={false}
filter={false}
tableHead={columnData.lmssettings}
sortCol={columnData.lmssettingsSortCol}
handleSort={handleSort}
data={lmsProject}
type={type}
setActivePage={setActivePage}
activePage={activePage}
searchQueryChangeHandler={searchQueryChangeHandlerLMS}
filteredItems={filterLmsSetting}
/>
)}
{type === 'LMS' && subTypeState === 'BrightCove' && (
<Starter
paginationCounter={true}
size={size}
setSize={setSize}
subType={'BrightCove'}
search={true}
print={false}
btnText="Add New Entry"
btnAction="add_brightcove"
importUser={false}
filter={false}
tableHead={columnData.IntegrationBrightCove}
sortCol={[]}
handleSort={handleSort}
data={lmsBrightCove}
type={type}
searchQuery={searchQuery}
setActivePage={setActivePage}
activePage={activePage}
searchQueryChangeHandler={searchQueryChangeHandlerLMSBrightCove}
/>
)}
{type === 'Projects' && subTypeState === 'All Projects' && (
<Starter
paginationCounter={true}
size={size}
setSize={setSize}
search={true}
tableHead={columnData.projectAll}
sortCol={columnData.projectAllSortCol}
handleSort={handleSort}
data={allProjectTab}
searchProjectQueryChangeHandler={searchProjectQueryChangeHandler}
type={type}
importUser={true}
searchQueryProject={searchQueryProject}
setSearchQueryProject={setSearchQueryProject}
setActivePage={setActivePage}
activePage={activePage}
subType={'All Projects'}
setSubTypeState={setSubTypeState}
projectFilterObj={projectFilterObj}
setProjectFilterObj={setProjectFilterObj}
filterSearch={filterSearch}
libraryReqSelected={libraryReqSelected}
setLibraryReqSelected={setLibraryReqSelected}
setCurrentTab={setCurrentTab}
setAllProjectTab={setAllProjectTab}
resetProjectFilter={resetProjectFilter}
setModalShow={setModalShow}
setrowData={setrowData}
setActivePageNumber={setActivePageNumber}
/>
)}
{type === 'Projects' && subTypeState === 'Exported Projects' && (
<Starter
paginationCounter={true}
size={size}
setSize={setSize}
search={false}
tableHead={columnData.projectUser}
sortCol={columnData.projectUserSortCol}
search={true}
handleSort={handleSort}
data={allProjectUserTab}
type={type}
setActivePage={setActivePage}
activePage={activePage}
subType="Exported Projects"
setCurrentTab={setCurrentTab}
searchQueryProject={searchQueryProject}
setSearchQueryProject={setSearchQueryProject}
searchProjectQueryChangeHandler={searchProjectQueryChangeHandler}
/>
)}
{/* {type === 'Projects' && subTypeState === 'Library requests' && (
<Starter
paginationCounter={true}
size={size}
setSize={setSize}
search={true}
tableHead={columnData.projectIndex}
sortCol={[]}
handleSort={handleSort}
data={allProjectIndexTab}
type={type}
searchQuery={searchQuery}
setSubTypeState={setSubTypeState}
searchProjectQueryChangeHandler={searchProjectQueryChangeHandler}
searchAlertToggler={searchAlertToggler}
setActivePage={setActivePage}
activePage={activePage}
subType="Library requests"
setAllProjectIndexTab={setAllProjectIndexTab}
setCurrentTab={setCurrentTab}
filter={true}
searchQueryProject={searchQueryProject}
setSearchQueryProject={setSearchQueryProject}
changeIndexValue={changeIndexValue}
setChangeIndexValue={setChangeIndexValue}
libraryReqSelected={libraryReqSelected}
setLibraryReqSelected={setLibraryReqSelected}
resetProjectFilter={resetProjectFilter}
projectFilterObj={projectFilterObj}
setProjectFilterObj={setProjectFilterObj}
filterSearch={filterSearch}
/>
)} */}
{type === 'Activities' && subTypeState === 'Activity Types' && (
<Starter
search={true}
tableHead={columnData.ActivityTypes}
sortCol={columnData.ActivityTypesSortCol}
handleSort={handleSort}
subType={'Activity Types'}
searchQueryActivities={searchQueryActivities}
setSearchQueryActivities={setSearchQueryActivities}
searchActivitiesQueryHandler={searchActivitiesQueryHandler}
btnText="Add Activity Type"
btnAction="add_activity_type"
data={activityTypes}
type={type}
setActivePage={setActivePage}
activePage={activePage}
paginationCounter={true}
size={size}
setSize={setSize}
searchQueryChangeHandler={searchQueryChangeHandlerActivityTypes}
setSearchKey={searchActivityTypesQuery}
/>
)}
{type === 'Activities' && subTypeState === 'Activity Items' && (
<Starter
search={true}
tableHead={columnData.ActivityItems}
sortCol={columnData.ActivityItemsSortCol}
handleSort={handleSort}
subType={'Activity Items'}
searchQueryActivities={searchQueryActivities}
setSearchQueryActivities={setSearchQueryActivities}
searchActivitiesQueryHandler={searchActivitiesQueryHandler}
btnText="Add Activity Item"
btnAction="add_activity_item"
data={activityItems}
type={type}
setActivePage={setActivePage}
activePage={activePage}
paginationCounter={true}
size={size}
setSize={setSize}
filteredItems={filterActivityItems}
searchQueryChangeHandler={searchQueryChangeHandlerActivityItems}
setSearchKey={searchActivityItemsQuery}
/>
)}
{type === 'Activities' && subTypeState === 'Subjects' && (
<Starter
search={true}
tableHead={columnData.subjects}
sortCol={columnData.subjectsSortCol}
handleSort={handleSort}
subType={'Subjects'}
searchQueryActivities={searchQueryActivities}
setSearchQueryActivities={setSearchQueryActivities}
searchActivitiesQueryHandler={searchActivitiesQueryHandler}
btnText="Add a new subject"
btnAction="add_subject"
data={subjects}
type={type}
setActivePage={setActivePage}
activePage={activePage}
paginationCounter={true}
size={size}
setSize={setSize}
searchQueryChangeHandler={searchQueryChangeHandlerSubjects}
setSearchKey={searchSubjectsQuery}
/>
)}
{type === 'Activities' && subTypeState === 'Education Level' && (
<Starter
search={true}
tableHead={columnData.educationLevel}
sortCol={columnData.educationLevelSortCol}
handleSort={handleSort}
subType={'Education Level'}
searchQueryActivities={searchQueryActivities}
setSearchQueryActivities={setSearchQueryActivities}
searchActivitiesQueryHandler={searchActivitiesQueryHandler}
btnText="Add a new education level"
btnAction="add_education_level"
data={educationLevel}
type={type}
setActivePage={setActivePage}
activePage={activePage}
paginationCounter={true}
size={size}
setSize={setSize}
searchQueryChangeHandler={searchQueryChangeHandlerEducationLevel}
setSearchKey={searchEducationLevelQuery}
/>
)}
{type === 'Activities' && subTypeState === 'Author Tags' && (
<Starter
search={true}
tableHead={columnData.authorTags}
sortCol={columnData.authorTagsSortCol}
handleSort={handleSort}
subType={'Author Tags'}
searchQueryActivities={searchQueryActivities}
setSearchQueryActivities={setSearchQueryActivities}
searchActivitiesQueryHandler={searchActivitiesQueryHandler}
btnText="Add a new author tag"
btnAction="add_author_tag"
data={authorTag}
type={type}
setActivePage={setActivePage}
activePage={activePage}
paginationCounter={true}
size={size}
setSize={setSize}
searchQueryChangeHandler={searchQueryChangeHandlerAuthorTag}
setSearchKey={searchAuthorTagQuery}
/>
)}
{type === 'Activities' && subTypeState === 'Activity Layouts' && (
<Starter
search={true}
tableHead={columnData.activityLayouts}
sortCol={columnData.activityLayoutsSortCol}
handleSort={handleSort}
subType={'Activity Layouts'}
// searchQueryActivities={searchQueryActivities}
// setSearchQueryActivities={setSearchQueryActivities}
// searchActivitiesQueryHandler={searchActivitiesQueryHandler}
btnText="Add activity layout"
btnAction="add_activity_layout"
data={activityLayout}
type={type}
setActivePage={setActivePage}
activePage={activePage}
paginationCounter={true}
size={size}
setSize={setSize}
searchQueryChangeHandler={searchQueryChangeHandlerActivityLayouts}
setSearchKey={searchLayoutQuery}
/>
)}
{type === 'Settings' && subTypeState === 'LMS settings' && <Starter type={type} subType={'LMS settings'} subTypeState={subTypeState} />}
{type === 'DefaultSso' && (
<Starter
paginationCounter={true}
size={size}
setSize={setSize}
search={true}
print={false}
btnText="Add Default SSO settings"
btnAction="add_default_sso"
importUser={false}
filter={false}
tableHead={columnData.defaultsso}
sortCol={columnData.defaultssoSortCol}
handleSort={handleSort}
data={defaultSso}
type={type}
setActivePage={setActivePage}
activePage={activePage}
searchQueryChangeHandler={searchQueryChangeHandlerDefautSso}
filteredItems={filterDefaultSso}
/>
)}
{type === 'LMS' && subTypeState === 'LTI Tools' && (
<Starter
paginationCounter={true}
size={size}
setSize={setSize}
subType={'LTI Tools'}
search={true}
print={false}
btnText="Create New LTI Tool"
btnAction="add_lti_tool"
importUser={false}
filter={false}
tableHead={columnData.ltitool}
sortCol={columnData.ltitoolSortCol}
handleSort={handleSort}
data={ltiTool}
type={type}
setActivePage={setActivePage}
activePage={activePage}
searchQueryChangeHandler={searchQueryChangeHandlerLtiTool}
filteredItems={filterLtiTool}
/>
)}
{type === 'Teams' && (
<Starter
paginationCounter={true}
size={size}
subType={'All teams'}
setSize={setSize}
search={true}
type={type}
tableHead={columnData.teams}
sortCol={columnData.teamsSortCol}
data={teams}
activePage={activePage}
setActivePage={setActivePage}
handleSort={handleSort}
setSearchQueryTeam={setSearchQueryTeam}
setModalShowTeam={setModalShowTeam}
/>
)}
</div>
</Tab>
))}
</Tabs>
);
}
Example #23
| Source File: Validator.jsx From cosmoscan-front with Apache License 2.0 | 4 votes |
|
Validator = () => {
const { address } = useParams();
const { resp } = useRequest(API.getValidatorInfo, address);
return (
<Container>
<Helmet>
<title>Cosmos validator | Cosmoscan</title>
<meta
name="description"
content="View information on the individual Cosmos validator."
/>
<meta
itemProp="description"
content="View information on the individual Cosmos validator."
/>
<meta
property="og:description"
content="View information on the individual Cosmos validator."
/>
<meta
name="twitter:description"
content="View information on the individual Cosmos validator."
/>
</Helmet>
<Row xs={1} xl={2}>
<ColStyled>
<General info={resp || {}} />
</ColStyled>
<ColStyled>
<BalanceDistribution />
</ColStyled>
<ColStyled>
<DelegatedBalance />
</ColStyled>
<ColStyled>
<NumOfDelegators />
</ColStyled>
</Row>
<Row>
<ColStyled>
<ValidatorStats />
</ColStyled>
</Row>
<Row>
<ColStyled>
<Card>
<Tab.Container id="left-tabs-example" defaultActiveKey="delegators">
<Card.Header style={{ padding: 0, border: 'none' }}>
<Nav fill variant="tabs">
<Nav.Item>
<Nav.Link eventKey="delegators">Delegators</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="votes">Governance votes</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body
style={{
borderLeft: '1px solid #dee2e6',
borderRight: '1px solid #dee2e6 ',
borderBottom: '1px solid #dee2e6 ',
paddingLeft: 0,
paddingRight: 0,
paddingBottom: 0,
paddingTop: 0,
}}
>
<Tab.Content>
<Tab.Pane eventKey="delegators">
<DelegatorsTable />
</Tab.Pane>
<Tab.Pane eventKey="votes">
{resp && resp.acc_address ? (
<VotesTable accAddress={resp.acc_address} />
) : (
<div>No data</div>
)}
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Tab.Container>
</Card>
</ColStyled>
</Row>
</Container>
);
}
Example #24
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function AdminPanel({ showSSO }) {
const history = useHistory();
const dispatch = useDispatch();
const [allProjectTab, setAllProjectTab] = useState(null);
const adminState = useSelector((state) => state.admin);
const [users, setUsers] = useState(null);
const { paginations } = useSelector((state) => state.ui);
const organization = useSelector((state) => state.organization);
const { permission, roles, currentOrganization, activeOrganization } = organization;
const { activeForm, activeTab, removeUser } = adminState;
const [modalShow, setModalShow] = useState(false);
const [modalShowTeam, setModalShowTeam] = useState(false);
const [rowData, setrowData] = useState(false);
const [activePageNumber, setActivePageNumber] = useState(false);
useEffect(() => {
if ((roles?.length === 0 && activeOrganization?.id) || activeOrganization?.id !== currentOrganization?.id) {
dispatch(getRoles());
}
}, [activeOrganization]);
useEffect(() => {}, [activeTab]);
useEffect(() => {
const tab = localStorage.getItem('activeTab');
if (tab) {
dispatch(setActiveTab(tab));
}
}, []);
useEffect(() => {
if (paginations?.length <= 1 || !paginations) {
dispatch({
type: actionTypes.UPDATE_PAGINATION,
payload: [currentOrganization || []],
});
}
}, [currentOrganization]);
const paragraphColor = getGlobalColor('--main-paragraph-text-color');
return (
<div className="admin-panel">
{true ? (
<>
<div className="content-wrapper">
<div className="inner-content">
<Breadcrump />
<Heading />
{!showSSO ? (
<Tabs
defaultActiveKey={activeTab}
activeKey={activeTab}
id="uncontrolled-tab-example"
onSelect={(key) => {
dispatch(setActiveTab(key));
localStorage.setItem('activeTab', key);
}}
>
{permission?.Organization?.includes('organization:view') && (
<Tab eventKey="Organization" title="Organizations">
<div className="parent-organization-detail">
<div className="detailer">
<h3>Main organization: {currentOrganization?.name}</h3>
<p>{currentOrganization?.description}</p>
</div>
{permission?.Organization?.includes('organization:edit') && (
<button
onClick={() => {
dispatch(setActiveAdminForm('edit_org'));
dispatch({
type: 'SET_ACTIVE_EDIT',
payload: currentOrganization,
});
}}
>
{/*<img src={editicon} alt="" />*/}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" className="mr-2" viewBox="0 0 14 14" fill="none" css-inspector-installed="true">
<path
d="M6.36842 2.26562H2.19374C1.8774 2.26563 1.57402 2.39129 1.35033 2.61498C1.12664 2.83867 1.00098 3.14205 1.00098 3.45839V11.8078C1.00098 12.1241 1.12664 12.4275 1.35033 12.6512C1.57402 12.8749 1.8774 13.0005 2.19374 13.0005H10.5431C10.8594 13.0005 11.1628 12.8749 11.3865 12.6512C11.6102 12.4275 11.7359 12.1241 11.7359 11.8078V7.63307"
stroke={paragraphColor}
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M10.8404 1.37054C11.0776 1.13329 11.3994 1 11.735 1C12.0705 1 12.3923 1.13329 12.6295 1.37054C12.8668 1.6078 13.0001 1.92959 13.0001 2.26512C13.0001 2.60065 12.8668 2.92244 12.6295 3.15969L6.9639 8.82533L4.57837 9.42172L5.17475 7.03618L10.8404 1.37054Z"
stroke={paragraphColor}
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
Edit organization
</button>
)}
</div>
<div className="module-content">
<Pills modules={['All Organizations']} type="Organization" subType="All Organizations" />
</div>
</Tab>
)}
{(permission?.Organization?.includes('organization:view-all-project') || permission?.Organization?.includes('organization:view-exported-project')) && (
<Tab eventKey="Projects" title="Projects">
<div className="module-content">
<Pills
setModalShow={setModalShow}
modules={[
permission?.Organization?.includes('organization:view-all-project') && 'All Projects',
permission?.Organization?.includes('organization:view-exported-project') && 'Exported Projects',
]}
allProjectTab={allProjectTab}
setAllProjectTab={setAllProjectTab}
type="Projects"
setrowData={setrowData}
setActivePageNumber={setActivePageNumber}
/>
</div>
</Tab>
)}
{(permission?.Organization?.includes('organization:view-activity-item') ||
permission?.Organization?.includes('organization:view-activity-type') ||
permission?.Organization?.includes('organization:view-activity-type')) && (
<Tab eventKey="Activities" title="Activities">
<div className="module-content">
<Pills
modules={[
'Activity Layouts',
permission?.Organization?.includes('organization:view-activity-type') && 'Activity Types',
permission?.Organization?.includes('organization:view-activity-item') && 'Activity Items',
'Subjects',
'Education Level',
'Author Tags',
]}
type="Activities"
/>
</div>
</Tab>
)}
{(permission?.Organization?.includes('organization:view-user') || permission?.Organization?.includes('organization:view-role')) && (
<Tab eventKey="Users" title="Users">
<div className="module-content">
<Pills
type="Users"
modules={[
permission?.Organization?.includes('organization:view-user') && 'All Users',
permission?.Organization?.includes('organization:view-role') && 'Manage Roles',
]}
subType="All Users"
users={users}
setUsers={setUsers}
/>
</div>
</Tab>
)}
{permission?.Organization?.includes('organization:view-user') && (
<Tab eventKey="Teams" title="Teams">
<div className="module-content">
<Pills type="Teams" modules={['All teams']} subType="All teams" setModalShowTeam={setModalShowTeam} />
</div>
</Tab>
)}
{(permission?.Organization?.includes('organization:view-lms-setting') || permission?.Organization?.includes('organization:view-all-setting')) && (
<Tab eventKey="LMS" title="Integrations">
<div className="module-content">
<Pills
modules={[
permission?.Organization?.includes('organization:view-lms-setting') && 'LMS settings',
permission?.Organization?.includes('organization:view-all-setting') && 'LTI Tools',
permission?.Organization?.includes('organization:view-brightcove-setting') && 'BrightCove',
]}
type="LMS"
/>
{/* <Pills modules={['All settings', 'LTI Tools']} type="LMS" /> */}
</div>
</Tab>
)}
{/* <Tab eventKey="Settings" title="Settings">
<div className="module-content">
<h2>Settings</h2>
<Pills modules={["All settings"]} type="Settings" />
</div>
</Tab> */}
</Tabs>
) : (
<Tabs
defaultActiveKey={'DefaultSso'}
activeKey={'DefaultSso'}
id="uncontrolled-tab-example"
onSelect={(key) => {
dispatch(setActiveTab(key));
localStorage.setItem('activeTab', key);
}}
>
{permission.activeRole?.includes('admin') && !currentOrganization?.parent && (
<Tab eventKey="DefaultSso" title="Default SSO settings">
<div className="module-content">
<Pills modules={['All Default SSO Settings']} type="DefaultSso" />
</div>
</Tab>
)}
</Tabs>
)}
</div>
</div>
{(activeForm === 'add_activity_type' || activeForm === 'edit_activity_type') && (
<div className="form-new-popup-admin">
<div className="inner-form-content">{activeForm === 'add_activity_type' ? <CreateActivityType /> : <CreateActivityType editMode />}</div>
</div>
)}
{(activeForm === 'add_activity_item' || activeForm === 'edit_activity_item') && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">{activeForm === 'add_activity_item' ? <CreateActivityItem /> : <CreateActivityItem editMode />}</div>
</div>
)}
{(activeForm === 'add_subject' || activeForm === 'edit_subject') && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">{activeForm === 'add_subject' ? <CreateSubject /> : <CreateSubject editMode />}</div>
</div>
)}
{(activeForm === 'add_education_level' || activeForm === 'edit_education_level') && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">{activeForm === 'add_education_level' ? <CreateEducationLevel /> : <CreateEducationLevel editMode />}</div>
</div>
)}
{(activeForm === 'add_author_tag' || activeForm === 'edit_author_tag') && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">{activeForm === 'add_author_tag' ? <CreateAuthorTag /> : <CreateAuthorTag editMode />}</div>
</div>
)}
{(activeForm === 'add_activity_layout' || activeForm === 'edit_activity_layout') && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">{activeForm === 'add_activity_layout' ? <CreateActivityLayout /> : <CreateActivityLayout editMode />}</div>
</div>
)}
{(activeForm === 'add_org' || activeForm === 'edit_org') && (
<div className="form-new-popup-admin">
<div className="inner-form-content" style={{ width: '944px' }}>
{activeForm === 'add_org' ? <CreateOrg /> : <CreateOrg editMode />}
</div>
</div>
)}
{activeForm === 'add_role' && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">
<AddRole />
</div>
</div>
)}
{activeForm === 'add_lms' && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">
<CreateLms method="create" />
</div>
</div>
)}
{activeForm === 'add_brightcove' && (
<div className="form-new-popup-admin">
<div className="inner-form-content">
<BrightCove mode={activeForm} />
</div>
</div>
)}
{activeForm === 'edit_bright_form' && (
<div className="form-new-popup-admin">
<div className="inner-form-content">
<BrightCove mode={activeForm} editMode />
</div>
</div>
)}
{activeForm === 'edit_lms' && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">
<CreateLms editMode />
</div>
</div>
)}
{activeForm === 'clone_lms' && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">
<CreateLms editMode clone />
</div>
</div>
)}
{activeForm === 'edit_project' && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">
<EditProject editMode allProjectTab={allProjectTab} setAllProjectTab={setAllProjectTab} />
</div>
</div>
)}
{activeForm === 'create_user' && <CreateUser mode={activeForm} />}
{activeForm === 'edit_user' && (
<div className="form-new-popup-admin">
<div className="inner-form-content">
<CreateUserForm mode={activeForm} editMode />
</div>
</div>
)}
{activeForm === 'add_default_sso' && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">
<CreateDefaultSso method="create" />
</div>
</div>
)}
{activeForm === 'edit_default_sso' && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">
<CreateDefaultSso editMode />
</div>
</div>
)}
{activeForm === 'clone_lti_tool' && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">
<CreateLtiTool editMode clone />
</div>
</div>
)}
{(activeForm === 'add_lti_tool' || activeForm === 'edit_lti_tool') && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">{activeForm === 'add_lti_tool' ? <CreateLtiTool /> : <CreateLtiTool editMode />}</div>
</div>
)}
{removeUser && <RemoveUser users={users} setUsers={setUsers} />}
<EditProjectModel
show={modalShow}
onHide={() => setModalShow(false)}
row={rowData}
showFooter={true}
activePage={activePageNumber}
setAllProjectTab={setAllProjectTab}
activeOrganization={activeOrganization}
/>
<EditTeamModel show={modalShowTeam} onHide={() => setModalShowTeam(false)} activePage={activePageNumber} activeOrganization={activeOrganization} showFooter={true} />
</>
) : (
<div className="content-wrapper" style={{ padding: '20px' }}>
<Alert variant="danger">You are not authorized to view this page.</Alert>
</div>
)}
</div>
);
}
Example #25
| Source File: Address.js From SaraAlert with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<Card className="mx-2 card-square">
<Card.Header as="h5">Monitoree Address</Card.Header>
<Card.Body>
<Tabs
defaultActiveKey={this.state.selectedTab}
id="patient_address"
className="g-border-bottom"
onSelect={() => {
this.setState({ selectedTab: this.state.selectedTab === 'domestic' ? 'foreign' : 'domestic' });
}}>
<Tab eventKey="domestic" title="Home Address Within USA">
<Form>
<Form.Row className="h-100">
<Form.Group as={Col} md={12} className="my-auto"></Form.Group>
</Form.Row>
<Form.Row className="pt-4">
<Form.Group as={Col} controlId="address_line_1">
<Form.Label className="nav-input-label">ADDRESS 1{schemaDomestic?.fields?.address_line_1?._exclusive?.required && ' *'}</Form.Label>
<Form.Control
isInvalid={this.state.errors['address_line_1']}
size="lg"
className="form-square"
value={this.state.current.patient.address_line_1 || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['address_line_1']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId="address_city">
<Form.Label className="nav-input-label">TOWN/CITY{schemaDomestic?.fields?.address_city?._exclusive?.required && ' *'}</Form.Label>
<Form.Control
isInvalid={this.state.errors['address_city']}
size="lg"
className="form-square"
value={this.state.current.patient.address_city || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['address_city']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId="address_state">
<Form.Label className="nav-input-label">STATE{schemaDomestic?.fields?.address_state?._exclusive?.required && ' *'}</Form.Label>
<Form.Control
isInvalid={this.state.errors['address_state']}
as="select"
size="lg"
className="form-square"
value={this.state.current.patient.address_state || ''}
onChange={this.handleChange}>
<option></option>
{stateOptions.map((state, index) => (
<option key={`state-${index}`} value={state.name}>
{state.name}
</option>
))}
</Form.Control>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['address_state']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row className="pt-2">
<Form.Group as={Col} md={8} controlId="address_line_2">
<Form.Label className="nav-input-label">ADDRESS 2{schemaDomestic?.fields?.address_line_2?._exclusive?.required && ' *'}</Form.Label>
<Form.Control
isInvalid={this.state.errors['address_line_2']}
size="lg"
className="form-square"
value={this.state.current.patient.address_line_2 || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['address_line_2']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md={4} controlId="address_zip">
<Form.Label className="nav-input-label">ZIP{schemaDomestic?.fields?.address_zip?._exclusive?.required && ' *'}</Form.Label>
<Form.Control
isInvalid={this.state.errors['address_zip']}
size="lg"
className="form-square"
value={this.state.current.patient.address_zip || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['address_zip']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row className="pt-2">
<Form.Group as={Col} md={8} controlId="address_county">
<Form.Label className="nav-input-label">
COUNTY (DISTRICT) {schemaDomestic?.fields?.address_county?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['address_county']}
size="lg"
className="form-square"
value={this.state.current.patient.address_county || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['address_county']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row>
<hr />
</Form.Row>
<Form.Row className="h-100">
<Form.Group as={Col} className="my-auto">
<h5>
Address at Destination in USA Where Monitored
<Button size="md" variant="outline-primary" className="ml-4 btn-square px-3" onClick={this.whereMonitoredSameAsHome}>
Copy from Home Address
</Button>
</h5>
</Form.Group>
</Form.Row>
<Form.Row className="pt-1 pb-2">
<Form.Group as={Col} md={24} className="my-auto">
<span className="font-weight-light">
(If monitoree is planning on travel within the US, enter the <b>first</b> location where they may be contacted)
</span>
</Form.Group>
</Form.Row>
<Form.Row className="pt-3">
<Form.Group as={Col} controlId="monitored_address_line_1">
<Form.Label className="nav-input-label">
ADDRESS 1{schemaDomestic?.fields?.monitored_address_line_1?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['monitored_address_line_1']}
size="lg"
className="form-square"
value={this.state.current.patient.monitored_address_line_1 || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['monitored_address_line_1']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId="monitored_address_city">
<Form.Label className="nav-input-label">
TOWN/CITY{schemaDomestic?.fields?.monitored_address_city?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['monitored_address_city']}
size="lg"
className="form-square"
value={this.state.current.patient.monitored_address_city || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['monitored_address_city']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId="monitored_address_state">
<Form.Label className="nav-input-label">STATE{schemaDomestic?.fields?.monitored_address_state?._exclusive?.required && ' *'}</Form.Label>
<Form.Control
isInvalid={this.state.errors['monitored_address_state']}
as="select"
size="lg"
className="form-square"
value={this.state.current.patient.monitored_address_state || ''}
onChange={this.handleChange}>
<option></option>
{stateOptions.map((state, index) => (
<option key={`state-${index}`} value={state.name}>
{state.name}
</option>
))}
</Form.Control>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['monitored_address_state']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row className="pt-2">
<Form.Group as={Col} md={8} controlId="monitored_address_line_2">
<Form.Label className="nav-input-label">
ADDRESS 2{schemaDomestic?.fields?.monitored_address_line_2?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['monitored_address_line_2']}
size="lg"
className="form-square"
value={this.state.current.patient.monitored_address_line_2 || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['monitored_address_line_2']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md={4} controlId="monitored_address_zip">
<Form.Label className="nav-input-label">ZIP{schemaDomestic?.fields?.monitored_address_zip?._exclusive?.required && ' *'}</Form.Label>
<Form.Control
isInvalid={this.state.errors['monitored_address_zip']}
size="lg"
className="form-square"
value={this.state.current.patient.monitored_address_zip || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['monitored_address_zip']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row className="pt-2 pb-3">
<Form.Group as={Col} md={8} controlId="monitored_address_county">
<Form.Label className="nav-input-label">
COUNTY (DISTRICT) {schemaDomestic?.fields?.monitored_address_county?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['monitored_address_county']}
size="lg"
className="form-square"
value={this.state.current.patient.monitored_address_county || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['monitored_address_county']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
</Form>
</Tab>
<Tab eventKey="foreign" title="Home Address Outside USA (Foreign)">
<Form>
<Form.Row className="h-100">
<Form.Group as={Col} md={12} className="my-auto"></Form.Group>
</Form.Row>
<Form.Row className="pt-4">
<Form.Group as={Col} controlId="foreign_address_line_1">
<Form.Label className="nav-input-label">
ADDRESS 1{schemaForeign?.fields?.foreign_address_line_1?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_address_line_1']}
size="lg"
className="form-square"
value={this.state.current.patient.foreign_address_line_1 || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_address_line_1']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId="foreign_address_city">
<Form.Label className="nav-input-label">TOWN/CITY{schemaForeign?.fields?.foreign_address_city?._exclusive?.required && ' *'}</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_address_city']}
size="lg"
className="form-square"
value={this.state.current.patient.foreign_address_city || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_address_city']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId="foreign_address_country">
<Form.Label className="nav-input-label">COUNTRY{schemaForeign?.fields?.foreign_address_country?._exclusive?.required && ' *'}</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_address_country']}
as="select"
size="lg"
className="form-square"
value={this.state.current.patient.foreign_address_country || ''}
onChange={this.handleChange}>
<option></option>
{countryOptions.map((country, index) => (
<option key={`country-${index}`}>{country}</option>
))}
</Form.Control>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_address_country']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row className="pt-2">
<Form.Group as={Col} md={8} controlId="foreign_address_line_2">
<Form.Label className="nav-input-label">
ADDRESS 2{schemaForeign?.fields?.foreign_address_line_2?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_address_line_2']}
size="lg"
className="form-square"
value={this.state.current.patient.foreign_address_line_2 || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_address_line_2']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md={4} controlId="foreign_address_zip">
<Form.Label className="nav-input-label">POSTAL CODE{schemaForeign?.fields?.foreign_address_zip?._exclusive?.required && ' *'}</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_address_zip']}
size="lg"
className="form-square"
value={this.state.current.patient.foreign_address_zip || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_address_zip']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row className="pt-2">
<Form.Group as={Col} md={8} controlId="foreign_address_line_3">
<Form.Label className="nav-input-label">
ADDRESS 3{schemaForeign?.fields?.foreign_address_line_3?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_address_line_3']}
size="lg"
className="form-square"
value={this.state.current.patient.foreign_address_line_3 || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_address_line_3']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md={4} controlId="foreign_address_state">
<Form.Label className="nav-input-label">
STATE/PROVINCE{schemaForeign?.fields?.foreign_address_state?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_address_state']}
size="lg"
className="form-square"
value={this.state.current.patient.foreign_address_state || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_address_state']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row>
<hr />
</Form.Row>
<Form.Row className="h-100">
<Form.Group as={Col} md={24} className="my-auto">
<h5>Address at Destination in USA Where Monitored</h5>
</Form.Group>
</Form.Row>
<Form.Row className="pt-2 pb-2">
<Form.Group as={Col} md={24} className="my-auto">
<span className="font-weight-light">
(If monitoree is planning on travel within the US, enter the <b>first</b> location where they may be contacted)
</span>
</Form.Group>
</Form.Row>
<Form.Row className="pt-3">
<Form.Group as={Col} controlId="foreign_monitored_address_line_1">
<Form.Label className="nav-input-label">
ADDRESS 1{schemaForeign?.fields?.foreign_monitored_address_line_1?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_monitored_address_line_1']}
size="lg"
className="form-square"
value={this.state.current.patient.foreign_monitored_address_line_1 || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_monitored_address_line_1']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId="foreign_monitored_address_city">
<Form.Label className="nav-input-label">
TOWN/CITY{schemaForeign?.fields?.foreign_monitored_address_city?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_monitored_address_city']}
size="lg"
className="form-square"
value={this.state.current.patient.foreign_monitored_address_city || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_monitored_address_city']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId="foreign_monitored_address_state">
<Form.Label className="nav-input-label">
STATE{schemaForeign?.fields?.foreign_monitored_address_state?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_monitored_address_state']}
as="select"
size="lg"
className="form-square"
value={this.state.current.patient.foreign_monitored_address_state || ''}
onChange={this.handleChange}>
<option></option>
{stateOptions.map((state, index) => (
<option key={`state-${index}`} value={state.name}>
{state.name}
</option>
))}
</Form.Control>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_monitored_address_state']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row className="pt-2">
<Form.Group as={Col} md={8} controlId="foreign_monitored_address_line_2">
<Form.Label className="nav-input-label">
ADDRESS 2{schemaForeign?.fields?.foreign_monitored_address_line_2?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_monitored_address_line_2']}
size="lg"
className="form-square"
value={this.state.current.patient.foreign_monitored_address_line_2 || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_monitored_address_line_2']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md={4} controlId="foreign_monitored_address_zip">
<Form.Label className="nav-input-label">
ZIP{schemaForeign?.fields?.foreign_monitored_address_zip?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_monitored_address_zip']}
size="lg"
className="form-square"
value={this.state.current.patient.foreign_monitored_address_zip || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_monitored_address_zip']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row className="pt-2 pb-3">
<Form.Group as={Col} md={8} controlId="foreign_monitored_address_county">
<Form.Label className="nav-input-label">
COUNTY (DISTRICT) {schemaForeign?.fields?.foreign_monitored_address_county?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_monitored_address_county']}
size="lg"
className="form-square"
value={this.state.current.patient.foreign_monitored_address_county || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_monitored_address_county']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
</Form>
</Tab>
</Tabs>
{this.props.previous && (
<Button variant="outline-primary" size="lg" className="btn-square px-5" onClick={this.props.previous}>
Previous
</Button>
)}
{this.props.next && (
<Button variant="outline-primary" size="lg" className="float-right btn-square px-5" onClick={() => this.validate(this.props.next)}>
Next
</Button>
)}
{this.props.submit && (
<Button variant="outline-primary" size="lg" className="float-right btn-square px-5" onClick={this.props.submit}>
Finish
</Button>
)}
</Card.Body>
</Card>
</React.Fragment>
);
}
Example #26
| Source File: SettingsPanel.js From Purple-React with MIT License | 4 votes |
|
render() {
return (
<div>
{/* <div id="settings-trigger"><i className="mdi mdi-settings"></i></div> */}
<div id="right-sidebar" className="settings-panel right-sidebar">
<i className="settings-close mdi mdi-close" onClick={this.closeRightSidebar}></i>
<Tabs defaultActiveKey="TODOLIST" className="bg-gradient-primary" id="uncontrolled-tab-example">
<Tab eventKey="TODOLIST" title="TO DO LIST" className="test-tab">
<div>
<div className="row">
<div className="col-lg-12">
<div className="px-3">
<div>
<h4 className="card-title"><Trans>Todo List</Trans></h4>
<form className="add-items d-flex" onSubmit={this.addTodo}>
<input
type="text"
className="form-control h-auto"
placeholder="What do you need to do today?"
value={this.state.inputValue}
onChange={this.inputChangeHandler}
required />
<button type="submit" className="btn btn-gradient-primary font-weight-bold"><Trans>Add</Trans></button>
</form>
<div className="list-wrapper">
<ul className="todo-list">
{this.state.todos.map((todo, index) =>{
return <ListItem
isCompleted={todo.isCompleted}
changed={(event) => this.statusChangedHandler(event, index)}
key={todo.id}
remove={() => this.removeTodo(index) }
>{todo.task}</ListItem>
})}
</ul>
<ul className="todo-list rtl-todo">
{this.state.todosRtl.map((todoRtl, index) =>{
return <ListItem
isCompleted={todoRtl.isCompleted}
changed={(event) => this.statusChangedHandler(event, index)}
key={todoRtl.id}
remove={() => this.removeTodoRtl(index) }
>{todoRtl.task}</ListItem>
})}
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="events py-4 border-bottom px-3">
<div className="wrapper d-flex mb-2">
<i className="mdi mdi-circle-outline text-primary mr-2"></i>
<span><Trans>Feb</Trans> 11 2018</span>
</div>
<p className="mb-0 font-weight-thin text-gray"><Trans>Creating component page</Trans></p>
<p className="text-gray mb-0"><Trans>build a js based app</Trans></p>
</div>
<div className="events pt-4 px-3">
<div className="wrapper d-flex mb-2">
<i className="mdi mdi-circle-outline text-primary mr-2"></i>
<span><Trans>Feb</Trans> 7 2018</span>
</div>
<p className="mb-0 font-weight-thin text-gray"><Trans>Meeting with Alisa</Trans></p>
<p className="text-gray mb-0 "><Trans>Call Sarah Graves</Trans></p>
</div>
</div>
</Tab>
<Tab eventKey="CHATS" title="CHATS">
<div>
<div className="d-flex align-items-center justify-content-between border-bottom">
<p className="settings-heading border-top-0 mb-3 pl-3 pt-0 border-bottom-0 pb-0"><Trans>FRIENDS</Trans></p>
<small className="settings-heading border-top-0 mb-3 pt-0 border-bottom-0 pb-0 pr-3 font-weight-normal"><Trans>See All</Trans></small>
</div>
<ul className="chat-list">
<li className="list active">
<div className="profile"><img src={ require("../../assets/images/faces/face1.jpg")} alt="profile" /><span className="online"></span></div>
<div className="info">
<p><Trans>Thomas Douglas</Trans></p>
<p><Trans>Available</Trans></p>
</div>
<small className="text-muted my-auto">19 <Trans>min</Trans></small>
</li>
<li className="list">
<div className="profile"><img src={ require("../../assets/images/faces/face2.jpg")} alt="profile" /><span className="offline"></span></div>
<div className="info">
<div className="wrapper d-flex">
<p><Trans>Catherine</Trans></p>
</div>
<p><Trans>Away</Trans></p>
</div>
<div className="badge badge-success badge-pill my-auto mx-2">4</div>
<small className="text-muted my-auto">23 <Trans>min</Trans></small>
</li>
<li className="list">
<div className="profile"><img src={ require("../../assets/images/faces/face3.jpg")} alt="profile" /><span className="online"></span></div>
<div className="info">
<p><Trans>Daniel Russell</Trans></p>
<p><Trans>Available</Trans></p>
</div>
<small className="text-muted my-auto">14 <Trans>min</Trans></small>
</li>
<li className="list">
<div className="profile"><img src={ require("../../assets/images/faces/face4.jpg")} alt="profile" /><span className="offline"></span></div>
<div className="info">
<p><Trans>James Richardson</Trans></p>
<p><Trans>Away</Trans></p>
</div>
<small className="text-muted my-auto">2 <Trans>min</Trans></small>
</li>
<li className="list">
<div className="profile"><img src={ require("../../assets/images/faces/face5.jpg")} alt="profile" /><span className="online"></span></div>
<div className="info">
<p><Trans>Madeline Kennedy</Trans></p>
<p><Trans>Available</Trans></p>
</div>
<small className="text-muted my-auto">5 <Trans>min</Trans></small>
</li>
<li className="list">
<div className="profile"><img src={ require("../../assets/images/faces/face6.jpg")} alt="profile" /><span className="online"></span></div>
<div className="info">
<p><Trans>Sarah Graves</Trans></p>
<p><Trans>Available</Trans></p>
</div>
<small className="text-muted my-auto">47 <Trans>min</Trans></small>
</li>
</ul>
</div>
</Tab>
</Tabs>
</div>
</div>
)
}
Example #27
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
BrandingPage = ({ getShow }) => {
const primaryColor = getGlobalColor('--main-preview-primary-color');
const secondaryColorIcon = getGlobalColor('--main-preview-secondary-color');
const [selectTab, setSelectTab] = useState('My Projects');
const [show, setShow] = useState(true);
useEffect(() => {
setShow(getShow);
}, [getShow]);
return (
<div className="branding-preview">
<div className="disablelayer"></div>
<header>
<div className="top-header-preview flex-div align-items-center">
<div className="group-search-logo">
<div className="tophd_left">
<Link to="#" className="top_logo">
<div
className="nav-logo"
style={{
backgroundImage: `url(${logo})`,
backgroundPosition: 'left',
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
}}
/>
</Link>
</div>
</div>
<div className="tophd_right flexdiv search-div d-flex">
<div className="navbar-link">
<ul className="top-info flex-div">
<li>
{' '}
<div style={{ cursor: 'pointer', textAlign: 'center' }}>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M9.28366 3H4.31782C3.59167 3 3.00098 3.59076 3.00098 4.31699V9.28336C3.00098 10.0096 3.59167 10.6003 4.31782 10.6003H9.28366C10.0098 10.6003 10.6005 10.0096 10.6005 9.28336V4.31699C10.6004 3.59076 10.0098 3 9.28366 3Z"
stroke={primaryColor}
strokeWidth="2"
/>
<path
d="M19.6831 3H14.7172C13.9911 3 13.4004 3.59076 13.4004 4.31699V9.28336C13.4004 10.0096 13.9911 10.6003 14.7172 10.6003H19.6831C20.4092 10.6003 20.9999 10.0096 20.9999 9.28336V4.31699C20.9999 3.59076 20.4092 3 19.6831 3Z"
stroke={primaryColor}
strokeWidth="2"
/>
<path
d="M9.28269 13.3994H4.31685C3.59069 13.3994 3 13.9901 3 14.7163V19.6827C3 20.4089 3.59069 20.9997 4.31685 20.9997H9.28269C10.0088 20.9997 10.5995 20.4089 10.5995 19.6827V14.7163C10.5994 13.9901 10.0088 13.3994 9.28269 13.3994Z"
stroke={primaryColor}
strokeWidth="2"
/>
<path
d="M19.6821 13.3994H14.7163C13.9901 13.3994 13.3994 13.9902 13.3994 14.7164V19.6828C13.3994 20.409 13.9901 20.9998 14.7163 20.9998H19.6821C20.4083 20.9997 20.999 20.409 20.999 19.6827V14.7163C20.999 13.9901 20.4083 13.3994 19.6821 13.3994Z"
stroke={primaryColor}
strokeWidth="2"
/>
</svg>
<div className="header-icon-text">Currikistudio</div>
</div>
</li>
<li>
<div style={{ cursor: 'pointer', textAlign: 'center' }}>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.38086 9.30012C9.59245 8.69862 10.0101 8.19142 10.5598 7.86834C11.1095 7.54527 11.7559 7.42717 12.3843 7.53496C13.0128 7.64276 13.5828 7.96949 13.9934 8.4573C14.4041 8.9451 14.6288 9.56249 14.6279 10.2001C14.6279 12.0001 11.9279 12.9001 11.9279 12.9001"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M12 16.5H12.0094" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
<p className="header-icon-text">Help</p>
</div>
</li>
<li>
{' '}
<div style={{ cursor: 'pointer', textAlign: 'center' }}>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M17.2514 8.40096C17.2514 6.96854 16.6981 5.59478 15.7134 4.5819C14.7286 3.56903 13.3931 3 12.0004 3C10.6078 3 9.27219 3.56903 8.28745 4.5819C7.30271 5.59478 6.74949 6.96854 6.74949 8.40096C6.74949 14.7021 4.12402 16.5024 4.12402 16.5024H19.8768C19.8768 16.5024 17.2514 14.7021 17.2514 8.40096Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13.5144 20.1025C13.3605 20.3754 13.1397 20.6018 12.8739 20.7592C12.6082 20.9166 12.307 20.9995 12.0003 20.9995C11.6937 20.9995 11.3925 20.9166 11.1267 20.7592C10.861 20.6018 10.6402 20.3754 10.4863 20.1025"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p className="header-icon-text">Notifications</p>
</div>
</li>
<li className="menu-user-settings d-flex align-items-center">
<Dropdown show={show}>
<Dropdown.Toggle className="align-items-center">
<div className="profile-avatar" style={{ backgroundColor: primaryColor }}>
B
</div>
<p className="header-icon-text">My Profile</p>
</Dropdown.Toggle>
<Dropdown.Menu show={show} className="user-dropdown">
<div className="user-dropdown-item-name">
<div className="profile-avatar" style={{ backgroundColor: primaryColor }}>
B
</div>
<div className="basic-info">
<b>
<p className="name">Branding Style</p>
</b>
<p className="email">[email protected]</p>
</div>
</div>
<hr />
<Dropdown.Item as={Link} to="#">
<div className="user-dropdown-item">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.0512 4.89746H4.78915C4.31464 4.89746 3.85956 5.08596 3.52403 5.42149C3.1885 5.75702 3 6.2121 3 6.68661V19.2106C3 19.6851 3.1885 20.1402 3.52403 20.4757C3.85956 20.8113 4.31464 20.9998 4.78915 20.9998H17.3132C17.7877 20.9998 18.2428 20.8113 18.5783 20.4757C18.9138 20.1402 19.1023 19.6851 19.1023 19.2106V12.9486"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M17.7602 3.55582C18.1161 3.19993 18.5988 3 19.1021 3C19.6054 3 20.088 3.19993 20.4439 3.55582C20.7998 3.9117 20.9997 4.39438 20.9997 4.89768C20.9997 5.40097 20.7998 5.88365 20.4439 6.23954L11.9455 14.738L8.36719 15.6326L9.26176 12.0543L17.7602 3.55582Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
My Account
</div>
</Dropdown.Item>
<hr />
<Dropdown.Item as={Link} to="#">
<div className="user-dropdown-item">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M18.2222 11.1025H5.77778C4.79594 11.1025 4 11.9082 4 12.9021V19.2005C4 20.1944 4.79594 21.0001 5.77778 21.0001H18.2222C19.2041 21.0001 20 20.1944 20 19.2005V12.9021C20 11.9082 19.2041 11.1025 18.2222 11.1025Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M7.55567 11.1025V7.50342C7.55456 6.38774 7.96303 5.31144 8.70178 4.48347C9.44052 3.65549 10.4568 3.13491 11.5534 3.02279C12.65 2.91066 13.7487 3.21499 14.6361 3.8767C15.5235 4.5384 16.1363 5.51028 16.3557 6.60365"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
Change Password
</div>
</Dropdown.Item>
<hr />
<Dropdown.Item href="#">
<div className="user-dropdown-item">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H15"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M10 17L15 12L10 7" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M15 12H3" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
Logout
</div>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</li>
</ul>
</div>
</div>
</div>
</header>
<div className="main-content-wrapper-preivew">
<div className="sidebar-wrapper">
{/* Side Bar Portion */}
<aside className="sidebar-all">
<Link to="#">
<div className="row-sidebar">
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0)">
<path
d="M4 9.60938V24.6094C4 25.2998 4.55965 25.8594 5.25 25.8594H25.25C25.9404 25.8594 26.5 25.2998 26.5 24.6094V11.3402C26.5 10.6498 25.9404 10.0902 25.25 10.0902H16.4038"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
/>
<path
d="M16.4038 10.0902L12.933 6.04244C12.8159 5.92523 12.6569 5.85938 12.4911 5.85938H4.625C4.27983 5.85938 4 6.1392 4 6.48437V9.60937"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
/>
</g>
<defs>
<clipPath id="clip0">
<rect width="30" height="30" stroke={primaryColor} transform="translate(0 0.859375)" />
</clipPath>
</defs>
</svg>
<div className="sidebar-headings">My Projects</div>
</div>
</Link>
{/* Interactive videos */}
<Link to="#">
<div className="row-sidebar">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1.5" width="20" height="12" rx="2" stroke={primaryColor} strokeWidth="2" />
<path d="M1 18.5H21" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" />
<circle cx="15" cy="18.5" r="2" fill="white" stroke={primaryColor} strokeWidth="2" />
<path
d="M9 9.66667V5.43426C9 5.03491 9.44507 4.79672 9.77735 5.01823L13.3044 7.36957C13.619 7.5793 13.5959 8.04885 13.2623 8.22677L9.73529 10.1078C9.40224 10.2855 9 10.0441 9 9.66667Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
<div className="sidebar-headings">My Interactive videos</div>
</div>
</Link>
<Link to="#">
<div className="row-sidebar">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.25315 15.0622C10.8934 15.0622 13.0336 12.9219 13.0336 10.2817C13.0336 7.64152 10.8934 5.50122 8.25315 5.50122C5.61296 5.50122 3.47266 7.64152 3.47266 10.2817C3.47266 12.9219 5.61296 15.0622 8.25315 15.0622Z"
stroke={primaryColor}
strokeWidth="2"
strokeMiterlimit="10"
/>
<path
d="M14.4512 5.67916C15.1086 5.49391 15.7982 5.45171 16.4734 5.5554C17.1487 5.65909 17.7939 5.90627 18.3654 6.28029C18.9371 6.65431 19.4219 7.14649 19.7874 7.72367C20.1527 8.30085 20.3902 8.94963 20.4838 9.62631C20.5773 10.303 20.5247 10.9919 20.3296 11.6465C20.1345 12.3012 19.8014 12.9065 19.3527 13.4215C18.9039 13.9366 18.35 14.3495 17.7283 14.6326C17.1065 14.9155 16.4314 15.062 15.7483 15.0621"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M1.63379 18.5C2.38041 17.438 3.37158 16.5712 4.52365 15.9728C5.67571 15.3745 6.95484 15.062 8.25302 15.062C9.55121 15.062 10.8304 15.3743 11.9825 15.9726C13.1346 16.5708 14.1258 17.4375 14.8725 18.4995"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M15.748 15.062C17.0463 15.0611 18.3257 15.373 19.478 15.9713C20.6302 16.5697 21.6213 17.4369 22.3672 18.4995"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<div className="sidebar-headings">Teams</div>
</div>
</Link>
<Link to="#">
<div className="row-sidebar">
<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M18.6089 14.4799H16.5248C16.186 13.3522 15.1498 12.5234 13.9133 12.5234C12.6768 12.5234 11.6413 13.3522 11.3017 14.4799H1.39148C0.959483 14.4799 0.608887 14.8306 0.608887 15.2626C0.608887 15.6946 0.959483 16.0452 1.39148 16.0452H11.3017C11.6405 17.1729 12.6767 18.0017 13.9132 18.0017C15.1497 18.0017 16.1851 17.1729 16.5248 16.0452H18.6089C19.0416 16.0452 19.3915 15.6946 19.3915 15.2626C19.3915 14.8306 19.0417 14.4799 18.6089 14.4799ZM13.9133 16.4365C13.266 16.4365 12.7393 15.9098 12.7393 15.2626C12.7393 14.6154 13.266 14.0887 13.9133 14.0887C14.5605 14.0887 15.0872 14.6154 15.0872 15.2626C15.0872 15.9098 14.5604 16.4365 13.9133 16.4365Z"
fill={primaryColor}
/>
<path
d="M18.6089 1.95651H16.5248C16.1851 0.828783 15.1498 0 13.9133 0C12.6768 0 11.6413 0.828783 11.3017 1.95651H1.39148C0.959483 1.95651 0.608887 2.30711 0.608887 2.73911C0.608887 3.17111 0.959483 3.5217 1.39148 3.5217H11.3017C11.6413 4.64947 12.6767 5.47825 13.9133 5.47825C15.1498 5.47825 16.1852 4.64947 16.5248 3.52174H18.6089C19.0417 3.52174 19.3915 3.17114 19.3915 2.73914C19.3915 2.30714 19.0417 1.95651 18.6089 1.95651ZM13.9133 3.91302C13.266 3.91302 12.7393 3.38634 12.7393 2.73911C12.7393 2.09188 13.266 1.56519 13.9133 1.56519C14.5605 1.56519 15.0872 2.09188 15.0872 2.73911C15.0872 3.38634 14.5604 3.91302 13.9133 3.91302Z"
fill={primaryColor}
/>
<path
d="M18.6089 8.21823H8.69873C8.35907 7.0905 7.32367 6.26172 6.08718 6.26172C4.85068 6.26172 3.81525 7.0905 3.47562 8.21823H1.39148C0.959483 8.21823 0.608887 8.56883 0.608887 9.00083C0.608887 9.43283 0.959483 9.78343 1.39148 9.78343H3.47558C3.81525 10.9112 4.85064 11.7399 6.08714 11.7399C7.32364 11.7399 8.35907 10.9112 8.69869 9.78343H18.6089C19.0416 9.78343 19.3915 9.43283 19.3915 9.00083C19.3915 8.56883 19.0417 8.21823 18.6089 8.21823ZM6.08714 10.1747C5.43991 10.1747 4.91322 9.64806 4.91322 9.00083C4.91322 8.3536 5.43991 7.82691 6.08714 7.82691C6.73437 7.82691 7.26105 8.3536 7.26105 9.00083C7.26105 9.64806 6.73437 10.1747 6.08714 10.1747Z"
fill={primaryColor}
/>
</svg>
<div className="sidebar-headings">Admin Panel</div>
</div>
</Link>
<Link to="#">
<div className="row-sidebar">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M18.7273 14.7273C18.6063 15.0015 18.5702 15.3056 18.6236 15.6005C18.6771 15.8954 18.8177 16.1676 19.0273 16.3818L19.0818 16.4364C19.2509 16.6052 19.385 16.8057 19.4765 17.0265C19.568 17.2472 19.6151 17.4838 19.6151 17.7227C19.6151 17.9617 19.568 18.1983 19.4765 18.419C19.385 18.6397 19.2509 18.8402 19.0818 19.0091C18.913 19.1781 18.7124 19.3122 18.4917 19.4037C18.271 19.4952 18.0344 19.5423 17.7955 19.5423C17.5565 19.5423 17.3199 19.4952 17.0992 19.4037C16.8785 19.3122 16.678 19.1781 16.5091 19.0091L16.4545 18.9545C16.2403 18.745 15.9682 18.6044 15.6733 18.5509C15.3784 18.4974 15.0742 18.5335 14.8 18.6545C14.5311 18.7698 14.3018 18.9611 14.1403 19.205C13.9788 19.4489 13.8921 19.7347 13.8909 20.0273V20.1818C13.8909 20.664 13.6994 21.1265 13.3584 21.4675C13.0174 21.8084 12.5549 22 12.0727 22C11.5905 22 11.1281 21.8084 10.7871 21.4675C10.4461 21.1265 10.2545 20.664 10.2545 20.1818V20.1C10.2475 19.7991 10.1501 19.5073 9.97501 19.2625C9.79991 19.0176 9.55521 18.8312 9.27273 18.7273C8.99853 18.6063 8.69437 18.5702 8.39947 18.6236C8.10456 18.6771 7.83244 18.8177 7.61818 19.0273L7.56364 19.0818C7.39478 19.2509 7.19425 19.385 6.97353 19.4765C6.7528 19.568 6.51621 19.6151 6.27727 19.6151C6.03834 19.6151 5.80174 19.568 5.58102 19.4765C5.36029 19.385 5.15977 19.2509 4.99091 19.0818C4.82186 18.913 4.68775 18.7124 4.59626 18.4917C4.50476 18.271 4.45766 18.0344 4.45766 17.7955C4.45766 17.5565 4.50476 17.3199 4.59626 17.0992C4.68775 16.8785 4.82186 16.678 4.99091 16.5091L5.04545 16.4545C5.25503 16.2403 5.39562 15.9682 5.4491 15.6733C5.50257 15.3784 5.46647 15.0742 5.34545 14.8C5.23022 14.5311 5.03887 14.3018 4.79497 14.1403C4.55107 13.9788 4.26526 13.8921 3.97273 13.8909H3.81818C3.33597 13.8909 2.87351 13.6994 2.53253 13.3584C2.19156 13.0174 2 12.5549 2 12.0727C2 11.5905 2.19156 11.1281 2.53253 10.7871C2.87351 10.4461 3.33597 10.2545 3.81818 10.2545H3.9C4.2009 10.2475 4.49273 10.1501 4.73754 9.97501C4.98236 9.79991 5.16883 9.55521 5.27273 9.27273C5.39374 8.99853 5.42984 8.69437 5.37637 8.39947C5.3229 8.10456 5.18231 7.83244 4.97273 7.61818L4.91818 7.56364C4.74913 7.39478 4.61503 7.19425 4.52353 6.97353C4.43203 6.7528 4.38493 6.51621 4.38493 6.27727C4.38493 6.03834 4.43203 5.80174 4.52353 5.58102C4.61503 5.36029 4.74913 5.15977 4.91818 4.99091C5.08704 4.82186 5.28757 4.68775 5.50829 4.59626C5.72901 4.50476 5.96561 4.45766 6.20455 4.45766C6.44348 4.45766 6.68008 4.50476 6.9008 4.59626C7.12152 4.68775 7.32205 4.82186 7.49091 4.99091L7.54545 5.04545C7.75971 5.25503 8.03183 5.39562 8.32674 5.4491C8.62164 5.50257 8.9258 5.46647 9.2 5.34545H9.27273C9.54161 5.23022 9.77093 5.03887 9.93245 4.79497C10.094 4.55107 10.1807 4.26526 10.1818 3.97273V3.81818C10.1818 3.33597 10.3734 2.87351 10.7144 2.53253C11.0553 2.19156 11.5178 2 12 2C12.4822 2 12.9447 2.19156 13.2856 2.53253C13.6266 2.87351 13.8182 3.33597 13.8182 3.81818V3.9C13.8193 4.19253 13.906 4.47834 14.0676 4.72224C14.2291 4.96614 14.4584 5.15749 14.7273 5.27273C15.0015 5.39374 15.3056 5.42984 15.6005 5.37637C15.8954 5.3229 16.1676 5.18231 16.3818 4.97273L16.4364 4.91818C16.6052 4.74913 16.8057 4.61503 17.0265 4.52353C17.2472 4.43203 17.4838 4.38493 17.7227 4.38493C17.9617 4.38493 18.1983 4.43203 18.419 4.52353C18.6397 4.61503 18.8402 4.74913 19.0091 4.91818C19.1781 5.08704 19.3122 5.28757 19.4037 5.50829C19.4952 5.72901 19.5423 5.96561 19.5423 6.20455C19.5423 6.44348 19.4952 6.68008 19.4037 6.9008C19.3122 7.12152 19.1781 7.32205 19.0091 7.49091L18.9545 7.54545C18.745 7.75971 18.6044 8.03183 18.5509 8.32674C18.4974 8.62164 18.5335 8.9258 18.6545 9.2V9.27273C18.7698 9.54161 18.9611 9.77093 19.205 9.93245C19.4489 10.094 19.7347 10.1807 20.0273 10.1818H20.1818C20.664 10.1818 21.1265 10.3734 21.4675 10.7144C21.8084 11.0553 22 11.5178 22 12C22 12.4822 21.8084 12.9447 21.4675 13.2856C21.1265 13.6266 20.664 13.8182 20.1818 13.8182H20.1C19.8075 13.8193 19.5217 13.906 19.2778 14.0676C19.0339 14.2291 18.8425 14.4584 18.7273 14.7273Z"
fill="white"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12 11.5C13.1046 11.5 14 10.6046 14 9.5C14 8.39544 13.1046 7.5 12 7.5C10.8954 7.5 10 8.39544 10 9.5C10 10.6046 10.8954 11.5 12 11.5Z"
fill="white"
stroke={primaryColor}
strokeWidth="2"
strokeMiterlimit="10"
/>
<path
d="M12 12C11.2184 12 10.452 12.259 9.78571 12.7483C9.30733 13.0996 8.89394 13.4408 8.56767 13.9655C8.52188 14.0392 8.5 14.1249 8.5 14.2116V15C8.5 15.2761 8.72386 15.5 9 15.5H15C15.2761 15.5 15.5 15.2761 15.5 15V14.2116C15.5 14.1249 15.4781 14.0392 15.4323 13.9655C15.106 13.4408 14.6926 13.0996 14.2143 12.7483C13.548 12.259 12.7816 12 12 12Z"
fill="white"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
<div className="sidebar-headings">Instance Admin</div>
</div>
</Link>
</aside>
</div>
<div className="content-wrapper">
<div className="inner-content">
{/* Project headline */}
<div className="project-headline">
<div className="title">
<div className="title-name-heading-image">
<Headings text="CurrikiStudio" headingType="body2" color="#084892" />
<div className="heading-image " id="preview-heading-myproject">
<svg width="35" height="35" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0)">
<path
d="M4 9.60938V24.6094C4 25.2998 4.55965 25.8594 5.25 25.8594H25.25C25.9404 25.8594 26.5 25.2998 26.5 24.6094V11.3402C26.5 10.6498 25.9404 10.0902 25.25 10.0902H16.4038"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
/>
<path
d="M16.4038 10.0902L12.933 6.04244C12.8159 5.92523 12.6569 5.85938 12.4911 5.85938H4.625C4.27983 5.85938 4 6.1392 4 6.48437V9.60937"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
/>
</g>
<defs>
<clipPath id="clip0">
<rect width="30" height="30" fill="white" transform="translate(0 0.859375)" />
</clipPath>
</defs>
</svg>
{/* Projects */}
<Headings className="preview-myproject-heading" text="My Projects" headingType="h2" color="#084892" />
</div>
</div>
<div className="search-main-relaced">
<FontAwesomeIcon icon="add" style={{ marginRight: '16px' }} color={secondaryColorIcon} />
<Buttons primary text="Create a project" icon={faPlus} width="auto" height="35px" hover />
</div>
</div>
<Headings text="Create and organize your activities into projects to create complete courses." headingType="body2" color="#515151" className="top-heading-detail" />
</div>
{/* Project card */}
<div>
<Tabs defaultActiveKey={selectTab} activeKey={selectTab} id="uncontrolled-tab-example" onSelect={(k) => setSelectTab(k)} className="main-tabs">
<Tab eventKey="My Projects" title="My Projects">
<div className="row">
<div className="col-md-12">
<div className="project-list-all">
<div className="playlist-resource">
<div className="main-myproject-card">
<div>
<>
<div
className="myproject-card-top"
style={{
backgroundImage: `url(${cardBg})`,
}}
>
<div className="myproject-card-dropdown">
<Dropdown show={show} className="project-dropdown check d-flex align-items-center text-added-project-dropdown">
<Dropdown.Toggle className="project-dropdown-btn project d-flex justify-content-center align-items-center">
<FontAwesomeIcon
icon="ellipsis-v"
style={{
fontSize: '13px',
color: '#ffffff',
marginLeft: '5px',
}}
/>
{/* <span>{text}</span> */}
</Dropdown.Toggle>
<Dropdown.Menu show>
<Dropdown.Item to="#">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" className="menue-img">
<path
d="M11.6667 1H2.33333C1.59695 1 1 1.59695 1 2.33333V11.6667C1 12.403 1.59695 13 2.33333 13H11.6667C12.403 13 13 12.403 13 11.6667V2.33333C13 1.59695 12.403 1 11.6667 1Z"
stroke={primaryColor}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M7 4.33325V9.66659" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4.33301 7H9.66634" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
Duplicate
</Dropdown.Item>
<Dropdown.Item to="#">
<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg" className="menue-img">
<path d="M0.75 3.39966H1.91667H11.25" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path
d="M3.66699 3.4V2.2C3.66699 1.88174 3.78991 1.57652 4.0087 1.35147C4.22749 1.12643 4.52424 1 4.83366 1H7.16699C7.47641 1 7.77316 1.12643 7.99195 1.35147C8.21074 1.57652 8.33366 1.88174 8.33366 2.2V3.4M10.0837 3.4V11.8C10.0837 12.1183 9.96074 12.4235 9.74195 12.6485C9.52316 12.8736 9.22641 13 8.91699 13H3.08366C2.77424 13 2.47749 12.8736 2.2587 12.6485C2.03991 12.4235 1.91699 12.1183 1.91699 11.8V3.4H10.0837Z"
stroke={primaryColor}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M4.83301 6.39966V9.99966" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M7.16699 6.39966V9.99966" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
Delete
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
<Link to="#">
<div className="myproject-card-title" id="preview-myproject-card-title">
<h2>Design, Art & History tagr</h2>
</div>
</Link>
</div>
</>
</div>
<Link className="project-description" to="#">
<div className="myproject-card-detail">
<p>Within the six categories, there are over 50 learning activity types. These range from Interactive Video.</p>
</div>
</Link>
<div className="updated-date">Updated: 07/19/2021</div>
<div className="myproject-card-add-share">
<button type="button">
<Link
to="#"
style={{
textDecoration: 'none',
color: '#084892',
}}
>
<svg width="24" height="32" viewBox="0 0 24 32" fill="none" xmlns="http://www.w3.org/2000/svg" className="mr-3">
<path
d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V28C24 30.2091 22.2091 32 20 32H4C1.79086 32 0 30.2091 0 28V4Z"
fill="white"
/>
<path
d="M2.375 16C2.375 16 5.875 9 12 9C18.125 9 21.625 16 21.625 16C21.625 16 18.125 23 12 23C5.875 23 2.375 16 2.375 16Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12 18.625C13.4497 18.625 14.625 17.4497 14.625 16C14.625 14.5503 13.4497 13.375 12 13.375C10.5503 13.375 9.375 14.5503 9.375 16C9.375 17.4497 10.5503 18.625 12 18.625Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<span className="textinButton">Preview</span>
</Link>
</button>
<button type="button">
<svg width="24" height="32" viewBox="0 0 24 32" fill="none" xmlns="http://www.w3.org/2000/svg" className="mr-3">
<path d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V28C24 30.2091 22.2091 32 20 32H4C1.79086 32 0 30.2091 0 28V4Z" fill="white" />
<path
d="M11.0513 8.89767H4.78927C4.31476 8.89767 3.85968 9.08617 3.52415 9.4217C3.18862 9.75723 3.00012 10.2123 3.00012 10.6868V23.2108C3.00012 23.6854 3.18862 24.1404 3.52415 24.476C3.85968 24.8115 4.31476 25 4.78927 25H17.3133C17.7878 25 18.2429 24.8115 18.5784 24.476C18.9139 24.1404 19.1024 23.6854 19.1024 23.2108V16.9488"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M17.7605 7.55582C18.1163 7.19993 18.599 7 19.1023 7C19.6056 7 20.0883 7.19993 20.4442 7.55582C20.8001 7.9117 21 8.39438 21 8.89768C21 9.40097 20.8001 9.88365 20.4442 10.2395L11.9457 18.738L8.36743 19.6326L9.262 16.0543L17.7605 7.55582Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<span className="textinButton">Edit</span>
</button>
<button type="button">
<svg width="24" height="32" viewBox="0 0 24 32" fill="none" xmlns="http://www.w3.org/2000/svg" className="mr-3">
<path d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V28C24 30.2091 22.2091 32 20 32H4C1.79086 32 0 30.2091 0 28V4Z" fill="white" />
<path
d="M10.1899 16.906C10.5786 17.4262 11.0746 17.8566 11.644 18.168C12.2135 18.4795 12.8433 18.6647 13.4905 18.7111C14.1378 18.7575 14.7875 18.664 15.3955 18.437C16.0035 18.21 16.5557 17.8547 17.0144 17.3953L19.7298 14.6772C20.5541 13.8228 21.0103 12.6785 21 11.4907C20.9897 10.303 20.5137 9.16675 19.6746 8.32683C18.8356 7.48692 17.7005 7.01049 16.5139 7.00017C15.3273 6.98985 14.1842 7.44646 13.3307 8.27165L11.7739 9.82094"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13.8101 15.094C13.4214 14.5738 12.9255 14.1434 12.356 13.832C11.7865 13.5205 11.1567 13.3353 10.5095 13.2889C9.86218 13.2425 9.2125 13.336 8.60449 13.563C7.99648 13.7901 7.44435 14.1453 6.98557 14.6048L4.27025 17.3228C3.44589 18.1772 2.98974 19.3215 3.00005 20.5093C3.01036 21.6971 3.48631 22.8333 4.32538 23.6732C5.16445 24.5131 6.29951 24.9895 7.48609 24.9999C8.67267 25.0102 9.81583 24.5536 10.6694 23.7284L12.2171 22.1791"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<span className="textinButton">Shared link</span>
</button>
</div>
</div>
</div>
<div className="playlist-resource">
<div className="main-myproject-card">
<div>
<>
<div
className="myproject-card-top"
style={{
backgroundImage: `url(${cardBg})`,
}}
>
<div className="myproject-card-dropdown">
<Dropdown className="project-dropdown check d-flex align-items-center text-added-project-dropdown">
<Dropdown.Toggle className="project-dropdown-btn project d-flex justify-content-center align-items-center">
<FontAwesomeIcon
icon="ellipsis-v"
style={{
fontSize: '13px',
color: '#ffffff',
marginLeft: '5px',
}}
/>
{/* <span>{text}</span> */}
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item to="#">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" className="menue-img">
<path
d="M11.6667 1H2.33333C1.59695 1 1 1.59695 1 2.33333V11.6667C1 12.403 1.59695 13 2.33333 13H11.6667C12.403 13 13 12.403 13 11.6667V2.33333C13 1.59695 12.403 1 11.6667 1Z"
stroke={primaryColor}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M7 4.33325V9.66659" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4.33301 7H9.66634" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
Duplicate
</Dropdown.Item>
<Dropdown.Item to="#">
<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg" className="menue-img">
<path d="M0.75 3.39966H1.91667H11.25" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path
d="M3.66699 3.4V2.2C3.66699 1.88174 3.78991 1.57652 4.0087 1.35147C4.22749 1.12643 4.52424 1 4.83366 1H7.16699C7.47641 1 7.77316 1.12643 7.99195 1.35147C8.21074 1.57652 8.33366 1.88174 8.33366 2.2V3.4M10.0837 3.4V11.8C10.0837 12.1183 9.96074 12.4235 9.74195 12.6485C9.52316 12.8736 9.22641 13 8.91699 13H3.08366C2.77424 13 2.47749 12.8736 2.2587 12.6485C2.03991 12.4235 1.91699 12.1183 1.91699 11.8V3.4H10.0837Z"
stroke={primaryColor}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M4.83301 6.39966V9.99966" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M7.16699 6.39966V9.99966" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
Delete
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
<Link to="#">
<div className="myproject-card-title" id="preview-myproject-card-title">
<h2>Design, Art & History</h2>
</div>
</Link>
</div>
</>
</div>
<Link className="project-description" to="#">
<div className="myproject-card-detail">
<p>Within the six categories, there are over 50 learning activity types. These range from Interactive Video.</p>
</div>
</Link>
<div className="updated-date">Updated: 07/19/2021</div>
<div className="myproject-card-add-share">
<button type="button">
<Link
to="#"
style={{
textDecoration: 'none',
color: '#084892',
}}
>
<svg width="24" height="32" viewBox="0 0 24 32" fill="none" xmlns="http://www.w3.org/2000/svg" className="mr-3">
<path
d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V28C24 30.2091 22.2091 32 20 32H4C1.79086 32 0 30.2091 0 28V4Z"
fill="white"
/>
<path
d="M2.375 16C2.375 16 5.875 9 12 9C18.125 9 21.625 16 21.625 16C21.625 16 18.125 23 12 23C5.875 23 2.375 16 2.375 16Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12 18.625C13.4497 18.625 14.625 17.4497 14.625 16C14.625 14.5503 13.4497 13.375 12 13.375C10.5503 13.375 9.375 14.5503 9.375 16C9.375 17.4497 10.5503 18.625 12 18.625Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<span className="textinButton">Preview</span>
</Link>
</button>
<button type="button">
<svg width="24" height="32" viewBox="0 0 24 32" fill="none" xmlns="http://www.w3.org/2000/svg" className="mr-3">
<path d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V28C24 30.2091 22.2091 32 20 32H4C1.79086 32 0 30.2091 0 28V4Z" fill="white" />
<path
d="M11.0513 8.89767H4.78927C4.31476 8.89767 3.85968 9.08617 3.52415 9.4217C3.18862 9.75723 3.00012 10.2123 3.00012 10.6868V23.2108C3.00012 23.6854 3.18862 24.1404 3.52415 24.476C3.85968 24.8115 4.31476 25 4.78927 25H17.3133C17.7878 25 18.2429 24.8115 18.5784 24.476C18.9139 24.1404 19.1024 23.6854 19.1024 23.2108V16.9488"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M17.7605 7.55582C18.1163 7.19993 18.599 7 19.1023 7C19.6056 7 20.0883 7.19993 20.4442 7.55582C20.8001 7.9117 21 8.39438 21 8.89768C21 9.40097 20.8001 9.88365 20.4442 10.2395L11.9457 18.738L8.36743 19.6326L9.262 16.0543L17.7605 7.55582Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<span className="textinButton">Edit</span>
</button>
<button type="button">
<svg width="24" height="32" viewBox="0 0 24 32" fill="none" xmlns="http://www.w3.org/2000/svg" className="mr-3">
<path d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V28C24 30.2091 22.2091 32 20 32H4C1.79086 32 0 30.2091 0 28V4Z" fill="white" />
<path
d="M10.1899 16.906C10.5786 17.4262 11.0746 17.8566 11.644 18.168C12.2135 18.4795 12.8433 18.6647 13.4905 18.7111C14.1378 18.7575 14.7875 18.664 15.3955 18.437C16.0035 18.21 16.5557 17.8547 17.0144 17.3953L19.7298 14.6772C20.5541 13.8228 21.0103 12.6785 21 11.4907C20.9897 10.303 20.5137 9.16675 19.6746 8.32683C18.8356 7.48692 17.7005 7.01049 16.5139 7.00017C15.3273 6.98985 14.1842 7.44646 13.3307 8.27165L11.7739 9.82094"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13.8101 15.094C13.4214 14.5738 12.9255 14.1434 12.356 13.832C11.7865 13.5205 11.1567 13.3353 10.5095 13.2889C9.86218 13.2425 9.2125 13.336 8.60449 13.563C7.99648 13.7901 7.44435 14.1453 6.98557 14.6048L4.27025 17.3228C3.44589 18.1772 2.98974 19.3215 3.00005 20.5093C3.01036 21.6971 3.48631 22.8333 4.32538 23.6732C5.16445 24.5131 6.29951 24.9895 7.48609 24.9999C8.67267 25.0102 9.81583 24.5536 10.6694 23.7284L12.2171 22.1791"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<span className="textinButton">Shared link</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</Tab>
<Tab eventKey="Favorite Projects" title="Favorite Projects">
<div className="row">
<div className="col-md-12">
<div className="flex-smaple">
<>
<div className="playlist-resource">
<div className="col-md-3 check">
<div className="program-tile">
<div className="program-thumb">
<div
className="project-thumb"
style={{
backgroundImage: `url(${cardBg})`,
}}
/>
</div>
<div className="program-content" style={{ padding: '10px 15px' }}>
<div>
<div className="row">
<div className="col-md-10">
<h3 className="program-title">
<a>The Curriki Vision</a>
</h3>
</div>
<div className="col-md-2">
<Dropdown className="project-dropdown check d-flex justify-content-center align-items-center">
<Dropdown.Toggle className="project-dropdown-btn project d-flex justify-content-center align-items-center">
<FontAwesomeIcon icon="ellipsis-v" />
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item as={Link}>
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg" className="menue-img">
<path
d="M1.125 6C1.125 6 3.625 1 8 1C12.375 1 14.875 6 14.875 6C14.875 6 12.375 11 8 11C3.625 11 1.125 6 1.125 6Z"
stroke={primaryColor}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8 7.875C9.03553 7.875 9.875 7.03553 9.875 6C9.875 4.96447 9.03553 4.125 8 4.125C6.96447 4.125 6.125 4.96447 6.125 6C6.125 7.03553 6.96447 7.875 8 7.875Z"
stroke={primaryColor}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
Preview
</Dropdown.Item>
<Dropdown.Item to="#">
<FontAwesomeIcon icon="share" className="mr-2" />
Share
</Dropdown.Item>
<Dropdown.Item
to="#"
onClick={() => {
Swal.showLoading();
cloneProject(project.id);
}}
>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" className="menue-img">
<path
d="M11.6667 1H2.33333C1.59695 1 1 1.59695 1 2.33333V11.6667C1 12.403 1.59695 13 2.33333 13H11.6667C12.403 13 13 12.403 13 11.6667V2.33333C13 1.59695 12.403 1 11.6667 1Z"
stroke={primaryColor}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M7 4.33325V9.66659" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4.33301 7H9.66634" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
Duplicate
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</div>
<div className="lessons-duration">
<div className="row">
<div className="col-md-12">
<div>An introduction to Curriki and our vision.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
</div>
</div>
</div>
</Tab>
</Tabs>
</div>
</div>
</div>
</div>
</div>
);
}
Example #28
| Source File: Farms.js From plenty-interface with GNU General Public License v3.0 | 4 votes |
|
Farms = (props) => {
const [sortValue, setSortValue] = useState(FARM_SORT_OPTIONS.APR);
const [floaterValue, setFloaterValue] = useState({});
const [searchValue, setSearchValue] = useState('');
const [tabChange, setTabChange] = useState(FARM_TAB.ALL);
const [isSelected, setIsSelected] = useState(false);
const [isOpen, setIsOpen] = useState(false);
const [showConfirmTransaction, setShowConfirmTransaction] = useState(false);
function toggleHidden() {
setIsOpen(!isOpen);
}
function setSelectTitle(e) {
setSortValue(e.target.value);
toggleHidden();
}
// * Initial Call
useEffect(() => {
if (props.activeFarms.length === 0 || props.inactiveFarms.length === 0) {
const farmsWithoutData = populateFarmsWithoutData();
props.populateEmptyFarmsData(farmsWithoutData);
}
}, []);
const handleClose = () => {
setShowConfirmTransaction(false);
};
useEffect(() => {
const fetchData = () => {
props.getFarmsData(props.isActiveOpen);
props.getUserStakes(props.userAddress, 'FARMS', props.isActiveOpen);
props.getHarvestValues(props.userAddress, 'FARMS', props.isActiveOpen);
props.fetchUserBalances(props.userAddress);
};
fetchData();
const backgroundRefresh = setInterval(() => {
fetchData();
}, 60 * 1000);
return () => clearInterval(backgroundRefresh);
}, [props.isActiveOpen, props.userAddress, props.rpcNode]);
const sortFarmsFunc = useCallback(
(a, b) => {
if (sortValue === FARM_SORT_OPTIONS.APR) {
return Number(a.values?.APR) < Number(b.values?.APR) ? 1 : -1;
}
if (sortValue === FARM_SORT_OPTIONS.TVL) {
return Number(a.values?.totalLiquidty) < Number(b.values?.totalLiquidty) ? 1 : -1;
}
if (sortValue === FARM_SORT_OPTIONS.REWARDS) {
const a1 = Number(a.values?.rewardRate * 2880);
const b1 = Number(b.values?.rewardRate * 2880);
return a1 < b1 ? 1 : -1;
}
return 0;
},
[sortValue],
);
const filterBySearch = useCallback(
(farm) => farm.farmData.CARD_TYPE.toLowerCase().includes(searchValue.toLowerCase()),
[searchValue],
);
const filterByTab = useCallback(
(farm) => {
if (tabChange === FARM_TAB.CTEZ) {
return farm.farmData.CARD_TYPE.toLowerCase().includes('ctez');
}
if (tabChange === FARM_TAB.NEW) {
return farm.farmData.bannerType?.includes('info');
}
if (tabChange === FARM_TAB.STABLE) {
return (
farm.farmData.farmType?.includes('veStableAMM') || farm.farmData.farmType?.includes('xtz')
);
}
if (tabChange === FARM_TAB.YOU) {
return props.userStakes[farm.farmData.CONTRACT]?.stakedAmount > 0;
}
return true;
},
[tabChange, props.userStakes],
);
const filterByStaked = useCallback(
(farm) => {
if (!props.isStakedOnlyOpen) return true;
return props.userStakes[farm.farmData.CONTRACT]?.stakedAmount > 0;
},
[props.isStakedOnlyOpen, props.userStakes],
);
const farmsToRender = useMemo(() => {
const farmsInView = props.isActiveOpen
? props.activeFarms.slice()
: props.inactiveFarms.slice();
return farmsInView
.filter(filterBySearch)
.filter(filterByTab)
.filter(filterByStaked)
.sort(sortFarmsFunc);
}, [
filterBySearch,
filterByTab,
filterByStaked,
sortFarmsFunc,
props.activeFarms,
props.inactiveFarms,
props.isActiveOpen,
]);
return (
<>
<div>
<div>
<div className={styles.header}>
<Tabs
className={`swap-container-tab ${styles.farmstab}`}
mountOnEnter={true}
unmountOnExit={true}
onSelect={(e) => setTabChange(e)}
>
<Tab eventKey={FARM_TAB.ALL} title={FARM_TAB.ALL} />
<Tab eventKey={FARM_TAB.NEW} title={FARM_TAB.NEW} />
<Tab
eventKey={FARM_TAB.STABLE}
title={
<span>
<span className="mr-2">{FARM_TAB.STABLE}</span>
{tabChange === FARM_TAB.STABLE ? <StableswapImg /> : <StableswapGrey />}
</span>
}
/>
<Tab eventKey={FARM_TAB.YOU} title={FARM_TAB.YOU} />
</Tabs>
<div className={styles.selectForm}>
<div className={styles.selectgroup}>
<label htmlFor="button"> Sort by:</label>
<button
id="button"
onClick={(ev) => toggleHidden(ev)}
className={`button ${styles.sortLabel}
`}
>
<span id="select-label">{sortValue}</span>
<span className={`material-icons ${styles.arrow} `}>keyboard_arrow_down</span>
</button>
<div
className={clsx(styles.dropdown, isOpen ? styles.show : styles.hidden)}
id="dropdown"
>
<label className={` ${styles.sortby} ${styles.sortby} `}>SORT BY:</label>
<div className={styles.selectOption}>
<label className={styles.selectItem} htmlFor="select-apr">
{FARM_SORT_OPTIONS.APR}
</label>
<input
className={`option ${styles.option}`}
id="select-apr"
type="radio"
name="where"
value={FARM_SORT_OPTIONS.APR}
onClick={(ev) => setSelectTitle(ev)}
/>
</div>
<div className={styles.selectOption}>
<label className={styles.selectItem} htmlFor="select-tvl">
{FARM_SORT_OPTIONS.TVL}
</label>
<input
className={`option ${styles.option}`}
id="select-tvl"
type="radio"
name="where"
value={FARM_SORT_OPTIONS.TVL}
onClick={(ev) => setSelectTitle(ev)}
/>
</div>
<div className={styles.selectOption}>
<label className={styles.selectItem} htmlFor="select-rewards">
{FARM_SORT_OPTIONS.REWARDS}
</label>
<input
className={`option ${styles.option}`}
name="where"
id="select-rewards"
type="radio"
value={FARM_SORT_OPTIONS.REWARDS}
onClick={(ev) => setSelectTitle(ev)}
/>
</div>
</div>
</div>
</div>
</div>
<div className={` mt-4 justify-between ${styles.header2}`}>
<div className={styles.leftDiv}>
<InputGroup className={styles1.searchBar}>
<InputGroup.Prepend>
<InputGroup.Text className="search-icon border-right-0">
<BsSearch />
</InputGroup.Text>
</InputGroup.Prepend>
<FormControl
placeholder="Search"
className={`shadow-none border-left-0 ${styles1.searchBox}`}
value={searchValue}
onChange={(ev) => setSearchValue(ev.target.value)}
/>
</InputGroup>
</div>
<div className={styles.selectForm1}>
<span className={styles.sortButton} onClick={() => setIsSelected(!isSelected)}>
Sort
<span className={clsx('material-icons', styles.arrow, isSelected && styles.rotate)}>
keyboard_arrow_up
</span>
</span>
</div>
<div>
<div className={styles.rightDiv}>
<div>
<Switch
value={props.isActiveOpen}
onChange={() => props.toggleFarmsType(!props.isActiveOpen)}
trueLabel={'Active'}
falseLabel={'Inactive'}
inverted={true}
/>
</div>
</div>
</div>
</div>
{isSelected && (
<div className={`justify-between flex ${styles.mobileSort}`}>
<div
onClick={() => setSortValue(FARM_SORT_OPTIONS.APR)}
className={clsx(
styles.sortButton,
sortValue === FARM_SORT_OPTIONS.APR ? styles.addbg : styles.removebg,
)}
>
{FARM_SORT_OPTIONS.APR}
</div>
<div
onClick={() => setSortValue(FARM_SORT_OPTIONS.TVL)}
className={clsx(
styles.sortButton,
sortValue === FARM_SORT_OPTIONS.TVL ? styles.addbg : styles.removebg,
)}
>
{FARM_SORT_OPTIONS.TVL}
</div>
<div
onClick={() => setSortValue(FARM_SORT_OPTIONS.REWARDS)}
className={clsx(
styles.sortButton,
sortValue === FARM_SORT_OPTIONS.REWARDS ? styles.addbg : styles.removebg,
)}
>
{FARM_SORT_OPTIONS.REWARDS}
</div>
</div>
)}
<div className={styles.cardsContainer}>
{farmsToRender?.map((farm) => {
return (
<FarmCard
key={`${farm.identifier}${props.isActiveOpen ? ' active' : ''}`}
harvestOnFarm={props.harvestOnFarm}
stakeOnFarm={props.stakeOnFarm}
openFarmsStakeModal={props.openFarmsStakeModal}
openFarmsUnstakeModal={props.openFarmsUnstakeModal}
connectWallet={props.connectWallet}
unstakeOnFarm={props.unstakeOnFarm}
isActiveOpen={props.isActiveOpen}
farmCardData={farm}
userStakes={props.userStakes}
harvestValueOnFarms={props.harvestValueOnFarms}
userAddress={props.userAddress}
currentBlock={props.currentBlock}
harvestOperation={props.harvestOperation}
theme={props.theme}
setShowConfirmTransaction={setShowConfirmTransaction}
setFloaterValue={setFloaterValue}
setLoader={props.setLoader}
/>
);
})}
</div>
</div>
</div>
<StakeModal
walletBalances={props.walletBalances}
isActiveOpen={props.isActiveOpen}
modalData={props.stakeModal}
open={props.stakeModal.open}
onClose={() => props.closeFarmsStakeModal()}
stakeOnFarm={props.stakeOnFarm}
stakeOperation={props.stakeOperation}
setShowConfirmTransaction={setShowConfirmTransaction}
setFloaterValue={setFloaterValue}
setLoader={props.setLoader}
/>
<UnstakeModal
modalData={props.unstakeModal}
currentBlock={props.currentBlock}
open={props.unstakeModal.open}
onClose={() => {
props.closeFarmsUnstakeModal();
}}
userStakes={props.userStakes}
isActiveOpen={props.isActiveOpen}
unstakeOnFarm={props.unstakeOnFarm}
unstakeOperation={props.unstakeOperation}
setShowConfirmTransaction={setShowConfirmTransaction}
setFloaterValue={setFloaterValue}
setLoader={props.setLoader}
/>
<ConfirmTransaction
show={showConfirmTransaction}
theme={props.theme}
content={
floaterValue.type === 'Harvest'
? `${floaterValue.type} ${floaterValue.value} ${floaterValue.pair} `
: `${floaterValue.type} ${Number(floaterValue.value).toFixed(6)} ${
floaterValue.pair
} LP `
}
onHide={handleClose}
/>
<FarmModals
setLoader={props.setLoader}
type={floaterValue.type}
pair={floaterValue.pair}
value={floaterValue.value}
theme={props.theme}
content={
floaterValue.type === 'Harvest'
? `${floaterValue.type} ${floaterValue.value} ${floaterValue.pair} `
: `${floaterValue.type} ${Number(floaterValue.value).toFixed(6)} ${
floaterValue.pair
} LP `
}
/>
</>
);
}
