diff --git a/src/App.js b/src/App.js index 52ceb37..52063f4 100644 --- a/src/App.js +++ b/src/App.js @@ -2,7 +2,7 @@ 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() { @@ -10,18 +10,17 @@ export default function PageLayoutSimpleNav() { href: "https://github.com/lingostack", target: "_blank", }; + const Header = ( + + ); return ( - - - }> + + + - - - - + + + + ); } diff --git a/src/Components/Paginate.js b/src/Components/Paginate.js index 54c0248..b038aaa 100644 --- a/src/Components/Paginate.js +++ b/src/Components/Paginate.js @@ -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(() => { @@ -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 = () => ( <> @@ -102,7 +115,7 @@ export default function Paginate(props) { onLastClick={onLastClick} /> - ) + ); const paginateOther = () => ( <> @@ -119,34 +132,62 @@ export default function Paginate(props) { onFirstClick={onFirstClick} onLastClick={onLastClick} /> - {/* For screenshots display side by side */} -
- -
- {elementsLeft.length && - -
- {elementsLeft.map((image, index) => ( - - ))} -
- - - } -
-
- {elementsRight.length && - -
- {elementsRight.map((image, index) => ( - - ))} -
- - } -
- -
+ {props.changeLayout === true ? ( + // {/* For screenshots display side by side */} +
+ +
+ {elementsLeft.length && ( + +
+ {elementsLeft.map((image, index) => ( + + ))} +
+ + )} +
+
+ {elementsRight.length && ( + +
+ {elementsRight.map((image, index) => ( + + ))} +
+ + )} +
+ +
+ ) : ( + // {/* // For screenshots display one by one */} +
+ {elementsLeft.map((image, index) => ( +
+ + +
+ ))} +
+ )} - ) + ); if (props.screenshotsEN.length === 0) { return ; - } - else if ((typeof itemCount !== "undefined") && (props.screenshotsOther.length === 0)) { + } else if ( + typeof itemCount !== "undefined" && + props.screenshotsOther.length === 0 + ) { return
{paginateEN()}
; - } - 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
{paginateEN()}
; - } - else { + } else { if (typeof itemCount !== "undefined") - return
{paginateOther()}
- else - return null + return
{paginateOther()}
; + else return null; } } diff --git a/src/Components/PaginateForm.js b/src/Components/PaginateForm.js index 72b3ffb..4c44077 100644 --- a/src/Components/PaginateForm.js +++ b/src/Components/PaginateForm.js @@ -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 ( <>
@@ -20,11 +32,19 @@ export default function PaginateForm(props) { (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" + > {props.productsVersion.map((option, index) => ( Select a Locale - + (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" + > {props.locales.map((option, index) => ( - + + + +
- ) + ); } diff --git a/src/Components/SimpleForm.js b/src/Components/SimpleForm.js index c5242e6..52651b0 100644 --- a/src/Components/SimpleForm.js +++ b/src/Components/SimpleForm.js @@ -1,4 +1,3 @@ - import React, { useState } from "react"; import { Form, @@ -9,7 +8,7 @@ import { Button, CardBody, Card, - Bullseye + Bullseye, } from "@patternfly/react-core"; import SimpleEmptyState from "./SimpleEmptyState"; @@ -24,11 +23,19 @@ export default function SimpleForm(props) {
(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" + > {props.productsVersion.map((option, index) => ( - + (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" + > {props.locales.map((option, index) => ( - ) + ); } diff --git a/src/Screens/Versions.js b/src/Screens/Versions.js index 8a89ff4..462736e 100644 --- a/src/Screens/Versions.js +++ b/src/Screens/Versions.js @@ -1,7 +1,7 @@ import React, { useState } from "react"; import axios from "axios"; import BASE_URL from "../API/BASE_URL"; -import Paginate from "../Components/Paginate" +import Paginate from "../Components/Paginate"; import Breadcrumbs from "../Components/Breadcrumbs"; import { useHistory } from "react-router"; import constant from "../Constants/EnglishScreens.json"; @@ -10,13 +10,13 @@ import PaginateForm from "../Components/PaginateForm"; import { PageSection, PageSectionVariants } from "@patternfly/react-core"; export default function Versions(props) { - const [elementsRight, setElementsRight] = useState([]); - const [elementsLeft, setElementsLeft] = useState([]); - const [elements, setElements] = useState([]); - const [offset, setOffset] = useState(0); - const [currentPage, setCurrentPage] = useState(0); - const [page, setPage] = useState(1); - const [perPage, setPerPage] = useState(10); + const [elementsRight] = useState([]); + const [elementsLeft] = useState([]); + const [elements] = useState([]); + const [offset] = useState(0); + const [currentPage] = useState(0); + const [page] = useState(1); + const [perPage] = useState(10); const [productsVersion, setProductsVersion] = useState([]); const [locales, setLocales] = useState([]); const [selectProductsVersion, setSelectProductsVersion] = useState(""); @@ -25,6 +25,7 @@ export default function Versions(props) { const [screenshotsEN, setScreenshotsEN] = useState([]); const [itemCount, setItemCount] = useState(); const [previousProductId] = useState(props.match.params.productid); + const [changeLayout, setChangeLayout] = useState(); let history = useHistory(); function handleDropdownChangeVersion(e) { @@ -32,109 +33,131 @@ export default function Versions(props) { } function handleDropdownChangeLocale(e) { - setSelectLocales(e) + setSelectLocales(e); } //To get Versions and Locales of selected Product React.useEffect(() => { const fetchProductsVersionData = async () => { - const productsVersionData = await axios(`${BASE_URL}/products/${previousProductId}/product_versions`).catch(e => { console.error(e) }); + const productsVersionData = await axios( + `${BASE_URL}/products/${previousProductId}/product_versions` + ).catch((e) => { + console.error(e); + }); - const LocalesData = await axios(`${BASE_URL}/locales`).catch(e => { console.error(e) }); + const LocalesData = await axios(`${BASE_URL}/locales`).catch((e) => { + console.error(e); + }); //Return to Products if no version for selected Product is available if (productsVersionData.data.length !== 0) { setProductsVersion(productsVersionData.data); - setLocales(LocalesData.data) - } - else { - alert(" No Versions available for selected Product. Please select other Product"); + setLocales(LocalesData.data); + } else { + alert( + " No Versions available for selected Product. Please select other Product" + ); history.push({ - pathname: "/" - }) + pathname: "/", + }); } }; fetchProductsVersionData(); - }, [previousProductId]); + }, [previousProductId, history]); // To get selected Version and Locale to get screenshots const onFormSubmit = async (event) => { event.preventDefault(); - let error; try { const screenshotsData = await axios(`${BASE_URL}/screenshots`, { params: { product_version_id: selectProductsVersion, - locale_id: selectLocales + locale_id: selectLocales, }, - }) + }); const screenshotsENData = await axios(`${BASE_URL}/screenshots`, { params: { product_version_id: selectProductsVersion, locale_id: constant.englishLocaleId, }, - }) + }); if (!screenshotsENData.data.length) { - alert("The selected Version have no English Screenshots") - } - else { + alert("The selected Version have no English Screenshots"); + } else { setScreenshotsOther(screenshotsData.data); setScreenshotsEN(screenshotsENData.data); setItemCount(screenshotsENData.data[0].images.length); } + } catch (err) { + return err; } - catch (err) { - error = err; + }; + + const onHandleLayout = async (name) => { + if (name === "Horizontal") { + setChangeLayout(true); + } else { + if (name === "Vertical") setChangeLayout(false); } - } + }; + return ( <> - {locales && productsVersion && + {locales && + productsVersion && ((screenshotsOther && screenshotsOther.length !== 0) || - (screenshotsEN && screenshotsEN.length !== 0)) && - ( + (screenshotsEN && screenshotsEN.length !== 0)) && ( handleDropdownChangeVersion(e, event)} - handleLocaleChange={(e, event) => handleDropdownChangeLocale(e, event)} + screenshotsOther={screenshotsOther} + handleVersionChange={(e, event) => + handleDropdownChangeVersion(e, event) + } + handleLocaleChange={(e, event) => + handleDropdownChangeLocale(e, event) + } handleSubmit={onFormSubmit} + handleLayout={onHandleLayout} /> )} {(screenshotsOther && screenshotsOther.length !== 0) || - (screenshotsEN && screenshotsEN.length !== 0) ? - ( - + ) : ( + locales && + productsVersion && ( + + handleDropdownChangeVersion(e, event) + } + handleLocaleChange={(e, event) => + handleDropdownChangeLocale(e, event) + } + handleSubmit={onFormSubmit} /> - ) : - ( - locales && productsVersion && - ( - handleDropdownChangeVersion(e, event)} - handleLocaleChange={(e, event) => handleDropdownChangeLocale(e, event)} - handleSubmit={onFormSubmit} - /> - )) - } + ) + )} ); diff --git a/src/index.css b/src/index.css index 96d2dd3..140f87a 100644 --- a/src/index.css +++ b/src/index.css @@ -16,3 +16,10 @@ margin-left: 20%; margin-right: 20%; } +img:hover { + box-shadow: 0 0 4px 2px black; +} + +.layout { + left: 95vh; +} diff --git a/switch_off.png b/switch_off.png new file mode 100644 index 0000000..26237b9 Binary files /dev/null and b/switch_off.png differ diff --git a/switch_on.png b/switch_on.png new file mode 100644 index 0000000..8b3ad61 Binary files /dev/null and b/switch_on.png differ