srcrr/PliWould
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

made it look prettier. working on fixing product editor.

Browse Source
This commit is contained in:
Jordan 2024-06-29 06:09:22 -07:00
parent 7c2289098e
commit de0167e9e5
9 changed files with 171 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
app/(tabs)/index.tsx
View File

@ -1,12 +1,13 @@
import { Image, StyleSheet, Platform, ImageBackground, View, Text, Button, TextInputKeyPressEventData } from 'react-native'; import { Image, StyleSheet, Platform, ImageBackground, View, Text, Button, TextInputKeyPressEventData, TextInput, FlatList } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
import { useAppSelector } from '../store'; import { useAppSelector } from '../store';
import { selectProducts } from '@/features/product/productSlice'; import { selectProducts } from '@/features/product/productSlice';
import { Product, dimensions_t } from '@/lib/product'; import { Product, dimensions_t } from '@/lib/product';
import { ProductTile } from '@/components/ProductTile';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { TextInput, TouchableHighlight } from 'react-native-gesture-handler'; import { TouchableHighlight } from 'react-native-gesture-handler';
const fallbackImage = require("@/assets/images/board-stock-lightened-blurred.png");
export default function HomeScreen() { export default function HomeScreen() {
@ -17,101 +18,83 @@ export default function HomeScreen() {
const [width, setWidth] = useState("0"); const [width, setWidth] = useState("0");
const [units, setUnits] = useState("in" as "ft" | "in"); const [units, setUnits] = useState("in" as "ft" | "in");
function calculatePrice() { useEffect(function () {
if (!activeProduct) { const iv = setInterval(function () {
setPrice("0.00"); if (!activeProduct) return;
return; const l = Number.parseInt(length);
const w = Number.parseInt(width);
console.log("l=%d, w=%d", l, w);
const u = units;
const d: dimensions_t = activeProduct.area ? { l, w, u } : { l, u };
const p = activeProduct.priceFor(d);
console.log("set price %s", p);
const s = p.toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})
setPrice(s == "NaN" ? "0.00" : s);
}, 10);
return function () {
clearInterval(iv);
} }
const l = Number.parseInt(length); }, [activeProduct, length, width]);
const w = Number.parseInt(width);
console.log("l=%d, w=%d", l, w);
const u = units;
const d : dimensions_t = activeProduct.area ? {l, w, u} : {l, u};
const p = activeProduct.priceFor(d);
console.log("set price %s", p);
const s = p.toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})
setPrice(s);
}
const onProductSelected = (product: Product) => {
setActiveProduct(product);
calculatePrice();
}
const onUnitPressed = (u : "ft" | "in") => {
setUnits(u);
calculatePrice();
}
const onLengthChanged = (value : string) => {
setLength(value);
calculatePrice();
}
const onWidthChanged = (width : string) => {
setWidth(width);
calculatePrice();
}
return ( return (
<SafeAreaView style={styles.wrapper}> <SafeAreaView style={styles.wrapper}>
<View style={styles.bigPriceWrapper}> <View style={styles.bigPriceWrapper}>
<Text style={styles.bigPrice}>$ { price }</Text> <Text style={styles.bigPrice}>$ {price}</Text>
</View> </View>
<View style={styles.inputAndUnitWrapper}> <View style={styles.inputAndUnitWrapper}>
<View style={styles.inputWrapper}> <View style={styles.inputWrapper}>
{activeProduct ? ( {activeProduct ? (
<View> <View>
<TextInput <TextInput
clearTextOnFocus={true} clearTextOnFocus={true}
defaultValue={length} onChangeText={setLength}
onChangeText={onLengthChanged} inputMode='decimal'
inputMode='decimal' style={styles.lengthInput}
style={styles.lengthInput} />
/> <Text style={styles.unitHints}>{units}</Text>
<Text style={styles.unitHints}>{units}</Text> {activeProduct.area && (
{activeProduct.area && <View>
<TextInput
(<View><TextInput clearTextOnFocus={true}
clearTextOnFocus={true} defaultValue={width}
defaultValue={width} onChangeText={setWidth}
onPressIn={() => calculatePrice()} inputMode='decimal'
onChangeText={setWidth} style={styles.widthInput}
inputMode='decimal' />
style={styles.widthInput} <Text style={styles.unitHints}>{units}</Text>
/> </View>)
<Text style={styles.unitHints}>{units}</Text> }
</View>)
}
</View> </View>
) : (<Text>Please choose a product</Text>)} ) : (<Text>Please choose a product</Text>)}
</View> </View>
<View style={styles.unitSelector}> <View style={styles.unitSelector}>
<Button title="in" onPress={() => onUnitPressed("in")} color={units === "in" ? "gray" : "blue"} /> <Button title="in" onPress={() => setUnits("in")} color={units === "in" ? "gray" : "blue"} />
<Button title="ft" onPress={() => onUnitPressed("ft")} color={units === "ft" ? "gray" : "blue"} /> <Button title="ft" onPress={() => setUnits("ft")} color={units === "ft" ? "gray" : "blue"} />
</View> </View>
</View> </View>
{products.map((product) => { <FlatList
return ( data={products}
<TouchableHighlight onPress={() => setActiveProduct(product)} > style={styles.productSelectorFlatList}
<View renderItem={({ item }) => {
style={product.id === activeProduct?.id ? styles.activeProduct : styles.inactiveProduct}> return (
<ProductTile product={product} onProductSelected={onProductSelected} /> <TouchableHighlight
</View> style={item === activeProduct ? styles.productTileTouchableActive : styles.productTileTouchable}
</TouchableHighlight> onPress={() => setActiveProduct(item)}>
) <Text style={item === activeProduct ? styles.productTileTextActive : styles.productTileText}>{item.attributes.name || `Product ${item.id}`}</Text>
})} </TouchableHighlight>
)
}}
/>
</SafeAreaView> </SafeAreaView>
); );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
wrapper: { wrapper: {
padding: 10,
alignItems: "center",
}, },
bigPriceWrapper: { bigPriceWrapper: {
alignContent: "center", alignContent: "center",
@ -124,11 +107,13 @@ const styles = StyleSheet.create({
}, },
inputWrapper: { inputWrapper: {
flexDirection: "row", flexDirection: "row",
alignItems: "flex-start",
}, },
unitSelector: { unitSelector: {
}, },
inputAndUnitWrapper: { inputAndUnitWrapper: {
flexDirection: "row", flexDirection: "row",
alignSelf: "center",
}, },
unitHints: { unitHints: {
fontSize: 30, fontSize: 30,
@ -162,7 +147,6 @@ const styles = StyleSheet.create({
}, },
titleContainer: { titleContainer: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center',
gap: 8, gap: 8,
}, },
stepContainer: { stepContainer: {
@ -174,6 +158,39 @@ const styles = StyleSheet.create({
width: 290, width: 290,
bottom: 0, bottom: 0,
left: 0, left: 0,
position: 'absolute',
}, },
productSelectorFlatList: {
padding: 10,
margin: 10,
},
productTileTouchable: {
margin: 10,
padding: 20,
backgroundColor: "grey",
},
productTileTouchableActive: {
borderWidth: 2,
borderStyle: "solid",
borderColor: "black",
margin: 10,
padding: 20,
},
productTileText: {
textAlign: "center",
color: "white",
},
productTileTextActive: {
textAlign: "center",
color: "black",
},
productTileCover: {
padding: 4,
},
}); });

BIN
assets/images/board-stock-lightened-blurred.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

BIN
assets/images/board-stock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 292 KiB

44
components/ProductAttributeEditor.tsx
View File

@ -9,7 +9,7 @@ export type ProductAttributeDeleteFunc = (product_id: string, key: string) => an
export type ProductAttributeProps = { product: Product, attributeKey: string, attributeValue: string, onChange?: ProductAttributeChangeFunc, onDelete?: ProductAttributeChangeFunc, }; export type ProductAttributeProps = { product: Product, attributeKey: string, attributeValue: string, onChange?: ProductAttributeChangeFunc, onDelete?: ProductAttributeChangeFunc, };
export const ProductAttributeEditor = ({ product, attributeKey: key, attributeValue: value, onDelete, onChange } : ProductAttributeProps) => { export const ProductAttributeEditor = ({ product, attributeKey: key, attributeValue: value, onDelete, onChange }: ProductAttributeProps) => {
const [doEdit, setDoEdit] = useState(true); const [doEdit, setDoEdit] = useState(true);
const [newValue, setNewValue] = useState(value); const [newValue, setNewValue] = useState(value);
@ -20,30 +20,36 @@ export const ProductAttributeEditor = ({ product, attributeKey: key, attributeVa
return ( return (
<View> <View>
<Text>{key}</Text> <View style={styles.productAttributeRow}>
<View> <Text style={styles.key}>{key}</Text>
<TouchableHighlight <TextInput
onPress={() => setDoEdit(!doEdit)} value={newValue}
aria-label="Property Value" onChangeText={doChange}
> style={styles.value}
{doEdit ? aria-label="Edit Value" />
(<Text>{newValue}</Text>) :
(<TextInput
value={newValue}
onChangeText={doChange}
aria-label="Edit Value" />)
}
</TouchableHighlight>
<TouchableHighlight <TouchableHighlight
onPress={() => onDelete && onDelete(product.id, key, value)} onPress={() => onDelete && onDelete(product.id, key, value)}
aria-label="Delete Attribute"> aria-label="Delete Attribute"
<Ionicons name="trash-bin-outline" /> style={{ backgroundColor: "darkred", borderRadius: 5, margin: 5, padding: 5, }}>
<Ionicons name="trash-bin-outline" size={30} color={"white"} />
</TouchableHighlight> </TouchableHighlight>
</View> </View>
</View> </View>
) )
} }
const style = StyleSheet.create({ const styles = StyleSheet.create({
productAttributeRow: {
flexDirection: "row",
},
key: {
flex: 1,
},
value: {
flex: 1,
borderWidth: 1,
borderColor: "grey",
borderStyle: "solid",
padding: 10
}
}); });

5
components/ProductEditor.tsx
View File

@ -20,6 +20,7 @@ export const ProductEditor = ({}) => {
return ( return (
<SafeAreaView> <SafeAreaView>
<h1 style={styles.h1}>Edit Products</h1>
<FlatList <FlatList
data={products} data={products}
renderItem={ renderItem={
@ -39,6 +40,10 @@ export const ProductEditor = ({}) => {
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
h1: {
textAlign: "center",
fontFamily: "sans-serif"
},
product: { product: {
} }

22
components/ProductEditorItem.tsx
View File

@ -41,12 +41,14 @@ export const ProductEditorItem = ({ product, onProductUpdated, onProductDeleted
<TouchableHighlight <TouchableHighlight
onPress={() => setShowAttributes(!showAttributes)} onPress={() => setShowAttributes(!showAttributes)}
aria-label="Product Item" aria-label="Product Item"
style={styles.productItemName}
> >
<Text style={styles.product}>{newName}</Text> <Text style={styles.productNameText}>{newName}</Text>
</TouchableHighlight> </TouchableHighlight>
{showAttributes && {showAttributes &&
( (
<FlatList <FlatList
style={styles.productAttributesList}
data={product.attributesAsList} data={product.attributesAsList}
renderItem={({ item }) => ( renderItem={({ item }) => (
<ProductAttributeEditor <ProductAttributeEditor
@ -66,5 +68,21 @@ export const ProductEditorItem = ({ product, onProductUpdated, onProductDeleted
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
product: {}, productNameText: {
paddingLeft: 10,
paddingRight: 10,
},
productItemName: {
flex: 1,
backgroundColor: "lightgrey",
padding: 4,
margin: 4,
},
productAttributesList: {
margin: 10,
padding: 10,
borderWidth: 1,
borderStyle: "solid",
borderColor: "black",
},
}) })

8
features/product/productSlice.ts
View File

@ -45,6 +45,14 @@ export const selectProducts = (state : RootState) => {
return state.products; return state.products;
} }
export const productIds = (state : RootState) => {
return state.products.map(p => p.id);
}
export const getProductById = (state : RootState, id : Id) => {
return state.products.find(x => x.id === id);
}
export const actions = { export const actions = {
...productsState.actions ...productsState.actions

3
package.json
View File

@ -7,7 +7,7 @@
"reset-project": "node ./scripts/reset-project.js", "reset-project": "node ./scripts/reset-project.js",
"android": "expo start --android", "android": "expo start --android",
"ios": "expo start --ios", "ios": "expo start --ios",
"web": "expo start --web", "web": "expo start --web --offline",
"test": "jest --watchAll", "test": "jest --watchAll",
"lint": "expo lint" "lint": "expo lint"
}, },
@ -37,6 +37,7 @@
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-native": "0.74.2", "react-native": "0.74.2",
"react-native-flex-grid": "^1.0.4",
"react-native-gesture-handler": "~2.16.2", "react-native-gesture-handler": "~2.16.2",
"react-native-reanimated": "~3.10.1", "react-native-reanimated": "~3.10.1",
"react-native-safe-area-context": "4.10.1", "react-native-safe-area-context": "4.10.1",

13
pnpm-lock.yaml
View File

@ -80,6 +80,9 @@ dependencies:
react-native: react-native:
specifier: 0.74.2 specifier: 0.74.2
version: 0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7)(@types/react@18.2.79)(react@18.2.0) version: 0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7)(@types/react@18.2.79)(react@18.2.0)
react-native-flex-grid:
specifier: ^1.0.4
version: 1.0.4(react-native@0.74.2)(react@18.2.0)
react-native-gesture-handler: react-native-gesture-handler:
specifier: ~2.16.2 specifier: ~2.16.2
version: 2.16.2(react-native@0.74.2)(react@18.2.0) version: 2.16.2(react-native@0.74.2)(react@18.2.0)
@ -8755,6 +8758,16 @@ packages:
/react-is@18.3.1: /react-is@18.3.1:
resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==} resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
/react-native-flex-grid@1.0.4(react-native@0.74.2)(react@18.2.0):
resolution: {integrity: sha512-VFadQy3JpgBM2fNsn7W/TdebZ0JNeZgedxPJ0Xi6o+HQJU8j43YGUsGot72rEMWlzaAJCGQnMQXkW9vX+E2n5w==}
peerDependencies:
react: '*'
react-native: '*'
dependencies:
react: 18.2.0
react-native: 0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7)(@types/react@18.2.79)(react@18.2.0)
dev: false
/react-native-gesture-handler@2.16.2(react-native@0.74.2)(react@18.2.0): /react-native-gesture-handler@2.16.2(react-native@0.74.2)(react@18.2.0):
resolution: {integrity: sha512-vGFlrDKlmyI+BT+FemqVxmvO7nqxU33cgXVsn6IKAFishvlG3oV2Ds67D5nPkHMea8T+s1IcuMm0bF8ntZtAyg==} resolution: {integrity: sha512-vGFlrDKlmyI+BT+FemqVxmvO7nqxU33cgXVsn6IKAFishvlG3oV2Ds67D5nPkHMea8T+s1IcuMm0bF8ntZtAyg==}
peerDependencies: peerDependencies: