diff --git a/src/components/Address.tsx b/src/components/Address.tsx index b311cb0..22b1db6 100644 --- a/src/components/Address.tsx +++ b/src/components/Address.tsx @@ -1,7 +1,7 @@ -import { Component } from "solid-js"; +import { Component, Show } from "solid-js"; import z, { Infer } from "myzod"; -export const addressSchema = z.object({ +const addressSchema_ = () => ({ type: z.literals("S", "K").optional(), name: z.string(), line1: z.string().optional(), @@ -11,9 +11,20 @@ export const addressSchema = z.object({ country: z.string(), }); +export const addressSchema = z.object(addressSchema_()); + +export const postalAddressSchema = z.object({ + ...addressSchema_(), + name2: z.string().optional(), +}); + export type AddressData = Infer; -export const createAddress = (data: Partial = {}): AddressData => { +export type PostalAddressData = Infer; + +export const createAddress = ( + data: Partial = {} +): T => { return { name: "", line1: "", @@ -22,7 +33,7 @@ export const createAddress = (data: Partial = {}): AddressData => { zip: undefined, country: "CH", ...data, - }; + } as any; }; export const isStructuredAddress = (address: AddressData) => { @@ -49,9 +60,12 @@ export const getLine2 = (address: AddressData) => { return address.line2; }; -const Address: Component<{ address: AddressData }> = (props) => ( +const Address: Component<{ address: PostalAddressData }> = (props) => ( <>
{props.address.name}
+ +
{props.address.name2}
+
{getLine1(props.address)}
{getLine2(props.address)}
diff --git a/src/components/Settings/Overlay.tsx b/src/components/Settings/Overlay.tsx index 7838e7a..91f4d7b 100644 --- a/src/components/Settings/Overlay.tsx +++ b/src/components/Settings/Overlay.tsx @@ -10,6 +10,7 @@ import { createMemo, onMount, onCleanup, + mergeProps, } from "solid-js"; import { createStore, reconcile, unwrap } from "solid-js/store"; import { format, fromUnixTime, getUnixTime } from "date-fns"; @@ -51,7 +52,7 @@ import { storeSchema, UiStoreContext, } from "~/stores"; -import { AddressData, isStructuredAddress } from "../Address"; +import { isStructuredAddress, PostalAddressData } from "../Address"; import PositionsIcon from "~icons/carbon/show-data-cards"; import YouIcon from "~icons/carbon/face-wink"; import DesignIcon from "~icons/carbon/paint-brush"; @@ -110,11 +111,13 @@ const SettingsOverlay: Component = () => { const [CustomerValidationContext, customerDataForm] = createValidation(); const AddressInputs: Component<{ + postal?: boolean; namePrefix?: string; nameRequired?: boolean; setter: (name: string, value: any) => void; - address: () => AddressData; - }> = (props) => { + address: () => PostalAddressData; + }> = (p) => { + const props = mergeProps({ postal: false }, p); const isStructured = createMemo(() => isStructuredAddress(props.address())); const withPrefix = (name: string) => createMemo( @@ -123,7 +126,11 @@ const SettingsOverlay: Component = () => { return ( <> -
+
{ />
+ + props.setter("name2", evt.currentTarget.value)} + /> + { { setLocalState("customAddress", name as any, value); }} @@ -705,6 +722,8 @@ const SettingsOverlay: Component = () => { state.customer.alternativeAddress} /> diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 98f4208..415b8cd 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -16,7 +16,12 @@ import Page from "~/components/Page"; import LufraiLogoWww from "~icons/custom/lufrai-logo-www"; import AppIcon from "~icons/custom/icon"; -import { getLine1, getLine2, isStructuredAddress } from "~/components/Address"; +import Address, { + getLine1, + getLine2, + isStructuredAddress, + PostalAddressData, +} from "~/components/Address"; import Positions, { calculatePositionsPrice, calculatePositionsTax, @@ -124,7 +129,7 @@ export default function Home() { ); }; - const address = createMemo(() => { + const address = createMemo(() => { const value = (localState.useCustomAddress && localState.customAddress ? localState.customAddress @@ -218,15 +223,18 @@ export default function Home() { >
{address().name - ? [address().name, getLine1(address()), getLine2(address())] - .filter((x) => x != "") - .join(" · ") + ? [ + address().name, + address().name2, + getLine1(address()), + getLine2(address()), + ] + .filter((x) => x != "" && x != null) + .join(" ∙ ") : ""}
-
{customerAddress().name}
-
{getLine1(customerAddress())}
-
{getLine2(customerAddress())}
+
diff --git a/src/stores.ts b/src/stores.ts index 443cfcd..7a36ad7 100644 --- a/src/stores.ts +++ b/src/stores.ts @@ -1,6 +1,11 @@ import { createContext } from "solid-js"; import { createStore as createStore_ } from "solid-js/store"; -import { addressSchema, createAddress } from "./components/Address"; +import { + addressSchema, + createAddress, + PostalAddressData, + postalAddressSchema, +} from "./components/Address"; import { createLocalStore as createLocalStore_ } from "./localStore"; import { getUnixTime } from "date-fns"; import z, { Infer } from "myzod"; @@ -84,7 +89,7 @@ export const storeSchema = z.object({ customer: z.object({ customerNumber: z.string(), vatNumber: z.string(), - alternativeAddress: addressSchema, + alternativeAddress: postalAddressSchema, debtorAddress: addressSchema, }), defaultItemPrice: z.number(), @@ -119,7 +124,9 @@ export const createStore = () => customer: { customerNumber: "", vatNumber: "", - alternativeAddress: createAddress(), + alternativeAddress: createAddress({ + name2: undefined, + }), debtorAddress: createAddress(), }, defaultPositionType: POSITION_TYPE_QUANTITY, @@ -143,7 +150,7 @@ export const localStoreSchema = z.object({ creditor: addressSchema, addressLayout: z.literals(ADDRESS_LAYOUT_LEFT, ADDRESS_LAYOUT_RIGHT), font: z.string(), - customAddress: addressSchema, + customAddress: postalAddressSchema, contact: z.object({ name: z.string(), phone: z.string(), @@ -195,7 +202,7 @@ export const createLocalStore = () => creditor: createAddress(), font: "default", addressLayout: ADDRESS_LAYOUT_RIGHT, - customAddress: createAddress(), + customAddress: createAddress({ name2: undefined }), contact: { name: "", phone: "",