refactor: add FormHeader

- add custom vue type shims

fyo/utils/translation.ts

@@ -7,8 +7,8 @@ import {
 } from '../../utils/translationHelpers';
 import { ValueError } from './errors';
 
-type TranslationArgs = boolean | number | string;
+export type TranslationArgs = boolean | number | string;
-type TranslationLiteral = TemplateStringsArray | TranslationArgs;
+export type TranslationLiteral = TemplateStringsArray | TranslationArgs;
 
 class TranslationString {
   args: TranslationLiteral[];

src/components/FormHeader.vue

@@ -0,0 +1,28 @@
+<template>
+  <div
+    class="
+      px-4
+      text-xl
+      font-semibold
+      flex
+      justify-between
+      h-row-large
+      items-center
+    "
+  >
+    <h1>{{ formTitle }}</h1>
+    <p class="text-gray-600">
+      {{ formSubTitle }}
+    </p>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    formTitle: { type: String, default: '' },
+    formSubTitle: { type: String, default: '' },
+  },
+});
+</script>

src/pages/InvoiceForm.vue

@@ -45,28 +45,14 @@
 
     <!-- Invoice Form -->
     <template #body v-if="doc">
-      <div
+      <FormHeader
-        class="
+        :form-title="doc.notInserted ? t`New Entry` : doc.name"
-          px-4
+        :form-sub-title="
-          text-xl
-          font-semibold
-          flex
-          justify-between
-          h-row-large
-          items-center
-        "
-      >
-        <h1>
-          {{ doc.notInserted ? t`New Entry` : doc.name }}
-        </h1>
-        <p class="text-gray-600">
-          {{
           doc.schemaName === 'SalesInvoice'
             ? t`Sales Invoice`
             : t`Purchase Invoice`
-          }}
+        "
-        </p>
+      />
-      </div>
       <hr />
 
       <div>
@@ -298,6 +284,7 @@ import FormControl from 'src/components/Controls/FormControl.vue';
 import Table from 'src/components/Controls/Table.vue';
 import DropdownWithActions from 'src/components/DropdownWithActions.vue';
 import FormContainer from 'src/components/FormContainer.vue';
+import FormHeader from 'src/components/FormHeader.vue';
 import StatusBadge from 'src/components/StatusBadge.vue';
 import { fyo } from 'src/initFyo';
 import { docsPathMap } from 'src/utils/misc';
@@ -323,6 +310,7 @@ export default {
     FormContainer,
     QuickEditForm,
     ExchangeRate,
+    FormHeader,
   },
   provide() {
     return {

src/pages/JournalEntryForm.vue

@@ -24,24 +24,10 @@
 
     <!-- Journal Entry Form -->
     <template #body v-if="doc">
-      <div
+      <FormHeader
-        class="
+        :form-title="doc.notInserted ? t`New Entry` : doc.name"
-          px-4
+        :form-sub-title="t`Journal Entry`"
-          text-xl
+      />
-          font-semibold
-          flex
-          justify-between
-          h-row-large
-          items-center
-        "
-      >
-        <h1>
-          {{ doc.notInserted ? t`New Entry` : doc.name }}
-        </h1>
-        <p class="text-gray-600">
-          {{ t`Journal Entry` }}
-        </p>
-      </div>
       <hr />
       <div>
         <div class="m-4 grid grid-cols-3 gap-y-4 gap-x-4">
@@ -148,6 +134,7 @@ import FormControl from 'src/components/Controls/FormControl.vue';
 import Table from 'src/components/Controls/Table.vue';
 import DropdownWithActions from 'src/components/DropdownWithActions.vue';
 import FormContainer from 'src/components/FormContainer.vue';
+import FormHeader from 'src/components/FormHeader.vue';
 import StatusBadge from 'src/components/StatusBadge.vue';
 import { fyo } from 'src/initFyo';
 import { docsPathMap } from 'src/utils/misc';
@@ -169,6 +156,7 @@ export default {
     FormControl,
     Table,
     FormContainer,
+    FormHeader
 },
   provide() {
     return {

src/shims-vue-custom.d.ts

@@ -0,0 +1,10 @@
+import { Fyo } from 'fyo';
+import { TranslationLiteral } from 'fyo/utils/translation';
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    t: (...args: TranslationLiteral[]) => string;
+    fyo: Fyo;
+    platform: string;
+  }
+}