Added Title to Document Creation

Added Height Calc for Row Description

composables/usePDFGenerator.js

@@ -593,7 +593,7 @@ export const useCreatePdf = async (invoiceData,backgroundSourceBuffer) => {
 
         invoiceData.rows.forEach((row,index) => {
 
-            if(row.mode !== 'pagebreak'){
+            if(row.mode !== 'pagebreak' && row.mode !== 'title'){
 
                 pages[pageCounter - 1].drawText(String(row.pos), {
                     ...getCoordinatesForPDFLib(21,rowHeight, page1),
@@ -625,7 +625,7 @@ export const useCreatePdf = async (invoiceData,backgroundSourceBuffer) => {
 
                 if(row.description) {
                     pages[pageCounter - 1].drawText(row.description, {
-                        ...getCoordinatesForPDFLib(52,rowHeight + 7, page1),
+                        ...getCoordinatesForPDFLib(52,rowHeight + 5, page1),
                         size:10,
                         color:rgb(0,0,0),
                         lineHeight:10,
@@ -667,10 +667,14 @@ export const useCreatePdf = async (invoiceData,backgroundSourceBuffer) => {
                     })
                 }
 
+
+
                 if(row.description) {
-                    rowHeight += 24
+                    let lineBreaks = (row.description.match(/\n/g) || []).length
+                    let autoLines = (row.description.match(/.{1,50}/g) || []).length
+                    rowHeight += 14 + (lineBreaks + autoLines) * 2.5
                 } else {
-                    rowHeight += 14
+                    rowHeight += 10
                 }
 
 
@@ -784,6 +788,29 @@ export const useCreatePdf = async (invoiceData,backgroundSourceBuffer) => {
 
 
 
+            } else if (row.mode === 'title') {
+                if(index === 0) {
+                    rowHeight += 3
+                }
+                pages[pageCounter - 1].drawRectangle({
+                    ...getCoordinatesForPDFLib(20,rowHeight, page1),
+                    width: 180 * 2.83,
+                    height: 8 * 2.83,
+                    color: rgb(0,0,0),
+                    opacity: 0.25
+                })
+
+                pages[pageCounter - 1].drawText(row.text, {
+                    ...getCoordinatesForPDFLib(21,rowHeight -3, page1),
+                    size:12,
+                    color:rgb(0,0,0),
+                    lineHeight:12,
+                    opacity: 1,
+                    maxWidth: 240,
+                    font: fontBold
+                })
+
+                rowHeight += 8
             }
 
 
@@ -797,7 +824,7 @@ export const useCreatePdf = async (invoiceData,backgroundSourceBuffer) => {
 
 
         //Footer
-        console.log(rowHeight)
+        //console.log(rowHeight)
         //rowHeight += 25
         pages[pageCounter - 1].drawRectangle({
             ...getCoordinatesForPDFLib(20,rowHeight, page1),

pages/createDocument/edit/[[id]].vue

@@ -211,6 +211,11 @@ const addPosition = (mode) => {
       id: lastId +1,
       mode: "pagebreak",
     })
+  } else if(mode === "title") {
+    itemInfo.value.rows.push({
+      id: lastId +1,
+      mode: "title",
+    })
   }
 
   setPosNumbers()
@@ -251,7 +256,7 @@ const documentTotal = computed(() => {
   let totalGross = 0
 
   itemInfo.value.rows.forEach(row => {
-    if(row.mode !== 'pagebreak'){
+    if(row.mode !== 'pagebreak' && row.mode !== 'title'){
       console.log(row)
       let rowPrice = Number(Number(row.quantity) * Number(row.price) * (1 - Number(row.discountPercent) /100) ).toFixed(2)
       console.log(rowPrice)
@@ -288,7 +293,7 @@ const getDocumentData = () => {
 
     let unit = dataStore.units.find(i => i.id === row.unit)
 
-    if(row.mode !== 'pagebreak') {
+    if(row.mode !== 'pagebreak' && row.mode !== 'title') {
       if(row.mode === 'normal') row.text = dataStore.getProductById(row.product).name
       if(row.mode === 'service') row.text = dataStore.getServiceById(row.service).name
 
@@ -922,7 +927,16 @@ setupPage()
                     <UDivider/>
                   </td>
                   <td
-                      v-if="row.mode !== 'pagebreak'"
+                      v-if="row.mode === 'title'"
+                      colspan="9"
+                  >
+                    <UInput
+                      v-model="row.text"
+                      placeholder="Text"
+                    />
+                  </td>
+                  <td
+                      v-if="row.mode !== 'pagebreak' && row.mode !== 'title'"
                   >{{row.pos}}</td>
                   <td
                       class="w-120"
@@ -980,7 +994,7 @@ setupPage()
                   </td>
                   <td
                       class="w-20"
-                      v-if="row.mode !== 'pagebreak'"
+                      v-if="row.mode !== 'pagebreak' && row.mode !== 'title'"
                   >
                     <UInput
                         v-model="row.quantity"
@@ -991,7 +1005,7 @@ setupPage()
                   </td>
                   <td
                       class="w-40"
-                      v-if="row.mode !== 'pagebreak'"
+                      v-if="row.mode !== 'pagebreak' && row.mode !== 'title'"
                   >
                     <USelectMenu
                         v-model="row.unit"
@@ -1006,7 +1020,7 @@ setupPage()
                   </td>
                   <td
                       class="w-40"
-                      v-if="row.mode !== 'pagebreak'"
+                      v-if="row.mode !== 'pagebreak' && row.mode !== 'title'"
                   >
                     <UInput
                         v-model="row.price"
@@ -1020,7 +1034,7 @@ setupPage()
                   </td>
                   <td
                       class="w-40"
-                      v-if="row.mode !== 'pagebreak'"
+                      v-if="row.mode !== 'pagebreak' && row.mode !== 'title'"
 
                   >
                     <USelectMenu
@@ -1038,7 +1052,7 @@ setupPage()
                   </td>
                   <td
                       class="w-40"
-                      v-if="row.mode !== 'pagebreak'"
+                      v-if="row.mode !== 'pagebreak' && row.mode !== 'title'"
                   >
                     <UInput
                         v-model="row.discountPercent"
@@ -1053,7 +1067,7 @@ setupPage()
                   </td>
                   <td
                       class="w-40"
-                      v-if="row.mode !== 'pagebreak'"
+                      v-if="row.mode !== 'pagebreak' && row.mode !== 'title'"
                   >
                     <UButton
                       icon="i-heroicons-document-text"
@@ -1083,7 +1097,7 @@ setupPage()
                     </UModal>
                   </td>
                   <td
-                      v-if="row.mode !== 'pagebreak'"
+                      v-if="row.mode !== 'pagebreak' && row.mode !== 'title'"
                   >
                     <p class="text-right font-bold whitespace-nowrap">{{getRowAmount(row)}} €</p>
                   </td>
@@ -1125,6 +1139,12 @@ setupPage()
             >
               + Seitenumbruch
             </UButton>
+            <UButton
+                @click="addPosition('title')"
+                class="mt-3"
+            >
+              + Titel
+            </UButton>
           </InputGroup>
 
           <table>