react-bootstrap#Tabs JavaScript Examples
The following examples show how to use
react-bootstrap#Tabs.
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: Preferences.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 5 votes |
|
export default function PreferencesDialog({
isShown,
onClose,
setLayerStyles = () => {},
updateLayerStyle = () => {},
styles = {
selected: {},
"default": {}
},
configStyles = {}
}) {
const setDefaultStyles = () => {
setLayerStyles(isEmpty(configStyles) ? LAYER_STYLES : configStyles);
};
useEffect(()=>{
const isStateStylesEmpty = isEmpty(styles) || (isEmpty(styles.selected) && isEmpty(styles.default));
isStateStylesEmpty && setDefaultStyles(); // Retain state styles (if any)
}, [setLayerStyles]);
if (!isShown) {
return null;
}
return (
<Portal container={document.querySelector('#container #viewer') || document.body}><Dialog
className="cadastrapp-preferences-dialog"
show={isShown} >
<span role="header"><span><Message msgId={'cadastrapp.preferences.title'}/></span><button style={{ background: 'transparent', border: 'none', "float": "right" }}><Glyphicon glyph="1-close" onClick={() => onClose()} style={{ }} /></button></span>
<div role="body" style={{height: 200}}>
<Tabs defaultActiveKey={1} >
<Tab eventKey={1} title={<Message msgId={'cadastrapp.preferences.default'}/>}>
<StyleEditor
style={styles.default}
updateLayerStyle={( ...args ) => updateLayerStyle('default', ...args)} />
</Tab>
<Tab eventKey={2} title={<Message msgId={'cadastrapp.preferences.selected'}/>}>
<StyleEditor
style={styles.selected}
updateLayerStyle={(...args) => updateLayerStyle('selected', ...args)} />
</Tab>
</Tabs>
</div>
<div role="footer">
<Button onClick={setDefaultStyles}><Message msgId={'cadastrapp.preferences.defaultStyle'}/></Button>
<Button onClick={() => { onClose(); }}><Message msgId={'cadastrapp.preferences.close'}/></Button>
</div>
</Dialog></Portal>
);
}
Example #11
| 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 #12
| 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 #13
| 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 #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: 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' }}>TARANG</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/de442321b07d49c09620569fa592889f/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 brief">
{specs.brief}
</div>
<div>
<a className="tdr-button" href="https://drive.google.com/file/d/16TP7bU2MGEFecJbKzfMHkA8Lb3V4XeNi/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 #16
| 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' }}>VARUN</h2>
{/* <h3 style={{ fontSize: "3rem" }}>The First of them</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/6e1274e10d9e4b6a922a5ed0baf9445f/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/0B952Pi5TJ8RGcWJRUWF5YllsM2M/view?resourcekey=0-YEob3LFfYmo5QhRv_96zdA" 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 #17
| 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 #18
| Source File: RegisterPage.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { firstName, lastName, email, password, organization_name, job_title, error, organization_type, clicked, activeTab, stepper, googleResponse, showPassword } = this.state;
const { isLoading, organizationTypes, domain } = this.props;
return (
<>
{domain?.self_registration === true && (
<div className="auth-page">
<Logo />
<div className="auth-container">
<div className="d-flex align-items-center justify-content-between">
<h1 className="auth-title mb2">
Welcome
{!clicked ? ` to ${window.__RUNTIME_CONFIG__.REACT_APP_INSTANT_NAME || 'Curriki'}` : `, ${firstName}`}
</h1>
{/* <strong>OR</strong> */}
{/* <button
type="button"
className="btn btn-outline-primary text-uppercase"
onClick={this.goToLogin}
>
Login
</button> */}
</div>
<p className="auth-Pdescrip text-left">
{!clicked
? 'Start making a difference in the way learning experiences are created.'
: 'Before start creating awesome content, please let us know the usage your are giving to Curriki. '}
</p>
<div className="content-section">
<Tabs
defaultActiveKey={activeTab}
activeKey={activeTab}
id="uncontrolled-tab-example"
style={{ display: stepper ? 'none' : 'flex' }}
onSelect={(key) => {
this.setState({ activeTab: key });
if (key === 'Log in') this.goToLogin();
}}
>
<Tab eventKey="Log in" title="Log in" />
<Tab eventKey="Sign up" title="Sign up" style={{ display: stepper ? 'none' : 'flex' }}>
<form onSubmit={this.onSubmit} autoComplete="off" className="auth-form">
{!clicked && (
<>
<div className="form-group text-center mb-2">
<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>Sign up with Google</div>
</button>
)}
onSuccess={async (response) => {
const emailCheckResponse = await authService.checkEmail(response.profileObj.email);
if (emailCheckResponse?.exists === true) return this.setState({ error: emailCheckResponse.message });
return this.setState({ stepper: true, googleResponse: response });
// this.onGoogleLoginSuccess(response);
}}
onFailure={this.onGoogleLoginFailure}
cookiePolicy="single_host_origin"
/>
</div>
<div className="hr-spacer">
<span>OR</span>
</div>
<div className="form-group d-flex">
<div className="input-wrapper">
<span>Name</span>
<input autoFocus className="input-box" name="firstName" required maxLength="50" value={firstName} onChange={this.onChangeField} />
</div>
<div className="input-wrapper">
<span>Last name</span>
<input className="input-box" name="lastName" required maxLength="50" value={lastName} onChange={this.onChangeField} />
</div>
</div>
<div className="form-group">
<span>Email</span>
<input
className="input-box"
// type="email"
name="email"
required
maxLength="250"
disabled={query?.email && true}
value={email}
onChange={this.onChangeField}
/>
</div>
<div className="form-group">
<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"
required
maxLength="250"
value={password}
onChange={this.onChangeField}
/>
</div>
<div className="form-group">
<Error error={error} />
</div>
<div className="form-group mb-0" style={{ marginTop: '48px' }}>
<button
type="button"
className="signUp-btn submit"
onClick={() => {
const passwordValidator = this.validatePassword(password);
const emailValidator = validator.isEmail(email.trim());
if (passwordValidator && emailValidator) {
this.setState({
clicked: true,
error: null,
stepper: true,
});
} else if (!passwordValidator) {
this.setState({
error: 'Password must be 8 or more characters long,should contain at least 1 Uppercase, 1 Lowercase and 1 Numeric character.',
});
} else if (!emailValidator) {
this.setState({
error: 'Please input valid email.',
});
}
}}
disabled={isLoading || this.isDisabledSignUp()}
>
{isLoading ? <img src={loader} alt="" /> : 'Sign up with Email'}
</button>
</div>
{/* <div className="vertical-line">
<div className="line" />
<p className="line-or">or</p>
<div className="line" />
</div> */}
{/* <p className="auth-description text-center">
Back to Curriki?
<a onClick={this.goToLogin}>
Login
</a>
</p> */}
<div className="termsandcondition">
By clicking the "Sign Up" button, you are creating a CurrikiStudio account, and 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>
</Tab>
</Tabs>
</div>
{stepper && (
<>
<div className="form-group">
<div className="bkbtn">
{/* <button type="button" onClick={() => this.setState({ clicked: false, stepper: false })}> */}
<img src={leftArrow} alt="arrow-left" />
<a onClick={() => this.setState({ clicked: false, stepper: false })}> Back </a>
{/* </button> */}
</div>
</div>
<div className="form-group">
<div className="using-curriki">
<div className="curriki-line">You are using Curriki for:</div>
<div className="line-horizontal" />
</div>
</div>
<div className="form-group ">
<select
className="input-box organization-type"
name="organization_type"
placeholder="Organization Type*"
value={organization_type}
onChange={this.onChangeField}
>
<option selected value="">
Select an Organization Type
</option>
{organizationTypes.map((type) => (
<option value={type.label}>{type.label}</option>
))}
</select>
</div>
<div className="form-group">
<span>Organization name</span>
<input className="input-box" name="organization_name" maxLength="50" value={organization_name} onChange={this.onChangeField} />
</div>
<div className="form-group">
<span>Job title</span>
<input className="input-box" name="job_title" maxLength="50" value={job_title} onChange={this.onChangeField} />
</div>
<div className="form-group">
<Error error={error} />
</div>
<div className="form-group mb-0" style={{ marginTop: '50px' }}>
<button
type="submit"
className="btn-primary submit get-started-btn"
onClick={(e) => {
this.setState({ clicked: true });
this.onSubmit(e);
}}
disabled={isLoading || (googleResponse ? this.isDisabledGoogle() : this.isDisabled())}
>
{isLoading ? <img src={loader} alt="" /> : 'Complete Registration'}
</button>
</div>
</>
)}
</div>
<img src={bg} className="bg1" alt="" />
<img src={bg1} className="bg2" alt="" />
</div>
)}
</>
);
}
Example #19
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function ExistingActivitySearch(props) {
const { fromTeam, addActivity, libraries } = props;
const [toggleStates, setToggleStates] = useState({
searchLibrary: true,
subject: true,
education: false,
type: false,
});
const allState = useSelector((state) => state.search);
const activityTypesState = useSelector((state) => state.resource.types);
const { currentOrganization, permission } = useSelector((state) => state.organization);
const dispatch = useDispatch();
const [activityTypes, setActivityTypes] = useState([]);
const [search, setSearch] = useState([]);
const [searchQueries, SetSearchQuery] = useState('');
const [searchInput, setSearchInput] = useState('');
const [meta, setMeta] = useState({});
const [activePage, setActivePage] = useState(1);
const [totalCount, setTotalCount] = useState(0);
const [activeModel, setActiveModel] = useState('activities');
const [activeType, setActiveType] = useState([]);
const [activeSubject, setActiveSubject] = useState([]);
const [activeEducation, setActiveEducation] = useState([]);
const [searchType, setSearchType] = useState(null);
const [authorName, SetAuthor] = useState('');
const [activetab, setActiveTab] = useState('activities');
const [todate, Settodate] = useState(undefined);
const [fromdate, Setfromdate] = useState(undefined);
useEffect(() => {
if (localStorage.getItem('refreshPage') === 'true' && currentOrganization && searchType) {
let dataSend;
if (searchType === 'orgSearch') {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
author: authorName || undefined,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
} else {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
author: authorName || undefined,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
}
let result;
(async () => {
result = await dispatch(simpleSearchAction(dataSend));
})();
setTotalCount(result?.meta?.total);
const tempEducation = [];
const tempSubject = [];
if (activeEducation) {
activeEducation.forEach((edu) => {
if (String(edu).includes('&')) {
const temp = String(edu).replace('&', 'and');
tempEducation.push(temp);
} else {
tempEducation.push(edu);
}
});
setActiveEducation(tempEducation);
}
if (activeSubject) {
activeSubject.forEach((sub) => {
if (String(sub).includes('&')) {
const temp = String(sub).replace('&', 'and');
tempSubject.push(temp);
} else {
tempSubject.push(sub);
}
});
setActiveSubject(tempSubject);
}
}
}, [currentOrganization]);
useEffect(() => {
if (allState.searchResult) {
if (allState.searchResult.length > 0) {
setSearch(allState.searchResult);
SetSearchQuery(allState.searchQuery);
setSearchInput(allState.searchQuery);
setMeta(allState.searchMeta);
localStorage.setItem('loading', 'false');
Swal.close();
} else if (allState.searchMeta.total === 0) {
setSearch([]);
SetSearchQuery(allState.searchQuery);
setSearchInput(allState.searchQuery);
setMeta({});
localStorage.setItem('loading', 'false');
Swal.close();
}
}
}, [allState.searchMeta, allState.searchQuery, allState.searchResult]);
useEffect(() => {
if (allState.searchResult) {
if (allState.searchResult.length > 0 && paginationStarter) {
paginationStarter = false;
setTotalCount(allState.searchMeta.total);
}
}
}, [allState.searchMeta, allState.searchResult, totalCount]);
useEffect(() => {
if (localStorage.getItem('loading') === 'true') {
Swal.fire({
html: 'Searching...', // add html attribute if you want or remove
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
}
});
useEffect(() => {
if (activityTypesState.length === 0) {
dispatch(loadResourceTypesAction());
}
}, []);
const compare = (a, b) => {
// Use toUpperCase() to ignore character casing
const bandA = a.title.toUpperCase();
const bandB = b.title.toUpperCase();
let comparison = 0;
if (bandA > bandB) {
comparison = 1;
} else if (bandA < bandB) {
comparison = -1;
}
return comparison;
};
useEffect(() => {
const allItems = [];
activityTypesState?.data?.map((data) => data.activityItems.map((itm) => allItems.push(itm)));
setActivityTypes(allItems.sort(compare));
}, [activityTypesState]);
return (
<>
<div>
<div className={!fromTeam && 'search-wrapper'}>
<div className="content-search">
{true ? (
<div className="search-result-main">
{!fromTeam && <div className="current-org-search">{currentOrganization?.name}</div>}
{!fromTeam && <div className="exp-lib-cnt">Explore library content</div>}
<div
className="total-count"
style={{
display: totalCount > 1000 || !!searchQueries ? 'block' : 'none',
}}
>
{totalCount > 10000 ? (
<div>
Your search returned more than <span>10,000</span> results. Please refine your search criteria.
</div>
) : null}
{!!searchQueries && (
<div>
Showing {search ? meta.total : '0'} results For <span>{searchQueries}</span>
</div>
)}
</div>
<div className="main-content-search">
<div className="left-search">
<div className="search-library">
<Accordion defaultActiveKey="0">
<Card>
<Accordion.Toggle
as={Card.Header}
eventKey="0"
onClick={() =>
setToggleStates({
...toggleStates,
searchLibrary: !toggleStates.searchLibrary,
})
}
>
Search Library
<FontAwesomeIcon className="ml-2" icon={toggleStates.searchLibrary ? 'chevron-up' : 'chevron-down'} />
</Accordion.Toggle>
<Accordion.Collapse eventKey="0">
<Card.Body>
<div className="body-search">
<input
// style={{ display: searchType === 'orgSearch' ? 'none' : 'block' }}
value={searchInput}
onChange={(e) => {
setSearchInput(e.target.value);
}}
onKeyPress={async (e) => {
if (e.key === 'Enter') {
if (!searchInput.trim() && searchType !== 'orgSearch') {
Swal.fire('Search field is required.');
} else if (searchInput.length > 255) {
Swal.fire('Character limit should be less than 255.');
} else {
Swal.fire({
title: 'Searching...', // add html attribute if you want or remove
html: 'We are fetching results for you!',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
let dataSend;
if (searchType === 'orgSearch') {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
gradeArray: activeEducation,
authors: authorName || undefined,
standardArray: activeType,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
} else {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
gradeArray: activeEducation,
authors: authorName || undefined,
standardArray: activeType,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
}
const result = await dispatch(simpleSearchAction(dataSend));
setTotalCount(result.meta?.total);
const tempEducation = [];
const tempSubject = [];
if (activeEducation) {
activeEducation.forEach((edu) => {
if (String(edu).includes('&')) {
const temp = String(edu).replace('&', 'and');
tempEducation.push(temp);
} else {
tempEducation.push(edu);
}
});
setActiveEducation(tempEducation);
}
if (activeSubject) {
activeSubject.forEach((sub) => {
if (String(sub).includes('&')) {
const temp = String(sub).replace('&', 'and');
tempSubject.push(temp);
} else {
tempSubject.push(sub);
}
});
setActiveSubject(tempSubject);
}
}
}
}}
type="search"
placeholder="Search"
/>
<div className="form-group">
<div className="radio-btns">
{true && (
<label>
<input
name="type"
onChange={(e) => {
setSearchType(e.target.value);
}}
value="private"
checked={searchType === 'private'}
type="radio"
/>
<span>My Projects</span>
</label>
)}
{true && (
<label>
<input
name="type"
onChange={(e) => {
setSearchType(e.target.value);
}}
value="public"
checked={searchType === 'public'}
type="radio"
/>
<span>All Shared Projects</span>
</label>
)}
{true && (
<label>
<input
name="type"
onChange={(e) => {
setSearchType(e.target.value);
}}
value="orgSearch"
checked={searchType === 'orgSearch'}
type="radio"
/>
<span>All Shared Projects In My Org</span>
</label>
)}
</div>
</div>
{permission?.Organization?.includes('organization:view-user') && searchType !== 'private' && <div className="author-label">Author</div>}
<div
className="form-group"
style={{
display: permission?.Organization?.includes('organization:view-user') && searchType !== 'private' ? 'block' : 'none',
}}
>
<input
placeholder="Enter author name"
className="authorName"
value={authorName}
onChange={({ target }) => {
if (target.value) {
SetAuthor(target.value);
} else {
SetAuthor('');
}
}}
/>
</div>
<div
className="src-btn"
onClick={async () => {
Setfromdate(undefined);
Settodate(undefined);
setActiveTab('activities');
if (!searchInput.trim() && searchType !== 'orgSearch') {
Swal.fire('Search field is required.');
} else if (searchInput.length > 255) {
Swal.fire('Character limit should be less than 255.');
} else if (!searchType) {
Swal.fire('Search type is required. Click one of the radio buttons.');
} else {
Swal.fire({
title: 'Searching...', // add html attribute if you want or remove
html: 'We are fetching results for you!',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
let dataSend;
if (searchType === 'orgSearch') {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
} else {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
gradeArray: activeEducation,
standardArray: activeType,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
}
const result = await dispatch(simpleSearchAction(dataSend));
setTotalCount(result.meta?.total);
const tempEducation = [];
const tempSubject = [];
if (activeEducation) {
activeEducation.forEach((edu) => {
if (String(edu).includes('&')) {
const temp = String(edu).replace('&', 'and');
tempEducation.push(temp);
} else {
tempEducation.push(edu);
}
});
setActiveEducation(tempEducation);
}
if (activeSubject) {
activeSubject.forEach((sub) => {
if (String(sub).includes('&')) {
const temp = String(sub).replace('&', 'and');
tempSubject.push(temp);
} else {
tempSubject.push(sub);
}
});
setActiveSubject(tempSubject);
}
}
}}
>
<FontAwesomeIcon icon="search" />
Search
</div>
</div>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
<div className="refine-search">
<div className="headline">Refine your search</div>
<Accordion defaultActiveKey="0">
<Card>
<Accordion.Toggle
as={Card.Header}
eventKey="0"
onClick={() =>
setToggleStates({
...toggleStates,
type: false,
education: false,
subject: !toggleStates.subject,
})
}
>
Subject
<FontAwesomeIcon className="ml-2" icon={toggleStates.subject ? 'chevron-up' : 'chevron-down'} />
</Accordion.Toggle>
<Accordion.Collapse eventKey="0">
<Card.Body>
{subjects.map((data) => (
<div
className="list-item-keys"
key={data.value}
value={data.subject}
onClick={() => {
if (activeSubject.includes(data.subject)) {
if (data.subject === 'Career & Technical Education') {
setActiveSubject(
activeSubject.filter((index) => {
if (index === 'Career & Technical Education' || index === 'Career and Technical Education') {
return false;
}
return true;
})
);
} else {
setActiveSubject(activeSubject.filter((index) => index !== data.subject));
}
} else {
setActiveSubject([...activeSubject, data.subject]);
}
}}
>
{data.subject === 'Career & Technical Education' ? (
activeSubject.includes('Career & Technical Education') || activeSubject.includes('Career and Technical Education') ? (
<FontAwesomeIcon icon="check-square" />
) : (
<FontAwesomeIcon icon="square" />
)
) : activeSubject.includes(data.subject) ? (
<FontAwesomeIcon icon="check-square" />
) : (
<FontAwesomeIcon icon="square" />
)}
<span>{data.subject}</span>
</div>
))}
</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Accordion.Toggle
as={Card.Header}
eventKey="1"
onClick={() =>
setToggleStates({
...toggleStates,
type: false,
subject: false,
education: !toggleStates.education,
})
}
>
Education Level
<FontAwesomeIcon className="ml-2" icon={toggleStates.education ? 'chevron-up' : 'chevron-down'} />
</Accordion.Toggle>
<Accordion.Collapse eventKey="1">
<Card.Body>
{educationLevels.map((data) => (
<div
className="list-item-keys"
key={data.value}
value={data.name}
onClick={() => {
if (activeEducation.includes(data.name)) {
if (data.name === 'College & Beyond') {
setActiveEducation(
activeEducation.filter((index) => {
if (index === 'College & Beyond' || index === 'College and Beyond') {
return false;
}
return true;
})
);
} else {
setActiveEducation(activeEducation.filter((index) => index !== data.name));
}
} else {
setActiveEducation([...activeEducation, data.name]);
}
}}
>
{data.name === 'College & Beyond' ? (
activeEducation.includes('College & Beyond') || activeEducation.includes('College and Beyond') ? (
<FontAwesomeIcon icon="check-square" />
) : (
<FontAwesomeIcon icon="square" />
)
) : activeEducation.includes(data.name) ? (
<FontAwesomeIcon icon="check-square" />
) : (
<FontAwesomeIcon icon="square" />
)}
<span>{data.name}</span>
</div>
))}
</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Accordion.Toggle
as={Card.Header}
eventKey="3"
onClick={() =>
setToggleStates({
...toggleStates,
subject: false,
education: false,
type: !toggleStates.type,
})
}
>
Type of Activity
<FontAwesomeIcon className="ml-2" icon={toggleStates.type ? 'chevron-up' : 'chevron-down'} />
</Accordion.Toggle>
<Accordion.Collapse eventKey="3">
<Card.Body
style={{
'max-height': '300px',
'overflow-y': 'auto',
}}
>
{activityTypes.map((data) => (
<div
className="list-item-keys"
key={data.id}
value={data.h5pLib}
onClick={() => {
if (activeType.includes(data.h5pLib)) {
// eslint-disable-next-line eqeqeq
setActiveType(activeType.filter((index) => index != data.h5pLib));
} else {
setActiveType([...activeType, data.h5pLib]);
}
}}
>
{activeType.includes(data.h5pLib) ? <FontAwesomeIcon icon="check-square" /> : <FontAwesomeIcon icon="square" />}
<span>{data.title}</span>
</div>
))}
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
</div>
<div className="right-search" id="right-search-branding-style">
<Tabs
activeKey={activetab}
id="uncontrolled-tab-example"
onSelect={async (e) => {
if (!searchInput && searchType !== 'orgSearch') {
Swal.fire('Search field is required.');
} else {
setActiveTab(e);
if (e === 'total') {
let searchData;
if (searchType === 'orgSearch') {
searchData = {
phrase: searchQueries.trim() || searchInput,
from: 0,
size: 20,
type: searchType,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
};
} else {
searchData = {
phrase: searchQueries.trim() || searchInput,
from: 0,
size: 20,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
type: searchType,
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
};
}
Swal.fire({
title: 'Loading...', // add html attribute if you want or remove
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
const resultModel = await dispatch(simpleSearchAction(searchData));
Swal.close();
setTotalCount(resultModel.meta[e]);
setActiveModel(e);
setActivePage(1);
} else {
let searchData;
if (searchType === 'orgSearch') {
searchData = {
phrase: searchQueries.trim() || searchInput,
from: 0,
size: 20,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
model: e,
type: searchType,
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
standardArray: libraries,
};
} else {
searchData = {
phrase: searchQueries.trim() || searchInput,
from: 0,
size: 20,
model: e,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
type: searchType,
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
standardArray: libraries,
};
}
Swal.fire({
title: 'Loading...', // add html attribute if you want or remove
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
const resultModel = await dispatch(simpleSearchAction(searchData));
Swal.close();
setTotalCount(resultModel.meta[e]);
setActiveModel(e);
setActivePage(1);
}
}
}}
>
{!fromTeam && (
<Tab eventKey="activities" title={!!search && !!meta.activities ? `activity (${meta.activities})` : 'activity (0)'}>
<div className="content">
<div className="results_search">
{!!search && search.length > 0 ? (
search.map((res) => (
<>
{res.model === 'Activity' && (
<div className="box">
<div className="imgbox">
{res.thumb_url ? (
<div
style={{
backgroundImage: res.thumb_url.includes('pexels.com')
? `url(${res.thumb_url})`
: `url(${global.config.resourceUrl}${res.thumb_url})`,
}}
/>
) : (
<div
style={{
// eslint-disable-next-line max-len
backgroundImage:
'https://images.pexels.com/photos/593158/pexels-photo-593158.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280',
}}
/>
)}
</div>
<div className="contentbox">
<div className="search-content">
<a
href={
res.model === 'Activity'
? `/activity/${res.id}/preview`
: res.model === 'Playlist'
? `/playlist/${res.id}/preview/lti`
: `/project/${res.id}/preview`
}
target="_blank"
rel="noreferrer"
>
<h2>{res.title || res.name}</h2>
</a>
<ul>
{res.user && (
<li>
by <span>{res.user.first_name}</span>
</li>
)}
<li>
Type <span className="type">{res.model}</span>
</li>
</ul>
<p>{res.description}</p>
</div>
<Buttons text="Add" secondary={true} width="153px" height="36px" onClick={() => addActivity(res)} hover={true} />
</div>
</div>
)}
</>
))
) : (
<div className="box">No result found !</div>
)}
</div>
</div>
</Tab>
)}
</Tabs>
{totalCount > 20 && (
<Pagination
activePage={activePage}
itemsCountPerPage={20}
totalItemsCount={totalCount > 10000 ? 10000 : totalCount}
pageRangeDisplayed={8}
onChange={async (e) => {
setActivePage(e);
if (activeModel === 'total') {
const searchData = {
phrase: searchQueries.trim(),
from: e * 20 - 20,
size: 20,
type: searchType,
subjectArray: activeSubject || undefined,
gradeArray: activeEducation || undefined,
standardArray: activeType || undefined,
author: authorName || undefined,
};
Swal.fire({
title: 'Loading...',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
await dispatch(simpleSearchAction(searchData));
Swal.close();
} else {
const searchData = {
phrase: searchQueries.trim(),
from: e * 20 - 20,
size: 20,
type: searchType,
model: activeModel,
subjectArray: activeSubject || undefined,
gradeArray: activeEducation || undefined,
standardArray: activeType || undefined,
author: authorName || undefined,
standardArray: libraries,
};
Swal.fire({
title: 'Loading...',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
await dispatch(simpleSearchAction(searchData));
Swal.close();
}
}}
itemClass="page-item"
linkClass="page-link"
/>
)}
</div>
</div>
</div>
) : (
<Alert variant="danger">You are not authorized to view this page!</Alert>
)}
</div>
</div>
</div>
</>
);
}
Example #20
| Source File: createOrg.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
export default function CreateOrg(prop) {
const { editMode } = prop;
const [imageActive, setImgActive] = useState(null);
const [faviconActive, setFaviconActive] = useState(null);
const imgUpload = useRef();
const faviconUpload = useRef();
const allListState = useSelector((state) => state.organization);
const dispatch = useDispatch();
const [loaderImg, setLoaderImg] = useState(false);
const { activeEdit, activeOrganization, currentOrganization } = allListState;
const [checkedActivity, setCheckedActivty] = useState(false);
const [checkedPlaylist, setCheckedPlaylist] = useState(false);
const [checkedProject, setCheckedProject] = useState(false);
const [checkedTosParent, setCheckedTosParent] = useState(true);
const [checkedTosUrl, setCheckedTosUrl] = useState(false);
const [checkedPpParent, setCheckedPpParent] = useState(true);
const [checkedPpUrl, setCheckedPpUrl] = useState(false);
const [show, setShow] = useState(false);
const [ppShow, setPpShow] = useState(false);
const [tosContentValue, setTosContentValue] = useState(null);
const [ppContentValue, setPpContentValue] = useState(null);
const [checkedTosContent, setCheckedTosContent] = useState(null);
const [checkedPpContent, setCheckedPpContent] = useState(null);
const [checkedColorsParent, setCheckedColorsParent] = useState(false);
const [checkedColorsOwn, setCheckedColorsOwn] = useState(true);
const [checkedFontsParent, setCheckedFontsParent] = useState(false);
const [checkedFontsOwn, setCheckedFontsOwn] = useState(true);
const [saveAddOwnprimaryColor, setSaveAddOwnprimaryColor] = useState('#084892');
const [saveAddOwnsecondaryColor, setSaveAddOwnsecondaryColor] = useState('#F8AF2C');
const [saveAddOwnteritaryColor, setSaveAddOwnteritaryColor] = useState('#515151');
const [saveAddOwnprimaryFont, setSaveAddOwnprimaryFont] = useState('rubic');
const [saveAddOwnsecondaryFont, setSaveAddOwnsecondaryFont] = useState('Open Sans');
useEffect(() => {
if (editMode) {
console.log('Edit Mode', editMode);
console.log('Active Mode', activeEdit);
console.log('activeOrganization', activeOrganization);
setImgActive(activeEdit?.image);
setFaviconActive(activeEdit?.favicon);
setCheckedActivty(activeEdit?.gcr_activity_visibility);
setCheckedPlaylist(activeEdit?.gcr_playlist_visibility);
setCheckedProject(activeEdit?.gcr_project_visibility);
setTosContentValue(activeEdit?.tos_content);
setPpContentValue(activeEdit?.privacy_policy_content);
if (activeEdit.tos_type == 'Parent') {
setCheckedTosUrl(false);
setCheckedTosParent(true);
} else if (activeEdit.tos_type == 'URL') {
setCheckedTosParent(false);
setCheckedTosUrl(true);
} else if (activeEdit.tos_type == 'Content') {
setCheckedTosParent(false);
setCheckedTosUrl(false);
setCheckedTosContent(true);
}
if (activeEdit.privacy_policy_type == 'Parent') {
setCheckedPpUrl(false);
setCheckedPpParent(true);
} else if (activeEdit.privacy_policy_type == 'URL') {
setCheckedPpParent(false);
setCheckedPpUrl(true);
} else if (activeEdit.privacy_policy_type == 'Content') {
setCheckedPpParent(false);
setCheckedPpUrl(false);
setCheckedPpContent(true);
}
} else {
setImgActive(null);
setFaviconActive(null);
}
}, [editMode, activeEdit]);
const handleShow = () => {
setShow(true);
};
const handleClose = () => {
setShow(false);
};
const ppHandleShow = () => {
setPpShow(true);
};
const ppHandleClose = () => {
setPpShow(false);
};
const handleTermsEditorChange = (content) => {
setTosContentValue(content);
};
const handlePolicyEditorChange = (content) => {
setPpContentValue(content);
};
const [selectTab, setSelectTab] = useState('Description');
const [selectPreview, setSelectPreview] = useState(false);
const [editorContent, setEditorContent] = useState('');
const [editorContentPolicy, setEditorContentPolicy] = useState('');
const [editorContentTerms, setEditorContentTerms] = useState('');
const saveChangesPolicy = () => {
handlePolicyEditorChange(editorContentPolicy);
};
const saveChangesTerms = () => {
handleTermsEditorChange(editorContentTerms);
};
const updatePreviewScreen = (primaryColor, secondaryColor, teritaryColor, primaryFont, secondaryFont) => {
document.querySelector(':root').style.setProperty('--main-preview-primary-color', primaryColor);
document.querySelector(':root').style.setProperty('--main-preview-secondary-color', secondaryColor);
document.querySelector(':root').style.setProperty('--main-preview-paragraph-text-color', teritaryColor);
document.querySelector(':root').style.setProperty('--main-preview-heading-font', primaryFont);
document.querySelector(':root').style.setProperty('--main-preview-text-font', secondaryFont);
};
useEffect(() => {
if (editMode) {
updatePreviewScreen(
activeEdit?.branding.primary_color,
activeEdit?.branding.secondary_color,
activeEdit?.branding.tertiary_color,
activeEdit?.branding.primary_font_family,
activeEdit?.branding.secondary_font_family
);
}
}, [activeEdit, editMode]);
const secondaryColorIcon = getGlobalColor('--main-secondary-color');
const primaryColor = getGlobalColor('--main-primary-color');
return (
<div className="create-form">
<Formik
enableReinitialize
initialValues={{
image: editMode ? activeEdit.image : 'https://dev.currikistudio.org/api/storage/organizations/H01h34rZGV6gyMayurX8dwpkXZd4X3c0n8NJiUXu.png',
favicon: editMode ? activeEdit?.favicon : 'https://dev.currikistudio.org/api/storage/organizations/QqwMYyeWq7WxQHzy7LDdI0mRBBA3g2qnLm2wd4Ib.svg',
name: editMode ? activeEdit?.name : '',
description: editMode ? activeEdit?.description : '',
domain: editMode ? activeEdit?.domain : '',
account_id: editMode ? activeEdit?.account_id : undefined,
api_key: editMode ? activeEdit?.api_key : undefined,
unit_path: editMode ? activeEdit?.unit_path : undefined,
self_registration: editMode ? activeEdit?.self_registration : false,
noovo_client_id: editMode ? activeEdit?.noovo_client_id : undefined,
gcr_project_visibility: editMode ? activeEdit?.gcr_project_visibility : false,
gcr_playlist_visibility: editMode ? activeEdit?.gcr_playlist_visibility : false,
gcr_activity_visibility: editMode ? activeEdit?.gcr_activity_visibility : false,
tos_type: editMode ? (!activeEdit?.tos_type ? 'Parent' : activeEdit?.tos_type) : 'Parent',
tos_url: editMode ? activeEdit?.tos_url : '',
tos_content: editMode ? activeEdit?.tos_content : '',
privacy_policy_type: editMode ? (!activeEdit?.privacy_policy_type ? 'Parent' : activeEdit?.privacy_policy_type) : 'Parent',
privacy_policy_url: editMode ? activeEdit?.privacy_policy_url : '',
privacy_policy_content: editMode ? activeEdit?.privacy_policy_content : '',
primary_color: editMode ? (activeEdit?.branding.primary_color ? activeEdit?.branding.primary_color : '#084892') : '#084892',
secondary_color: editMode ? (activeEdit?.branding.secondary_color ? activeEdit?.branding.secondary_color : '#F8AF2C') : '#F8AF2C',
tertiary_color: editMode ? (activeEdit?.branding.tertiary_color ? activeEdit?.branding.tertiary_color : '#515151') : '#515151',
primary_font_family: editMode ? activeEdit?.branding.primary_font_family : 'rubic',
secondary_font_family: editMode ? activeEdit?.branding.secondary_font_family : 'Open Sans',
}}
validate={(values) => {
const errors = {};
if (!values.name || values.name.length > 255) {
errors.name = values.name.length > 255 ? 'Length must be 255 characters or less.' : 'Required';
}
if (!values.description || values.description.length > 255) {
errors.description = values.description.length > 255 ? 'Length must be 255 characters or less.' : 'Required';
}
if (!values.domain) {
errors.domain = 'Required';
} else if (values.domain?.length < 2 || values.domain?.length > 255) {
errors.domain = 'Character limit should be greater than one and less than 255';
}
if (!values.image) {
errors.image = 'Required';
}
// if (!values.image_favicon) {
// errors.image_favicon = "Required";
// }
if (!values.tos_type) {
errors.tos_type = 'Required';
}
if (values.tos_type == 'URL' && !values.tos_url) {
errors.tos_url = 'Terms of service URL required!';
}
if (!values.privacy_policy_type) {
errors.privacy_policy_type = 'Required';
}
if (values.privacy_policy_type == 'URL' && !values.privacy_policy_url) {
errors.privacy_policy_url = 'Privacy policy URL required!';
}
return errors;
}}
onSubmit={async (values) => {
if (values.privacy_policy_type === 'Parent') {
delete values.privacy_policy_url;
delete values.privacy_policy_content;
} else if (values.privacy_policy_type === 'URL') {
delete values.privacy_policy_content;
} else if (values.privacy_policy_type === 'Content') {
delete values.privacy_policy_url;
}
if (values.tos_type === 'Parent') {
delete values.tos_url;
delete values.tos_content;
} else if (values.tos_type === 'URL') {
delete values.tos_content;
} else if (values.tos_type === 'Content') {
delete values.tos_url;
}
Swal.fire({
title: 'Please Wait !',
html: editMode ? 'Updating Organization ... ' : 'Creating Organization ... ',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
if (editMode) {
const response = await dispatch(updateOrganization(activeEdit.id, values, activeEdit.parent ? activeEdit.parent.id : undefined));
// if (response?.suborganization.id === currentOrganization.id) {
// DynamicBrandingApply(response?.suborganization);
// }
if (response) {
Swal.fire({
text: 'Organization edited successfully',
icon: 'success',
showCancelButton: false,
confirmButtonText: 'Close',
customClass: {
confirmButton: 'confirmation-close-btn',
},
}).then(async (result) => {
if (result.isConfirmed) {
dispatch(removeActiveAdminForm());
}
});
}
} else {
Swal.fire({
icon: 'info',
text: 'Creating new organization...',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
button: false,
});
const response = await dispatch(createOrganizationNew(activeOrganization.id, values));
if (response) {
Swal.fire({
text: 'Organization added successfully',
icon: 'success',
showCancelButton: false,
confirmButtonText: 'Close',
customClass: {
confirmButton: 'confirmation-close-btn',
},
}).then((result) => {
if (result.isConfirmed) {
dispatch(removeActiveAdminForm());
}
});
}
}
}}
>
{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
setFieldValue,
setErrors,
/* and other goodies */
}) => (
<form onSubmit={handleSubmit}>
<h2>{editMode ? 'Edit ' : 'Add '} organization</h2>
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
{/* -------- */}
<Tabs defaultActiveKey={selectTab} activeKey={selectTab} id="uncontrolled-tab-example" onSelect={(k) => setSelectTab(k)}>
<Tab eventKey="Description" title="Description">
<div className="tab-section">
<div className="tab-inner-section">
<div className="update-Form-style">
<div className="tab-form-section">
<div className="tab-form-section-left">
<div className="form-group-create">
<h3>Organization Name</h3>
<input type="text" name="name" onChange={handleChange} onBlur={handleBlur} value={values.name} />
<div className="error">{errors.name && touched.name && errors.name}</div>
</div>
<div className="form-group-create">
<h3>Description</h3>
<textarea type="text" name="description" onChange={handleChange} onBlur={handleBlur} value={values.description} />
<div className="error">{errors.description && touched.description && errors.description}</div>
</div>
</div>
<div className="tab-form-section-right">
<div className="form-group-create">
<h3>Domain</h3>
<input
type="text"
name="domain"
autoComplete="off"
disabled={editMode ? true : false}
value={values.domain}
onChange={async (e) => {
if (alphabetsOnly(e.target.value) && !e.target.value.includes('@')) {
setFieldValue('domain', e.target?.value);
if (e.target.value.length > 1) {
setLoaderImg(true);
const result = dispatch(checkBranding(e.target.value));
result
.then((res) => {
console.log(res);
if (res.organization) {
setLoaderImg(false);
setErrors({
domain: '*Domian already in use',
});
}
})
.catch((err) => {
if (err.errors) {
setLoaderImg(false);
}
});
}
}
}}
onBlur={handleBlur}
// value={values.admin}
/>
<img
src={loader}
style={{
width: '25px',
marginTop: '5px',
visibility: loaderImg ? 'visible' : 'hidden',
}}
alt=""
className="loader"
/>
<div className="error">{errors.domain && touched.domain && errors.domain}</div>
</div>
</div>
</div>
<div className="tab-middle-optional-title">
<h3>Optional Information</h3>
</div>
<div className="tab-form-section">
<div className="tab-form-section-left">
<div className="form-group-create">
<h3>LearnSafe Account ID</h3>
<input type="text" name="account_id" onChange={handleChange} onBlur={handleBlur} value={values.account_id} />
</div>
<div className="form-group-create">
<h3>LearnSafe Unit Path </h3>
<input type="text" name="unit_path" onChange={handleChange} onBlur={handleBlur} value={values.unit_path} />
</div>
<div className="form-group-create">
<h3>LearnSafe API Key</h3>
<input type="text" name="api_key" onChange={handleChange} onBlur={handleBlur} value={values.api_key} />
</div>
<div className="form-group-create">
<h3>Noovo client ID </h3>
<input type="text" name="noovo_client_id" onChange={handleChange} onBlur={handleBlur} value={values.noovo_client_id} />
</div>
</div>
<div className="tab-form-section-right">
<div className="toggle-group-button">
<div className="form-group-create">
<h3>Google classroom publishing</h3>
<div className="create-form-inputs-toggles">
<div className="custom-toggle-button">
<Switch
checked={values.gcr_activity_visibility}
onChange={() => {
setCheckedActivty(!checkedActivity);
setFieldValue('gcr_activity_visibility', !checkedActivity);
}}
className="react-switch"
handleDiameter={30}
uncheckedIcon={false}
checkedIcon={false}
offColor="#888"
onColor={primaryColor}
onHandleColor={primaryColor}
offHandleColor="#666"
/>
<h3>Activity</h3>
</div>
{/* <Switch
checked={checked}
onChange={() => {
setChecked(!checked);
setFieldValue("published", !checked);
}}
/> */}
<div className="custom-toggle-button">
<Switch
checked={values.gcr_playlist_visibility}
onChange={() => {
setCheckedPlaylist(!checkedPlaylist);
setFieldValue('gcr_playlist_visibility', !checkedPlaylist);
}}
className="react-switch"
handleDiameter={30}
uncheckedIcon={false}
checkedIcon={false}
offColor="#888"
onColor={primaryColor}
onHandleColor={primaryColor}
offHandleColor="#666"
/>
<h3>Playlist</h3>
</div>
<div className="custom-toggle-button">
<Switch
checked={values.gcr_project_visibility}
onChange={() => {
setCheckedProject(!checkedProject);
setFieldValue('gcr_project_visibility', !checkedProject);
}}
className="react-switch"
handleDiameter={30}
uncheckedIcon={false}
checkedIcon={false}
offColor="#888"
onColor={primaryColor}
onHandleColor={primaryColor}
offHandleColor="#666"
/>
<h3>Project</h3>
</div>
</div>
</div>
</div>
<div className="form-group-create">
<h3>Self Registration</h3>
<div className="custom-toggle-button">
<Switch
checked={values.self_registration}
onChange={() => {
setFieldValue('self_registration', !values.self_registration);
}}
className="react-switch"
handleDiameter={30}
offColor="#888"
onColor={primaryColor}
onHandleColor={primaryColor}
offHandleColor="#666"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</Tab>
<Tab eventKey="ToS & PP" title="ToS & PP">
<div className="tab-section">
<div className="tab-tospp-section">
<div className={checkedTosContent ? 'Border-bottom tab-inner-tospp-section mr-16' : 'tab-inner-tospp-section mr-16'}>
{/* Terms of service*/}
<div className="tab_inner-tossp_header">
<h1>Terms of service</h1>
</div>
<div className="tos-pp">
<div className="tos-pss-container">
<div className="form-check" style={{ paddingLeft: '0' }}>
<input
className="form-check-input radio-custom"
onClick={() => {
setCheckedTosUrl(false);
setCheckedTosContent(false);
setCheckedTosParent(true);
setFieldValue('tos_type', 'Parent');
}}
type="radio"
name="tos_type"
id="TosParent"
checked={checkedTosParent}
/>
<label className="form-check-label radio-custom-label" for="TosParent">
Use from the parent organization
</label>
</div>
<div className="form-check" style={{ paddingLeft: '0' }}>
<input
className="form-check-input radio-custom"
onClick={() => {
setCheckedTosParent(false);
setCheckedTosContent(false);
setCheckedTosUrl(true);
setFieldValue('tos_type', 'URL');
}}
type="radio"
name="tos_type"
id="TosURL"
checked={checkedTosUrl}
/>
<label className="form-check-label radio-custom-label" for="TosURL">
Add from a URL
</label>
{checkedTosUrl && (
<div className="form-group-create tos-pp-url">
<h3>Terms of service URL</h3>
<input type="text" name="tos_url" onChange={handleChange} value={values.tos_url} placeholder="https://www.example.com" />
<div className="error">{errors.tos_url && touched.tos_url && errors.tos_url}</div>
</div>
)}
<div className="error">{errors.tos_type && touched.tos_type && errors.tos_type}</div>
</div>
{/* Adding Radion button */}
<div className="form-check" style={{ paddingLeft: '0' }}>
<input
className="form-check-input radio-custom"
onClick={() => {
setCheckedTosContent(true);
setCheckedPpContent(false);
setCheckedTosUrl(false);
setCheckedTosParent(false);
setFieldValue('tos_type', 'Content');
// handleShow();
}}
type="radio"
name="tos_type"
id="TosContent"
checked={checkedTosContent}
/>
<label className="form-check-label radio-custom-label" for="TosContent">
Build my Terms of service
</label>
</div>
</div>
</div>
</div>
{/* privacy_policy_type */}
<div className={checkedPpContent ? 'Border-bottom tab-inner-tospp-section' : 'tab-inner-tospp-section'}>
<div className="tab_inner-tossp_header">
<h1>Privacy policy</h1>
</div>
<div className="tos-pp">
<div className="tos-pss-container">
<div className="form-check" style={{ paddingLeft: '0' }}>
<input
className="form-check-input radio-custom"
onClick={() => {
setCheckedPpUrl(false);
setCheckedPpContent(false);
setCheckedPpParent(true);
setFieldValue('privacy_policy_type', 'Parent');
}}
type="radio"
name="privacy_policy_type"
id="PpParent"
checked={checkedPpParent}
/>
<label className="form-check-label radio-custom-label" for="PpParent">
Use from the parent organization
</label>
</div>
<div className="form-check" style={{ paddingLeft: '0' }}>
<input
className="form-check-input radio-custom"
onClick={() => {
setCheckedPpParent(false);
setCheckedPpContent(false);
setCheckedPpUrl(true);
setFieldValue('privacy_policy_type', 'URL');
}}
type="radio"
name="privacy_policy_type"
id="PpURL"
checked={checkedPpUrl}
/>
<label className="form-check-label radio-custom-label" for="PpURL">
Add from a URL
</label>
<div className="error">{errors.privacy_policy_type && touched.privacy_policy_type && errors.privacy_policy_type}</div>
</div>
{checkedPpUrl && (
<div className="form-group-create tos-pp-url">
<h3>Privacy policy URL</h3>
<input type="text" name="privacy_policy_url" onChange={handleChange} value={values.privacy_policy_url} placeholder="https://www.example.com" />
<div className="error">{errors.privacy_policy_url && touched.privacy_policy_url && errors.privacy_policy_url}</div>
</div>
)}
<div className="form-check" style={{ paddingLeft: '0' }}>
<input
className="form-check-input radio-custom"
onClick={() => {
setCheckedPpContent(true);
setCheckedPpUrl(false);
setCheckedPpParent(false);
setCheckedTosContent(false);
setFieldValue('privacy_policy_type', 'Content');
// ppHandleShow();
}}
type="radio"
name="privacy_policy_type"
id="TosPPContent"
checked={checkedPpContent}
/>
<label className="form-check-label radio-custom-label" for="TosPPContent">
Build my Privacy policy
</label>
</div>
</div>
</div>
</div>
</div>
{checkedPpContent && (
<>
<div className="tab-tossp-detail">
<div className="tab_inner_header">
<h1>Privacy policy</h1>
</div>
<Editor
apiKey="alzppk5y87xyqziy9mfltp1e63bg9jexd40he2sfraajyr1q"
initialValue={ppContentValue ? ppContentValue : ''}
init={{
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount',
],
toolbar:
'undo redo | formatselect | bold italic backcolor alignleft aligncenter alignright alignjustify bullist numlist outdent indent | removeformat | help',
}}
onEditorChange={setEditorContentPolicy}
/>
</div>
<div style={{ marginTop: '16px' }}>
<button
type="button"
class="btn btn-primary edit-org-save-btn"
onClick={() => {
saveChangesPolicy();
}}
>
Save Policy
</button>
</div>
</>
)}
{checkedTosContent && (
<>
<div className="tab-tossp-detail">
<div className="tab_inner_header">
<h1>Terms of service</h1>
</div>
<Editor
apiKey="alzppk5y87xyqziy9mfltp1e63bg9jexd40he2sfraajyr1q"
initialValue={tosContentValue ? tosContentValue : ''}
init={{
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount',
],
toolbar:
'undo redo | formatselect | bold italic backcolor alignleft aligncenter alignright alignjustify bullist numlist outdent indent | removeformat | help',
}}
onEditorChange={setEditorContentTerms}
/>
</div>
<div style={{ marginTop: '16px' }}>
<button
type="button"
class="btn btn-primary edit-org-save-btn"
onClick={() => {
saveChangesTerms();
}}
>
Save Terms
</button>
</div>
</>
)}
<div className="error">{errors.tos_url && touched.tos_url && errors.tos_url}</div>
<div className="error">{errors.privacy_policy_url && touched.privacy_policy_url && errors.privacy_policy_url}</div>
</div>
</Tab>
<Tab eventKey="Theming options" title="Theming options">
<div className="tab-section">
<div className="tab-inner-section mb-16">
<div className="tab_inner_header">
<h1>Logo</h1>
<button
onClick={() => {
setFieldValue('favicon', 'https://dev.currikistudio.org/api/storage/organizations/QqwMYyeWq7WxQHzy7LDdI0mRBBA3g2qnLm2wd4Ib.svg');
setFieldValue('image', 'https://dev.currikistudio.org/api/storage/organizations/H01h34rZGV6gyMayurX8dwpkXZd4X3c0n8NJiUXu.png');
setFaviconActive('https://dev.currikistudio.org/api/storage/organizations/QqwMYyeWq7WxQHzy7LDdI0mRBBA3g2qnLm2wd4Ib.svg');
setImgActive('https://dev.currikistudio.org/api/storage/organizations/H01h34rZGV6gyMayurX8dwpkXZd4X3c0n8NJiUXu.png');
}}
type="button"
>
{/*<img src={ResetImg} alt="" />*/}
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none" css-inspector-installed="true">
<path d="M13.0001 1.63672V4.90931H9.72754" stroke={primaryColor} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M1 10.3663V7.09375H4.27259" stroke={primaryColor} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M2.36903 4.36505C2.64566 3.58333 3.1158 2.88442 3.73559 2.33354C4.35539 1.78267 5.10463 1.39777 5.9134 1.21478C6.72218 1.03178 7.56413 1.05665 8.3607 1.28706C9.15727 1.51746 9.88249 1.9459 10.4687 2.5324L12.9995 4.91048M1 7.0922L3.5308 9.47029C4.117 10.0568 4.84222 10.4852 5.63879 10.7156C6.43536 10.946 7.27731 10.9709 8.08609 10.7879C8.89487 10.6049 9.64411 10.22 10.2639 9.66914C10.8837 9.11826 11.3538 8.41936 11.6305 7.63764"
stroke={primaryColor}
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span>Reset</span>
</button>
</div>
<div className="form-group-create">
<div className="tab-theming-section">
{/* Upload Logo */}
<div className="" onClick={() => imgUpload.current.click()}>
<input
type="file"
name="image"
onChange={(e) => {
if (
!(
e.target.files[0].type.includes('png') ||
e.target.files[0].type.includes('jpg') ||
e.target.files[0].type.includes('gif') ||
e.target.files[0].type.includes('jpeg') ||
e.target.files[0].type.includes('svg')
)
) {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Invalid file selected.',
});
} else if (e.target.files[0].size > 100000000) {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Selected file size should be less then 100MB.',
});
} else {
const formData = new FormData();
try {
formData.append('thumb', e.target.files[0]);
const imgurl = dispatch(uploadImage(allListState.currentOrganization?.id, formData));
imgurl.then((img) => {
setImgActive(img.data?.thumbUrl);
setFieldValue('image', img.data?.thumbUrl);
});
} catch (err) {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Image upload failed, kindly try again.',
});
}
}
}}
onBlur={handleBlur}
ref={imgUpload}
style={{ display: 'none' }}
/>
<div
style={{
display: 'flex',
alignItems: 'center',
}}
>
<div>
<img
src={imageActive ? (imageActive.includes('dev.currikistudio') ? imageActive : `${global.config.resourceUrl}${imageActive}`) : values.image}
style={{
width: '120px',
height: '72px',
borderRadius: '8px',
border: '1px solid #DDDDDD',
}}
/>
</div>
<div>
<div className="button-group tab-theming-btn-icon" style={{ paddingBottom: '0px' }}>
{' '}
<button type="button" className="mr-16">
<FontAwesomeIcon icon="upload" style={{ marginRight: '16px' }} color={secondaryColorIcon} />
Upload logo
</button>
</div>
</div>
</div>
<div className="dimensions-detail">
<p>Max. dimensions: 48px height</p>
</div>
<div className="error">{errors.image && touched.image && errors.image}</div>
</div>
{/* Upload Favicon */}
<div className="mr-100" onClick={() => faviconUpload.current.click()}>
<input
type="file"
name="favicon"
onChange={(e) => {
if (
!(
e.target.files[0].type.includes('png') ||
e.target.files[0].type.includes('jpg') ||
e.target.files[0].type.includes('gif') ||
e.target.files[0].type.includes('jpeg') ||
e.target.files[0].type.includes('svg') ||
e.target.files[0].type.includes('ico')
)
) {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Invalid file selected.',
});
} else if (e.target.files[0].size > 100000000) {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Selected file size should be less then 100MB.',
});
} else {
const formData = new FormData();
try {
formData.append('favicon', e.target.files[0]);
const imgurl = dispatch(uploadFaviconIcon(allListState.currentOrganization?.id, formData));
imgurl.then((img) => {
console.log(img.data?.faviconUrl);
setFaviconActive(img.data?.faviconUrl);
setFieldValue('favicon', img.data?.faviconUrl);
});
} catch (err) {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Image upload failed, kindly try again.',
});
}
}
}}
onBlur={handleBlur}
ref={faviconUpload}
style={{ display: 'none' }}
/>
<div
style={{
display: 'flex',
alignItems: 'center',
}}
>
<div>
<img
src={
faviconActive ? (faviconActive.includes('dev.currikistudio') ? faviconActive : `${global.config.resourceUrl}${faviconActive}`) : values.favicon
}
style={{
width: '72px',
height: '72px',
borderRadius: '8px',
border: '1px solid #DDDDDD',
}}
/>
</div>
<div>
<div className="button-group-favicon tab-theming-btn-icon" style={{ paddingBottom: '0px' }}>
{' '}
<button type="button" className="favicon mr-16">
<FontAwesomeIcon icon="upload" style={{ marginRight: '16px' }} />
Upload favicon
</button>
</div>
</div>
</div>
<div className="dimensions-detail">
<p>Max. dimensions: 16px or 32px height</p>
</div>
<div className="error">{errors.favicon && touched.favicon && errors.favicon}</div>
</div>
</div>
</div>
</div>
<div className="tab-inner-section mb-16 ">
<div className="tab_inner_header">
<h1>Colors</h1>
<button
type="button"
onClick={() => {
setFieldValue('primary_color', '#084892');
setFieldValue('secondary_color', '#F8AF2C');
setFieldValue('tertiary_color', '#515151');
updatePreviewScreen('#084892', '#F8AF2C', '#515151', values.primary_font_family, values.secondary_font_family);
}}
>
{/*<img src={ResetImg} alt="" />*/}
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none" css-inspector-installed="true">
<path d="M13.0001 1.63672V4.90931H9.72754" stroke={primaryColor} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M1 10.3663V7.09375H4.27259" stroke={primaryColor} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M2.36903 4.36505C2.64566 3.58333 3.1158 2.88442 3.73559 2.33354C4.35539 1.78267 5.10463 1.39777 5.9134 1.21478C6.72218 1.03178 7.56413 1.05665 8.3607 1.28706C9.15727 1.51746 9.88249 1.9459 10.4687 2.5324L12.9995 4.91048M1 7.0922L3.5308 9.47029C4.117 10.0568 4.84222 10.4852 5.63879 10.7156C6.43536 10.946 7.27731 10.9709 8.08609 10.7879C8.89487 10.6049 9.64411 10.22 10.2639 9.66914C10.8837 9.11826 11.3538 8.41936 11.6305 7.63764"
stroke={primaryColor}
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span>Reset</span>
</button>
</div>
{/* Radio-For-Color */}
<div className="organization-own-select-radio">
<div className="form-check mr-43">
<input
id="parentColor"
className="form-check-input radio-custom"
onClick={() => {
setCheckedColorsParent(true);
setCheckedColorsOwn(false);
if (editMode) {
activeEdit?.parent?.branding && setFieldValue('primary_color', activeEdit?.parent?.branding.primary_color);
activeEdit?.parent?.branding && setFieldValue('secondary_color', activeEdit?.parent?.branding.secondary_color);
activeEdit?.parent?.branding && setFieldValue('tertiary_color', activeEdit?.parent?.branding.tertiary_color);
activeEdit?.parent?.branding &&
updatePreviewScreen(
activeEdit?.parent?.branding.primary_color,
activeEdit?.parent?.branding.secondary_color,
activeEdit?.parent?.branding.tertiary_color,
values.primary_font_family,
values.secondary_font_family
);
} else {
updatePreviewScreen(
activeOrganization?.branding.primary_color,
activeOrganization?.branding.secondary_color,
activeOrganization?.branding.tertiary_color,
values.primary_font_family,
values.secondary_font_family
);
activeOrganization?.branding && setFieldValue('primary_color', activeOrganization?.branding.primary_color);
activeOrganization?.branding && setFieldValue('secondary_color', activeOrganization?.branding.secondary_color);
activeOrganization?.branding && setFieldValue('tertiary_color', activeOrganization?.branding.tertiary_color);
}
}}
type="radio"
checked={checkedColorsParent}
/>
<label className="form-check-label radio-custom-label" for="parentColor">
Use from the parent organization
</label>
</div>
<div className="form-check">
<input
className="form-check-input radio-custom"
onClick={() => {
setCheckedColorsParent(false);
setCheckedColorsOwn(true);
if (editMode) {
activeEdit?.branding && setFieldValue('primary_color', activeEdit?.branding.primary_color);
activeEdit?.branding && setFieldValue('secondary_color', activeEdit?.branding.secondary_color);
activeEdit?.branding && setFieldValue('tertiary_color', activeEdit?.branding.tertiary_color);
updatePreviewScreen(
activeEdit?.branding.primary_color,
activeEdit?.branding.secondary_color,
activeEdit?.branding.tertiary_color,
values.primary_font_family,
values.secondary_font_family
);
} else {
setFieldValue('primary_color', saveAddOwnprimaryColor);
setFieldValue('secondary_color', saveAddOwnsecondaryColor);
setFieldValue('tertiary_color', saveAddOwnteritaryColor);
updatePreviewScreen(values.primary_color, values.secondary_color, values.tertiary_color, values.primary_font_family, values.secondary_font_family);
}
}}
type="radio"
id="ownColor"
checked={checkedColorsOwn}
/>
<label className="form-check-label radio-custom-label" for="ownColor">
Add my own colors
</label>
</div>
</div>
{checkedColorsOwn && (
<>
<section className="tab_inner_color_section">
<div className="tab_inner_color">
<h4>Primary </h4>
<div>
{/* <input type="color" value="#084892" /> */}
<input
type="color"
name="primary_color"
onChange={(e) => {
handleChange(e);
updatePreviewScreen(e.target.value, values.secondary_color, values.tertiary_color, values.primary_font_family, values.secondary_font_family);
}}
// onMouseLeave={(e) => {
// alert("Mouse Leve");
// checkedColorsOwn &&
// saveAddOwnprimaryColor(e.target.value);
// }}
onBlur={handleBlur}
value={values.primary_color}
/>
<input type="text" value={values.primary_color} />
<div className="error">{errors.name && touched.name && errors.name}</div>
</div>
<p>Use this color for Displays, Headings, Link texts, and some components in a default state if it says so on their own specs.</p>
</div>
<div className="tab_inner_color tab_inner_color_secondry">
<h4>Secondary </h4>
<div>
{/* <input type="color" value="#F8AF2C" /> */}
<input
type="color"
name="secondary_color"
onChange={(e) => {
handleChange(e);
updatePreviewScreen(values.primary_color, e.target.value, values.tertiary_color, values.primary_font_family, values.secondary_font_family);
}}
onBlur={handleBlur}
value={values.secondary_color}
/>
<input type="text" value={values.secondary_color} />
</div>
<p>This color should be use for details that we want to highlitght or that we want to make more visible for users.</p>
</div>
<div className="tab_inner_color tab_inner_color_tertiary">
<h4>Tertiary </h4>
<div>
{/* <input type="color" value="#515151" /> */}
<input
type="color"
name="tertiary_color"
onChange={(e) => {
handleChange(e);
updatePreviewScreen(values.primary_color, values.secondary_color, e.target.value, values.primary_font_family, values.secondary_font_family);
}}
onBlur={handleBlur}
value={values.tertiary_color}
/>
<input type="text" value={values.tertiary_color} />
</div>
<p>This color should be use for most of the body texts and some details that we want to highlitght or that we want to make more visible for users.</p>
</div>
</section>
</>
)}
</div>
<div className="tab-inner-section mb-16 ">
<div className="tab_inner_header">
<h1>Font</h1>
<button
type="button"
onClick={() => {
setFieldValue('primary_font_family', 'rubic');
setFieldValue('secondary_font_family', 'Open Sans');
updatePreviewScreen(values.primary_color, values.secondary_color, values.tertiary_color, 'rubic', 'Open Sans');
}}
>
{/*<img src={ResetImg} alt="" />*/}
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none" css-inspector-installed="true">
<path d="M13.0001 1.63672V4.90931H9.72754" stroke={primaryColor} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M1 10.3663V7.09375H4.27259" stroke={primaryColor} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M2.36903 4.36505C2.64566 3.58333 3.1158 2.88442 3.73559 2.33354C4.35539 1.78267 5.10463 1.39777 5.9134 1.21478C6.72218 1.03178 7.56413 1.05665 8.3607 1.28706C9.15727 1.51746 9.88249 1.9459 10.4687 2.5324L12.9995 4.91048M1 7.0922L3.5308 9.47029C4.117 10.0568 4.84222 10.4852 5.63879 10.7156C6.43536 10.946 7.27731 10.9709 8.08609 10.7879C8.89487 10.6049 9.64411 10.22 10.2639 9.66914C10.8837 9.11826 11.3538 8.41936 11.6305 7.63764"
stroke={primaryColor}
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span>Reset</span>
</button>
</div>
{/* Radio-For-font */}
<div className="organization-own-select-radio">
<div className="form-check mr-43">
<input
id="parentFont"
className="form-check-input radio-custom"
onClick={() => {
setCheckedFontsParent(true);
setCheckedFontsOwn(false);
if (editMode) {
activeEdit?.parent?.branding && setFieldValue('primary_font_family', activeEdit?.parent?.branding.primary_font_family);
activeEdit?.parent?.branding && setFieldValue('secondary_font_family', activeEdit?.parent?.branding.secondary_font_family);
activeEdit?.parent?.branding &&
updatePreviewScreen(
values.primary_color,
values.secondary_color,
values.tertiary_color,
activeEdit?.parent?.branding.primary_font_family,
activeEdit?.parent?.branding.secondary_font_family
);
} else {
updatePreviewScreen(
values.primary_color,
values.secondary_color,
values.tertiary_color,
activeOrganization?.branding.primary_font_family,
activeOrganization?.branding.secondary_font_family
);
activeOrganization?.branding && setFieldValue('primary_font_family', activeOrganization?.branding.primary_font_family);
activeOrganization?.branding && setFieldValue('secondary_font_family', activeOrganization?.branding.secondary_font_family);
}
}}
type="radio"
checked={checkedFontsParent}
/>
<label className="form-check-label radio-custom-label" for="parentFont">
Use from the parent organization
</label>
</div>
<div className="form-check">
<input
className="form-check-input radio-custom"
onClick={() => {
setCheckedFontsParent(false);
setCheckedFontsOwn(true);
if (editMode) {
activeEdit?.branding && setFieldValue('primary_font_family', activeEdit?.branding.primary_font_family);
activeEdit?.branding && setFieldValue('secondary_font_family', activeEdit?.branding.secondary_font_family);
updatePreviewScreen(
values.primary_color,
values.secondary_color,
values.tertiary_color,
activeEdit?.branding.primary_font_family,
activeEdit?.branding.secondary_font_family
);
} else {
updatePreviewScreen(values.primary_color, values.secondary_color, values.tertiary_color, saveAddOwnprimaryFont, saveAddOwnsecondaryFont);
setFieldValue('primary_font_family', saveAddOwnprimaryFont);
setFieldValue('secondary_font_family', saveAddOwnsecondaryFont);
}
}}
type="radio"
id="ownFont"
checked={checkedFontsOwn}
/>
<label className="form-check-label radio-custom-label" for="ownFont">
Add my own fonts
</label>
</div>
</div>
{checkedFontsOwn && (
<>
<section className="tab_inner_font_section">
<div className="tab_inner_font_primary">
<h4>Primary </h4>
<select
name="primary_font_family"
onChange={(e) => {
handleChange(e);
updatePreviewScreen(values.primary_color, values.secondary_color, values.tertiary_color, e.target.value, values.secondary_font_family);
}}
onBlur={handleBlur}
value={values.primary_font_family}
>
<option value="rubic">Rubic</option>
<option value="SmoochSans">SmoochSans</option>
<option value="Open Sans">Open Sans</option>
<option value="Fredoka">Fredoka</option>
{/*<option value="BhuTukaExpandedOne">BhuTukaExpandedOne</option>*/}
</select>
</div>
<div className="tab_inner_font_primary">
<h4>Secondary </h4>
<select
name="secondary_font_family"
onChange={(e) => {
handleChange(e);
updatePreviewScreen(values.primary_color, values.secondary_color, e.target.value, values.primary_font_family, e.target.value);
}}
onBlur={handleBlur}
value={values.secondary_font_family}
>
<option value="rubic">Rubic</option>
<option value="SmoochSans">SmoochSans</option>
<option value="Open Sans">Open Sans</option>
<option value="Fredoka">Fredoka</option>
{/*<option value="BhuTukaExpandedOne">BhuTukaExpandedOne</option>*/}
</select>
</div>
{/* <div className="tab_inner_font_upload">
<div>
<img src={UploadImg} />
</div>
<div className="tab_inner_font_text">
<h6>Upload Custom Fonts</h6>
<p>Drag {"&"} drop or browse</p>
</div>
</div> */}
</section>
</>
)}
</div>
<div className="tab-inner-section tab-inner-section-preview ">
<div className="tab_inner_header">
<h1>Preview</h1>
<div>
<img
src={Angle}
alt=""
onClick={() => {
setSelectPreview(!selectPreview);
}}
/>
</div>
</div>
<div className={selectPreview ? 'tab-inner-preview-hidden' : 'tab-inner-preview'}>
{/* <h1>Preview {selectPreview}</h1> */}
{/* <div width="100%" height="100%">
<ProjectsPage />
</div> */}
<div style={{ width: '100%' }}>
<BrandingPage getShow={true} />
</div>
</div>
</div>
</div>
</Tab>
</Tabs>
<div className="tab-common-btns">
<div className="button-group button-group-tabs">
<button
type="button"
className="cancel mr-16"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
>
Cancel
</button>
<button
type="submit"
onClick={() => {
setFieldValue('tos_content', tosContentValue);
setFieldValue('privacy_policy_content', ppContentValue);
}}
>
{editMode ? 'Save ' : 'Save'} Organization
</button>
</div>
</div>
</form>
)}
</Formik>
<TermsModal
initialVal={tosContentValue}
show={show} // {props.show}
onHide={handleClose}
handleTermsEditorChange={handleTermsEditorChange}
/>
<PolicyModal
initialVal={ppContentValue}
show={ppShow} // {props.show}
onHide={ppHandleClose}
handlePolicyEditorChange={handlePolicyEditorChange}
/>
</div>
);
}
Example #21
| 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 #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: tasks.js From community-forum-frontend with GNU General Public License v3.0 | 4 votes |
|
render() {
return (
<div>
<Modal show={this.state.showModal} onHide={this.handleClose} centered>
<div className="modalbody">
<Modal.Body>
<Form>
<div className="formdetails">
<div className="forminsides">
<Form.Group controlId="Description">
<Form.Label>Description</Form.Label>
<Form.Control
as="textarea"
rows="3"
placeholder="Description"
onChange={(e) => {
this.handleChange("description", e);
}}
/>
</Form.Group>
<Form.Group controlId="TopicList">
<Form.Label>Topic</Form.Label>
<InputGroup>
<FormControl
placeholder={this.state.topicName}
aria-describedby="basic-addon2"
disabled="true"
/>
<DropdownButton
as={InputGroup.Append}
variant="outline-secondary"
title=""
id="input-group-dropdown-2"
>
{this.state.Topics.map((topic) => {
return (
<Dropdown.Item
eventKey={topic.topicName}
onSelect={() =>
this.handleSelect(
topic.topicName,
{
topic: topic.topicName,
id: topic._id,
},
"topics"
)
}
>
{topic.topicName}
</Dropdown.Item>
);
})}
</DropdownButton>
</InputGroup>
</Form.Group>
<Form.Group controlId="assigned">
<Form.Label>Assign To:</Form.Label>
<InputGroup>
<FormControl
placeholder={this.state.username}
aria-describedby="basic-addon2"
disabled="true"
/>
<DropdownButton
as={InputGroup.Append}
variant="outline-secondary"
title=""
id="input-group-dropdown-2"
>
{this.state.users.map((user) => {
return (
<Dropdown.Item
eventKey={user.username}
onSelect={() =>
this.handleSelect(
user.username,
{
username: user.username,
email: user.email,
id: user._id,
},
"users"
)
}
>
{user.username}
</Dropdown.Item>
);
})}
</DropdownButton>
</InputGroup>
</Form.Group>
<Form.Group controlId="setDate">
<Form.Label>Complete By: </Form.Label>
<Form.Control
type="date"
placeholder="Enter email"
onChange={(e) => this.handleChange("date", e)}
/>
</Form.Group>
</div>
</div>
<div className="cta-register">
<Button
variant="primary"
type="submit"
onClick={(e) => this.handleAddTask(e)}
>
Add Task
</Button>
</div>
</Form>
</Modal.Body>
</div>
</Modal>
<div className="ToDosHeading">
To-Do Tasks
<Button className="addbutton" onClick={this.handleTasksAdd}>
Add
</Button>
</div>
<div className="navTabs">
<Tabs defaultActiveKey="ongoing" id="uncontrolled-tab-example">
<Tab eventKey="ongoing" title="OnGoing" className="ongoingTab">
<Form>
{this.state.tasks.map((task) => {
return task.completed ? (
""
) : (
<div>
<Form.Group
controlId="formBasicCheckbox"
className="formCheckbox"
onChange={(e) =>
this.handleChangeTask("completed", e, task._id)
}
id={task.description}
>
<Form.Check type="checkbox" />
<div className="textTasks">
<div className="labelParra">{task.description}</div>
<div className="subparra">
{task.assignedBy.username}, {task.dueDate}.
</div>
</div>
<div className="icons">
<FiMoreVertical
size={20}
className="FiMoreVertical"
/>
<MdInfoOutline size={20} className="FiMoreVertical" />
</div>
</Form.Group>
</div>
);
})}
</Form>
</Tab>
<Tab
eventKey="completed"
title="Completed"
className="completedTab"
>
{this.state.tasks.map((task) => {
return task.completed ? (
<Form.Group
controlId="formBasicCheckbox"
className="formCheckbox"
onChange={(e) =>
this.handleChangeTask("notCompleted", e, task._id)
}
>
<Form.Check
defaultChecked="true"
type="checkbox"
label={
<div className="textTasks">
<div className="labelParra">
<s>{task.description}</s>
</div>
<div className="subparra">
{task.assignedBy.username}, {task.dueDate}.
</div>
</div>
}
/>
<div className="icons">
<FiMoreVertical size={20} className="FiMoreVertical" />
<MdInfoOutline size={20} className="FiMoreVertical" />
</div>
</Form.Group>
) : (
""
);
})}
</Tab>
</Tabs>
</div>
</div>
);
}
Example #24
| 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 #25
| 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 #26
| 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 #27
| Source File: index.js From plenty-interface with GNU General Public License v3.0 | 4 votes |
|
LiquidityNew = (props) => {
const { activeTab, tokenIn, setTokenIn, tokenOut, setTokenOut, setActiveTab } =
useLocationStateInLiquidity();
const [searchQuery, setSearchQuery] = useState('');
const [swapData, setSwapData] = useState({});
const [tokenType, setTokenType] = useState('tokenIn');
const [show, setShow] = useState(false);
const [slippage, setSlippage] = useState(0.5);
const [recepient, setRecepient] = useState('');
const [tokenContractInstances, setTokenContractInstances] = useState({});
const [showConfirmAddSupply, setShowConfirmAddSupply] = useState(false);
const [showConfirmRemoveSupply, setShowConfirmRemoveSupply] = useState(false);
const [showConfirmTransaction, setShowConfirmTransaction] = useState(false);
const [loaderMessage, setLoaderMessage] = useState({});
const [loaderInButton, setLoaderInButton] = useState(false);
const [loading, setLoading] = useState(false);
const [getTokenPrice, setGetTokenPrice] = useState({});
const [userBalances, setUserBalances] = useState({});
const location = useLocation();
const navigate = useNavigate();
const { pathname } = location;
const splitLocation = pathname.split('/');
const [searchParams] = useSearchParams();
const [isLiquidityPosition, setLiquidityPosition] = useState(false);
const [positionDetails, setPositionDetails] = useState({});
const [isPositionAvailable, setPositionAvailable] = useState(false);
const [balanceUpdate, setBalanceUpdate] = useState(false);
useEffect(async () => {
const isStable = isTokenPairStable(tokenIn.name, tokenOut.name);
const ress = await getLpTokenBalanceForPair(tokenIn.name, tokenOut.name, props.walletAddress);
setPositionAvailable(ress.isLiquidityAvailable);
if (ress.isLiquidityAvailable) {
let res;
if (isStable) {
if (CONFIG.AMM[CONFIG.NETWORK][tokenIn.name].DEX_PAIRS[tokenOut.name]?.type === 'xtz') {
res = await getLiquidityPositionDetailsStable(
tokenIn.name,
tokenOut.name,
props.walletAddress,
);
} else if (
CONFIG.AMM[CONFIG.NETWORK][tokenIn.name].DEX_PAIRS[tokenOut.name]?.type === 'veStableAMM'
) {
res = await getLiquidityPositionDetails(tokenIn.name, tokenOut.name, props.walletAddress);
}
} else {
res = await getLiquidityPositionDetails(tokenIn.name, tokenOut.name, props.walletAddress);
}
setPositionDetails(res);
}
}, [tokenIn, tokenOut, props]);
useEffect(() => {
setLoaderInButton(true);
getTokenPrices().then((tokenPrice) => {
setGetTokenPrice(tokenPrice);
});
}, []);
const activeKey = useMemo(() => {
if (location.pathname === '/liquidity/remove') {
return 'remove';
}
return 'add';
}, [location.pathname]);
useEffect(() => {
if (!location.pathname.includes('liquidityPositions')) {
setLiquidityPosition(false);
}
}, [searchParams]);
const handleClose = () => {
setShow(false);
setShowConfirmAddSupply(false);
setShowConfirmRemoveSupply(false);
setShowConfirmTransaction(false);
setSearchQuery('');
};
useEffect(() => {
const updateBalance = async () => {
if (props.walletAddress) {
setTokenContractInstances({});
const tzBTCName = 'tzBTC';
const balancePromises = [];
tokenIn.name === tzBTCName
? balancePromises.push(fetchtzBTCBalance(props.walletAddress))
: balancePromises.push(
config.AMM[config.NETWORK][tokenIn.name]?.DEX_PAIRS[tokenOut.name]?.type === 'xtz'
? getUserBalanceByRpcStable(tokenIn.name, props.walletAddress)
: getUserBalanceByRpc(tokenIn.name, props.walletAddress),
);
tokenOut.name === tzBTCName
? balancePromises.push(fetchtzBTCBalance(props.walletAddress))
: balancePromises.push(
config.AMM[config.NETWORK][tokenIn.name]?.DEX_PAIRS[tokenOut.name]?.type === 'xtz'
? getUserBalanceByRpcStable(tokenOut.name, props.walletAddress)
: getUserBalanceByRpc(tokenOut.name, props.walletAddress),
);
if (
config.AMM[config.NETWORK][tokenIn.name]?.DEX_PAIRS[tokenOut.name]?.type === 'xtz'
? config.STABLESWAP[config.NETWORK][tokenIn.name].DEX_PAIRS[tokenOut.name]
: config.AMM[config.NETWORK][tokenIn.name].DEX_PAIRS[tokenOut.name]
) {
const lpToken = isTokenPairStable(tokenIn.name, tokenOut.name)
? config.STABLESWAP[config.NETWORK][tokenIn.name].DEX_PAIRS[tokenOut.name]
.liquidityToken
: config.AMM[config.NETWORK][tokenIn.name].DEX_PAIRS[tokenOut.name].liquidityToken;
balancePromises.push(
config.AMM[config.NETWORK][tokenIn.name]?.DEX_PAIRS[tokenOut.name]?.type === 'xtz'
? getUserBalanceByRpcStable(lpToken, props.walletAddress)
: getUserBalanceByRpc(lpToken, 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 selectToken = (token) => {
setLoaderInButton(true);
setSwapData({});
if (tokenType === 'tokenIn') {
setTokenIn({
name: token.name,
image: token.image,
});
if (token.name === 'tez') {
setTokenOut({
name: 'ctez',
image: ctez,
});
} else if (token.name === 'EURL') {
setTokenOut({
name: 'agEUR.e',
image: ageure,
});
} else if (token.name === 'agEUR.e') {
setTokenOut({
name: 'EURL',
image: eurl,
});
}
} else {
setTokenOut({
name: token.name,
image: token.image,
});
}
handleClose();
};
useEffect(() => {
if (activeTab === 'liquidity') {
if (
Object.prototype.hasOwnProperty.call(tokenIn, 'name') &&
Object.prototype.hasOwnProperty.call(tokenOut, 'name')
) {
const pairExists = isTokenPairStable(tokenIn.name, tokenOut.name)
? !!config.STABLESWAP[config.NETWORK][tokenIn.name].DEX_PAIRS[tokenOut.name]
: !!config.AMM[config.NETWORK][tokenIn.name].DEX_PAIRS[tokenOut.name];
if (pairExists) {
if (config.AMM[config.NETWORK][tokenIn.name]?.DEX_PAIRS[tokenOut.name]?.type === 'xtz') {
loadSwapDataStable(tokenIn.name, tokenOut.name).then((data) => {
if (data.success) {
setSwapData(data);
setLoaderInButton(false);
}
});
} else if (
config.AMM[config.NETWORK][tokenIn.name]?.DEX_PAIRS[tokenOut.name]?.type ===
'veStableAMM'
) {
loadSwapDataGeneralStable(tokenIn.name, tokenOut.name).then((data) => {
if (data.success) {
setSwapData(data);
setLoaderInButton(false);
}
});
} else {
loadSwapData(tokenIn.name, tokenOut.name).then((data) => {
if (data.success) {
setSwapData(data);
setLoaderInButton(false);
}
});
}
}
}
}
}, [tokenIn, tokenOut, activeTab, splitLocation[1]]);
const handleTokenType = (type) => {
setBalanceUpdate(false);
setShow(true);
setTokenType(type);
setLoading(false);
};
const fetchUserWalletBalance = () => {
setLoaderInButton(true);
};
const handleLoaderMessage = (type, message) => {
setLoaderMessage({
type: type,
message: message,
});
setLoading(false);
};
const resetAllValues = () => {
setRecepient('');
setTokenType('tokenIn');
};
const changeLiquidityType = (tab) => {
const tokenAFromParam = searchParams.get('tokenA');
const tokenBFromParam = searchParams.get('tokenB');
navigate({
pathname: `/liquidity/${tab}`,
search: `?${createSearchParams({
...(tokenAFromParam ? { tokenA: tokenAFromParam } : {}),
...(tokenBFromParam ? { tokenB: tokenBFromParam } : {}),
})}`,
});
};
const redirectLiquidityPositions = (value) => {
setLiquidityPosition(value);
value ? setActiveTab('liquidityPositions') : setActiveTab('liquidity');
};
useEffect(() => {
const tokenAFromParam = searchParams.get('tokenA');
const tokenBFromParam = searchParams.get('tokenB');
if (tokenAFromParam !== tokenBFromParam) {
if (tokenAFromParam) {
liquidityTokens.map((token) => {
if (token.name === tokenAFromParam) {
setTokenIn({
name: tokenAFromParam,
image: token.image,
});
}
});
}
if (tokenBFromParam) {
liquidityTokens.map((token) => {
if (token.name === tokenBFromParam) {
setTokenOut({
name: tokenBFromParam,
image: token.image,
});
}
});
}
}
}, [searchParams]);
return (
<Container fluid className="removing-padding">
{props.walletAddress && (
<p
className="redirect-label-lp"
style={{ cursor: 'pointer' }}
onClick={() => redirectLiquidityPositions(!isLiquidityPosition)}
>
{isLiquidityPosition && (
<span className={clsx('material-icons', 'arrow-forward', 'mt-1', 'ml-0')}>
arrow_back_ios_icon
</span>
)}
{isLiquidityPosition ? 'Back' : 'View Liquidity Positions'}
{!isLiquidityPosition && (
<span className={clsx('material-icons', 'arrow-forward', 'mt-1')}>
arrow_forward_ios_icon
</span>
)}
</p>
)}
{isLiquidityPosition && <div className="liq-label">Position overview</div>}
{!isLiquidityPosition ? (
<Col
sm={8}
md={6}
className={clsx('liquidity-content-container', !props.walletAddress && 'liq-margin')}
>
<div className="">
<Tabs
activeKey={activeKey}
className="liq-container-tab"
onSelect={(e) => changeLiquidityType(e)}
mountOnEnter={true}
unmountOnExit={true}
>
<Tab eventKey="add" title="Add">
<AddLiquidity
walletAddress={props.walletAddress}
connecthWallet={props.connecthWallet}
tokenIn={tokenIn}
tokenOut={tokenOut}
handleTokenType={handleTokenType}
swapData={swapData}
userBalances={userBalances}
tokenContractInstances={tokenContractInstances}
getTokenPrice={getTokenPrice}
setSlippage={setSlippage}
setRecepient={setRecepient}
recepient={recepient}
slippage={slippage}
loading={loading}
setLoading={setLoading}
handleLoaderMessage={handleLoaderMessage}
loaderMessage={loaderMessage}
handleClose={handleClose}
showConfirmAddSupply={showConfirmAddSupply}
setShowConfirmAddSupply={setShowConfirmAddSupply}
showConfirmRemoveSupply={showConfirmRemoveSupply}
setShowConfirmRemoveSupply={setShowConfirmRemoveSupply}
setLoaderMessage={setLoaderMessage}
resetAllValues={resetAllValues}
fetchUserWalletBalance={fetchUserWalletBalance}
setTokenIn={setTokenIn}
setTokenOut={setTokenOut}
tokens={liquidityTokens}
loaderInButton={loaderInButton}
setLoaderInButton={setLoaderInButton}
setShowConfirmTransaction={setShowConfirmTransaction}
showConfirmTransaction={showConfirmTransaction}
positionDetails={positionDetails}
setPositionAvailable={setPositionAvailable}
isPositionAvailable={isPositionAvailable}
setPositionDetails={setPositionDetails}
theme={props.theme}
setBalanceUpdate={setBalanceUpdate}
balanceUpdate={balanceUpdate}
{...props}
/>
</Tab>
{/* {isPositionAvailable ? ( */}
<Tab eventKey="remove" title="Remove">
<RemoveLiquidity
theme={props.theme}
walletAddress={props.walletAddress}
connecthWallet={props.connecthWallet}
tokenIn={tokenIn}
tokenOut={tokenOut}
handleTokenType={handleTokenType}
swapData={swapData}
userBalances={userBalances}
tokenContractInstances={tokenContractInstances}
getTokenPrice={getTokenPrice}
setSlippage={setSlippage}
setRecepient={setRecepient}
recepient={recepient}
slippage={slippage}
loading={loading}
setLoading={setLoading}
handleLoaderMessage={handleLoaderMessage}
loaderMessage={loaderMessage}
handleClose={handleClose}
showConfirmAddSupply={showConfirmAddSupply}
setShowConfirmAddSupply={setShowConfirmAddSupply}
showConfirmRemoveSupply={showConfirmRemoveSupply}
setShowConfirmRemoveSupply={setShowConfirmRemoveSupply}
setLoaderMessage={setLoaderMessage}
resetAllValues={resetAllValues}
fetchUserWalletBalance={fetchUserWalletBalance}
setTokenIn={setTokenIn}
setTokenOut={setTokenOut}
tokens={liquidityTokens}
loaderInButton={loaderInButton}
setLoaderInButton={setLoaderInButton}
isStableSwap={isTokenPairStable(tokenIn.name, tokenOut.name)}
setShowConfirmTransaction={setShowConfirmTransaction}
showConfirmTransaction={showConfirmTransaction}
positionDetails={positionDetails}
setPositionAvailable={setPositionAvailable}
isPositionAvailable={isPositionAvailable}
setPositionDetails={setPositionDetails}
/>
</Tab>
{/* ) : null} */}
</Tabs>
<div className="settings-liq">
<SettingsLiq
slippage={slippage}
setSlippage={setSlippage}
walletAddress={props.walletAddress}
theme={props.theme}
/>
</div>
</div>
</Col>
) : (
<LiquidityPositions walletAddress={props.walletAddress} theme={props.theme} />
)}
<LiquidityModal
show={show}
activeTab={activeTab}
onHide={handleClose}
selectToken={selectToken}
tokens={liquidityTokens}
tokenIn={tokenIn}
tokenOut={tokenOut}
tokenType={tokenType}
searchQuery={searchQuery}
setSearchQuery={setSearchQuery}
/>
</Container>
);
}
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 `
}
/>
</>
);
}
Example #29
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
SearchResults = (props) => {
const { match, searchParams, hasMoreResults, projects, backToSearch, previousPage, nextPage, search } = props;
const [dataActivity, setDataActivity] = useState(null);
const dispatch = useDispatch();
// const Playlist = async () => {
// var storeData = [];
// for (var i = 0; i < projects?.length; i++) {
// const result = await dispatch(showSearchProjectActionPlaylist(projects[i]));
// storeData.push(result.project.playlists?.map((data) => data?.activities));
// }
// setDataActivity(storeData);
// };
// Init
useEffect(() => {
search(searchParams);
}, [match, searchParams]);
return (
<div className="results">
{/*<div className="row my-4">
<div className="col">
<h4 className="search-heading">Search Results</h4>
</div>
<div className="col text-right">
<button type="button" className="btn back-action" style={{ color: 'rgb(8, 72, 146) ' }} onClick={backToSearch}>
<FontAwesomeIcon icon="chevron-left" className="action-icon mr-2" />
Back to Search
</button>
</div>
</div>*/}
<SearchForm />
{projects !== null && projects.length === 0 && (
<div className="row">
<div className="col">
<Alert variant="warning">No results found.</Alert>
</div>
</div>
)}
<Tabs defaultActiveKey="project" id="uncontrolled-tab-example">
<Tab eventKey="project" title="Project">
{projects ? (
<>
{projects !== null && projects.length > 0 && projects.map((project) => <Project project={project} key={project.id} />)}
<div className="row">
<div className="col text-left">
{!!searchParams.from && searchParams.from !== 0 && (
<button type="button" className="btn btn-primary pagination-buttons" onClick={previousPage}>
Previous
</button>
)}
</div>
<div className="col text-right">
{hasMoreResults && (
<button type="button" className="btn btn-primary pagination-buttons" onClick={nextPage}>
Next
</button>
)}
</div>
</div>
</>
) : (
<Alert variant="warning">loading ...</Alert>
)}
</Tab>
{/* <Tab eventKey="activities" title="Activities">
{dataActivity ? (
dataActivity?.length ? (
dataActivity.map((data) =>
data.map((data1) =>
data1.map((data2) => (
<div className="Playlists-container">
<div className="main-flex">
<div className="img-cont">
<div className="Playlists-img">
<img src={data2.thumb_url} />
</div>
<h6 className="Playlists-title">{data2.title}</h6>
</div>
<div className="ext-right">
<Dropdown>
<Dropdown.Toggle className="actions-button">
<FontAwesomeIcon icon="ellipsis-v" style={{ color: 'rgb(8, 72, 146)' }} />
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item to="#" eventKey={data2.id} onSelect={() => dispatch(setPreviewActivityAction(data2))}>
<FontAwesomeIcon icon="eye" className="action-icon" />
Preview
</Dropdown.Item>
<Dropdown.Item
to="#"
eventKey={data2.id}
onSelect={() => {
const finalUrl = `${decodeURIComponent(match.params.redirectUrl)}&title=${encodeURIComponent(data2.title)}&entity=activity&id=${data2.id}`;
Swal.fire({
icon: 'warning',
html: `You have selected <strong>Activity: ${data.title}</strong><br>Do you want to continue ?`,
showCancelButton: true,
confirmButtonColor: '#084892',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, add it',
}).then((result) => {
if (result.value) {
window.location.href = finalUrl;
}
});
}}
>
<FontAwesomeIcon icon="plus" className="action-icon" />
Add to Course
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</div>
</div>
))
)
)
) : (
<Alert variant="warning">No results found.</Alert>
)
) : (
<Alert variant="warning">loading ...</Alert>
)}
</Tab> */}
</Tabs>
</div>
);
}
