Config With Seacrh

This commit is contained in:
elforjani3
2020-04-11 15:00:22 +02:00
parent e8079dbde3
commit 940418c4e0
12 changed files with 284 additions and 149 deletions

View File

@@ -1,6 +1,6 @@
import React from 'react';
import {connect} from 'react-redux';
import {useHistory} from 'react-router';
import { connect } from 'react-redux';
import { useHistory } from 'react-router';
import {
Navbar,
NavbarGroup,
@@ -14,59 +14,79 @@ import {
import DashboardBreadcrumbs from 'components/Dashboard/DashboardBreadcrumbs';
import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
import Icon from 'components/Icon';
import Search from 'containers/Dashboard/GeneralSearch/Search';
function DashboardTopbar({
pageTitle,
pageSubtitle,
editViewId,
}) {
function DashboardTopbar({ pageTitle, pageSubtitle, editViewId }) {
const history = useHistory();
const handlerClickEditView = () => {
history.push(`/dashboard/custom_views/${editViewId}/edit`)
}
history.push(`/dashboard/custom_views/${editViewId}/edit`);
};
const maybleRenderPageSubtitle = pageSubtitle && (<h3>{ pageSubtitle }</h3>);
const maybeRenderEditViewBtn = (pageSubtitle && editViewId) && (
const maybleRenderPageSubtitle = pageSubtitle && <h3>{pageSubtitle}</h3>;
const maybeRenderEditViewBtn = pageSubtitle && editViewId && (
<Button
className={Classes.MINIMAL + ' button--view-edit'}
icon={<Icon icon="pen" iconSize={13} />}
onClick={handlerClickEditView} />
icon={<Icon icon='pen' iconSize={13} />}
onClick={handlerClickEditView}
/>
);
return (
<div class="dashboard__topbar">
<div class="dashboard__topbar-left">
<div class="dashboard__topbar-sidebar-toggle">
<div class='dashboard__topbar'>
<div class='dashboard__topbar-left'>
<div class='dashboard__topbar-sidebar-toggle'>
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" role="img" focusable="false">
<svg
xmlns='http://www.w3.org/2000/svg'
width='20'
height='20'
viewBox='0 0 20 20'
role='img'
focusable='false'
>
<title>Menu</title>
<path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="5" stroke-width="2" d="M4 7h15M4 12h15M4 17h15"></path>
<path
stroke='currentColor'
stroke-linecap='round'
stroke-miterlimit='5'
stroke-width='2'
d='M4 7h15M4 12h15M4 17h15'
></path>
</svg>
</Button>
</div>
<div class="dashboard__title">
<h1>{ pageTitle }</h1>
<div class='dashboard__title'>
<h1>{pageTitle}</h1>
{maybleRenderPageSubtitle}
{maybeRenderEditViewBtn}
</div>
<div class="dashboard__breadcrumbs">
<div class='dashboard__breadcrumbs'>
<DashboardBreadcrumbs />
</div>
</div>
<div class="dashboard__topbar-right">
<Navbar class="dashboard__topbar-navbar">
<div class='dashboard__topbar-right'>
<Navbar class='dashboard__topbar-navbar'>
<NavbarGroup>
<Button className={Classes.MINIMAL} icon="home" text="Search" />
<Button className={Classes.MINIMAL} icon="document" text="Filters" />
<Button className={Classes.MINIMAL} icon="document" text="Add order" />
<Button className={Classes.MINIMAL} icon="document" text="More" />
{/* <Button className={Classes.MINIMAL} icon="home" text="Search" /> */}
<Search className />
<Button
className={Classes.MINIMAL}
icon='document'
text='Filters'
/>
<Button
className={Classes.MINIMAL}
icon='document'
text='Add order'
/>
<Button className={Classes.MINIMAL} icon='document' text='More' />
</NavbarGroup>
</Navbar>
<div class="dashboard__topbar-user">
<div class='dashboard__topbar-user'>
<DashboardTopbarUser />
</div>
</div>
@@ -77,7 +97,7 @@ function DashboardTopbar({
const mapStateToProps = (state) => ({
pageTitle: state.dashboard.pageTitle,
pageSubtitle: state.dashboard.pageSubtitle,
editViewId: state.dashboard.topbarEditViewId,
editViewId: state.dashboard.topbarEditViewId,
});
export default connect(mapStateToProps)(DashboardTopbar);
export default connect(mapStateToProps)(DashboardTopbar);