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 { useAppSelector } from '../store';
import { selectProducts } from '@/features/product/productSlice';
import { Product, dimensions_t } from '@/lib/product';
import { ProductTile } from '@/components/ProductTile';
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() {
@ -17,101 +18,83 @@ export default function HomeScreen() {
const [width, setWidth] = useState("0");
const [units, setUnits] = useState("in" as "ft" | "in");
function calculatePrice() {
if (!activeProduct) {
setPrice("0.00");
return;
useEffect(function () {
const iv = setInterval(function () {
if (!activeProduct) 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);
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();
}
}, [activeProduct, length, width]);
return (
<SafeAreaView style={styles.wrapper}>
<View style={styles.bigPriceWrapper}>
<Text style={styles.bigPrice}>$ { price }</Text>
<Text style={styles.bigPrice}>$ {price}</Text>
</View>
<View style={styles.inputAndUnitWrapper}>
<View style={styles.inputWrapper}>
{activeProduct ? (
<View>
<TextInput
clearTextOnFocus={true}
defaultValue={length}
onChangeText={onLengthChanged}
inputMode='decimal'
style={styles.lengthInput}
/>
<Text style={styles.unitHints}>{units}</Text>
{activeProduct.area &&
(<View><TextInput
clearTextOnFocus={true}
defaultValue={width}
onPressIn={() => calculatePrice()}
onChangeText={setWidth}
inputMode='decimal'
style={styles.widthInput}
/>
<Text style={styles.unitHints}>{units}</Text>
</View>)
}
<TextInput
clearTextOnFocus={true}
onChangeText={setLength}
inputMode='decimal'
style={styles.lengthInput}
/>
<Text style={styles.unitHints}>{units}</Text>
{activeProduct.area && (
<View>
<TextInput
clearTextOnFocus={true}
defaultValue={width}
onChangeText={setWidth}
inputMode='decimal'
style={styles.widthInput}
/>
<Text style={styles.unitHints}>{units}</Text>
</View>)
}
</View>
) : (<Text>Please choose a product</Text>)}
</View>
<View style={styles.unitSelector}>
<Button title="in" onPress={() => onUnitPressed("in")} color={units === "in" ? "gray" : "blue"} />
<Button title="ft" onPress={() => onUnitPressed("ft")} color={units === "ft" ? "gray" : "blue"} />
</View>
</View>
<View style={styles.unitSelector}>
<Button title="in" onPress={() => setUnits("in")} color={units === "in" ? "gray" : "blue"} />
<Button title="ft" onPress={() => setUnits("ft")} color={units === "ft" ? "gray" : "blue"} />
</View>
</View>
{products.map((product) => {
return (
<TouchableHighlight onPress={() => setActiveProduct(product)} >
<View
style={product.id === activeProduct?.id ? styles.activeProduct : styles.inactiveProduct}>
<ProductTile product={product} onProductSelected={onProductSelected} />
</View>
</TouchableHighlight>
)
})}
<FlatList
data={products}
style={styles.productSelectorFlatList}
renderItem={({ item }) => {
return (
<TouchableHighlight
style={item === activeProduct ? styles.productTileTouchableActive : styles.productTileTouchable}
onPress={() => setActiveProduct(item)}>
<Text style={item === activeProduct ? styles.productTileTextActive : styles.productTileText}>{item.attributes.name || `Product ${item.id}`}</Text>
</TouchableHighlight>
)
}}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
wrapper: {
padding: 10,
alignItems: "center",
},
bigPriceWrapper: {
alignContent: "center",
@ -124,11 +107,13 @@ const styles = StyleSheet.create({
},
inputWrapper: {
flexDirection: "row",
alignItems: "flex-start",
},
unitSelector: {
},
inputAndUnitWrapper: {
flexDirection: "row",
alignSelf: "center",
},
unitHints: {
fontSize: 30,
@ -162,7 +147,6 @@ const styles = StyleSheet.create({
},
titleContainer: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
},
stepContainer: {
@ -174,6 +158,39 @@ const styles = StyleSheet.create({
width: 290,
bottom: 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 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 [newValue, setNewValue] = useState(value);
@ -20,30 +20,36 @@ export const ProductAttributeEditor = ({ product, attributeKey: key, attributeVa
return (
<View>
<Text>{key}</Text>
<View>
<TouchableHighlight
onPress={() => setDoEdit(!doEdit)}
aria-label="Property Value"
>
{doEdit ?
(<Text>{newValue}</Text>) :
(<TextInput
value={newValue}
onChangeText={doChange}
aria-label="Edit Value" />)
}
</TouchableHighlight>
<View style={styles.productAttributeRow}>
<Text style={styles.key}>{key}</Text>
<TextInput
value={newValue}
onChangeText={doChange}
style={styles.value}
aria-label="Edit Value" />
<TouchableHighlight
onPress={() => onDelete && onDelete(product.id, key, value)}
aria-label="Delete Attribute">
<Ionicons name="trash-bin-outline" />
aria-label="Delete Attribute"
style={{ backgroundColor: "darkred", borderRadius: 5, margin: 5, padding: 5, }}>
<Ionicons name="trash-bin-outline" size={30} color={"white"} />
</TouchableHighlight>
</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 (
<SafeAreaView>
<h1 style={styles.h1}>Edit Products</h1>
<FlatList
data={products}
renderItem={
@ -39,6 +40,10 @@ export const ProductEditor = ({}) => {
}
const styles = StyleSheet.create({
h1: {
textAlign: "center",
fontFamily: "sans-serif"
},
product: {
}

22
components/ProductEditorItem.tsx
View File

@ -41,12 +41,14 @@ export const ProductEditorItem = ({ product, onProductUpdated, onProductDeleted
<TouchableHighlight
onPress={() => setShowAttributes(!showAttributes)}
aria-label="Product Item"
style={styles.productItemName}
>
<Text style={styles.product}>{newName}</Text>
<Text style={styles.productNameText}>{newName}</Text>
</TouchableHighlight>
{showAttributes &&
(
<FlatList
style={styles.productAttributesList}
data={product.attributesAsList}
renderItem={({ item }) => (
<ProductAttributeEditor
@ -66,5 +68,21 @@ export const ProductEditorItem = ({ product, onProductUpdated, onProductDeleted
}
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;
}
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 = {
...productsState.actions

3
package.json
View File

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

13
pnpm-lock.yaml generated
View File

@ -80,6 +80,9 @@ dependencies:
react-native:
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)
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:
specifier: ~2.16.2
version: 2.16.2(react-native@0.74.2)(react@18.2.0)
@ -8755,6 +8758,16 @@ packages:
/react-is@18.3.1:
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):
resolution: {integrity: sha512-vGFlrDKlmyI+BT+FemqVxmvO7nqxU33cgXVsn6IKAFishvlG3oV2Ds67D5nPkHMea8T+s1IcuMm0bF8ntZtAyg==}
peerDependencies: