incr: get JournalEntryForm to render

2024-11-08 14:50:56 +00:00 · 2022-04-30 00:34:08 +05:30 · 2022-04-30 00:34:08 +05:30 · e6b8c8a1b6
commit e6b8c8a1b6
parent 3e466c647c
8 changed files with 98 additions and 76 deletions
--- 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!);
 }
--- 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
--- 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
--- 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: {
--- 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: [
--- 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();
  },
--- 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);
--- 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',