Tidying

Added Color Check
Added Due Date = Date
Changed UST and Price
Relabled Button to Betrag aufteilen

pages/incomingInvoices/create.vue

@@ -199,7 +199,7 @@ const createIncomingInvoice = async () => {
             </UButton>
           </InputGroup>
 
-          <UFormGroup label="Lieferant:" required>
+          <UFormGroup label="Lieferant:" >
             <InputGroup>
               <USelectMenu
                   v-model="itemInfo.vendor"
@@ -210,6 +210,7 @@ const createIncomingInvoice = async () => {
                   :search-attributes="['name','vendorNumber']"
                   class="flex-auto"
                   searchable-placeholder="Suche..."
+                  :color="!itemInfo.vendor ? 'rose' : ''"
               >
                 <template #option="{option}">
                   {{option.vendorNumber}} - {{option.name}}
@@ -231,7 +232,6 @@ const createIncomingInvoice = async () => {
           <UFormGroup
               class="mt-3"
               label="Rechnungsreferenz:"
-              required
           >
             <UInput
                 v-model="itemInfo.reference"
@@ -239,19 +239,28 @@ const createIncomingInvoice = async () => {
           </UFormGroup>
 
           <InputGroup class="mt-3" gap="2">
-            <UFormGroup label="Rechnungsdatum:" required>
+            <UFormGroup label="Rechnungsdatum:">
               <UPopover :popper="{ placement: 'bottom-start' }">
-                <UButton icon="i-heroicons-calendar-days-20-solid" :label="itemInfo.date ? dayjs(itemInfo.date).format('DD.MM.YYYY') : 'Datum auswählen'" />
+                <UButton
+                    icon="i-heroicons-calendar-days-20-solid"
+                    :label="itemInfo.date ? dayjs(itemInfo.date).format('DD.MM.YYYY') : 'Datum auswählen'"
+                    variant="outline"
+                    :color="!itemInfo.date ? 'rose' : ''"
+                />
 
                 <template #panel="{ close }">
-                  <LazyDatePicker v-model="itemInfo.date" @close="close" />
+                  <LazyDatePicker v-model="itemInfo.date" @close="itemInfo.dueDate = itemInfo.date" />
                 </template>
               </UPopover>
             </UFormGroup>
 
-            <UFormGroup label="Fälligkeitsdatum:" required>
+            <UFormGroup label="Fälligkeitsdatum:">
               <UPopover :popper="{ placement: 'bottom-start' }">
-                <UButton icon="i-heroicons-calendar-days-20-solid" :label="itemInfo.dueDate ? dayjs(itemInfo.dueDate).format('DD.MM.YYYY') : 'Datum auswählen'" />
+                <UButton
+                    icon="i-heroicons-calendar-days-20-solid"
+                    :label="itemInfo.dueDate ? dayjs(itemInfo.dueDate).format('DD.MM.YYYY') : 'Datum auswählen'"
+                    variant="outline"
+                />
 
                 <template #panel="{ close }">
                   <LazyDatePicker v-model="itemInfo.dueDate" @close="close" />
@@ -262,14 +271,14 @@ const createIncomingInvoice = async () => {
 
 
 
-          <UFormGroup label="Zahlart:" required>
+          <UFormGroup label="Zahlart:" >
             <USelectMenu
                 :options="['Einzug','Kreditkarte','Überweisung','Sonstiges']"
                 v-model="itemInfo.paymentType"
             />
           </UFormGroup>
 
-          <UFormGroup label="Beschreibung:" required>
+          <UFormGroup label="Beschreibung:" >
             <UTextarea
                 v-model="itemInfo.description"
             />
@@ -321,7 +330,7 @@ const createIncomingInvoice = async () => {
 
             <UFormGroup
                 label="Kategorie"
-                class=" mb-3"
+                class="mb-3"
             >
               <USelectMenu
                   :options="dataStore.accounts"
@@ -331,6 +340,7 @@ const createIncomingInvoice = async () => {
                   :search-attributes="['label']"
                   searchable-placeholder="Suche..."
                   v-model="item.account"
+                  :color="!item.account ? 'rose' : ''"
               >
                 <template #label>
                   {{dataStore.accounts.find(account => account.id === item.account) ? dataStore.accounts.find(account => account.id === item.account).label : "Keine Kategorie ausgewählt" }}
@@ -361,23 +371,6 @@ const createIncomingInvoice = async () => {
 
 
             <InputGroup>
-              <UFormGroup
-                  label="Umsatzsteuer"
-                  class="w-32"
-                  :help="`Betrag: ${item.amountTax ? String(item.amountTax).replace('.',',') : '0,00'} €`"
-              >
-                <USelectMenu
-                    :options="taxOptions"
-                    v-model="item.taxType"
-                    value-attribute="key"
-                    option-attribute="label"
-                    @change="item.amountTax = Number(((item.amountNet ? item.amountNet : 0) * (Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2))"
-                >
-                  <template #label>
-                    <span class="truncate">{{taxOptions.find(i => i.key === item.taxType) ? taxOptions.find(i => i.key === item.taxType).label : ""}}</span>
-                  </template>
-                </USelectMenu>
-              </UFormGroup>
               <UFormGroup
                   v-if="useNetMode"
                   label="Gesamtbetrag exkl. Steuer in EUR"
@@ -389,6 +382,7 @@ const createIncomingInvoice = async () => {
                     type="number"
                     step="0.01"
                     v-model="item.amountNet"
+                    :color="!item.amountNet ? 'rose' : ''"
                     :disabled="item.taxType === null"
                     @keyup="item.amountTax = Number((item.amountNet * (Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2))"
                 >
@@ -409,6 +403,7 @@ const createIncomingInvoice = async () => {
                     step="0.01"
                     :disabled="item.taxType === null"
                     v-model="item.amountGross"
+                    :color="!item.amountGross ? 'rose' : ''"
                     @keyup="item.amountNet = Number((item.amountGross / (1 + Number(item.taxType)/100)).toFixed(2)),
                   item.amountTax = Number((item.amountGross - item.amountNet).toFixed(2))"
                 >
@@ -418,8 +413,23 @@ const createIncomingInvoice = async () => {
                 </UInput>
 
               </UFormGroup>
-
+              <UFormGroup
-
+                  label="Umsatzsteuer"
+                  class="w-32"
+                  :help="`Betrag: ${item.amountTax ? String(item.amountTax).replace('.',',') : '0,00'} €`"
+              >
+                <USelectMenu
+                    :options="taxOptions"
+                    v-model="item.taxType"
+                    value-attribute="key"
+                    option-attribute="label"
+                    @change="item.amountTax = Number(((item.amountNet ? item.amountNet : 0) * (Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2))"
+                >
+                  <template #label>
+                    <span class="truncate">{{taxOptions.find(i => i.key === item.taxType) ? taxOptions.find(i => i.key === item.taxType).label : ""}}</span>
+                  </template>
+                </USelectMenu>
+              </UFormGroup>
             </InputGroup>
 
 
@@ -427,7 +437,7 @@ const createIncomingInvoice = async () => {
                 class="mt-3"
                 @click="itemInfo.accounts = [...itemInfo.accounts.slice(0,index+1),{account:null, amountNet: null, amountTax:null, taxType: '19'} , ...itemInfo.accounts.slice(index+1)]"
             >
-              Position hinzufügen
+              Betrag aufteilen
             </UButton>
             <UButton
                 v-if="index !== 0"