Skip to content
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

65vp landing page trademark search data #78

Merged
merged 3 commits into from
Apr 28, 2021
Merged

65vp landing page trademark search data #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5a0d5fb
SearchResult Table get rowIndex onClick; #65
veeepi Apr 28, 2021
8f156aa
SearchResults, toggle Details or List; #77
veeepi Apr 28, 2021
0d602f9
Updated README; added link to Netlify deploy; #10
veeepi Apr 28, 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
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

# Checkmarks

[(Netlify Deployment)](https://gracious-jepsen-1b653c.netlify.app)

An industry project <strong>by:</strong> Tilman, Vlad, Fatma, Karen, Kalvin

<!-- <strong>Live Link: </strong> here -->
Expand Down
149 changes: 149 additions & 0 deletions src/components/LandingPage/ResultDetail.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
import React, { useState, useEffect } from 'react';
import {
Box,
Button,
Card,
Fade,
IconButton,
Paper,
TableCell,
Typography,
} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import { checkmarksTheme } from '../../styles/Themes';
import { AutoSizer, Column, Table } from 'react-virtualized';

export default function ResultDetail({ data, setSelectedRow }) {
const classes = detailStyles();

console.log(data);
return (
<Card className={classes.container}>
<Button
className={classes.button}
onClick={() => setSelectedRow(null)}
>
Back to List View
</Button>
<Box className={classes.split}>
{(data.imageUrls || true) && (
<Box className={classes.image}>
<Typography>{'image'}</Typography>
</Box>
)}
<Box className={classes.details}>
<Typography className={classes.title}>
{'Tradenark title: ' + data.title}
</Typography>
<Typography className={classes.info}>
{'Type: ' + data.tmType}
</Typography>
<Typography className={classes.info}>
{'Status: ' + data.statusDescEn}
</Typography>

<Typography className={classes.info}>
{'File date: ' + data.fileDateFormatted}
</Typography>
<Typography className={classes.info}>
{'Registration date: ' + data.regDate}
</Typography>
<Typography className={classes.info}>
{'Renew date: ' + data.intrnlRenewDate}
</Typography>
<Typography className={classes.info}>
{'Owner: ' + data.owner}
</Typography>
</Box>
</Box>
<Box className={classes.details}>
<Typography className={classes.info}>{'lorem'}</Typography>
<Box className={classes.niceClasses}>
<Typography className={classes.info}>
{'NICE Classes: '}
</Typography>
{data.niceClasses.map((item, index) => {
return (
<Typography
className={classes.niceClass}
key={index}
>
{`${item}${
data.niceClasses.length === index + 1
? ''
: ', '
}`}
</Typography>
);
})}
</Box>
<Box className={classes.niceClasses}>
<Typography className={classes.info}>
{'Application Numbers: '}
</Typography>
{data.applicationNumberL.map((item, index) => {
return (
<Typography
className={classes.niceClass}
key={index}
>
{`${item}${
data.applicationNumberL.length === index + 1
? ''
: ', '
}`}
</Typography>
);
})}
</Box>
</Box>
</Card>
);
}

const detailStyles = makeStyles(() => ({
container: {
backgroundColor: checkmarksTheme.bgDrawer,
height: '100%',
width: '100%',
},
split: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
margin: '1%',
},
image: {
backgroundColor: 'gray',
margin: '1%',
height: '150px',
width: '200px',
},
info: {
fontSize: '12px',
},
niceClasses: {
display: 'flex',
flexDirection: 'row',
// justifyContent: 'space-between',
},
niceClass: {
marginRight: '4px',
},
title: {
fontSize: '14px',
fontWeight: 'bold',
},
button: {
width: '100%',
backgroundColor: checkmarksTheme.buttonPrimary,
'&:hover': {
background: checkmarksTheme.hoverSoft,
},
border: `0.6px solid ${checkmarksTheme.buttonTextSecondary}`,
borderRadius: '7px 7px 0 0',
// borderRadius: '25px',
color: checkmarksTheme.buttonTextPrimary,
padding: '5px 0',
},
}));
165 changes: 95 additions & 70 deletions src/components/LandingPage/SearchResults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { checkmarksTheme } from '../../styles/Themes';
import {
Button,
Card,
Fade,
IconButton,
Paper,
TableCell,
Typography,
} from '@material-ui/core';
import { AutoSizer, Column, Table } from 'react-virtualized';
import { withStyles } from '@material-ui/core/styles';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
import { AutoSizer, Column, Table } from 'react-virtualized';
import ResultDetail from './ResultDetail';

const styles = (theme) => ({
flexContainer: {
Expand Down Expand Up @@ -64,17 +67,20 @@ class MuiVirtualizedTable extends React.PureComponent {

getRowClassName = ({ index }) => {
const { classes, onRowClick } = this.props;

// console.log('onRowClick: ', onRowClick);
return clsx(classes.tableRow, classes.flexContainer, {
[classes.tableRowHover]: index !== -1 && onRowClick != null,
});
};

cellRenderer = ({ cellData, columnIndex }) => {
cellRenderer = ({ cellData, columnIndex, rowIndex }) => {
// ,onClick
const { columns, classes, rowHeight, onRowClick } = this.props;
return (
<Fade in={true} exit={true} timeout={1000}>
<TableCell
// onClick={() => console.log(rowIndex)}
// onRowClick={(e) => console.log(e.target)} // ADDED
component="div"
className={clsx(classes.tableCell, classes.flexContainer, {
[classes.noClick]: onRowClick == null,
Expand Down Expand Up @@ -133,10 +139,12 @@ class MuiVirtualizedTable extends React.PureComponent {
headerHeight,
...tableProps
} = this.props;
// console.log('tableProps:', tableProps);
return (
<AutoSizer>
{({ height, width }) => (
<Table
// onRowClick={() => console.log(this)} // ADDED
height={height}
width={width}
rowHeight={rowHeight}
Expand Down Expand Up @@ -192,52 +200,17 @@ const VirtualizedTable = withStyles(styles)(MuiVirtualizedTable);
// ---

export default function SearchResults({ data }) {
// Sample DATA
// const data = [
// ['Frozen yoghurt', 159, 6.0, 24, 4.0],
// ['Ice cream sandwich', 237, 9.0, 37, 4.3],
// ['Eclair', 262, 16.0, 24, 6.0],
// ['Cupcake', 305, 3.7, 67, 4.3],
// ['Gingerbread', 356, 16.0, 49, 3.9],
// ];
const [detailedView, setDetailedView] = useState(false);
const [selectedRow, setSelectedRow] = useState(null);
// useEffect(() => {

// function createData(id, dessert, calories, fat, carbs, protein) {
// return { id, dessert, calories, fat, carbs, protein };
// }
// })

// console.log('data prop: ', data);
// console.log('item: ', data[0]);
// FORMATTER
// let formattedData = [];
// const formatData = (data) => {
// data.forEach((trademark) => {
// let formattedDate = trademark.fileDate.substring(0, 10);
// // console.log('formattedDate: ', formattedDate);
// formattedData.push({
// ...trademark,
// fileDate: formattedDate,
// });
// // return {...data, fileDate: }
// });
// const rowClick = (e) => {
// console.log('clicked', e.target);
// };
// formattedData = formatData(data);
// console.log('data: ', data);
// console.log('formattedData: ', formattedData);
// function createData(id, dessert, calories, fat, carbs, protein) {
// return { id, dessert, calories, fat, carbs, protein };
// }

// const rows = []; // array of objects
// // NUMBER OF ROWS Input
// for (let i = 0; i < 3; i += 1) {
// const randomSelection = data[Math.floor(Math.random() * data.length)];
// rows.push(createData(i, ...randomSelection)); // randomSelection or data
// }

// console.log("rows (default): ", rows)

// const [detailedView, setDetailedView] = useState(false);

console.log(selectedRow);
return (
<Paper
style={{
Expand All @@ -246,30 +219,82 @@ export default function SearchResults({ data }) {
width: '100%',
}}
>
<VirtualizedTable
// style={{ height: 400, width: '100%' }}
rowCount={data.length} // row or data
rowGetter={({ index }) => data[index]} // row or data
columns={[
{
width: (window.innerWidth * 1) / 2,
label: 'Title',
dataKey: 'title',
},
{
width: (window.innerWidth * 1) / 4,
label: 'Status',
dataKey: 'statusDescEn',
// numeric: true,
},
{
width: (window.innerWidth * 1) / 4,
label: 'File Date (yyyy-mm-dd)',
dataKey: 'fileDateFormatted',
// numeric: true,
},
]}
/>
{selectedRow === null ? (
<VirtualizedTable
// style={{ height: 400, width: '100%' }}
rowCount={data.length} // row or data
rowGetter={({ index }) => data[index]} // row or data
onRowClick={(e) => setSelectedRow(e.index)}
columns={[
{
width: (window.innerWidth * 1) / 2,
label: 'Title',
dataKey: 'title',
},
{
width: (window.innerWidth * 1) / 4,
label: 'Status',
dataKey: 'statusDescEn',
// numeric: true,
},
{
width: (window.innerWidth * 1) / 4,
label: 'File Date (yyyy-mm-dd)',
dataKey: 'fileDateFormatted',
// numeric: true,
},
]}
/>
) : (
<ResultDetail
data={data[selectedRow]}
setSelectedRow={setSelectedRow}
/>
)}
</Paper>
);
}

// Sample DATA
// const data = [
// ['Frozen yoghurt', 159, 6.0, 24, 4.0],
// ['Ice cream sandwich', 237, 9.0, 37, 4.3],
// ['Eclair', 262, 16.0, 24, 6.0],
// ['Cupcake', 305, 3.7, 67, 4.3],
// ['Gingerbread', 356, 16.0, 49, 3.9],
// ];

// function createData(id, dessert, calories, fat, carbs, protein) {
// return { id, dessert, calories, fat, carbs, protein };
// }

// console.log('data prop: ', data);
// console.log('item: ', data[0]);
// FORMATTER
// let formattedData = [];
// const formatData = (data) => {
// data.forEach((trademark) => {
// let formattedDate = trademark.fileDate.substring(0, 10);
// // console.log('formattedDate: ', formattedDate);
// formattedData.push({
// ...trademark,
// fileDate: formattedDate,
// });
// // return {...data, fileDate: }
// });
// };
// formattedData = formatData(data);
// console.log('data: ', data);
// console.log('formattedData: ', formattedData);
// function createData(id, dessert, calories, fat, carbs, protein) {
// return { id, dessert, calories, fat, carbs, protein };
// }

// const rows = []; // array of objects
// // NUMBER OF ROWS Input
// for (let i = 0; i < 3; i += 1) {
// const randomSelection = data[Math.floor(Math.random() * data.length)];
// rows.push(createData(i, ...randomSelection)); // randomSelection or data
// }

// console.log("rows (default): ", rows)
2 changes: 1 addition & 1 deletion src/styles/Themes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const colors = {
white: '#FFFFFF',
whiteOpq0: '#FFFFFF00',
whiteOpq: '#FFFFFF40',
whiteOpq2: '#FFFFFFB3',
whiteOpq2: '#FFFFFF8C',
lightestGray: '#fafafa',
lighterGray: '#f3f3f3',
lighterGrayOpq: '#f3f3f340',
Expand Down