feat(pdf): footer implements

Novout · Nov 9, 2021 · 2fa9dfe · 2fa9dfe
1 parent 40c0bf6
commit 2fa9dfe
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 17 deletions.
diff --git a/src/components/editor/pdf/set/PDFConfigurationSetBase.vue b/src/components/editor/pdf/set/PDFConfigurationSetBase.vue
@@ -69,21 +69,37 @@
         </section>
       </div>
       <div class="wb-input-container">
-        <label class="mx-2 text-xs">{{
-          t('editor.pdf.base.footer.title')
-        }}</label>
         <section
-          class="flex justify-between items-center w-full flex-row flex-wrap"
+          class="flex justify-start items-center w-full flex-row flex-wrap"
         >
-          <InputBoolean v-model="pdf.switcher.footer" />
-          <section
-            :class="[
-              !pdf.switcher.footer ? 'wb-disabled' : '',
-            ]"
-          >
+          <section class="flex items-center">
+            <label class="mx-2 text-xs">{{
+              t('editor.pdf.base.footer.title')
+            }}</label>
+            <InputBoolean v-model="pdf.switcher.footer" />
+          </section>
+          <section :class="[!pdf.switcher.footer ? 'wb-disabled' : '']">
             <label>{{ t('editor.pdf.base.footer.start') }}</label>
             <InputNumber v-model="pdf.base.footer.start" />
           </section>
+          <section :class="[!pdf.switcher.footer ? 'wb-disabled' : '']">
+            <label>{{ t('editor.pdf.base.footer.alignment') }}</label>
+            <InputCarousel
+              v-model="pdf.base.footer.alignment"
+              :arr="['default', 'left', 'center', 'right']"
+            />
+          </section>
+          <section :class="[!pdf.switcher.footer ? 'wb-disabled' : '']">
+            <label>{{ t('editor.pdf.base.footer.size') }}</label>
+            <InputNumber v-model="pdf.base.footer.textSize" />
+          </section>
+          <section :class="[!pdf.switcher.footer ? 'wb-disabled' : '']">
+            <label>{{ t('editor.pdf.base.footer.type') }}</label>
+            <InputCarousel
+              v-model="pdf.base.footer.textType"
+              :arr="['simple', 'counter']"
+            />
+          </section>
         </section>
       </div>
     </div>

diff --git a/src/lang/br/editor.ts b/src/lang/br/editor.ts
@@ -118,6 +118,9 @@ export default {
         title: 'Rodapé',
         exists: 'Habilitar',
         start: 'Início',
+        alignment: 'Alinhamento',
+        size: 'Tamanho',
+        type: 'Estilo',
       },
     },
     custom: {

diff --git a/src/lang/en/editor.ts b/src/lang/en/editor.ts
@@ -119,6 +119,9 @@ export default {
         title: 'Footer',
         exists: 'On',
         start: 'Initial',
+        alignment: 'Alignment',
+        size: 'Size',
+        type: 'Style',
       },
     },
     custom: {

diff --git a/src/store/pdf.ts b/src/store/pdf.ts
@@ -24,6 +24,9 @@ export const usePDFStore = defineStore('pdf', {
           },
           footer: {
             start: 3,
+            alignment: 'default',
+            textSize: 9,
+            textType: 'simple',
           },
         },
         paragraph: {

diff --git a/src/types/pdf.ts b/src/types/pdf.ts
@@ -34,6 +34,9 @@ export interface PDFStateStylesBase {
 
 export interface PDFStateStylesBaseFooter {
   start: number
+  alignment: 'default' | 'left' | 'center' | 'right'
+  textSize: number
+  textType: 'simple' | 'counter'
 }
 
 export interface PDFStateStylesParagraph {

diff --git a/src/use/pdf.ts b/src/use/pdf.ts
@@ -433,6 +433,44 @@ export const usePDF = () => {
   }
 
   const doc = (options: Record<any, any>) => {
+    const footer = () => {
+      const text = (
+        currentPage: number,
+        pageCount: number,
+        pageSize: number
+      ) => {
+        return currentPage >= PDF.styles.base.footer.start
+          ? PDF.styles.base.footer.textType === 'simple'
+            ? currentPage.toString()
+            : `${currentPage.toString()}/${pageCount}`
+          : ''
+      }
+
+      const alignment = (
+        currentPage: number,
+        pageCount: number,
+        pageSize: number
+      ) => {
+        if (PDF.styles.base.footer.alignment === 'default') {
+          return currentPage % 2 ? 'left' : 'right'
+        }
+
+        if (PDF.styles.base.footer.alignment === 'center') {
+          return 'center'
+        }
+
+        if (PDF.styles.base.footer.alignment === 'left') {
+          return 'left'
+        }
+
+        if (PDF.styles.base.footer.alignment === 'right') {
+          return 'right'
+        }
+      }
+
+      return { alignment, text }
+    }
+
     return {
       pageSize: generate().base().pageSize,
       pageOrientation: generate().base().pageOrientation,
@@ -478,13 +516,10 @@ export const usePDF = () => {
         ? function (currentPage: number, pageCount: number, pageSize: number) {
             return [
               {
-                text:
-                  currentPage >= PDF.styles.base.footer.start
-                    ? currentPage.toString()
-                    : '',
+                text: footer().text(currentPage, pageCount, pageSize),
                 margin: [15, 0],
-                fontSize: 9,
-                alignment: currentPage % 2 ? 'left' : 'right',
+                fontSize: PDF.styles.base.footer.textSize,
+                alignment: footer().alignment(currentPage, pageCount, pageSize),
               },
             ]
           }

diff --git a/src/use/storage/storage.ts b/src/use/storage/storage.ts
@@ -41,9 +41,12 @@ export const useStorage = () => {
     }
 
     // <= 0.7.2
-    if (!_.pdf.styles.base.footer) {
+    if (!_.pdf.styles.base.footer.alignment) {
       _.pdf.styles.base.footer = {
         start: 3,
+        alignment: 'default',
+        textType: 'simple',
+        textSize: 9,
       }
     }