From e6b8c8a1b6bcd43825aa1eea19aeb136ae97bd6c Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Sat, 30 Apr 2022 00:34:08 +0530
Subject: [PATCH] incr: get JournalEntryForm to render

---
 fyo/utils/index.ts                       |  11 ++-
 src/components/Controls/AutoComplete.vue |   1 -
 src/components/Controls/Select.vue       |   8 +-
 src/components/Controls/Table.vue        |   8 +-
 src/pages/JournalEntryForm.vue           | 115 ++++++++++++++---------
 src/pages/QuickEditForm.vue              |  24 +++--
 src/renderer.ts                          |   1 +
 src/router.ts                            |   6 +-
 8 files changed, 98 insertions(+), 76 deletions(-)

diff --git a/fyo/utils/index.ts b/fyo/utils/index.ts
index f59170df..ba7bb131 100644
--- a/fyo/utils/index.ts
+++ b/fyo/utils/index.ts
@@ -3,6 +3,7 @@ import { Doc } from 'fyo/model/doc';
 import { Action } from 'fyo/model/types';
 import { pesa } from 'pesa';
 import { Field, OptionField, SelectOption } from 'schemas/types';
+import { getIsNullOrUndef } from 'utils';
 
 export function slug(str: string) {
   return str
@@ -77,7 +78,7 @@ export async function getSingleValue(
 
 export function getOptionList(
   field: Field,
-  doc: Doc | undefined
+  doc: Doc | undefined | null
 ): SelectOption[] {
   const list = getRawOptionList(field, doc);
   return list.map((option) => {
@@ -92,17 +93,17 @@ export function getOptionList(
   });
 }
 
-function getRawOptionList(field: Field, doc: Doc | undefined) {
+function getRawOptionList(field: Field, doc: Doc | undefined | null) {
   const options = (field as OptionField).options;
   if (options && options.length > 0) {
     return (field as OptionField).options;
   }
 
-  if (doc === undefined) {
+  if (getIsNullOrUndef(doc)) {
     return [];
   }
 
-  const Model = doc.fyo.models[doc.schemaName];
+  const Model = doc!.fyo.models[doc!.schemaName];
   if (Model === undefined) {
     return [];
   }
@@ -112,5 +113,5 @@ function getRawOptionList(field: Field, doc: Doc | undefined) {
     return [];
   }
 
-  return getList(doc);
+  return getList(doc!);
 }
diff --git a/src/components/Controls/AutoComplete.vue b/src/components/Controls/AutoComplete.vue
index d317d526..f4eb00a8 100644
--- a/src/components/Controls/AutoComplete.vue
+++ b/src/components/Controls/AutoComplete.vue
@@ -16,7 +16,6 @@
           flex
           items-center
           justify-between
-          bg-white
           focus-within:bg-gray-200
           pr-2
           rounded
diff --git a/src/components/Controls/Select.vue b/src/components/Controls/Select.vue
index 871e47ec..b30964db 100644
--- a/src/components/Controls/Select.vue
+++ b/src/components/Controls/Select.vue
@@ -4,13 +4,7 @@
       {{ df.label }}
     </div>
     <div
-      class="
-        flex
-        items-center
-        justify-between
-        bg-white
-        focus-within:bg-gray-200
-      "
+      class="flex items-center justify-between focus-within:bg-gray-200"
       :class="inputClasses"
     >
       <select
diff --git a/src/components/Controls/Table.vue b/src/components/Controls/Table.vue
index 079f40ea..bfbd76d6 100644
--- a/src/components/Controls/Table.vue
+++ b/src/components/Controls/Table.vue
@@ -89,9 +89,11 @@ export default {
     Row,
     TableRow,
   },
-  inject: ['doc'],
-  mounted(){
-    window.tab = this
+  inject: {
+    doc: { default: null },
+  },
+  mounted() {
+    window.tab = this;
   },
   data: () => ({ rowContainerHeight: null }),
   watch: {
diff --git a/src/pages/JournalEntryForm.vue b/src/pages/JournalEntryForm.vue
index 7d996d73..7beed1ec 100644
--- a/src/pages/JournalEntryForm.vue
+++ b/src/pages/JournalEntryForm.vue
@@ -1,27 +1,30 @@
 <template>
   <div class="flex flex-col">
+    <!-- Page Header (Title, Buttons, etc) -->
     <PageHeader :backLink="true">
       <template #actions v-if="doc">
         <StatusBadge :status="status" />
         <DropdownWithActions class="ml-2" :actions="actions" />
         <Button
-          v-if="doc._notInserted || doc._dirty"
+          v-if="doc.notInserted || doc.dirty"
           type="primary"
           class="text-white text-xs ml-2"
-          @click="onSaveClick"
+          @click="sync"
         >
           {{ t`Save` }}
         </Button>
         <Button
-          v-if="!doc._dirty && !doc._notInserted && !doc.submitted"
+          v-else-if="!doc.dirty && !doc.notInserted && !doc.submitted"
           type="primary"
           class="text-white text-xs ml-2"
-          @click="onSubmitClick"
+          @click="submit"
         >
           {{ t`Submit` }}
         </Button>
       </template>
     </PageHeader>
+
+    <!-- Journal Entry Form -->
     <div v-if="doc" class="flex justify-center flex-1 mb-8 mt-2">
       <div
         class="border rounded-lg shadow h-full flex flex-col justify-between"
@@ -30,12 +33,14 @@
         <div>
           <div class="mt-8 px-6">
             <h1 class="text-2xl font-semibold">
-              {{ doc._notInserted ? t`New Journal Entry` : doc.name }}
+              {{ doc.notInserted ? t`New Journal Entry` : doc.name }}
             </h1>
+
+            <!-- First Column of Fields -->
             <div class="flex justify-between mt-2 gap-2">
               <div class="w-1/3">
                 <FormControl
-                  :df="meta.getField('entryType')"
+                  :df="getField('entryType')"
                   :value="doc.entryType"
                   placeholder="Entry Type"
                   @change="(value) => doc.set('entryType', value)"
@@ -45,7 +50,7 @@
                 />
                 <FormControl
                   class="mt-2"
-                  :df="meta.getField('date')"
+                  :df="getField('date')"
                   :value="doc.date"
                   :placeholder="'Date'"
                   @change="(value) => doc.set('date', value)"
@@ -54,9 +59,11 @@
                   :class="doc.submitted && 'pointer-events-none'"
                 />
               </div>
+
+              <!-- Second Column of Fields -->
               <div class="w-1/3">
                 <FormControl
-                  :df="meta.getField('referenceNumber')"
+                  :df="getField('referenceNumber')"
                   :value="doc.referenceNumber"
                   :placeholder="'Reference Number'"
                   @change="(value) => doc.set('referenceNumber', value)"
@@ -66,7 +73,7 @@
                 />
                 <FormControl
                   class="mt-2"
-                  :df="meta.getField('referenceDate')"
+                  :df="getField('referenceDate')"
                   :value="doc.referenceDate"
                   :placeholder="'Reference Date'"
                   @change="(value) => doc.set('referenceDate', value)"
@@ -75,43 +82,52 @@
                   :class="doc.submitted && 'pointer-events-none'"
                 />
               </div>
+
+              <!-- Third Column of Fields -->
               <div class="w-1/3">
                 <FormControl
-                  :df="meta.getField('numberSeries')"
+                  :df="getField('numberSeries')"
                   :value="doc.numberSeries"
                   @change="(value) => doc.set('numberSeries', value)"
-                  input-class="bg-gray-100 p-2 text-base"
-                  :read-only="!doc._notInserted || doc.submitted"
+                  class="bg-gray-100 rounded"
+                  input-class="p-2 text-base bg-transparent"
+                  :read-only="!doc.notInserted || doc.submitted"
                   :class="doc.submitted && 'pointer-events-none'"
                 />
               </div>
             </div>
           </div>
-          <div class="mt-2 px-6 text-base">
-            <FormControl
-              :df="meta.getField('accounts')"
-              :value="doc.accounts"
-              :showHeader="true"
-              :max-rows-before-overflow="4"
-              @change="(value) => doc.set('accounts', value)"
-              :read-only="doc.submitted"
-            />
-          </div>
+
+          <!-- Account Entries Table -->
+          <FormControl
+            class="mt-2 px-6 text-base"
+            :df="getField('accounts')"
+            :value="doc.accounts"
+            :showHeader="true"
+            :max-rows-before-overflow="4"
+            @change="(value) => doc.set('accounts', value)"
+            :read-only="doc.submitted"
+          />
         </div>
+
+        <!-- Footer -->
         <div class="px-6 mb-6">
           <div
             class="grid items-center border-t pt-3 pr-2"
             style="grid-template-columns: 1.3fr 1fr 1fr"
           >
+            <!-- User Remark -->
             <div class="text-sm">
               <FormControl
-                :df="meta.getField('userRemark')"
+                :df="getField('userRemark')"
                 :value="doc.userRemark"
                 @change="(value) => doc.set('userRemark', value)"
                 :class="doc.submitted && 'pointer-events-none'"
                 :read-only="doc.submitted"
               />
             </div>
+
+            <!-- Debit and Credit -->
             <div class="text-right font-semibold text-green-600 px-3">
               {{ totalDebit }}
             </div>
@@ -125,13 +141,19 @@
   </div>
 </template>
 <script>
+import { computed } from '@vue/reactivity';
+import { ModelNameEnum } from 'models/types';
 import Button from 'src/components/Button';
 import FormControl from 'src/components/Controls/FormControl.vue';
 import DropdownWithActions from 'src/components/DropdownWithActions';
 import PageHeader from 'src/components/PageHeader';
 import StatusBadge from 'src/components/StatusBadge';
 import { fyo } from 'src/initFyo';
-import { getActionsForDocument, routeTo, showMessageDialog } from 'src/utils';
+import {
+getActionsForDocument,
+routeTo,
+showMessageDialog
+} from 'src/utils/ui';
 import { handleErrorWithDialog } from '../errorHandling';
 
 export default {
@@ -146,22 +168,36 @@ export default {
   },
   provide() {
     return {
-      doctype: 'JournalEntry',
+      schemaName: this.schemaName,
       name: this.name,
+      doc: computed(() => this.doc),
     };
   },
   data() {
     return {
-      doctype: 'JournalEntry',
+      schemaName: ModelNameEnum.JournalEntry,
       doc: null,
     };
   },
+  async mounted() {
+    try {
+      this.doc = await fyo.doc.getDoc(this.schemaName, this.name);
+    } catch (error) {
+      if (error instanceof fyo.errors.NotFoundError) {
+        routeTo(`/list/${this.schemaName}`);
+        return;
+      }
+
+      this.handleError(error);
+    }
+
+    if (fyo.store.isDevelopment) {
+      window.je = this;
+    }
+  },
   computed: {
-    meta() {
-      return fyo.getMeta(this.doctype);
-    },
     status() {
-      if (this.doc._notInserted || !this.doc.submitted) {
+      if (this.doc.notInserted || !this.doc.submitted) {
         return 'Draft';
       }
 
@@ -185,23 +221,14 @@ export default {
       return getActionsForDocument(this.doc);
     },
   },
-  async mounted() {
-    try {
-      this.doc = await fyo.doc.getDoc(this.doctype, this.name);
-      window.je = this.doc;
-    } catch (error) {
-      if (error instanceof fyo.errors.NotFoundError) {
-        routeTo(`/list/${this.doctype}`);
-        return;
-      }
-      this.handleError(error);
-    }
-  },
   methods: {
-    async onSaveClick() {
+    getField(fieldname) {
+      return fyo.getField(ModelNameEnum.JournalEntry, fieldname);
+    },
+    async sync() {
       return this.doc.sync().catch(this.handleError);
     },
-    async onSubmitClick() {
+    async submit() {
       showMessageDialog({
         message: this.t`Are you sure you want to submit this Journal Entry?`,
         buttons: [
diff --git a/src/pages/QuickEditForm.vue b/src/pages/QuickEditForm.vue
index a3571c30..85bb64aa 100644
--- a/src/pages/QuickEditForm.vue
+++ b/src/pages/QuickEditForm.vue
@@ -79,6 +79,7 @@
 </template>
 
 <script>
+import { computed } from '@vue/reactivity';
 import { t } from 'fyo';
 import Button from 'src/components/Button.vue';
 import FormControl from 'src/components/Controls/FormControl.vue';
@@ -106,13 +107,19 @@ export default {
     DropdownWithActions,
   },
   provide() {
-    let vm = this;
     return {
       schemaName: this.schemaName,
       name: this.name,
-      get doc() {
-        return vm.doc;
-      },
+      doc: computed(() => this.doc),
+    };
+  },
+  data() {
+    return {
+      doc: null,
+      values: null,
+      titleField: null,
+      imageField: null,
+      statusText: null,
     };
   },
   mounted() {
@@ -124,15 +131,6 @@ export default {
       window.qef = this;
     }
   },
-  data() {
-    return {
-      doc: null,
-      values: null,
-      titleField: null,
-      imageField: null,
-      statusText: null,
-    };
-  },
   async created() {
     await this.fetchFieldsAndDoc();
   },
diff --git a/src/renderer.ts b/src/renderer.ts
index 8ce8aca2..76c446d9 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -29,6 +29,7 @@ import { setLanguageMap } from './utils/language';
   const app = createApp({
     template: '<App/>',
   });
+  app.config.unwrapInjectedRef = true;
   setErrorHandlers(app);
 
   app.use(router);
diff --git a/src/router.ts b/src/router.ts
index 1772a89a..65e8615d 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -4,7 +4,7 @@ import Dashboard from 'src/pages/Dashboard/Dashboard.vue';
 import GetStarted from 'src/pages/GetStarted.vue';
 // import DataImport from 'src/pages/DataImport.vue';
 // import InvoiceForm from 'src/pages/InvoiceForm.vue';
-// import JournalEntryForm from 'src/pages/JournalEntryForm.vue';
+import JournalEntryForm from 'src/pages/JournalEntryForm.vue';
 import ListView from 'src/pages/ListView/ListView.vue';
 // import PrintView from 'src/pages/PrintView/PrintView.vue';
 import QuickEditForm from 'src/pages/QuickEditForm.vue';
@@ -22,7 +22,6 @@ const routes: RouteRecordRaw[] = [
     path: '/get-started',
     component: GetStarted,
   },
-  /*
   {
     path: '/edit/JournalEntry/:name',
     name: 'JournalEntryForm',
@@ -33,7 +32,7 @@ const routes: RouteRecordRaw[] = [
     props: {
       default: (route) => {
         // for sidebar item active state
-        route.params.doctype = 'JournalEntry';
+        route.params.schemaName = 'JournalEntry';
         return {
           doctype: 'JournalEntry',
           name: route.params.name,
@@ -42,6 +41,7 @@ const routes: RouteRecordRaw[] = [
       edit: (route) => route.query,
     },
   },
+  /*
   {
     path: '/edit/:doctype/:name',
     name: 'InvoiceForm',