Skip to content

Commit

Permalink
Displaying SimaPro Product Names in the Product Grid
Browse files Browse the repository at this point in the history 
Finally! #46
  • Loading branch information
@Waldleufer
Waldleufer committed May 30, 2021
1 parent 69a233f commit dc267cd
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 42 deletions.
30 changes: 28 additions & 2 deletions frontend/src/components/productGrid/ModelDropdownComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import theme from 'resources/theme';
/**
* This component creates the dropdownboxes for the related products
*
* It calls the Backend to get the Models for a specific productID
*
* @returns the model properties of the related product depending on the model values from getModels func from interface/simaProInterface
* @author Parham Gandomkar, Martin Wagner, Irem Toroslu, Mani Anand
*/
Expand All @@ -20,6 +22,32 @@ const ModelDropdownComponent = (props) => {
// set the initial values for the dropdown list derived from getModels
const variables = getModels(productID);
const [selected, setSelected] = useState('Select a model');
if (variables === null || variables === undefined) {
return (
<Container fluid={true}>
<Row
className='w3-dropdown-hover w3-margin-top w3-margin-bottom:2em'
disabled={true}
style={{ backgroundColor: theme.uniformStyle.color.secondaryBackgroundColor }}
>
<button
className='w3-button'
style={{
color: theme.uniformStyle.color.secondaryFontColor,
backgroundColor: theme.uniformStyle.color.secondaryBackgroundColor,
fontSize: theme.typography.buttontitle.fontSize,
fontWeight: theme.typography.buttontitle.fontWeight,
lineHeight: theme.typography.buttontitle.lineHeight,
letterSpacing: theme.typography.buttontitle.letterSpacing
}}
>
Default Model
</button>
</Row>
</Container>
);
}
// else:
return (
<Container fluid={true}>
<Row
Expand Down Expand Up @@ -79,5 +107,3 @@ const ModelDropdownComponent = (props) => {
};

export default ModelDropdownComponent;


75 changes: 37 additions & 38 deletions frontend/src/components/productGrid/ProductGridComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import SLUGS from 'resources/slugs';
import { Link } from 'react-router-dom';
import { PrivateSectionContext } from 'hooks/PrivateSectionContext';
import LabelComponent from './LabelComponent';
import LoadingComponent from 'components/loading';

/**
* The Component creates new cards for the product items using the minicard components form 'components/cards/MiniCardComponent'
Expand All @@ -21,16 +22,12 @@ import LabelComponent from './LabelComponent';

function ProductGridComponent() {
const [selectedProducts] = useContext(PrivateSectionContext);
const [productList, setProductList] = useState([
{
productID: 'dummydum-13b0-4e09-9fb4-50398483ecfd', //(project_id?) final_process_id? (final_product_id?)
productName: '"please select a Product"', //final_process_name? -> probably rather the project name later. But unclear!
modelID: 'none',
modelName: '"please select a Product"',
productImage: ''
}
]);
const [productList, setProductList] = useState([]);
console.log('Tallo');
/*
* useEffect declars the async function getProducts to be executed after the initial render and
* hooks it so the Component reloads on change.
*/
useEffect(() => {
async function getProducts() {
const products = await getSimaProducts();
Expand All @@ -52,6 +49,10 @@ function ProductGridComponent() {
// const { products = [] } = getProducts();
const classes = useStyles();

if (productList === [] || productList === undefined || productList === null) {
return <LoadingComponent />;
}
// else:
return (
<Row
className={classes.cardRow}
Expand All @@ -62,35 +63,33 @@ function ProductGridComponent() {
>
{console.log('State:')}
{console.log(productList)}
{productList.map((product, index) =>
console.log('H')

// <Column key={'Column' + index} horizontal='center'>
// <Link
// onClick={(props) => {
// // Save selection to ContextProvider
// NewSelectedProducts[0].productID = product.productID;
// NewSelectedProducts[0].productName = product.productName;
// }}
// to={{
// // Link to the next page
// pathname: SLUGS.details
// }}
// >
// <MiniCardComponent
// title={product.productName}
// className={classes.miniCardContainer}
// // define the path of the image to show on the cards
// path={product.productImage}
// />
// </Link>
// <LabelComponent productName={product.productName} />
// <ProductDropdown
// productID={product.productID}
// productName={product.productName}
// />
// </Column>
)}
{productList.map((product, index) => (
<Column key={'Column' + index} horizontal='center'>
<Link
onClick={(props) => {
// Save selection to ContextProvider
//NewSelectedProducts[0].productID = product.productID;
//NewSelectedProducts[0].productName = product.productName;
}}
to={{
// Link to the next page
pathname: SLUGS.details
}}
>
<MiniCardComponent
title={product.productName}
className={classes.miniCardContainer}
// define the path of the image to show on the cards
path={product.productImage}
/>
</Link>
<LabelComponent productName={product.productName} />
<ProductDropdown
productID={product.productID}
productName={product.productName}
/>
</Column>
))}
</Row>
);
}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/interface/simaProInterface.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export function getModels(productID) {
{ modelID: 17, productID: productID, modelName: 'Allround Product 4' }
];
default:
return null;
break;
}
}
Expand All @@ -74,10 +75,9 @@ export function getModels(productID) {
export async function getSimaProducts() {
const httpreq = new BackendConnect();
const products = await httpreq.getSimaProProjects();
return products;
let formattedProducts = [];
//console.log(products);
products.map((product) => {
await products.map((product) => {
const productObject = {
productID: product.Id,
productName: product.Name,
Expand Down

0 comments on commit dc267cd

Please sign in to comment.