drew/barkman
1
0
Fork 0
mirror of https://github.com/BarkProductions/barkman.git synced 2026-06-12 22:11:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #22 from Pup-Ion-Dev/ui-improvments

Browse Source 
UI improvments
This commit is contained in:
Drew Rautenberg
2025-01-23 12:04:50 -06:00
committed by GitHub
parent 6202e3d0d7 57d6b8ae8e
commit 47d2918a0b
6 changed files with 102 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
barkmanui/public/barklogo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 388 KiB

barkmanui/src/App.tsx
+30 -31
View File
@@ -1,7 +1,7 @@
import { Routes, Route} from 'react-router';
import {Routes, Route} from 'react-router';
import Home from './pages/home.tsx';
import InventoryList from "./features/inventory/InventoryList.tsx";
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
import {QueryClientProvider, QueryClient} from '@tanstack/react-query';
import {createTheme, MantineProvider} from '@mantine/core';
import '@mantine/core/styles.css';
import ItemDetail from "./features/inventory/ItemDetail.tsx";
@@ -12,39 +12,38 @@ import {BarkHeader} from "./common/components/BarkHeader.tsx";
const queryClient = new QueryClient()
const barkTheme = createTheme({
primaryColor: 'red',
colors: {
'red': [
"#ffe8e8",
"#ffcfd0",
"#fd9d9d",
"#fb6868",
"#fa3c3b",
"#f9211e",
"#fa120f",
"#df0404",
"#c70002",
"#ae0000"
],
},
primaryColor: 'red',
colors: {
'red': [
"#ffe8e8",
"#ffcfd0",
"#fd9d9d",
"#fb6868",
"#fa3c3b",
"#f9211e",
"#fa120f",
"#df0404",
"#c70002",
"#ae0000"
],
},
});
function App() {
return <MantineProvider defaultColorScheme="auto" theme={barkTheme}>{ (
<QueryClientProvider client={queryClient}>
<>
<BarkHeader></BarkHeader>
<Routes>
<Route index element={<Home />} />
<Route path="inventory" element={<InventoryList />} />
<Route path="itemDetail/:itemId" element={<ItemDetail />} />
<Route path="editItem/:itemId" element={<EditItem />} />
</Routes>
</>
</QueryClientProvider>
) }</MantineProvider>;
return <MantineProvider defaultColorScheme="auto" theme={barkTheme}>{(
<QueryClientProvider client={queryClient}>
<>
<BarkHeader></BarkHeader>
<Routes>
<Route index element={<Home/>}/>
<Route path="inventory" element={<InventoryList/>}/>
<Route path="itemDetail/:itemId" element={<ItemDetail/>}/>
<Route path="editItem/:itemId" element={<EditItem/>}/>
</Routes>
</>
</QueryClientProvider>
)}</MantineProvider>;
}
export default App
barkmanui/src/common/components/BarkHeader.tsx
+4 -3
View File
@@ -1,8 +1,9 @@
import { Burger, Container, Group } from '@mantine/core';
import {Burger, Container, Group, Image} from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import classes from './BarkHeader.module.css';
import {NavLink} from "react-router";
const links = [
{ link: '/', label: 'Home' },
{ link: '/inventory', label: 'Inventory' },
@@ -20,8 +21,8 @@ export function BarkHeader() {
return (
<header className={classes.header}>
<Container size="md" className={classes.inner}>
<Container fluid className={classes.inner}>
<Image ml="lg" src="/barklogo.png" h={55} w={55}/>
<Group gap={5} visibleFrom="xs">
{items}
</Group>
barkmanui/src/features/inventory/EditItem.tsx
+38 -26
View File
@@ -1,5 +1,5 @@
import {Button, Group, TextInput, Text, Textarea, NumberInput} from '@mantine/core';
import { useForm } from '@mantine/form';
import {Button, Group, TextInput, Text, Textarea, NumberInput, Container, Title, Flex} from '@mantine/core';
import {useForm} from '@mantine/form';
import {useParams} from "react-router";
import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
import {InventoryItem} from "./types.ts";
@@ -10,7 +10,7 @@ type EditableInventoryItem = Omit<InventoryItem, 'id'>;
function EditItem() {
const params = useParams();
const form = useForm<EditableInventoryItem>({
const editItemForm = useForm<EditableInventoryItem>({
mode: 'uncontrolled',
initialValues: {
name: "",
@@ -22,11 +22,10 @@ function EditItem() {
notes: "",
},
validate: {
},
validate: {},
});
const { isPending, error, data, isFetching } = useQuery({
const {isPending, error, data, isFetching} = useQuery({
queryKey: ['inventory', params.itemId],
queryFn: async (): Promise<InventoryItem> => {
const response = await fetch(
@@ -68,8 +67,9 @@ function EditItem() {
useEffect(() => {
if (data) {
// Even if query.data changes, form will be initialized only once
form.initialize(data);
editItemForm.initialize(data);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [data]);
if (isPending) return 'Loading...'
@@ -77,27 +77,39 @@ function EditItem() {
if (error) return 'An error has occurred: ' + error.message
return (
<form onSubmit={form.onSubmit(async (values) => await
<form onSubmit={editItemForm.onSubmit(async (values) => await
updateItem.mutateAsync(values))}>
<div>{isFetching ? 'Updating...' : ''}</div>
<Text>ID: {data.id}</Text>
<TextInput withAsterisk key={form.key('brand')} size="md" label="Brand"
placeholder="Brand" {...form.getInputProps('brand')}/>
<TextInput withAsterisk key={form.key('name')} size="md" label="Name"
placeholder="Name" {...form.getInputProps('name')}/>
<TextInput size="md" key={form.key('status')} label="Status"
placeholder="Status" {...form.getInputProps('status')}/>
<TextInput size="md" key={form.key('serialNumber')} label="Serial Number"
placeholder="Serial Number"{...form.getInputProps('serialNumber')}/>
<NumberInput size="md" key={form.key('rentalPrice')} label="Rental Price"
placeholder="Rental Price" {...form.getInputProps('rentalPrice')}/>
<NumberInput size="md" key={form.key('replacementCost')} label="Replacement Cost"
placeholder="Replacement Cost" {...form.getInputProps('replacementCost')}/>
<Textarea label="Notes" key={form.key('notes')} placeholder="Notes" {...form.getInputProps('notes')}/>
<Container m="lg">
<Flex mih={50}
gap="md"
justify="flex-start"
align="flex-start"
direction="column"
wrap="wrap">
<Group justify="flex-end" mt="md">
<Button type="submit">Submit</Button>
</Group>
<div>{isFetching ? 'Updating...' : ''}</div>
<Title order={1}>Edit Item</Title>
<Text>ID: {data.id}</Text>
<TextInput withAsterisk key={editItemForm.key('brand')} size="md" label="Brand"
placeholder="Brand" {...editItemForm.getInputProps('brand')}/>
<TextInput withAsterisk key={editItemForm.key('name')} size="md" label="Name"
placeholder="Name" {...editItemForm.getInputProps('name')}/>
<TextInput size="md" key={editItemForm.key('status')} label="Status"
placeholder="Status" {...editItemForm.getInputProps('status')}/>
<TextInput size="md" key={editItemForm.key('serialNumber')} label="Serial Number"
placeholder="Serial Number"{...editItemForm.getInputProps('serialNumber')}/>
<NumberInput size="md" key={editItemForm.key('rentalPrice')} label="Rental Price"
placeholder="Rental Price" {...editItemForm.getInputProps('rentalPrice')}/>
<NumberInput size="md" key={editItemForm.key('replacementCost')} label="Replacement Cost"
placeholder="Replacement Cost" {...editItemForm.getInputProps('replacementCost')}/>
<Textarea label="Notes" key={editItemForm.key('notes')}
placeholder="Notes" {...editItemForm.getInputProps('notes')}/>
<Group justify="flex-end" mt="md">
<Button type="submit">Submit</Button>
</Group>
</Flex>
</Container>
</form>
);
}
barkmanui/src/features/inventory/ItemDetail.tsx
+26 -26
View File
@@ -1,45 +1,45 @@
import {Text} from "@mantine/core";
import {Container, Text, Title} from "@mantine/core";
import {Link, useParams} from "react-router";
import {InventoryItem} from "./types.ts";
import {useQuery} from "@tanstack/react-query";
function ItemDetail() {
let params = useParams();
const params = useParams();
const { isPending, error, data, isFetching } = useQuery({
queryKey: ['inventory', params.itemId],
const {isPending, error, data, isFetching} = useQuery({
queryKey: ['inventory', params.itemId],
queryFn: async (): Promise<InventoryItem> => {
const response = await fetch(
import.meta.env.VITE_API_URL + '/inventory/' + params.itemId,
)
const response = await fetch(
import.meta.env.VITE_API_URL + '/inventory/' + params.itemId,
)
if (!response.ok) throw new Error('Failed to fetch inventory ' + response.statusText)
if (!response.ok) throw new Error('Failed to fetch inventory ' + response.statusText)
return await response.json()
},
});
return await response.json()
},
});
if (isPending) return 'Loading...'
if (isPending) return 'Loading...'
if (error) return 'An error has occurred: ' + error.message
if (error) return 'An error has occurred: ' + error.message
return (
<>
<Text c="red">Item Detail</Text>
<div>{isFetching ? 'Updating...' : ''}</div>
<Text>ID: {data.id}</Text>
<Text>Brand: {data.brand}</Text>
<Text>Name: {data.name}</Text>
<Text>Status: {data.status}</Text>
<Text>Serial Number: {data.serialNumber}</Text>
<Text>Rental Price: ${data.rentalPrice}</Text>
<Text>Replacement Cost: ${data.replacementCost}</Text>
<Text>Notes: {data.notes}</Text>
<Link to={`/editItem/${data.id}`}>Edit</Link>
<Container m="lg">
<Title order={1}>Item Detail</Title>
<div>{isFetching ? 'Updating...' : ''}</div>
<Text>ID: {data.id}</Text>
<Text>Brand: {data.brand}</Text>
<Text>Name: {data.name}</Text>
<Text>Status: {data.status}</Text>
<Text>Serial Number: {data.serialNumber}</Text>
<Text>Rental Price: ${data.rentalPrice}</Text>
<Text>Replacement Cost: ${data.replacementCost}</Text>
<Text>Notes: {data.notes}</Text>
<Link to={`/editItem/${data.id}`}>Edit</Link>
</Container>
</>
)
}
barkmanui/src/pages/home.tsx
+4 -2
View File
@@ -1,4 +1,4 @@
import {Text} from "@mantine/core";
import {Container, Text} from "@mantine/core";
function Home() {
@@ -6,7 +6,9 @@ function Home() {
return (
<>
<Text c="red">Bark productions: at the intersection of professionalism and degeneracy</Text>
<Container m="lg">
<Text>Bark productions: at the intersection of professionalism and degeneracy</Text>
</Container>
</>
)
}