fix: list display, minor UI fixes

reports/GeneralLedger/GeneralLedger.ts

@@ -279,7 +279,7 @@ export class GeneralLedger extends Report {
       'reverts',
     ];
 
-    const filters = {} ?? this._getQueryFilters();
+    const filters = this._getQueryFilters();
     const entries = (await this.fyo.db.getAllRaw(
       ModelNameEnum.AccountingLedgerEntry,
       {
@@ -493,8 +493,6 @@ export class GeneralLedger extends Report {
   /**
    * TODO: Order by date and then the number
    * TODO: Something is wrong with dummy data, there are entries from 2022 Dec
-   * TODO: Add pagination
    * TODO: Always visible scrollbar
-   * TODO: Extract out list view report to a different component
    */
 }

src/components/Report/ListReport.vue

@@ -1,9 +1,9 @@
 <template>
-  <div>
+  <div class="overflow-hidden flex flex-col h-full">
     <!-- Report Outer Container -->
-    <div class="overflow-x-scroll">
+    <div class="overflow-x-scroll overflow-y-hidden">
+      <!-- Title Row -->
       <div class="inline-block">
-        <!-- Title Row -->
         <div
           class="flex items-center border-b"
           :style="{ height: `${hconst}px` }"
@@ -24,39 +24,43 @@
             {{ col.label }}
           </p>
         </div>
+      </div>
 
-        <!-- Report Rows Container -->
+      <!-- Report Rows Container -->
-        <div class="overflow-y-scroll">
+      <div
-          <!-- :style="{ height: `${hconst * maxRows + 5}px` }" -->
+        class="overflow-y-scroll inline-block"
-          <!-- Report Rows -->
+        style="height: calc(100% - 49px)"
+      >
+        <!-- Report Rows -->
+        <div
+          v-for="(row, r) in report.reportData.slice(pageStart, pageEnd)"
+          :key="r + '-row'"
+          class="flex items-center"
+          :style="{ height: `${hconst}px` }"
+          :class="r !== pageEnd - 1 ? 'border-b' : ''"
+        >
+          <!-- Report Cell -->
           <div
-            v-for="(row, r) in report.reportData.slice(pageStart, pageEnd)"
+            v-for="(cell, c) in row"
-            :key="r + '-row'"
+            :key="`${c}-${r}-cell`"
-            class="border-b flex items-center"
+            :style="getCellStyle(cell, c)"
-            :style="{ height: `${hconst}px` }"
+            class="
+              text-gray-900 text-base
+              px-3
+              flex-shrink-0
+              overflow-x-scroll
+              whitespace-nowrap
+            "
           >
-            <!-- Report Cell -->
+            {{ cell.value }}
-            <div
-              v-for="(cell, c) in row"
-              :key="`${c}-${r}-cell`"
-              :style="getCellStyle(cell, c)"
-              class="
-                text-gray-900 text-base
-                px-3
-                flex-shrink-0
-                overflow-x-scroll
-                whitespace-nowrap
-              "
-            >
-              {{ cell.value }}
-            </div>
           </div>
         </div>
+        <!-- </div> -->
       </div>
     </div>
 
     <!-- Pagination Footer -->
-    <div class="mt-auto">
+    <div class="mt-auto flex-shrink-0">
       <hr />
       <Paginator
         :item-count="report?.reportData?.length ?? 0"
@@ -78,16 +82,10 @@ export default defineComponent({
     return {
       wconst: 8,
       hconst: 48,
-      loading: false,
       pageStart: 0,
       pageEnd: 0,
     };
   },
-  computed: {
-    maxRows() {
-      return 18 - Math.ceil(this.report.filters.length / 5);
-    },
-  },
   methods: {
     setPageIndices({ start, end }) {
       this.pageStart = start;

src/pages/ChartOfAccounts.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="flex flex-col overflow-y-hidden">
+  <div class="flex flex-col h-full">
     <PageHeader :title="t`Chart of Accounts`" />
 
     <!-- Chart of Accounts -->
-    <div class="flex-1 flex flex-col px-8 overflow-y-auto" v-if="root">
+    <div class="flex-1 flex flex-col mx-4 overflow-y-auto mb-4" v-if="root">
       <!-- Chart of Accounts Indented List -->
       <template v-for="account in allAccounts" :key="account.name">
         <!-- Account List Item -->

src/pages/DataImport.vue

@@ -16,7 +16,7 @@
     </PageHeader>
 
     <div
-      class="flex px-8 mt-2 text-base w-full flex-col gap-8"
+      class="flex px-4 mt-2 text-base w-full flex-col gap-8"
       v-if="!complete"
     >
       <!-- Type selector -->
@@ -444,7 +444,7 @@ export default {
         label: this.t`Import Type`,
         fieldtype: 'AutoComplete',
         placeholder: this.t`Import Type`,
-        options: Object.keys(this.labelSchemaNameMap)
+        options: Object.keys(this.labelSchemaNameMap),
       };
     },
     labelSchemaNameMap() {

src/pages/Desk.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex overflow-hidden">
     <Sidebar
-      class="w-48 flex-shrink-0"
+      class="w-sidebar flex-shrink-0"
       @change-db-file="$emit('change-db-file')"
     />
     <div class="flex flex-1 overflow-y-hidden bg-white">

src/styles/index.css

@@ -56,3 +56,11 @@ html {
 .w-600 {
   width: 600px;
 }
+
+.w-sidebar {
+  width: 12rem;
+}
+
+.w-desk {
+  width: calc(100vw - 12rem);
+}