From cc6c7883a8e22155ab07abc3cf4ba9f3a4ebce01 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Fri, 8 Nov 2019 16:19:06 +0530
Subject: [PATCH] fix: Report

- Specify column width in Row
- Horizontal and Vertical scroll (wip)
---
 reports/GeneralLedger/GeneralLedgerView.js |  8 ++---
 reports/GeneralLedger/viewConfig.js        | 10 +++---
 src/components/Row.vue                     |  6 +++-
 src/pages/ListView/ListCell.vue            |  8 +----
 src/pages/Report.vue                       | 36 +++++++++++++---------
 5 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/reports/GeneralLedger/GeneralLedgerView.js b/reports/GeneralLedger/GeneralLedgerView.js
index dedf4027..8f7acedd 100644
--- a/reports/GeneralLedger/GeneralLedgerView.js
+++ b/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'
diff --git a/reports/GeneralLedger/viewConfig.js b/reports/GeneralLedger/viewConfig.js
index f91c3a4b..bb2ffa5c 100644
--- a/reports/GeneralLedger/viewConfig.js
+++ b/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',
diff --git a/src/components/Row.vue b/src/components/Row.vue
index 5a678065..2ae0c6ae 100644
--- a/src/components/Row.vue
+++ b/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(' ');
diff --git a/src/pages/ListView/ListCell.vue b/src/pages/ListView/ListCell.vue
index 541b30ba..a5ca4973 100644
--- a/src/pages/ListView/ListCell.vue
+++ b/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;
diff --git a/src/pages/Report.vue b/src/pages/Report.vue
index 9103e2d7..01689cfa 100644
--- a/src/pages/Report.vue
+++ b/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>