fix: Report

- Specify column width in Row
- Horizontal and Vertical scroll (wip)

reports/GeneralLedger/GeneralLedgerView.js

@@ -44,14 +44,14 @@ module.exports = class GeneralLedgerView extends ReportPage {
 
   getColumns() {
     return [
-      {
-        label: 'Date',
-        fieldtype: 'Date'
-      },
       {
         label: 'Account',
         fieldtype: 'Link'
       },
+      {
+        label: 'Date',
+        fieldtype: 'Date'
+      },
       {
         label: 'Debit',
         fieldtype: 'Currency'

reports/GeneralLedger/viewConfig.js

@@ -93,16 +93,16 @@ const viewConfig = {
   ],
   getColumns() {
     return [
-      {
-        label: 'Date',
-        fieldtype: 'Date',
-        fieldname: 'date'
-      },
       {
         label: 'Account',
         fieldtype: 'Link',
         fieldname: 'account'
       },
+      {
+        label: 'Date',
+        fieldtype: 'Date',
+        fieldname: 'date'
+      },
       {
         label: 'Debit',
         fieldtype: 'Currency',

src/components/Row.vue

@@ -7,6 +7,10 @@
 export default {
   name: 'Row',
   props: {
+    columnWidth: {
+      type: String,
+      default: '1fr'
+    },
     columnCount: {
       type: Number,
       default: 0
@@ -21,7 +25,7 @@ export default {
     style() {
       let obj = {};
       if (this.columnCount) {
-        obj['grid-template-columns'] = `repeat(${this.columnCount}, 1fr)`;
+        obj['grid-template-columns'] = `repeat(${this.columnCount}, ${this.columnWidth})`;
       }
       if (this.ratio.length) {
         obj['grid-template-columns'] = this.ratio.map(r => `${r}fr`).join(' ');

src/pages/ListView/ListCell.vue

@@ -16,13 +16,7 @@ export default {
   computed: {
     columnValue() {
       let { column, doc } = this;
-      // Since currency is formatted in customer currency
-      // frappe.format parses it back into company currency
-      if (['Float', 'Currency'].includes(column.fieldtype)) {
-        return column.getValue(doc);
-      } else {
-        return frappe.format(column.getValue(doc), column.fieldtype);
-      }
+      return frappe.format(column.getValue(doc), column.fieldtype);
     },
     customRenderer() {
       if (!this.column.render) return;

src/pages/Report.vue

@@ -1,28 +1,36 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col max-w-full">
     <PageHeader>
       <h1 slot="title" class="text-xl font-bold">{{ report.title }}</h1>
       <template slot="actions">
         <SearchBar class="ml-2" />
       </template>
     </PageHeader>
-    <div class="flex flex-col flex-1 px-8 mt-4">
-      <Row :columnCount="columns.length" gap="1rem">
-        <div
-          class="text-gray-600 text-sm truncate py-4"
-          v-for="column in columns"
-          :key="column.label"
-        >{{ column.label }}</div>
-      </Row>
-      <div class="flex-1 overflow-auto">
-        <Row v-for="(row, i) in rows" :columnCount="columns.length" gap="1rem" :key="i">
+    <div class="px-8 mt-4">
+      <div class="overflow-auto" :style="{height: 'calc(100vh - 6rem)'}">
+        <Row :columnCount="columns.length" gap="1rem" column-width="minmax(200px, 1fr)">
           <div
-            class="text-gray-900 text-sm truncate py-4"
+            class="text-gray-600 text-sm truncate py-4"
             v-for="column in columns"
             :key="column.label"
-            v-html="row[column.fieldname]"
-          ></div>
+          >{{ column.label }}</div>
         </Row>
+        <div class="flex-1">
+          <Row
+            v-for="(row, i) in rows"
+            :columnCount="columns.length"
+            gap="1rem"
+            :key="i"
+            column-width="minmax(200px, 1fr)"
+          >
+            <div
+              class="text-gray-900 text-sm truncate py-4"
+              v-for="column in columns"
+              :key="column.label"
+              v-html="row[column.fieldname]"
+            ></div>
+          </Row>
+        </div>
       </div>
     </div>
   </div>