Skip to content

Add switch for layout change option #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tpardeshi wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add switch for layout change option #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab410be
Add switch for layout change option
Mar 17, 2021
888bdf5
Remove errors/warnings shown in console
Jun 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 11 additions & 12 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,25 @@ import { Route, Switch, BrowserRouter } from "react-router-dom";
import "@patternfly/react-core/dist/styles/base.css";
import { PageHeader, Page } from "@patternfly/react-core";
import React from "react";
import Products from "./Screens/Products"
import Products from "./Screens/Products";
import Versions from "./Screens/Versions";

export default function PageLayoutSimpleNav() {
const logoProps = {
href: "https://github.com/lingostack",
target: "_blank",
};
const Header = (
<PageHeader logo={"LingoQA Dashboard"} logoProps={logoProps} />
);
return (
<BrowserRouter>
<Switch>
<Page
header={<PageHeader logo={"LingoQA Dashboard"} logoProps={logoProps} />}>
<Page header={Header}>
<BrowserRouter>
<Switch>
<Route exact path="/" component={Products} />
<Route
path="/products/:productid/screenshots"
component={Versions}
/>
</Page>
</Switch>
</BrowserRouter>
<Route path="/products/:productid/screenshots" component={Versions} />
</Switch>
</BrowserRouter>
</Page>
);
}
155 changes: 99 additions & 56 deletions src/Components/Paginate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,36 +15,36 @@ export default function Paginate(props) {

//Set the page
const onSetPage = (_event, pageNumber) => {
setPage(pageNumber)
setPage(pageNumber);
};

//Items to be displayed per page
const onPerPageSelect = (_event, perPage) => {
setPerPage(perPage)
setPerPage(perPage);
};

//Next set of Items
//Next set of Items
const onNextClick = (_event, page) => {
setPage(page)
setOffset((page - 1) * (perPage))
setPage(page);
setOffset((page - 1) * perPage);
};

//Previous set of Items
const onPreviousClick = (_event, page) => {
setPage(page)
setOffset((page - 1) * (perPage));
setPage(page);
setOffset((page - 1) * perPage);
};

//First set of Items
const onFirstClick = (_event, page) => {
setPage(page)
setOffset(0)
setPage(page);
setOffset(0);
};

//Last set of items
const onLastClick = (_event, page) => {
setPage(page)
setOffset((page - 1) * (perPage));
setPage(page);
setOffset((page - 1) * perPage);
};

React.useEffect(() => {
Expand All @@ -57,16 +57,29 @@ export default function Paginate(props) {
React.useEffect(() => {
const SetImages = () => {
if (props.screenshotsEN.length !== 0) {
const elementsLeft = props.screenshotsEN[0].images.slice(offset, (offset + perPage));
setElementLeft(elementsLeft)
const elementsLeft = props.screenshotsEN[0].images.slice(
offset,
offset + perPage
);
setElementLeft(elementsLeft);
}
if (props.screenshotsOther.length !== 0) {
const elementsRight = props.screenshotsOther[0].images.slice(offset, (offset + perPage));
setElementRight(elementsRight)
const elementsRight = props.screenshotsOther[0].images.slice(
offset,
offset + perPage
);
setElementRight(elementsRight);
}
}
};
SetImages();
}, [offset, perPage, screenshotsEN, screenshotsOther])
}, [
offset,
perPage,
screenshotsEN,
screenshotsOther,
props.screenshotsEN,
props.screenshotsOther,
]);

const paginateEN = () => (
<>
Expand Down Expand Up @@ -102,7 +115,7 @@ export default function Paginate(props) {
onLastClick={onLastClick}
/>
</>
)
);

const paginateOther = () => (
<>
Expand All @@ -119,34 +132,62 @@ export default function Paginate(props) {
onFirstClick={onFirstClick}
onLastClick={onLastClick}
/>
{/* For screenshots display side by side */}
<div id="image-compare">
<Split gutter="md">
<div>
{elementsLeft.length &&
<SplitItem>
<div>
{elementsLeft.map((image, index) => (
<img src={image} alt="" key={index} className="image" />
))}
</div>
</SplitItem>

}
</div>
<div>
{elementsRight.length &&
<SplitItem>
<div>
{elementsRight.map((image, index) => (
<img src={image} alt="" key={index} className="image" />
))}
</div>
</SplitItem>
}
</div>
</Split>
</div>
{props.changeLayout === true ? (
// {/* For screenshots display side by side */}
<div id="image-compare">
<Split gutter="md">
<div>
{elementsLeft.length && (
<SplitItem>
<div>
{elementsLeft.map((image, index) => (
<img
src={image}
alt=""
key={index}
id={index}
className="image_EN"
/>
))}
</div>
</SplitItem>
)}
</div>
<div>
{elementsRight.length && (
<SplitItem>
<div>
{elementsRight.map((image, index) => (
<img
src={image}
alt=""
key={index}
id={index}
className="image_other"
/>
))}
</div>
</SplitItem>
)}
</div>
</Split>
</div>
) : (
// {/* // For screenshots display one by one */}
<div>
{elementsLeft.map((image, index) => (
<div>
<img src={image} alt="" key={index} className="image1" />
<img
src={elementsRight[index]}
alt=""
key={index}
className="image1"
/>
</div>
))}
</div>
)}
<Pagination
widgetId="pagination-options-menu-bottom"
itemCount={itemCount}
Expand All @@ -161,21 +202,23 @@ export default function Paginate(props) {
onLastClick={onLastClick}
/>
</>
)
);

if (props.screenshotsEN.length === 0) {
return <SimpleEmptyState />;
}
else if ((typeof itemCount !== "undefined") && (props.screenshotsOther.length === 0)) {
} else if (
typeof itemCount !== "undefined" &&
props.screenshotsOther.length === 0
) {
return <div className="mb-4">{paginateEN()}</div>;
}
else if ((typeof itemCount !== "undefined") && (props.screenshotsOther[0].id === props.screenshotsEN[0].id)) {
} else if (
typeof itemCount !== "undefined" &&
props.screenshotsOther[0].id === props.screenshotsEN[0].id
) {
return <div className="mb-4">{paginateEN()}</div>;
}
else {
} else {
if (typeof itemCount !== "undefined")
return <div className="mb-4">{paginateOther()}</div>
else
return null
return <div className="mb-4">{paginateOther()}</div>;
else return null;
}
}
60 changes: 51 additions & 9 deletions src/Components/PaginateForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,24 @@ import {
FormSelectOption,
Button,
DataToolbarContent,
DataToolbarItem
DataToolbarItem,
Switch,
} from "@patternfly/react-core";

export default function PaginateForm(props) {
const [selectProductsVersion, setSelectProductsVersion] = useState("");
const [selectLocales, setSelectLocales] = useState("");
const [isChecked, setIsChecked] = useState(false);

function handleChange(isChecked) {
setIsChecked(isChecked);
if (isChecked === true) {
props.handleLayout("Horizontal");
} else {
props.handleLayout("Vertical");
}
}

return (
<>
<Form onSubmit={props.handleSubmit}>
Expand All @@ -20,11 +32,19 @@ export default function PaginateForm(props) {
</DataToolbarItem>
<DataToolbarItem>
<FormSelect
value={selectProductsVersion ? selectProductsVersion : props.selectProductsVersion}
onChange={(e, event) => (props.handleVersionChange(e, event), setSelectProductsVersion(e, event))}
value={
selectProductsVersion
? selectProductsVersion
: props.selectProductsVersion
}
onChange={(e, event) => {
props.handleVersionChange(e, event);
setSelectProductsVersion(e, event);
}}
aria-label="Version"
id="version"
name="version">
name="version"
>
<option>Select</option>
{props.productsVersion.map((option, index) => (
<FormSelectOption
Expand All @@ -37,14 +57,18 @@ export default function PaginateForm(props) {
</DataToolbarItem>
<DataToolbarItem variant="label" id="locale">
Select a Locale
</DataToolbarItem>
</DataToolbarItem>
<DataToolbarItem>
<FormSelect
value={selectLocales ? selectLocales : props.selectLocales}
onChange={(e, event) => (props.handleLocaleChange(e, event), setSelectLocales(e, event))}
onChange={(e, event) => {
props.handleLocaleChange(e, event);
setSelectLocales(e, event);
}}
aria-label="Locale"
id="locale"
name="locale">
name="locale"
>
<option>Select</option>
{props.locales.map((option, index) => (
<FormSelectOption
Expand All @@ -56,10 +80,28 @@ export default function PaginateForm(props) {
</FormSelect>
</DataToolbarItem>
<DataToolbarItem>
<Button type="submit" value="Submit">Submit</Button>
<Button type="submit" value="Submit">
Submit
</Button>
</DataToolbarItem>
<DataToolbarItem>
<Switch
id="simple-switch"
label="Two Column Layout on"
labelOff="Two Column Layout off"
className="layout"
isChecked={isChecked}
onChange={handleChange}
isDisabled={
props.selectLocales === "3" ||
props.screenshotsOther.length === 0
? true
: false
}
/>
</DataToolbarItem>
</DataToolbarContent>
</Form>
</>
)
);
}
Loading