stwhite
/
boxes-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI cleanup with tables and chairs and tooltips :D

This commit is contained in:
Steve White 2024-10-17 08:47:27 -05:00
parent cd394ca1ee
commit 88a90e39b7
3 changed files with 96 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/Boxes.js
View File

@ -1,6 +1,6 @@
// src/components/Boxes.js
import React, { useEffect, useState } from 'react';
import { Container, Button, TextField, List, ListItem, ListItemText, IconButton } from '@mui/material';
import { Container, Button, TextField, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
import { Delete as DeleteIcon } from '@mui/icons-material';
import { Link as RouterLink } from 'react-router-dom'; // Import Link from react-router-dom
import axios from 'axios';
@ -51,6 +51,33 @@ export default function Boxes({ token }) {
return (
<Container>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>Box Name</TableCell>
<TableCell>Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{boxes.map((box) => (
<TableRow key={box.ID}>
<TableCell>
<RouterLink to={`/boxes/${box.ID}/items`} state={{ boxName: box.name, boxID: box.ID }}>
{box.name}
</RouterLink>
</TableCell>
<TableCell>
<Button onClick={() => handleDeleteBox(box.ID)} startIcon={<DeleteIcon />}>
Delete
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
<TextField
label="New Box"
variant="outlined"
@ -61,23 +88,6 @@ export default function Boxes({ token }) {
<Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary" onClick={handleCreateBox}>
Add Box
</Button>
<List>
{boxes.map((box) => (
<ListItem key={box.ID} secondaryAction={
<IconButton edge="end" onClick={() => handleDeleteBox(box.ID)}>
<DeleteIcon />
</IconButton>
}>
<ListItemText
primary={
<RouterLink to={`/boxes/${box.ID}/items`} state={{ boxName: box.name, boxID: box.ID }}> {/* Use Link component */}
{box.name}
</RouterLink>
}
/>
</ListItem>
))}
</List>
</Container>
);
}

19
src/components/ItemDetails.js
View File

@ -1,6 +1,6 @@
// src/components/ItemDetails.js
import React, { useState, useEffect, useRef, useCallback } from 'react';
import { TextField, Button, Container, Avatar } from '@mui/material';
import { TextField, Button, Container, Avatar, Tooltip } from '@mui/material';
import axios from 'axios';
import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
//import { useNavigate } from 'react-router-dom'; // Import useNavigate
@ -195,13 +195,15 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
<h3>Edit Item: {item.name}</h3>
{/* Display the item image as an avatar */}
<Avatar
src={imageSrc}
alt={name}
onError={handleImageError}
sx={{ width: 100, height: 100, marginBottom: '16px' }} // Style the Avatar
onClick={handleAvatarClick}
/>
<Tooltip title="Click to enlarge">
<Avatar
src={imageSrc}
alt={name}
onError={handleImageError}
sx={{ width: 200, height: 200, marginBottom: '16px' }} // Style the Avatar
onClick={handleAvatarClick}
/>
</Tooltip>
{imageOverlayVisible && (
<div className="image-overlay">
<img src={imageSrc} alt={name} />
@ -233,6 +235,7 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
margin="normal"
value={imagePath}
onChange={(e) => setImagePath(e.target.value)}
sx={{ display: 'none' }}
/>
<input
type="file"

95
src/components/Items.js
View File

@ -14,7 +14,16 @@ import {
DialogTitle,
DialogContent,
DialogActions,
TableContainer,
Table,
TableHead,
TableRow,
TableCell,
TableBody,
Box,
Tooltip
} from '@mui/material';
import { Delete as DeleteIcon, Edit as EditIcon } from '@mui/icons-material';
import axios from 'axios';
import { useParams, useLocation } from 'react-router-dom';
@ -377,44 +386,54 @@ export default function Items({ token }) {
boxId={boxId}
/>
) : (
<List>
{items
.filter(item =>
item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
item.description.toLowerCase().includes(searchQuery.toLowerCase())
)
.map((item) => (
<ListItem key={item.ID} secondaryAction={
<>
<IconButton edge="end" onClick={() => handleEditItem(item)}>
<EditIcon />
</IconButton>
<IconButton edge="end" sx={{ marginLeft: 4 }} onClick={() => handleDeleteItem(item.ID)}>
<DeleteIcon />
</IconButton>
</>
}>
<ListItemAvatar>
<Avatar
src={itemImages[item.ID]}
alt={item.name}
onError={handleImageError}
/>
</ListItemAvatar>
<ListItemText
primary={item.name}
secondary={
<>
<Typography variant="body2">{item.description}</Typography>
{item.image_path && (
<Typography variant="caption">Image: {item.image_path}</Typography>
)}
</>
}
/>
</ListItem>
))}
</List>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell style={{ width: '40px' }}>Image</TableCell>
<TableCell style={{ width: '100px' }}>Name</TableCell>
<TableCell>Description</TableCell>
<TableCell>Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{items
.filter(item =>
item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
item.description.toLowerCase().includes(searchQuery.toLowerCase())
)
.map((item) => (
<TableRow key={item.ID}>
<TableCell>
<Avatar src={itemImages[item.ID] || '/images/default.jpg'} />
</TableCell>
<TableCell>{item.name}</TableCell>
<TableCell>{item.description}</TableCell>
<Box display="flex" justifyContent="space-between" width="100%">
<Tooltip title="Edit Item">
<IconButton
onClick={() => handleEditItem(item)}
size="large"
sx={{ mr: 1 }}
>
<EditIcon />
</IconButton>
</Tooltip>
<Tooltip title="Delete Item">
<IconButton
onClick={() => handleDeleteItem(item.ID)}
size="large"
color="error"
>
<DeleteIcon />
</IconButton>
</Tooltip>
</Box>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)}
</Container>
);