|
|
|
@ -224,9 +224,19 @@ const SettingsOverlay: Component = () => {
|
|
|
|
|
document.removeEventListener("keydown", saveOnCtrlS);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const AccordionItemLabel: FlowComponent = (props) => (
|
|
|
|
|
<span class="overflow-hidden whitespace-nowrap hidden xxl:inline-flex group-hover:inline-flex group-focus-within:inline-flex gap-2">
|
|
|
|
|
{props.children}
|
|
|
|
|
</span>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const AccordionContent: FlowComponent = (props) => (
|
|
|
|
|
<div class="min-w-[300px]">{props.children}</div>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<div class="print:hidden hidden lg:grid bg-white z-50 h-full fixed xxl:h-auto xxl:relative left-0 w-[480px] grid-rows-[1fr_auto] gap-4 p-3 transition-all shadow-none hover:shadow-2xl focus-within:shadow-2xl -translate-x-72 opacity-70 hover:opacity-100 focus-within:opacity-100 xxl:opacity-100 xxl:-translate-x-0 hover:translate-x-0 focus-within:translate-x-0 ">
|
|
|
|
|
<div class="group print:hidden hidden lg:grid bg-white z-50 h-full fixed xxl:h-auto xxl:relative left-0 xxl:w-[480px] grid-rows-[1fr_auto] gap-4 p-1 xxl:p-3 transition-all shadow hover:shadow-2xl focus-within:shadow-2xl outline outline-1 outline-slate-700/10 w-24 hover:w-[480px] focus-within:w-[480px]">
|
|
|
|
|
<div class="overflow-y-scroll">
|
|
|
|
|
<AccordionItem
|
|
|
|
|
item={0}
|
|
|
|
@ -234,14 +244,17 @@ const SettingsOverlay: Component = () => {
|
|
|
|
|
label={
|
|
|
|
|
<>
|
|
|
|
|
<ProjectIcon />
|
|
|
|
|
Dokument
|
|
|
|
|
<AccordionItemLabel>Dokument</AccordionItemLabel>
|
|
|
|
|
<Show when={!documentDataForm.valid}>
|
|
|
|
|
<AccordionItemLabel>
|
|
|
|
|
<WarningIcon class="text-error" />
|
|
|
|
|
</AccordionItemLabel>
|
|
|
|
|
</Show>
|
|
|
|
|
</>
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
{/* TODO: Add option for item price decimals */}
|
|
|
|
|
<AccordionContent>
|
|
|
|
|
<DocumentValidationContext>
|
|
|
|
|
<AccordionItemGrid>
|
|
|
|
|
<FullWidthAccordionInput
|
|
|
|
@ -259,7 +272,11 @@ const SettingsOverlay: Component = () => {
|
|
|
|
|
label="Bestellungs Nr."
|
|
|
|
|
value={state.project.orderNumber}
|
|
|
|
|
onInput={(evt) =>
|
|
|
|
|
setState("project", "orderNumber", evt.currentTarget.value)
|
|
|
|
|
setState(
|
|
|
|
|
"project",
|
|
|
|
|
"orderNumber",
|
|
|
|
|
evt.currentTarget.value
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
<div class="col-span-2">
|
|
|
|
@ -288,7 +305,9 @@ const SettingsOverlay: Component = () => {
|
|
|
|
|
labelMinWidth={fullWidthLabelWidth}
|
|
|
|
|
label="Lieferdatum"
|
|
|
|
|
value={state.project.deliveryDate}
|
|
|
|
|
onInput={(v: any) => setState("project", "deliveryDate", v)}
|
|
|
|
|
onInput={(v: any) =>
|
|
|
|
|
setState("project", "deliveryDate", v)
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-span-2">
|
|
|
|
@ -358,7 +377,11 @@ const SettingsOverlay: Component = () => {
|
|
|
|
|
labelSuffixJsx={<MarkdownHelpLabel />}
|
|
|
|
|
value={state.project.conclusion}
|
|
|
|
|
onInput={(evt) =>
|
|
|
|
|
setState("project", "conclusion", evt.currentTarget.value)
|
|
|
|
|
setState(
|
|
|
|
|
"project",
|
|
|
|
|
"conclusion",
|
|
|
|
|
evt.currentTarget.value
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
@ -465,7 +488,9 @@ const SettingsOverlay: Component = () => {
|
|
|
|
|
<span>|</span>
|
|
|
|
|
<span>|</span>
|
|
|
|
|
<span>
|
|
|
|
|
<div class="absolute text-right right-0">Gross</div>
|
|
|
|
|
<div class="absolute text-right right-0">
|
|
|
|
|
Gross
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
@ -475,6 +500,7 @@ const SettingsOverlay: Component = () => {
|
|
|
|
|
</div>
|
|
|
|
|
</AccordionItemGrid>
|
|
|
|
|
</DocumentValidationContext>
|
|
|
|
|
</AccordionContent>
|
|
|
|
|
</AccordionItem>
|
|
|
|
|
<AccordionItem
|
|
|
|
|
item={1}
|
|
|
|
@ -482,13 +508,16 @@ const SettingsOverlay: Component = () => {
|
|
|
|
|
label={
|
|
|
|
|
<>
|
|
|
|
|
<YouIcon />
|
|
|
|
|
Deine Angaben
|
|
|
|
|
<AccordionItemLabel>Deine Angaben</AccordionItemLabel>
|
|
|
|
|
<Show when={!yourDataForm.valid}>
|
|
|
|
|
<AccordionItemLabel>
|
|
|
|
|
<WarningIcon class="text-error" />
|
|
|
|
|
</AccordionItemLabel>
|
|
|
|
|
</Show>
|
|
|
|
|
</>
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<AccordionContent>
|
|
|
|
|
<YourDataValidationContext>
|
|
|
|
|
<AccordionItemDivider>Bank Verbindung</AccordionItemDivider>
|
|
|
|
|
<AccordionItemGrid>
|
|
|
|
@ -520,7 +549,10 @@ const SettingsOverlay: Component = () => {
|
|
|
|
|
type="checkbox"
|
|
|
|
|
checked={localState.useCustomAddress}
|
|
|
|
|
onChange={(evt) =>
|
|
|
|
|
setLocalState("useCustomAddress", evt.currentTarget.checked)
|
|
|
|
|
setLocalState(
|
|
|
|
|
"useCustomAddress",
|
|
|
|
|
evt.currentTarget.checked
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
</AccordionItemDivider>
|
|
|
|
@ -646,19 +678,24 @@ const SettingsOverlay: Component = () => {
|
|
|
|
|
</div>
|
|
|
|
|
</AccordionItemGrid>
|
|
|
|
|
</YourDataValidationContext>
|
|
|
|
|
</AccordionContent>
|
|
|
|
|
</AccordionItem>
|
|
|
|
|
<AccordionItem
|
|
|
|
|
item={2}
|
|
|
|
|
activeTitleColor="text-emerald-500"
|
|
|
|
|
label={
|
|
|
|
|
<>
|
|
|
|
|
<CustomerIcon /> Kunde
|
|
|
|
|
<CustomerIcon />
|
|
|
|
|
<AccordionItemLabel>Kunde</AccordionItemLabel>
|
|
|
|
|
<Show when={!customerDataForm.valid}>
|
|
|
|
|
<AccordionItemLabel>
|
|
|
|
|
<WarningIcon class="text-error" />
|
|
|
|
|
</AccordionItemLabel>
|
|
|
|
|
</Show>
|
|
|
|
|
</>
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<AccordionContent>
|
|
|
|
|
<CustomerValidationContext>
|
|
|
|
|
<AccordionItemDivider>Bank Verbindung</AccordionItemDivider>
|
|
|
|
|
<AccordionItemGrid>
|
|
|
|
@ -717,6 +754,7 @@ const SettingsOverlay: Component = () => {
|
|
|
|
|
/>
|
|
|
|
|
</AccordionItemGrid>
|
|
|
|
|
</CustomerValidationContext>
|
|
|
|
|
</AccordionContent>
|
|
|
|
|
</AccordionItem>
|
|
|
|
|
<AccordionItem
|
|
|
|
|
item={3}
|
|
|
|
@ -724,23 +762,27 @@ const SettingsOverlay: Component = () => {
|
|
|
|
|
label={
|
|
|
|
|
<>
|
|
|
|
|
<PositionsIcon />
|
|
|
|
|
Positionen
|
|
|
|
|
<small>({state.positions.length})</small>
|
|
|
|
|
<AccordionItemLabel>
|
|
|
|
|
Positionen <small>({state.positions.length})</small>
|
|
|
|
|
</AccordionItemLabel>
|
|
|
|
|
</>
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<AccordionContent>
|
|
|
|
|
<PositionsSettings />
|
|
|
|
|
</AccordionContent>
|
|
|
|
|
</AccordionItem>
|
|
|
|
|
<AccordionItem
|
|
|
|
|
activeTitleColor="text-blue-500"
|
|
|
|
|
label={
|
|
|
|
|
<>
|
|
|
|
|
<DesignIcon />
|
|
|
|
|
Design
|
|
|
|
|
<AccordionItemLabel>Design</AccordionItemLabel>
|
|
|
|
|
</>
|
|
|
|
|
}
|
|
|
|
|
item={4}
|
|
|
|
|
>
|
|
|
|
|
<AccordionContent>
|
|
|
|
|
<AccordionItemGrid>
|
|
|
|
|
<div class="col-span-2">
|
|
|
|
|
<Checkbox
|
|
|
|
@ -766,9 +808,11 @@ const SettingsOverlay: Component = () => {
|
|
|
|
|
</Checkbox>
|
|
|
|
|
</div>
|
|
|
|
|
</AccordionItemGrid>
|
|
|
|
|
</AccordionContent>
|
|
|
|
|
</AccordionItem>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="overflow-hidden transition-opacity opacity-90 group-hover:opacity-100 group-focus-within:opacity-100 xxl:opacity-100">
|
|
|
|
|
<AccordionContent>
|
|
|
|
|
<div class="grid grid-cols-2 gap-2 mb-4">
|
|
|
|
|
<button
|
|
|
|
|
class="btn btn-sm btn-accent shadow-md gap-2"
|
|
|
|
@ -893,7 +937,10 @@ const SettingsOverlay: Component = () => {
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
{(type) => (
|
|
|
|
|
<option value={type} selected={type === uiState.printType}>
|
|
|
|
|
<option
|
|
|
|
|
value={type}
|
|
|
|
|
selected={type === uiState.printType}
|
|
|
|
|
>
|
|
|
|
|
{printTypeTitles[type]}
|
|
|
|
|
</option>
|
|
|
|
|
)}
|
|
|
|
@ -907,6 +954,7 @@ const SettingsOverlay: Component = () => {
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</AccordionContent>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<Show when={true}>
|
|
|
|
|