fix(ux): show template on load

- show no entries message

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
+        <div v-if="canDisplayPreview" class="p-4 overflow-auto custom-scroll">
-          v-else-if="doc.template && values"
-          class="p-4 overflow-auto custom-scroll"
-        >
           <PrintContainer
             ref="printContainer"
-            :template="doc.template"
+            :template="doc.template!"
-            :values="values"
+            :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();
+    await this.initialize();
-    focusOrSelectFormControl(this.doc as Doc, this.$refs.nameField, false);
     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];
     },

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;
+  const schema = fyo.schemaMap[schemaName]!;
-  hints.doc = getPrintTemplateDocHints(doc.schema, doc.fyo);
+  hints.doc = getPrintTemplateDocHints(schema, fyo);
-  (hints.doc as PrintTemplateData).entryType = doc.fyo.t`Entry Type`;
+  (hints.doc as PrintTemplateData).entryType = fyo.t`Entry Type`;
-  (hints.doc as PrintTemplateData).entryLabel = doc.fyo.t`Entry Label`;
+  (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`;
   }