317 lines
6.7 KiB
Svelte
317 lines
6.7 KiB
Svelte
<script lang="ts">
|
|
|
|
import HelpLabel from "#components/labels/HelpLabel.svelte";
|
|
import Inputlabel from "#components/labels/InputLabel.svelte";
|
|
import ZipSearch from "#components/PlzSuche.svelte";
|
|
import { BenutzerClient, RechnungClient } from "./types.js";
|
|
|
|
export let user: BenutzerClient;
|
|
export let rechnung: Partial<RechnungClient>;
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<div id="rechnungsadresse" class="bereich-box grid
|
|
grid-cols-1 gap-x-4 gap-y-8
|
|
sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
|
|
xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
|
|
">
|
|
|
|
<!-- Empfänger * -->
|
|
|
|
<div class="input-standard order-1 md:order-1 xl:order-1">
|
|
<Inputlabel title="Rechnungs-Empfänger *"></Inputlabel>
|
|
|
|
<input
|
|
name="rechnung_empfaenger"
|
|
type="text"
|
|
bind:value={rechnung.empfaenger}
|
|
required
|
|
data-rule-maxlength="100"
|
|
data-msg-maxlength="max. 100 Zeichen"
|
|
/>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
Bitte geben Sie den Empfänger ein, auf den die Rechnung ausgestellt wird.
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Straße, Hausnummer * -->
|
|
|
|
<div class="input-standard order21 md:order-2 xl:order-2">
|
|
<Inputlabel title="Straße, Hausnummer *"></Inputlabel>
|
|
|
|
<input
|
|
name="rechnung_strasse"
|
|
bind:value={rechnung.strasse}
|
|
type="text"
|
|
required
|
|
data-rule-maxlength="40"
|
|
data-msg-maxlength="max. 40 Zeichen"
|
|
/>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
Bitte geben Sie die Strasse und Hausnummer, so wie Sie auf der Rechnung erscheinen soll, ein.
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PLZ / ORT -->
|
|
|
|
<div class="grid grid-cols-[2fr_4fr] gap-x-4 order-3 md:order-3 xl:order-3">
|
|
|
|
<div class="input-noHelp">
|
|
<Inputlabel title="PLZ *"></Inputlabel>
|
|
<ZipSearch
|
|
name="rechnung_plz"
|
|
bind:zip={rechnung.plz}
|
|
bind:city={rechnung.ort}
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="input-standard">
|
|
<Inputlabel title="Ort *"></Inputlabel>
|
|
|
|
<input
|
|
name="rechnung_ort"
|
|
readonly
|
|
type="text"
|
|
required
|
|
value={rechnung.ort}
|
|
/>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
Bitte geben Sie die PLZ des Ortes, so wie Sie auf der Rechnung erscheinen soll, ein.
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Zusatzzeile -->
|
|
|
|
<div class="input-standard order-4 md:order-4 xl:order-4">
|
|
<Inputlabel title="Zusatzzeile"></Inputlabel>
|
|
|
|
<input
|
|
name="rechnung_zusatzzeile"
|
|
bind:value={rechnung.zusatzzeile}
|
|
type="text"
|
|
data-rule-maxlength="80"
|
|
data-msg-maxlength="max. 80 Zeichen"
|
|
/>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
Bitte geben Sie, falls erforderlich, zusätzliche nformationen ein.
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- E-mail -->
|
|
|
|
<div class="input-standard order-5 md:order-5 xl:order-5">
|
|
<Inputlabel title="E-mail *"></Inputlabel>
|
|
|
|
<input
|
|
name="rechnung_email"
|
|
bind:value={rechnung.email}
|
|
type="email"
|
|
/>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
Bitte geben Sie die E-Mail Adresse des Rechnungsempfängers ein.
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Telefon
|
|
|
|
<div class="input-standard order-6 md:order-6 xl:order-6">
|
|
<Inputlabel title="Telefon *"></Inputlabel>
|
|
|
|
<input
|
|
name="rechnung_telefon"
|
|
bind:value={rechnung.telefon}
|
|
type="text"
|
|
/>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
Bitte geben Sie die Telefonnummer des Rechnungsempfängers ein.
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
-->
|
|
|
|
<div class="col-span-3 order-7 md:order-7 xl:order-7">
|
|
|
|
<div class="grid grid-cols-[25px_max-content] items-center justify-items-start">
|
|
|
|
<input
|
|
id="abweichende_versand_adresse"
|
|
class="w-[15px] h-[15px]"
|
|
type="checkbox"
|
|
name="abweichende_versand_adresse"
|
|
bind:checked={rechnung.abweichende_versand_adresse}
|
|
/>
|
|
|
|
<label for="abweichende_versand_adresse" class="cursor-pointer"
|
|
>abweichende Versandadresse</label>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{#if rechnung.abweichende_versand_adresse}
|
|
|
|
<!-- Versand Empfänger * -->
|
|
|
|
<div class="input-standard order-8 md:order-8 xl:order-8">
|
|
<Inputlabel title="Versand-Empfänger *"></Inputlabel>
|
|
|
|
<input
|
|
name="versand_empfaenger"
|
|
type="text"
|
|
readonly={!rechnung.abweichende_versand_adresse}
|
|
bind:value={rechnung.versand_empfaenger}
|
|
required
|
|
data-rule-maxlength="100"
|
|
data-msg-maxlength="max. 100 Zeichen"
|
|
/>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
Bitte geben Sie den Namen des Versand-Empfängers ein.
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Versand Straße, Hausnummer * -->
|
|
|
|
<div class="input-standard order-9 md:order-9 xl:order-9">
|
|
<Inputlabel title="Straße, Hausnummer *"></Inputlabel>
|
|
|
|
<input
|
|
name="versand_strasse"
|
|
type="text"
|
|
readonly={!rechnung.abweichende_versand_adresse}
|
|
bind:value={rechnung.versand_strasse}
|
|
required
|
|
data-rule-maxlength="40"
|
|
data-msg-maxlength="max. 40 Zeichen"
|
|
/>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
Bitte geben Sie die Versand-Empfänger Strasse und Hausnummer ein, an die die Rechnung versandt wird.
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PLZ / ORT -->
|
|
|
|
<div class="grid grid-cols-[2fr_4fr] gap-x-4 order-10 md:order-10 xl:order-10">
|
|
|
|
<div class="input-noHelp">
|
|
<Inputlabel title="PLZ *"></Inputlabel>
|
|
<ZipSearch
|
|
name="versand_plz"
|
|
readonly={!rechnung.abweichende_versand_adresse}
|
|
bind:zip={rechnung.versand_plz}
|
|
bind:city={rechnung.versand_ort}
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="input-standard">
|
|
<Inputlabel title="Ort *"></Inputlabel>
|
|
|
|
<input
|
|
name="versand_ort"
|
|
type="text"
|
|
readonly
|
|
required
|
|
bind:value={rechnung.versand_ort}
|
|
/>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
Bitte geben Sie die Versand-Empfänger PLZ des Ortes ein, an den die Rechnung versandt wird.
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Zusatzzeile -->
|
|
|
|
<div class="input-standard order-11 md:order-11 xl:order-11">
|
|
<Inputlabel title="Zusatzzeile"></Inputlabel>
|
|
|
|
<input
|
|
name="versand_zusatzzeile"
|
|
type="text"
|
|
readonly={!rechnung.abweichende_versand_adresse}
|
|
bind:value={rechnung.versand_zusatzzeile}
|
|
data-rule-maxlength="80"
|
|
data-msg-maxlength="max. 80 Zeichen"
|
|
/>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
Bitte geben Sie, falls erforderlich, zusätzliche nformationen ein.
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- E-mail -->
|
|
|
|
<div class="input-standard order-12 md:order-12 xl:order-12">
|
|
<Inputlabel title="E-mail *"></Inputlabel>
|
|
|
|
<input
|
|
name="rechnung_email"
|
|
bind:value={rechnung.email}
|
|
type="email"
|
|
/>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
Bitte geben Sie die E-Mail Adresse des Versand-Empfängers ein.
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Telefon
|
|
|
|
<div class="input-standard order-[13] md:order-[13] xl:order-[13]">
|
|
<Inputlabel title="Telefon *"></Inputlabel>
|
|
|
|
<input
|
|
name="rechnung_telefon"
|
|
bind:value={rechnung.telefon}
|
|
type="text"
|
|
/>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
Bitte geben Sie die Telefonnummer des Versand-Empfängers ein.
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
-->
|
|
|
|
{/if }
|
|
|
|
</div> |