From 2e0eb654e9c8aa69fc0937c7374e8f213581a9fb Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Wed, 22 Feb 2023 14:15:59 +0530
Subject: [PATCH 01/33] incr: scaffold template builder

---
 models/baseModels/PrintTemplate.ts |  8 ++++++++
 models/index.ts                    |  2 ++
 schemas/app/PrintTemplate.json     | 32 ++++++++++++++++++++++++++++++
 schemas/schemas.ts                 | 10 ++++++----
 src/pages/TemplateBuilder.vue      | 11 ++++++++++
 src/router.ts                      |  6 ++++++
 src/utils/sidebarConfig.ts         |  5 +++++
 7 files changed, 70 insertions(+), 4 deletions(-)
 create mode 100644 models/baseModels/PrintTemplate.ts
 create mode 100644 schemas/app/PrintTemplate.json
 create mode 100644 src/pages/TemplateBuilder.vue

diff --git a/models/baseModels/PrintTemplate.ts b/models/baseModels/PrintTemplate.ts
new file mode 100644
index 000000000..54bbec34b
--- /dev/null
+++ b/models/baseModels/PrintTemplate.ts
@@ -0,0 +1,8 @@
+import { Doc } from 'fyo/model/doc';
+
+export class PrintTemplate extends Doc {
+  name?: string;
+  type?: string;
+  template?: string;
+  isCustom?: boolean;
+}
diff --git a/models/index.ts b/models/index.ts
index 75899c29e..14a7ea4d0 100644
--- a/models/index.ts
+++ b/models/index.ts
@@ -29,6 +29,7 @@ import { StockLedgerEntry } from './inventory/StockLedgerEntry';
 import { StockMovement } from './inventory/StockMovement';
 import { StockMovementItem } from './inventory/StockMovementItem';
 
+import { PrintTemplate } from './baseModels/PrintTemplate';
 export const models = {
   Account,
   AccountingLedgerEntry,
@@ -48,6 +49,7 @@ export const models = {
   SalesInvoice,
   SalesInvoiceItem,
   SetupWizard,
+  PrintTemplate,
   Tax,
   TaxSummary,
   // Inventory Models
diff --git a/schemas/app/PrintTemplate.json b/schemas/app/PrintTemplate.json
new file mode 100644
index 000000000..68ad64f99
--- /dev/null
+++ b/schemas/app/PrintTemplate.json
@@ -0,0 +1,32 @@
+{
+  "name": "PrintTemplate",
+  "label": "Print Template",
+  "naming": "manual",
+  "isSingle": false,
+  "fields": [
+    {
+      "fieldname": "name",
+      "label": "Template Name",
+      "fieldtype": "Data",
+      "required": true
+    },
+    {
+      "fieldname": "type",
+      "label": "Template Type",
+      "fieldtype": "Select",
+      "required": true
+    },
+    {
+      "fieldname": "template",
+      "label": "Template",
+      "fieldtype": "Data",
+      "required": true
+    },
+    {
+      "fieldname": "isCustom",
+      "label": "Is Custom",
+      "fieldtype": "Check",
+      "default": false
+    }
+  ]
+}
diff --git a/schemas/schemas.ts b/schemas/schemas.ts
index 8d4fdf0f5..e560ab851 100644
--- a/schemas/schemas.ts
+++ b/schemas/schemas.ts
@@ -2,11 +2,13 @@ import Account from './app/Account.json';
 import AccountingLedgerEntry from './app/AccountingLedgerEntry.json';
 import AccountingSettings from './app/AccountingSettings.json';
 import Address from './app/Address.json';
+import Batch from './app/Batch.json';
 import Color from './app/Color.json';
 import CompanySettings from './app/CompanySettings.json';
 import Currency from './app/Currency.json';
 import Defaults from './app/Defaults.json';
 import GetStarted from './app/GetStarted.json';
+import InventorySettings from './app/inventory/InventorySettings.json';
 import Location from './app/inventory/Location.json';
 import PurchaseReceipt from './app/inventory/PurchaseReceipt.json';
 import PurchaseReceiptItem from './app/inventory/PurchaseReceiptItem.json';
@@ -17,6 +19,7 @@ import StockMovement from './app/inventory/StockMovement.json';
 import StockMovementItem from './app/inventory/StockMovementItem.json';
 import StockTransfer from './app/inventory/StockTransfer.json';
 import StockTransferItem from './app/inventory/StockTransferItem.json';
+import UOMConversionItem from './app/inventory/UOMConversionItem.json';
 import Invoice from './app/Invoice.json';
 import InvoiceItem from './app/InvoiceItem.json';
 import Item from './app/Item.json';
@@ -28,6 +31,7 @@ import Party from './app/Party.json';
 import Payment from './app/Payment.json';
 import PaymentFor from './app/PaymentFor.json';
 import PrintSettings from './app/PrintSettings.json';
+import PrintTemplate from './app/PrintTemplate.json';
 import PurchaseInvoice from './app/PurchaseInvoice.json';
 import PurchaseInvoiceItem from './app/PurchaseInvoiceItem.json';
 import SalesInvoice from './app/SalesInvoice.json';
@@ -37,7 +41,6 @@ import Tax from './app/Tax.json';
 import TaxDetail from './app/TaxDetail.json';
 import TaxSummary from './app/TaxSummary.json';
 import UOM from './app/UOM.json';
-import UOMConversionItem from './app/inventory/UOMConversionItem.json';
 import PatchRun from './core/PatchRun.json';
 import SingleValue from './core/SingleValue.json';
 import SystemSettings from './core/SystemSettings.json';
@@ -46,8 +49,6 @@ import child from './meta/child.json';
 import submittable from './meta/submittable.json';
 import tree from './meta/tree.json';
 import { Schema, SchemaStub } from './types';
-import InventorySettings from './app/inventory/InventorySettings.json';
-import Batch from './app/Batch.json'
 
 export const coreSchemas: Schema[] = [
   PatchRun as Schema,
@@ -66,6 +67,7 @@ export const appSchemas: Schema[] | SchemaStub[] = [
   Misc as Schema,
   SetupWizard as Schema,
   GetStarted as Schema,
+  PrintTemplate as Schema,
 
   Color as Schema,
   Currency as Schema,
@@ -116,5 +118,5 @@ export const appSchemas: Schema[] | SchemaStub[] = [
   PurchaseReceipt as Schema,
   PurchaseReceiptItem as Schema,
 
-  Batch as Schema
+  Batch as Schema,
 ];
diff --git a/src/pages/TemplateBuilder.vue b/src/pages/TemplateBuilder.vue
new file mode 100644
index 000000000..31aa504d6
--- /dev/null
+++ b/src/pages/TemplateBuilder.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <PageHeader :title="t`Template Builder`" />
+  </div>
+</template>
+<script lang="ts">
+import PageHeader from 'src/components/PageHeader.vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({ components: { PageHeader } });
+</script>
diff --git a/src/router.ts b/src/router.ts
index f1baf30f9..6f0b2694e 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,4 +1,5 @@
 import { ModelNameEnum } from 'models/types';
+import TemplateBuilder from 'src/pages/TemplateBuilder.vue';
 import ChartOfAccounts from 'src/pages/ChartOfAccounts.vue';
 import CommonForm from 'src/pages/CommonForm/CommonForm.vue';
 import Dashboard from 'src/pages/Dashboard/Dashboard.vue';
@@ -127,6 +128,11 @@ const routes: RouteRecordRaw[] = [
     name: 'Import Wizard',
     component: ImportWizard,
   },
+  {
+    path: '/template-builder',
+    name: 'Template Builder',
+    component: TemplateBuilder,
+  },
   {
     path: '/settings',
     name: 'Settings',
diff --git a/src/utils/sidebarConfig.ts b/src/utils/sidebarConfig.ts
index a60e603cf..7ce17925b 100644
--- a/src/utils/sidebarConfig.ts
+++ b/src/utils/sidebarConfig.ts
@@ -272,6 +272,11 @@ async function getCompleteSidebar(): Promise<SidebarConfig> {
           name: 'import-wizard',
           route: '/import-wizard',
         },
+        {
+          label: t`Template Builder`,
+          name: 'template-builder',
+          route: '/template-builder',
+        },
         {
           label: t`Settings`,
           name: 'settings',

From 28aa0f135e8d2096e9f0c979ba3a47ff63383811 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Wed, 22 Feb 2023 15:51:20 +0530
Subject: [PATCH 02/33] incr: update routing - update PrintTemplate UI code

---
 models/baseModels/PrintTemplate.ts  |  46 +++++++
 models/types.ts                     |   1 +
 schemas/app/PrintTemplate.json      |   8 +-
 src/pages/CommonForm/CommonForm.vue |  17 +--
 src/pages/TemplateBuilder.vue       | 189 +++++++++++++++++++++++++++-
 src/router.ts                       |   3 +-
 src/utils/sidebarConfig.ts          |   6 +-
 src/utils/ui.ts                     |  15 +++
 8 files changed, 263 insertions(+), 22 deletions(-)

diff --git a/models/baseModels/PrintTemplate.ts b/models/baseModels/PrintTemplate.ts
index 54bbec34b..28e87a64e 100644
--- a/models/baseModels/PrintTemplate.ts
+++ b/models/baseModels/PrintTemplate.ts
@@ -1,8 +1,54 @@
 import { Doc } from 'fyo/model/doc';
+import { SchemaMap } from 'schemas/types';
+import { ListsMap, ListViewSettings, ReadOnlyMap } from 'fyo/model/types';
+import { ModelNameEnum } from 'models/types';
 
 export class PrintTemplate extends Doc {
   name?: string;
   type?: string;
   template?: string;
   isCustom?: boolean;
+
+  static getListViewSettings(): ListViewSettings {
+    return {
+      formRoute: ({ name }) => `/template-builder/${name}`,
+      columns: ['name', 'type', 'isCustom'],
+    };
+  }
+
+  readOnly: ReadOnlyMap = {
+    name: () => !!this.isCustom,
+    type: () => !!this.isCustom,
+    template: () => !!this.isCustom,
+  };
+
+  static lists: ListsMap = {
+    type(doc?: Doc) {
+      let enableInventory: boolean = false;
+      let schemaMap: SchemaMap = {};
+      if (doc) {
+        enableInventory = !!doc.fyo.singles.AccountingSettings?.enableInventory;
+        schemaMap = doc.fyo.schemaMap;
+      }
+
+      const models = [
+        ModelNameEnum.SalesInvoice,
+        ModelNameEnum.PurchaseInvoice,
+        ModelNameEnum.Payment,
+      ];
+
+      if (enableInventory) {
+        models.push(
+          ModelNameEnum.Shipment,
+          ModelNameEnum.PurchaseReceipt,
+          ModelNameEnum.StockMovement
+        );
+      }
+
+      return models.map((value) => ({
+        value,
+        label: schemaMap[value]?.label ?? value,
+      }));
+    },
+  };
 }
diff --git a/models/types.ts b/models/types.ts
index d6c4d3c2d..800348fc0 100644
--- a/models/types.ts
+++ b/models/types.ts
@@ -21,6 +21,7 @@ export enum ModelNameEnum {
   Payment = 'Payment',
   PaymentFor = 'PaymentFor',
   PrintSettings = 'PrintSettings',
+  PrintTemplate = 'PrintTemplate',
   PurchaseInvoice = 'PurchaseInvoice',
   PurchaseInvoiceItem = 'PurchaseInvoiceItem',
   SalesInvoice = 'SalesInvoice',
diff --git a/schemas/app/PrintTemplate.json b/schemas/app/PrintTemplate.json
index 68ad64f99..e933d4b08 100644
--- a/schemas/app/PrintTemplate.json
+++ b/schemas/app/PrintTemplate.json
@@ -13,20 +13,22 @@
     {
       "fieldname": "type",
       "label": "Template Type",
-      "fieldtype": "Select",
+      "fieldtype": "AutoComplete",
+      "default": "SalesInvoice",
       "required": true
     },
     {
       "fieldname": "template",
       "label": "Template",
-      "fieldtype": "Data",
+      "fieldtype": "Text",
       "required": true
     },
     {
       "fieldname": "isCustom",
       "label": "Is Custom",
       "fieldtype": "Check",
-      "default": false
+      "default": false,
+      "readOnly": true
     }
   ]
 }
diff --git a/src/pages/CommonForm/CommonForm.vue b/src/pages/CommonForm/CommonForm.vue
index 124ea1302..fdef4edd6 100644
--- a/src/pages/CommonForm/CommonForm.vue
+++ b/src/pages/CommonForm/CommonForm.vue
@@ -116,6 +116,7 @@ import { docsPathMap } from 'src/utils/misc';
 import { docsPathRef, focusedDocsRef } from 'src/utils/refs';
 import { ActionGroup, UIGroupedFields } from 'src/utils/types';
 import {
+  getDocFromNameIfExistsElseNew,
   getFieldsGroupedByTabAndSection,
   getGroupedActionsForDoc,
 } from 'src/utils/ui';
@@ -277,18 +278,10 @@ export default defineComponent({
         return;
       }
 
-      if (this.name) {
-        await this.setDocFromName(this.name);
-      } else {
-        this.docOrNull = this.fyo.doc.getNewDoc(this.schemaName);
-      }
-    },
-    async setDocFromName(name: string) {
-      try {
-        this.docOrNull = await this.fyo.doc.getDoc(this.schemaName, name);
-      } catch (err) {
-        this.docOrNull = this.fyo.doc.getNewDoc(this.schemaName);
-      }
+      this.docOrNull = await getDocFromNameIfExistsElseNew(
+        this.schemaName,
+        this.name
+      );
     },
     async toggleQuickEditDoc(doc: Doc | null) {
       if (this.quickEditDoc && doc) {
diff --git a/src/pages/TemplateBuilder.vue b/src/pages/TemplateBuilder.vue
index 31aa504d6..ec64b3c31 100644
--- a/src/pages/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder.vue
@@ -1,11 +1,194 @@
 <template>
   <div>
-    <PageHeader :title="t`Template Builder`" />
+    <PageHeader :title="t`Template Builder`">Hi</PageHeader>
+    <!-- Template Builder Body -->
+    <div class="w-full h-full flex" v-if="doc">
+      <!-- Print View Container -->
+      <div></div>
+
+      <!-- Template Builder Controls -->
+      <div class="w-quick-edit h-full right-0 ml-auto border-l flex flex-col">
+        <!-- Print Template Fields -->
+        <div class="p-4 flex flex-col gap-4">
+          <FormControl
+            :df="fields.name"
+            :border="true"
+            :value="doc.get('name')"
+            @change="async (value) => await doc?.set('name', value)"
+          />
+        </div>
+
+        <!-- Controls -->
+        <div class="p-4 border-t">
+          <div
+            class="flex justify-between items-center cursor-pointer select-none"
+            :class="helpersCollapsed ? '' : 'mb-4'"
+            @click="helpersCollapsed = !helpersCollapsed"
+          >
+            <h2 class="text-base text-gray-900 font-semibold">
+              {{ t`Controls` }}
+            </h2>
+            <feather-icon
+              :name="helpersCollapsed ? 'chevron-up' : 'chevron-down'"
+              class="w-4 h-4 text-gray-600 resize-none"
+            />
+          </div>
+
+          <!-- 
+            TODO: 
+            - Select Test Doc
+            - View Template Data and Keys
+           -->
+          <div v-if="!helpersCollapsed" class="w-full flex flex-col gap-4">
+            <FormControl
+              :df="fields.type"
+              :show-label="true"
+              :border="true"
+              :value="doc.get('type')"
+              @change="async (value) => await doc?.set('type', value)"
+            />
+
+            <FormControl
+              v-if="doc.type"
+              :df="displayDocField"
+              :show-label="true"
+              :border="true"
+              :value="displayDoc?.name"
+              @change="(value: string) => setDisplayDoc(value)"
+            />
+
+            <FormControl
+              v-if="doc.isCustom"
+              :df="fields.isCustom"
+              :show-label="true"
+              :border="true"
+              :value="doc.get('isCustom')"
+            />
+          </div>
+        </div>
+
+        <!-- Template -->
+        <div class="p-4 border-t">
+          <div
+            class="flex justify-between items-center cursor-pointer select-none"
+            @click="templateCollapsed = !templateCollapsed"
+          >
+            <h2 class="text-base text-gray-900 font-semibold">
+              {{ t`Template` }}
+            </h2>
+            <feather-icon
+              :name="templateCollapsed ? 'chevron-up' : 'chevron-down'"
+              class="w-4 h-4 text-gray-600"
+            />
+          </div>
+
+          <!-- Template Container -->
+          <textarea
+            v-if="!templateCollapsed"
+            :spellcheck="false"
+            rows="20"
+            class="
+              overflow-auto
+              mt-4
+              p-2
+              w-full
+              border
+              rounded
+              text-sm text-gray-900
+              focus-within:bg-gray-100
+              outline-none
+              bg-gray-50
+            "
+            style="
+              font-family: monospace;
+              white-space: pre;
+              overflow-wrap: normal;
+            "
+          />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script lang="ts">
+import { PrintTemplate } from 'models/baseModels/PrintTemplate';
+import { ModelNameEnum } from 'models/types';
+import { Field, TargetField } from 'schemas/types';
+import FormControl from 'src/components/Controls/FormControl.vue';
 import PageHeader from 'src/components/PageHeader.vue';
-import { defineComponent } from 'vue';
+import { getDocFromNameIfExistsElseNew } from 'src/utils/ui';
+import { getMapFromList } from 'utils/index';
+import { computed, defineComponent } from 'vue';
+
+export default defineComponent({
+  props: { name: String },
+  components: { PageHeader, FormControl },
+  provide() {
+    return { doc: computed(() => this.doc) };
+  },
+  data() {
+    return {
+      doc: null,
+      templateCollapsed: false,
+      helpersCollapsed: true,
+      displayDoc: null,
+    } as {
+      doc: PrintTemplate | null;
+      displayDoc: PrintTemplate | null;
+      templateCollapsed: boolean;
+      helpersCollapsed: boolean;
+    };
+  },
+  async mounted() {
+    // @ts-ignore
+    window.tb = this;
+    await this.setDoc();
+
+    if (!this.doc?.template) {
+      this.helpersCollapsed = false;
+    }
+  },
+  methods: {
+    async setDoc() {
+      if (this.doc) {
+        return;
+      }
+
+      this.doc = (await getDocFromNameIfExistsElseNew(
+        ModelNameEnum.PrintTemplate,
+        this.name
+      )) as PrintTemplate;
+    },
+    async setDisplayDoc(value: string) {
+      if (!value) {
+        this.displayDoc = null;
+        return;
+      }
+
+      const schemaName = this.doc?.type;
+      if (!schemaName) {
+        return;
+      }
 
-export default defineComponent({ components: { PageHeader } });
+      this.displayDoc = await getDocFromNameIfExistsElseNew(schemaName, value);
+    },
+  },
+  computed: {
+    fields(): Record<string, Field> {
+      return getMapFromList(
+        this.fyo.schemaMap.PrintTemplate?.fields ?? [],
+        'fieldname'
+      );
+    },
+    displayDocField(): TargetField {
+      const target = this.doc?.type ?? ModelNameEnum.SalesInvoice;
+      return {
+        fieldname: 'displayDoc',
+        label: this.t`Display Doc`,
+        fieldtype: 'Link',
+        target,
+      };
+    },
+  },
+});
 </script>
diff --git a/src/router.ts b/src/router.ts
index 6f0b2694e..9d0ad93ab 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -129,9 +129,10 @@ const routes: RouteRecordRaw[] = [
     component: ImportWizard,
   },
   {
-    path: '/template-builder',
+    path: '/template-builder/:name',
     name: 'Template Builder',
     component: TemplateBuilder,
+    props: true,
   },
   {
     path: '/settings',
diff --git a/src/utils/sidebarConfig.ts b/src/utils/sidebarConfig.ts
index 7ce17925b..baea72fc4 100644
--- a/src/utils/sidebarConfig.ts
+++ b/src/utils/sidebarConfig.ts
@@ -273,9 +273,9 @@ async function getCompleteSidebar(): Promise<SidebarConfig> {
           route: '/import-wizard',
         },
         {
-          label: t`Template Builder`,
-          name: 'template-builder',
-          route: '/template-builder',
+          label: t`Print Templates`,
+          name: 'print-template',
+          route: `/list/PrintTemplate/${t`Print Templates`}`,
         },
         {
           label: t`Settings`,
diff --git a/src/utils/ui.ts b/src/utils/ui.ts
index e6423f803..dc2bacd4c 100644
--- a/src/utils/ui.ts
+++ b/src/utils/ui.ts
@@ -450,3 +450,18 @@ export function getFormRoute(
 
   return `/list/${schemaName}?edit=1&schemaName=${schemaName}&name=${name}`;
 }
+
+export async function getDocFromNameIfExistsElseNew(
+  schemaName: string,
+  name?: string
+) {
+  if (!name) {
+    return fyo.doc.getNewDoc(schemaName);
+  }
+
+  try {
+    return await fyo.doc.getDoc(schemaName, name);
+  } catch {
+    return fyo.doc.getNewDoc(schemaName);
+  }
+}

From e33ca5c3136f905593262c5c8271baeca893ae37 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Thu, 23 Feb 2023 11:06:05 +0530
Subject: [PATCH 03/33] incr: functions to get hint and values

---
 models/types.ts                  |   1 -
 schemas/app/CompanySettings.json |  22 ----
 schemas/schemas.ts               |   2 -
 src/pages/TemplateBuilder.vue    |  19 ++-
 src/utils/printTemplates.ts      | 205 +++++++++++++++++++++++++++++++
 5 files changed, 223 insertions(+), 26 deletions(-)
 delete mode 100644 schemas/app/CompanySettings.json
 create mode 100644 src/utils/printTemplates.ts

diff --git a/models/types.ts b/models/types.ts
index 800348fc0..e68fea77b 100644
--- a/models/types.ts
+++ b/models/types.ts
@@ -6,7 +6,6 @@ export enum ModelNameEnum {
   Address = 'Address',
   Batch= 'Batch',
   Color = 'Color',
-  CompanySettings = 'CompanySettings',
   Currency = 'Currency',
   GetStarted = 'GetStarted',
   Defaults = 'Defaults',
diff --git a/schemas/app/CompanySettings.json b/schemas/app/CompanySettings.json
deleted file mode 100644
index 61f5e62b7..000000000
--- a/schemas/app/CompanySettings.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "CompanySettings",
-  "label": "Company Settings",
-  "naming": "autoincrement",
-  "isSingle": true,
-  "isChild": false,
-  "fields": [
-    {
-      "fieldname": "companyName",
-      "label": "Company Name",
-      "fieldtype": "Data",
-      "required": true
-    },
-    {
-      "fieldname": "companyAddress",
-      "label": "Company Address",
-      "fieldtype": "Link",
-      "required": true,
-      "target": "Address"
-    }
-  ]
-}
diff --git a/schemas/schemas.ts b/schemas/schemas.ts
index e560ab851..811049e91 100644
--- a/schemas/schemas.ts
+++ b/schemas/schemas.ts
@@ -4,7 +4,6 @@ import AccountingSettings from './app/AccountingSettings.json';
 import Address from './app/Address.json';
 import Batch from './app/Batch.json';
 import Color from './app/Color.json';
-import CompanySettings from './app/CompanySettings.json';
 import Currency from './app/Currency.json';
 import Defaults from './app/Defaults.json';
 import GetStarted from './app/GetStarted.json';
@@ -75,7 +74,6 @@ export const appSchemas: Schema[] | SchemaStub[] = [
   NumberSeries as Schema,
 
   PrintSettings as Schema,
-  CompanySettings as Schema,
 
   Account as Schema,
   AccountingSettings as Schema,
diff --git a/src/pages/TemplateBuilder.vue b/src/pages/TemplateBuilder.vue
index ec64b3c31..bb3bd22ae 100644
--- a/src/pages/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder.vue
@@ -4,7 +4,15 @@
     <!-- Template Builder Body -->
     <div class="w-full h-full flex" v-if="doc">
       <!-- Print View Container -->
-      <div></div>
+      <div>
+        <!-- Display Hints -->
+        <div v-if="!displayDoc" class="p-4 text-sm text-gray-700">
+          <div v-if="!doc.type">{{ t`Select a Template Type` }}</div>
+          <div v-else-if="!displayDoc">
+            {{ t`Select a Display Doc to view the Template` }}
+          </div>
+        </div>
+      </div>
 
       <!-- Template Builder Controls -->
       <div class="w-quick-edit h-full right-0 ml-auto border-l flex flex-col">
@@ -116,6 +124,10 @@ import { ModelNameEnum } from 'models/types';
 import { Field, TargetField } from 'schemas/types';
 import FormControl from 'src/components/Controls/FormControl.vue';
 import PageHeader from 'src/components/PageHeader.vue';
+import {
+  getPrintTemplatePropHints,
+  getPrintTemplatePropValues,
+} from 'src/utils/printTemplates';
 import { getDocFromNameIfExistsElseNew } from 'src/utils/ui';
 import { getMapFromList } from 'utils/index';
 import { computed, defineComponent } from 'vue';
@@ -147,6 +159,11 @@ export default defineComponent({
     if (!this.doc?.template) {
       this.helpersCollapsed = false;
     }
+
+    // @ts-ignore
+    window.hints = getPrintTemplatePropHints;
+    // @ts-ignore
+    window.values = getPrintTemplatePropValues;
   },
   methods: {
     async setDoc() {
diff --git a/src/utils/printTemplates.ts b/src/utils/printTemplates.ts
new file mode 100644
index 000000000..1d5f9a891
--- /dev/null
+++ b/src/utils/printTemplates.ts
@@ -0,0 +1,205 @@
+import { Fyo } from 'fyo';
+import { Doc } from 'fyo/model/doc';
+import { Invoice } from 'models/baseModels/Invoice/Invoice';
+import { ModelNameEnum } from 'models/types';
+import { FieldTypeEnum, Schema, TargetField } from 'schemas/types';
+
+type PrintTemplateData = Record<string, unknown>;
+
+const printSettingsFields = [
+  'logo',
+  'displayLogo',
+  'displayTaxInvoice',
+  'color',
+  'font',
+  'email',
+  'phone',
+  'address',
+];
+const accountingSettingsFields = ['companyName', 'gstin'];
+
+export async function getPrintTemplatePropValues(doc: Doc) {
+  const fyo = doc.fyo;
+  const values: PrintTemplateData = {};
+  values.doc = await getPrintTemplateDocValues(doc);
+
+  const printSettings = await fyo.doc.getDoc(ModelNameEnum.PrintSettings);
+  const printValues = await getPrintTemplateDocValues(
+    printSettings,
+    printSettingsFields
+  );
+
+  const accountingSettings = await fyo.doc.getDoc(
+    ModelNameEnum.AccountingSettings
+  );
+  const accountingValues = await getPrintTemplateDocValues(
+    accountingSettings,
+    accountingSettingsFields
+  );
+
+  values.print = {
+    ...printValues,
+    ...accountingValues,
+  };
+
+  if (doc.schemaName?.endsWith('Invoice')) {
+    (values.doc as PrintTemplateData).totalDiscount =
+      formattedTotalDiscount(doc);
+    (values.doc as PrintTemplateData).showHSN = showHSN(doc);
+  }
+
+  return values;
+}
+
+export function getPrintTemplatePropHints(doc: Doc) {
+  const hints: PrintTemplateData = {};
+  const fyo = doc.fyo;
+  hints.doc = getPrintTemplateDocHints(doc.schema, doc.fyo);
+
+  const printSettingsHints = getPrintTemplateDocHints(
+    fyo.schemaMap[ModelNameEnum.PrintSettings]!,
+    doc.fyo,
+    printSettingsFields
+  );
+  const accountingSettingsHints = getPrintTemplateDocHints(
+    fyo.schemaMap[ModelNameEnum.AccountingSettings]!,
+    doc.fyo,
+    accountingSettingsFields
+  );
+
+  hints.print = {
+    ...printSettingsHints,
+    ...accountingSettingsHints,
+  };
+
+  if (doc.schemaName?.endsWith('Invoice')) {
+    (hints.doc as PrintTemplateData).totalDiscount = fyo.t`Total Discount`;
+    (hints.doc as PrintTemplateData).showHSN = fyo.t`Show HSN`;
+  }
+
+  return hints;
+}
+
+function showHSN(doc: Doc): boolean {
+  if (!Array.isArray(doc.items)) {
+    return false;
+  }
+
+  return doc.items.map((i) => i.hsnCode).every(Boolean);
+}
+
+function formattedTotalDiscount(doc: Doc): string {
+  if (!(doc instanceof Invoice)) {
+    return '';
+  }
+
+  const totalDiscount = doc.getTotalDiscount();
+  if (!totalDiscount?.float) {
+    return '';
+  }
+
+  return doc.fyo.format(totalDiscount, ModelNameEnum.Currency);
+}
+
+function getPrintTemplateDocHints(
+  schema: Schema,
+  fyo: Fyo,
+  fieldnames?: string[],
+  isLink?: boolean
+): PrintTemplateData {
+  isLink ??= false;
+  const hints: PrintTemplateData = {};
+  const links: PrintTemplateData = {};
+
+  let fields = schema.fields;
+  if (fieldnames) {
+    fields = fields.filter((f) => fieldnames.includes(f.fieldname));
+  }
+
+  for (const field of fields) {
+    const { fieldname, fieldtype, label, meta } = field;
+    if (fieldtype === FieldTypeEnum.Attachment || meta) {
+      continue;
+    }
+
+    hints[fieldname] = label ?? fieldname;
+    if (fieldtype === FieldTypeEnum.Table) {
+    }
+
+    const { target } = field as TargetField;
+    const targetSchema = fyo.schemaMap[target];
+    if (fieldtype === FieldTypeEnum.Link && targetSchema && !isLink) {
+      links[fieldname] = getPrintTemplateDocHints(
+        targetSchema,
+        fyo,
+        undefined,
+        true
+      );
+    }
+
+    if (fieldtype === FieldTypeEnum.Table && targetSchema) {
+      hints[fieldname] = [getPrintTemplateDocHints(targetSchema, fyo)];
+    }
+  }
+
+  if (Object.keys(links).length) {
+    hints.links = links;
+  }
+  return hints;
+}
+
+async function getPrintTemplateDocValues(doc: Doc, fieldnames?: string[]) {
+  const values: PrintTemplateData = {};
+  if (!(doc instanceof Doc)) {
+    return values;
+  }
+
+  let fields = doc.schema.fields;
+  if (fieldnames) {
+    fields = fields.filter((f) => fieldnames.includes(f.fieldname));
+  }
+
+  // Set Formatted Doc Data
+  for (const field of fields) {
+    const { fieldname, fieldtype, meta } = field;
+    if (fieldtype === FieldTypeEnum.Attachment || meta) {
+      continue;
+    }
+
+    const value = doc.get(fieldname);
+
+    if (!value) {
+      values[fieldname] = '';
+      continue;
+    }
+
+    if (!Array.isArray(value)) {
+      values[fieldname] = doc.fyo.format(value, field, doc);
+      continue;
+    }
+
+    const table: PrintTemplateData[] = [];
+    for (const row of value) {
+      const rowProps = await getPrintTemplateDocValues(row);
+      table.push(rowProps);
+    }
+
+    values[fieldname] = table;
+  }
+
+  // Set Formatted Doc Link Data
+  await doc.loadLinks();
+  const links: PrintTemplateData = {};
+  for (const [linkName, linkDoc] of Object.entries(doc.links ?? {})) {
+    if (fieldnames && !fieldnames.includes(linkName)) {
+      continue;
+    }
+
+    links[linkName] = await getPrintTemplateDocValues(linkDoc);
+  }
+
+  if (Object.keys(links).length) {
+    values.links = links;
+  }
+  return values;
+}

From dca5b525677e7d5c0e12eaf91ca1847e8c658351 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Thu, 23 Feb 2023 15:58:09 +0530
Subject: [PATCH 04/33] incr: add template key hint - shift TemplateBuilder
 into folder

---
 .../{ => TemplateBuilder}/TemplateBuilder.vue |  64 +++++++++-
 .../TemplateBuilder/TemplateBuilderHint.vue   | 110 ++++++++++++++++++
 src/router.ts                                 |   2 +-
 3 files changed, 169 insertions(+), 7 deletions(-)
 rename src/pages/{ => TemplateBuilder}/TemplateBuilder.vue (78%)
 create mode 100644 src/pages/TemplateBuilder/TemplateBuilderHint.vue

diff --git a/src/pages/TemplateBuilder.vue b/src/pages/TemplateBuilder/TemplateBuilder.vue
similarity index 78%
rename from src/pages/TemplateBuilder.vue
rename to src/pages/TemplateBuilder/TemplateBuilder.vue
index bb3bd22ae..0589669e0 100644
--- a/src/pages/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilder.vue
@@ -1,6 +1,10 @@
 <template>
   <div>
-    <PageHeader :title="t`Template Builder`">Hi</PageHeader>
+    <PageHeader :title="t`Template Builder`"
+      ><Button v-if="displayDoc" @click="showHint = true">{{
+        t`Show Hint`
+      }}</Button></PageHeader
+    >
     <!-- Template Builder Body -->
     <div class="w-full h-full flex" v-if="doc">
       <!-- Print View Container -->
@@ -116,13 +120,35 @@
         </div>
       </div>
     </div>
+
+    <!-- Hint Modal -->
+    <Modal
+      @closemodal="() => (showHint = false)"
+      :open-modal="showHint"
+      v-if="displayDoc && hint"
+    >
+      <div class="w-form">
+        <!-- Hint Modal Header -->
+        <FormHeader
+          :form-title="t`Hint`"
+          :form-sub-title="displayDoc.schema.label"
+        />
+        <hr />
+        <div class="p-4 max-h-96 overflow-auto custom-scroll">
+          <TemplateBuilderHint :hint="hint" />
+        </div>
+      </div>
+    </Modal>
   </div>
 </template>
 <script lang="ts">
 import { PrintTemplate } from 'models/baseModels/PrintTemplate';
 import { ModelNameEnum } from 'models/types';
 import { Field, TargetField } from 'schemas/types';
+import Button from 'src/components/Button.vue';
 import FormControl from 'src/components/Controls/FormControl.vue';
+import FormHeader from 'src/components/FormHeader.vue';
+import Modal from 'src/components/Modal.vue';
 import PageHeader from 'src/components/PageHeader.vue';
 import {
   getPrintTemplatePropHints,
@@ -131,39 +157,61 @@ import {
 import { getDocFromNameIfExistsElseNew } from 'src/utils/ui';
 import { getMapFromList } from 'utils/index';
 import { computed, defineComponent } from 'vue';
+import TemplateBuilderHint from './TemplateBuilderHint.vue';
 
 export default defineComponent({
   props: { name: String },
-  components: { PageHeader, FormControl },
+  components: {
+    PageHeader,
+    FormControl,
+    Button,
+    Modal,
+    FormHeader,
+    TemplateBuilderHint,
+  },
   provide() {
     return { doc: computed(() => this.doc) };
   },
   data() {
     return {
       doc: null,
+      showHint: false,
+      hint: null,
+      values: null,
       templateCollapsed: false,
       helpersCollapsed: true,
       displayDoc: null,
     } as {
+      hint: null | Record<string, unknown>;
+      values: null | Record<string, unknown>;
       doc: PrintTemplate | null;
+      showHint: boolean;
       displayDoc: PrintTemplate | null;
       templateCollapsed: boolean;
       helpersCollapsed: boolean;
     };
   },
   async mounted() {
-    // @ts-ignore
-    window.tb = this;
     await this.setDoc();
 
     if (!this.doc?.template) {
       this.helpersCollapsed = false;
     }
 
+    if (!this.fyo.store.isDevelopment) {
+      return;
+    }
+
+    // @ts-ignore
+    window.tb = this;
+
     // @ts-ignore
     window.hints = getPrintTemplatePropHints;
+
     // @ts-ignore
     window.values = getPrintTemplatePropValues;
+
+    this.setDisplayDoc('SINV-1001');
   },
   methods: {
     async setDoc() {
@@ -178,6 +226,8 @@ export default defineComponent({
     },
     async setDisplayDoc(value: string) {
       if (!value) {
+        this.hint = null;
+        this.values = null;
         this.displayDoc = null;
         return;
       }
@@ -186,8 +236,10 @@ export default defineComponent({
       if (!schemaName) {
         return;
       }
-
-      this.displayDoc = await getDocFromNameIfExistsElseNew(schemaName, value);
+      const displayDoc = await getDocFromNameIfExistsElseNew(schemaName, value);
+      this.hint = getPrintTemplatePropHints(displayDoc);
+      this.values = await getPrintTemplatePropValues(displayDoc);
+      this.displayDoc = displayDoc;
     },
   },
   computed: {
diff --git a/src/pages/TemplateBuilder/TemplateBuilderHint.vue b/src/pages/TemplateBuilder/TemplateBuilderHint.vue
new file mode 100644
index 000000000..15537e98a
--- /dev/null
+++ b/src/pages/TemplateBuilder/TemplateBuilderHint.vue
@@ -0,0 +1,110 @@
+<template>
+  <div :class="level > 0 ? 'ms-2 ps-2 border-l' : ''">
+    <template v-for="r of rows" :key="r.key">
+      <div
+        class="
+          flex
+          gap-2
+          text-sm text-gray-600
+          whitespace-nowrap
+          overflow-auto
+          no-scrollbar
+        "
+        :class="[typeof r.value === 'object' ? 'cursor-pointer' : '']"
+        @click="r.collapsed = !r.collapsed"
+      >
+        <div class="">{{ getKey(r) }}</div>
+        <div v-if="!r.isCollapsible" class="font-semibold text-gray-800">
+          {{ r.value }}
+        </div>
+        <div
+          v-else-if="Array.isArray(r.value)"
+          class="
+            text-blue-600
+            bg-blue-50
+            border-blue-200 border
+            tracking-tighter
+            rounded
+            text-xs
+            px-1
+          "
+        >
+          Array
+        </div>
+        <div
+          v-else
+          class="
+            text-green-600
+            bg-green-50
+            border-green-200 border
+            tracking-tighter
+            rounded
+            text-xs
+            px-1
+          "
+        >
+          Object
+        </div>
+
+        <feather-icon
+          v-if="r.isCollapsible"
+          :name="r.collapsed ? 'chevron-up' : 'chevron-down'"
+          class="w-4 h-4 ms-auto"
+        />
+      </div>
+      <div v-if="!r.collapsed && typeof r.value === 'object'">
+        <TemplateBuilderHint
+          :prefix="getKey(r)"
+          :hint="Array.isArray(r.value) ? r.value[0] : r.value"
+          :level="level + 1"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+type HintRow = {
+  key: string;
+  value: string | Record<string, unknown>;
+  isCollapsible: boolean;
+  collapsed: boolean;
+};
+export default defineComponent({
+  name: 'TemplateBuilderHint',
+  props: {
+    prefix: { type: String, default: '' },
+    hint: { type: Object, required: true },
+    level: { type: Number, default: 0 },
+  },
+  data() {
+    return { rows: [] } as {
+      rows: HintRow[];
+    };
+  },
+  mounted() {
+    this.rows = Object.entries(this.hint)
+      .map(([key, value]) => ({
+        key,
+        value,
+        isCollapsible: typeof value === 'object',
+        collapsed: this.level > 0,
+      }))
+      .sort((a, b) => Number(a.isCollapsible) - Number(b.isCollapsible));
+  },
+  methods: {
+    getKey(row: HintRow) {
+      const isArray = Array.isArray(row.value);
+      if (isArray) {
+        return `${this.prefix}.${row.key}[number]`;
+      }
+
+      if (this.prefix.length) {
+        return `${this.prefix}.${row.key}`;
+      }
+
+      return row.key;
+    },
+  },
+});
+</script>
diff --git a/src/router.ts b/src/router.ts
index 9d0ad93ab..b89a52de7 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,5 +1,5 @@
 import { ModelNameEnum } from 'models/types';
-import TemplateBuilder from 'src/pages/TemplateBuilder.vue';
+import TemplateBuilder from 'src/pages/TemplateBuilder/TemplateBuilder.vue';
 import ChartOfAccounts from 'src/pages/ChartOfAccounts.vue';
 import CommonForm from 'src/pages/CommonForm/CommonForm.vue';
 import Dashboard from 'src/pages/Dashboard/Dashboard.vue';

From 6cf4a5ec0c3591c4547f4c2957e60148d4734d79 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Thu, 23 Feb 2023 18:06:50 +0530
Subject: [PATCH 05/33] incr: add pdf and doc actions

---
 src/pages/PrintView/PrintView.vue             |  63 +-------
 src/pages/TemplateBuilder/TemplateBuilder.vue | 140 +++++++++++++++---
 src/utils/printTemplates.ts                   |  46 ++++++
 src/utils/ui.ts                               |  13 +-
 4 files changed, 180 insertions(+), 82 deletions(-)

diff --git a/src/pages/PrintView/PrintView.vue b/src/pages/PrintView/PrintView.vue
index 13b6458f5..1fca66122 100644
--- a/src/pages/PrintView/PrintView.vue
+++ b/src/pages/PrintView/PrintView.vue
@@ -65,6 +65,10 @@ import InvoiceTemplate from 'src/components/SalesInvoice/InvoiceTemplate.vue';
 import TwoColumnForm from 'src/components/TwoColumnForm.vue';
 import { fyo } from 'src/initFyo';
 import { makePDF } from 'src/utils/ipcCalls';
+import {
+  constructPrintDocument,
+  getPathAndMakePDF,
+} from 'src/utils/printTemplates';
 import { IPC_ACTIONS } from 'utils/messages';
 
 export default {
@@ -96,66 +100,11 @@ export default {
     },
   },
   methods: {
-    constructPrintDocument() {
-      const html = document.createElement('html');
-      const head = document.createElement('head');
-      const body = document.createElement('body');
-      const style = getAllCSSAsStyleElem();
-
-      head.innerHTML = [
-        '<meta charset="UTF-8">',
-        '<title>Print Window</title>',
-      ].join('\n');
-      head.append(style);
-
-      body.innerHTML = this.$refs.printContainer.innerHTML;
-      html.append(head, body);
-      return html.outerHTML;
-    },
     async makePDF() {
-      const savePath = await this.getSavePath();
-      if (!savePath) return;
-
-      const html = this.constructPrintDocument();
-      await makePDF(html, savePath);
+      const innerHTML = this.$refs.printContainer.innerHTML;
+      await getPathAndMakePDF(this.name, innerHTML);
       fyo.telemetry.log(Verb.Exported, 'SalesInvoice', { extension: 'pdf' });
     },
-    async getSavePath() {
-      const options = {
-        title: this.t`Select folder`,
-        defaultPath: `${this.name}.pdf`,
-      };
-
-      let { filePath } = await ipcRenderer.invoke(
-        IPC_ACTIONS.GET_SAVE_FILEPATH,
-        options
-      );
-
-      if (filePath) {
-        if (!filePath.endsWith('.pdf')) {
-          filePath = filePath + '.pdf';
-        }
-      }
-
-      return filePath;
-    },
   },
 };
-
-function getAllCSSAsStyleElem() {
-  const cssTexts = [];
-  for (const sheet of document.styleSheets) {
-    for (const rule of sheet.cssRules) {
-      cssTexts.push(rule.cssText);
-    }
-
-    for (const rule of sheet.ownerRule ?? []) {
-      cssTexts.push(rule.cssText);
-    }
-  }
-
-  const styleElem = document.createElement('style');
-  styleElem.innerHTML = cssTexts.join('\n');
-  return styleElem;
-}
 </script>
diff --git a/src/pages/TemplateBuilder/TemplateBuilder.vue b/src/pages/TemplateBuilder/TemplateBuilder.vue
index 0589669e0..21add2fdd 100644
--- a/src/pages/TemplateBuilder/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilder.vue
@@ -1,31 +1,63 @@
 <template>
   <div>
-    <PageHeader :title="t`Template Builder`"
-      ><Button v-if="displayDoc" @click="showHint = true">{{
+    <PageHeader :title="t`Template Builder`">
+      <Button v-if="displayDoc" @click="showHint = true">{{
         t`Show Hint`
-      }}</Button></PageHeader
-    >
+      }}</Button>
+      <Button v-if="displayDoc && doc?.template" @click="makePDF">
+        {{ t`Save as PDF` }}
+      </Button>
+      <DropdownWithActions v-if="doc?.inserted" :actions="actions" />
+      <Button v-if="doc?.canSave" type="primary" @click="sync()">
+        {{ t`Save` }}
+      </Button>
+    </PageHeader>
     <!-- Template Builder Body -->
-    <div class="w-full h-full flex" v-if="doc">
+    <div
+      class="w-full h-full bg-gray-25 grid"
+      style="grid-template-columns: auto var(--w-quick-edit)"
+      v-if="doc"
+    >
       <!-- Print View Container -->
-      <div>
+      <div class="overflow-auto custom-scroll">
         <!-- Display Hints -->
-        <div v-if="!displayDoc" class="p-4 text-sm text-gray-700">
-          <div v-if="!doc.type">{{ t`Select a Template Type` }}</div>
-          <div v-else-if="!displayDoc">
-            {{ t`Select a Display Doc to view the Template` }}
-          </div>
+        <div v-if="helperText" class="p-4 text-sm text-gray-700">
+          {{ helperText }}
+        </div>
+
+        <div
+          v-if="doc.template && values && !helperText"
+          ref="printContainer"
+          class="h-full shadow-lg border bg-white"
+          style="
+            width: 21cm;
+            height: 29.7cm;
+            transform: scale(0.65);
+            margin-top: -150px;
+            margin-left: -100px;
+          "
+        >
+          <component
+            class="flex-1"
+            :doc="values.doc"
+            :print="values.print"
+            :is="{ template: doc.template, props: ['doc', 'print'] }"
+          />
         </div>
       </div>
 
       <!-- Template Builder Controls -->
-      <div class="w-quick-edit h-full right-0 ml-auto border-l flex flex-col">
+      <div class="h-full w-full ml-auto border-l flex flex-col bg-white">
         <!-- Print Template Fields -->
         <div class="p-4 flex flex-col gap-4">
           <FormControl
+            class="w-full mx-auto"
+            size="small"
+            :input-class="['font-semibold text-xl', 'text-center']"
             :df="fields.name"
-            :border="true"
+            :border="!doc.inserted"
             :value="doc.get('name')"
+            :read-only="doc.inserted"
             @change="async (value) => await doc?.set('name', value)"
           />
         </div>
@@ -46,13 +78,9 @@
             />
           </div>
 
-          <!-- 
-            TODO: 
-            - Select Test Doc
-            - View Template Data and Keys
-           -->
           <div v-if="!helpersCollapsed" class="w-full flex flex-col gap-4">
             <FormControl
+              size="small"
               :df="fields.type"
               :show-label="true"
               :border="true"
@@ -62,6 +90,7 @@
 
             <FormControl
               v-if="doc.type"
+              size="small"
               :df="displayDocField"
               :show-label="true"
               :border="true"
@@ -71,16 +100,18 @@
 
             <FormControl
               v-if="doc.isCustom"
+              size="small"
               :df="fields.isCustom"
               :show-label="true"
               :border="true"
+              :read-only="true"
               :value="doc.get('isCustom')"
             />
           </div>
         </div>
 
         <!-- Template -->
-        <div class="p-4 border-t">
+        <div class="p-4 border-t" v-if="doc.type">
           <div
             class="flex justify-between items-center cursor-pointer select-none"
             @click="templateCollapsed = !templateCollapsed"
@@ -97,6 +128,12 @@
           <!-- Template Container -->
           <textarea
             v-if="!templateCollapsed"
+            style="
+              font-family: monospace;
+              white-space: pre;
+              overflow-wrap: normal;
+            "
+            :value="doc.template ?? ''"
             :spellcheck="false"
             rows="20"
             class="
@@ -111,10 +148,8 @@
               outline-none
               bg-gray-50
             "
-            style="
-              font-family: monospace;
-              white-space: pre;
-              overflow-wrap: normal;
+            @change="
+              async (e: Event) => await doc?.set('template', (e.target as HTMLTextAreaElement).value)
             "
           />
         </div>
@@ -142,19 +177,24 @@
   </div>
 </template>
 <script lang="ts">
+import { Doc } from 'fyo/model/doc';
 import { PrintTemplate } from 'models/baseModels/PrintTemplate';
 import { ModelNameEnum } from 'models/types';
 import { Field, TargetField } from 'schemas/types';
 import Button from 'src/components/Button.vue';
 import FormControl from 'src/components/Controls/FormControl.vue';
+import DropdownWithActions from 'src/components/DropdownWithActions.vue';
 import FormHeader from 'src/components/FormHeader.vue';
 import Modal from 'src/components/Modal.vue';
 import PageHeader from 'src/components/PageHeader.vue';
+import { handleErrorWithDialog } from 'src/errorHandling';
+import { makePDF } from 'src/utils/ipcCalls';
 import {
+  getPathAndMakePDF,
   getPrintTemplatePropHints,
   getPrintTemplatePropValues,
 } from 'src/utils/printTemplates';
-import { getDocFromNameIfExistsElseNew } from 'src/utils/ui';
+import { getActionsForDoc, getDocFromNameIfExistsElseNew } from 'src/utils/ui';
 import { getMapFromList } from 'utils/index';
 import { computed, defineComponent } from 'vue';
 import TemplateBuilderHint from './TemplateBuilderHint.vue';
@@ -168,6 +208,7 @@ export default defineComponent({
     Modal,
     FormHeader,
     TemplateBuilderHint,
+    DropdownWithActions,
   },
   provide() {
     return { doc: computed(() => this.doc) };
@@ -214,6 +255,31 @@ export default defineComponent({
     this.setDisplayDoc('SINV-1001');
   },
   methods: {
+    async makePDF() {
+      const displayDoc = this.displayDoc;
+      if (!displayDoc) {
+        return;
+      }
+
+      const innerHTML = (this.$refs.printContainer as HTMLDivElement).innerHTML;
+      await getPathAndMakePDF(displayDoc.name!, innerHTML);
+    },
+    async sync() {
+      const doc = this.doc;
+      if (!doc) {
+        return;
+      }
+
+      try {
+        await doc.sync();
+      } catch (err) {
+        if (!(err instanceof Error)) {
+          return;
+        }
+
+        await handleErrorWithDialog(err, doc as Doc);
+      }
+    },
     async setDoc() {
       if (this.doc) {
         return;
@@ -243,6 +309,13 @@ export default defineComponent({
     },
   },
   computed: {
+    actions() {
+      if (!this.doc) {
+        return [];
+      }
+
+      return getActionsForDoc(this.doc as Doc);
+    },
     fields(): Record<string, Field> {
       return getMapFromList(
         this.fyo.schemaMap.PrintTemplate?.fields ?? [],
@@ -258,6 +331,25 @@ export default defineComponent({
         target,
       };
     },
+    helperText() {
+      if (!this.doc) {
+        return '';
+      }
+
+      if (!this.doc.type) {
+        return this.t`Select a Template type`;
+      }
+
+      if (!this.displayDoc) {
+        return this.t`Select a Display Doc to view the Template`;
+      }
+
+      if (!this.doc.template) {
+        return this.t`Set a Template value to see the Print Template`;
+      }
+
+      return '';
+    },
   },
 });
 </script>
diff --git a/src/utils/printTemplates.ts b/src/utils/printTemplates.ts
index 1d5f9a891..8a2349833 100644
--- a/src/utils/printTemplates.ts
+++ b/src/utils/printTemplates.ts
@@ -3,6 +3,7 @@ import { Doc } from 'fyo/model/doc';
 import { Invoice } from 'models/baseModels/Invoice/Invoice';
 import { ModelNameEnum } from 'models/types';
 import { FieldTypeEnum, Schema, TargetField } from 'schemas/types';
+import { getSavePath, makePDF } from './ipcCalls';
 
 type PrintTemplateData = Record<string, unknown>;
 
@@ -203,3 +204,48 @@ async function getPrintTemplateDocValues(doc: Doc, fieldnames?: string[]) {
   }
   return values;
 }
+
+export async function getPathAndMakePDF(name: string, innerHTML: string) {
+  const { filePath } = await getSavePath(name, 'pdf');
+  if (!filePath) {
+    return;
+  }
+
+  const html = constructPrintDocument(innerHTML);
+  await makePDF(html, filePath);
+}
+
+function constructPrintDocument(innerHTML: string) {
+  const html = document.createElement('html');
+  const head = document.createElement('head');
+  const body = document.createElement('body');
+  const style = getAllCSSAsStyleElem();
+
+  head.innerHTML = [
+    '<meta charset="UTF-8">',
+    '<title>Print Window</title>',
+  ].join('\n');
+  head.append(style);
+
+  body.innerHTML = innerHTML;
+  html.append(head, body);
+  return html.outerHTML;
+}
+
+function getAllCSSAsStyleElem() {
+  const cssTexts = [];
+  for (const sheet of document.styleSheets) {
+    for (const rule of sheet.cssRules) {
+      cssTexts.push(rule.cssText);
+    }
+
+    // @ts-ignore
+    for (const rule of sheet.ownerRule ?? []) {
+      cssTexts.push(rule.cssText);
+    }
+  }
+
+  const styleElem = document.createElement('style');
+  styleElem.innerHTML = cssTexts.join('\n');
+  return styleElem;
+}
diff --git a/src/utils/ui.ts b/src/utils/ui.ts
index dc2bacd4c..23facff70 100644
--- a/src/utils/ui.ts
+++ b/src/utils/ui.ts
@@ -338,10 +338,21 @@ function getDeleteAction(doc: Doc): Action {
 }
 
 async function openEdit(doc: Doc) {
+  const listConfig = fyo.models[doc.schemaName]?.getListViewSettings?.(fyo);
+  const formRoute = listConfig?.formRoute;
+  if (formRoute) {
+    return await routeTo(formRoute(doc));
+  }
+
   const isFormEdit = [
     ModelNameEnum.SalesInvoice,
     ModelNameEnum.PurchaseInvoice,
     ModelNameEnum.JournalEntry,
+    ModelNameEnum.Shipment,
+    ModelNameEnum.PurchaseReceipt,
+    ModelNameEnum.StockMovement,
+    ModelNameEnum.Payment,
+    ModelNameEnum.Item,
   ].includes(doc.schemaName as ModelNameEnum);
 
   if (isFormEdit) {
@@ -369,7 +380,7 @@ function getDuplicateAction(doc: Doc): Action {
             label: t`Yes`,
             async action() {
               try {
-                const dupe = await doc.duplicate();
+                const dupe = doc.duplicate();
                 await openEdit(dupe);
                 return true;
               } catch (err) {

From c04098a3eb98a55145daca4b86d03d59acb2a857 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Fri, 24 Feb 2023 12:14:58 +0530
Subject: [PATCH 06/33] incr: add scaled container - allow changing the scale
 of the print view - prevent deletion of non custom templates

---
 models/baseModels/PrintTemplate.ts            |  8 ++
 schemas/app/PrintTemplate.json                |  2 +-
 src/App.vue                                   |  4 +
 src/components/Controls/Base.vue              |  2 +
 src/pages/TemplateBuilder/ScaledContainer.vue | 49 ++++++++++
 src/pages/TemplateBuilder/TemplateBuilder.vue | 97 +++++++++++--------
 6 files changed, 121 insertions(+), 41 deletions(-)
 create mode 100644 src/pages/TemplateBuilder/ScaledContainer.vue

diff --git a/models/baseModels/PrintTemplate.ts b/models/baseModels/PrintTemplate.ts
index 28e87a64e..1c656defe 100644
--- a/models/baseModels/PrintTemplate.ts
+++ b/models/baseModels/PrintTemplate.ts
@@ -9,6 +9,14 @@ export class PrintTemplate extends Doc {
   template?: string;
   isCustom?: boolean;
 
+  override get canDelete(): boolean {
+    if (this.isCustom === false) {
+      return false;
+    }
+
+    return super.canDelete;
+  }
+
   static getListViewSettings(): ListViewSettings {
     return {
       formRoute: ({ name }) => `/template-builder/${name}`,
diff --git a/schemas/app/PrintTemplate.json b/schemas/app/PrintTemplate.json
index e933d4b08..ada87c7c0 100644
--- a/schemas/app/PrintTemplate.json
+++ b/schemas/app/PrintTemplate.json
@@ -27,7 +27,7 @@
       "fieldname": "isCustom",
       "label": "Is Custom",
       "fieldtype": "Check",
-      "default": false,
+      "default": true,
       "readOnly": true
     }
   ]
diff --git a/src/App.vue b/src/App.vue
index f3312327e..a6333a22e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -166,6 +166,10 @@ export default {
       const { onboardingComplete } = await fyo.doc.getDoc('GetStarted');
       const { hideGetStarted } = await fyo.doc.getDoc('SystemSettings');
 
+      if (fyo.store.isDevelopment) {
+        return routeTo('/list/PrintTemplate');
+      }
+
       if (hideGetStarted || onboardingComplete) {
         routeTo('/');
       } else {
diff --git a/src/components/Controls/Base.vue b/src/components/Controls/Base.vue
index 729013a38..df3553d1d 100644
--- a/src/components/Controls/Base.vue
+++ b/src/components/Controls/Base.vue
@@ -13,6 +13,7 @@
         :value="value"
         :placeholder="inputPlaceholder"
         :readonly="isReadOnly"
+        :step="step"
         :max="df.maxvalue"
         :min="df.minvalue"
         @blur="(e) => !isReadOnly && triggerChange(e.target.value)"
@@ -32,6 +33,7 @@ export default {
   name: 'Base',
   props: {
     df: Object,
+    step: { type: Number, default: 1 },
     value: [String, Number, Boolean, Object],
     inputClass: [Function, String, Object],
     border: { type: Boolean, default: false },
diff --git a/src/pages/TemplateBuilder/ScaledContainer.vue b/src/pages/TemplateBuilder/ScaledContainer.vue
new file mode 100644
index 000000000..73be2fc42
--- /dev/null
+++ b/src/pages/TemplateBuilder/ScaledContainer.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="overflow-hidden" :style="outerContainerStyle">
+    <div :style="innerContainerStyle">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+/**
+ * This Component is required because * CSS transforms (eg
+ * scale) don't change the area taken by * an element.
+ *
+ * So to circumvent this, the outer element needs to have
+ * the scaled dimensions without applying a CSS transform.
+ */
+
+export default defineComponent({
+  props: {
+    height: { type: String, default: '29.7cm' },
+    width: { type: String, default: '21cm' },
+    scale: { type: Number, default: 0.65 },
+  },
+  computed: {
+    innerContainerStyle(): Record<string, string> {
+      const style: Record<string, string> = {};
+      style['width'] = this.width;
+      style['height'] = this.height;
+      style['transform'] = `scale(${this.scale})`;
+      style['margin-top'] = `calc(-1 * (${this.height} * ${
+        1 - this.scale
+      }) / 2)`;
+      style['margin-left'] = `calc(-1 * (${this.width} * ${
+        1 - this.scale
+      }) / 2)`;
+
+      return style;
+    },
+    outerContainerStyle(): Record<string, string> {
+      const style: Record<string, string> = {};
+      style['height'] = `calc(${this.scale} * ${this.height})`;
+      style['width'] = `calc(${this.scale} * ${this.width})`;
+
+      return style;
+    },
+  },
+});
+</script>
diff --git a/src/pages/TemplateBuilder/TemplateBuilder.vue b/src/pages/TemplateBuilder/TemplateBuilder.vue
index 21add2fdd..7c6d34162 100644
--- a/src/pages/TemplateBuilder/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilder.vue
@@ -14,40 +14,50 @@
     </PageHeader>
     <!-- Template Builder Body -->
     <div
-      class="w-full h-full bg-gray-25 grid"
-      style="grid-template-columns: auto var(--w-quick-edit)"
+      class="w-full overflowauto bg-gray-25 grid"
+      style="
+        grid-template-columns: auto var(--w-quick-edit);
+        height: calc(100vh - var(--h-row-largest) - 1px);
+      "
       v-if="doc"
     >
-      <!-- Print View Container -->
-      <div class="overflow-auto custom-scroll">
+      <!-- Template Display Area -->
+      <div class="overflow-auto custom-scroll p-4">
         <!-- Display Hints -->
-        <div v-if="helperText" class="p-4 text-sm text-gray-700">
+        <div v-if="helperText" class="text-sm text-gray-700">
           {{ helperText }}
         </div>
 
-        <div
-          v-if="doc.template && values && !helperText"
-          ref="printContainer"
-          class="h-full shadow-lg border bg-white"
-          style="
-            width: 21cm;
-            height: 29.7cm;
-            transform: scale(0.65);
-            margin-top: -150px;
-            margin-left: -100px;
-          "
+        <!-- Template Container -->
+        <ScaledContainer
+          v-if="doc.template && values"
+          :scale="Math.max(scale, 0.1)"
+          ref="scaledContainer"
+          class="mx-auto shadow-lg border"
         >
+          <!-- Template -->
           <component
-            class="flex-1"
+            class="flex-1 bg-white"
             :doc="values.doc"
             :print="values.print"
             :is="{ template: doc.template, props: ['doc', 'print'] }"
           />
-        </div>
+        </ScaledContainer>
       </div>
 
       <!-- Template Builder Controls -->
-      <div class="h-full w-full ml-auto border-l flex flex-col bg-white">
+      <div
+        class="
+          h-full
+          w-full
+          ml-auto
+          border-l
+          flex flex-col
+          bg-white
+          overflow-auto
+          custom-scroll
+        "
+      >
         <!-- Print Template Fields -->
         <div class="p-4 flex flex-col gap-4">
           <FormControl
@@ -62,7 +72,7 @@
           />
         </div>
 
-        <!-- Controls -->
+        <!-- Controls Section -->
         <div class="p-4 border-t">
           <div
             class="flex justify-between items-center cursor-pointer select-none"
@@ -99,18 +109,25 @@
             />
 
             <FormControl
-              v-if="doc.isCustom"
+              v-if="displayDoc && doc.template"
               size="small"
-              :df="fields.isCustom"
+              :step="0.01"
+              :df="{
+                fieldtype: 'Float',
+                label: t`Display Scale`,
+                fieldname: 'displayScale',
+                maxvalue: 10,
+                minvalue: 0.1,
+              }"
               :show-label="true"
               :border="true"
-              :read-only="true"
-              :value="doc.get('isCustom')"
+              :value="scale"
+              @change="(value: number) => scale = value"
             />
           </div>
         </div>
 
-        <!-- Template -->
+        <!-- Template Section -->
         <div class="p-4 border-t" v-if="doc.type">
           <div
             class="flex justify-between items-center cursor-pointer select-none"
@@ -125,7 +142,7 @@
             />
           </div>
 
-          <!-- Template Container -->
+          <!-- Template Editor -->
           <textarea
             v-if="!templateCollapsed"
             style="
@@ -197,6 +214,7 @@ import {
 import { getActionsForDoc, getDocFromNameIfExistsElseNew } from 'src/utils/ui';
 import { getMapFromList } from 'utils/index';
 import { computed, defineComponent } from 'vue';
+import ScaledContainer from './ScaledContainer.vue';
 import TemplateBuilderHint from './TemplateBuilderHint.vue';
 
 export default defineComponent({
@@ -209,6 +227,7 @@ export default defineComponent({
     FormHeader,
     TemplateBuilderHint,
     DropdownWithActions,
+    ScaledContainer,
   },
   provide() {
     return { doc: computed(() => this.doc) };
@@ -222,6 +241,7 @@ export default defineComponent({
       templateCollapsed: false,
       helpersCollapsed: true,
       displayDoc: null,
+      scale: 0.65,
     } as {
       hint: null | Record<string, unknown>;
       values: null | Record<string, unknown>;
@@ -230,6 +250,7 @@ export default defineComponent({
       displayDoc: PrintTemplate | null;
       templateCollapsed: boolean;
       helpersCollapsed: boolean;
+      scale: number;
     };
   },
   async mounted() {
@@ -239,20 +260,11 @@ export default defineComponent({
       this.helpersCollapsed = false;
     }
 
-    if (!this.fyo.store.isDevelopment) {
-      return;
+    if (this.fyo.store.isDevelopment) {
+      // @ts-ignore
+      window.tb = this;
+      this.setDisplayDoc('SINV-1001');
     }
-
-    // @ts-ignore
-    window.tb = this;
-
-    // @ts-ignore
-    window.hints = getPrintTemplatePropHints;
-
-    // @ts-ignore
-    window.values = getPrintTemplatePropValues;
-
-    this.setDisplayDoc('SINV-1001');
   },
   methods: {
     async makePDF() {
@@ -261,7 +273,12 @@ export default defineComponent({
         return;
       }
 
-      const innerHTML = (this.$refs.printContainer as HTMLDivElement).innerHTML;
+      // @ts-ignore
+      const innerHTML = this.$refs.scaledContainer.$el.children[0].innerHTML;
+      if (!innerHTML) {
+        return;
+      }
+
       await getPathAndMakePDF(displayDoc.name!, innerHTML);
     },
     async sync() {

From c3dae8cce27f37d0cba037e2c97c364fea6e9c60 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Fri, 24 Feb 2023 13:28:03 +0530
Subject: [PATCH 07/33] incr: add editor modal - remove show hint button

---
 src/pages/TemplateBuilder/TemplateBuilder.vue | 124 ++++++++++++++----
 1 file changed, 98 insertions(+), 26 deletions(-)

diff --git a/src/pages/TemplateBuilder/TemplateBuilder.vue b/src/pages/TemplateBuilder/TemplateBuilder.vue
index 7c6d34162..2ec2defc4 100644
--- a/src/pages/TemplateBuilder/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilder.vue
@@ -59,7 +59,7 @@
         "
       >
         <!-- Print Template Fields -->
-        <div class="p-4 flex flex-col gap-4">
+        <div class="p-4 flex flex-col gap-4 sticky top-0 bg-white border-b">
           <FormControl
             class="w-full mx-auto"
             size="small"
@@ -73,7 +73,7 @@
         </div>
 
         <!-- Controls Section -->
-        <div class="p-4 border-t">
+        <div class="p-4">
           <div
             class="flex justify-between items-center cursor-pointer select-none"
             :class="helpersCollapsed ? '' : 'mb-4'"
@@ -143,21 +143,88 @@
           </div>
 
           <!-- Template Editor -->
+          <div class="mt-4 relative">
+            <textarea
+              v-if="!templateCollapsed"
+              style="
+                font-family: monospace;
+                white-space: pre;
+                overflow-wrap: normal;
+              "
+              :value="doc.template ?? ''"
+              :spellcheck="false"
+              rows="10"
+              class="
+                overflow-auto
+                p-2
+                w-full
+                border
+                rounded
+                text-sm text-gray-900
+                focus-within:bg-gray-100
+                outline-none
+                bg-gray-50
+              "
+              @change="
+              async (e: Event) => await doc?.set('template', (e.target as HTMLTextAreaElement).value)
+            "
+            />
+            <button
+              class="bg-gray-200 p-0.5 rounded absolute bottom-4 left-2"
+              @click="showEditor = true"
+            >
+              <feather-icon name="maximize" class="h-4 w-4 text-gray-600" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Hint Modal -->
+    <Modal
+      @closemodal="() => (showHint = false)"
+      :open-modal="showHint"
+      v-if="displayDoc && hint"
+    >
+      <div class="w-form">
+        <!-- Hint Modal Header -->
+        <FormHeader
+          :form-title="t`Hint`"
+          :form-sub-title="displayDoc.schema.label"
+        />
+        <hr />
+        <div class="p-4 max-h-96 overflow-auto custom-scroll">
+          <TemplateBuilderHint :hint="hint" />
+        </div>
+      </div>
+    </Modal>
+
+    <!-- Editor Modal -->
+    <Modal
+      v-if="doc"
+      @closemodal="() => (showEditor = false)"
+      :open-modal="showEditor"
+    >
+      <div>
+        <!-- Hint Modal Header -->
+        <FormHeader :form-title="t`Template Editor`" />
+        <hr />
+        <div class="p-4">
           <textarea
             v-if="!templateCollapsed"
             style="
               font-family: monospace;
               white-space: pre;
               overflow-wrap: normal;
+              resize: both;
             "
             :value="doc.template ?? ''"
             :spellcheck="false"
-            rows="20"
+            cols="74"
+            rows="30"
             class="
               overflow-auto
-              mt-4
               p-2
-              w-full
               border
               rounded
               text-sm text-gray-900
@@ -168,26 +235,7 @@
             @change="
               async (e: Event) => await doc?.set('template', (e.target as HTMLTextAreaElement).value)
             "
-          />
-        </div>
-      </div>
-    </div>
-
-    <!-- Hint Modal -->
-    <Modal
-      @closemodal="() => (showHint = false)"
-      :open-modal="showHint"
-      v-if="displayDoc && hint"
-    >
-      <div class="w-form">
-        <!-- Hint Modal Header -->
-        <FormHeader
-          :form-title="t`Hint`"
-          :form-sub-title="displayDoc.schema.label"
-        />
-        <hr />
-        <div class="p-4 max-h-96 overflow-auto custom-scroll">
-          <TemplateBuilderHint :hint="hint" />
+          ></textarea>
         </div>
       </div>
     </Modal>
@@ -236,6 +284,7 @@ export default defineComponent({
     return {
       doc: null,
       showHint: false,
+      showEditor: false,
       hint: null,
       values: null,
       templateCollapsed: false,
@@ -246,6 +295,7 @@ export default defineComponent({
       hint: null | Record<string, unknown>;
       values: null | Record<string, unknown>;
       doc: PrintTemplate | null;
+      showEditor: boolean;
       showHint: boolean;
       displayDoc: PrintTemplate | null;
       templateCollapsed: boolean;
@@ -263,8 +313,9 @@ export default defineComponent({
     if (this.fyo.store.isDevelopment) {
       // @ts-ignore
       window.tb = this;
-      this.setDisplayDoc('SINV-1001');
     }
+
+    await this.setInitialDoc();
   },
   methods: {
     async makePDF() {
@@ -281,6 +332,26 @@ export default defineComponent({
 
       await getPathAndMakePDF(displayDoc.name!, innerHTML);
     },
+    async setInitialDoc() {
+      const schemaName = this.doc?.type;
+      if (!schemaName || this.displayDoc?.schemaName === schemaName) {
+        return;
+      }
+
+      const names = (await this.fyo.db.getAll(schemaName, {
+        limit: 1,
+        order: 'desc',
+        orderBy: 'created',
+        filters: { cancelled: false },
+      })) as { name: string }[];
+
+      const name = names[0]?.name;
+      if (!name) {
+        return;
+      }
+
+      await this.setDisplayDoc(name);
+    },
     async sync() {
       const doc = this.doc;
       if (!doc) {
@@ -319,6 +390,7 @@ export default defineComponent({
       if (!schemaName) {
         return;
       }
+
       const displayDoc = await getDocFromNameIfExistsElseNew(schemaName, value);
       this.hint = getPrintTemplatePropHints(displayDoc);
       this.values = await getPrintTemplatePropValues(displayDoc);

From b0c23a6295b761172767695e96fb5a77c82e26c2 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Fri, 24 Feb 2023 13:29:11 +0530
Subject: [PATCH 08/33] incr: change scrollbar color - actuall remove border

---
 src/pages/TemplateBuilder/TemplateBuilder.vue | 101 +++++++++---------
 src/styles/index.css                          |   8 +-
 2 files changed, 52 insertions(+), 57 deletions(-)

diff --git a/src/pages/TemplateBuilder/TemplateBuilder.vue b/src/pages/TemplateBuilder/TemplateBuilder.vue
index 2ec2defc4..3755931d1 100644
--- a/src/pages/TemplateBuilder/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilder.vue
@@ -1,9 +1,6 @@
 <template>
   <div>
     <PageHeader :title="t`Template Builder`">
-      <Button v-if="displayDoc" @click="showHint = true">{{
-        t`Show Hint`
-      }}</Button>
       <Button v-if="displayDoc && doc?.template" @click="makePDF">
         {{ t`Save as PDF` }}
       </Button>
@@ -180,62 +177,62 @@
       </div>
     </div>
 
-    <!-- Hint Modal -->
-    <Modal
-      @closemodal="() => (showHint = false)"
-      :open-modal="showHint"
-      v-if="displayDoc && hint"
-    >
-      <div class="w-form">
-        <!-- Hint Modal Header -->
-        <FormHeader
-          :form-title="t`Hint`"
-          :form-sub-title="displayDoc.schema.label"
-        />
-        <hr />
-        <div class="p-4 max-h-96 overflow-auto custom-scroll">
-          <TemplateBuilderHint :hint="hint" />
-        </div>
-      </div>
-    </Modal>
-
     <!-- Editor Modal -->
     <Modal
       v-if="doc"
       @closemodal="() => (showEditor = false)"
       :open-modal="showEditor"
     >
-      <div>
-        <!-- Hint Modal Header -->
-        <FormHeader :form-title="t`Template Editor`" />
-        <hr />
-        <div class="p-4">
-          <textarea
-            v-if="!templateCollapsed"
-            style="
-              font-family: monospace;
-              white-space: pre;
-              overflow-wrap: normal;
-              resize: both;
-            "
-            :value="doc.template ?? ''"
-            :spellcheck="false"
-            cols="74"
-            rows="30"
-            class="
-              overflow-auto
-              p-2
-              border
-              rounded
-              text-sm text-gray-900
-              focus-within:bg-gray-100
-              outline-none
-              bg-gray-50
-            "
-            @change="
+      <div class="flex">
+        <!-- Hint Section Header -->
+        <div class="border-r" v-if="hint">
+          <h2 class="text-base font-semibold p-4 border-b">
+            {{ t`Value Keys` }}
+          </h2>
+          <div
+            class="overflow-auto custom-scroll p-4"
+            style="max-height: 80vh; width: 25vw"
+          >
+            <TemplateBuilderHint :hint="hint" />
+          </div>
+        </div>
+
+        <!-- Template Editor Section -->
+        <div>
+          <h2 class="text-base font-semibold p-4 border-b">
+            {{ t`Template` }}
+          </h2>
+          <div
+            class="overflow-auto custom-scroll p-4"
+            style="max-height: 80vh; max-width: 65vw"
+          >
+            <textarea
+              v-if="!templateCollapsed"
+              style="
+                font-family: monospace;
+                white-space: pre;
+                overflow-wrap: normal;
+                resize: both;
+              "
+              :value="doc.template ?? ''"
+              :spellcheck="false"
+              cols="74"
+              rows="31"
+              class="
+                overflow-auto
+                p-2
+                border
+                rounded
+                text-sm text-gray-900
+                focus-within:bg-gray-100
+                outline-none
+                bg-gray-50
+              "
+              @change="
               async (e: Event) => await doc?.set('template', (e.target as HTMLTextAreaElement).value)
             "
-          ></textarea>
+            ></textarea>
+          </div>
         </div>
       </div>
     </Modal>
@@ -283,7 +280,6 @@ export default defineComponent({
   data() {
     return {
       doc: null,
-      showHint: false,
       showEditor: false,
       hint: null,
       values: null,
@@ -296,7 +292,6 @@ export default defineComponent({
       values: null | Record<string, unknown>;
       doc: PrintTemplate | null;
       showEditor: boolean;
-      showHint: boolean;
       displayDoc: PrintTemplate | null;
       templateCollapsed: boolean;
       helpersCollapsed: boolean;
diff --git a/src/styles/index.css b/src/styles/index.css
index 3d1b724a4..3cb300d68 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -133,19 +133,19 @@ input[type='number']::-webkit-inner-spin-button {
 }
 
 .custom-scroll::-webkit-scrollbar-track:vertical {
-  border-left: solid 1px theme('colors.gray.200');
+  border-left: solid 1px theme('colors.gray.100');
 }
 
 .custom-scroll::-webkit-scrollbar-track:horizontal {
-  border-top: solid 1px theme('colors.gray.200');
+  border-top: solid 1px theme('colors.gray.100');
 }
 
 .custom-scroll::-webkit-scrollbar-thumb {
-  background: theme('colors.gray.200');
+  background: theme('colors.gray.100');
 }
 
 .custom-scroll::-webkit-scrollbar-thumb:hover {
-  background: theme('colors.gray.400');
+  background: theme('colors.gray.200');
 }
 
 /* 

From f398e190e6c0b488e60f00171adcb6b1ef762ab3 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Fri, 24 Feb 2023 15:08:39 +0530
Subject: [PATCH 09/33] incr: convert Minimal.vue to a template.html file

---
 fixtures/printTemplates/Minimal.template.html | 170 +++++++++++++++
 models/baseModels/PrintTemplate.ts            |   1 +
 .../SalesInvoice/InvoiceTemplate.vue          |   8 +-
 .../SalesInvoice/Templates/Minimal.vue        | 194 ------------------
 src/pages/TemplateBuilder/TemplateBuilder.vue |   3 +-
 src/utils/printTemplates.ts                   |   4 +
 6 files changed, 179 insertions(+), 201 deletions(-)
 create mode 100644 fixtures/printTemplates/Minimal.template.html
 delete mode 100644 src/components/SalesInvoice/Templates/Minimal.vue

diff --git a/fixtures/printTemplates/Minimal.template.html b/fixtures/printTemplates/Minimal.template.html
new file mode 100644
index 000000000..e06f60e18
--- /dev/null
+++ b/fixtures/printTemplates/Minimal.template.html
@@ -0,0 +1,170 @@
+<main class="h-full">
+  <!-- Invoice Header -->
+  <header class="flex items-center justify-between w-full border-b px-12 py-10">
+    <!-- Left Section -->
+    <section class="flex items-center">
+      <img
+        v-if="print.displayLogo"
+        class="h-12 max-w-32 object-contain me-4"
+        :src="print.logo"
+      />
+
+      <div>
+        <p class="font-semibold text-xl" :style="{ color: print.color }">
+          {{ print.companyName }}
+        </p>
+        <p>{{ doc.date }}</p>
+      </div>
+    </section>
+
+    <!-- Right Section -->
+    <section class="text-end">
+      <p class="font-semibold text-xl" :style="{ color: print.color }">
+        {{ doc.entryType }}
+      </p>
+      <p>{{ doc.name }}</p>
+    </section>
+  </header>
+
+  <!-- Party && Company Details -->
+  <section class="flex px-12 py-10 border-b">
+    <!-- Party Details -->
+    <section class="w-1/2">
+      <h3 class="uppercase text-sm font-semibold tracking-widest text-gray-800">
+        {{ doc.entryType === 'SalesInvoice' ? 'To' : 'From' }}
+      </h3>
+      <p class="mt-4 text-black leading-relaxed text-lg">{{ doc.party }}</p>
+      <p
+        v-if="doc.links.party.address"
+        class="mt-2 text-black leading-relaxed text-lg"
+      >
+        {{ doc.links.party.links.address.addressDisplay ?? '' }}
+      </p>
+      <p
+        v-if="doc.links.party.gstin"
+        class="mt-2 text-black leading-relaxed text-lg"
+      >
+        GSTIN: {{ doc.links.party.gstin }}
+      </p>
+    </section>
+
+    <!-- Company Details -->
+    <section class="w-1/2">
+      <h3
+        class="
+          uppercase
+          text-sm
+          font-semibold
+          tracking-widest
+          text-gray-800
+          ms-8
+        "
+      >
+        {{ doc.entryType === 'SalesInvoice' ? 'From' : 'To' }}
+      </h3>
+      <p class="mt-4 ms-8 text-black leading-relaxed text-lg">
+        {{ print.companyName }}
+      </p>
+      <p
+        v-if="print.address"
+        class="mt-2 ms-8 text-black leading-relaxed text-lg"
+      >
+        {{ print.links.address.addressDisplay }}
+      </p>
+      <p
+        v-if="print.gstin"
+        class="mt-2 ms-8 text-black leading-relaxed text-lg"
+      >
+        GSTIN: {{ print.gstin }}
+      </p>
+    </section>
+  </section>
+
+  <!-- Items Table -->
+  <section class="px-12 py-10 border-b">
+    <!-- Heading Row -->
+    <section
+      class="
+        mb-4
+        flex
+        uppercase
+        text-sm
+        tracking-widest
+        font-semibold
+        text-gray-800
+      "
+    >
+      <div class="w-4/12 text-start">Item</div>
+      <div class="w-2/12 text-end" v-if="doc.showHSN">HSN/SAC</div>
+      <div class="w-2/12 text-end">Quantity</div>
+      <div class="w-3/12 text-end">Rate</div>
+      <div class="w-3/12 text-end">Amount</div>
+    </section>
+
+    <!-- Body Rows -->
+    <section class="flex py-1 text-lg" v-for="row in doc.items" :key="row.name">
+      <div class="w-4/12 text-start">{{ row.item }}</div>
+      <div class="w-2/12 text-end" v-if="doc.showHSN">{{ row.hsnCode }}</div>
+      <div class="w-2/12 text-end">{{ row.quantity }}</div>
+      <div class="w-3/12 text-end">{{ row.rate }}</div>
+      <div class="w-3/12 text-end">{{ row.amount }}</div>
+    </section>
+  </section>
+
+  <!-- Footer -->
+  <footer class="flex px-12 py-10">
+    <!-- Invoice Terms -->
+    <section class="w-1/2" v-if="doc.terms">
+      <h3 class="uppercase text-sm tracking-widest font-semibold text-gray-800">
+        Notes
+      </h3>
+      <p class="mt-4 text-lg whitespace-pre-line">{{ doc.terms }}</p>
+    </section>
+
+    <!-- Totaled Amounts -->
+    <section class="w-1/2 text-lg ml-auto">
+      <!-- Subtotal -->
+      <div class="flex ps-2 justify-between py-1">
+        <h3>{{ t`Subtotal` }}</h3>
+        <p>{{ doc.netTotal }}</p>
+      </div>
+
+      <!-- Discount (if applied before tax) -->
+      <div
+        class="flex ps-2 justify-between py-1"
+        v-if="doc.totalDiscount && !doc.discountAfterTax"
+      >
+        <h3>{{ t`Discount` }}</h3>
+        <p>{{ doc.totalDiscount }}</p>
+      </div>
+
+      <!-- Tax Breakdown -->
+      <div
+        class="flex ps-2 justify-between py-1"
+        v-for="tax in doc.taxes"
+        :key="tax.name"
+      >
+        <h3>{{ tax.account }}</h3>
+        <p>{{ tax.amount }}</p>
+      </div>
+
+      <!-- Discount (if applied after tax) -->
+      <div
+        class="flex ps-2 justify-between py-1"
+        v-if="doc.totalDiscount && doc.discountAfterTax"
+      >
+        <h3>{{ t`Discount` }}</h3>
+        <p>{{ doc.totalDiscount }}</p>
+      </div>
+
+      <!-- Grand Total -->
+      <div
+        class="flex ps-2 justify-between py-1 font-semibold"
+        :style="{ color: print.color }"
+      >
+        <h3>{{ t`Grand Total` }}</h3>
+        <p>{{ doc.grandTotal }}</p>
+      </div>
+    </section>
+  </footer>
+</main>
diff --git a/models/baseModels/PrintTemplate.ts b/models/baseModels/PrintTemplate.ts
index 1c656defe..09382da66 100644
--- a/models/baseModels/PrintTemplate.ts
+++ b/models/baseModels/PrintTemplate.ts
@@ -42,6 +42,7 @@ export class PrintTemplate extends Doc {
       const models = [
         ModelNameEnum.SalesInvoice,
         ModelNameEnum.PurchaseInvoice,
+        ModelNameEnum.JournalEntry,
         ModelNameEnum.Payment,
       ];
 
diff --git a/src/components/SalesInvoice/InvoiceTemplate.vue b/src/components/SalesInvoice/InvoiceTemplate.vue
index 47fca6447..86db57cd2 100644
--- a/src/components/SalesInvoice/InvoiceTemplate.vue
+++ b/src/components/SalesInvoice/InvoiceTemplate.vue
@@ -4,7 +4,6 @@
 
 <script>
 import Basic from './Templates/Basic';
-import Minimal from './Templates/Minimal';
 import Business from './Templates/Business';
 
 export default {
@@ -15,14 +14,13 @@ export default {
       let type = this.printSettings.template;
       let templates = {
         Basic,
-        Minimal,
-        Business
+        Business,
       };
       if (!(type in templates)) {
         type = 'Basic';
       }
       return templates[type];
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/components/SalesInvoice/Templates/Minimal.vue b/src/components/SalesInvoice/Templates/Minimal.vue
deleted file mode 100644
index 9d2ec8e83..000000000
--- a/src/components/SalesInvoice/Templates/Minimal.vue
+++ /dev/null
@@ -1,194 +0,0 @@
-<template>
-  <div
-    class="bg-white border h-full"
-    :style="{ 'font-family': printObject.font }"
-  >
-    <div class="flex flex-col w-full px-12 py-10 border-b">
-      <h2
-        v-if="printObject.displayTaxInvoice"
-        class="
-          font-semibold
-          text-gray-800 text-sm
-          tracking-widest
-          uppercase
-          mb-4
-        "
-      >
-        {{ t`Tax Invoice` }}
-      </h2>
-      <div class="flex items-center justify-between w-full">
-        <div class="flex items-center">
-          <div class="flex items-center rounded h-16">
-            <div class="me-4" v-if="printObject.displayLogo">
-              <img
-                class="h-12 max-w-32 object-contain"
-                :src="printObject.logo"
-              />
-            </div>
-          </div>
-          <div>
-            <div
-              class="font-semibold text-xl"
-              :style="{ color: printObject.color }"
-            >
-              {{ printObject.companyName }}
-            </div>
-            <div>
-              {{ printObject.date }}
-            </div>
-          </div>
-        </div>
-        <div class="text-end">
-          <div
-            class="font-semibold text-xl"
-            :style="{ color: printObject.color }"
-          >
-            {{
-              printObject.isSalesInvoice
-                ? t`Sales Invoice`
-                : t`Purchase Invoice`
-            }}
-          </div>
-          <div>
-            {{ printObject.invoiceName }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="flex px-12 py-10 border-b">
-      <div class="w-1/2" v-if="printObject.partyName">
-        <div
-          class="uppercase text-sm font-semibold tracking-widest text-gray-800"
-        >
-          {{ printObject.isSalesInvoice ? 'To' : 'From' }}
-        </div>
-        <div class="mt-4 text-black leading-relaxed text-lg">
-          {{ printObject.partyName }} <br />
-          {{ printObject.partyAddress ?? '' }}
-        </div>
-        <div
-          class="mt-4 text-black leading-relaxed text-lg"
-          v-if="printObject.partyGSTIN"
-        >
-          GSTIN: {{ printObject.partyGSTIN }}
-        </div>
-      </div>
-      <div class="w-1/2" v-if="printObject.address">
-        <div
-          class="
-            uppercase
-            text-sm
-            font-semibold
-            tracking-widest
-            text-gray-800
-            ms-8
-          "
-        >
-          {{ printObject.isSalesInvoice ? 'From' : 'To' }}
-        </div>
-        <div class="mt-4 ms-8 text-black leading-relaxed text-lg">
-          {{ printObject.address }}
-        </div>
-        <div
-          class="mt-4 ms-8 text-black leading-relaxed text-lg"
-          v-if="printObject.gstin"
-        >
-          GSTIN: {{ printObject.gstin }}
-        </div>
-      </div>
-    </div>
-    <div class="px-12 py-10 border-b">
-      <div
-        class="
-          mb-4
-          flex
-          uppercase
-          text-sm
-          tracking-widest
-          font-semibold
-          text-gray-800
-        "
-      >
-        <div class="w-4/12">Item</div>
-        <div class="w-2/12 text-end" v-if="printObject.showHSN">HSN/SAC</div>
-        <div class="w-2/12 text-end">Quantity</div>
-        <div class="w-3/12 text-end" v-if="printObject.displayBatch">
-          Batch
-        </div>
-        <div class="w-3/12 text-end">Rate</div>
-        <div class="w-3/12 text-end">Amount</div>
-      </div>
-      <div
-        class="flex py-1 text-lg"
-        v-for="row in printObject.items"
-        :key="row.name"
-      >
-        <div class="w-4/12">{{ row.item }}</div>
-        <div class="w-2/12 text-end" v-if="printObject.showHSN">
-          {{ row.hsnCode }}
-        </div>
-        <div class="w-2/12 text-end">{{ row.quantity }}</div>
-        <div class="w-3/12 text-end" v-if="printObject.displayBatch">
-          {{ row.batch }}
-        </div>
-        <div class="w-3/12 text-end">{{ row.rate }}</div>
-        <div class="w-3/12 text-end">{{ row.amount }}</div>
-      </div>
-    </div>
-    <div class="flex px-12 py-10">
-      <div class="w-1/2" v-if="printObject.terms">
-        <div
-          class="uppercase text-sm tracking-widest font-semibold text-gray-800"
-        >
-          Notes
-        </div>
-        <div class="mt-4 text-lg whitespace-pre-line">
-          {{ printObject.terms }}
-        </div>
-      </div>
-      <div class="w-1/2 text-lg">
-        <div class="flex ps-2 justify-between py-1">
-          <div>{{ t`Subtotal` }}</div>
-          <div>{{ printObject.netTotal }}</div>
-        </div>
-        <div
-          class="flex ps-2 justify-between py-1"
-          v-if="printObject.totalDiscount && !printObject.discountAfterTax"
-        >
-          <div>{{ t`Discount` }}</div>
-          <div>{{ printObject.totalDiscount }}</div>
-        </div>
-        <div
-          class="flex ps-2 justify-between py-1"
-          v-for="tax in printObject.taxes"
-          :key="tax.name"
-        >
-          <div>{{ tax.account }}</div>
-          <div>{{ tax.amount }}</div>
-        </div>
-        <div
-          class="flex ps-2 justify-between py-1"
-          v-if="printObject.totalDiscount && printObject.discountAfterTax"
-        >
-          <div>{{ t`Discount` }}</div>
-          <div>{{ printObject.totalDiscount }}</div>
-        </div>
-        <div
-          class="flex ps-2 justify-between py-1 font-semibold"
-          :style="{ color: printObject.color }"
-        >
-          <div>{{ t`Grand Total` }}</div>
-          <div>{{ printObject.grandTotal }}</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import BaseTemplate from './BaseTemplate.vue';
-
-export default {
-  name: 'Minimal',
-  extends: BaseTemplate,
-};
-</script>
diff --git a/src/pages/TemplateBuilder/TemplateBuilder.vue b/src/pages/TemplateBuilder/TemplateBuilder.vue
index 3755931d1..1b6aea058 100644
--- a/src/pages/TemplateBuilder/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilder.vue
@@ -140,9 +140,8 @@
           </div>
 
           <!-- Template Editor -->
-          <div class="mt-4 relative">
+          <div class="mt-4 relative" v-if="!templateCollapsed">
             <textarea
-              v-if="!templateCollapsed"
               style="
                 font-family: monospace;
                 white-space: pre;
diff --git a/src/utils/printTemplates.ts b/src/utils/printTemplates.ts
index 8a2349833..4f16398ad 100644
--- a/src/utils/printTemplates.ts
+++ b/src/utils/printTemplates.ts
@@ -23,6 +23,8 @@ export async function getPrintTemplatePropValues(doc: Doc) {
   const fyo = doc.fyo;
   const values: PrintTemplateData = {};
   values.doc = await getPrintTemplateDocValues(doc);
+  (values.doc as PrintTemplateData).entryType = doc.schema.name;
+  (values.doc as PrintTemplateData).entryLabel = doc.schema.label;
 
   const printSettings = await fyo.doc.getDoc(ModelNameEnum.PrintSettings);
   const printValues = await getPrintTemplateDocValues(
@@ -56,6 +58,8 @@ export function getPrintTemplatePropHints(doc: Doc) {
   const hints: PrintTemplateData = {};
   const fyo = doc.fyo;
   hints.doc = getPrintTemplateDocHints(doc.schema, doc.fyo);
+  (hints.doc as PrintTemplateData).entryType = doc.fyo.t`Entry Type`;
+  (hints.doc as PrintTemplateData).entryLabel = doc.fyo.t`Entry Label`;
 
   const printSettingsHints = getPrintTemplateDocHints(
     fyo.schemaMap[ModelNameEnum.PrintSettings]!,

From 44f172316f98bf46be3c7981afe7915ab77d5a65 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Fri, 24 Feb 2023 17:16:49 +0530
Subject: [PATCH 10/33] incr: convert other templates to template.html files -
 delete old invoice template files

---
 fixtures/printTemplates/Basic.template.html   | 146 +++++++++++++++
 .../printTemplates/Business.template.html     | 130 +++++++++++++
 fixtures/printTemplates/Minimal.template.html |  46 ++---
 models/baseModels/PrintTemplate.ts            |   6 +
 .../SalesInvoice/InvoiceTemplate.vue          |  26 ---
 .../SalesInvoice/Templates/BaseTemplate.vue   | 109 -----------
 .../SalesInvoice/Templates/Basic.vue          | 172 ------------------
 .../SalesInvoice/Templates/Business.vue       | 165 -----------------
 src/pages/PrintView/PrintView.vue             |  10 +-
 9 files changed, 307 insertions(+), 503 deletions(-)
 create mode 100644 fixtures/printTemplates/Basic.template.html
 create mode 100644 fixtures/printTemplates/Business.template.html
 delete mode 100644 src/components/SalesInvoice/InvoiceTemplate.vue
 delete mode 100644 src/components/SalesInvoice/Templates/BaseTemplate.vue
 delete mode 100644 src/components/SalesInvoice/Templates/Basic.vue
 delete mode 100644 src/components/SalesInvoice/Templates/Business.vue

diff --git a/fixtures/printTemplates/Basic.template.html b/fixtures/printTemplates/Basic.template.html
new file mode 100644
index 000000000..d36c76a8f
--- /dev/null
+++ b/fixtures/printTemplates/Basic.template.html
@@ -0,0 +1,146 @@
+<main class="bg-white h-full px-6" :style="{ 'font-family': print.font }">
+  <!-- Invoice Header -->
+  <header class="py-6 flex text-sm text-gray-900 border-b">
+    <!-- Company Logo & Name -->
+    <section class="w-1/3">
+      <img
+        v-if="print.displayLogo"
+        class="h-12 max-w-32 object-contain"
+        :src="print.logo"
+      />
+      <div class="text-xl text-gray-700 font-semibold" v-else>
+        {{ print.companyName }}
+      </div>
+    </section>
+
+    <!-- Company Contacts -->
+    <section class="w-1/3">
+      <div>{{ print.email }}</div>
+      <div class="mt-1">{{ print.phone }}</div>
+    </section>
+
+    <!-- Company Address & GSTIN -->
+    <section class="w-1/3">
+      <div v-if="print.address">{{ print.links.address.addressDisplay }}</div>
+      <div v-if="print.gstin">GSTIN: {{ print.gstin }}</div>
+    </section>
+  </header>
+
+  <!-- Sub Heading Section -->
+  <section class="mt-8 flex justify-between">
+    <!-- Invoice Details -->
+    <section class="w-1/3">
+      <h2 class="text-2xl font-semibold">{{ doc.name }}</h2>
+      <p class="py-2 text-base">{{ doc.date }}</p>
+    </section>
+
+    <!-- Party Details -->
+    <section class="w-1/3" v-if="doc.party">
+      <h2 class="py-1 text-right text-lg font-semibold">{{ doc.party }}</h2>
+      <p
+        v-if="doc.links.party.address"
+        class="mt-1 text-xs text-gray-600 text-right"
+      >
+        {{ doc.links.party.links.address.addressDisplay }}
+      </p>
+      <p
+        v-if="doc.links.party.gstin"
+        class="mt-1 text-xs text-gray-600 text-right"
+      >
+        GSTIN: {{ doc.partyGSTIN }}
+      </p>
+    </section>
+  </section>
+
+  <!-- Items Table -->
+  <section class="mt-8 text-base">
+    <!-- Heading Row -->
+    <section class="text-gray-600 w-full flex border-b">
+      <div class="py-4 w-5/12">Item</div>
+      <div class="py-4 text-right w-2/12" v-if="doc.showHSN">HSN/SAC</div>
+      <div class="py-4 text-right w-1/12">Quantity</div>
+      <div class="py-4 text-right w-3/12">Rate</div>
+      <div class="py-4 text-right w-3/12">Amount</div>
+    </section>
+
+    <!-- Body Rows -->
+    <section
+      class="flex py-1 text-gray-900 w-full border-b"
+      v-for="row in doc.items"
+      :key="row.name"
+    >
+      <div class="w-5/12 py-4">{{ row.item }}</div>
+      <div class="w-2/12 text-right py-4" v-if="doc.showHSN">
+        {{ row.hsnCode }}
+      </div>
+      <div class="w-1/12 text-right py-4">{{ row.quantity }}</div>
+      <div class="w-3/12 text-right py-4">{{ row.rate }}</div>
+      <div class="w-3/12 text-right py-4">{{ row.amount }}</div>
+    </section>
+  </section>
+
+  <!-- Invoice Footer -->
+  <footer class="mt-8 flex justify-end text-base">
+    <!-- Invoice Terms -->
+    <section class="w-1/2">
+      <h3 class="text-sm tracking-widest text-gray-600 mt-2" v-if="doc.terms">
+        Notes
+      </h3>
+      <p class="my-4 text-lg whitespace-pre-line">{{ doc.terms }}</p>
+    </section>
+
+    <!-- Totaled Amounts -->
+    <section class="w-1/2">
+      <!-- Subtotal -->
+      <div class="flex pl-2 justify-between py-3 border-b">
+        <h3>{{ t`Subtotal` }}</h3>
+        <p>{{ doc.netTotal }}</p>
+      </div>
+
+      <!-- Discount (if applied before tax) -->
+      <div
+        class="flex pl-2 justify-between py-3 border-b"
+        v-if="doc.totalDiscount && !doc.discountAfterTax"
+      >
+        <h3>{{ t`Discount` }}</h3>
+        <p>{{ doc.totalDiscount }}</p>
+      </div>
+
+      <!-- Tax Breakdown -->
+      <div
+        class="flex pl-2 justify-between py-3"
+        v-for="tax in doc.taxes"
+        :key="tax.name"
+      >
+        <h3>{{ tax.account }}</h3>
+        <p>{{ tax.amount }}</p>
+      </div>
+
+      <!-- Discount (if applied after tax) -->
+      <div
+        class="flex pl-2 justify-between py-3 border-t"
+        v-if="doc.totalDiscount && doc.discountAfterTax"
+      >
+        <h3>{{ t`Discount` }}</h3>
+        <p>{{ doc.totalDiscount }}</p>
+      </div>
+
+      <!-- Grand Total -->
+      <div
+        class="
+          flex
+          pl-2
+          justify-between
+          py-3
+          border-t
+          text-green-600
+          font-semibold
+          text-base
+        "
+      >
+        <h3>{{ t`Grand Total` }}</h3>
+        <p>{{ doc.grandTotal }}</p>
+      </div>
+    </section>
+  </footer>
+</main>
diff --git a/fixtures/printTemplates/Business.template.html b/fixtures/printTemplates/Business.template.html
new file mode 100644
index 000000000..ffbf23297
--- /dev/null
+++ b/fixtures/printTemplates/Business.template.html
@@ -0,0 +1,130 @@
+<main class="bg-white h-full" :style="{ 'font-family': print.font }">
+  <!-- Invoice Header -->
+  <header class="bg-gray-100 px-12 py-10">
+    <!-- Company Details -->
+    <section class="flex items-center">
+      <img
+        v-if="print.displayLogo"
+        class="h-12 max-w-32 object-contain mr-4"
+        :src="print.logo"
+      />
+
+      <div>
+        <p class="font-semibold text-xl" :style="{ color: print.color }">
+          {{ print.companyName }}
+        </p>
+        <p class="text-sm text-gray-800" v-if="print.address">
+          {{ print.links.address.addressDisplay }}
+        </p>
+        <p class="text-sm text-gray-800" v-if="print.gstin">
+          GSTIN: {{ print.gstin }}
+        </p>
+      </div>
+    </section>
+
+    <!-- Sub Heading Section -->
+    <div class="mt-8 text-lg">
+      <!-- Doc Details -->
+      <section class="flex">
+        <h3 class="w-1/3 font-semibold">
+          {{ doc.entryType === 'SalesInvoice' ? 'Invoice' : 'Bill' }}
+        </h3>
+        <div class="w-2/3 text-gray-800">
+          <p class="font-semibold">{{ doc.name }}</p>
+          <p>{{ doc.date }}</p>
+        </div>
+      </section>
+
+      <!-- Party Details -->
+      <section class="mt-4 flex">
+        <h3 class="w-1/3 font-semibold">
+          {{ doc.entryType === 'SalesInvoice' ? 'Customer' : 'Supplier' }}
+        </h3>
+
+        <div class="w-2/3 text-gray-800" v-if="doc.party">
+          <p class="font-semibold">{{ doc.party }}</p>
+          <p v-if="doc.links.party.address">
+            {{ doc.links.party.links.address.addressDisplay }}
+          </p>
+          <p v-if="doc.links.party.gstin">GSTIN: {{ doc.links.party.gstin }}</p>
+        </div>
+      </section>
+    </div>
+  </header>
+
+  <!-- Items Table -->
+  <section class="px-12 pt-12 text-lg">
+    <!-- Heading Row -->
+    <section class="mb-4 flex font-semibold">
+      <div class="w-4/12">Item</div>
+      <div class="w-2/12 text-right" v-if="doc.showHSN">HSN/SAC</div>
+      <div class="w-2/12 text-right">Quantity</div>
+      <div class="w-3/12 text-right">Rate</div>
+      <div class="w-3/12 text-right">Amount</div>
+    </section>
+
+    <!-- Body Rows -->
+    <section
+      class="flex py-1 text-gray-800"
+      v-for="row in doc.items"
+      :key="row.name"
+    >
+      <div class="w-4/12">{{ row.item }}</div>
+      <div class="w-2/12 text-right" v-if="doc.showHSN">{{ row.hsnCode }}</div>
+      <div class="w-2/12 text-right">{{ row.quantity }}</div>
+      <div class="w-3/12 text-right">{{ row.rate }}</div>
+      <div class="w-3/12 text-right">{{ row.amount }}</div>
+    </section>
+  </section>
+
+  <!-- Invoice Footer -->
+  <footer class="px-12 py-12 text-lg">
+    <!-- Totaled Amounts -->
+    <section class="flex -mx-3 justify-end flex-1 bg-gray-100 gap-8">
+      <!-- Subtotal -->
+      <div class="text-right py-3">
+        <h3 class="text-gray-800">{{ t`Subtotal` }}</h3>
+        <p class="text-xl mt-2">{{ doc.netTotal }}</p>
+      </div>
+
+      <!-- Discount (if applied before tax) -->
+      <div
+        class="text-right py-3"
+        v-if="doc.totalDiscount && !doc.discountAfterTax"
+      >
+        <h3 class="text-gray-800">{{ t`Discount` }}</h3>
+        <p class="text-xl mt-2">{{ doc.totalDiscount }}</p>
+      </div>
+
+      <!-- Tax Breakdown -->
+      <div class="text-right py-3" v-for="tax in doc.taxes" :key="tax.name">
+        <h3 class="text-gray-800">{{ tax.account }}</h3>
+        <p class="text-xl mt-2">{{ tax.amount }}</p>
+      </div>
+
+      <!-- Discount (if applied after tax) -->
+      <div
+        class="text-right py-3"
+        v-if="doc.totalDiscount && doc.discountAfterTax"
+      >
+        <h3 class="text-gray-800">{{ t`Discount` }}</h3>
+        <p class="text-xl mt-2">{{ doc.totalDiscount }}</p>
+      </div>
+
+      <!-- Grand Total -->
+      <div
+        class="py-3 px-4 text-right text-white"
+        :style="{ backgroundColor: print.color }"
+      >
+        <h3>{{ t`Grand Total` }}</h3>
+        <p class="text-2xl mt-2 font-semibold">{{ doc.grandTotal }}</p>
+      </div>
+    </section>
+
+    <!-- Invoice Terms -->
+    <section class="mt-12" v-if="doc.terms">
+      <h3 class="text-lg font-semibold">Notes</h3>
+      <p class="mt-4 text-lg whitespace-pre-line">{{ doc.terms }}</p>
+    </section>
+  </footer>
+</main>
diff --git a/fixtures/printTemplates/Minimal.template.html b/fixtures/printTemplates/Minimal.template.html
index e06f60e18..8806e7751 100644
--- a/fixtures/printTemplates/Minimal.template.html
+++ b/fixtures/printTemplates/Minimal.template.html
@@ -1,11 +1,11 @@
-<main class="h-full">
+<main class="h-full" :style="{ 'font-family': print.font }">
   <!-- Invoice Header -->
   <header class="flex items-center justify-between w-full border-b px-12 py-10">
     <!-- Left Section -->
     <section class="flex items-center">
       <img
         v-if="print.displayLogo"
-        class="h-12 max-w-32 object-contain me-4"
+        class="h-12 max-w-32 object-contain mr-4"
         :src="print.logo"
       />
 
@@ -18,7 +18,7 @@
     </section>
 
     <!-- Right Section -->
-    <section class="text-end">
+    <section class="text-right">
       <p class="font-semibold text-xl" :style="{ color: print.color }">
         {{ doc.entryType }}
       </p>
@@ -57,23 +57,23 @@ <h3 class="uppercase text-sm font-semibold tracking-widest text-gray-800">
           font-semibold
           tracking-widest
           text-gray-800
-          ms-8
+          ml-8
         "
       >
         {{ doc.entryType === 'SalesInvoice' ? 'From' : 'To' }}
       </h3>
-      <p class="mt-4 ms-8 text-black leading-relaxed text-lg">
+      <p class="mt-4 ml-8 text-black leading-relaxed text-lg">
         {{ print.companyName }}
       </p>
       <p
         v-if="print.address"
-        class="mt-2 ms-8 text-black leading-relaxed text-lg"
+        class="mt-2 ml-8 text-black leading-relaxed text-lg"
       >
         {{ print.links.address.addressDisplay }}
       </p>
       <p
         v-if="print.gstin"
-        class="mt-2 ms-8 text-black leading-relaxed text-lg"
+        class="mt-2 ml-8 text-black leading-relaxed text-lg"
       >
         GSTIN: {{ print.gstin }}
       </p>
@@ -94,24 +94,24 @@ <h3 class="uppercase text-sm font-semibold tracking-widest text-gray-800">
         text-gray-800
       "
     >
-      <div class="w-4/12 text-start">Item</div>
-      <div class="w-2/12 text-end" v-if="doc.showHSN">HSN/SAC</div>
-      <div class="w-2/12 text-end">Quantity</div>
-      <div class="w-3/12 text-end">Rate</div>
-      <div class="w-3/12 text-end">Amount</div>
+      <div class="w-4/12 text-left">Item</div>
+      <div class="w-2/12 text-right" v-if="doc.showHSN">HSN/SAC</div>
+      <div class="w-2/12 text-right">Quantity</div>
+      <div class="w-3/12 text-right">Rate</div>
+      <div class="w-3/12 text-right">Amount</div>
     </section>
 
     <!-- Body Rows -->
     <section class="flex py-1 text-lg" v-for="row in doc.items" :key="row.name">
-      <div class="w-4/12 text-start">{{ row.item }}</div>
-      <div class="w-2/12 text-end" v-if="doc.showHSN">{{ row.hsnCode }}</div>
-      <div class="w-2/12 text-end">{{ row.quantity }}</div>
-      <div class="w-3/12 text-end">{{ row.rate }}</div>
-      <div class="w-3/12 text-end">{{ row.amount }}</div>
+      <div class="w-4/12 text-left">{{ row.item }}</div>
+      <div class="w-2/12 text-right" v-if="doc.showHSN">{{ row.hsnCode }}</div>
+      <div class="w-2/12 text-right">{{ row.quantity }}</div>
+      <div class="w-3/12 text-right">{{ row.rate }}</div>
+      <div class="w-3/12 text-right">{{ row.amount }}</div>
     </section>
   </section>
 
-  <!-- Footer -->
+  <!-- Invoice Footer -->
   <footer class="flex px-12 py-10">
     <!-- Invoice Terms -->
     <section class="w-1/2" v-if="doc.terms">
@@ -124,14 +124,14 @@ <h3 class="uppercase text-sm tracking-widest font-semibold text-gray-800">
     <!-- Totaled Amounts -->
     <section class="w-1/2 text-lg ml-auto">
       <!-- Subtotal -->
-      <div class="flex ps-2 justify-between py-1">
+      <div class="flex pl-2 justify-between py-1">
         <h3>{{ t`Subtotal` }}</h3>
         <p>{{ doc.netTotal }}</p>
       </div>
 
       <!-- Discount (if applied before tax) -->
       <div
-        class="flex ps-2 justify-between py-1"
+        class="flex pl-2 justify-between py-1"
         v-if="doc.totalDiscount && !doc.discountAfterTax"
       >
         <h3>{{ t`Discount` }}</h3>
@@ -140,7 +140,7 @@ <h3>{{ t`Discount` }}</h3>
 
       <!-- Tax Breakdown -->
       <div
-        class="flex ps-2 justify-between py-1"
+        class="flex pl-2 justify-between py-1"
         v-for="tax in doc.taxes"
         :key="tax.name"
       >
@@ -150,7 +150,7 @@ <h3>{{ tax.account }}</h3>
 
       <!-- Discount (if applied after tax) -->
       <div
-        class="flex ps-2 justify-between py-1"
+        class="flex pl-2 justify-between py-1"
         v-if="doc.totalDiscount && doc.discountAfterTax"
       >
         <h3>{{ t`Discount` }}</h3>
@@ -159,7 +159,7 @@ <h3>{{ t`Discount` }}</h3>
 
       <!-- Grand Total -->
       <div
-        class="flex ps-2 justify-between py-1 font-semibold"
+        class="flex pl-2 justify-between py-1 font-semibold"
         :style="{ color: print.color }"
       >
         <h3>{{ t`Grand Total` }}</h3>
diff --git a/models/baseModels/PrintTemplate.ts b/models/baseModels/PrintTemplate.ts
index 09382da66..79b259259 100644
--- a/models/baseModels/PrintTemplate.ts
+++ b/models/baseModels/PrintTemplate.ts
@@ -60,4 +60,10 @@ export class PrintTemplate extends Doc {
       }));
     },
   };
+
+  override duplicate(): Doc {
+    const doc = super.duplicate() as PrintTemplate;
+    doc.isCustom = true;
+    return doc;
+  }
 }
diff --git a/src/components/SalesInvoice/InvoiceTemplate.vue b/src/components/SalesInvoice/InvoiceTemplate.vue
deleted file mode 100644
index 86db57cd2..000000000
--- a/src/components/SalesInvoice/InvoiceTemplate.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <component :is="printComponent" :doc="doc" :print-settings="printSettings" />
-</template>
-
-<script>
-import Basic from './Templates/Basic';
-import Business from './Templates/Business';
-
-export default {
-  name: 'InvoiceTemplate',
-  props: ['doc', 'printSettings'],
-  computed: {
-    printComponent() {
-      let type = this.printSettings.template;
-      let templates = {
-        Basic,
-        Business,
-      };
-      if (!(type in templates)) {
-        type = 'Basic';
-      }
-      return templates[type];
-    },
-  },
-};
-</script>
diff --git a/src/components/SalesInvoice/Templates/BaseTemplate.vue b/src/components/SalesInvoice/Templates/BaseTemplate.vue
deleted file mode 100644
index e7b90e30d..000000000
--- a/src/components/SalesInvoice/Templates/BaseTemplate.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<script>
-export default {
-  name: 'Base',
-  props: { doc: Object, printSettings: Object },
-  data: () => ({ party: null, companyAddress: null, partyAddress: null }),
-  async mounted() {
-    await this.printSettings.loadLinks();
-    this.companyAddress = this.printSettings.getLink('address');
-
-    await this.doc.loadLinks();
-    this.party = this.doc.getLink('party');
-    this.partyAddress = this.party.getLink('address')?.addressDisplay ?? null;
-
-    if (this.fyo.store.isDevelopment) {
-      window.bt = this;
-    }
-  },
-  methods: {
-    getFormattedField(fieldname, doc) {
-      doc ??= this.doc;
-      const field = doc.fieldMap[fieldname];
-      const value = doc.get(fieldname);
-      if (Array.isArray(value)) {
-        return this.getFormattedChildDocList(fieldname);
-      }
-      return this.fyo.format(value, field, doc);
-    },
-    getFormattedChildDocList(fieldname) {
-      const formattedDocs = [];
-      for (const childDoc of this.doc?.[fieldname] ?? {}) {
-        formattedDocs.push(this.getFormattedChildDoc(childDoc));
-      }
-      return formattedDocs;
-    },
-    getFormattedChildDoc(childDoc) {
-      const formattedChildDoc = {};
-      for (const field of childDoc?.schema?.fields) {
-        if (field.meta) {
-          continue;
-        }
-
-        formattedChildDoc[field.fieldname] = this.getFormattedField(
-          field.fieldname,
-          childDoc
-        );
-      }
-      return formattedChildDoc;
-    },
-  },
-  computed: {
-    currency() {
-      return this.doc.isMultiCurrency
-        ? this.doc.currency
-        : this.fyo.singles.SystemSettings.currency;
-    },
-    isSalesInvoice() {
-      return this.doc.schemaName === 'SalesInvoice';
-    },
-    showHSN() {
-      return this.doc.items.map((i) => i.hsnCode).every(Boolean);
-    },
-    totalDiscount() {
-      return this.doc.getTotalDiscount();
-    },
-    formattedTotalDiscount() {
-      if (!this.totalDiscount?.float) {
-        return '';
-      }
-
-      const totalDiscount = this.fyo.format(this.totalDiscount, {
-        fieldname: 'Total Discount',
-        fieldtype: 'Currency',
-        currency: this.currency,
-      });
-
-      return `- ${totalDiscount}`;
-    },
-    printObject() {
-      return {
-        isSalesInvoice: this.isSalesInvoice,
-        font: this.printSettings.font,
-        color: this.printSettings.color,
-        showHSN: this.showHSN,
-        displayLogo: this.printSettings.displayLogo,
-        displayTaxInvoice: this.printSettings.displayTaxInvoice,
-        displayBatch: this.printSettings.displayBatch,
-        discountAfterTax: this.doc.discountAfterTax,
-        logo: this.printSettings.logo,
-        companyName: this.fyo.singles.AccountingSettings.companyName,
-        email: this.printSettings.email,
-        phone: this.printSettings.phone,
-        address: this.companyAddress?.addressDisplay,
-        gstin: this.fyo.singles?.AccountingSettings?.gstin,
-        invoiceName: this.doc.name,
-        date: this.getFormattedField('date'),
-        partyName: this.party?.name,
-        partyAddress: this.partyAddress,
-        partyGSTIN: this.party?.gstin,
-        terms: this.doc.terms,
-        netTotal: this.getFormattedField('netTotal'),
-        items: this.getFormattedField('items'),
-        taxes: this.getFormattedField('taxes'),
-        grandTotal: this.getFormattedField('grandTotal'),
-        totalDiscount: this.formattedTotalDiscount,
-      };
-    },
-  },
-};
-</script>
diff --git a/src/components/SalesInvoice/Templates/Basic.vue b/src/components/SalesInvoice/Templates/Basic.vue
deleted file mode 100644
index 04fc85fe3..000000000
--- a/src/components/SalesInvoice/Templates/Basic.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<template>
-  <div
-    class="bg-white border h-full"
-    :style="{ 'font-family': printObject.font }"
-  >
-    <div>
-      <div class="px-6 pt-6">
-        <h2
-          v-if="printObject.displayTaxInvoice"
-          class="font-semibold text-black text-2xl mb-4"
-        >
-          {{ t`Tax Invoice` }}
-        </h2>
-        <div class="flex text-sm text-gray-900 border-b pb-4">
-          <div class="w-1/3">
-            <div v-if="printObject.displayLogo">
-              <img
-                class="h-12 max-w-32 object-contain"
-                :src="printObject.logo"
-              />
-            </div>
-            <div class="text-xl text-gray-700 font-semibold" v-else>
-              {{ printObject.companyName }}
-            </div>
-          </div>
-          <div class="w-1/3">
-            <div>{{ printObject.email }}</div>
-            <div class="mt-1">{{ printObject.phone }}</div>
-          </div>
-          <div class="w-1/3">
-            <div v-if="printObject.address">
-              {{ printObject.address }}
-            </div>
-            <div v-if="printObject.gstin">GSTIN: {{ printObject.gstin }}</div>
-          </div>
-        </div>
-      </div>
-      <div class="mt-8 px-6">
-        <div class="flex justify-between">
-          <div class="w-1/3">
-            <h1 class="text-2xl font-semibold">
-              {{ printObject.invoiceName }}
-            </h1>
-            <div class="py-2 text-base">
-              {{ printObject.date }}
-            </div>
-          </div>
-          <div class="w-1/3" v-if="printObject.partyName">
-            <div class="py-1 text-end text-lg font-semibold">
-              {{ printObject.partyName }}
-            </div>
-            <div
-              v-if="printObject.partyAddress"
-              class="mt-1 text-xs text-gray-600 text-end"
-            >
-              {{ printObject.partyAddress }}
-            </div>
-            <div
-              v-if="printObject.partyGSTIN"
-              class="mt-1 text-xs text-gray-600 text-end"
-            >
-              GSTIN: {{ printObject.partyGSTIN }}
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="mt-2 px-6 text-base">
-        <div>
-          <div class="text-gray-600 w-full flex border-b">
-            <div class="py-4 w-5/12">Item</div>
-            <div class="py-4 text-end w-2/12" v-if="printObject.showHSN">
-              HSN/SAC
-            </div>
-            <div class="py-4 text-end w-2/12">Quantity</div>
-            <div
-              class="w-3/12 text-end py-4"
-              v-if="printObject.displayBatch"
-            >
-              Batch
-            </div>
-            <div class="py-4 text-end w-3/12">Rate</div>
-            <div class="py-4 text-end w-3/12">Amount</div>
-          </div>
-          <div
-            class="flex py-1 text-gray-900 w-full border-b"
-            v-for="row in printObject.items"
-            :key="row.name"
-          >
-            <div class="w-5/12 py-4">{{ row.item }}</div>
-            <div class="w-2/12 text-end py-4" v-if="printObject.showHSN">
-              {{ row.hsnCode }}
-            </div>
-            <div class="w-2/12 text-end py-4">{{ row.quantity }}</div>
-            <div
-              class="w-3/12 text-end py-4"
-              v-if="printObject.displayBatch"
-            >
-              {{ row.batch }}
-            </div>
-            <div class="w-3/12 text-end py-4">{{ row.rate }}</div>
-            <div class="w-3/12 text-end py-4">{{ row.amount }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="px-6 mt-2 flex justify-end text-base">
-      <div class="w-1/2">
-        <div
-          class="text-sm tracking-widest text-gray-600 mt-2"
-          v-if="printObject.terms"
-        >
-          Notes
-        </div>
-        <div class="my-4 text-lg whitespace-pre-line">
-          {{ printObject.terms }}
-        </div>
-      </div>
-      <div class="w-1/2">
-        <div class="flex ps-2 justify-between py-3 border-b">
-          <div>{{ t`Subtotal` }}</div>
-          <div>{{ printObject.netTotal }}</div>
-        </div>
-        <div
-          class="flex ps-2 justify-between py-3 border-b"
-          v-if="printObject.totalDiscount && !printObject.discountAfterTax"
-        >
-          <div>{{ t`Discount` }}</div>
-          <div>{{ printObject.totalDiscount }}</div>
-        </div>
-        <div
-          class="flex ps-2 justify-between py-3"
-          v-for="tax in printObject.taxes"
-          :key="tax.name"
-        >
-          <div>{{ tax.account }}</div>
-          <div>{{ tax.amount }}</div>
-        </div>
-        <div
-          class="flex ps-2 justify-between py-3 border-t"
-          v-if="printObject.totalDiscount && printObject.discountAfterTax"
-        >
-          <div>{{ t`Discount` }}</div>
-          <div>{{ printObject.totalDiscount }}</div>
-        </div>
-        <div
-          class="
-            flex
-            ps-2
-            justify-between
-            py-3
-            border-t
-            text-green-600
-            font-semibold
-            text-base
-          "
-        >
-          <div>{{ t`Grand Total` }}</div>
-          <div>{{ printObject.grandTotal }}</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import BaseTemplate from './BaseTemplate.vue';
-
-export default {
-  name: 'Default',
-  extends: BaseTemplate,
-};
-</script>
diff --git a/src/components/SalesInvoice/Templates/Business.vue b/src/components/SalesInvoice/Templates/Business.vue
deleted file mode 100644
index b75c7e363..000000000
--- a/src/components/SalesInvoice/Templates/Business.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<template>
-  <div
-    class="bg-white border h-full"
-    :style="{ 'font-family': printObject.font }"
-  >
-    <div class="bg-gray-100 px-12 py-10">
-      <h2
-        v-if="printObject.displayTaxInvoice"
-        class="font-semibold text-gray-900 text-2xl mb-4"
-      >
-        {{ t`Tax Invoice` }}
-      </h2>
-      <div class="flex items-center">
-        <div class="flex items-center rounded h-16">
-          <div class="me-4" v-if="printObject.displayLogo">
-            <img class="h-12 max-w-32 object-contain" :src="printObject.logo" />
-          </div>
-        </div>
-        <div>
-          <div
-            class="font-semibold text-xl"
-            :style="{ color: printObject.color }"
-          >
-            {{ printObject.companyName }}
-          </div>
-          <div class="text-sm text-gray-800" v-if="printObject.address">
-            {{ printObject.address }}
-          </div>
-          <div class="text-sm text-gray-800" v-if="printObject.gstin">
-            GSTIN: {{ printObject.gstin }}
-          </div>
-        </div>
-      </div>
-      <div class="mt-8 text-lg">
-        <div class="flex">
-          <div class="w-1/3 font-semibold">
-            {{ printObject.isSalesInvoice ? 'Invoice' : 'Bill' }}
-          </div>
-          <div class="w-2/3 text-gray-800">
-            <div class="font-semibold">
-              {{ printObject.invoiceName }}
-            </div>
-            <div>
-              {{ printObject.date }}
-            </div>
-          </div>
-        </div>
-        <div class="mt-4 flex">
-          <div class="w-1/3 font-semibold">
-            {{ printObject.isSalesInvoice ? 'Customer' : 'Supplier' }}
-          </div>
-          <div class="w-2/3 text-gray-800" v-if="printObject.partyName">
-            <div class="font-semibold">
-              {{ printObject.partyName }}
-            </div>
-            <div v-if="printObject.partyAddress">
-              {{ printObject.partyAddress }}
-            </div>
-            <div v-if="printObject.partyGSTIN">
-              GSTIN: {{ printObject.partyGSTIN }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="px-12 py-12 text-lg">
-      <div class="mb-4 flex font-semibold">
-        <div class="w-4/12">Item</div>
-        <div class="w-2/12 text-end" v-if="printObject.showHSN">HSN/SAC</div>
-        <div class="w-2/12 text-end">Quantity</div>
-        <div class="w-3/12 text-end" v-if="printObject.displayBatch">
-          Batch
-        </div>
-        <div class="w-3/12 text-end">Rate</div>
-        <div class="w-3/12 text-end">Amount</div>
-      </div>
-      <div
-        class="flex py-1 text-gray-800"
-        v-for="row in printObject.items"
-        :key="row.name"
-      >
-        <div class="w-4/12">{{ row.item }}</div>
-        <div class="w-2/12 text-end" v-if="printObject.showHSN">
-          {{ row.hsnCode }}
-        </div>
-        <div class="w-2/12 text-end">{{ row.quantity }}</div>
-        <div class="w-3/12 text-end" v-if="printObject.displayBatch">
-          {{ row.batch }}
-        </div>
-        <div class="w-3/12 text-end">{{ row.rate }}</div>
-        <div class="w-3/12 text-end">{{ row.amount }}</div>
-      </div>
-      <div class="mt-12">
-        <div class="flex -mx-3">
-          <div class="flex justify-end flex-1 py-3 bg-gray-100 gap-8 pe-6">
-            <div class="text-end">
-              <div class="text-gray-800">{{ t`Subtotal` }}</div>
-              <div class="text-xl mt-2">
-                {{ printObject.netTotal }}
-              </div>
-            </div>
-
-            <div
-              class="text-end"
-              v-if="printObject.totalDiscount && !printObject.discountAfterTax"
-            >
-              <div class="text-gray-800">{{ t`Discount` }}</div>
-              <div class="text-xl mt-2">
-                {{ printObject.totalDiscount }}
-              </div>
-            </div>
-
-            <div
-              class="text-end"
-              v-for="tax in printObject.taxes"
-              :key="tax.name"
-            >
-              <div class="text-gray-800">
-                {{ tax.account }}
-              </div>
-              <div class="text-xl mt-2">
-                {{ tax.amount }}
-              </div>
-            </div>
-
-            <div
-              class="text-end"
-              v-if="printObject.totalDiscount && printObject.discountAfterTax"
-            >
-              <div class="text-gray-800">{{ t`Discount` }}</div>
-              <div class="text-xl mt-2">
-                {{ printObject.totalDiscount }}
-              </div>
-            </div>
-          </div>
-          <div
-            class="py-3 px-4 text-end text-white"
-            :style="{ backgroundColor: printObject.color }"
-          >
-            <div>
-              <div>{{ t`Grand Total` }}</div>
-              <div class="text-2xl mt-2 font-semibold">
-                {{ printObject.grandTotal }}
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="mt-12" v-if="printObject.terms">
-          <div class="text-lg font-semibold">Notes</div>
-          <div class="mt-4 text-lg whitespace-pre-line">
-            {{ printObject.terms }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import BaseTemplate from './BaseTemplate.vue';
-
-export default {
-  name: 'Business',
-  extends: BaseTemplate,
-};
-</script>
diff --git a/src/pages/PrintView/PrintView.vue b/src/pages/PrintView/PrintView.vue
index 1fca66122..0a3837ad7 100644
--- a/src/pages/PrintView/PrintView.vue
+++ b/src/pages/PrintView/PrintView.vue
@@ -57,19 +57,13 @@
   </div>
 </template>
 <script>
-import { ipcRenderer } from 'electron';
 import { Verb } from 'fyo/telemetry/types';
 import Button from 'src/components/Button.vue';
 import PageHeader from 'src/components/PageHeader.vue';
-import InvoiceTemplate from 'src/components/SalesInvoice/InvoiceTemplate.vue';
 import TwoColumnForm from 'src/components/TwoColumnForm.vue';
 import { fyo } from 'src/initFyo';
 import { makePDF } from 'src/utils/ipcCalls';
-import {
-  constructPrintDocument,
-  getPathAndMakePDF,
-} from 'src/utils/printTemplates';
-import { IPC_ACTIONS } from 'utils/messages';
+import { getPathAndMakePDF } from 'src/utils/printTemplates';
 
 export default {
   name: 'PrintView',
@@ -96,7 +90,7 @@ export default {
   },
   computed: {
     printTemplate() {
-      return InvoiceTemplate;
+      return { template: '<div>Hello</div>' };
     },
   },
   methods: {

From be999269e2a9087ddcd07718abdd9e48002b4b34 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Mon, 6 Mar 2023 11:56:54 +0530
Subject: [PATCH 11/33] incr: rebase master - clearout PrintView - move doc
 status and barcode to the left - fix color field display

---
 models/baseModels/PrintTemplate.ts  |  2 +-
 src/components/Controls/Color.vue   |  1 +
 src/components/FormContainer.vue    |  3 ++
 src/components/PageHeader.vue       |  7 ++-
 src/pages/CommonForm/CommonForm.vue |  4 +-
 src/pages/InvoiceForm.vue           | 13 +++--
 src/pages/PrintView/PrintView.vue   | 73 +++++++++--------------------
 src/router.ts                       |  9 +---
 src/utils/ui.ts                     | 26 +++++++---
 9 files changed, 65 insertions(+), 73 deletions(-)

diff --git a/models/baseModels/PrintTemplate.ts b/models/baseModels/PrintTemplate.ts
index 79b259259..19deccf6d 100644
--- a/models/baseModels/PrintTemplate.ts
+++ b/models/baseModels/PrintTemplate.ts
@@ -19,7 +19,7 @@ export class PrintTemplate extends Doc {
 
   static getListViewSettings(): ListViewSettings {
     return {
-      formRoute: ({ name }) => `/template-builder/${name}`,
+      formRoute: (name) => `/template-builder/${name}`,
       columns: ['name', 'type', 'isCustom'],
     };
   }
diff --git a/src/components/Controls/Color.vue b/src/components/Controls/Color.vue
index 88fb579ff..9486616de 100644
--- a/src/components/Controls/Color.vue
+++ b/src/components/Controls/Color.vue
@@ -44,6 +44,7 @@
               :placeholder="t`Custom Hex`"
               :class="[inputClasses, containerClasses]"
               :value="value"
+              style="padding: 0"
               @change="(e) => setColorValue(e.target.value)"
             />
           </div>
diff --git a/src/components/FormContainer.vue b/src/components/FormContainer.vue
index 2ad11f783..5e940c0a5 100644
--- a/src/components/FormContainer.vue
+++ b/src/components/FormContainer.vue
@@ -3,6 +3,9 @@
     <div class="flex flex-1 flex-col">
       <!-- Page Header (Title, Buttons, etc) -->
       <PageHeader :title="title" :border="false" :searchborder="searchborder">
+        <template #left>
+          <slot name="header-left" />
+        </template>
         <slot name="header" />
       </PageHeader>
 
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index fd436dc24..1f6355a01 100644
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -16,6 +16,9 @@
     <h1 class="text-xl font-semibold select-none" v-if="title">
       {{ title }}
     </h1>
+    <div class="flex items-stretch window-no-drag gap-2">
+      <slot name="left" />
+    </div>
     <div
       class="flex items-stretch window-no-drag gap-2 ms-auto"
       :class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-18' : ''"
@@ -59,7 +62,7 @@ export default {
   opacity: 0;
   width: 0px;
   margin-right: 0px;
-  border-eight-width: 0px;
+  border-right-width: 0px;
 }
 
 .spacer-enter-to,
@@ -67,7 +70,7 @@ export default {
   opacity: 1;
   width: var(--w-trafficlights);
   margin-right: 1rem;
-  border-eight-width: 1px;
+  border-right-width: 1px;
 }
 
 .spacer-enter-active,
diff --git a/src/pages/CommonForm/CommonForm.vue b/src/pages/CommonForm/CommonForm.vue
index fdef4edd6..6c9242d20 100644
--- a/src/pages/CommonForm/CommonForm.vue
+++ b/src/pages/CommonForm/CommonForm.vue
@@ -1,7 +1,9 @@
 <template>
   <FormContainer>
+    <template #header-left v-if="hasDoc">
+      <StatusBadge :status="status" class="h-8" />
+    </template>
     <template #header v-if="hasDoc">
-      <StatusBadge :status="status" />
       <DropdownWithActions
         v-for="group of groupedActions"
         :key="group.label"
diff --git a/src/pages/InvoiceForm.vue b/src/pages/InvoiceForm.vue
index ce463ac95..a5c80c7ff 100644
--- a/src/pages/InvoiceForm.vue
+++ b/src/pages/InvoiceForm.vue
@@ -1,8 +1,15 @@
 <template>
   <FormContainer>
     <!-- Page Header (Title, Buttons, etc) -->
+    <template #header-left v-if="doc">
+      <StatusBadge :status="status" class="h-8" />
+      <Barcode
+        class="h-8"
+        v-if="doc.canEdit && fyo.singles.InventorySettings?.enableBarcodes"
+        @item-selected="(name) => doc.addItem(name)"
+      />
+    </template>
     <template #header v-if="doc">
-      <StatusBadge :status="status" />
       <ExchangeRate
         v-if="doc.isMultiCurrency"
         :disabled="doc?.isSubmitted || doc?.isCancelled"
@@ -13,10 +20,6 @@
           async (exchangeRate) => await doc.set('exchangeRate', exchangeRate)
         "
       />
-      <Barcode
-        v-if="doc.canEdit && fyo.singles.InventorySettings?.enableBarcodes"
-        @item-selected="(name) => doc.addItem(name)"
-      />
       <Button
         v-if="!doc.isCancelled && !doc.dirty"
         :icon="true"
diff --git a/src/pages/PrintView/PrintView.vue b/src/pages/PrintView/PrintView.vue
index 0a3837ad7..74c42ebc8 100644
--- a/src/pages/PrintView/PrintView.vue
+++ b/src/pages/PrintView/PrintView.vue
@@ -2,89 +2,56 @@
   <div class="flex">
     <div class="flex flex-col flex-1 bg-gray-25">
       <PageHeader class="z-10" :border="false">
-        <Button
-          class="text-gray-900 text-xs"
-          @click="showCustomiser = !showCustomiser"
-        >
-          {{ t`Customise` }}
+        <Button class="text-xs" @click="openPrintSettings">
+          {{ t`Settings` }}
         </Button>
-        <Button class="text-gray-900 text-xs" @click="makePDF">
+        <Button class="text-xs" type="primary" @click="makePDF">
           {{ t`Save as PDF` }}
         </Button>
       </PageHeader>
 
       <!-- Printview Preview -->
-      <div
-        v-if="doc && printSettings"
-        class="flex justify-center flex-1 overflow-auto relative"
-      >
+      <div v-if="doc" class="flex justify-center flex-1 overflow-auto relative">
         <div
           class="h-full shadow mb-4 absolute bg-white"
-          style="
-            width: 21cm;
-            height: 29.7cm;
-            transform: scale(0.65) translateY(-300px);
-          "
           ref="printContainer"
-        >
-          <component
-            class="flex-1"
-            :is="printTemplate"
-            v-bind="{ doc, printSettings }"
-          />
-        </div>
+        ></div>
       </div>
     </div>
-
-    <!-- Printview Customizer -->
-    <Transition name="quickedit">
-      <div class="border-s w-quick-edit" v-if="showCustomiser">
-        <div
-          class="px-4 flex items-center justify-between h-row-largest border-b"
-        >
-          <h2 class="font-semibold">{{ t`Customise` }}</h2>
-          <Button :icon="true" @click="showCustomiser = false">
-            <feather-icon name="x" class="w-4 h-4" />
-          </Button>
-        </div>
-        <TwoColumnForm
-          :doc="printSettings"
-          :autosave="true"
-          class="border-none"
-        />
-      </div>
-    </Transition>
   </div>
 </template>
-<script>
+<script lang="ts">
+import { Doc } from 'fyo/model/doc';
 import { Verb } from 'fyo/telemetry/types';
+import { ModelNameEnum } from 'models/types';
 import Button from 'src/components/Button.vue';
 import PageHeader from 'src/components/PageHeader.vue';
-import TwoColumnForm from 'src/components/TwoColumnForm.vue';
 import { fyo } from 'src/initFyo';
 import { makePDF } from 'src/utils/ipcCalls';
 import { getPathAndMakePDF } from 'src/utils/printTemplates';
+import { openSettings } from 'src/utils/ui';
+import { defineComponent } from 'vue';
 
-export default {
+export default defineComponent({
   name: 'PrintView',
-  props: { schemaName: String, name: String },
+  props: {
+    schemaName: { type: String, required: true },
+    name: { type: String, required: true },
+  },
   components: {
     PageHeader,
     Button,
-    TwoColumnForm,
   },
   data() {
     return {
       doc: null,
-      showCustomiser: false,
-      printSettings: null,
-    };
+    } as { doc: null | Doc };
   },
   async mounted() {
     this.doc = await fyo.doc.getDoc(this.schemaName, this.name);
-    this.printSettings = await fyo.doc.getDoc('PrintSettings');
 
     if (fyo.store.isDevelopment) {
+      // @ts-ignore
       window.pv = this;
     }
   },
@@ -94,11 +61,15 @@ export default {
     },
   },
   methods: {
+    async openPrintSettings() {
+      await openSettings(ModelNameEnum.PrintSettings);
+    },
     async makePDF() {
+      // @ts-ignore
       const innerHTML = this.$refs.printContainer.innerHTML;
       await getPathAndMakePDF(this.name, innerHTML);
       fyo.telemetry.log(Verb.Exported, 'SalesInvoice', { extension: 'pdf' });
     },
   },
-};
+});
 </script>
diff --git a/src/router.ts b/src/router.ts
index b89a52de7..5c5a7a6c7 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,5 +1,4 @@
 import { ModelNameEnum } from 'models/types';
-import TemplateBuilder from 'src/pages/TemplateBuilder/TemplateBuilder.vue';
 import ChartOfAccounts from 'src/pages/ChartOfAccounts.vue';
 import CommonForm from 'src/pages/CommonForm/CommonForm.vue';
 import Dashboard from 'src/pages/Dashboard/Dashboard.vue';
@@ -11,12 +10,8 @@ import PrintView from 'src/pages/PrintView/PrintView.vue';
 import QuickEditForm from 'src/pages/QuickEditForm.vue';
 import Report from 'src/pages/Report.vue';
 import Settings from 'src/pages/Settings/Settings.vue';
-import {
-  createRouter,
-  createWebHistory,
-  RouteLocationRaw,
-  RouteRecordRaw,
-} from 'vue-router';
+import TemplateBuilder from 'src/pages/TemplateBuilder/TemplateBuilder.vue';
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
 
 function getCommonFormItems(): RouteRecordRaw[] {
   return [
diff --git a/src/utils/ui.ts b/src/utils/ui.ts
index 23facff70..38ba96f0a 100644
--- a/src/utils/ui.ts
+++ b/src/utils/ui.ts
@@ -141,8 +141,8 @@ function replaceAndAppendMount(app: App<Element>, replaceId: string) {
   parent!.append(clone);
 }
 
-export function openSettings(tab: SettingsTab) {
-  routeTo({ path: '/settings', query: { tab } });
+export async function openSettings(tab: SettingsTab) {
+  await routeTo({ path: '/settings', query: { tab } });
 }
 
 export async function routeTo(route: RouteLocationRaw) {
@@ -337,11 +337,24 @@ function getDeleteAction(doc: Doc): Action {
   };
 }
 
-async function openEdit(doc: Doc) {
+async function openEdit({ name, schemaName }: Doc) {
+  if (!name) {
+    return;
+  }
+
+  const route = getFormRoute(schemaName, name);
+  return await routeTo(route);
+
+  /*
   const listConfig = fyo.models[doc.schemaName]?.getListViewSettings?.(fyo);
   const formRoute = listConfig?.formRoute;
+  if (!doc.name) {
+    return;
+  }
+
   if (formRoute) {
-    return await routeTo(formRoute(doc));
+    const route = formRoute(doc.name);
+    return await routeTo(route);
   }
 
   const isFormEdit = [
@@ -356,10 +369,11 @@ async function openEdit(doc: Doc) {
   ].includes(doc.schemaName as ModelNameEnum);
 
   if (isFormEdit) {
-    return await routeTo(`/edit/${doc.schemaName}/${doc.name!}`);
+    return await routeTo(`/edit/${doc.schemaName}/${doc.name}`);
   }
 
-  await openQuickEdit({ schemaName: doc.schemaName, name: doc.name! });
+  await openQuickEdit({ schemaName: doc.schemaName, name: doc.name });
+  */
 }
 
 function getDuplicateAction(doc: Doc): Action {

From e63f24751cd6ebe59aa994aa7f0f69d6c47c0ff8 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Mon, 6 Mar 2023 14:18:04 +0530
Subject: [PATCH 12/33] incr: add PrintContainer - update PrintView to use save
 PrintTemplates - use PrintContainer in TemplateBuilder - refactor
 handleErrorWithDialog

---
 src/App.vue                                   |   6 +-
 src/errorHandling.ts                          |   6 +-
 src/pages/CommonForm/CommonForm.vue           |   8 -
 src/pages/PrintView/PrintView.vue             | 204 +++++++++++++++---
 src/pages/Settings/Settings.vue               |   8 +-
 src/pages/TemplateBuilder/PrintContainer.vue  |  48 +++++
 src/pages/TemplateBuilder/TemplateBuilder.vue |  61 ++----
 src/utils/printTemplates.ts                   |   7 +-
 src/utils/types.ts                            |   5 +
 9 files changed, 267 insertions(+), 86 deletions(-)
 create mode 100644 src/pages/TemplateBuilder/PrintContainer.vue

diff --git a/src/App.vue b/src/App.vue
index a6333a22e..5fa983a08 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -128,7 +128,7 @@ export default {
         'companyName'
       );
       await this.setSearcher();
-      await updateConfigFiles(fyo);
+      updateConfigFiles(fyo);
     },
     async setSearcher() {
       this.searcher = new Search(fyo);
@@ -166,10 +166,6 @@ export default {
       const { onboardingComplete } = await fyo.doc.getDoc('GetStarted');
       const { hideGetStarted } = await fyo.doc.getDoc('SystemSettings');
 
-      if (fyo.store.isDevelopment) {
-        return routeTo('/list/PrintTemplate');
-      }
-
       if (hideGetStarted || onboardingComplete) {
         routeTo('/');
       } else {
diff --git a/src/errorHandling.ts b/src/errorHandling.ts
index 2d67e83e5..784062c1f 100644
--- a/src/errorHandling.ts
+++ b/src/errorHandling.ts
@@ -94,11 +94,15 @@ export async function handleError(
 }
 
 export async function handleErrorWithDialog(
-  error: Error,
+  error: unknown,
   doc?: Doc,
   reportError?: false,
   dontThrow?: false
 ) {
+  if (!(error instanceof Error)) {
+    return;
+  }
+
   const errorMessage = getErrorMessage(error, doc);
   await handleError(false, error, { errorMessage, doc });
 
diff --git a/src/pages/CommonForm/CommonForm.vue b/src/pages/CommonForm/CommonForm.vue
index 6c9242d20..c14ecfdf8 100644
--- a/src/pages/CommonForm/CommonForm.vue
+++ b/src/pages/CommonForm/CommonForm.vue
@@ -256,10 +256,6 @@ export default defineComponent({
         await this.doc.sync();
         this.updateGroupedFields();
       } catch (err) {
-        if (!(err instanceof Error)) {
-          return;
-        }
-
         await handleErrorWithDialog(err, this.doc);
       }
     },
@@ -268,10 +264,6 @@ export default defineComponent({
         await this.doc.submit();
         this.updateGroupedFields();
       } catch (err) {
-        if (!(err instanceof Error)) {
-          return;
-        }
-
         await handleErrorWithDialog(err, this.doc);
       }
     },
diff --git a/src/pages/PrintView/PrintView.vue b/src/pages/PrintView/PrintView.vue
index 74c42ebc8..8c5aeaac5 100644
--- a/src/pages/PrintView/PrintView.vue
+++ b/src/pages/PrintView/PrintView.vue
@@ -1,36 +1,64 @@
 <template>
   <div class="flex">
     <div class="flex flex-col flex-1 bg-gray-25">
-      <PageHeader class="z-10" :border="false">
-        <Button class="text-xs" @click="openPrintSettings">
-          {{ t`Settings` }}
-        </Button>
-        <Button class="text-xs" type="primary" @click="makePDF">
+      <PageHeader :border="true">
+        <template #left>
+          <AutoComplete
+            v-if="templateList.length"
+            :df="{
+              fieldname: 'templateName',
+              label: t`Template Name`,
+              target: 'PrintTemplate',
+              options: templateList,
+            }"
+            input-class="text-base py-0 h-8"
+            class="w-56"
+            :border="true"
+            :value="templateName"
+            @change="onTemplateNameChange"
+          />
+        </template>
+        <DropdownWithActions :actions="actions" :title="t`More`" />
+        <Button class="text-xs" type="primary" @click="savePDF">
           {{ t`Save as PDF` }}
         </Button>
       </PageHeader>
 
-      <!-- Printview Preview -->
-      <div v-if="doc" class="flex justify-center flex-1 overflow-auto relative">
-        <div
-          class="h-full shadow mb-4 absolute bg-white"
+      <!-- Template Display Area -->
+      <div class="overflow-auto custom-scroll p-4">
+        <!-- Display Hints -->
+        <div v-if="helperMessage" class="text-sm text-gray-700">
+          {{ helperMessage }}
+        </div>
+
+        <!-- Template Container -->
+        <PrintContainer
           ref="printContainer"
-        ></div>
+          v-if="printProps"
+          :template="printProps.template"
+          :values="printProps.values"
+          :scale="scale"
+        />
       </div>
     </div>
   </div>
 </template>
 <script lang="ts">
 import { Doc } from 'fyo/model/doc';
-import { Verb } from 'fyo/telemetry/types';
+import { Action } from 'fyo/model/types';
+import { PrintTemplate } from 'models/baseModels/PrintTemplate';
 import { ModelNameEnum } from 'models/types';
 import Button from 'src/components/Button.vue';
+import AutoComplete from 'src/components/Controls/AutoComplete.vue';
+import DropdownWithActions from 'src/components/DropdownWithActions.vue';
 import PageHeader from 'src/components/PageHeader.vue';
+import { handleErrorWithDialog } from 'src/errorHandling';
 import { fyo } from 'src/initFyo';
-import { makePDF } from 'src/utils/ipcCalls';
-import { getPathAndMakePDF } from 'src/utils/printTemplates';
-import { openSettings } from 'src/utils/ui';
+import { getPrintTemplatePropValues } from 'src/utils/printTemplates';
+import { PrintValues } from 'src/utils/types';
+import { getFormRoute, openSettings, routeTo } from 'src/utils/ui';
 import { defineComponent } from 'vue';
+import PrintContainer from '../TemplateBuilder/PrintContainer.vue';
 
 export default defineComponent({
   name: 'PrintView',
@@ -41,34 +69,160 @@ export default defineComponent({
   components: {
     PageHeader,
     Button,
+    AutoComplete,
+    PrintContainer,
+    DropdownWithActions,
   },
   data() {
     return {
       doc: null,
-    } as { doc: null | Doc };
+      scale: 1,
+      values: null,
+      templateDoc: null,
+      templateName: null,
+      templateList: [],
+    } as {
+      doc: null | Doc;
+      scale: number;
+      values: null | PrintValues;
+      templateDoc: null | PrintTemplate;
+      templateName: null | string;
+      templateList: string[];
+    };
   },
   async mounted() {
     this.doc = await fyo.doc.getDoc(this.schemaName, this.name);
-
+    await this.setTemplateList();
     if (fyo.store.isDevelopment) {
       // @ts-ignore
       window.pv = this;
     }
+
+    if (this.templateList.length) {
+      this.onTemplateNameChange(this.templateList[0]);
+    }
+
+    if (this.doc) {
+      this.values = await getPrintTemplatePropValues(this.doc as Doc);
+    }
   },
   computed: {
-    printTemplate() {
-      return { template: '<div>Hello</div>' };
+    helperMessage() {
+      if (!this.templateList.length) {
+        const label =
+          this.fyo.schemaMap[this.schemaName]?.label ?? this.schemaName;
+
+        return this.t`No Print Templates not found for entry type ${label}`;
+      }
+
+      if (!this.templateDoc) {
+        return this.t`Please select a Print Template`;
+      }
+
+      return '';
+    },
+    printProps(): null | { template: string; values: PrintValues } {
+      const values = this.values;
+      if (!values) {
+        return null;
+      }
+
+      const template = this.templateDoc?.template;
+      if (!template) {
+        return null;
+      }
+
+      return { values, template };
+    },
+    actions(): Action[] {
+      const actions = [
+        {
+          label: this.t`Print Settings`,
+          group: this.t`View`,
+          async action() {
+            await openSettings(ModelNameEnum.PrintSettings);
+          },
+        },
+        {
+          label: this.t`New Template`,
+          group: this.t`Create`,
+          action: async () => {
+            const doc = this.fyo.doc.getNewDoc(ModelNameEnum.PrintTemplate, {
+              type: this.schemaName,
+            });
+
+            const route = getFormRoute(doc.schemaName, doc.name!);
+            await routeTo(route);
+          },
+        },
+      ];
+
+      const templateDocName = this.templateDoc?.name;
+      if (templateDocName) {
+        actions.push({
+          label: templateDocName,
+          group: this.t`View`,
+          action: async () => {
+            const route = getFormRoute(
+              ModelNameEnum.PrintTemplate,
+              templateDocName
+            );
+            await routeTo(route);
+          },
+        });
+
+        actions.push({
+          label: this.t`Duplicate Template`,
+          group: this.t`Create`,
+          action: async () => {
+            const doc = this.fyo.doc.getNewDoc(ModelNameEnum.PrintTemplate, {
+              type: this.schemaName,
+              template: this.templateDoc?.template,
+            });
+
+            const route = getFormRoute(doc.schemaName, doc.name!);
+            await routeTo(route);
+          },
+        });
+      }
+
+      return actions;
     },
   },
   methods: {
-    async openPrintSettings() {
-      await openSettings(ModelNameEnum.PrintSettings);
+    async onTemplateNameChange(value: string | null): Promise<void> {
+      if (!value) {
+        this.templateDoc = null;
+        return;
+      }
+
+      this.templateName = value;
+      try {
+        this.templateDoc = (await this.fyo.doc.getDoc(
+          ModelNameEnum.PrintTemplate,
+          this.templateName
+        )) as PrintTemplate;
+      } catch (error) {
+        await handleErrorWithDialog(error);
+      }
     },
-    async makePDF() {
-      // @ts-ignore
-      const innerHTML = this.$refs.printContainer.innerHTML;
-      await getPathAndMakePDF(this.name, innerHTML);
-      fyo.telemetry.log(Verb.Exported, 'SalesInvoice', { extension: 'pdf' });
+    async setTemplateList(): Promise<void> {
+      const list = (await this.fyo.db.getAllRaw(ModelNameEnum.PrintTemplate, {
+        filters: { type: this.schemaName },
+      })) as { name: string }[];
+
+      this.templateList = list.map(({ name }) => name);
+    },
+    async savePDF() {
+      const printContainer = this.$refs.printContainer as {
+        savePDF: (name?: string) => void;
+      };
+
+      if (!printContainer?.savePDF) {
+        return;
+      }
+
+      printContainer.savePDF(this.doc?.name);
     },
   },
 });
diff --git a/src/pages/Settings/Settings.vue b/src/pages/Settings/Settings.vue
index 125b43445..52ea012ea 100644
--- a/src/pages/Settings/Settings.vue
+++ b/src/pages/Settings/Settings.vue
@@ -161,12 +161,8 @@ export default defineComponent({
       try {
         await doc.sync();
         this.updateGroupedFields();
-      } catch (err) {
-        if (!(err instanceof Error)) {
-          return;
-        }
-
-        await handleErrorWithDialog(err, doc);
+      } catch (error) {
+        await handleErrorWithDialog(error, doc);
       }
     },
     async onValueChange(field: Field, value: DocValue): Promise<void> {
diff --git a/src/pages/TemplateBuilder/PrintContainer.vue b/src/pages/TemplateBuilder/PrintContainer.vue
new file mode 100644
index 000000000..c464689c9
--- /dev/null
+++ b/src/pages/TemplateBuilder/PrintContainer.vue
@@ -0,0 +1,48 @@
+<template>
+  <ScaledContainer
+    :scale="Math.max(scale, 0.1)"
+    ref="scaledContainer"
+    class="mx-auto shadow-lg border"
+  >
+    <!-- Template -->
+    <component
+      class="flex-1 bg-white"
+      :doc="values.doc"
+      :print="values.print"
+      :is="{ template, props: ['doc', 'print'] }"
+    />
+  </ScaledContainer>
+</template>
+<script lang="ts">
+import { getPathAndMakePDF } from 'src/utils/printTemplates';
+import { PrintValues } from 'src/utils/types';
+import { defineComponent, PropType } from 'vue';
+import ScaledContainer from './ScaledContainer.vue';
+
+export default defineComponent({
+  props: {
+    template: { type: String, required: true },
+    scale: { type: Number, default: 0.65 },
+    values: {
+      type: Object as PropType<PrintValues>,
+      required: true,
+    },
+  },
+  methods: {
+    async savePDF(name?: string) {
+      /**
+       * To be called through ref by the parent component.
+       */
+
+      // @ts-ignore
+      const innerHTML = this.$refs.scaledContainer.$el.children[0].innerHTML;
+      if (typeof innerHTML !== 'string') {
+        return;
+      }
+
+      await getPathAndMakePDF(name ?? this.t`Entry`, innerHTML);
+    },
+  },
+  components: { ScaledContainer },
+});
+</script>
diff --git a/src/pages/TemplateBuilder/TemplateBuilder.vue b/src/pages/TemplateBuilder/TemplateBuilder.vue
index 1b6aea058..5660a6253 100644
--- a/src/pages/TemplateBuilder/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilder.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <PageHeader :title="t`Template Builder`">
-      <Button v-if="displayDoc && doc?.template" @click="makePDF">
+      <Button v-if="displayDoc && doc?.template" @click="savePDF">
         {{ t`Save as PDF` }}
       </Button>
       <DropdownWithActions v-if="doc?.inserted" :actions="actions" />
@@ -21,25 +21,18 @@
       <!-- Template Display Area -->
       <div class="overflow-auto custom-scroll p-4">
         <!-- Display Hints -->
-        <div v-if="helperText" class="text-sm text-gray-700">
-          {{ helperText }}
+        <div v-if="helperMessage" class="text-sm text-gray-700">
+          {{ helperMessage }}
         </div>
 
         <!-- Template Container -->
-        <ScaledContainer
+        <PrintContainer
+          ref="printContainer"
           v-if="doc.template && values"
-          :scale="Math.max(scale, 0.1)"
-          ref="scaledContainer"
-          class="mx-auto shadow-lg border"
-        >
-          <!-- Template -->
-          <component
-            class="flex-1 bg-white"
-            :doc="values.doc"
-            :print="values.print"
-            :is="{ template: doc.template, props: ['doc', 'print'] }"
-          />
-        </ScaledContainer>
+          :template="doc.template"
+          :values="values"
+          :scale="scale"
+        />
       </div>
 
       <!-- Template Builder Controls -->
@@ -245,20 +238,18 @@ import { Field, TargetField } from 'schemas/types';
 import Button from 'src/components/Button.vue';
 import FormControl from 'src/components/Controls/FormControl.vue';
 import DropdownWithActions from 'src/components/DropdownWithActions.vue';
-import FormHeader from 'src/components/FormHeader.vue';
 import Modal from 'src/components/Modal.vue';
 import PageHeader from 'src/components/PageHeader.vue';
 import { handleErrorWithDialog } from 'src/errorHandling';
-import { makePDF } from 'src/utils/ipcCalls';
 import {
-  getPathAndMakePDF,
   getPrintTemplatePropHints,
   getPrintTemplatePropValues,
 } from 'src/utils/printTemplates';
+import { PrintValues } from 'src/utils/types';
 import { getActionsForDoc, getDocFromNameIfExistsElseNew } from 'src/utils/ui';
 import { getMapFromList } from 'utils/index';
 import { computed, defineComponent } from 'vue';
-import ScaledContainer from './ScaledContainer.vue';
+import PrintContainer from './PrintContainer.vue';
 import TemplateBuilderHint from './TemplateBuilderHint.vue';
 
 export default defineComponent({
@@ -268,10 +259,9 @@ export default defineComponent({
     FormControl,
     Button,
     Modal,
-    FormHeader,
     TemplateBuilderHint,
     DropdownWithActions,
-    ScaledContainer,
+    PrintContainer,
   },
   provide() {
     return { doc: computed(() => this.doc) };
@@ -288,7 +278,7 @@ export default defineComponent({
       scale: 0.65,
     } as {
       hint: null | Record<string, unknown>;
-      values: null | Record<string, unknown>;
+      values: null | PrintValues;
       doc: PrintTemplate | null;
       showEditor: boolean;
       displayDoc: PrintTemplate | null;
@@ -312,19 +302,16 @@ export default defineComponent({
     await this.setInitialDoc();
   },
   methods: {
-    async makePDF() {
-      const displayDoc = this.displayDoc;
-      if (!displayDoc) {
-        return;
-      }
+    async savePDF() {
+      const printContainer = this.$refs.printContainer as {
+        savePDF: (name?: string) => void;
+      };
 
-      // @ts-ignore
-      const innerHTML = this.$refs.scaledContainer.$el.children[0].innerHTML;
-      if (!innerHTML) {
+      if (!printContainer?.savePDF) {
         return;
       }
 
-      await getPathAndMakePDF(displayDoc.name!, innerHTML);
+      printContainer.savePDF(this.displayDoc?.name);
     },
     async setInitialDoc() {
       const schemaName = this.doc?.type;
@@ -354,12 +341,8 @@ export default defineComponent({
 
       try {
         await doc.sync();
-      } catch (err) {
-        if (!(err instanceof Error)) {
-          return;
-        }
-
-        await handleErrorWithDialog(err, doc as Doc);
+      } catch (error) {
+        await handleErrorWithDialog(error, doc as Doc);
       }
     },
     async setDoc() {
@@ -414,7 +397,7 @@ export default defineComponent({
         target,
       };
     },
-    helperText() {
+    helperMessage() {
       if (!this.doc) {
         return '';
       }
diff --git a/src/utils/printTemplates.ts b/src/utils/printTemplates.ts
index 4f16398ad..9f3c45448 100644
--- a/src/utils/printTemplates.ts
+++ b/src/utils/printTemplates.ts
@@ -4,6 +4,7 @@ import { Invoice } from 'models/baseModels/Invoice/Invoice';
 import { ModelNameEnum } from 'models/types';
 import { FieldTypeEnum, Schema, TargetField } from 'schemas/types';
 import { getSavePath, makePDF } from './ipcCalls';
+import { PrintValues } from './types';
 
 type PrintTemplateData = Record<string, unknown>;
 
@@ -19,9 +20,11 @@ const printSettingsFields = [
 ];
 const accountingSettingsFields = ['companyName', 'gstin'];
 
-export async function getPrintTemplatePropValues(doc: Doc) {
+export async function getPrintTemplatePropValues(
+  doc: Doc
+): Promise<PrintValues> {
   const fyo = doc.fyo;
-  const values: PrintTemplateData = {};
+  const values: PrintValues = { doc: {}, print: {} };
   values.doc = await getPrintTemplateDocValues(doc);
   (values.doc as PrintTemplateData).entryType = doc.schema.name;
   (values.doc as PrintTemplateData).entryLabel = doc.schema.label;
diff --git a/src/utils/types.ts b/src/utils/types.ts
index cc71f09a3..57e30d976 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -85,3 +85,8 @@ export type ActionGroup = {
 export type UIGroupedFields = Map<string, Map<string, Field[]>>;
 export type ExportFormat = 'csv' | 'json';
 export type PeriodKey = 'This Year' | 'This Quarter' | 'This Month';
+
+export type PrintValues = {
+  print: Record<string, unknown>;
+  doc: Record<string, unknown>;
+};

From 0d3541fcb7fad7b4755d8cacdacb7355e6f5a691 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Mon, 6 Mar 2023 14:35:13 +0530
Subject: [PATCH 13/33] fix: templatebuilder readonly - rename variable in
 evaluateFieldMeta - add action to templatebuilder

---
 models/baseModels/PrintTemplate.ts            |  6 +++---
 src/pages/TemplateBuilder/TemplateBuilder.vue | 19 +++++++++++++++++--
 src/utils/doc.ts                              |  6 +++---
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/models/baseModels/PrintTemplate.ts b/models/baseModels/PrintTemplate.ts
index 19deccf6d..98f633378 100644
--- a/models/baseModels/PrintTemplate.ts
+++ b/models/baseModels/PrintTemplate.ts
@@ -25,9 +25,9 @@ export class PrintTemplate extends Doc {
   }
 
   readOnly: ReadOnlyMap = {
-    name: () => !!this.isCustom,
-    type: () => !!this.isCustom,
-    template: () => !!this.isCustom,
+    name: () => !this.isCustom,
+    type: () => !this.isCustom,
+    template: () => !this.isCustom,
   };
 
   static lists: ListsMap = {
diff --git a/src/pages/TemplateBuilder/TemplateBuilder.vue b/src/pages/TemplateBuilder/TemplateBuilder.vue
index 5660a6253..5e700982b 100644
--- a/src/pages/TemplateBuilder/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilder.vue
@@ -157,6 +157,7 @@
               @change="
               async (e: Event) => await doc?.set('template', (e.target as HTMLTextAreaElement).value)
             "
+              :disabled="!doc?.isCustom"
             />
             <button
               class="bg-gray-200 p-0.5 rounded absolute bottom-4 left-2"
@@ -223,6 +224,7 @@
               @change="
               async (e: Event) => await doc?.set('template', (e.target as HTMLTextAreaElement).value)
             "
+              :disabled="!doc?.isCustom"
             ></textarea>
           </div>
         </div>
@@ -246,7 +248,11 @@ import {
   getPrintTemplatePropValues,
 } from 'src/utils/printTemplates';
 import { PrintValues } from 'src/utils/types';
-import { getActionsForDoc, getDocFromNameIfExistsElseNew } from 'src/utils/ui';
+import {
+  getActionsForDoc,
+  getDocFromNameIfExistsElseNew,
+  openSettings,
+} from 'src/utils/ui';
 import { getMapFromList } from 'utils/index';
 import { computed, defineComponent } from 'vue';
 import PrintContainer from './PrintContainer.vue';
@@ -380,7 +386,16 @@ export default defineComponent({
         return [];
       }
 
-      return getActionsForDoc(this.doc as Doc);
+      const actions = getActionsForDoc(this.doc as Doc);
+      actions.push({
+        label: this.t`Print Settings`,
+        group: this.t`View`,
+        async action() {
+          await openSettings(ModelNameEnum.PrintSettings);
+        },
+      });
+
+      return actions;
     },
     fields(): Record<string, Field> {
       return getMapFromList(
diff --git a/src/utils/doc.ts b/src/utils/doc.ts
index e8bab8cf8..9ce924c92 100644
--- a/src/utils/doc.ts
+++ b/src/utils/doc.ts
@@ -47,9 +47,9 @@ function evaluateFieldMeta(
     return value;
   }
 
-  const hiddenFunction = doc?.[meta]?.[field.fieldname];
-  if (hiddenFunction !== undefined) {
-    return hiddenFunction();
+  const evalFunction = doc?.[meta]?.[field.fieldname];
+  if (evalFunction !== undefined) {
+    return evalFunction();
   }
 
   return defaultValue;

From f9fbefad0e2bedaa806d46a9707f2ed639cd8ed8 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Mon, 6 Mar 2023 15:13:54 +0530
Subject: [PATCH 14/33] incr: add Print button to common form - remove template
 setting from print settings - allow setting default templates

---
 models/baseModels/Defaults/Defaults.ts | 27 ++++++++++++++
 schemas/app/Defaults.json              | 49 ++++++++++++++++++++++++++
 schemas/app/PrintSettings.json         | 34 ------------------
 src/pages/CommonForm/CommonForm.vue    | 13 +++++++
 src/pages/PrintView/PrintView.vue      | 17 +++++++--
 src/utils/ui.ts                        |  7 ++++
 6 files changed, 111 insertions(+), 36 deletions(-)

diff --git a/models/baseModels/Defaults/Defaults.ts b/models/baseModels/Defaults/Defaults.ts
index e78c7f286..e6436a2b9 100644
--- a/models/baseModels/Defaults/Defaults.ts
+++ b/models/baseModels/Defaults/Defaults.ts
@@ -3,6 +3,7 @@ import { FiltersMap, HiddenMap } from 'fyo/model/types';
 import { ModelNameEnum } from 'models/types';
 
 export class Defaults extends Doc {
+  // Number Series
   salesInvoiceNumberSeries?: string;
   purchaseInvoiceNumberSeries?: string;
   journalEntryNumberSeries?: string;
@@ -11,12 +12,23 @@ export class Defaults extends Doc {
   shipmentNumberSeries?: string;
   purchaseReceiptNumberSeries?: string;
 
+  // Terms
   salesInvoiceTerms?: string;
   purchaseInvoiceTerms?: string;
   shipmentTerms?: string;
   purchaseReceiptTerms?: string;
 
+  // Print Templates
+  salesInvoicePrintTemplate?: string;
+  purchaseInvoicePrintTemplate?: string;
+  journalEntryPrintTemplate?: string;
+  paymentPrintTemplate?: string;
+  shipmentPrintTemplate?: string;
+  purchaseReceiptPrintTemplate?: string;
+  stockMovementPrintTemplate?: string;
+
   static commonFilters = {
+    // Number Series
     salesInvoiceNumberSeries: () => ({
       referenceType: ModelNameEnum.SalesInvoice,
     }),
@@ -38,6 +50,18 @@ export class Defaults extends Doc {
     purchaseReceiptNumberSeries: () => ({
       referenceType: ModelNameEnum.PurchaseReceipt,
     }),
+    // Print Templates
+    salesInvoicePrintTemplate: () => ({ type: ModelNameEnum.SalesInvoice }),
+    purchaseInvoicePrintTemplate: () => ({
+      type: ModelNameEnum.PurchaseInvoice,
+    }),
+    journalEntryPrintTemplate: () => ({ type: ModelNameEnum.JournalEntry }),
+    paymentPrintTemplate: () => ({ type: ModelNameEnum.Payment }),
+    shipmentPrintTemplate: () => ({ type: ModelNameEnum.Shipment }),
+    purchaseReceiptPrintTemplate: () => ({
+      type: ModelNameEnum.PurchaseReceipt,
+    }),
+    stockMovementPrintTemplate: () => ({ type: ModelNameEnum.StockMovement }),
   };
 
   static filters: FiltersMap = this.commonFilters;
@@ -53,6 +77,9 @@ export class Defaults extends Doc {
     purchaseReceiptNumberSeries: this.getInventoryHidden(),
     shipmentTerms: this.getInventoryHidden(),
     purchaseReceiptTerms: this.getInventoryHidden(),
+    shipmentPrintTemplate: this.getInventoryHidden(),
+    purchaseReceiptPrintTemplate: this.getInventoryHidden(),
+    stockMovementPrintTemplate: this.getInventoryHidden(),
   };
 }
 
diff --git a/schemas/app/Defaults.json b/schemas/app/Defaults.json
index d68c6c79b..6bd9d1c3f 100644
--- a/schemas/app/Defaults.json
+++ b/schemas/app/Defaults.json
@@ -83,6 +83,55 @@
       "label": "Purchase Receipt Terms",
       "fieldtype": "Text",
       "section": "Terms"
+    },
+    {
+      "fieldname": "salesInvoicePrintTemplate",
+      "label": "Sales Invoice Print Template",
+      "fieldtype": "Link",
+      "target": "PrintTemplate",
+      "section": "Print Templates"
+    },
+    {
+      "fieldname": "purchaseInvoicePrintTemplate",
+      "label": "Purchase Invoice Print Template",
+      "fieldtype": "Link",
+      "target": "PrintTemplate",
+      "section": "Print Templates"
+    },
+    {
+      "fieldname": "journalEntryPrintTemplate",
+      "label": "Journal Entry Print Template",
+      "fieldtype": "Link",
+      "target": "PrintTemplate",
+      "section": "Print Templates"
+    },
+    {
+      "fieldname": "paymentPrintTemplate",
+      "label": "Payment Print Template",
+      "fieldtype": "Link",
+      "target": "PrintTemplate",
+      "section": "Print Templates"
+    },
+    {
+      "fieldname": "shipmentPrintTemplate",
+      "label": "Shipment Print Template",
+      "fieldtype": "Link",
+      "target": "PrintTemplate",
+      "section": "Print Templates"
+    },
+    {
+      "fieldname": "purchaseReceiptPrintTemplate",
+      "label": "Purchase Receipt Print Template",
+      "fieldtype": "Link",
+      "target": "PrintTemplate",
+      "section": "Print Templates"
+    },
+    {
+      "fieldname": "stockMovementPrintTemplate",
+      "label": "Stock Movement Print Template",
+      "fieldtype": "Link",
+      "target": "PrintTemplate",
+      "section": "Print Templates"
     }
   ]
 }
diff --git a/schemas/app/PrintSettings.json b/schemas/app/PrintSettings.json
index c65cebdc5..8bfbc25fc 100644
--- a/schemas/app/PrintSettings.json
+++ b/schemas/app/PrintSettings.json
@@ -37,28 +37,6 @@
       "create": true,
       "section": "Contacts"
     },
-    {
-      "fieldname": "template",
-      "label": "Template",
-      "placeholder": "Template",
-      "fieldtype": "Select",
-      "options": [
-        {
-          "value": "Basic",
-          "label": "Basic"
-        },
-        {
-          "value": "Minimal",
-          "label": "Minimal"
-        },
-        {
-          "value": "Business",
-          "label": "Business"
-        }
-      ],
-      "default": "Basic",
-      "section": "Customizations"
-    },
     {
       "fieldname": "color",
       "label": "Color",
@@ -149,17 +127,5 @@
       "fieldtype": "Check",
       "section": "Customizations"
     }
-  ],
-  "quickEditFields": [
-    "logo",
-    "displayLogo",
-    "displayTaxInvoice",
-    "displayBatch",
-    "template",
-    "color",
-    "font",
-    "email",
-    "phone",
-    "address"
   ]
 }
diff --git a/src/pages/CommonForm/CommonForm.vue b/src/pages/CommonForm/CommonForm.vue
index c14ecfdf8..cbfb2434f 100644
--- a/src/pages/CommonForm/CommonForm.vue
+++ b/src/pages/CommonForm/CommonForm.vue
@@ -4,6 +4,13 @@
       <StatusBadge :status="status" class="h-8" />
     </template>
     <template #header v-if="hasDoc">
+      <Button
+        v-if="!doc.isCancelled && !doc.dirty && isPrintable"
+        :icon="true"
+        @click="routeTo(`/print/${doc.schemaName}/${doc.name}`)"
+      >
+        {{ t`Print` }}
+      </Button>
       <DropdownWithActions
         v-for="group of groupedActions"
         :key="group.label"
@@ -121,6 +128,8 @@ import {
   getDocFromNameIfExistsElseNew,
   getFieldsGroupedByTabAndSection,
   getGroupedActionsForDoc,
+  isPrintable,
+  routeTo,
 } from 'src/utils/ui';
 import { computed, defineComponent, nextTick } from 'vue';
 import QuickEditForm from '../QuickEditForm.vue';
@@ -145,12 +154,14 @@ export default defineComponent({
       activeTab: 'Default',
       groupedFields: null,
       quickEditDoc: null,
+      isPrintable: false,
     } as {
       errors: Record<string, string>;
       docOrNull: null | Doc;
       activeTab: string;
       groupedFields: null | UIGroupedFields;
       quickEditDoc: null | Doc;
+      isPrintable: boolean;
     };
   },
   async mounted() {
@@ -162,6 +173,7 @@ export default defineComponent({
     await this.setDoc();
     focusedDocsRef.add(this.docOrNull);
     this.updateGroupedFields();
+    this.isPrintable = await isPrintable(this.schemaName);
   },
   activated(): void {
     docsPathRef.value = docsPathMap[this.schemaName] ?? '';
@@ -241,6 +253,7 @@ export default defineComponent({
     },
   },
   methods: {
+    routeTo,
     updateGroupedFields(): void {
       if (!this.hasDoc) {
         return;
diff --git a/src/pages/PrintView/PrintView.vue b/src/pages/PrintView/PrintView.vue
index 8c5aeaac5..2df565b3d 100644
--- a/src/pages/PrintView/PrintView.vue
+++ b/src/pages/PrintView/PrintView.vue
@@ -98,8 +98,9 @@ export default defineComponent({
       window.pv = this;
     }
 
-    if (this.templateList.length) {
-      this.onTemplateNameChange(this.templateList[0]);
+    await this.setTemplateFromDefault();
+    if (!this.templateDoc && this.templateList.length) {
+      await this.onTemplateNameChange(this.templateList[0]);
     }
 
     if (this.doc) {
@@ -224,6 +225,18 @@ export default defineComponent({
 
       printContainer.savePDF(this.doc?.name);
     },
+    async setTemplateFromDefault() {
+      const defaultName =
+        this.schemaName[0].toLowerCase() +
+        this.schemaName.slice(1) +
+        ModelNameEnum.PrintTemplate;
+      const name = this.fyo.singles.Defaults?.get(defaultName);
+      if (typeof name !== 'string') {
+        return;
+      }
+
+      await this.onTemplateNameChange(name);
+    },
   },
 });
 </script>
diff --git a/src/utils/ui.ts b/src/utils/ui.ts
index 38ba96f0a..614bf1464 100644
--- a/src/utils/ui.ts
+++ b/src/utils/ui.ts
@@ -490,3 +490,10 @@ export async function getDocFromNameIfExistsElseNew(
     return fyo.doc.getNewDoc(schemaName);
   }
 }
+
+export async function isPrintable(schemaName: string) {
+  const numTemplates = await fyo.db.count(ModelNameEnum.PrintTemplate, {
+    filters: { type: schemaName },
+  });
+  return numTemplates > 0;
+}

From dabcbcd2ce01d8077fcf0c8f49c82d8564d8eb74 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Tue, 7 Mar 2023 12:39:49 +0530
Subject: [PATCH 15/33] fix: PrintTemplate list view - type ListCell - improve
 ListViewConfig types, update where required

---
 fyo/index.ts                                  |  4 +-
 fyo/model/types.ts                            |  8 ++--
 fyo/utils/format.ts                           | 37 +++++++++------
 .../baseModels/JournalEntry/JournalEntry.ts   |  2 +-
 models/baseModels/PrintTemplate.ts            | 16 ++++++-
 models/helpers.ts                             |  1 -
 models/inventory/StockMovement.ts             | 23 ++++------
 src/pages/ListView/List.vue                   |  7 ++-
 src/pages/ListView/ListCell.vue               | 46 +++++++++++++++----
 src/utils/ui.ts                               | 30 ------------
 10 files changed, 91 insertions(+), 83 deletions(-)

diff --git a/fyo/index.ts b/fyo/index.ts
index 7d8ee8559..e85f1ce7d 100644
--- a/fyo/index.ts
+++ b/fyo/index.ts
@@ -13,7 +13,7 @@ import { TelemetryManager } from './telemetry/telemetry';
 import {
   DEFAULT_CURRENCY,
   DEFAULT_DISPLAY_PRECISION,
-  DEFAULT_INTERNAL_PRECISION
+  DEFAULT_INTERNAL_PRECISION,
 } from './utils/consts';
 import * as errors from './utils/errors';
 import { format } from './utils/format';
@@ -88,7 +88,7 @@ export class Fyo {
     return this.db.fieldMap;
   }
 
-  format(value: DocValue, field: string | Field, doc?: Doc) {
+  format(value: unknown, field: string | Field, doc?: Doc) {
     return format(value, field, doc ?? null, this);
   }
 
diff --git a/fyo/model/types.ts b/fyo/model/types.ts
index 428144524..361352129 100644
--- a/fyo/model/types.ts
+++ b/fyo/model/types.ts
@@ -1,3 +1,4 @@
+import { Fyo } from 'fyo';
 import { DocValue, DocValueMap } from 'fyo/core/types';
 import SystemSettings from 'fyo/models/SystemSettings';
 import { FieldType, Schema, SelectOption } from 'schemas/types';
@@ -76,13 +77,12 @@ export interface RenderData {
   [key: string]: DocValue | Schema
 }
 
-export interface ColumnConfig {
+export type ColumnConfig = {
   label: string;
   fieldtype: FieldType;
-  fieldname?: string;
-  size?: string;
+  fieldname: string;
   render?: (doc: RenderData) => { template: string };
-  getValue?: (doc: Doc) => string;
+  display?: (value: unknown, fyo: Fyo) => string;
 }
 
 export type ListViewColumn = string | ColumnConfig;
diff --git a/fyo/utils/format.ts b/fyo/utils/format.ts
index 335addb91..5cadb6a9d 100644
--- a/fyo/utils/format.ts
+++ b/fyo/utils/format.ts
@@ -1,10 +1,9 @@
 import { Fyo } from 'fyo';
-import { DocValue } from 'fyo/core/types';
 import { Doc } from 'fyo/model/doc';
 import { DateTime } from 'luxon';
 import { Money } from 'pesa';
 import { Field, FieldType, FieldTypeEnum } from 'schemas/types';
-import { getIsNullOrUndef, safeParseFloat } from 'utils';
+import { getIsNullOrUndef, safeParseFloat, titleCase } from 'utils';
 import {
   DEFAULT_CURRENCY,
   DEFAULT_DATE_FORMAT,
@@ -13,7 +12,7 @@ import {
 } from './consts';
 
 export function format(
-  value: DocValue,
+  value: unknown,
   df: string | Field | null,
   doc: Doc | null,
   fyo: Fyo
@@ -45,7 +44,7 @@ export function format(
   }
 
   if (field.fieldtype === FieldTypeEnum.Check) {
-    return Boolean(value).toString();
+    return titleCase(Boolean(value).toString());
   }
 
   if (getIsNullOrUndef(value)) {
@@ -55,26 +54,31 @@ export function format(
   return String(value);
 }
 
-function toDatetime(value: DocValue) {
+function toDatetime(value: unknown): DateTime | null {
   if (typeof value === 'string') {
     return DateTime.fromISO(value);
   } else if (value instanceof Date) {
     return DateTime.fromJSDate(value);
-  } else {
+  } else if (typeof value === 'number') {
     return DateTime.fromSeconds(value as number);
   }
+
+  return null;
 }
 
-function formatDatetime(value: DocValue, fyo: Fyo): string {
+function formatDatetime(value: unknown, fyo: Fyo): string {
   if (value == null) {
     return '';
   }
 
   const dateFormat =
     (fyo.singles.SystemSettings?.dateFormat as string) ?? DEFAULT_DATE_FORMAT;
-  const formattedDatetime = toDatetime(value).toFormat(
-    `${dateFormat} HH:mm:ss`
-  );
+  const dateTime = toDatetime(value);
+  if (!dateTime) {
+    return '';
+  }
+
+  const formattedDatetime = dateTime.toFormat(`${dateFormat} HH:mm:ss`);
 
   if (value === 'Invalid DateTime') {
     return '';
@@ -83,7 +87,7 @@ function formatDatetime(value: DocValue, fyo: Fyo): string {
   return formattedDatetime;
 }
 
-function formatDate(value: DocValue, fyo: Fyo): string {
+function formatDate(value: unknown, fyo: Fyo): string {
   if (value == null) {
     return '';
   }
@@ -91,9 +95,12 @@ function formatDate(value: DocValue, fyo: Fyo): string {
   const dateFormat =
     (fyo.singles.SystemSettings?.dateFormat as string) ?? DEFAULT_DATE_FORMAT;
 
-  const dateValue: DateTime = toDatetime(value);
+  const dateTime = toDatetime(value);
+  if (!dateTime) {
+    return '';
+  }
 
-  const formattedDate = dateValue.toFormat(dateFormat);
+  const formattedDate = dateTime.toFormat(dateFormat);
   if (value === 'Invalid DateTime') {
     return '';
   }
@@ -102,7 +109,7 @@ function formatDate(value: DocValue, fyo: Fyo): string {
 }
 
 function formatCurrency(
-  value: DocValue,
+  value: unknown,
   field: Field,
   doc: Doc | null,
   fyo: Fyo
@@ -125,7 +132,7 @@ function formatCurrency(
   return valueString;
 }
 
-function formatNumber(value: DocValue, fyo: Fyo): string {
+function formatNumber(value: unknown, fyo: Fyo): string {
   const numberFormatter = getNumberFormatter(fyo);
   if (typeof value === 'number') {
     value = fyo.pesa(value.toFixed(20));
diff --git a/models/baseModels/JournalEntry/JournalEntry.ts b/models/baseModels/JournalEntry/JournalEntry.ts
index 7241d345b..828fe9fa7 100644
--- a/models/baseModels/JournalEntry/JournalEntry.ts
+++ b/models/baseModels/JournalEntry/JournalEntry.ts
@@ -70,8 +70,8 @@ export class JournalEntry extends Transactional {
         'name',
         {
           label: t`Status`,
+          fieldname: 'status',
           fieldtype: 'Select',
-          size: 'small',
           render(doc) {
             const status = getDocStatus(doc);
             const color = statusColor[status] ?? 'gray';
diff --git a/models/baseModels/PrintTemplate.ts b/models/baseModels/PrintTemplate.ts
index 98f633378..832aa84b2 100644
--- a/models/baseModels/PrintTemplate.ts
+++ b/models/baseModels/PrintTemplate.ts
@@ -2,6 +2,7 @@ import { Doc } from 'fyo/model/doc';
 import { SchemaMap } from 'schemas/types';
 import { ListsMap, ListViewSettings, ReadOnlyMap } from 'fyo/model/types';
 import { ModelNameEnum } from 'models/types';
+import { Fyo } from 'fyo';
 
 export class PrintTemplate extends Doc {
   name?: string;
@@ -17,10 +18,21 @@ export class PrintTemplate extends Doc {
     return super.canDelete;
   }
 
-  static getListViewSettings(): ListViewSettings {
+  static getListViewSettings(fyo: Fyo): ListViewSettings {
     return {
       formRoute: (name) => `/template-builder/${name}`,
-      columns: ['name', 'type', 'isCustom'],
+      columns: [
+        'name',
+        {
+          label: fyo.t`Type`,
+          fieldtype: 'AutoComplete',
+          fieldname: 'type',
+          display(value) {
+            return fyo.schemaMap[value as string]?.label ?? '';
+          },
+        },
+        'isCustom',
+      ],
     };
   }
 
diff --git a/models/helpers.ts b/models/helpers.ts
index f66ff9614..cb0c50eae 100644
--- a/models/helpers.ts
+++ b/models/helpers.ts
@@ -311,7 +311,6 @@ export function getDocStatusListColumn(): ColumnConfig {
     label: t`Status`,
     fieldname: 'status',
     fieldtype: 'Select',
-    size: 'small',
     render(doc) {
       const status = getDocStatus(doc);
       const color = statusColor[status] ?? 'gray';
diff --git a/models/inventory/StockMovement.ts b/models/inventory/StockMovement.ts
index 9e203d550..68574bebd 100644
--- a/models/inventory/StockMovement.ts
+++ b/models/inventory/StockMovement.ts
@@ -80,6 +80,13 @@ export class StockMovement extends Transfer {
   };
 
   static getListViewSettings(fyo: Fyo): ListViewSettings {
+    const movementTypeMap = {
+      [MovementType.MaterialIssue]: fyo.t`Material Issue`,
+      [MovementType.MaterialReceipt]: fyo.t`Material Receipt`,
+      [MovementType.MaterialTransfer]: fyo.t`Material Transfer`,
+      [MovementType.Manufacture]: fyo.t`Manufacture`,
+    };
+
     return {
       formRoute: (name) => `/edit/StockMovement/${name}`,
       columns: [
@@ -90,20 +97,8 @@ export class StockMovement extends Transfer {
           label: fyo.t`Movement Type`,
           fieldname: 'movementType',
           fieldtype: 'Select',
-          size: 'small',
-          render(doc) {
-            const movementType = doc.movementType as MovementType;
-            const label =
-              {
-                [MovementType.MaterialIssue]: fyo.t`Material Issue`,
-                [MovementType.MaterialReceipt]: fyo.t`Material Receipt`,
-                [MovementType.MaterialTransfer]: fyo.t`Material Transfer`,
-                [MovementType.Manufacture]: fyo.t`Manufacture`,
-              }[movementType] ?? '';
-
-            return {
-              template: `<span>${label}</span>`,
-            };
+          display(value): string {
+            return movementTypeMap[value as MovementType] ?? '';
           },
         },
       ],
diff --git a/src/pages/ListView/List.vue b/src/pages/ListView/List.vue
index 192328b2d..bd3bbc0e3 100644
--- a/src/pages/ListView/List.vue
+++ b/src/pages/ListView/List.vue
@@ -37,7 +37,7 @@
 
     <!-- Data Rows -->
     <div class="overflow-y-auto custom-scroll" v-if="dataSlice.length !== 0">
-      <div v-for="(doc, i) in dataSlice" :key="doc.name">
+      <div v-for="(row, i) in dataSlice" :key="row.name">
         <!-- Row Content -->
         <div class="flex hover:bg-gray-50 items-center">
           <p class="w-8 text-end me-4 text-gray-900">
@@ -46,7 +46,7 @@
           <Row
             gap="1rem"
             class="cursor-pointer text-gray-900 flex-1 h-row-mid"
-            @click="$emit('openDoc', doc.name)"
+            @click="$emit('openDoc', row.name)"
             :columnCount="columns.length"
           >
             <ListCell
@@ -56,7 +56,7 @@
                 'text-end': isNumeric(column.fieldtype),
                 'pe-4': c === columns.length - 1,
               }"
-              :doc="doc"
+              :row="row"
               :column="column"
             />
           </Row>
@@ -95,7 +95,6 @@ import Paginator from 'src/components/Paginator.vue';
 import Row from 'src/components/Row';
 import { fyo } from 'src/initFyo';
 import { isNumeric } from 'src/utils';
-import { openQuickEdit, routeTo } from 'src/utils/ui';
 import { objectForEach } from 'utils/index';
 import { defineComponent, toRaw } from 'vue';
 import ListCell from './ListCell';
diff --git a/src/pages/ListView/ListCell.vue b/src/pages/ListView/ListCell.vue
index ac56095be..63c8f7552 100644
--- a/src/pages/ListView/ListCell.vue
+++ b/src/pages/ListView/ListCell.vue
@@ -4,26 +4,52 @@
     <component v-else :is="customRenderer" />
   </div>
 </template>
-<script>
+<script lang="ts">
+import { ColumnConfig, RenderData } from 'fyo/model/types';
+import { Field } from 'schemas/types';
 import { fyo } from 'src/initFyo';
 import { isNumeric } from 'src/utils';
+import { defineComponent, PropType } from 'vue';
 
-export default {
+type Column = ColumnConfig | Field;
+
+function isField(column: ColumnConfig | Field): column is Field {
+  if ((column as ColumnConfig).display || (column as ColumnConfig).render) {
+    return false;
+  }
+
+  return true;
+}
+
+export default defineComponent({
   name: 'ListCell',
-  props: ['doc', 'column'],
+  props: {
+    row: { type: Object as PropType<RenderData>, required: true },
+    column: { type: Object as PropType<Column>, required: true },
+  },
   computed: {
-    columnValue() {
-      let { column, doc } = this;
-      let value = doc[column.fieldname];
-      return fyo.format(value, column, doc);
+    columnValue(): string {
+      const column = this.column;
+      const value = this.row[this.column.fieldname];
+
+      if (isField(column)) {
+        return fyo.format(value, column);
+      }
+
+      return column.display?.(value, fyo) ?? '';
     },
     customRenderer() {
-      if (!this.column.render) return;
-      return this.column.render(this.doc);
+      const { render } = this.column as ColumnConfig;
+
+      if (!render) {
+        return;
+      }
+
+      return render(this.row);
     },
     cellClass() {
       return isNumeric(this.column.fieldtype) ? 'justify-end' : '';
     },
   },
-};
+});
 </script>
diff --git a/src/utils/ui.ts b/src/utils/ui.ts
index 614bf1464..2dabd5234 100644
--- a/src/utils/ui.ts
+++ b/src/utils/ui.ts
@@ -344,36 +344,6 @@ async function openEdit({ name, schemaName }: Doc) {
 
   const route = getFormRoute(schemaName, name);
   return await routeTo(route);
-
-  /*
-  const listConfig = fyo.models[doc.schemaName]?.getListViewSettings?.(fyo);
-  const formRoute = listConfig?.formRoute;
-  if (!doc.name) {
-    return;
-  }
-
-  if (formRoute) {
-    const route = formRoute(doc.name);
-    return await routeTo(route);
-  }
-
-  const isFormEdit = [
-    ModelNameEnum.SalesInvoice,
-    ModelNameEnum.PurchaseInvoice,
-    ModelNameEnum.JournalEntry,
-    ModelNameEnum.Shipment,
-    ModelNameEnum.PurchaseReceipt,
-    ModelNameEnum.StockMovement,
-    ModelNameEnum.Payment,
-    ModelNameEnum.Item,
-  ].includes(doc.schemaName as ModelNameEnum);
-
-  if (isFormEdit) {
-    return await routeTo(`/edit/${doc.schemaName}/${doc.name}`);
-  }
-
-  await openQuickEdit({ schemaName: doc.schemaName, name: doc.name });
-  */
 }
 
 function getDuplicateAction(doc: Doc): Action {

From eda3bb757619926a5b69d072e8ffc8f4193af321 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Tue, 7 Mar 2023 14:16:19 +0530
Subject: [PATCH 16/33] incr: insert or update .template.html files - move
 .template.html files out of fixtures

---
 electron-builder.yml                          |  1 +
 main.ts                                       |  2 +-
 main/getPrintTemplates.ts                     | 41 ++++++++
 main/registerIpcMainActionListeners.ts        |  7 +-
 src/renderer.ts                               |  2 +
 src/utils/initialization.ts                   |  3 +-
 src/utils/ipcCalls.ts                         |  6 +-
 src/utils/printTemplates.ts                   | 95 ++++++++++++++++++-
 .../Basic.template.html                       |  0
 .../Business.template.html                    |  0
 .../Minimal.template.html                     |  0
 utils/messages.ts                             |  1 +
 utils/types.ts                                | 10 +-
 13 files changed, 161 insertions(+), 7 deletions(-)
 create mode 100644 main/getPrintTemplates.ts
 rename {fixtures/printTemplates => templates}/Basic.template.html (100%)
 rename {fixtures/printTemplates => templates}/Business.template.html (100%)
 rename {fixtures/printTemplates => templates}/Minimal.template.html (100%)

diff --git a/electron-builder.yml b/electron-builder.yml
index 95647edb5..5cbe2e427 100644
--- a/electron-builder.yml
+++ b/electron-builder.yml
@@ -5,6 +5,7 @@ extraResources:
   [
     { from: 'log_creds.txt', to: '../creds/log_creds.txt' },
     { from: 'translations', to: '../translations' },
+    { from: 'translations', to: '../translations' },
   ]
 mac:
   type: distribution
diff --git a/main.ts b/main.ts
index 956b82075..792e6dd7e 100644
--- a/main.ts
+++ b/main.ts
@@ -4,7 +4,7 @@ import {
   app,
   BrowserWindow,
   BrowserWindowConstructorOptions,
-  protocol
+  protocol,
 } from 'electron';
 import Store from 'electron-store';
 import { autoUpdater } from 'electron-updater';
diff --git a/main/getPrintTemplates.ts b/main/getPrintTemplates.ts
new file mode 100644
index 000000000..d0aa48df2
--- /dev/null
+++ b/main/getPrintTemplates.ts
@@ -0,0 +1,41 @@
+import fs from 'fs/promises';
+import path from 'path';
+import { TemplateFile } from 'utils/types';
+
+export async function getTemplates() {
+  const paths = await getPrintTemplatePaths();
+  if (!paths) {
+    return [];
+  }
+
+  const templates: TemplateFile[] = [];
+  for (const file of paths.files) {
+    const filePath = path.join(paths.root, file);
+    const template = await fs.readFile(filePath, 'utf-8');
+    const { mtime } = await fs.stat(filePath);
+    templates.push({ template, file, modified: mtime.toISOString() });
+  }
+
+  return templates;
+}
+
+async function getPrintTemplatePaths(): Promise<{
+  files: string[];
+  root: string;
+} | null> {
+  let root = path.join(process.resourcesPath, `../templates`);
+
+  try {
+    const files = await fs.readdir(root);
+    return { files, root };
+  } catch {
+    root = path.join(__dirname, `../templates`);
+  }
+
+  try {
+    const files = await fs.readdir(root);
+    return { files, root };
+  } catch {
+    return null;
+  }
+}
diff --git a/main/registerIpcMainActionListeners.ts b/main/registerIpcMainActionListeners.ts
index 17561f93b..0a41cb742 100644
--- a/main/registerIpcMainActionListeners.ts
+++ b/main/registerIpcMainActionListeners.ts
@@ -10,6 +10,7 @@ import { DatabaseMethod } from '../utils/db/types';
 import { IPC_ACTIONS } from '../utils/messages';
 import { getUrlAndTokenString, sendError } from './contactMothership';
 import { getLanguageMap } from './getLanguageMap';
+import { getTemplates } from './getPrintTemplates';
 import {
   getConfigFilesWithModified,
   getErrorHandledReponse,
@@ -117,7 +118,7 @@ export default function registerIpcMainActionListeners(main: Main) {
   );
 
   ipcMain.handle(IPC_ACTIONS.GET_CREDS, async (event) => {
-    return await getUrlAndTokenString();
+    return getUrlAndTokenString();
   });
 
   ipcMain.handle(IPC_ACTIONS.DELETE_FILE, async (_, filePath) => {
@@ -137,6 +138,10 @@ export default function registerIpcMainActionListeners(main: Main) {
     };
   });
 
+  ipcMain.handle(IPC_ACTIONS.GET_TEMPLATES, async () => {
+    return getTemplates();
+  });
+
   /**
    * Database Related Actions
    */
diff --git a/src/renderer.ts b/src/renderer.ts
index 60e090ad6..cd5ed510b 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -111,6 +111,8 @@ function setOnWindow(isDevelopment: boolean) {
   window.fyo = fyo;
   // @ts-ignore
   window.DateTime = DateTime;
+  // @ts-ignore
+  window.ipcRenderer = ipcRenderer;
 }
 
 function getPlatformName(platform: string) {
diff --git a/src/utils/initialization.ts b/src/utils/initialization.ts
index c5184de75..d83523634 100644
--- a/src/utils/initialization.ts
+++ b/src/utils/initialization.ts
@@ -1,6 +1,5 @@
 import { Fyo } from 'fyo';
 import { ConfigFile, ConfigKeys } from 'fyo/core/types';
-import { Doc } from 'fyo/model/doc';
 import { getRegionalModels, models } from 'models/index';
 import { ModelNameEnum } from 'models/types';
 import { TargetField } from 'schemas/types';
@@ -9,6 +8,7 @@ import {
   getRandomString,
   getValueMapFromList,
 } from 'utils/index';
+import { updatePrintTemplates } from './printTemplates';
 
 export async function initializeInstance(
   dbPath: string,
@@ -34,6 +34,7 @@ export async function initializeInstance(
   await setInstanceId(fyo);
   await setOpenCount(fyo);
   await setCurrencySymbols(fyo);
+  await updatePrintTemplates(fyo);
 }
 
 async function closeDbIfConnected(fyo: Fyo) {
diff --git a/src/utils/ipcCalls.ts b/src/utils/ipcCalls.ts
index 3049c82d8..1f1d50ae7 100644
--- a/src/utils/ipcCalls.ts
+++ b/src/utils/ipcCalls.ts
@@ -6,7 +6,7 @@ import { t } from 'fyo';
 import { BaseError } from 'fyo/utils/errors';
 import { BackendResponse } from 'utils/ipc/types';
 import { IPC_ACTIONS, IPC_MESSAGES } from 'utils/messages';
-import { SelectFileOptions, SelectFileReturn } from 'utils/types';
+import { SelectFileOptions, SelectFileReturn, TemplateFile } from 'utils/types';
 import { setLanguageMap } from './language';
 import { showMessageDialog, showToast } from './ui';
 
@@ -14,6 +14,10 @@ export function reloadWindow() {
   return ipcRenderer.send(IPC_MESSAGES.RELOAD_MAIN_WINDOW);
 }
 
+export async function getTemplates(): Promise<TemplateFile[]> {
+  return await ipcRenderer.invoke(IPC_ACTIONS.GET_TEMPLATES);
+}
+
 export async function selectFile(
   options: SelectFileOptions
 ): Promise<SelectFileReturn> {
diff --git a/src/utils/printTemplates.ts b/src/utils/printTemplates.ts
index 9f3c45448..2ab4f9b6e 100644
--- a/src/utils/printTemplates.ts
+++ b/src/utils/printTemplates.ts
@@ -3,10 +3,14 @@ import { Doc } from 'fyo/model/doc';
 import { Invoice } from 'models/baseModels/Invoice/Invoice';
 import { ModelNameEnum } from 'models/types';
 import { FieldTypeEnum, Schema, TargetField } from 'schemas/types';
-import { getSavePath, makePDF } from './ipcCalls';
+import { getValueMapFromList } from 'utils/index';
+import { TemplateFile } from 'utils/types';
+import { getSavePath, getTemplates, makePDF } from './ipcCalls';
 import { PrintValues } from './types';
+import { getDocFromNameIfExistsElseNew } from './ui';
 
 type PrintTemplateData = Record<string, unknown>;
+type TemplateUpdateItem = { name: string; template: string; type: string };
 
 const printSettingsFields = [
   'logo',
@@ -256,3 +260,92 @@ function getAllCSSAsStyleElem() {
   styleElem.innerHTML = cssTexts.join('\n');
   return styleElem;
 }
+
+export async function updatePrintTemplates(fyo: Fyo) {
+  const templateFiles = await getTemplates();
+  const existingTemplates = (await fyo.db.getAll(ModelNameEnum.PrintTemplate, {
+    fields: ['name', 'modified'],
+    filters: { isCustom: false },
+  })) as { name: string; modified: Date }[];
+
+  const nameModifiedMap = getValueMapFromList(
+    existingTemplates,
+    'name',
+    'modified'
+  );
+
+  const updateList: TemplateUpdateItem[] = [];
+  for (const templateFile of templateFiles) {
+    const updates = getPrintTemplateUpdateList(
+      templateFile,
+      nameModifiedMap,
+      fyo
+    );
+
+    updateList.push(...updates);
+  }
+
+  for (const { name, type, template } of updateList) {
+    const doc = await getDocFromNameIfExistsElseNew(
+      ModelNameEnum.PrintTemplate,
+      name
+    );
+
+    await doc.set({ name, type, template, isCustom: false });
+    await doc.sync();
+  }
+}
+
+function getPrintTemplateUpdateList(
+  { file, template, modified: modifiedString }: TemplateFile,
+  nameModifiedMap: Record<string, Date>,
+  fyo: Fyo
+): TemplateUpdateItem[] {
+  const templateList: TemplateUpdateItem[] = [];
+  const dbModified = new Date(modifiedString);
+
+  for (const { name, type } of getNameAndTypeFromTemplateFile(file, fyo)) {
+    const fileModified = nameModifiedMap[name];
+    if (fileModified && dbModified.valueOf() >= fileModified.valueOf()) {
+      continue;
+    }
+
+    templateList.push({
+      name,
+      type,
+      template,
+    });
+  }
+  return templateList;
+}
+
+function getNameAndTypeFromTemplateFile(
+  file: string,
+  fyo: Fyo
+): { name: string; type: string }[] {
+  /**
+   * Template File Name Format:
+   * TemplateName[.SchemaName].template.html
+   *
+   * If the SchemaName is absent then it is assumed
+   * that the SchemaName is:
+   * - SalesInvoice
+   * - PurchaseInvoice
+   */
+
+  const fileName = file.split('.template.html')[0];
+  const name = fileName.split('.')[0];
+  const schemaName = fileName.split('.')[1];
+
+  if (schemaName) {
+    const label = fyo.schemaMap[schemaName]?.label ?? schemaName;
+    return [{ name: `${name} - ${label}`, type: schemaName }];
+  }
+
+  return [ModelNameEnum.SalesInvoice, ModelNameEnum.PurchaseInvoice].map(
+    (schemaName) => {
+      const label = fyo.schemaMap[schemaName]?.label ?? schemaName;
+      return { name: `${name} - ${label}`, type: schemaName };
+    }
+  );
+}
diff --git a/fixtures/printTemplates/Basic.template.html b/templates/Basic.template.html
similarity index 100%
rename from fixtures/printTemplates/Basic.template.html
rename to templates/Basic.template.html
diff --git a/fixtures/printTemplates/Business.template.html b/templates/Business.template.html
similarity index 100%
rename from fixtures/printTemplates/Business.template.html
rename to templates/Business.template.html
diff --git a/fixtures/printTemplates/Minimal.template.html b/templates/Minimal.template.html
similarity index 100%
rename from fixtures/printTemplates/Minimal.template.html
rename to templates/Minimal.template.html
diff --git a/utils/messages.ts b/utils/messages.ts
index a69d9b48c..7340d4fb3 100644
--- a/utils/messages.ts
+++ b/utils/messages.ts
@@ -22,6 +22,7 @@ export enum IPC_ACTIONS {
   SELECT_FILE = 'select-file',
   GET_CREDS = 'get-creds',
   GET_DB_LIST = 'get-db-list',
+  GET_TEMPLATES = 'get-templates',
   DELETE_FILE = 'delete-file',
   // Database messages
   DB_CREATE = 'db-create',
diff --git a/utils/types.ts b/utils/types.ts
index 8bdfe203b..af9a5e208 100644
--- a/utils/types.ts
+++ b/utils/types.ts
@@ -23,14 +23,18 @@ export interface VersionParts {
   beta?: number;
 }
 
-export type Creds = { errorLogUrl: string; telemetryUrl: string; tokenString: string };
+export type Creds = {
+  errorLogUrl: string;
+  telemetryUrl: string;
+  tokenString: string;
+};
 
 export type UnexpectedLogObject = {
   name: string;
   message: string;
   stack: string;
   more: Record<string, unknown>;
-}
+};
 
 export interface SelectFileOptions {
   title: string;
@@ -48,3 +52,5 @@ export interface SelectFileReturn {
 export type PropertyEnum<T extends Record<string, any>> = {
   [key in keyof Required<T>]: key;
 };
+
+export type TemplateFile = { file: string; template: string; modified: string };

From 45d39f4fcf2a5490ae73a890638f4502b6c70cf7 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Tue, 7 Mar 2023 15:07:02 +0530
Subject: [PATCH 17/33] refactor: convert sidebar toggler to use ref

---
 src/components/PageHeader.vue | 10 +++++++---
 src/components/Sidebar.vue    |  9 +++++----
 src/pages/Desk.vue            | 26 +++++++++++---------------
 src/utils/refs.ts             |  1 +
 src/utils/ui.ts               |  9 +++++++++
 5 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index 1f6355a01..31076740e 100644
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -8,9 +8,9 @@
   >
     <Transition name="spacer">
       <div
-        v-if="!sidebar && platform === 'Mac' && languageDirection !== 'rtl'"
+        v-if="!showSidebar && platform === 'Mac' && languageDirection !== 'rtl'"
         class="h-full"
-        :class="sidebar ? '' : 'w-tl me-4 border-e'"
+        :class="showSidebar ? '' : 'w-tl me-4 border-e'"
       />
     </Transition>
     <h1 class="text-xl font-semibold select-none" v-if="title">
@@ -31,12 +31,13 @@
   </div>
 </template>
 <script>
+import { showSidebar } from 'src/utils/refs';
 import { Transition } from 'vue';
 import BackLink from './BackLink.vue';
 import SearchBar from './SearchBar.vue';
 
 export default {
-  inject: ['sidebar', 'languageDirection'],
+  inject: ['languageDirection'],
   props: {
     title: { type: String, default: '' },
     backLink: { type: Boolean, default: true },
@@ -45,6 +46,9 @@ export default {
     searchborder: { type: Boolean, default: true },
   },
   components: { SearchBar, BackLink, Transition },
+  setup() {
+    return { showSidebar };
+  },
   computed: {
     showBorder() {
       return !!this.$slots.default && this.searchborder;
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index e4cf08d35..cff8414cc 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -165,7 +165,7 @@
         m-4
         rtl-rotate-180
       "
-      @click="$emit('toggle-sidebar')"
+      @click="() => toggleSidebar()"
     >
       <feather-icon name="chevrons-left" class="w-4 h-4" />
     </button>
@@ -182,7 +182,7 @@ import { fyo } from 'src/initFyo';
 import { openLink } from 'src/utils/ipcCalls';
 import { docsPathRef } from 'src/utils/refs';
 import { getSidebarConfig } from 'src/utils/sidebarConfig';
-import { routeTo } from 'src/utils/ui';
+import { routeTo, toggleSidebar } from 'src/utils/ui';
 import router from '../router';
 import Icon from './Icon.vue';
 import Modal from './Modal.vue';
@@ -191,7 +191,7 @@ import ShortcutsHelper from './ShortcutsHelper.vue';
 export default {
   components: [Button],
   inject: ['languageDirection', 'shortcuts'],
-  emits: ['change-db-file', 'toggle-sidebar'],
+  emits: ['change-db-file'],
   data() {
     return {
       companyName: '',
@@ -222,7 +222,7 @@ export default {
 
     this.shortcuts.shift.set(['KeyH'], () => {
       if (document.body === document.activeElement) {
-        this.$emit('toggle-sidebar');
+        this.toggleSidebar();
       }
     });
     this.shortcuts.set(['F1'], () => this.openDocumentation());
@@ -234,6 +234,7 @@ export default {
   methods: {
     routeTo,
     reportIssue,
+    toggleSidebar,
     openDocumentation() {
       openLink('https://docs.frappebooks.com/' + docsPathRef.value);
     },
diff --git a/src/pages/Desk.vue b/src/pages/Desk.vue
index 20fcaebd3..e1592a3e6 100644
--- a/src/pages/Desk.vue
+++ b/src/pages/Desk.vue
@@ -1,11 +1,14 @@
+<script setup lang="ts">
+import { showSidebar } from 'src/utils/refs';
+import { toggleSidebar } from 'src/utils/ui';
+</script>
 <template>
   <div class="flex overflow-hidden">
     <Transition name="sidebar">
       <Sidebar
-        v-show="sidebar"
+        v-show="showSidebar"
         class="flex-shrink-0 border-e whitespace-nowrap w-sidebar"
         @change-db-file="$emit('change-db-file')"
-        @toggle-sidebar="sidebar = !sidebar"
       />
     </Transition>
 
@@ -32,7 +35,7 @@
 
     <!-- Show Sidebar Button -->
     <button
-      v-show="!sidebar"
+      v-show="!showSidebar"
       class="
         absolute
         bottom-0
@@ -45,29 +48,22 @@
         m-4
         hover:opacity-100 hover:shadow-md
       "
-
-      @click="sidebar = !sidebar"
+      @click="() => toggleSidebar()"
     >
       <feather-icon name="chevrons-right" class="w-4 h-4" />
     </button>
   </div>
 </template>
-<script>
-import { computed } from '@vue/reactivity';
+<script lang="ts">
+import { defineComponent } from 'vue';
 import Sidebar from '../components/Sidebar.vue';
-export default {
+export default defineComponent({
   name: 'Desk',
   emits: ['change-db-file'],
-  data() {
-    return { sidebar: true };
-  },
-  provide() {
-    return { sidebar: computed(() => this.sidebar) };
-  },
   components: {
     Sidebar,
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/src/utils/refs.ts b/src/utils/refs.ts
index c2f06744e..1b0ace7e7 100644
--- a/src/utils/refs.ts
+++ b/src/utils/refs.ts
@@ -1,6 +1,7 @@
 import { reactive, ref } from 'vue';
 import { FocusedDocContextSet } from './misc';
 
+export const showSidebar = ref(true);
 export const docsPathRef = ref<string>('');
 export const systemLanguageRef = ref<string>('');
 export const focusedDocsRef = reactive<FocusedDocContextSet>(
diff --git a/src/utils/ui.ts b/src/utils/ui.ts
index 2dabd5234..25feb6c05 100644
--- a/src/utils/ui.ts
+++ b/src/utils/ui.ts
@@ -18,6 +18,7 @@ import { App, createApp, h } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
 import { stringifyCircular } from './';
 import { evaluateHidden } from './doc';
+import { showSidebar } from './refs';
 import {
   ActionGroup,
   MessageDialogOptions,
@@ -467,3 +468,11 @@ export async function isPrintable(schemaName: string) {
   });
   return numTemplates > 0;
 }
+
+export function toggleSidebar(value?: boolean) {
+  if (typeof value !== 'boolean') {
+    value = !showSidebar.value;
+  }
+
+  showSidebar.value = value;
+}

From a8f73b605ea403e3dcf5d095b2b20c7b821e3c7d Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Wed, 8 Mar 2023 14:31:02 +0530
Subject: [PATCH 18/33] incr: use codemirror for editing

---
 package.json                                  |   2 +
 src/pages/TemplateBuilder/TemplateBuilder.vue |  48 ++---
 src/pages/TemplateBuilder/TemplateEditor.vue  |  98 +++++++++
 yarn.lock                                     | 186 ++++++++++++++++++
 4 files changed, 302 insertions(+), 32 deletions(-)
 create mode 100644 src/pages/TemplateBuilder/TemplateEditor.vue

diff --git a/package.json b/package.json
index fd65cea25..420698589 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,10 @@
     "test": "scripts/test.sh"
   },
   "dependencies": {
+    "@codemirror/lang-vue": "^0.1.1",
     "@popperjs/core": "^2.10.2",
     "better-sqlite3": "^7.5.3",
+    "codemirror": "^6.0.1",
     "core-js": "^3.19.0",
     "electron-store": "^8.0.1",
     "feather-icons": "^4.28.0",
diff --git a/src/pages/TemplateBuilder/TemplateBuilder.vue b/src/pages/TemplateBuilder/TemplateBuilder.vue
index 5e700982b..de999b5c0 100644
--- a/src/pages/TemplateBuilder/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilder.vue
@@ -196,36 +196,14 @@
             {{ t`Template` }}
           </h2>
           <div
-            class="overflow-auto custom-scroll p-4"
-            style="max-height: 80vh; max-width: 65vw"
+            class="overflow-auto custom-scroll"
+            style="max-height: 80vh; width: 65vw"
           >
-            <textarea
-              v-if="!templateCollapsed"
-              style="
-                font-family: monospace;
-                white-space: pre;
-                overflow-wrap: normal;
-                resize: both;
-              "
-              :value="doc.template ?? ''"
-              :spellcheck="false"
-              cols="74"
-              rows="31"
-              class="
-                overflow-auto
-                p-2
-                border
-                rounded
-                text-sm text-gray-900
-                focus-within:bg-gray-100
-                outline-none
-                bg-gray-50
-              "
-              @change="
-              async (e: Event) => await doc?.set('template', (e.target as HTMLTextAreaElement).value)
-            "
-              :disabled="!doc?.isCustom"
-            ></textarea>
+            <TemplateEditor
+              v-if="!templateCollapsed && typeof doc.template === 'string'"
+              v-model.lazy="doc.template"
+              :disabled="!doc.isCustom"
+            />
           </div>
         </div>
       </div>
@@ -257,6 +235,7 @@ import { getMapFromList } from 'utils/index';
 import { computed, defineComponent } from 'vue';
 import PrintContainer from './PrintContainer.vue';
 import TemplateBuilderHint from './TemplateBuilderHint.vue';
+import TemplateEditor from './TemplateEditor.vue';
 
 export default defineComponent({
   props: { name: String },
@@ -268,6 +247,7 @@ export default defineComponent({
     TemplateBuilderHint,
     DropdownWithActions,
     PrintContainer,
+    TemplateEditor,
   },
   provide() {
     return { doc: computed(() => this.doc) };
@@ -300,12 +280,16 @@ export default defineComponent({
       this.helpersCollapsed = false;
     }
 
+    if (this.doc?.template == null) {
+      await this.doc?.set('template', '');
+    }
+
+    await this.setDisplayInitialDoc();
+
     if (this.fyo.store.isDevelopment) {
       // @ts-ignore
       window.tb = this;
     }
-
-    await this.setInitialDoc();
   },
   methods: {
     async savePDF() {
@@ -319,7 +303,7 @@ export default defineComponent({
 
       printContainer.savePDF(this.displayDoc?.name);
     },
-    async setInitialDoc() {
+    async setDisplayInitialDoc() {
       const schemaName = this.doc?.type;
       if (!schemaName || this.displayDoc?.schemaName === schemaName) {
         return;
diff --git a/src/pages/TemplateBuilder/TemplateEditor.vue b/src/pages/TemplateBuilder/TemplateEditor.vue
new file mode 100644
index 000000000..350012832
--- /dev/null
+++ b/src/pages/TemplateBuilder/TemplateEditor.vue
@@ -0,0 +1,98 @@
+<template>
+  <div ref="container"></div>
+</template>
+<script lang="ts">
+import { vue } from '@codemirror/lang-vue';
+import { Compartment, EditorState } from '@codemirror/state';
+import { ViewUpdate, EditorView } from '@codemirror/view';
+import { basicSetup } from 'codemirror';
+import { defineComponent } from 'vue';
+import { markRaw } from 'vue';
+
+export default defineComponent({
+  data() {
+    return { state: null, view: null, compartments: {}, changed: false } as {
+      state: EditorState | null;
+      view: EditorView | null;
+      compartments: Record<string, Compartment>;
+      changed: boolean;
+    };
+  },
+  props: {
+    modelModifiers: { type: Object, default: () => ({}) },
+    modelValue: { type: String, required: true },
+    disabled: { type: Boolean, default: false },
+  },
+  watch: {
+    disabled(value: boolean) {
+      this.setDisabled(value);
+    },
+  },
+  emits: ['update:modelValue'],
+  mounted() {
+    if (!this.view) {
+      this.init();
+    }
+
+    // @ts-ignore
+    window.vte = this;
+  },
+  methods: {
+    init() {
+      const readOnly = new Compartment();
+      const editable = new Compartment();
+
+      const view = new EditorView({
+        doc: this.modelValue,
+        extensions: [
+          EditorView.updateListener.of(this.updateListener),
+          readOnly.of(EditorState.readOnly.of(this.disabled)),
+          editable.of(EditorView.editable.of(!this.disabled)),
+          basicSetup,
+          vue(),
+        ],
+        parent: this.container,
+      });
+      this.view = markRaw(view);
+
+      const compartments = { readOnly, editable };
+      this.compartments = markRaw(compartments);
+    },
+    updateListener(update: ViewUpdate) {
+      if (update.docChanged) {
+        this.changed = true;
+      }
+
+      if (this.modelModifiers.lazy && !update.focusChanged) {
+        return;
+      }
+
+      if (!this.changed) {
+        return;
+      }
+
+      this.$emit('update:modelValue', this.view?.state.doc.toString() ?? '');
+      this.changed = false;
+    },
+    setDisabled(value: boolean) {
+      const { readOnly, editable } = this.compartments;
+      this.view?.dispatch({
+        effects: [
+          readOnly.reconfigure(EditorState.readOnly.of(value)),
+          editable.reconfigure(EditorView.editable.of(!value)),
+        ],
+      });
+    },
+  },
+  computed: {
+    container() {
+      const { container } = this.$refs;
+      if (container instanceof HTMLDivElement) {
+        return container;
+      }
+
+      throw new Error('ref container is not a div element');
+    },
+  },
+});
+</script>
diff --git a/yarn.lock b/yarn.lock
index 9983d6af7..d9b6cec53 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -962,6 +962,120 @@
     "@babel/helper-validator-identifier" "^7.15.7"
     to-fast-properties "^2.0.0"
 
+"@codemirror/autocomplete@^6.0.0":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.4.2.tgz#938b25223bd21f97b2a6d85474643355f98b505b"
+  integrity sha512-8WE2xp+D0MpWEv5lZ6zPW1/tf4AGb358T5GWYiKEuCP8MvFfT3tH2mIF9Y2yr2e3KbHuSvsVhosiEyqCpiJhZQ==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.6.0"
+    "@lezer/common" "^1.0.0"
+
+"@codemirror/commands@^6.0.0":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.2.1.tgz#ab5e979ad1458bbe395bf69ac601f461ac73cf08"
+  integrity sha512-FFiNKGuHA5O8uC6IJE5apI5rT9gyjlw4whqy4vlcX0wE/myxL6P1s0upwDhY4HtMWLOwzwsp0ap3bjdQhvfDOA==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.2.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/common" "^1.0.0"
+
+"@codemirror/lang-css@^6.0.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-css/-/lang-css-6.1.0.tgz#a40e6b772f4e98fd7c6f84061a0a838cabc3f082"
+  integrity sha512-GYn4TyMvQLrkrhdisFh8HCTDAjPY/9pzwN12hG9UdrTUxRUMicF+8GS24sFEYaleaG1KZClIFLCj0Rol/WO24w==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@lezer/css" "^1.0.0"
+
+"@codemirror/lang-html@^6.0.0":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-html/-/lang-html-6.4.2.tgz#3c7117e45bae009bc7bc08eef8a79b5d05930d83"
+  integrity sha512-bqCBASkteKySwtIbiV/WCtGnn/khLRbbiV5TE+d9S9eQJD7BA4c5dTRm2b3bVmSpilff5EYxvB4PQaZzM/7cNw==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/lang-css" "^6.0.0"
+    "@codemirror/lang-javascript" "^6.0.0"
+    "@codemirror/language" "^6.4.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.2.2"
+    "@lezer/common" "^1.0.0"
+    "@lezer/css" "^1.1.0"
+    "@lezer/html" "^1.3.0"
+
+"@codemirror/lang-javascript@^6.0.0", "@codemirror/lang-javascript@^6.1.2":
+  version "6.1.4"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-javascript/-/lang-javascript-6.1.4.tgz#8a41f4d213e1143b4eef6f65f8b77b349aaf894c"
+  integrity sha512-OxLf7OfOZBTMRMi6BO/F72MNGmgOd9B0vetOLvHsDACFXayBzW8fm8aWnDM0yuy68wTK03MBf4HbjSBNRG5q7A==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/language" "^6.6.0"
+    "@codemirror/lint" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/javascript" "^1.0.0"
+
+"@codemirror/lang-vue@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-vue/-/lang-vue-0.1.1.tgz#79567fb3be3f411354cd135af59d67f956cdb042"
+  integrity sha512-GIfc/MemCFKUdNSYGTFZDN8XsD2z0DUY7DgrK34on0dzdZ/CawZbi+SADYfVzWoPPdxngHzLhqlR5pSOqyPCvA==
+  dependencies:
+    "@codemirror/lang-html" "^6.0.0"
+    "@codemirror/lang-javascript" "^6.1.2"
+    "@codemirror/language" "^6.0.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.3.1"
+
+"@codemirror/language@^6.0.0", "@codemirror/language@^6.4.0", "@codemirror/language@^6.6.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.6.0.tgz#2204407174a38a68053715c19e28ad61f491779f"
+  integrity sha512-cwUd6lzt3MfNYOobdjf14ZkLbJcnv4WtndYaoBkbor/vF+rCNguMPK0IRtvZJG4dsWiaWPcK8x1VijhvSxnstg==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+    style-mod "^4.0.0"
+
+"@codemirror/lint@^6.0.0":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-6.2.0.tgz#25cdab7425fcda1b38a9d63f230f833c8b6b369f"
+  integrity sha512-KVCECmR2fFeYBr1ZXDVue7x3q5PMI0PzcIbA+zKufnkniMBo1325t0h1jM85AKp8l3tj67LRxVpZfgDxEXlQkg==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    crelt "^1.0.5"
+
+"@codemirror/search@^6.0.0":
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-6.2.3.tgz#fab933fef1b1de8ef40cda275c73d9ac7a1ff40f"
+  integrity sha512-V9n9233lopQhB1dyjsBK2Wc1i+8hcCqxl1wQ46c5HWWLePoe4FluV3TGHoZ04rBRlGjNyz9DTmpJErig8UE4jw==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    crelt "^1.0.5"
+
+"@codemirror/state@^6.0.0", "@codemirror/state@^6.1.4", "@codemirror/state@^6.2.0":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.2.0.tgz#a0fb08403ced8c2a68d1d0acee926bd20be922f2"
+  integrity sha512-69QXtcrsc3RYtOtd+GsvczJ319udtBf1PTrr2KbLWM/e2CXUPnh0Nz9AUo8WfhSQ7GeL8dPVNUmhQVgpmuaNGA==
+
+"@codemirror/view@^6.0.0", "@codemirror/view@^6.2.2", "@codemirror/view@^6.6.0":
+  version "6.9.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.9.1.tgz#2ce4c528974b6172a5a4a738b7b0a0f04a4c1140"
+  integrity sha512-bzfSjJn9dAADVpabLKWKNmMG4ibyTV2e3eOGowjElNPTdTkSbi6ixPYHm2u0ADcETfKsi2/R84Rkmi91dH9yEg==
+  dependencies:
+    "@codemirror/state" "^6.1.4"
+    style-mod "^4.0.0"
+    w3c-keyname "^2.2.4"
+
 "@cspotcode/source-map-consumer@0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@cspotcode/source-map-consumer/-/source-map-consumer-0.8.0.tgz#33bf4b7b39c178821606f669bbc447a6a629786b"
@@ -1195,6 +1309,50 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@lezer/common@^1.0.0":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.0.2.tgz#8fb9b86bdaa2ece57e7d59e5ffbcb37d71815087"
+  integrity sha512-SVgiGtMnMnW3ActR8SXgsDhw7a0w0ChHSYAyAUxxrOiJ1OqYWEKk/xJd84tTSPo1mo6DXLObAJALNnd0Hrv7Ng==
+
+"@lezer/css@^1.0.0", "@lezer/css@^1.1.0":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@lezer/css/-/css-1.1.1.tgz#c36dcb0789317cb80c3740767dd3b85e071ad082"
+  integrity sha512-mSjx+unLLapEqdOYDejnGBokB5+AiJKZVclmud0MKQOKx3DLJ5b5VTCstgDDknR6iIV4gVrN6euzsCnj0A2gQA==
+  dependencies:
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+
+"@lezer/highlight@^1.0.0", "@lezer/highlight@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@lezer/highlight/-/highlight-1.1.3.tgz#bf5a36c2ee227f526d74997ac91f7777e29bd25d"
+  integrity sha512-3vLKLPThO4td43lYRBygmMY18JN3CPh9w+XS2j8WC30vR4yZeFG4z1iFe4jXE43NtGqe//zHW5q8ENLlHvz9gw==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+
+"@lezer/html@^1.3.0":
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/@lezer/html/-/html-1.3.3.tgz#2eddae2ad000f9b184d9fc4686394d0fa0849993"
+  integrity sha512-04Fyvu66DjV2EjhDIG1kfDdktn5Pfw56SXPrzKNQH5B2m7BDfc6bDsz+ZJG8dLS3kIPEKbyyq1Sm2/kjeG0+AA==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+
+"@lezer/javascript@^1.0.0":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@lezer/javascript/-/javascript-1.4.1.tgz#97a15042c76b5979af6a069fac83cf6485628cbf"
+  integrity sha512-Hqx36DJeYhKtdpc7wBYPR0XF56ZzIp0IkMO/zNNj80xcaFOV4Oj/P7TQc/8k2TxNhzl7tV5tXS8ZOCPbT4L3nA==
+  dependencies:
+    "@lezer/highlight" "^1.1.3"
+    "@lezer/lr" "^1.3.0"
+
+"@lezer/lr@^1.0.0", "@lezer/lr@^1.3.0", "@lezer/lr@^1.3.1":
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-1.3.3.tgz#0ac6c889f1235874f33c45a1b9785d7054f60708"
+  integrity sha512-JPQe3mwJlzEVqy67iQiiGozhcngbO8QBgpqZM6oL1Wj/dXckrEexpBLeFkq0edtW5IqnPRFxA24BHJni8Js69w==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+
 "@malept/cross-spawn-promise@^1.1.0":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@malept/cross-spawn-promise/-/cross-spawn-promise-1.1.1.tgz#504af200af6b98e198bce768bc1730c6936ae01d"
@@ -3903,6 +4061,19 @@ code-point-at@^1.0.0:
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
   integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
 
+codemirror@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-6.0.1.tgz#62b91142d45904547ee3e0e0e4c1a79158035a29"
+  integrity sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/commands" "^6.0.0"
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/lint" "^6.0.0"
+    "@codemirror/search" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -4295,6 +4466,11 @@ create-require@^1.1.0:
   resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
   integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
 
+crelt@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.5.tgz#57c0d52af8c859e354bace1883eb2e1eb182bb94"
+  integrity sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==
+
 cross-spawn@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -11545,6 +11721,11 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
+style-mod@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.0.0.tgz#97e7c2d68b592975f2ca7a63d0dd6fcacfe35a01"
+  integrity sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==
+
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
@@ -12635,6 +12816,11 @@ vue@^3.2.40:
     "@vue/server-renderer" "3.2.40"
     "@vue/shared" "3.2.40"
 
+w3c-keyname@^2.2.4:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.6.tgz#8412046116bc16c5d73d4e612053ea10a189c85f"
+  integrity sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==
+
 watchpack-chokidar2@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"

From ec9cc7f2b4d99726e6b62f2dcd9d5fd58568d8f9 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Wed, 8 Mar 2023 19:55:45 +0530
Subject: [PATCH 19/33] fix(ui): update template editor colors

---
 src/pages/TemplateBuilder/TemplateBuilder.vue | 13 +++---
 .../TemplateBuilder/TemplateBuilderHint.vue   |  6 +--
 src/pages/TemplateBuilder/TemplateEditor.vue  | 40 +++++++++++++++----
 3 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/src/pages/TemplateBuilder/TemplateBuilder.vue b/src/pages/TemplateBuilder/TemplateBuilder.vue
index de999b5c0..62e4e9e2c 100644
--- a/src/pages/TemplateBuilder/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilder.vue
@@ -195,16 +195,13 @@
           <h2 class="text-base font-semibold p-4 border-b">
             {{ t`Template` }}
           </h2>
-          <div
+          <TemplateEditor
             class="overflow-auto custom-scroll"
             style="max-height: 80vh; width: 65vw"
-          >
-            <TemplateEditor
-              v-if="!templateCollapsed && typeof doc.template === 'string'"
-              v-model.lazy="doc.template"
-              :disabled="!doc.isCustom"
-            />
-          </div>
+            v-if="!templateCollapsed && typeof doc.template === 'string'"
+            v-model.lazy="doc.template"
+            :disabled="!doc.isCustom"
+          />
         </div>
       </div>
     </Modal>
diff --git a/src/pages/TemplateBuilder/TemplateBuilderHint.vue b/src/pages/TemplateBuilder/TemplateBuilderHint.vue
index 15537e98a..4f2cf7bd3 100644
--- a/src/pages/TemplateBuilder/TemplateBuilderHint.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilderHint.vue
@@ -34,9 +34,9 @@
         <div
           v-else
           class="
-            text-green-600
-            bg-green-50
-            border-green-200 border
+            text-pink-600
+            bg-pink-50
+            border-pink-200 border
             tracking-tighter
             rounded
             text-xs
diff --git a/src/pages/TemplateBuilder/TemplateEditor.vue b/src/pages/TemplateBuilder/TemplateEditor.vue
index 350012832..2b84ca77a 100644
--- a/src/pages/TemplateBuilder/TemplateEditor.vue
+++ b/src/pages/TemplateBuilder/TemplateEditor.vue
@@ -1,13 +1,15 @@
 <template>
-  <div ref="container"></div>
+  <div ref="container" class="bg-white text-gray-900"></div>
 </template>
 <script lang="ts">
 import { vue } from '@codemirror/lang-vue';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { Compartment, EditorState } from '@codemirror/state';
-import { ViewUpdate, EditorView } from '@codemirror/view';
+import { EditorView, ViewUpdate } from '@codemirror/view';
+import { tags } from '@lezer/highlight';
 import { basicSetup } from 'codemirror';
-import { defineComponent } from 'vue';
-import { markRaw } from 'vue';
+import { uicolors } from 'src/utils/colors';
+import { defineComponent, markRaw } from 'vue';
 
 export default defineComponent({
   data() {
@@ -33,15 +35,24 @@ export default defineComponent({
     if (!this.view) {
       this.init();
     }
-
-    // @ts-ignore
-    window.vte = this;
   },
   methods: {
     init() {
       const readOnly = new Compartment();
       const editable = new Compartment();
 
+      const highlightStyle = HighlightStyle.define([
+        { tag: tags.typeName, color: uicolors.pink[600] },
+        { tag: tags.angleBracket, color: uicolors.pink[600] },
+        { tag: tags.attributeName, color: uicolors.gray[700] },
+        { tag: tags.attributeValue, color: uicolors.blue[700] },
+        { tag: tags.comment, color: uicolors.gray[500] },
+        { tag: tags.keyword, color: uicolors.blue[500] },
+        { tag: tags.variableName, color: uicolors.yellow[600] },
+        { tag: tags.string, color: uicolors.pink[700] },
+        { tag: tags.content, color: uicolors.gray[700] },
+      ]);
+
       const view = new EditorView({
         doc: this.modelValue,
         extensions: [
@@ -50,6 +61,7 @@ export default defineComponent({
           editable.of(EditorView.editable.of(!this.disabled)),
           basicSetup,
           vue(),
+          syntaxHighlighting(highlightStyle),
         ],
         parent: this.container,
       });
@@ -96,3 +108,17 @@ export default defineComponent({
   },
 });
 </script>
+<style>
+.cm-gutter {
+  @apply bg-gray-50;
+}
+
+.cm-gutters {
+  border: none !important;
+}
+
+.cm-activeLine,
+.cm-activeLineGutter {
+  background-color: #e5f3ff67 !important;
+}
+</style>

From 11c714a9571f83e19678ee9d0d4d4d2471976ea6 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Thu, 9 Mar 2023 11:47:25 +0530
Subject: [PATCH 20/33] feat: add autocomplete for linklabels - update editor
 styling

---
 package.json                                  |   1 +
 src/pages/TemplateBuilder/TemplateBuilder.vue |  17 ++-
 .../TemplateBuilder/TemplateBuilderHint.vue   |   6 +-
 src/pages/TemplateBuilder/TemplateEditor.vue  | 143 +++++++++++++++++-
 yarn.lock                                     |   2 +-
 5 files changed, 150 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index 420698589..0c05a90ef 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "test": "scripts/test.sh"
   },
   "dependencies": {
+    "@codemirror/autocomplete": "^6.4.2",
     "@codemirror/lang-vue": "^0.1.1",
     "@popperjs/core": "^2.10.2",
     "better-sqlite3": "^7.5.3",
diff --git a/src/pages/TemplateBuilder/TemplateBuilder.vue b/src/pages/TemplateBuilder/TemplateBuilder.vue
index 62e4e9e2c..407f3663d 100644
--- a/src/pages/TemplateBuilder/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilder.vue
@@ -178,7 +178,7 @@
     >
       <div class="flex">
         <!-- Hint Section Header -->
-        <div class="border-r" v-if="hint">
+        <div class="border-r" v-if="hints">
           <h2 class="text-base font-semibold p-4 border-b">
             {{ t`Value Keys` }}
           </h2>
@@ -186,7 +186,7 @@
             class="overflow-auto custom-scroll p-4"
             style="max-height: 80vh; width: 25vw"
           >
-            <TemplateBuilderHint :hint="hint" />
+            <TemplateBuilderHint :hints="hints" />
           </div>
         </div>
 
@@ -196,11 +196,12 @@
             {{ t`Template` }}
           </h2>
           <TemplateEditor
-            class="overflow-auto custom-scroll"
-            style="max-height: 80vh; width: 65vw"
             v-if="!templateCollapsed && typeof doc.template === 'string'"
             v-model.lazy="doc.template"
             :disabled="!doc.isCustom"
+            :hints="hints ?? undefined"
+            class="overflow-auto custom-scroll"
+            style="max-height: 80vh; width: 65vw"
           />
         </div>
       </div>
@@ -253,14 +254,14 @@ export default defineComponent({
     return {
       doc: null,
       showEditor: false,
-      hint: null,
+      hints: undefined,
       values: null,
       templateCollapsed: false,
       helpersCollapsed: true,
       displayDoc: null,
       scale: 0.65,
     } as {
-      hint: null | Record<string, unknown>;
+      hints?: Record<string, unknown>;
       values: null | PrintValues;
       doc: PrintTemplate | null;
       showEditor: boolean;
@@ -344,7 +345,7 @@ export default defineComponent({
     },
     async setDisplayDoc(value: string) {
       if (!value) {
-        this.hint = null;
+        delete this.hints;
         this.values = null;
         this.displayDoc = null;
         return;
@@ -356,7 +357,7 @@ export default defineComponent({
       }
 
       const displayDoc = await getDocFromNameIfExistsElseNew(schemaName, value);
-      this.hint = getPrintTemplatePropHints(displayDoc);
+      this.hints = getPrintTemplatePropHints(displayDoc);
       this.values = await getPrintTemplatePropValues(displayDoc);
       this.displayDoc = displayDoc;
     },
diff --git a/src/pages/TemplateBuilder/TemplateBuilderHint.vue b/src/pages/TemplateBuilder/TemplateBuilderHint.vue
index 4f2cf7bd3..a2dab9c5d 100644
--- a/src/pages/TemplateBuilder/TemplateBuilderHint.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilderHint.vue
@@ -55,7 +55,7 @@
       <div v-if="!r.collapsed && typeof r.value === 'object'">
         <TemplateBuilderHint
           :prefix="getKey(r)"
-          :hint="Array.isArray(r.value) ? r.value[0] : r.value"
+          :hints="Array.isArray(r.value) ? r.value[0] : r.value"
           :level="level + 1"
         />
       </div>
@@ -74,7 +74,7 @@ export default defineComponent({
   name: 'TemplateBuilderHint',
   props: {
     prefix: { type: String, default: '' },
-    hint: { type: Object, required: true },
+    hints: { type: Object, required: true },
     level: { type: Number, default: 0 },
   },
   data() {
@@ -83,7 +83,7 @@ export default defineComponent({
     };
   },
   mounted() {
-    this.rows = Object.entries(this.hint)
+    this.rows = Object.entries(this.hints)
       .map(([key, value]) => ({
         key,
         value,
diff --git a/src/pages/TemplateBuilder/TemplateEditor.vue b/src/pages/TemplateBuilder/TemplateEditor.vue
index 2b84ca77a..fd989e2a6 100644
--- a/src/pages/TemplateBuilder/TemplateEditor.vue
+++ b/src/pages/TemplateBuilder/TemplateEditor.vue
@@ -2,8 +2,13 @@
   <div ref="container" class="bg-white text-gray-900"></div>
 </template>
 <script lang="ts">
+import { autocompletion, CompletionContext } from '@codemirror/autocomplete';
 import { vue } from '@codemirror/lang-vue';
-import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import {
+  HighlightStyle,
+  syntaxHighlighting,
+  syntaxTree,
+} from '@codemirror/language';
 import { Compartment, EditorState } from '@codemirror/state';
 import { EditorView, ViewUpdate } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
@@ -24,6 +29,7 @@ export default defineComponent({
     modelModifiers: { type: Object, default: () => ({}) },
     modelValue: { type: String, required: true },
     disabled: { type: Boolean, default: false },
+    hints: { type: Object },
   },
   watch: {
     disabled(value: boolean) {
@@ -44,14 +50,15 @@ export default defineComponent({
       const highlightStyle = HighlightStyle.define([
         { tag: tags.typeName, color: uicolors.pink[600] },
         { tag: tags.angleBracket, color: uicolors.pink[600] },
-        { tag: tags.attributeName, color: uicolors.gray[700] },
-        { tag: tags.attributeValue, color: uicolors.blue[700] },
-        { tag: tags.comment, color: uicolors.gray[500] },
-        { tag: tags.keyword, color: uicolors.blue[500] },
-        { tag: tags.variableName, color: uicolors.yellow[600] },
-        { tag: tags.string, color: uicolors.pink[700] },
+        { tag: tags.attributeName, color: uicolors.gray[600] },
+        { tag: tags.attributeValue, color: uicolors.blue[600] },
+        { tag: tags.comment, color: uicolors.gray[500], fontStyle: 'italic' },
+        { tag: tags.keyword, color: uicolors.pink[500] },
+        { tag: tags.variableName, color: uicolors.blue[700] },
+        { tag: tags.string, color: uicolors.pink[600] },
         { tag: tags.content, color: uicolors.gray[700] },
       ]);
+      const completions = getCompletionsFromHints(this.hints ?? {});
 
       const view = new EditorView({
         doc: this.modelValue,
@@ -62,6 +69,7 @@ export default defineComponent({
           basicSetup,
           vue(),
           syntaxHighlighting(highlightStyle),
+          autocompletion({ override: [completions] }),
         ],
         parent: this.container,
       });
@@ -107,8 +115,101 @@ export default defineComponent({
     },
   },
 });
+
+function getCompletionsFromHints(hints: Record<string, unknown>) {
+  const options = hintsToCompletionOptions(hints);
+  return function completions(context: CompletionContext) {
+    let word = context.matchBefore(/\w*/);
+    if (word == null) {
+      return null;
+    }
+
+    const node = syntaxTree(context.state).resolveInner(context.pos);
+    const aptLocation = ['ScriptAttributeValue', 'SingleExpression'];
+
+    if (!aptLocation.includes(node.name)) {
+      return null;
+    }
+
+    if (word.from === word.to && !context.explicit) {
+      return null;
+    }
+
+    return {
+      from: word.from,
+      options,
+    };
+  };
+}
+
+type CompletionOption = {
+  label: string;
+  type: string;
+  detail: string;
+};
+
+function hintsToCompletionOptions(
+  hints: object,
+  prefix?: string
+): CompletionOption[] {
+  prefix ??= '';
+  const list: CompletionOption[] = [];
+
+  for (const [key, value] of Object.entries(hints)) {
+    const option = getCompletionOption(key, value, prefix);
+    if (option === null) {
+      continue;
+    }
+
+    if (Array.isArray(option)) {
+      list.push(...option);
+      continue;
+    }
+
+    list.push(option);
+  }
+
+  return list;
+}
+
+function getCompletionOption(
+  key: string,
+  value: unknown,
+  prefix: string
+): null | CompletionOption | CompletionOption[] {
+  let label = key;
+  if (prefix.length) {
+    label = prefix + '.' + key;
+  }
+
+  if (Array.isArray(value)) {
+    return {
+      label,
+      type: 'variable',
+      detail: 'Child Table',
+    };
+  }
+
+  if (typeof value === 'string') {
+    return {
+      label,
+      type: 'variable',
+      detail: value,
+    };
+  }
+
+  if (typeof value === 'object' && value !== null) {
+    return hintsToCompletionOptions(value, label);
+  }
+
+  return null;
+}
 </script>
 <style>
+.cm-line {
+  font-weight: 600;
+}
+
 .cm-gutter {
   @apply bg-gray-50;
 }
@@ -121,4 +222,32 @@ export default defineComponent({
 .cm-activeLineGutter {
   background-color: #e5f3ff67 !important;
 }
+
+.cm-tooltip-autocomplete {
+  background-color: white !important;
+  border: 1px solid theme('colors.gray.200') !important;
+  @apply rounded shadow-lg overflow-hidden text-gray-900;
+}
+
+.cm-tooltip-autocomplete [aria-selected] {
+  color: #334155 !important;
+  background-color: theme('colors.blue.100') !important;
+}
+
+.cm-panels {
+  border-top: 1px solid theme('colors.gray.200') !important;
+  background-color: theme('colors.gray.50') !important;
+  color: theme('colors.gray.800') !important;
+}
+
+.cm-button {
+  background-image: none !important;
+  background-color: theme('colors.gray.200') !important;
+  color: theme('colors.gray.700') !important;
+  border: none !important;
+}
+
+.cm-textfield {
+  border: 1px solid theme('colors.gray.200') !important;
+}
 </style>
diff --git a/yarn.lock b/yarn.lock
index d9b6cec53..a24f11433 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -962,7 +962,7 @@
     "@babel/helper-validator-identifier" "^7.15.7"
     to-fast-properties "^2.0.0"
 
-"@codemirror/autocomplete@^6.0.0":
+"@codemirror/autocomplete@^6.0.0", "@codemirror/autocomplete@^6.4.2":
   version "6.4.2"
   resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.4.2.tgz#938b25223bd21f97b2a6d85474643355f98b505b"
   integrity sha512-8WE2xp+D0MpWEv5lZ6zPW1/tf4AGb358T5GWYiKEuCP8MvFfT3tH2mIF9Y2yr2e3KbHuSvsVhosiEyqCpiJhZQ==

From 6ec819f4bad33e7908368790fd5a9cddc6495f23 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Thu, 9 Mar 2023 14:26:21 +0530
Subject: [PATCH 21/33] feat: add HorizontalResizer

---
 src/components/HorizontalResizer.vue | 138 +++++++++++++++++++++++++++
 1 file changed, 138 insertions(+)
 create mode 100644 src/components/HorizontalResizer.vue

diff --git a/src/components/HorizontalResizer.vue b/src/components/HorizontalResizer.vue
new file mode 100644
index 000000000..b46a9aac9
--- /dev/null
+++ b/src/components/HorizontalResizer.vue
@@ -0,0 +1,138 @@
+<template>
+  <div
+    class="h-full bg-gray-300 transition-opacity hover:opacity-100"
+    :class="resizing ? 'opacity-100' : 'opacity-0'"
+    style="width: 3px; cursor: col-resize; margin-left: -3px"
+    @mousedown="onMouseDown"
+    ref="hr"
+  >
+    <MouseFollower
+      :show="resizing"
+      placement="left"
+      class="
+        p-1
+        bg-white
+        border
+        rounded
+        shadow
+        text-sm text-center text-gray-800
+      "
+      style="min-width: 2rem"
+    >
+      {{ value }}
+    </MouseFollower>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MouseFollower from './MouseFollower.vue';
+
+export default defineComponent({
+  emits: ['resize'],
+  props: { initialX: Number, minX: Number, maxX: Number },
+  data() {
+    return {
+      x: 0,
+      delta: 0,
+      resizing: false,
+      listener: null,
+    };
+  },
+  methods: {
+    onMouseDown(e: MouseEvent) {
+      e.preventDefault();
+      const { clientX } = e;
+
+      this.setX(clientX);
+      this.setResizing(true);
+
+      document.addEventListener('mousemove', this.mouseMoveListener);
+      document.addEventListener('mouseup', this.mouseUpListener);
+    },
+    mouseUpListener(e: MouseEvent) {
+      e.preventDefault();
+      const { clientX } = e;
+
+      this.setX(clientX);
+      this.setResizing(false);
+
+      this.emitValue(this.x - clientX);
+      this.removeListeners();
+    },
+    mouseMoveListener(e: MouseEvent) {
+      e.preventDefault();
+      const { clientX } = e;
+      this.delta = this.x - clientX;
+    },
+    removeListeners() {
+      document.removeEventListener('mousemove', this.mouseMoveListener);
+      document.removeEventListener('mouseup', this.mouseUpListener);
+    },
+    setResizing(value: boolean) {
+      this.resizing = value;
+
+      if (value) {
+        this.delta = 0;
+        document.body.style.cursor = 'col-resize';
+      } else {
+        document.body.style.cursor = '';
+      }
+    },
+    setX(x?: number): void {
+      if (typeof x === 'number') {
+        this.x = x;
+        return;
+      }
+      const hr = this.$refs.hr;
+      if (!(hr instanceof HTMLDivElement)) {
+        return;
+      }
+      this.x = hr.getBoundingClientRect().x;
+    },
+    emitValue(delta: number) {
+      if (typeof this.minDelta === 'number') {
+        delta = Math.max(delta, this.minDelta);
+      }
+
+      if (typeof this.maxDelta === 'number') {
+        delta = Math.min(delta, this.maxDelta);
+      }
+
+      this.$emit('resize', delta, this.value);
+    },
+  },
+  computed: {
+    value() {
+      if (typeof this.initialX !== 'number') {
+        return this.delta;
+      }
+
+      let value = this.delta + this.initialX;
+      if (typeof this.minX === 'number') {
+        value = Math.max(this.minX, value);
+      }
+
+      if (typeof this.maxX === 'number') {
+        value = Math.min(this.maxX, value);
+      }
+
+      return value;
+    },
+    minDelta() {
+      if (typeof this.minX !== 'number' || typeof this.initialX !== 'number') {
+        return null;
+      }
+
+      return this.initialX - this.minX;
+    },
+    maxDelta() {
+      if (typeof this.maxX !== 'number' || typeof this.initialX !== 'number') {
+        return null;
+      }
+
+      return this.maxX - this.initialX;
+    },
+  },
+  components: { MouseFollower },
+});
+</script>

From fcec404e63938c50b201bc86a7008addeed70269 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Thu, 9 Mar 2023 15:49:02 +0530
Subject: [PATCH 22/33] fix(ui): start restyling editor - add left pane for
 template - add baseTemplate when starting with a new template

---
 src/components/Controls/Base.vue              |   2 +
 src/pages/TemplateBuilder/TemplateBuilder.vue | 271 +++++++-----------
 src/utils/printTemplates.ts                   |  14 +
 3 files changed, 118 insertions(+), 169 deletions(-)

diff --git a/src/components/Controls/Base.vue b/src/components/Controls/Base.vue
index df3553d1d..0fc29198c 100644
--- a/src/components/Controls/Base.vue
+++ b/src/components/Controls/Base.vue
@@ -16,6 +16,7 @@
         :step="step"
         :max="df.maxvalue"
         :min="df.minvalue"
+        :style="inputStyles"
         @blur="(e) => !isReadOnly && triggerChange(e.target.value)"
         @focus="(e) => !isReadOnly && $emit('focus', e)"
         @input="(e) => !isReadOnly && $emit('input', e)"
@@ -41,6 +42,7 @@ export default {
     size: String,
     showLabel: Boolean,
     autofocus: Boolean,
+    inputStyles: { type: Object, default: () => ({}) },
     textRight: { type: [null, Boolean], default: null },
     readOnly: { type: [null, Boolean], default: null },
     required: { type: [null, Boolean], default: null },
diff --git a/src/pages/TemplateBuilder/TemplateBuilder.vue b/src/pages/TemplateBuilder/TemplateBuilder.vue
index 407f3663d..11a86e882 100644
--- a/src/pages/TemplateBuilder/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilder.vue
@@ -4,19 +4,25 @@
       <Button v-if="displayDoc && doc?.template" @click="savePDF">
         {{ t`Save as PDF` }}
       </Button>
+      <Button
+        v-if="doc && displayDoc"
+        :title="t`Toggle Edit Mode`"
+        :icon="true"
+        @click="toggleEditMode"
+      >
+        <feather-icon name="edit" class="w-4 h-4" />
+      </Button>
       <DropdownWithActions v-if="doc?.inserted" :actions="actions" />
       <Button v-if="doc?.canSave" type="primary" @click="sync()">
         {{ t`Save` }}
       </Button>
     </PageHeader>
+
     <!-- Template Builder Body -->
     <div
-      class="w-full overflowauto bg-gray-25 grid"
-      style="
-        grid-template-columns: auto var(--w-quick-edit);
-        height: calc(100vh - var(--h-row-largest) - 1px);
-      "
       v-if="doc"
+      class="w-full overflowauto bg-gray-25 grid"
+      :style="templateBuilderBodyStyles"
     >
       <!-- Template Display Area -->
       <div class="overflow-auto custom-scroll p-4">
@@ -35,177 +41,74 @@
         />
       </div>
 
-      <!-- Template Builder Controls -->
+      <!-- Input Panel Resizer -->
+      <HorizontalResizer
+        class="z-20"
+        :initial-x="panelWidth"
+        :min-x="22 * 16"
+        @resize="(_: number, value: number) => panelWidth = value"
+      />
+
+      <!-- Input Panel -->
       <div
-        class="
-          h-full
-          w-full
-          ml-auto
-          border-l
-          flex flex-col
-          bg-white
-          overflow-auto
-          custom-scroll
-        "
+        class="border-l bg-white flex flex-col"
+        style="height: calc(100vh - var(--h-row-largest) - 1px)"
       >
-        <!-- Print Template Fields -->
-        <div class="p-4 flex flex-col gap-4 sticky top-0 bg-white border-b">
-          <FormControl
-            class="w-full mx-auto"
-            size="small"
-            :input-class="['font-semibold text-xl', 'text-center']"
-            :df="fields.name"
-            :border="!doc.inserted"
-            :value="doc.get('name')"
-            :read-only="doc.inserted"
-            @change="async (value) => await doc?.set('name', value)"
+        <!-- Template Name -->
+        <FormControl
+          class="w-full border-b z-10 flex-shrink-0"
+          size="small"
+          :input-class="['font-semibold text-xl']"
+          :input-styles="{ 'border-radius': '0px', padding: '0.5rem' }"
+          :df="fields.name"
+          :border="false"
+          :value="doc.get('name')"
+          :read-only="doc.inserted"
+          @change="async (value) => await doc?.set('name', value)"
+        />
+
+        <!-- Template Editor -->
+        <div class="min-h-0">
+          <TemplateEditor
+            class="overflow-auto custom-scroll h-full"
+            v-if="typeof doc.template === 'string'"
+            v-model.lazy="doc.template"
+            :disabled="!doc.isCustom"
+            :hints="hints ?? undefined"
           />
         </div>
 
-        <!-- Controls Section -->
-        <div class="p-4">
+        <!-- Value Key Hints -->
+        <div class="border-t mt-auto flex-shrink-0" v-if="hints">
           <div
-            class="flex justify-between items-center cursor-pointer select-none"
-            :class="helpersCollapsed ? '' : 'mb-4'"
-            @click="helpersCollapsed = !helpersCollapsed"
+            class="
+              flex
+              justify-between
+              items-center
+              cursor-pointer
+              select-none
+              p-2
+            "
+            @click="showHints = !showHints"
           >
             <h2 class="text-base text-gray-900 font-semibold">
-              {{ t`Controls` }}
+              {{ t`Value Keys` }}
             </h2>
             <feather-icon
-              :name="helpersCollapsed ? 'chevron-up' : 'chevron-down'"
+              :name="showHints ? 'chevron-up' : 'chevron-down'"
               class="w-4 h-4 text-gray-600 resize-none"
             />
           </div>
-
-          <div v-if="!helpersCollapsed" class="w-full flex flex-col gap-4">
-            <FormControl
-              size="small"
-              :df="fields.type"
-              :show-label="true"
-              :border="true"
-              :value="doc.get('type')"
-              @change="async (value) => await doc?.set('type', value)"
-            />
-
-            <FormControl
-              v-if="doc.type"
-              size="small"
-              :df="displayDocField"
-              :show-label="true"
-              :border="true"
-              :value="displayDoc?.name"
-              @change="(value: string) => setDisplayDoc(value)"
-            />
-
-            <FormControl
-              v-if="displayDoc && doc.template"
-              size="small"
-              :step="0.01"
-              :df="{
-                fieldtype: 'Float',
-                label: t`Display Scale`,
-                fieldname: 'displayScale',
-                maxvalue: 10,
-                minvalue: 0.1,
-              }"
-              :show-label="true"
-              :border="true"
-              :value="scale"
-              @change="(value: number) => scale = value"
-            />
-          </div>
-        </div>
-
-        <!-- Template Section -->
-        <div class="p-4 border-t" v-if="doc.type">
           <div
-            class="flex justify-between items-center cursor-pointer select-none"
-            @click="templateCollapsed = !templateCollapsed"
-          >
-            <h2 class="text-base text-gray-900 font-semibold">
-              {{ t`Template` }}
-            </h2>
-            <feather-icon
-              :name="templateCollapsed ? 'chevron-up' : 'chevron-down'"
-              class="w-4 h-4 text-gray-600"
-            />
-          </div>
-
-          <!-- Template Editor -->
-          <div class="mt-4 relative" v-if="!templateCollapsed">
-            <textarea
-              style="
-                font-family: monospace;
-                white-space: pre;
-                overflow-wrap: normal;
-              "
-              :value="doc.template ?? ''"
-              :spellcheck="false"
-              rows="10"
-              class="
-                overflow-auto
-                p-2
-                w-full
-                border
-                rounded
-                text-sm text-gray-900
-                focus-within:bg-gray-100
-                outline-none
-                bg-gray-50
-              "
-              @change="
-              async (e: Event) => await doc?.set('template', (e.target as HTMLTextAreaElement).value)
-            "
-              :disabled="!doc?.isCustom"
-            />
-            <button
-              class="bg-gray-200 p-0.5 rounded absolute bottom-4 left-2"
-              @click="showEditor = true"
-            >
-              <feather-icon name="maximize" class="h-4 w-4 text-gray-600" />
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Editor Modal -->
-    <Modal
-      v-if="doc"
-      @closemodal="() => (showEditor = false)"
-      :open-modal="showEditor"
-    >
-      <div class="flex">
-        <!-- Hint Section Header -->
-        <div class="border-r" v-if="hints">
-          <h2 class="text-base font-semibold p-4 border-b">
-            {{ t`Value Keys` }}
-          </h2>
-          <div
-            class="overflow-auto custom-scroll p-4"
-            style="max-height: 80vh; width: 25vw"
+            v-if="showHints"
+            class="overflow-auto custom-scroll p-2 border-t"
+            style="max-height: 30vh"
           >
             <TemplateBuilderHint :hints="hints" />
           </div>
         </div>
-
-        <!-- Template Editor Section -->
-        <div>
-          <h2 class="text-base font-semibold p-4 border-b">
-            {{ t`Template` }}
-          </h2>
-          <TemplateEditor
-            v-if="!templateCollapsed && typeof doc.template === 'string'"
-            v-model.lazy="doc.template"
-            :disabled="!doc.isCustom"
-            :hints="hints ?? undefined"
-            class="overflow-auto custom-scroll"
-            style="max-height: 80vh; width: 65vw"
-          />
-        </div>
       </div>
-    </Modal>
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -216,18 +119,21 @@ import { Field, TargetField } from 'schemas/types';
 import Button from 'src/components/Button.vue';
 import FormControl from 'src/components/Controls/FormControl.vue';
 import DropdownWithActions from 'src/components/DropdownWithActions.vue';
-import Modal from 'src/components/Modal.vue';
+import HorizontalResizer from 'src/components/HorizontalResizer.vue';
 import PageHeader from 'src/components/PageHeader.vue';
 import { handleErrorWithDialog } from 'src/errorHandling';
 import {
+  baseTemplate,
   getPrintTemplatePropHints,
   getPrintTemplatePropValues,
 } from 'src/utils/printTemplates';
+import { showSidebar } from 'src/utils/refs';
 import { PrintValues } from 'src/utils/types';
 import {
   getActionsForDoc,
   getDocFromNameIfExistsElseNew,
   openSettings,
+  showToast,
 } from 'src/utils/ui';
 import { getMapFromList } from 'utils/index';
 import { computed, defineComponent } from 'vue';
@@ -239,13 +145,13 @@ export default defineComponent({
   props: { name: String },
   components: {
     PageHeader,
-    FormControl,
     Button,
-    Modal,
-    TemplateBuilderHint,
     DropdownWithActions,
     PrintContainer,
+    HorizontalResizer,
     TemplateEditor,
+    FormControl,
+    TemplateBuilderHint,
   },
   provide() {
     return { doc: computed(() => this.doc) };
@@ -253,33 +159,34 @@ export default defineComponent({
   data() {
     return {
       doc: null,
+      editMode: false,
+      showHints: false,
+      wasSidebarShown: true,
       showEditor: false,
       hints: undefined,
       values: null,
-      templateCollapsed: false,
       helpersCollapsed: true,
       displayDoc: null,
       scale: 0.65,
+      panelWidth: 22 /** rem */ * 16 /** px */,
     } as {
+      editMode: boolean;
+      showHints: boolean;
+      wasSidebarShown: boolean;
       hints?: Record<string, unknown>;
       values: null | PrintValues;
       doc: PrintTemplate | null;
       showEditor: boolean;
       displayDoc: PrintTemplate | null;
-      templateCollapsed: boolean;
-      helpersCollapsed: boolean;
       scale: number;
+      panelWidth: number;
     };
   },
   async mounted() {
     await this.setDoc();
 
-    if (!this.doc?.template) {
-      this.helpersCollapsed = false;
-    }
-
     if (this.doc?.template == null) {
-      await this.doc?.set('template', '');
+      await this.doc?.set('template', baseTemplate);
     }
 
     await this.setDisplayInitialDoc();
@@ -288,8 +195,26 @@ export default defineComponent({
       // @ts-ignore
       window.tb = this;
     }
+
+    this.wasSidebarShown = showSidebar.value;
   },
   methods: {
+    toggleEditMode() {
+      this.editMode = !this.editMode;
+
+      if (this.editMode) {
+        showSidebar.value = false;
+      } else {
+        showSidebar.value = this.wasSidebarShown;
+      }
+
+      let message = this.t`Edit Mode Enabled`;
+      if (!this.editMode) {
+        message = this.t`Edit Mode Disabled`;
+      }
+
+      showToast({ type: 'info', message, duration: 1000 });
+    },
     async savePDF() {
       const printContainer = this.$refs.printContainer as {
         savePDF: (name?: string) => void;
@@ -413,6 +338,14 @@ export default defineComponent({
 
       return '';
     },
+    templateBuilderBodyStyles(): Record<string, string> {
+      const styles: Record<string, string> = {};
+
+      styles['grid-template-columns'] = `auto 0px ${this.panelWidth}px`;
+      styles['height'] = 'calc(100vh - var(--h-row-largest) - 1px)';
+
+      return styles;
+    },
   },
 });
 </script>
diff --git a/src/utils/printTemplates.ts b/src/utils/printTemplates.ts
index 2ab4f9b6e..9e3e360f2 100644
--- a/src/utils/printTemplates.ts
+++ b/src/utils/printTemplates.ts
@@ -349,3 +349,17 @@ function getNameAndTypeFromTemplateFile(
     }
   );
 }
+
+export const baseTemplate = `<main class="h-full w-full bg-white">
+  <header class="p-4 flex justify-between bg-gray-50">
+    <h2 
+      class="font-semibold text-2xl" 
+      :style="{ color: print.color }"
+    >
+      {{ print.companyName }}
+    </h2>
+    <h2 class="font-semibold text-2xl" >
+      {{ doc.name }}
+    </h2>
+  </header>
+</main>`;

From 5c1696ea85a461664e761a88ec5cf7dc015acef4 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Thu, 9 Mar 2023 20:11:48 +0530
Subject: [PATCH 23/33] fix(ui): update template editor layout - remove modal,
 everything in one screent

---
 src/components/HorizontalResizer.vue          | 10 +-
 src/pages/Desk.vue                            |  1 +
 src/pages/TemplateBuilder/TemplateBuilder.vue | 99 ++++++++++++++++---
 src/pages/TemplateBuilder/TemplateEditor.vue  |  3 +-
 4 files changed, 97 insertions(+), 16 deletions(-)

diff --git a/src/components/HorizontalResizer.vue b/src/components/HorizontalResizer.vue
index b46a9aac9..b5f6225fc 100644
--- a/src/components/HorizontalResizer.vue
+++ b/src/components/HorizontalResizer.vue
@@ -10,12 +10,14 @@
       :show="resizing"
       placement="left"
       class="
-        p-1
-        bg-white
+        px-1
+        py-0.5
         border
-        rounded
+        rounded-md
         shadow
-        text-sm text-center text-gray-800
+        text-sm text-center
+        bg-gray-900
+        text-gray-100
       "
       style="min-width: 2rem"
     >
diff --git a/src/pages/Desk.vue b/src/pages/Desk.vue
index e1592a3e6..a266d8007 100644
--- a/src/pages/Desk.vue
+++ b/src/pages/Desk.vue
@@ -46,6 +46,7 @@ import { toggleSidebar } from 'src/utils/ui';
         rtl-rotate-180
         p-1
         m-4
+        opacity-0
         hover:opacity-100 hover:shadow-md
       "
       @click="() => toggleSidebar()"
diff --git a/src/pages/TemplateBuilder/TemplateBuilder.vue b/src/pages/TemplateBuilder/TemplateBuilder.vue
index 11a86e882..c37e10532 100644
--- a/src/pages/TemplateBuilder/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilder.vue
@@ -21,24 +21,85 @@
     <!-- Template Builder Body -->
     <div
       v-if="doc"
-      class="w-full overflowauto bg-gray-25 grid"
+      class="w-full bg-gray-25 grid"
       :style="templateBuilderBodyStyles"
     >
       <!-- Template Display Area -->
-      <div class="overflow-auto custom-scroll p-4">
+      <div
+        class="overflow-auto custom-scroll flex flex-col"
+        style="height: calc(100vh - var(--h-row-largest) - 1px)"
+      >
         <!-- Display Hints -->
-        <div v-if="helperMessage" class="text-sm text-gray-700">
+        <p v-if="helperMessage" class="text-sm text-gray-700 p-4">
           {{ helperMessage }}
+        </p>
+
+        <div
+          v-else-if="doc.template && values"
+          class="p-4 overflow-auto custom-scroll"
+        >
+          <!-- Template Container -->
+          <PrintContainer
+            ref="printContainer"
+            :template="doc.template"
+            :values="values"
+            :scale="scale"
+          />
         </div>
+        <div
+          class="
+            w-full
+            sticky
+            bottom-0
+            flex
+            bg-white
+            border-t
+            mt-auto
+            flex-shrink-0
+          "
+        >
+          <FormControl
+            :title="fields.type.label"
+            class="w-40 border-r flex-shrink-0"
+            :df="fields.type"
+            :border="false"
+            :value="doc.get('type')"
+            @change="async (value) => await setType(value)"
+          />
 
-        <!-- Template Container -->
-        <PrintContainer
-          ref="printContainer"
-          v-if="doc.template && values"
-          :template="doc.template"
-          :values="values"
-          :scale="scale"
-        />
+          <FormControl
+            v-if="doc.type"
+            :title="displayDocField.label"
+            class="w-40 border-r flex-shrink-0"
+            :df="displayDocField"
+            :border="false"
+            :value="displayDoc?.name"
+            @change="(value: string) => setDisplayDoc(value)"
+          />
+
+          <div
+            class="flex ml-auto gap-2 px-2 w-36 justify-between flex-shrink-0"
+          >
+            <p class="text-sm text-gray-600 my-auto">{{ t`Display Scale` }}</p>
+            <input
+              type="number"
+              class="
+                my-auto
+                w-10
+                text-base text-end
+                bg-transparent
+                text-gray-800
+                focus:text-gray-900
+              "
+              :value="scale"
+              @change="setScale"
+              @input="setScale"
+              min="0.1"
+              max="10"
+              step="0.05"
+            />
+          </div>
+        </div>
       </div>
 
       <!-- Input Panel Resizer -->
@@ -199,6 +260,14 @@ export default defineComponent({
     this.wasSidebarShown = showSidebar.value;
   },
   methods: {
+    setScale({ target }: Event) {
+      if (!(target instanceof HTMLInputElement)) {
+        return;
+      }
+
+      const scale = Number(target.value);
+      this.scale = Math.max(Math.min(scale, 10), 0.15);
+    },
     toggleEditMode() {
       this.editMode = !this.editMode;
 
@@ -268,6 +337,14 @@ export default defineComponent({
         this.name
       )) as PrintTemplate;
     },
+    async setType(value: unknown) {
+      if (typeof value !== 'string') {
+        return;
+      }
+
+      await this.doc?.set('type', value);
+      await this.setDisplayInitialDoc();
+    },
     async setDisplayDoc(value: string) {
       if (!value) {
         delete this.hints;
diff --git a/src/pages/TemplateBuilder/TemplateEditor.vue b/src/pages/TemplateBuilder/TemplateEditor.vue
index fd989e2a6..25ff5317f 100644
--- a/src/pages/TemplateBuilder/TemplateEditor.vue
+++ b/src/pages/TemplateBuilder/TemplateEditor.vue
@@ -215,7 +215,8 @@ function getCompletionOption(
 }
 
 .cm-gutters {
-  border: none !important;
+  border: none black !important;
+  border-right: 1px solid theme('colors.gray.200') !important;
 }
 
 .cm-activeLine,

From bac00b5a3600496a12fe58d0b1bc4da3b52a6212 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Thu, 9 Mar 2023 20:49:45 +0530
Subject: [PATCH 24/33] fix(ui/ux): continuous drag for template pane - remove
 border radius on

---
 src/components/Controls/AutoComplete.vue      |  1 +
 src/components/Controls/Base.vue              |  4 +-
 src/components/HorizontalResizer.vue          | 52 ++++++-------------
 src/pages/TemplateBuilder/TemplateBuilder.vue | 28 +++++++---
 4 files changed, 39 insertions(+), 46 deletions(-)

diff --git a/src/components/Controls/AutoComplete.vue b/src/components/Controls/AutoComplete.vue
index 3c6ad2a0f..8b7ca3039 100644
--- a/src/components/Controls/AutoComplete.vue
+++ b/src/components/Controls/AutoComplete.vue
@@ -13,6 +13,7 @@
       </div>
       <div
         class="flex items-center justify-between pe-2 rounded"
+        :style="containerStyles"
         :class="containerClasses"
       >
         <input
diff --git a/src/components/Controls/Base.vue b/src/components/Controls/Base.vue
index 0fc29198c..9bb751fdf 100644
--- a/src/components/Controls/Base.vue
+++ b/src/components/Controls/Base.vue
@@ -16,7 +16,7 @@
         :step="step"
         :max="df.maxvalue"
         :min="df.minvalue"
-        :style="inputStyles"
+        :style="containerStyles"
         @blur="(e) => !isReadOnly && triggerChange(e.target.value)"
         @focus="(e) => !isReadOnly && $emit('focus', e)"
         @input="(e) => !isReadOnly && $emit('input', e)"
@@ -42,7 +42,7 @@ export default {
     size: String,
     showLabel: Boolean,
     autofocus: Boolean,
-    inputStyles: { type: Object, default: () => ({}) },
+    containerStyles: { type: Object, default: () => ({}) },
     textRight: { type: [null, Boolean], default: null },
     readOnly: { type: [null, Boolean], default: null },
     required: { type: [null, Boolean], default: null },
diff --git a/src/components/HorizontalResizer.vue b/src/components/HorizontalResizer.vue
index b5f6225fc..9674b5cd4 100644
--- a/src/components/HorizontalResizer.vue
+++ b/src/components/HorizontalResizer.vue
@@ -31,11 +31,16 @@ import MouseFollower from './MouseFollower.vue';
 
 export default defineComponent({
   emits: ['resize'],
-  props: { initialX: Number, minX: Number, maxX: Number },
+  props: {
+    initialX: { type: Number, required: true },
+    minX: Number,
+    maxX: Number,
+  },
   data() {
     return {
       x: 0,
       delta: 0,
+      xOnMouseDown: 0,
       resizing: false,
       listener: null,
     };
@@ -43,9 +48,9 @@ export default defineComponent({
   methods: {
     onMouseDown(e: MouseEvent) {
       e.preventDefault();
-      const { clientX } = e;
 
-      this.setX(clientX);
+      this.x = e.clientX;
+      this.xOnMouseDown = this.initialX;
       this.setResizing(true);
 
       document.addEventListener('mousemove', this.mouseMoveListener);
@@ -53,18 +58,17 @@ export default defineComponent({
     },
     mouseUpListener(e: MouseEvent) {
       e.preventDefault();
-      const { clientX } = e;
 
-      this.setX(clientX);
+      this.x = e.clientX;
       this.setResizing(false);
 
-      this.emitValue(this.x - clientX);
+      this.$emit('resize', this.value);
       this.removeListeners();
     },
     mouseMoveListener(e: MouseEvent) {
       e.preventDefault();
-      const { clientX } = e;
-      this.delta = this.x - clientX;
+      this.delta = this.x - e.clientX;
+      this.$emit('resize', this.value);
     },
     removeListeners() {
       document.removeEventListener('mousemove', this.mouseMoveListener);
@@ -80,36 +84,10 @@ export default defineComponent({
         document.body.style.cursor = '';
       }
     },
-    setX(x?: number): void {
-      if (typeof x === 'number') {
-        this.x = x;
-        return;
-      }
-      const hr = this.$refs.hr;
-      if (!(hr instanceof HTMLDivElement)) {
-        return;
-      }
-      this.x = hr.getBoundingClientRect().x;
-    },
-    emitValue(delta: number) {
-      if (typeof this.minDelta === 'number') {
-        delta = Math.max(delta, this.minDelta);
-      }
-
-      if (typeof this.maxDelta === 'number') {
-        delta = Math.min(delta, this.maxDelta);
-      }
-
-      this.$emit('resize', delta, this.value);
-    },
   },
   computed: {
     value() {
-      if (typeof this.initialX !== 'number') {
-        return this.delta;
-      }
-
-      let value = this.delta + this.initialX;
+      let value = this.delta + this.xOnMouseDown;
       if (typeof this.minX === 'number') {
         value = Math.max(this.minX, value);
       }
@@ -121,14 +99,14 @@ export default defineComponent({
       return value;
     },
     minDelta() {
-      if (typeof this.minX !== 'number' || typeof this.initialX !== 'number') {
+      if (typeof this.minX !== 'number') {
         return null;
       }
 
       return this.initialX - this.minX;
     },
     maxDelta() {
-      if (typeof this.maxX !== 'number' || typeof this.initialX !== 'number') {
+      if (typeof this.maxX !== 'number') {
         return null;
       }
 
diff --git a/src/pages/TemplateBuilder/TemplateBuilder.vue b/src/pages/TemplateBuilder/TemplateBuilder.vue
index c37e10532..8f5ff3ecd 100644
--- a/src/pages/TemplateBuilder/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilder.vue
@@ -34,11 +34,11 @@
           {{ helperMessage }}
         </p>
 
+        <!-- Template Container -->
         <div
           v-else-if="doc.template && values"
           class="p-4 overflow-auto custom-scroll"
         >
-          <!-- Template Container -->
           <PrintContainer
             ref="printContainer"
             :template="doc.template"
@@ -46,6 +46,8 @@
             :scale="scale"
           />
         </div>
+
+        <!-- Bottom Bar -->
         <div
           class="
             w-full
@@ -58,15 +60,18 @@
             flex-shrink-0
           "
         >
+          <!-- Entry Type -->
           <FormControl
             :title="fields.type.label"
             class="w-40 border-r flex-shrink-0"
             :df="fields.type"
             :border="false"
             :value="doc.get('type')"
+            :container-styles="{ 'border-radius': '0px' }"
             @change="async (value) => await setType(value)"
           />
 
+          <!-- Display Doc -->
           <FormControl
             v-if="doc.type"
             :title="displayDocField.label"
@@ -74,9 +79,11 @@
             :df="displayDocField"
             :border="false"
             :value="displayDoc?.name"
+            :container-styles="{ 'border-radius': '0px' }"
             @change="(value: string) => setDisplayDoc(value)"
           />
 
+          <!-- Display Scale -->
           <div
             class="flex ml-auto gap-2 px-2 w-36 justify-between flex-shrink-0"
           >
@@ -107,20 +114,21 @@
         class="z-20"
         :initial-x="panelWidth"
         :min-x="22 * 16"
-        @resize="(_: number, value: number) => panelWidth = value"
+        :max-x="maxWidth"
+        @resize="(x: number) => panelWidth = x"
       />
 
-      <!-- Input Panel -->
+      <!-- Template Panel -->
       <div
         class="border-l bg-white flex flex-col"
         style="height: calc(100vh - var(--h-row-largest) - 1px)"
       >
         <!-- Template Name -->
         <FormControl
-          class="w-full border-b z-10 flex-shrink-0"
+          class="w-full border-b flex-shrink-0"
           size="small"
-          :input-class="['font-semibold text-xl']"
-          :input-styles="{ 'border-radius': '0px', padding: '0.5rem' }"
+          :input-class="['font-semibold text-xl text-center']"
+          :container-styles="{ 'border-radius': '0px', padding: '0.5rem' }"
           :df="fields.name"
           :border="false"
           :value="doc.get('name')"
@@ -139,8 +147,9 @@
           />
         </div>
 
-        <!-- Value Key Hints -->
+        <!-- Value Key Hints Container -->
         <div class="border-t mt-auto flex-shrink-0" v-if="hints">
+          <!-- Value Key Toggle -->
           <div
             class="
               flex
@@ -160,6 +169,8 @@
               class="w-4 h-4 text-gray-600 resize-none"
             />
           </div>
+
+          <!-- Value Key Hints -->
           <div
             v-if="showHints"
             class="overflow-auto custom-scroll p-2 border-t"
@@ -365,6 +376,9 @@ export default defineComponent({
     },
   },
   computed: {
+    maxWidth() {
+      return window.innerWidth - 12 * 16 - 100;
+    },
     actions() {
       if (!this.doc) {
         return [];

From 0614f99ea1d0d50dfa19800ca8f78e4541f15971 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Thu, 9 Mar 2023 21:46:31 +0530
Subject: [PATCH 25/33] feat: add editor mode and apply changes shortcuts - fix
 save shortcuts (in CommonForm too) - update shortcuts helper list - add
 documentation link

---
 src/components/ShortcutsHelper.vue            | 21 ++++++
 src/pages/CommonForm/CommonForm.vue           |  4 +-
 src/pages/TemplateBuilder/TemplateBuilder.vue | 73 ++++++++++++++++---
 src/pages/TemplateBuilder/TemplateEditor.vue  | 28 +++----
 src/utils/misc.ts                             |  1 +
 5 files changed, 101 insertions(+), 26 deletions(-)

diff --git a/src/components/ShortcutsHelper.vue b/src/components/ShortcutsHelper.vue
index 0c8321e6a..a2aae4dff 100644
--- a/src/components/ShortcutsHelper.vue
+++ b/src/components/ShortcutsHelper.vue
@@ -152,9 +152,30 @@ export default defineComponent({
           },
         ],
       },
+      {
+        label: t`Template Builder`,
+        description: t`Applicable when Template Builder is open`,
+        collapsed: false,
+        shortcuts: [
+          {
+            shortcut: [this.ctrl, 'Enter'],
+            description: t`Apply and view changes made to the print template`,
+          },
+          {
+            shortcut: [this.ctrl, 'E'],
+            description: t`Toggle Edit Mode`,
+          },
+        ],
+      },
     ];
   },
   computed: {
+    ctrl() {
+      if (this.isMac) {
+        return 'control';
+      }
+      return 'Ctrl';
+    },
     pmod() {
       if (this.isMac) {
         return '⌘';
diff --git a/src/pages/CommonForm/CommonForm.vue b/src/pages/CommonForm/CommonForm.vue
index cbfb2434f..7e9389a34 100644
--- a/src/pages/CommonForm/CommonForm.vue
+++ b/src/pages/CommonForm/CommonForm.vue
@@ -181,7 +181,9 @@ export default defineComponent({
   },
   deactivated(): void {
     docsPathRef.value = '';
-    focusedDocsRef.add(this.docOrNull);
+    if (this.docOrNull) {
+      focusedDocsRef.delete(this.doc);
+    }
   },
   computed: {
     hasDoc(): boolean {
diff --git a/src/pages/TemplateBuilder/TemplateBuilder.vue b/src/pages/TemplateBuilder/TemplateBuilder.vue
index 8f5ff3ecd..c3f1124fa 100644
--- a/src/pages/TemplateBuilder/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilder.vue
@@ -139,11 +139,13 @@
         <!-- Template Editor -->
         <div class="min-h-0">
           <TemplateEditor
+            v-if="typeof doc.template === 'string' && hints"
+            ref="templateEditor"
             class="overflow-auto custom-scroll h-full"
-            v-if="typeof doc.template === 'string'"
-            v-model.lazy="doc.template"
+            :initial-value="doc.template"
             :disabled="!doc.isCustom"
-            :hints="hints ?? undefined"
+            :hints="hints"
+            @blur="(value: string) => setTemplate(value)"
           />
         </div>
 
@@ -184,6 +186,7 @@
   </div>
 </template>
 <script lang="ts">
+import { EditorView } from 'codemirror';
 import { Doc } from 'fyo/model/doc';
 import { PrintTemplate } from 'models/baseModels/PrintTemplate';
 import { ModelNameEnum } from 'models/types';
@@ -194,12 +197,13 @@ import DropdownWithActions from 'src/components/DropdownWithActions.vue';
 import HorizontalResizer from 'src/components/HorizontalResizer.vue';
 import PageHeader from 'src/components/PageHeader.vue';
 import { handleErrorWithDialog } from 'src/errorHandling';
+import { docsPathMap } from 'src/utils/misc';
 import {
   baseTemplate,
   getPrintTemplatePropHints,
   getPrintTemplatePropValues,
 } from 'src/utils/printTemplates';
-import { showSidebar } from 'src/utils/refs';
+import { docsPathRef, focusedDocsRef, showSidebar } from 'src/utils/refs';
 import { PrintValues } from 'src/utils/types';
 import {
   getActionsForDoc,
@@ -207,6 +211,7 @@ import {
   openSettings,
   showToast,
 } from 'src/utils/ui';
+import { Shortcuts } from 'src/utils/vueUtils';
 import { getMapFromList } from 'utils/index';
 import { computed, defineComponent } from 'vue';
 import PrintContainer from './PrintContainer.vue';
@@ -225,6 +230,7 @@ export default defineComponent({
     FormControl,
     TemplateBuilderHint,
   },
+  inject: { shortcutManager: { from: 'shortcuts' } },
   provide() {
     return { doc: computed(() => this.doc) };
   },
@@ -234,10 +240,8 @@ export default defineComponent({
       editMode: false,
       showHints: false,
       wasSidebarShown: true,
-      showEditor: false,
       hints: undefined,
       values: null,
-      helpersCollapsed: true,
       displayDoc: null,
       scale: 0.65,
       panelWidth: 22 /** rem */ * 16 /** px */,
@@ -248,7 +252,6 @@ export default defineComponent({
       hints?: Record<string, unknown>;
       values: null | PrintValues;
       doc: PrintTemplate | null;
-      showEditor: boolean;
       displayDoc: PrintTemplate | null;
       scale: number;
       panelWidth: number;
@@ -256,6 +259,7 @@ export default defineComponent({
   },
   async mounted() {
     await this.setDoc();
+    focusedDocsRef.add(this.doc);
 
     if (this.doc?.template == null) {
       await this.doc?.set('template', baseTemplate);
@@ -270,7 +274,39 @@ export default defineComponent({
 
     this.wasSidebarShown = showSidebar.value;
   },
+  activated(): void {
+    docsPathRef.value = docsPathMap.PrintTemplate ?? '';
+    this.shortcuts.ctrl.set(['Enter'], this.setTemplate);
+    this.shortcuts.ctrl.set(['KeyE'], this.toggleEditMode);
+  },
+  deactivated(): void {
+    docsPathRef.value = '';
+    if (this.doc instanceof Doc) {
+      focusedDocsRef.delete(this.doc);
+    }
+    this.shortcuts.ctrl.delete(['Enter']);
+    this.shortcuts.ctrl.delete(['KeyE']);
+  },
   methods: {
+    getTemplateEditorState() {
+      const fallback = this.doc?.template ?? '';
+
+      // @ts-ignore
+      const { view } = this.$refs.templateEditor ?? {};
+      if (!(view instanceof EditorView)) {
+        return fallback;
+      }
+
+      return view.state.doc.toString();
+    },
+    async setTemplate(value?: string) {
+      if (!this.doc?.isCustom) {
+        return;
+      }
+
+      value ??= this.getTemplateEditorState();
+      await this.doc?.set('template', value);
+    },
     setScale({ target }: Event) {
       if (!(target instanceof HTMLInputElement)) {
         return;
@@ -279,7 +315,16 @@ export default defineComponent({
       const scale = Number(target.value);
       this.scale = Math.max(Math.min(scale, 10), 0.15);
     },
-    toggleEditMode() {
+    async toggleEditMode() {
+      if (!this.doc?.isCustom) {
+        return;
+      }
+
+      let message = this.t`Please set a Display Doc`;
+      if (!this.displayDoc) {
+        return showToast({ type: 'warning', message, duration: 1000 });
+      }
+
       this.editMode = !this.editMode;
 
       if (this.editMode) {
@@ -288,7 +333,7 @@ export default defineComponent({
         showSidebar.value = this.wasSidebarShown;
       }
 
-      let message = this.t`Edit Mode Enabled`;
+      message = this.t`Edit Mode Enabled`;
       if (!this.editMode) {
         message = this.t`Edit Mode Disabled`;
       }
@@ -376,6 +421,16 @@ export default defineComponent({
     },
   },
   computed: {
+    shortcuts(): Shortcuts {
+      // @ts-ignore
+      const shortcutManager = this.shortcutManager;
+      if (shortcutManager instanceof Shortcuts) {
+        return shortcutManager;
+      }
+
+      // no-op (hopefully)
+      throw Error('Shortcuts Not Found');
+    },
     maxWidth() {
       return window.innerWidth - 12 * 16 - 100;
     },
diff --git a/src/pages/TemplateBuilder/TemplateEditor.vue b/src/pages/TemplateBuilder/TemplateEditor.vue
index 25ff5317f..3eb877da9 100644
--- a/src/pages/TemplateBuilder/TemplateEditor.vue
+++ b/src/pages/TemplateBuilder/TemplateEditor.vue
@@ -18,16 +18,14 @@ import { defineComponent, markRaw } from 'vue';
 
 export default defineComponent({
   data() {
-    return { state: null, view: null, compartments: {}, changed: false } as {
+    return { state: null, view: null, compartments: {} } as {
       state: EditorState | null;
       view: EditorView | null;
       compartments: Record<string, Compartment>;
-      changed: boolean;
     };
   },
   props: {
-    modelModifiers: { type: Object, default: () => ({}) },
-    modelValue: { type: String, required: true },
+    initialValue: { type: String, required: true },
     disabled: { type: Boolean, default: false },
     hints: { type: Object },
   },
@@ -36,11 +34,16 @@ export default defineComponent({
       this.setDisabled(value);
     },
   },
-  emits: ['update:modelValue'],
+  emits: ['input', 'blur'],
   mounted() {
     if (!this.view) {
       this.init();
     }
+
+    if (this.fyo.store.isDevelopment) {
+      // @ts-ignore
+      window.te = this;
+    }
   },
   methods: {
     init() {
@@ -61,7 +64,7 @@ export default defineComponent({
       const completions = getCompletionsFromHints(this.hints ?? {});
 
       const view = new EditorView({
-        doc: this.modelValue,
+        doc: this.initialValue,
         extensions: [
           EditorView.updateListener.of(this.updateListener),
           readOnly.of(EditorState.readOnly.of(this.disabled)),
@@ -80,19 +83,12 @@ export default defineComponent({
     },
     updateListener(update: ViewUpdate) {
       if (update.docChanged) {
-        this.changed = true;
+        this.$emit('input', this.view?.state.doc.toString() ?? '');
       }
 
-      if (this.modelModifiers.lazy && !update.focusChanged) {
-        return;
+      if (update.focusChanged && !this.view?.hasFocus) {
+        this.$emit('blur', this.view?.state.doc.toString() ?? '');
       }
-
-      if (!this.changed) {
-        return;
-      }
-
-      this.$emit('update:modelValue', this.view?.state.doc.toString() ?? '');
-      this.changed = false;
     },
     setDisabled(value: boolean) {
       const { readOnly, editable } = this.compartments;
diff --git a/src/utils/misc.ts b/src/utils/misc.ts
index 251e0b7d3..0b3c6e103 100644
--- a/src/utils/misc.ts
+++ b/src/utils/misc.ts
@@ -115,6 +115,7 @@ export const docsPathMap: Record<string, string | undefined> = {
   [ModelNameEnum.Party]: 'entries/party',
   [ModelNameEnum.Item]: 'entries/items',
   [ModelNameEnum.Tax]: 'entries/taxes',
+  [ModelNameEnum.PrintTemplate]: 'miscellaneous/print-templates',
 
   // Miscellaneous
   Search: 'miscellaneous/search',

From 593f5f0db7c9e0beec39059f02ab67859b03971f Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Fri, 10 Mar 2023 13:20:21 +0530
Subject: [PATCH 26/33] incr: add display scale shortcuts - focus and clear
 name if doc is new

---
 src/components/ShortcutsHelper.vue            |  8 ++++++
 src/pages/CommonForm/CommonFormSection.vue    | 22 ++--------------
 src/pages/TemplateBuilder/TemplateBuilder.vue | 25 +++++++++++++------
 src/utils/ui.ts                               | 20 +++++++++++++++
 4 files changed, 47 insertions(+), 28 deletions(-)

diff --git a/src/components/ShortcutsHelper.vue b/src/components/ShortcutsHelper.vue
index a2aae4dff..5f79cb4f3 100644
--- a/src/components/ShortcutsHelper.vue
+++ b/src/components/ShortcutsHelper.vue
@@ -165,6 +165,14 @@ export default defineComponent({
             shortcut: [this.ctrl, 'E'],
             description: t`Toggle Edit Mode`,
           },
+          {
+            shortcut: [this.ctrl, '+'],
+            description: t`Increase print template display scale`,
+          },
+          {
+            shortcut: [this.ctrl, '-'],
+            description: t`Decrease print template display scale`,
+          },
         ],
       },
     ];
diff --git a/src/pages/CommonForm/CommonFormSection.vue b/src/pages/CommonForm/CommonFormSection.vue
index 8b7a9cd46..bff147c03 100644
--- a/src/pages/CommonForm/CommonFormSection.vue
+++ b/src/pages/CommonForm/CommonFormSection.vue
@@ -44,6 +44,7 @@ import { DocValue } from 'fyo/core/types';
 import { Doc } from 'fyo/model/doc';
 import { Field } from 'schemas/types';
 import FormControl from 'src/components/Controls/FormControl.vue';
+import { clearAndFocusFormControl } from 'src/utils/ui';
 import { defineComponent, PropType } from 'vue';
 
 export default defineComponent({
@@ -61,26 +62,7 @@ export default defineComponent({
     };
   },
   mounted() {
-    this.focusOnNameField();
-  },
-  methods: {
-    focusOnNameField() {
-      const naming = this.fyo.schemaMap[this.doc.schemaName]?.naming;
-      if (naming !== 'manual' || this.doc.inserted) {
-        return;
-      }
-
-      const nameField = (
-        this.$refs.nameField as { focus: Function; clear: Function }[]
-      )?.[0];
-
-      if (!nameField) {
-        return;
-      }
-
-      nameField.clear();
-      nameField.focus();
-    },
+    clearAndFocusFormControl(this.doc, this.$refs.nameField);
   },
   components: { FormControl },
 });
diff --git a/src/pages/TemplateBuilder/TemplateBuilder.vue b/src/pages/TemplateBuilder/TemplateBuilder.vue
index c3f1124fa..5bd502c96 100644
--- a/src/pages/TemplateBuilder/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilder.vue
@@ -103,7 +103,7 @@
               @input="setScale"
               min="0.1"
               max="10"
-              step="0.05"
+              step="0.1"
             />
           </div>
         </div>
@@ -125,13 +125,14 @@
       >
         <!-- Template Name -->
         <FormControl
+          ref="nameField"
           class="w-full border-b flex-shrink-0"
           size="small"
           :input-class="['font-semibold text-xl text-center']"
           :container-styles="{ 'border-radius': '0px', padding: '0.5rem' }"
           :df="fields.name"
           :border="false"
-          :value="doc.get('name')"
+          :value="doc.name"
           :read-only="doc.inserted"
           @change="async (value) => await doc?.set('name', value)"
         />
@@ -206,6 +207,7 @@ import {
 import { docsPathRef, focusedDocsRef, showSidebar } from 'src/utils/refs';
 import { PrintValues } from 'src/utils/types';
 import {
+  clearAndFocusFormControl,
   getActionsForDoc,
   getDocFromNameIfExistsElseNew,
   openSettings,
@@ -243,7 +245,7 @@ export default defineComponent({
       hints: undefined,
       values: null,
       displayDoc: null,
-      scale: 0.65,
+      scale: 0.6,
       panelWidth: 22 /** rem */ * 16 /** px */,
     } as {
       editMode: boolean;
@@ -259,6 +261,7 @@ export default defineComponent({
   },
   async mounted() {
     await this.setDoc();
+    clearAndFocusFormControl(this.doc as Doc, this.$refs.nameField);
     focusedDocsRef.add(this.doc);
 
     if (this.doc?.template == null) {
@@ -278,6 +281,8 @@ export default defineComponent({
     docsPathRef.value = docsPathMap.PrintTemplate ?? '';
     this.shortcuts.ctrl.set(['Enter'], this.setTemplate);
     this.shortcuts.ctrl.set(['KeyE'], this.toggleEditMode);
+    this.shortcuts.ctrl.set(['Equal'], () => this.setScale(this.scale + 0.1));
+    this.shortcuts.ctrl.set(['Minus'], () => this.setScale(this.scale - 0.1));
   },
   deactivated(): void {
     docsPathRef.value = '';
@@ -286,6 +291,8 @@ export default defineComponent({
     }
     this.shortcuts.ctrl.delete(['Enter']);
     this.shortcuts.ctrl.delete(['KeyE']);
+    this.shortcuts.ctrl.delete(['Equal']);
+    this.shortcuts.ctrl.delete(['Minus']);
   },
   methods: {
     getTemplateEditorState() {
@@ -307,13 +314,15 @@ export default defineComponent({
       value ??= this.getTemplateEditorState();
       await this.doc?.set('template', value);
     },
-    setScale({ target }: Event) {
-      if (!(target instanceof HTMLInputElement)) {
-        return;
+    setScale(e: Event | number) {
+      let value = this.scale;
+      if (typeof e === 'number') {
+        value = Number(e.toFixed(2));
+      } else if (e instanceof Event && e.target instanceof HTMLInputElement) {
+        value = Number(e.target.value);
       }
 
-      const scale = Number(target.value);
-      this.scale = Math.max(Math.min(scale, 10), 0.15);
+      this.scale = Math.max(Math.min(value, 10), 0.15);
     },
     async toggleEditMode() {
       if (!this.doc?.isCustom) {
diff --git a/src/utils/ui.ts b/src/utils/ui.ts
index 25feb6c05..8fbe6f1f6 100644
--- a/src/utils/ui.ts
+++ b/src/utils/ui.ts
@@ -476,3 +476,23 @@ export function toggleSidebar(value?: boolean) {
 
   showSidebar.value = value;
 }
+
+export function clearAndFocusFormControl(doc: Doc, ref: any) {
+  const naming = doc.fyo.schemaMap[doc.schemaName]?.naming;
+  if (naming !== 'manual' || doc.inserted) {
+    return;
+  }
+
+  if (Array.isArray(ref) && ref.length > 0) {
+    ref = ref[0];
+  }
+
+  doc.name = '';
+  if (typeof ref?.clear === 'function') {
+    ref.clear();
+  }
+
+  if (typeof ref?.focus === 'function') {
+    ref.focus();
+  }
+}

From f7f344435233bb78c88bfc2eb087bd26c32ef3b3 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Fri, 10 Mar 2023 17:24:14 +0530
Subject: [PATCH 27/33] incr: complete Edit Mode - move name field to the
 placeholder

---
 src/components/Controls/FormControl.vue       |   3 +
 src/pages/CommonForm/CommonFormSection.vue    |   4 +-
 src/pages/TemplateBuilder/TemplateBuilder.vue | 110 +++++++++++++-----
 src/utils/ui.ts                               |  14 ++-
 4 files changed, 95 insertions(+), 36 deletions(-)

diff --git a/src/components/Controls/FormControl.vue b/src/components/Controls/FormControl.vue
index 323430ca4..3740c9b46 100644
--- a/src/components/Controls/FormControl.vue
+++ b/src/components/Controls/FormControl.vue
@@ -54,6 +54,9 @@ export default {
         input.value = '';
       }
     },
+    select() {
+      this.$refs.control.$refs?.input?.select()
+    },
     focus() {
       this.$refs.control.focus();
     },
diff --git a/src/pages/CommonForm/CommonFormSection.vue b/src/pages/CommonForm/CommonFormSection.vue
index bff147c03..a3385267d 100644
--- a/src/pages/CommonForm/CommonFormSection.vue
+++ b/src/pages/CommonForm/CommonFormSection.vue
@@ -44,7 +44,7 @@ import { DocValue } from 'fyo/core/types';
 import { Doc } from 'fyo/model/doc';
 import { Field } from 'schemas/types';
 import FormControl from 'src/components/Controls/FormControl.vue';
-import { clearAndFocusFormControl } from 'src/utils/ui';
+import { focusOrSelectFormControl } from 'src/utils/ui';
 import { defineComponent, PropType } from 'vue';
 
 export default defineComponent({
@@ -62,7 +62,7 @@ export default defineComponent({
     };
   },
   mounted() {
-    clearAndFocusFormControl(this.doc, this.$refs.nameField);
+    focusOrSelectFormControl(this.doc, this.$refs.nameField);
   },
   components: { FormControl },
 });
diff --git a/src/pages/TemplateBuilder/TemplateBuilder.vue b/src/pages/TemplateBuilder/TemplateBuilder.vue
index 5bd502c96..0407df9b6 100644
--- a/src/pages/TemplateBuilder/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilder.vue
@@ -1,6 +1,19 @@
 <template>
   <div>
-    <PageHeader :title="t`Template Builder`">
+    <PageHeader :title="doc && doc.inserted ? doc.name : ''">
+      <!-- Template Name -->
+      <template #left v-if="doc && !doc.inserted">
+        <FormControl
+          ref="nameField"
+          class="w-60 flex-shrink-0"
+          size="small"
+          :input-class="['font-semibold text-xl']"
+          :df="fields.name"
+          :border="true"
+          :value="doc!.name"
+          @change="async (value) => await doc?.set('name', value)"
+        />
+      </template>
       <Button v-if="displayDoc && doc?.template" @click="savePDF">
         {{ t`Save as PDF` }}
       </Button>
@@ -123,20 +136,6 @@
         class="border-l bg-white flex flex-col"
         style="height: calc(100vh - var(--h-row-largest) - 1px)"
       >
-        <!-- Template Name -->
-        <FormControl
-          ref="nameField"
-          class="w-full border-b flex-shrink-0"
-          size="small"
-          :input-class="['font-semibold text-xl text-center']"
-          :container-styles="{ 'border-radius': '0px', padding: '0.5rem' }"
-          :df="fields.name"
-          :border="false"
-          :value="doc.name"
-          :read-only="doc.inserted"
-          @change="async (value) => await doc?.set('name', value)"
-        />
-
         <!-- Template Editor -->
         <div class="min-h-0">
           <TemplateEditor
@@ -207,7 +206,7 @@ import {
 import { docsPathRef, focusedDocsRef, showSidebar } from 'src/utils/refs';
 import { PrintValues } from 'src/utils/types';
 import {
-  clearAndFocusFormControl,
+  focusOrSelectFormControl,
   getActionsForDoc,
   getDocFromNameIfExistsElseNew,
   openSettings,
@@ -241,27 +240,35 @@ export default defineComponent({
       doc: null,
       editMode: false,
       showHints: false,
-      wasSidebarShown: true,
       hints: undefined,
       values: null,
       displayDoc: null,
       scale: 0.6,
       panelWidth: 22 /** rem */ * 16 /** px */,
+      preEditMode: {
+        scale: 0.6,
+        showSidebar: true,
+        panelWidth: 22 * 16,
+      },
     } as {
       editMode: boolean;
       showHints: boolean;
-      wasSidebarShown: boolean;
       hints?: Record<string, unknown>;
       values: null | PrintValues;
       doc: PrintTemplate | null;
       displayDoc: PrintTemplate | null;
       scale: number;
       panelWidth: number;
+      preEditMode: {
+        scale: number;
+        showSidebar: boolean;
+        panelWidth: number;
+      };
     };
   },
   async mounted() {
     await this.setDoc();
-    clearAndFocusFormControl(this.doc as Doc, this.$refs.nameField);
+    focusOrSelectFormControl(this.doc as Doc, this.$refs.nameField, false);
     focusedDocsRef.add(this.doc);
 
     if (this.doc?.template == null) {
@@ -274,8 +281,6 @@ export default defineComponent({
       // @ts-ignore
       window.tb = this;
     }
-
-    this.wasSidebarShown = showSidebar.value;
   },
   activated(): void {
     docsPathRef.value = docsPathMap.PrintTemplate ?? '';
@@ -298,13 +303,11 @@ export default defineComponent({
     getTemplateEditorState() {
       const fallback = this.doc?.template ?? '';
 
-      // @ts-ignore
-      const { view } = this.$refs.templateEditor ?? {};
-      if (!(view instanceof EditorView)) {
+      if (!this.view) {
         return fallback;
       }
 
-      return view.state.doc.toString();
+      return this.view.state.doc.toString();
     },
     async setTemplate(value?: string) {
       if (!this.doc?.isCustom) {
@@ -337,17 +340,50 @@ export default defineComponent({
       this.editMode = !this.editMode;
 
       if (this.editMode) {
-        showSidebar.value = false;
-      } else {
-        showSidebar.value = this.wasSidebarShown;
+        return this.enableEditMode();
       }
 
-      message = this.t`Edit Mode Enabled`;
-      if (!this.editMode) {
-        message = this.t`Edit Mode Disabled`;
+      this.disableEditMode();
+    },
+    enableEditMode() {
+      this.preEditMode.showSidebar = showSidebar.value;
+      this.preEditMode.panelWidth = this.panelWidth;
+      this.preEditMode.scale = this.scale;
+
+      this.panelWidth = Math.max(window.innerWidth / 2, this.panelWidth);
+      showSidebar.value = false;
+      this.scale = this.getEditModeScale();
+      this.view?.focus();
+      showToast({
+        type: 'info',
+        message: this.t`Edit Mode enabled`,
+        duration: 1000,
+      });
+    },
+    disableEditMode() {
+      showSidebar.value = this.preEditMode.showSidebar;
+      this.panelWidth = this.preEditMode.panelWidth;
+      this.scale = this.preEditMode.scale;
+
+      showToast({
+        type: 'info',
+        message: this.t`Edit Mode disabled`,
+        duration: 1000,
+      });
+    },
+    getEditModeScale(): number {
+      // @ts-ignore
+      const div = this.$refs.printContainer.$el;
+      if (!(div instanceof HTMLDivElement)) {
+        return this.scale;
       }
 
-      showToast({ type: 'info', message, duration: 1000 });
+      const padding = 16 * 2 /** p-4 */ + 16 * 0.6; /** w-scrollbar */
+      const targetWidth = window.innerWidth / 2 - padding;
+      const currentWidth = div.getBoundingClientRect().width;
+      const targetScale = (targetWidth * this.scale) / currentWidth;
+
+      return Number(targetScale.toFixed(2));
     },
     async savePDF() {
       const printContainer = this.$refs.printContainer as {
@@ -430,6 +466,16 @@ export default defineComponent({
     },
   },
   computed: {
+    view(): EditorView | null {
+      // @ts-ignore
+      const { view } = this.$refs.templateEditor ?? {};
+      if (view instanceof EditorView) {
+        return view;
+      }
+
+      return null;
+    },
+
     shortcuts(): Shortcuts {
       // @ts-ignore
       const shortcutManager = this.shortcutManager;
diff --git a/src/utils/ui.ts b/src/utils/ui.ts
index 8fbe6f1f6..671bbda2e 100644
--- a/src/utils/ui.ts
+++ b/src/utils/ui.ts
@@ -477,7 +477,11 @@ export function toggleSidebar(value?: boolean) {
   showSidebar.value = value;
 }
 
-export function clearAndFocusFormControl(doc: Doc, ref: any) {
+export function focusOrSelectFormControl(
+  doc: Doc,
+  ref: any,
+  clear: boolean = true
+) {
   const naming = doc.fyo.schemaMap[doc.schemaName]?.naming;
   if (naming !== 'manual' || doc.inserted) {
     return;
@@ -487,7 +491,11 @@ export function clearAndFocusFormControl(doc: Doc, ref: any) {
     ref = ref[0];
   }
 
-  doc.name = '';
+  if (!clear && typeof ref?.select === 'function') {
+    ref.select();
+    return;
+  }
+
   if (typeof ref?.clear === 'function') {
     ref.clear();
   }
@@ -495,4 +503,6 @@ export function clearAndFocusFormControl(doc: Doc, ref: any) {
   if (typeof ref?.focus === 'function') {
     ref.focus();
   }
+
+  doc.name = '';
 }

From f0611085651fedb076574ca42afef4bd0198f5eb Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Sat, 11 Mar 2023 10:31:40 +0530
Subject: [PATCH 28/33] fix(ui): transition for hints - remove fix scrollbar
 jump on edit toggle - remove toggle edit toast - (unrelated) add formula for
 root type

---
 models/baseModels/Account/Account.ts          | 18 +++++++
 src/pages/TemplateBuilder/TemplateBuilder.vue | 49 +++++++++++--------
 2 files changed, 47 insertions(+), 20 deletions(-)

diff --git a/models/baseModels/Account/Account.ts b/models/baseModels/Account/Account.ts
index 184a66622..55ebfe16a 100644
--- a/models/baseModels/Account/Account.ts
+++ b/models/baseModels/Account/Account.ts
@@ -7,7 +7,9 @@ import {
   RequiredMap,
   TreeViewSettings,
   ReadOnlyMap,
+  FormulaMap,
 } from 'fyo/model/types';
+import { ModelNameEnum } from 'models/types';
 import { QueryFilter } from 'utils/db/types';
 import { AccountRootType, AccountRootTypeEnum, AccountType } from './types';
 
@@ -76,6 +78,22 @@ export class Account extends Doc {
     };
   }
 
+  formulas: FormulaMap = {
+    rootType: {
+      formula: async () => {
+        if (!this.parentAccount) {
+          return;
+        }
+
+        return await this.fyo.getValue(
+          ModelNameEnum.Account,
+          this.parentAccount,
+          'rootType'
+        );
+      },
+    },
+  };
+
   static filters: FiltersMap = {
     parentAccount: (doc: Doc) => {
       const filter: QueryFilter = {
diff --git a/src/pages/TemplateBuilder/TemplateBuilder.vue b/src/pages/TemplateBuilder/TemplateBuilder.vue
index 0407df9b6..24dfde4f8 100644
--- a/src/pages/TemplateBuilder/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilder.vue
@@ -34,12 +34,12 @@
     <!-- Template Builder Body -->
     <div
       v-if="doc"
-      class="w-full bg-gray-25 grid"
+      class="w-full bg-gray-50 grid"
       :style="templateBuilderBodyStyles"
     >
       <!-- Template Display Area -->
       <div
-        class="overflow-auto custom-scroll flex flex-col"
+        class="overflow-auto no-scrollbar flex flex-col"
         style="height: calc(100vh - var(--h-row-largest) - 1px)"
       >
         <!-- Display Hints -->
@@ -173,13 +173,15 @@
           </div>
 
           <!-- Value Key Hints -->
-          <div
-            v-if="showHints"
-            class="overflow-auto custom-scroll p-2 border-t"
-            style="max-height: 30vh"
-          >
-            <TemplateBuilderHint :hints="hints" />
-          </div>
+          <Transition name="hints">
+            <div
+              v-if="showHints"
+              class="overflow-auto custom-scroll p-2 border-t"
+              style="max-height: 30vh"
+            >
+              <TemplateBuilderHint :hints="hints" />
+            </div>
+          </Transition>
         </div>
       </div>
     </div>
@@ -354,22 +356,11 @@ export default defineComponent({
       showSidebar.value = false;
       this.scale = this.getEditModeScale();
       this.view?.focus();
-      showToast({
-        type: 'info',
-        message: this.t`Edit Mode enabled`,
-        duration: 1000,
-      });
     },
     disableEditMode() {
       showSidebar.value = this.preEditMode.showSidebar;
       this.panelWidth = this.preEditMode.panelWidth;
       this.scale = this.preEditMode.scale;
-
-      showToast({
-        type: 'info',
-        message: this.t`Edit Mode disabled`,
-        duration: 1000,
-      });
     },
     getEditModeScale(): number {
       // @ts-ignore
@@ -550,3 +541,21 @@ export default defineComponent({
   },
 });
 </script>
+
+<style scoped>
+.hints-enter-from,
+.hints-leave-to {
+  opacity: 0;
+  height: 0px;
+}
+.hints-enter-to,
+.hints-leave-from {
+  opacity: 1;
+  height: 30vh;
+}
+
+.hints-enter-active,
+.hints-leave-active {
+  transition: all 150ms ease-out;
+}
+</style>

From 8f84f2677c87d794f1057f42df226c12639b77bd Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Mon, 13 Mar 2023 12:36:56 +0530
Subject: [PATCH 29/33] incr: add template select and save menu items - add
 shortcut for view hints, show shortcut to apply changes - update shortcut
 helper ui

---
 reports/GoodsAndServiceTax/gstExporter.ts     |   2 +-
 reports/commonExporter.ts                     |  11 +-
 src/components/ShortcutKeys.vue               |  39 ++++++
 src/components/ShortcutsHelper.vue            | 108 ++++-------------
 src/pages/ImportWizard.vue                    |  23 +---
 src/pages/TemplateBuilder/TemplateBuilder.vue | 113 +++++++++++++++++-
 src/utils/ui.ts                               |  65 ++++++++++
 7 files changed, 248 insertions(+), 113 deletions(-)
 create mode 100644 src/components/ShortcutKeys.vue

diff --git a/reports/GoodsAndServiceTax/gstExporter.ts b/reports/GoodsAndServiceTax/gstExporter.ts
index 01849fdd7..f0d55f552 100644
--- a/reports/GoodsAndServiceTax/gstExporter.ts
+++ b/reports/GoodsAndServiceTax/gstExporter.ts
@@ -162,7 +162,7 @@ async function exportReport(extention: ExportExtention, report: BaseGSTR) {
     return;
   }
 
-  await saveExportData(data, filePath, report.fyo);
+  await saveExportData(data, filePath);
   report.fyo.telemetry.log(Verb.Exported, report.reportName, { extention });
 }
 
diff --git a/reports/commonExporter.ts b/reports/commonExporter.ts
index e8001e54b..d4cdcdc5e 100644
--- a/reports/commonExporter.ts
+++ b/reports/commonExporter.ts
@@ -52,7 +52,7 @@ async function exportReport(extention: ExportExtention, report: Report) {
     return;
   }
 
-  await saveExportData(data, filePath, report.fyo);
+  await saveExportData(data, filePath);
   report.fyo.telemetry.log(Verb.Exported, report.reportName, { extention });
 }
 
@@ -178,7 +178,12 @@ function getValueFromCell(cell: ReportCell, displayPrecision: number) {
   return rawValue;
 }
 
-export async function saveExportData(data: string, filePath: string, fyo: Fyo) {
+export async function saveExportData(
+  data: string,
+  filePath: string,
+  message?: string
+) {
   await saveData(data, filePath);
-  showExportInFolder(fyo.t`Export Successful`, filePath);
+  message ??= t`Export Successful`;
+  showExportInFolder(message, filePath);
 }
diff --git a/src/components/ShortcutKeys.vue b/src/components/ShortcutKeys.vue
new file mode 100644
index 000000000..3507ceda2
--- /dev/null
+++ b/src/components/ShortcutKeys.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="flex-shrink-0 flex items-center gap-2" style="width: fit-content">
+    <kbd
+      v-for="k in keys"
+      :key="k"
+      class="key-common"
+      :class="{ 'key-styling': !simple }"
+      >{{ keyMap[k] ?? k }}</kbd
+    >
+  </div>
+</template>
+<script lang="ts">
+import { getShortcutKeyMap } from 'src/utils/ui';
+import { defineComponent, PropType } from 'vue';
+export default defineComponent({
+  props: {
+    keys: { type: Array as PropType<string[]>, required: true },
+    simple: { type: Boolean, default: false },
+  },
+  method() {},
+  computed: {
+    keyMap(): Record<string, string> {
+      return getShortcutKeyMap(this.platform);
+    },
+  },
+});
+</script>
+<style scoped>
+.key-common {
+  font-family: monospace;
+  font-weight: 600;
+  @apply rounded-md px-1.5 py-0.5 bg-gray-200 text-gray-700
+    tracking-tighter;
+}
+
+.key-styling {
+  @apply border-b-4 border-gray-400 shadow-md;
+}
+</style>
diff --git a/src/components/ShortcutsHelper.vue b/src/components/ShortcutsHelper.vue
index 5f79cb4f3..a11320416 100644
--- a/src/components/ShortcutsHelper.vue
+++ b/src/components/ShortcutsHelper.vue
@@ -22,29 +22,7 @@
               class="grid gap-4 items-start"
               style="grid-template-columns: 6rem auto"
             >
-              <!-- <div class="w-2 text-base">{{ i + 1 }}.</div> -->
-              <div
-                class="
-                  text-base
-                  font-medium
-                  flex-shrink-0 flex
-                  items-center
-                  gap-1
-                  bg-gray-200
-                  text-gray-700
-                  px-1.5
-                  py-0.5
-                  rounded
-                "
-                style="width: fit-content"
-              >
-                <span
-                  v-for="k in s.shortcut"
-                  :key="k"
-                  class="tracking-tighter"
-                  >{{ k }}</span
-                >
-              </div>
+              <ShortcutKeys class="text-base" :keys="s.shortcut" />
               <div class="whitespace-normal text-base">{{ s.description }}</div>
             </div>
           </div>
@@ -63,8 +41,10 @@
 </template>
 <script lang="ts">
 import { t } from 'fyo';
+import { ShortcutKey } from 'src/utils/ui';
 import { defineComponent } from 'vue';
 import FormHeader from './FormHeader.vue';
+import ShortcutKeys from './ShortcutKeys.vue';
 
 type Group = {
   label: string;
@@ -85,15 +65,15 @@ export default defineComponent({
         collapsed: false,
         shortcuts: [
           {
-            shortcut: [this.pmod, 'K'],
+            shortcut: [ShortcutKey.pmod, 'K'],
             description: t`Open Quick Search`,
           },
           {
-            shortcut: [this.del],
+            shortcut: [ShortcutKey.delete],
             description: t`Go back to the previous page`,
           },
           {
-            shortcut: [this.shift, 'H'],
+            shortcut: [ShortcutKey.shift, 'H'],
             description: t`Toggle sidebar`,
           },
           {
@@ -108,14 +88,14 @@ export default defineComponent({
         collapsed: false,
         shortcuts: [
           {
-            shortcut: [this.pmod, 'S'],
+            shortcut: [ShortcutKey.pmod, 'S'],
             description: [
               t`Save or Submit a doc.`,
               t`A doc is submitted only if it is submittable and is in the saved state.`,
             ].join(' '),
           },
           {
-            shortcut: [this.pmod, this.del],
+            shortcut: [ShortcutKey.pmod, ShortcutKey.delete],
             description: [
               t`Cancel or Delete a doc.`,
               t`A doc is cancelled only if it is in the submitted state.`,
@@ -129,25 +109,25 @@ export default defineComponent({
         description: t`Applicable when Quick Search is open`,
         collapsed: false,
         shortcuts: [
-          { shortcut: [this.esc], description: t`Close Quick Search` },
+          { shortcut: [ShortcutKey.esc], description: t`Close Quick Search` },
           {
-            shortcut: [this.pmod, '1'],
+            shortcut: [ShortcutKey.pmod, '1'],
             description: t`Toggle the Docs filter`,
           },
           {
-            shortcut: [this.pmod, '2'],
+            shortcut: [ShortcutKey.pmod, '2'],
             description: t`Toggle the List filter`,
           },
           {
-            shortcut: [this.pmod, '3'],
+            shortcut: [ShortcutKey.pmod, '3'],
             description: t`Toggle the Create filter`,
           },
           {
-            shortcut: [this.pmod, '4'],
+            shortcut: [ShortcutKey.pmod, '4'],
             description: t`Toggle the Report filter`,
           },
           {
-            shortcut: [this.pmod, '5'],
+            shortcut: [ShortcutKey.pmod, '5'],
             description: t`Toggle the Page filter`,
           },
         ],
@@ -158,71 +138,29 @@ export default defineComponent({
         collapsed: false,
         shortcuts: [
           {
-            shortcut: [this.ctrl, 'Enter'],
+            shortcut: [ShortcutKey.ctrl, ShortcutKey.enter],
             description: t`Apply and view changes made to the print template`,
           },
           {
-            shortcut: [this.ctrl, 'E'],
+            shortcut: [ShortcutKey.ctrl, 'E'],
             description: t`Toggle Edit Mode`,
           },
           {
-            shortcut: [this.ctrl, '+'],
+            shortcut: [ShortcutKey.ctrl, 'H'],
+            description: t`Toggle Key Hints`,
+          },
+          {
+            shortcut: [ShortcutKey.ctrl, '+'],
             description: t`Increase print template display scale`,
           },
           {
-            shortcut: [this.ctrl, '-'],
+            shortcut: [ShortcutKey.ctrl, '-'],
             description: t`Decrease print template display scale`,
           },
         ],
       },
     ];
   },
-  computed: {
-    ctrl() {
-      if (this.isMac) {
-        return 'control';
-      }
-      return 'Ctrl';
-    },
-    pmod() {
-      if (this.isMac) {
-        return '⌘';
-      }
-
-      return 'Ctrl';
-    },
-    shift() {
-      if (this.isMac) {
-        return 'shift';
-      }
-
-      return '⇧';
-    },
-    alt() {
-      if (this.isMac) {
-        return '⌥';
-      }
-
-      return 'Alt';
-    },
-    del() {
-      if (this.isMac) {
-        return 'delete';
-      }
-
-      return 'Backspace';
-    },
-    esc() {
-      if (this.isMac) {
-        return 'esc';
-      }
-
-      return 'Esc';
-    },
-    isMac() {
-      return this.platform === 'Mac';
-    },
-  },
-  components: { FormHeader },
+  components: { FormHeader, ShortcutKeys },
 });
 </script>
diff --git a/src/pages/ImportWizard.vue b/src/pages/ImportWizard.vue
index 084a45455..a7980ded4 100644
--- a/src/pages/ImportWizard.vue
+++ b/src/pages/ImportWizard.vue
@@ -386,7 +386,7 @@ import { fyo } from 'src/initFyo';
 import { getSavePath, saveData, selectFile } from 'src/utils/ipcCalls';
 import { docsPathMap } from 'src/utils/misc';
 import { docsPathRef } from 'src/utils/refs';
-import { showMessageDialog } from 'src/utils/ui';
+import { selectTextFile, showMessageDialog } from 'src/utils/ui';
 import { defineComponent } from 'vue';
 import Loading from '../components/Loading.vue';
 
@@ -906,27 +906,14 @@ export default defineComponent({
         : '';
     },
     async selectFile(): Promise<void> {
-      const options = {
-        title: this.t`Select File`,
-        filters: [{ name: 'CSV', extensions: ['csv'] }],
-      };
-
-      const { success, canceled, filePath, data, name } = await selectFile(
-        options
-      );
-
-      if (!success && !canceled) {
-        await showMessageDialog({
-          message: this.t`File selection failed.`,
-        });
-        return;
-      }
+      const { text, name, filePath } = await selectTextFile([
+        { name: 'CSV', extensions: ['csv'] },
+      ]);
 
-      if (!success || canceled) {
+      if (!text) {
         return;
       }
 
-      const text = new TextDecoder().decode(data);
       const isValid = this.importer.selectFile(text);
       if (!isValid) {
         await showMessageDialog({
diff --git a/src/pages/TemplateBuilder/TemplateBuilder.vue b/src/pages/TemplateBuilder/TemplateBuilder.vue
index 24dfde4f8..b9754dae6 100644
--- a/src/pages/TemplateBuilder/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilder.vue
@@ -25,7 +25,7 @@
       >
         <feather-icon name="edit" class="w-4 h-4" />
       </Button>
-      <DropdownWithActions v-if="doc?.inserted" :actions="actions" />
+      <DropdownWithActions v-if="actions.length" :actions="actions" />
       <Button v-if="doc?.canSave" type="primary" @click="sync()">
         {{ t`Save` }}
       </Button>
@@ -124,10 +124,10 @@
 
       <!-- Input Panel Resizer -->
       <HorizontalResizer
-        class="z-20"
         :initial-x="panelWidth"
         :min-x="22 * 16"
         :max-x="maxWidth"
+        style="z-index: 5"
         @resize="(x: number) => panelWidth = x"
       />
 
@@ -145,12 +145,24 @@
             :initial-value="doc.template"
             :disabled="!doc.isCustom"
             :hints="hints"
+            @input="() => (templateChanged = true)"
             @blur="(value: string) => setTemplate(value)"
           />
         </div>
+        <div
+          v-if="templateChanged"
+          class="flex gap-2 p-2 text-sm text-gray-600 items-center mt-auto"
+        >
+          <ShortcutKeys :keys="applyChangesShortcut" :simple="true" />
+          {{ t` to apply changes` }}
+        </div>
 
         <!-- Value Key Hints Container -->
-        <div class="border-t mt-auto flex-shrink-0" v-if="hints">
+        <div
+          class="border-t flex-shrink-0"
+          :class="templateChanged ? '' : 'mt-auto'"
+          v-if="hints"
+        >
           <!-- Value Key Toggle -->
           <div
             class="
@@ -161,10 +173,10 @@
               select-none
               p-2
             "
-            @click="showHints = !showHints"
+            @click="toggleShowHints"
           >
             <h2 class="text-base text-gray-900 font-semibold">
-              {{ t`Value Keys` }}
+              {{ t`Key Hints` }}
             </h2>
             <feather-icon
               :name="showHints ? 'chevron-up' : 'chevron-down'"
@@ -192,13 +204,16 @@ import { EditorView } from 'codemirror';
 import { Doc } from 'fyo/model/doc';
 import { PrintTemplate } from 'models/baseModels/PrintTemplate';
 import { ModelNameEnum } from 'models/types';
+import { saveExportData } from 'reports/commonExporter';
 import { Field, TargetField } from 'schemas/types';
 import Button from 'src/components/Button.vue';
 import FormControl from 'src/components/Controls/FormControl.vue';
 import DropdownWithActions from 'src/components/DropdownWithActions.vue';
 import HorizontalResizer from 'src/components/HorizontalResizer.vue';
 import PageHeader from 'src/components/PageHeader.vue';
+import ShortcutKeys from 'src/components/ShortcutKeys.vue';
 import { handleErrorWithDialog } from 'src/errorHandling';
+import { getSavePath } from 'src/utils/ipcCalls';
 import { docsPathMap } from 'src/utils/misc';
 import {
   baseTemplate,
@@ -212,6 +227,8 @@ import {
   getActionsForDoc,
   getDocFromNameIfExistsElseNew,
   openSettings,
+  selectTextFile,
+  ShortcutKey,
   showToast,
 } from 'src/utils/ui';
 import { Shortcuts } from 'src/utils/vueUtils';
@@ -232,6 +249,7 @@ export default defineComponent({
     TemplateEditor,
     FormControl,
     TemplateBuilderHint,
+    ShortcutKeys,
   },
   inject: { shortcutManager: { from: 'shortcuts' } },
   provide() {
@@ -247,6 +265,7 @@ export default defineComponent({
       displayDoc: null,
       scale: 0.6,
       panelWidth: 22 /** rem */ * 16 /** px */,
+      templateChanged: false,
       preEditMode: {
         scale: 0.6,
         showSidebar: true,
@@ -261,6 +280,7 @@ export default defineComponent({
       displayDoc: PrintTemplate | null;
       scale: number;
       panelWidth: number;
+      templateChanged: boolean;
       preEditMode: {
         scale: number;
         showSidebar: boolean;
@@ -288,6 +308,7 @@ export default defineComponent({
     docsPathRef.value = docsPathMap.PrintTemplate ?? '';
     this.shortcuts.ctrl.set(['Enter'], this.setTemplate);
     this.shortcuts.ctrl.set(['KeyE'], this.toggleEditMode);
+    this.shortcuts.ctrl.set(['KeyH'], this.toggleShowHints);
     this.shortcuts.ctrl.set(['Equal'], () => this.setScale(this.scale + 0.1));
     this.shortcuts.ctrl.set(['Minus'], () => this.setScale(this.scale - 0.1));
   },
@@ -298,6 +319,7 @@ export default defineComponent({
     }
     this.shortcuts.ctrl.delete(['Enter']);
     this.shortcuts.ctrl.delete(['KeyE']);
+    this.shortcuts.ctrl.delete(['KeyH']);
     this.shortcuts.ctrl.delete(['Equal']);
     this.shortcuts.ctrl.delete(['Minus']);
   },
@@ -312,6 +334,7 @@ export default defineComponent({
       return this.view.state.doc.toString();
     },
     async setTemplate(value?: string) {
+      this.templateChanged = false;
       if (!this.doc?.isCustom) {
         return;
       }
@@ -329,6 +352,9 @@ export default defineComponent({
 
       this.scale = Math.max(Math.min(value, 10), 0.15);
     },
+    toggleShowHints() {
+      this.showHints = !this.showHints;
+    },
     async toggleEditMode() {
       if (!this.doc?.isCustom) {
         return;
@@ -455,8 +481,69 @@ export default defineComponent({
       this.values = await getPrintTemplatePropValues(displayDoc);
       this.displayDoc = displayDoc;
     },
+    async selectFile() {
+      const { name: fileName, text } = await selectTextFile([
+        { name: 'Template', extensions: ['template.html', 'html'] },
+      ]);
+
+      if (!text) {
+        return;
+      }
+
+      await this.doc?.set('template', text);
+      this.view?.dispatch({
+        changes: { from: 0, to: this.view.state.doc.length, insert: text },
+      });
+
+      if (this.doc?.inserted) {
+        return;
+      }
+
+      let name: string | null = null;
+      if (fileName.endsWith('.template.html')) {
+        name = fileName.split('.template.html')[0];
+      }
+
+      if (!name && fileName.endsWith('.html')) {
+        name = fileName.split('.html')[0];
+      }
+
+      if (!name) {
+        return;
+      }
+
+      await this.doc?.set('name', name);
+    },
+    async saveFile() {
+      const name = this.doc?.name;
+      const template = this.getTemplateEditorState();
+
+      if (!name) {
+        return await showToast({
+          type: 'warning',
+          message: this.t`Print Template Name not set`,
+        });
+      }
+
+      if (!template) {
+        return await showToast({
+          type: 'warning',
+          message: this.t`Print Template is empty`,
+        });
+      }
+
+      const { canceled, filePath } = await getSavePath(name, 'template.html');
+      if (canceled || !filePath) {
+        return;
+      }
+
+      await saveExportData(template, filePath, this.t`Template file saved`);
+    },
   },
   computed: {
+    applyChangesShortcut() {
+      return [ShortcutKey.ctrl, ShortcutKey.enter];
+    },
     view(): EditorView | null {
       // @ts-ignore
       const { view } = this.$refs.templateEditor ?? {};
@@ -489,11 +576,25 @@ export default defineComponent({
       actions.push({
         label: this.t`Print Settings`,
         group: this.t`View`,
-        async action() {
+        action: async () => {
           await openSettings(ModelNameEnum.PrintSettings);
         },
       });
 
+      if (this.doc.isCustom) {
+        actions.push({
+          label: this.t`Select Template File`,
+          group: this.t`Action`,
+          action: this.selectFile,
+        });
+      }
+
+      actions.push({
+        label: this.t`Save Template File`,
+        group: this.t`Action`,
+        action: this.saveFile,
+      });
+
       return actions;
     },
     fields(): Record<string, Field> {
diff --git a/src/utils/ui.ts b/src/utils/ui.ts
index 671bbda2e..91cd3d1b8 100644
--- a/src/utils/ui.ts
+++ b/src/utils/ui.ts
@@ -14,10 +14,12 @@ import { handleErrorWithDialog } from 'src/errorHandling';
 import { fyo } from 'src/initFyo';
 import router from 'src/router';
 import { IPC_ACTIONS } from 'utils/messages';
+import { SelectFileOptions } from 'utils/types';
 import { App, createApp, h } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
 import { stringifyCircular } from './';
 import { evaluateHidden } from './doc';
+import { selectFile } from './ipcCalls';
 import { showSidebar } from './refs';
 import {
   ActionGroup,
@@ -506,3 +508,66 @@ export function focusOrSelectFormControl(
 
   doc.name = '';
 }
+
+export async function selectTextFile(filters?: SelectFileOptions['filters']) {
+  const options = {
+    title: t`Select File`,
+    filters,
+  };
+  const { success, canceled, filePath, data, name } = await selectFile(options);
+
+  if (canceled || !success) {
+    await showToast({
+      type: 'error',
+      message: t`File selection failed`,
+    });
+    return {};
+  }
+
+  const text = new TextDecoder().decode(data);
+  if (!text) {
+    await showToast({
+      type: 'error',
+      message: t`Empty file selected`,
+    });
+
+    return {};
+  }
+
+  return { text, filePath, name };
+}
+
+export enum ShortcutKey {
+  enter = 'enter',
+  ctrl = 'ctrl',
+  pmod = 'pmod',
+  shift = 'shift',
+  alt = 'alt',
+  delete = 'delete',
+  esc = 'esc',
+}
+
+export function getShortcutKeyMap(
+  platform: string
+): Record<ShortcutKey, string> {
+  if (platform === 'Mac') {
+    return {
+      [ShortcutKey.alt]: '⌥',
+      [ShortcutKey.ctrl]: '⌃',
+      [ShortcutKey.pmod]: '⌘',
+      [ShortcutKey.shift]: 'shift',
+      [ShortcutKey.delete]: 'delete',
+      [ShortcutKey.esc]: 'esc',
+      [ShortcutKey.enter]: 'return',
+    };
+  }
+  return {
+    [ShortcutKey.alt]: 'Alt',
+    [ShortcutKey.ctrl]: 'Ctrl',
+    [ShortcutKey.pmod]: 'Ctrl',
+    [ShortcutKey.shift]: '⇧',
+    [ShortcutKey.delete]: 'Backspace',
+    [ShortcutKey.esc]: 'Esc',
+    [ShortcutKey.enter]: 'Enter',
+  };
+}

From dced1ed559f7fcb7d441d2df917b2b770b8442a2 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Mon, 13 Mar 2023 15:42:19 +0530
Subject: [PATCH 30/33] fix(ux): display template compilation errors - fix
 failing tests due vue imports on ts-node compile - prevent fyo access in
 templates - update default template - change outline colour

---
 models/baseModels/Invoice/Invoice.ts         |  1 -
 src/pages/TemplateBuilder/PrintContainer.vue | 86 +++++++++++++++++++-
 src/styles/index.css                         |  2 +-
 src/utils/initialization.ts                  |  2 -
 src/utils/printTemplates.ts                  | 13 ++-
 5 files changed, 97 insertions(+), 7 deletions(-)

diff --git a/models/baseModels/Invoice/Invoice.ts b/models/baseModels/Invoice/Invoice.ts
index b929c1173..4037a7ab8 100644
--- a/models/baseModels/Invoice/Invoice.ts
+++ b/models/baseModels/Invoice/Invoice.ts
@@ -11,7 +11,6 @@ import {
 import { DEFAULT_CURRENCY } from 'fyo/utils/consts';
 import { ValidationError } from 'fyo/utils/errors';
 import { addItem, getExchangeRate, getNumberSeries } from 'models/helpers';
-import { validateBatch } from 'models/inventory/helpers';
 import { InventorySettings } from 'models/inventory/InventorySettings';
 import { StockTransfer } from 'models/inventory/StockTransfer';
 import { Transactional } from 'models/Transactional/Transactional';
diff --git a/src/pages/TemplateBuilder/PrintContainer.vue b/src/pages/TemplateBuilder/PrintContainer.vue
index c464689c9..42be2e65c 100644
--- a/src/pages/TemplateBuilder/PrintContainer.vue
+++ b/src/pages/TemplateBuilder/PrintContainer.vue
@@ -6,20 +6,60 @@
   >
     <!-- Template -->
     <component
+      v-if="!error"
       class="flex-1 bg-white"
       :doc="values.doc"
       :print="values.print"
-      :is="{ template, props: ['doc', 'print'] }"
+      :is="templateComponent"
     />
+
+    <!-- Compilation Error -->
+    <div
+      v-else
+      class="
+        h-full
+        bg-red-100
+        w-full
+        text-2xl text-gray-900
+        flex flex-col
+        gap-4
+      "
+    >
+      <h1 class="text-4xl font-bold text-red-500 p-4 border-b border-red-200">
+        {{ t`Template Compilation Error` }}
+      </h1>
+      <p class="px-4 font-semibold">{{ error.message }}</p>
+      <pre v-if="error.codeframe" class="px-4 text-xl text-gray-700">{{
+        error.codeframe
+      }}</pre>
+    </div>
   </ScaledContainer>
 </template>
 <script lang="ts">
+import {
+  compile,
+  CompilerError,
+  generateCodeFrame,
+  SourceLocation,
+} from '@vue/compiler-dom';
 import { getPathAndMakePDF } from 'src/utils/printTemplates';
 import { PrintValues } from 'src/utils/types';
 import { defineComponent, PropType } from 'vue';
 import ScaledContainer from './ScaledContainer.vue';
 
+export const baseSafeTemplate = `<main class="h-full w-full bg-white">
+  <p class="p-4 text-red-500">
+    <span class="font-bold">ERROR</span>: Template failed to load due to errors.
+  </p>
+</main>
+`;
+
 export default defineComponent({
+  data() {
+    return { error: null } as {
+      error: null | { codeframe: string; message: string };
+    };
+  },
   props: {
     template: { type: String, required: true },
     scale: { type: Number, default: 0.65 },
@@ -28,7 +68,30 @@ export default defineComponent({
       required: true,
     },
   },
+  watch: {
+    template(value: string) {
+      this.compile(value);
+    },
+  },
+  mounted() {
+    this.compile(this.template);
+  },
   methods: {
+    compile(template: string) {
+      this.error = null;
+      return compile(template, {
+        hoistStatic: true,
+        onWarn: this.onError,
+        onError: this.onError,
+      });
+    },
+    onError({ message, loc }: CompilerError) {
+      const codeframe = loc ? this.getCodeFrame(loc) : '';
+      this.error = { codeframe, message };
+    },
+    getCodeFrame(loc: SourceLocation) {
+      return generateCodeFrame(this.template, loc.start.offset, loc.end.offset);
+    },
     async savePDF(name?: string) {
       /**
        * To be called through ref by the parent component.
@@ -43,6 +106,27 @@ export default defineComponent({
       await getPathAndMakePDF(name ?? this.t`Entry`, innerHTML);
     },
   },
+  computed: {
+    templateComponent() {
+      let template = this.template;
+      if (this.error) {
+        template = baseSafeTemplate;
+      }
+
+      return {
+        template,
+        props: ['doc', 'print'],
+        computed: {
+          fyo() {
+            return {};
+          },
+          platform() {
+            return '';
+          },
+        },
+      };
+    },
+  },
   components: { ScaledContainer },
 });
 </script>
diff --git a/src/styles/index.css b/src/styles/index.css
index 3cb300d68..fad838160 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -7,7 +7,7 @@
 }
 
 * {
-  outline-color: theme('colors.pink.500');
+  outline-color: theme('colors.pink.400');
   font-variation-settings: 'slnt' 0deg;
 }
 .italic {
diff --git a/src/utils/initialization.ts b/src/utils/initialization.ts
index d83523634..14bd7b2b0 100644
--- a/src/utils/initialization.ts
+++ b/src/utils/initialization.ts
@@ -8,7 +8,6 @@ import {
   getRandomString,
   getValueMapFromList,
 } from 'utils/index';
-import { updatePrintTemplates } from './printTemplates';
 
 export async function initializeInstance(
   dbPath: string,
@@ -34,7 +33,6 @@ export async function initializeInstance(
   await setInstanceId(fyo);
   await setOpenCount(fyo);
   await setCurrencySymbols(fyo);
-  await updatePrintTemplates(fyo);
 }
 
 async function closeDbIfConnected(fyo: Fyo) {
diff --git a/src/utils/printTemplates.ts b/src/utils/printTemplates.ts
index 9e3e360f2..bb53d1830 100644
--- a/src/utils/printTemplates.ts
+++ b/src/utils/printTemplates.ts
@@ -351,7 +351,9 @@ function getNameAndTypeFromTemplateFile(
 }
 
 export const baseTemplate = `<main class="h-full w-full bg-white">
-  <header class="p-4 flex justify-between bg-gray-50">
+
+  <!-- Edit This Code -->
+  <header class="p-4 flex justify-between border-b">
     <h2 
       class="font-semibold text-2xl" 
       :style="{ color: print.color }"
@@ -362,4 +364,11 @@ export const baseTemplate = `<main class="h-full w-full bg-white">
       {{ doc.name }}
     </h2>
   </header>
-</main>`;
+
+  <div class="p-4 text-gray-600">
+    Edit the code in the Template Editor on the right
+    to create your own personalized custom template.
+  </div>
+
+</main>
+`;

From 8ff4a977906f93d6c565ad49f5a68f54e6d20696 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Mon, 13 Mar 2023 21:14:10 +0530
Subject: [PATCH 31/33] incr: remove redudant print settings

---
 models/baseModels/PrintSettings/PrintSettings.ts |  4 +---
 schemas/app/PrintSettings.json                   | 12 ------------
 src/App.vue                                      |  2 ++
 src/components/Sidebar.vue                       |  2 +-
 src/pages/TemplateBuilder/PrintContainer.vue     | 15 +++++++++++++++
 src/utils/printTemplates.ts                      |  1 -
 6 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/models/baseModels/PrintSettings/PrintSettings.ts b/models/baseModels/PrintSettings/PrintSettings.ts
index a8ffea2a1..bb0da0466 100644
--- a/models/baseModels/PrintSettings/PrintSettings.ts
+++ b/models/baseModels/PrintSettings/PrintSettings.ts
@@ -2,7 +2,5 @@ import { Doc } from 'fyo/model/doc';
 import { HiddenMap } from 'fyo/model/types';
 
 export class PrintSettings extends Doc {
-  override hidden: HiddenMap = {
-    displayBatch: () => !this.fyo.singles.InventorySettings?.enableBatches,
-  };
+  override hidden: HiddenMap = {};
 }
diff --git a/schemas/app/PrintSettings.json b/schemas/app/PrintSettings.json
index 8bfbc25fc..345c3f46e 100644
--- a/schemas/app/PrintSettings.json
+++ b/schemas/app/PrintSettings.json
@@ -114,18 +114,6 @@
       "label": "Display Logo in Invoice",
       "fieldtype": "Check",
       "section": "Customizations"
-    },
-    {
-      "fieldname": "displayTaxInvoice",
-      "label": "Display Tax Invoice",
-      "fieldtype": "Check",
-      "section": "Customizations"
-    },
-    {
-      "fieldname": "displayBatch",
-      "label": "Display Batch",
-      "fieldtype": "Check",
-      "section": "Customizations"
     }
   ]
 }
diff --git a/src/App.vue b/src/App.vue
index 5fa983a08..ff8357f30 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -54,6 +54,7 @@ import './styles/index.css';
 import { initializeInstance } from './utils/initialization';
 import { checkForUpdates } from './utils/ipcCalls';
 import { updateConfigFiles } from './utils/misc';
+import { updatePrintTemplates } from './utils/printTemplates';
 import { Search } from './utils/search';
 import { setGlobalShortcuts } from './utils/shortcuts';
 import { routeTo } from './utils/ui';
@@ -160,6 +161,7 @@ export default {
       }
 
       await initializeInstance(filePath, false, countryCode, fyo);
+      await updatePrintTemplates(fyo);
       await this.setDesk(filePath);
     },
     async setDeskRoute() {
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index cff8414cc..c01dde777 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -145,7 +145,7 @@
       </button>
 
       <p
-        v-if="fyo.store.isDevelopment"
+        v-if="!fyo.store.isDevelopment"
         class="text-xs text-gray-500 select-none"
       >
         dev mode
diff --git a/src/pages/TemplateBuilder/PrintContainer.vue b/src/pages/TemplateBuilder/PrintContainer.vue
index 42be2e65c..91a9500a7 100644
--- a/src/pages/TemplateBuilder/PrintContainer.vue
+++ b/src/pages/TemplateBuilder/PrintContainer.vue
@@ -78,6 +78,21 @@ export default defineComponent({
   },
   methods: {
     compile(template: string) {
+      /**
+       * Note: This is a hacky method to prevent
+       * broken templates from reaching the `<component />`
+       * element.
+       * 
+       * It's required because the CompilerOptions doesn't
+       * have an option to capture the errors.
+       *
+       * The compile function returns a code that can be
+       * converted into a render function.
+       *
+       * This render function can be used instead
+       * of passing the template to the `<component />` element
+       * where it gets compiled again.
+       */
       this.error = null;
       return compile(template, {
         hoistStatic: true,
diff --git a/src/utils/printTemplates.ts b/src/utils/printTemplates.ts
index bb53d1830..70bca5726 100644
--- a/src/utils/printTemplates.ts
+++ b/src/utils/printTemplates.ts
@@ -15,7 +15,6 @@ type TemplateUpdateItem = { name: string; template: string; type: string };
 const printSettingsFields = [
   'logo',
   'displayLogo',
-  'displayTaxInvoice',
   'color',
   'font',
   'email',

From 7a22ab8946c52d84d386529fe8b9e7c440c4642c Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Tue, 14 Mar 2023 12:54:05 +0530
Subject: [PATCH 32/33] fix: extra resources build link - display links upto
 two levels - mark template strings for translation

---
 electron-builder.yml             |  2 +-
 src/utils/printTemplates.ts      | 11 ++++-------
 templates/Basic.template.html    | 14 ++++++++------
 templates/Business.template.html | 10 +++++-----
 templates/Minimal.template.html  | 12 ++++++------
 5 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/electron-builder.yml b/electron-builder.yml
index 5cbe2e427..bed25e957 100644
--- a/electron-builder.yml
+++ b/electron-builder.yml
@@ -5,7 +5,7 @@ extraResources:
   [
     { from: 'log_creds.txt', to: '../creds/log_creds.txt' },
     { from: 'translations', to: '../translations' },
-    { from: 'translations', to: '../translations' },
+    { from: 'templates', to: '../templates' },
   ]
 mac:
   type: distribution
diff --git a/src/utils/printTemplates.ts b/src/utils/printTemplates.ts
index 70bca5726..7130a0a0a 100644
--- a/src/utils/printTemplates.ts
+++ b/src/utils/printTemplates.ts
@@ -116,9 +116,9 @@ function getPrintTemplateDocHints(
   schema: Schema,
   fyo: Fyo,
   fieldnames?: string[],
-  isLink?: boolean
+  linkLevel?: number
 ): PrintTemplateData {
-  isLink ??= false;
+  linkLevel ??= 0;
   const hints: PrintTemplateData = {};
   const links: PrintTemplateData = {};
 
@@ -134,17 +134,14 @@ function getPrintTemplateDocHints(
     }
 
     hints[fieldname] = label ?? fieldname;
-    if (fieldtype === FieldTypeEnum.Table) {
-    }
-
     const { target } = field as TargetField;
     const targetSchema = fyo.schemaMap[target];
-    if (fieldtype === FieldTypeEnum.Link && targetSchema && !isLink) {
+    if (fieldtype === FieldTypeEnum.Link && targetSchema && linkLevel < 2) {
       links[fieldname] = getPrintTemplateDocHints(
         targetSchema,
         fyo,
         undefined,
-        true
+        linkLevel + 1
       );
     }
 
diff --git a/templates/Basic.template.html b/templates/Basic.template.html
index d36c76a8f..1ac7a80f9 100644
--- a/templates/Basic.template.html
+++ b/templates/Basic.template.html
@@ -56,11 +56,13 @@ <h2 class="py-1 text-right text-lg font-semibold">{{ doc.party }}</h2>
   <section class="mt-8 text-base">
     <!-- Heading Row -->
     <section class="text-gray-600 w-full flex border-b">
-      <div class="py-4 w-5/12">Item</div>
-      <div class="py-4 text-right w-2/12" v-if="doc.showHSN">HSN/SAC</div>
-      <div class="py-4 text-right w-1/12">Quantity</div>
-      <div class="py-4 text-right w-3/12">Rate</div>
-      <div class="py-4 text-right w-3/12">Amount</div>
+      <div class="py-4 w-5/12">{{ t`Item` }}</div>
+      <div class="py-4 text-right w-2/12" v-if="doc.showHSN">
+        {{ t`HSN/SAC` }}
+      </div>
+      <div class="py-4 text-right w-1/12">{{ t`Quantity` }}</div>
+      <div class="py-4 text-right w-3/12">{{ t`Rate` }}</div>
+      <div class="py-4 text-right w-3/12">{{ t`Amount` }}</div>
     </section>
 
     <!-- Body Rows -->
@@ -84,7 +86,7 @@ <h2 class="py-1 text-right text-lg font-semibold">{{ doc.party }}</h2>
     <!-- Invoice Terms -->
     <section class="w-1/2">
       <h3 class="text-sm tracking-widest text-gray-600 mt-2" v-if="doc.terms">
-        Notes
+        {{ t`Notes` }}
       </h3>
       <p class="my-4 text-lg whitespace-pre-line">{{ doc.terms }}</p>
     </section>
diff --git a/templates/Business.template.html b/templates/Business.template.html
index ffbf23297..ae3138a0a 100644
--- a/templates/Business.template.html
+++ b/templates/Business.template.html
@@ -56,11 +56,11 @@ <h3 class="w-1/3 font-semibold">
   <section class="px-12 pt-12 text-lg">
     <!-- Heading Row -->
     <section class="mb-4 flex font-semibold">
-      <div class="w-4/12">Item</div>
-      <div class="w-2/12 text-right" v-if="doc.showHSN">HSN/SAC</div>
-      <div class="w-2/12 text-right">Quantity</div>
-      <div class="w-3/12 text-right">Rate</div>
-      <div class="w-3/12 text-right">Amount</div>
+      <div class="w-4/12">{{ t`Item` }}</div>
+      <div class="w-2/12 text-right" v-if="doc.showHSN">{{ t`HSN/SAC` }}</div>
+      <div class="w-2/12 text-right">{{ t`Quantity` }}</div>
+      <div class="w-3/12 text-right">{{ t`Rate` }}</div>
+      <div class="w-3/12 text-right">{{ t`Amount` }}</div>
     </section>
 
     <!-- Body Rows -->
diff --git a/templates/Minimal.template.html b/templates/Minimal.template.html
index 8806e7751..6b158bb40 100644
--- a/templates/Minimal.template.html
+++ b/templates/Minimal.template.html
@@ -94,11 +94,11 @@ <h3 class="uppercase text-sm font-semibold tracking-widest text-gray-800">
         text-gray-800
       "
     >
-      <div class="w-4/12 text-left">Item</div>
-      <div class="w-2/12 text-right" v-if="doc.showHSN">HSN/SAC</div>
-      <div class="w-2/12 text-right">Quantity</div>
-      <div class="w-3/12 text-right">Rate</div>
-      <div class="w-3/12 text-right">Amount</div>
+      <div class="w-4/12 text-left">{{ t`Item` }}</div>
+      <div class="w-2/12 text-right" v-if="doc.showHSN">{{ t`HSN/SAC` }}</div>
+      <div class="w-2/12 text-right">{{ t`Quantity` }}</div>
+      <div class="w-3/12 text-right">{{ t`Rate` }}</div>
+      <div class="w-3/12 text-right">{{ t`Amount`}}</div>
     </section>
 
     <!-- Body Rows -->
@@ -116,7 +116,7 @@ <h3 class="uppercase text-sm font-semibold tracking-widest text-gray-800">
     <!-- Invoice Terms -->
     <section class="w-1/2" v-if="doc.terms">
       <h3 class="uppercase text-sm tracking-widest font-semibold text-gray-800">
-        Notes
+        {{ t`Notes` }}
       </h3>
       <p class="mt-4 text-lg whitespace-pre-line">{{ doc.terms }}</p>
     </section>

From 94f34259281cdd473b1e147fc10908883788448a Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Tue, 14 Mar 2023 13:27:14 +0530
Subject: [PATCH 33/33] fix(ux): show template on load - show no entries
 message

---
 src/pages/TemplateBuilder/TemplateBuilder.vue | 67 +++++++++++++------
 src/utils/printTemplates.ts                   | 16 ++---
 2 files changed, 53 insertions(+), 30 deletions(-)

diff --git a/src/pages/TemplateBuilder/TemplateBuilder.vue b/src/pages/TemplateBuilder/TemplateBuilder.vue
index b9754dae6..c673817b3 100644
--- a/src/pages/TemplateBuilder/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilder.vue
@@ -42,24 +42,21 @@
         class="overflow-auto no-scrollbar flex flex-col"
         style="height: calc(100vh - var(--h-row-largest) - 1px)"
       >
-        <!-- Display Hints -->
-        <p v-if="helperMessage" class="text-sm text-gray-700 p-4">
-          {{ helperMessage }}
-        </p>
-
         <!-- Template Container -->
-        <div
-          v-else-if="doc.template && values"
-          class="p-4 overflow-auto custom-scroll"
-        >
+        <div v-if="canDisplayPreview" class="p-4 overflow-auto custom-scroll">
           <PrintContainer
             ref="printContainer"
-            :template="doc.template"
-            :values="values"
+            :template="doc.template!"
+            :values="values!"
             :scale="scale"
           />
         </div>
 
+        <!-- Display Hints -->
+        <p v-else-if="helperMessage" class="text-sm text-gray-700 p-4">
+          {{ helperMessage }}
+        </p>
+
         <!-- Bottom Bar -->
         <div
           class="
@@ -98,6 +95,7 @@
 
           <!-- Display Scale -->
           <div
+            v-if="canDisplayPreview"
             class="flex ml-auto gap-2 px-2 w-36 justify-between flex-shrink-0"
           >
             <p class="text-sm text-gray-600 my-auto">{{ t`Display Scale` }}</p>
@@ -229,6 +227,7 @@ import {
   openSettings,
   selectTextFile,
   ShortcutKey,
+  showMessageDialog,
   showToast,
 } from 'src/utils/ui';
 import { Shortcuts } from 'src/utils/vueUtils';
@@ -289,22 +288,14 @@ export default defineComponent({
     };
   },
   async mounted() {
-    await this.setDoc();
-    focusOrSelectFormControl(this.doc as Doc, this.$refs.nameField, false);
+    await this.initialize();
     focusedDocsRef.add(this.doc);
-
-    if (this.doc?.template == null) {
-      await this.doc?.set('template', baseTemplate);
-    }
-
-    await this.setDisplayInitialDoc();
-
     if (this.fyo.store.isDevelopment) {
       // @ts-ignore
       window.tb = this;
     }
   },
-  activated(): void {
+  async activated(): Promise<void> {
     docsPathRef.value = docsPathMap.PrintTemplate ?? '';
     this.shortcuts.ctrl.set(['Enter'], this.setTemplate);
     this.shortcuts.ctrl.set(['KeyE'], this.toggleEditMode);
@@ -324,6 +315,20 @@ export default defineComponent({
     this.shortcuts.ctrl.delete(['Minus']);
   },
   methods: {
+    async initialize() {
+      await this.setDoc();
+      if (this.doc?.type) {
+        this.hints = getPrintTemplatePropHints(this.doc.type, this.fyo);
+      }
+
+      focusOrSelectFormControl(this.doc as Doc, this.$refs.nameField, false);
+
+      if (!this.doc?.template) {
+        await this.doc?.set('template', baseTemplate);
+      }
+
+      await this.setDisplayInitialDoc();
+    },
     getTemplateEditorState() {
       const fallback = this.doc?.template ?? '';
 
@@ -428,6 +433,13 @@ export default defineComponent({
 
       const name = names[0]?.name;
       if (!name) {
+        const label = this.fyo.schemaMap[schemaName]?.label ?? schemaName;
+        await showMessageDialog({
+          message: this.t`No Display Entries Found`,
+          detail: this
+            .t`Please create a ${label} entry to view Template Preview`,
+        });
+
         return;
       }
 
@@ -477,7 +489,7 @@ export default defineComponent({
       }
 
       const displayDoc = await getDocFromNameIfExistsElseNew(schemaName, value);
-      this.hints = getPrintTemplatePropHints(displayDoc);
+      this.hints = getPrintTemplatePropHints(schemaName, this.fyo);
       this.values = await getPrintTemplatePropValues(displayDoc);
       this.displayDoc = displayDoc;
     },
@@ -541,6 +553,17 @@ export default defineComponent({
     },
   },
   computed: {
+    canDisplayPreview(): boolean {
+      if (!this.displayDoc || !this.values) {
+        return false;
+      }
+
+      if (!this.doc?.template) {
+        return false;
+      }
+
+      return true;
+    },
     applyChangesShortcut() {
       return [ShortcutKey.ctrl, ShortcutKey.enter];
     },
diff --git a/src/utils/printTemplates.ts b/src/utils/printTemplates.ts
index 7130a0a0a..1df1d1bb4 100644
--- a/src/utils/printTemplates.ts
+++ b/src/utils/printTemplates.ts
@@ -60,21 +60,21 @@ export async function getPrintTemplatePropValues(
   return values;
 }
 
-export function getPrintTemplatePropHints(doc: Doc) {
+export function getPrintTemplatePropHints(schemaName: string, fyo: Fyo) {
   const hints: PrintTemplateData = {};
-  const fyo = doc.fyo;
-  hints.doc = getPrintTemplateDocHints(doc.schema, doc.fyo);
-  (hints.doc as PrintTemplateData).entryType = doc.fyo.t`Entry Type`;
-  (hints.doc as PrintTemplateData).entryLabel = doc.fyo.t`Entry Label`;
+  const schema = fyo.schemaMap[schemaName]!;
+  hints.doc = getPrintTemplateDocHints(schema, fyo);
+  (hints.doc as PrintTemplateData).entryType = fyo.t`Entry Type`;
+  (hints.doc as PrintTemplateData).entryLabel = fyo.t`Entry Label`;
 
   const printSettingsHints = getPrintTemplateDocHints(
     fyo.schemaMap[ModelNameEnum.PrintSettings]!,
-    doc.fyo,
+    fyo,
     printSettingsFields
   );
   const accountingSettingsHints = getPrintTemplateDocHints(
     fyo.schemaMap[ModelNameEnum.AccountingSettings]!,
-    doc.fyo,
+    fyo,
     accountingSettingsFields
   );
 
@@ -83,7 +83,7 @@ export function getPrintTemplatePropHints(doc: Doc) {
     ...accountingSettingsHints,
   };
 
-  if (doc.schemaName?.endsWith('Invoice')) {
+  if (schemaName?.endsWith('Invoice')) {
     (hints.doc as PrintTemplateData).totalDiscount = fyo.t`Total Discount`;
     (hints.doc as PrintTemplateData).showHSN = fyo.t`Show HSN`;
   }