From 91e8fa52f447ce0acf7c0b41b725dee859a5e399 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Mon, 21 Feb 2022 16:26:57 +0530
Subject: [PATCH 01/10] feat: setup Data Import page

---
 models/doctype/Item/Item.js     |   1 +
 src/background.js               |  28 ++++++
 src/components/Button.vue       |   8 +-
 src/dataImport.ts               |   9 ++
 src/messages.js                 |   1 +
 src/pages/DataImport.vue        | 165 ++++++++++++++++++++++++++++++++
 src/pages/DataImport/index.vue  | 163 -------------------------------
 src/pages/Settings/Settings.vue |   2 +
 src/router.js                   |   6 ++
 src/sidebarConfig.js            |   4 +
 10 files changed, 223 insertions(+), 164 deletions(-)
 create mode 100644 src/dataImport.ts
 create mode 100644 src/pages/DataImport.vue
 delete mode 100644 src/pages/DataImport/index.vue

diff --git a/models/doctype/Item/Item.js b/models/doctype/Item/Item.js
index 0adb9b2a..aabf92fc 100644
--- a/models/doctype/Item/Item.js
+++ b/models/doctype/Item/Item.js
@@ -2,6 +2,7 @@ import frappe, { t } from 'frappe';
 
 export default {
   name: 'Item',
+  label: t`Item`,
   doctype: 'DocType',
   isSingle: 0,
   regional: 1,
diff --git a/src/background.js b/src/background.js
index b69e3581..069e27a1 100644
--- a/src/background.js
+++ b/src/background.js
@@ -255,6 +255,34 @@ ipcMain.handle(IPC_ACTIONS.GET_COA_LIST, async () => {
   return coas;
 });
 
+ipcMain.handle(IPC_ACTIONS.GET_FILE, async (event, options) => {
+  const response = {
+    name: '',
+    filePath: '',
+    success: false,
+    data: null,
+    canceled: false,
+  };
+  const window = event.sender.getOwnerBrowserWindow();
+  const { filePaths, canceled } = await dialog.showOpenDialog(window, options);
+
+  response.filePath = filePaths?.[0];
+  response.canceled = canceled;
+
+  if (!response.filePath) {
+    return response;
+  }
+
+  response.success = true;
+  if (canceled) {
+    return response;
+  }
+
+  response.name = path.basename(response.filePath);
+  response.data = await fs.readFile(response.filePath);
+  return response;
+});
+
 /* ------------------------------
  * Register autoUpdater events lis
  * ------------------------------*/
diff --git a/src/components/Button.vue b/src/components/Button.vue
index 5a18f317..9baeeb64 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -24,11 +24,17 @@ export default {
       type: Boolean,
       default: false,
     },
+    padding: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     style() {
       return {
-        padding: this.icon ? '6px 12px' : '6px 24px',
+        ...(this.padding
+          ? { padding: this.icon ? '6px 12px' : '6px 24px' }
+          : {}),
         color: this.type === 'primary' ? '#fff' : '#112B42',
         'background-image':
           this.type === 'primary'
diff --git a/src/dataImport.ts b/src/dataImport.ts
new file mode 100644
index 00000000..d4393d1a
--- /dev/null
+++ b/src/dataImport.ts
@@ -0,0 +1,9 @@
+export const importable = [
+  'SalesInvoice',
+  'PurchaseInvoice',
+  'Payment',
+  'JournalEntry',
+  'Customer',
+  'Supplier',
+  'Item',
+];
diff --git a/src/messages.js b/src/messages.js
index fcb599d1..3ec6db53 100644
--- a/src/messages.js
+++ b/src/messages.js
@@ -26,6 +26,7 @@ export const IPC_ACTIONS = {
   GET_LANGUAGE_MAP: 'get-language-map',
   CHECK_FOR_UPDATES: 'check-for-updates',
   GET_COA_LIST: 'get-coa-list',
+  GET_FILE: 'get-file',
 };
 
 // ipcMain.send(...)
diff --git a/src/pages/DataImport.vue b/src/pages/DataImport.vue
new file mode 100644
index 00000000..00a77122
--- /dev/null
+++ b/src/pages/DataImport.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="flex flex-col overflow-hidden">
+    <PageHeader>
+      <template #title>
+        <h1 class="text-2xl font-bold">
+          {{ t`Data Import` }}
+        </h1>
+      </template>
+      <template #actions>
+        <Button
+          v-if="canCancel"
+          type="secondary"
+          class="text-white text-xs ml-2"
+          @click="cancel"
+        >
+          {{ t`Cancel` }}
+        </Button>
+      </template>
+    </PageHeader>
+    <div class="flex justify-center flex-1 mb-8 mt-2">
+      <div
+        class="
+          border
+          rounded-lg
+          shadow
+          h-full
+          flex flex-col
+          justify-between
+          p-6
+        "
+        style="width: 600px"
+      >
+        <div>
+          <div class="flex flex-row justify-between items-center">
+            <FormControl
+              :df="importableDf"
+              input-class="bg-gray-100 text-gray-900 text-base"
+              class="w-1/4"
+              :value="importType"
+              @change="
+                (v) => {
+                  importType = v;
+                }
+              "
+            />
+            <p
+              class="text-base text-base"
+              :class="fileName ? 'text-gray-900' : 'text-gray-700'"
+            >
+              {{ helperText }}
+            </p>
+          </div>
+          <hr class="mt-6" />
+        </div>
+        <div v-if="importType">
+          <hr class="mb-6" />
+          <div class="flex flex-row justify-between text-base">
+            <Button class="w-1/4" :padding="false">{{ secondaryLabel }}</Button>
+            <Button class="w-1/4" type="primary" @click="getFile">{{
+              primaryLabel
+            }}</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import FormControl from '@/components/Controls/FormControl';
+import PageHeader from '@/components/PageHeader.vue';
+import { importable } from '@/dataImport';
+import frappe from 'frappe';
+import Button from '@/components/Button.vue';
+import { ipcRenderer } from 'electron';
+import { IPC_ACTIONS } from '@/messages';
+import { showToast } from '@/utils';
+export default {
+  components: { PageHeader, FormControl, Button },
+  data() {
+    return {
+      file: null,
+      importType: '',
+    };
+  },
+  computed: {
+    fileName() {
+      if (!this.file) {
+        return '';
+      }
+      return this.file.name;
+    },
+    helperText() {
+      if (!this.importType) {
+        return this.t`Set an Import Type`;
+      } else if (!this.fileName) {
+        return this.t`Select a file for import`;
+      }
+      return this.fileName;
+    },
+    secondaryLabel() {
+      return this.file ? this.t`Toggle View` : this.t`Save Template`;
+    },
+    primaryLabel() {
+      return this.file ? this.t`Import Data` : this.t`Select File`;
+    },
+    importableDf() {
+      return {
+        fieldname: 'importType',
+        label: this.t`Import Type`,
+        fieldtype: 'AutoComplete',
+        placeholder: 'Import Type',
+        getList: () => importable.map((i) => frappe.models[i].label),
+      };
+    },
+    labelDoctypeMap() {
+      return importable
+        .map((i) => ({
+          name: i,
+          label: frappe.models[i].label,
+        }))
+        .reduce((acc, { name, label }) => {
+          acc[label] = name;
+          return acc;
+        }, {});
+    },
+    canCancel() {
+      return !!(this.file || this.importType);
+    },
+  },
+  methods: {
+    cancel() {
+      this.file = null;
+      this.importType = '';
+    },
+    handlePrimaryClick() {},
+    handleSecondaryClick() {},
+    saveTemplate() {},
+    getImportData() {},
+    async getFile() {
+      const options = {
+        title: this.t`Select File`,
+        properties: ['openFile'],
+        filters: [{ name: 'CSV', extensions: ['csv'] }],
+      };
+
+      const { success, canceled, filePath, data, name } =
+        await ipcRenderer.invoke(IPC_ACTIONS.GET_FILE, options);
+
+      if (!success) {
+        showToast({ message: this.t`File selection failed.`, type: 'error' });
+      }
+
+      if (!success || canceled) {
+        return;
+      }
+
+      this.file = {
+        name,
+        filePath,
+        data: new TextDecoder().decode(data),
+      };
+    },
+  },
+};
+</script>
diff --git a/src/pages/DataImport/index.vue b/src/pages/DataImport/index.vue
deleted file mode 100644
index de9bdc5b..00000000
--- a/src/pages/DataImport/index.vue
+++ /dev/null
@@ -1,163 +0,0 @@
-<template>
-  <div>
-    <div class="p-4">
-      <h4 class="pb-2">{{ t`Data Import` }}</h4>
-      <frappe-control
-        :docfield="{
-          fieldtype: 'Select',
-          fieldname: 'referenceDoctype',
-          options: ['Select...', 'Item', 'Party', 'Account'],
-        }"
-        @change="(doctype) => showTable(doctype)"
-      />
-      <f-button secondary v-if="doctype" primary @click="uploadCSV"
-        >Upload CSV</f-button
-      >
-      <f-button secondary v-if="doctype" primary @click="downloadCSV"
-        >Download CSV Template</f-button
-      >
-      <f-button primary @click="importData">Submit</f-button>
-
-      <frappe-control
-        v-if="doctype"
-        ref="fileInput"
-        style="position: absolute; display: none"
-        :docfield="{
-          fieldtype: 'File',
-          fieldname: 'CSV File',
-        }"
-        @change="uploadCSV"
-      />
-      <div class="pt-2" ref="datatable" v-once></div>
-    </div>
-  </div>
-</template>
-<script>
-import frappe from 'frappe';
-import DataTable from 'frappe-datatable';
-import { convertFieldsToDatatableColumns } from 'frappe/client/ui/utils';
-import { writeFile } from 'frappe/server/utils';
-import path from 'path';
-import csv2json from 'csvjson-csv2json';
-
-export default {
-  data() {
-    return {
-      doctype: undefined,
-      fileUploaded: false,
-    };
-  },
-  methods: {
-    showTable(doctype) {
-      this.doctype = doctype;
-      const meta = frappe.getMeta(doctype);
-      const columns = convertFieldsToDatatableColumns(meta.fields);
-      this.renderTable(columns);
-    },
-    renderTable(columns, rows) {
-      if (this.datatable) {
-        this.datatable.refresh(rows, columns);
-        return;
-      }
-      this.datatable = new DataTable(this.$refs.datatable, {
-        columns,
-        data: [[]],
-        pasteFromClipboard: true,
-      });
-    },
-    async downloadCSV() {
-      const meta = frappe.getMeta(this.doctype);
-      let csvString = '';
-      for (let field of meta.fields) {
-        csvString += field.label + ',';
-      }
-
-      const documentsPath =
-        process.env.NODE_ENV === 'development'
-          ? path.resolve('.')
-          : frappe.store.documentsPath;
-
-      let title = frappe.t`Message`;
-      let message = frappe.t`Template saved successfully.`;
-
-      if (documentsPath === undefined) {
-        title = frappe.t`Error`;
-        message = frappe.t`Template could not be saved.`;
-      } else {
-        await writeFile(
-          path.resolve(
-            documentsPath + `/frappe-accounting/${this.doctype}.csv`
-          ),
-          csvString
-        );
-      }
-
-      frappe.call({
-        method: 'show-dialog',
-        args: { title, message },
-      });
-    },
-    uploadCSV(file) {
-      if (file[0]) {
-        var reader = new FileReader();
-        reader.onload = () => {
-          const meta = frappe.getMeta(this.doctype);
-          let header = reader.result.split('\n')[0];
-          header = header.split(',').map((label) => {
-            let fieldname;
-            meta.fields.some((field) => {
-              if (field.label === label.trim()) {
-                fieldname = field.fieldname;
-                return true;
-              }
-            });
-            return fieldname;
-          });
-          let csvString = reader.result.split('\n');
-          csvString[0] = header;
-          csvString = csvString.join('\n');
-          const json = csv2json(csvString, { parseNumbers: true });
-          const columns = convertFieldsToDatatableColumns(meta.fields);
-          this.renderTable(columns, json);
-          this.$refs.fileInput.$children[0].$refs.input.value = '';
-        };
-        reader.readAsBinaryString(file[0]);
-        return;
-      }
-      //Click the file input
-      this.$refs.fileInput.$children[0].$refs.input.click();
-    },
-    importData() {
-      const rows = this.datatable.datamanager.getRows();
-
-      const data = rows.map((row) => {
-        return row.slice(1).reduce((prev, curr) => {
-          prev[curr.column.field.fieldname] = curr.content;
-          return prev;
-        }, {});
-      });
-
-      data.forEach(async (d) => {
-        try {
-          await frappe
-            .newDoc(
-              Object.assign(d, {
-                doctype: this.doctype,
-              })
-            )
-            .insert();
-        } catch (e) {
-          console.log(e);
-        }
-      });
-      frappe.call({
-        method: 'show-dialog',
-        args: {
-          title: 'Message',
-          message: `Data Imported Successfully`,
-        },
-      });
-    },
-  },
-};
-</script>
diff --git a/src/pages/Settings/Settings.vue b/src/pages/Settings/Settings.vue
index fff11dca..6d1c4481 100644
--- a/src/pages/Settings/Settings.vue
+++ b/src/pages/Settings/Settings.vue
@@ -1,4 +1,6 @@
 <template>
+  
+  
   <div class="flex flex-col overflow-hidden">
     <PageHeader>
       <template #title>
diff --git a/src/router.js b/src/router.js
index ace0cd23..906bb636 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,6 +1,7 @@
 import ChartOfAccounts from '@/pages/ChartOfAccounts';
 // standard views
 import Dashboard from '@/pages/Dashboard/Dashboard';
+import DataImport from '@/pages/DataImport';
 // custom views
 import GetStarted from '@/pages/GetStarted';
 import InvoiceForm from '@/pages/InvoiceForm';
@@ -94,6 +95,11 @@ const routes = [
       edit: (route) => route.query,
     },
   },
+  {
+    path: '/data_import',
+    name: 'Data Import',
+    component: DataImport,
+  },
   {
     path: '/settings',
     name: 'Settings',
diff --git a/src/sidebarConfig.js b/src/sidebarConfig.js
index 79e513f4..cbeb148f 100644
--- a/src/sidebarConfig.js
+++ b/src/sidebarConfig.js
@@ -121,6 +121,10 @@ const config = {
           route: '/list/Tax',
           doctype: 'Tax',
         },
+        {
+          label: t`Data Import`,
+          route: '/data_import',
+        },
         {
           label: t`Settings`,
           route: '/settings',

From 23e504a67d23e0b4abb8071f75be320808f60835 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Mon, 21 Feb 2022 17:57:01 +0530
Subject: [PATCH 02/10] feat: code to generate templates

---
 src/dataImport.ts        | 88 ++++++++++++++++++++++++++++++++++++++++
 src/pages/DataImport.vue | 59 ++++++++++++++++++++-------
 src/types/model.ts       | 26 ++++++++++++
 3 files changed, 159 insertions(+), 14 deletions(-)
 create mode 100644 src/types/model.ts

diff --git a/src/dataImport.ts b/src/dataImport.ts
index d4393d1a..30defe32 100644
--- a/src/dataImport.ts
+++ b/src/dataImport.ts
@@ -1,3 +1,6 @@
+import { Field, FieldType } from '@/types/model';
+import frappe from 'frappe';
+
 export const importable = [
   'SalesInvoice',
   'PurchaseInvoice',
@@ -7,3 +10,88 @@ export const importable = [
   'Supplier',
   'Item',
 ];
+
+interface TemplateField {
+  label: string;
+  fieldname: string;
+  required: boolean;
+}
+
+type LabelFieldMap = {
+  [key: string]: string;
+};
+
+export function getTemplateFields(doctype: string): TemplateField[] {
+  const fields: TemplateField[] = [];
+
+  // @ts-ignore
+  const primaryFields: Field[] = frappe.models[doctype].fields;
+  const tableTypes: string[] = [];
+
+  primaryFields.forEach(
+    ({ label, fieldtype, childtype, fieldname, required }) => {
+      if (fieldtype === FieldType.Table && childtype) {
+        tableTypes.push(childtype);
+      }
+
+      fields.push({
+        label,
+        fieldname,
+        required: Boolean(required ?? false),
+      });
+    }
+  );
+
+  tableTypes.forEach((childtype) => {
+    // @ts-ignore
+    const childFields: Field[] = frappe.models[childtype].fields;
+    childFields.forEach(({ label, fieldtype, fieldname, required }) => {
+      if (fieldtype === FieldType.Table) {
+        return;
+      }
+
+      fields.push({ label, fieldname, required: Boolean(required ?? false) });
+    });
+  });
+
+  return fields;
+}
+
+function getLabelFieldMap(templateFields: TemplateField[]): LabelFieldMap {
+  const map: LabelFieldMap = {};
+
+  templateFields.reduce((acc, tf) => {
+    const key = tf.label as string;
+    acc[key] = tf.fieldname;
+    return acc;
+  }, map);
+
+  return map;
+}
+
+function getTemplate(templateFields: TemplateField[]): string {
+  const labels = templateFields.map(({ label }) => `"${label}"`).join(',');
+  return [labels, ''].join('\n');
+}
+
+export class Importer {
+  doctype: string;
+  templateFields: TemplateField[];
+  _map: LabelFieldMap;
+  _template: string;
+
+  constructor(doctype: string) {
+    this.doctype = doctype;
+    this.templateFields = getTemplateFields(doctype);
+    this._map = getLabelFieldMap(this.templateFields);
+    this._template = getTemplate(this.templateFields);
+  }
+
+  get map() {
+    return this._map;
+  }
+
+  get template() {
+    return this._template;
+  }
+}
diff --git a/src/pages/DataImport.vue b/src/pages/DataImport.vue
index 00a77122..24aba801 100644
--- a/src/pages/DataImport.vue
+++ b/src/pages/DataImport.vue
@@ -37,11 +37,7 @@
               input-class="bg-gray-100 text-gray-900 text-base"
               class="w-1/4"
               :value="importType"
-              @change="
-                (v) => {
-                  importType = v;
-                }
-              "
+              @change="setImportType"
             />
             <p
               class="text-base text-base"
@@ -55,8 +51,13 @@
         <div v-if="importType">
           <hr class="mb-6" />
           <div class="flex flex-row justify-between text-base">
-            <Button class="w-1/4" :padding="false">{{ secondaryLabel }}</Button>
-            <Button class="w-1/4" type="primary" @click="getFile">{{
+            <Button
+              class="w-1/4"
+              :padding="false"
+              @click="handleSecondaryClick"
+              >{{ secondaryLabel }}</Button
+            >
+            <Button class="w-1/4" type="primary" @click="handlePrimaryClick">{{
               primaryLabel
             }}</Button>
           </div>
@@ -68,17 +69,18 @@
 <script>
 import FormControl from '@/components/Controls/FormControl';
 import PageHeader from '@/components/PageHeader.vue';
-import { importable } from '@/dataImport';
+import { importable, Importer } from '@/dataImport';
 import frappe from 'frappe';
 import Button from '@/components/Button.vue';
 import { ipcRenderer } from 'electron';
 import { IPC_ACTIONS } from '@/messages';
-import { showToast } from '@/utils';
+import { getSavePath, saveData, showToast } from '@/utils';
 export default {
   components: { PageHeader, FormControl, Button },
   data() {
     return {
       file: null,
+      importer: null,
       importType: '',
     };
   },
@@ -130,13 +132,42 @@ export default {
   methods: {
     cancel() {
       this.file = null;
+      this.importer = null;
       this.importType = '';
     },
-    handlePrimaryClick() {},
-    handleSecondaryClick() {},
-    saveTemplate() {},
-    getImportData() {},
-    async getFile() {
+    handlePrimaryClick() {
+      if (!this.file) {
+        this.selectFile();
+        return;
+      }
+
+      this.importData();
+    },
+    handleSecondaryClick() {
+      if (!this.file) {
+        this.saveTemplate();
+        return;
+      }
+
+      this.toggleView();
+    },
+    async saveTemplate() {
+      const template = this.importer.template;
+      const templateName = this.importType + ' ' + this.t`Template`;
+      const { cancelled, filePath } = await getSavePath(templateName, 'csv');
+
+      if (cancelled || filePath === '') {
+        return;
+      }
+      await saveData(template, filePath);
+    },
+    importData() {},
+    toggleView() {},
+    setImportType(importType) {
+      this.importType = importType;
+      this.importer = new Importer(this.labelDoctypeMap[this.importType]);
+    },
+    async selectFile() {
       const options = {
         title: this.t`Select File`,
         properties: ['openFile'],
diff --git a/src/types/model.ts b/src/types/model.ts
new file mode 100644
index 00000000..d1e05552
--- /dev/null
+++ b/src/types/model.ts
@@ -0,0 +1,26 @@
+export enum FieldType {
+  Data = 'Data',
+  Select = 'Select',
+  Link = 'Link',
+  Date = 'Date',
+  Table = 'Table',
+  AutoComplete = 'AutoComplete',
+  Check = 'Check',
+  AttachImage = 'AttachImage',
+  DynamicLink = 'DynamicLink',
+  Int = 'Int',
+  Float = 'Float',
+  Currency = 'Currency',
+  Text = 'Text',
+  Color = 'Color',
+}
+
+export interface Field {
+  fieldname: string;
+  fieldtype: FieldType;
+  label: string;
+  childtype?: string;
+  target?: string;
+  default?: unknown;
+  required?: number;
+}

From f230d779c9bfe0af655f00ef7e76486ee1cdbb9b Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Tue, 22 Feb 2022 12:00:37 +0530
Subject: [PATCH 03/10] feat: code for a decent csv parser

---
 src/csvParser.ts | 80 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 src/csvParser.ts

diff --git a/src/csvParser.ts b/src/csvParser.ts
new file mode 100644
index 00000000..8859efb8
--- /dev/null
+++ b/src/csvParser.ts
@@ -0,0 +1,80 @@
+function unwrapDq(item: string): string {
+  const s = item.at(0);
+  const e = item.at(-1);
+  if (s === '"' && e === '"') {
+    return item.slice(1, -1);
+  }
+
+  return item;
+}
+
+function splitCsvBlock(text: string): string[] {
+  if (!text.endsWith('\r\n')) {
+    text += '\r\n';
+  }
+  const lines = [];
+  let line = '';
+  let inDq = false;
+
+  for (let i = 0; i <= text.length; i++) {
+    const c = text[i];
+
+    if (
+      c === '"' &&
+      ((c[i + 1] === '"' && c[i + 2] === '"') || c[i + 1] !== '"')
+    ) {
+      inDq = !inDq;
+    }
+
+    if (!inDq && c === '\r' && text[i + 1] === '\n') {
+      lines.push(line);
+      line = '';
+      i = i + 1;
+      continue;
+    }
+
+    line += c;
+  }
+
+  return lines;
+}
+
+function splitCsvLine(line: string): string[] {
+  if (line.at(-1) !== ',') {
+    // if conforming to spec, it should not end with ','
+    line += ',';
+  }
+
+  const items = [];
+  let item = '';
+  let inDq = false;
+
+  for (let i = 0; i < line.length; i++) {
+    const c = line[i];
+
+    if (
+      c === '"' &&
+      ((c[i + 1] === '"' && c[i + 2] === '"') || c[i + 1] !== '"')
+    ) {
+      inDq = !inDq;
+    }
+
+    if (!inDq && c === ',') {
+      item = unwrapDq(item);
+      item = item.replaceAll('""', '"');
+      items.push(item);
+      item = '';
+      continue;
+    }
+
+    item += c;
+  }
+
+  return items;
+}
+
+export function parseCSV(text: string): string[][] {
+  //  Works on RFC 4180
+  const rows = splitCsvBlock(text);
+  return rows.map(splitCsvLine);
+}

From be68ab84f836dffeb505085124026451e4cf632a Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Tue, 22 Feb 2022 14:13:56 +0530
Subject: [PATCH 04/10] feat: add assign imported labels bar

---
 src/dataImport.ts        | 101 ++++++++++++++++++++----
 src/pages/DataImport.vue | 166 ++++++++++++++++++++++++++-------------
 2 files changed, 200 insertions(+), 67 deletions(-)

diff --git a/src/dataImport.ts b/src/dataImport.ts
index 30defe32..822a7c01 100644
--- a/src/dataImport.ts
+++ b/src/dataImport.ts
@@ -1,5 +1,6 @@
 import { Field, FieldType } from '@/types/model';
 import frappe from 'frappe';
+import { parseCSV } from './csvParser';
 
 export const importable = [
   'SalesInvoice',
@@ -11,25 +12,41 @@ export const importable = [
   'Item',
 ];
 
+type Exclusion = {
+  [key: string]: string[];
+};
+
+type Map = {
+  [key: string]: string;
+};
+
 interface TemplateField {
   label: string;
   fieldname: string;
   required: boolean;
 }
 
-type LabelFieldMap = {
-  [key: string]: string;
+const exclusion: Exclusion = {
+  Item: ['image'],
 };
 
-export function getTemplateFields(doctype: string): TemplateField[] {
+function getTemplateFields(doctype: string): TemplateField[] {
   const fields: TemplateField[] = [];
+  if (!doctype) {
+    return [];
+  }
 
   // @ts-ignore
   const primaryFields: Field[] = frappe.models[doctype].fields;
   const tableTypes: string[] = [];
+  let exclusionFields: string[] = exclusion[doctype] ?? [];
 
   primaryFields.forEach(
     ({ label, fieldtype, childtype, fieldname, required }) => {
+      if (exclusionFields.includes(fieldname)) {
+        return;
+      }
+
       if (fieldtype === FieldType.Table && childtype) {
         tableTypes.push(childtype);
       }
@@ -43,10 +60,15 @@ export function getTemplateFields(doctype: string): TemplateField[] {
   );
 
   tableTypes.forEach((childtype) => {
+    exclusionFields = exclusion[childtype] ?? [];
+
     // @ts-ignore
     const childFields: Field[] = frappe.models[childtype].fields;
     childFields.forEach(({ label, fieldtype, fieldname, required }) => {
-      if (fieldtype === FieldType.Table) {
+      if (
+        exclusionFields.includes(fieldname) ||
+        fieldtype === FieldType.Table
+      ) {
         return;
       }
 
@@ -57,8 +79,8 @@ export function getTemplateFields(doctype: string): TemplateField[] {
   return fields;
 }
 
-function getLabelFieldMap(templateFields: TemplateField[]): LabelFieldMap {
-  const map: LabelFieldMap = {};
+function getLabelFieldMap(templateFields: TemplateField[]): Map {
+  const map: Map = {};
 
   templateFields.reduce((acc, tf) => {
     const key = tf.label as string;
@@ -77,21 +99,72 @@ function getTemplate(templateFields: TemplateField[]): string {
 export class Importer {
   doctype: string;
   templateFields: TemplateField[];
-  _map: LabelFieldMap;
-  _template: string;
+  map: Map;
+  template: string;
+  parsedLabels: string[] = [];
+  assignedMap: Map = {}; // target: import
 
   constructor(doctype: string) {
     this.doctype = doctype;
     this.templateFields = getTemplateFields(doctype);
-    this._map = getLabelFieldMap(this.templateFields);
-    this._template = getTemplate(this.templateFields);
+    this.map = getLabelFieldMap(this.templateFields);
+    this.template = getTemplate(this.templateFields);
+    this.assignedMap = this.assignableLabels.reduce((acc: Map, k) => {
+      acc[k] = '';
+      return acc;
+    }, {});
   }
 
-  get map() {
-    return this._map;
+  get assignableLabels() {
+    return Object.keys(this.map);
   }
 
-  get template() {
-    return this._template;
+  get unassignedLabels() {
+    const assigned = Object.keys(this.assignedMap).map(
+      (k) => this.assignedMap[k]
+    );
+    return this.parsedLabels.filter((l) => !assigned.includes(l));
+  }
+
+  get columnsLabels() {
+    const assigned: string[] = [];
+    const unassigned: string[] = [];
+
+    Object.keys(this.map).forEach((k) => {
+      if (this.map) {
+        assigned.push(k);
+        return;
+      }
+      unassigned.push(k);
+    });
+
+    return [...assigned, ...unassigned];
+  }
+
+  selectFile(text: string): boolean {
+    const csv = parseCSV(text);
+    this.parsedLabels = csv[0];
+    const values = csv.slice(1);
+
+    if (values.some((v) => v.length !== this.parsedLabels.length)) {
+      return false;
+    }
+
+    this._setAssigned();
+    return true;
+  }
+
+  _setAssigned() {
+    const labels = [...this.parsedLabels];
+    labels.forEach((l) => {
+      if (this.assignedMap[l] !== '') {
+        return;
+      }
+
+      this.assignedMap[l] = l;
+    });
   }
 }
+
+// @ts-ignore
+window.pc = parseCSV;
diff --git a/src/pages/DataImport.vue b/src/pages/DataImport.vue
index 24aba801..dee61258 100644
--- a/src/pages/DataImport.vue
+++ b/src/pages/DataImport.vue
@@ -7,62 +7,72 @@
         </h1>
       </template>
       <template #actions>
+        <DropdownWithActions
+          class="ml-2"
+          :actions="actions"
+          v-if="canCancel || importType"
+        />
         <Button
-          v-if="canCancel"
-          type="secondary"
-          class="text-white text-xs ml-2"
-          @click="cancel"
+          v-if="importType"
+          type="primary"
+          class="text-sm ml-2"
+          @click="handlePrimaryClick"
+          >{{ primaryLabel }}</Button
         >
-          {{ t`Cancel` }}
-        </Button>
       </template>
     </PageHeader>
-    <div class="flex justify-center flex-1 mb-8 mt-2">
-      <div
-        class="
-          border
-          rounded-lg
-          shadow
-          h-full
-          flex flex-col
-          justify-between
-          p-6
-        "
-        style="width: 600px"
-      >
-        <div>
-          <div class="flex flex-row justify-between items-center">
-            <FormControl
-              :df="importableDf"
-              input-class="bg-gray-100 text-gray-900 text-base"
-              class="w-1/4"
-              :value="importType"
-              @change="setImportType"
-            />
-            <p
-              class="text-base text-base"
-              :class="fileName ? 'text-gray-900' : 'text-gray-700'"
-            >
-              {{ helperText }}
-            </p>
-          </div>
-          <hr class="mt-6" />
-        </div>
-        <div v-if="importType">
-          <hr class="mb-6" />
-          <div class="flex flex-row justify-between text-base">
-            <Button
-              class="w-1/4"
-              :padding="false"
-              @click="handleSecondaryClick"
-              >{{ secondaryLabel }}</Button
-            >
-            <Button class="w-1/4" type="primary" @click="handlePrimaryClick">{{
-              primaryLabel
-            }}</Button>
-          </div>
+    <!-- <div class="flex justify-center flex-1 mb-8 mt-2"> -->
+    <div class="flex px-8 mt-2 text-base w-full flex-col gap-8">
+      <!-- Type selector -->
+      <div class="flex flex-row justify-start items-center w-full">
+        <FormControl
+          :df="importableDf"
+          input-class="bg-gray-100 text-gray-900 text-base"
+          class="w-40"
+          :value="importType"
+          size="small"
+          @change="setImportType"
+        />
+        <p
+          class="text-base text-base ml-2"
+          :class="fileName ? 'text-gray-900 font-semibold' : 'text-gray-700'"
+        >
+          <span v-if="fileName" class="font-normal"
+            >{{ t`Selected file` }}
+          </span>
+          {{ helperText }}{{ fileName ? ',' : '' }}
+          <span v-if="fileName" class="font-normal">
+            {{ t`verify imported data and click on` }} </span
+          >{{ ' ' }}<span v-if="fileName">{{ t`Import Data` }}</span
+          >.
+        </p>
+      </div>
+
+      <!-- Label Assigner -->
+      <div v-if="fileName">
+        <h2 class="text-lg font-semibold">{{ t`Assign Imported Labels` }}</h2>
+        <div class="gap-2 mt-4 grid grid-flow-col overflow-scroll pb-4">
+          <FormControl
+            :show-label="true"
+            size="small"
+            class="w-28"
+            input-class="bg-gray-100"
+            v-for="(f, k) in importer.assignableLabels"
+            :df="getAssignerField(f)"
+            :value="importer.assignedMap[f] ?? ''"
+            @change="(v) => onAssignedChange(f, v)"
+            :key="f + '-' + k"
+          />
         </div>
       </div>
+
+      <!-- Data Verifier -->
+      <div v-if="fileName">
+        <h2 class="-mt-4 text-lg font-semibold">
+          {{ t`Verify Imported Data` }}
+        </h2>
+        <div></div>
+      </div>
     </div>
   </div>
 </template>
@@ -75,8 +85,9 @@ import Button from '@/components/Button.vue';
 import { ipcRenderer } from 'electron';
 import { IPC_ACTIONS } from '@/messages';
 import { getSavePath, saveData, showToast } from '@/utils';
+import DropdownWithActions from '@/components/DropdownWithActions.vue';
 export default {
-  components: { PageHeader, FormControl, Button },
+  components: { PageHeader, FormControl, Button, DropdownWithActions },
   data() {
     return {
       file: null,
@@ -85,6 +96,25 @@ export default {
     };
   },
   computed: {
+    actions() {
+      const cancelAction = {
+        component: {
+          template: '<span class="text-red-700" >{{ t`Cancel` }}</span>',
+        },
+        condition: () => true,
+        action: this.cancel,
+      };
+
+      const secondaryAction = {
+        component: {
+          template: `<span>${this.secondaryLabel}</span>`,
+        },
+        condition: () => true,
+        action: this.handleSecondaryClick,
+      };
+      return [secondaryAction, cancelAction];
+    },
+
     fileName() {
       if (!this.file) {
         return '';
@@ -161,6 +191,24 @@ export default {
       }
       await saveData(template, filePath);
     },
+    getAssignerField(targetLabel) {
+      const assigned = this.importer.assignedMap[targetLabel];
+      return {
+        fieldname: 'assignerField',
+        label: targetLabel,
+        placeholder: `Select Label`,
+        fieldtype: 'Select',
+        options: [
+          '',
+          ...(assigned ? [assigned] : []),
+          ...this.importer.unassignedLabels,
+        ],
+        default: assigned ?? '',
+      };
+    },
+    onAssignedChange(target, value) {
+      this.importer.assignedMap[target] = value;
+    },
     importData() {},
     toggleView() {},
     setImportType(importType) {
@@ -177,7 +225,7 @@ export default {
       const { success, canceled, filePath, data, name } =
         await ipcRenderer.invoke(IPC_ACTIONS.GET_FILE, options);
 
-      if (!success) {
+      if (!success && !canceled) {
         showToast({ message: this.t`File selection failed.`, type: 'error' });
       }
 
@@ -185,11 +233,23 @@ export default {
         return;
       }
 
+      const text = new TextDecoder().decode(data);
+      const isValid = this.importer.selectFile(text);
+      if (!isValid) {
+        showToast({
+          message: this.t`Bad import data. Could not select file.`,
+          type: 'error',
+        });
+        return;
+      }
+
       this.file = {
         name,
         filePath,
-        data: new TextDecoder().decode(data),
+        text,
       };
+
+      window.i = this.importer;
     },
   },
 };

From 15bb03136a7126d898be6d465a2f8606635cb715 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Tue, 22 Feb 2022 18:33:21 +0530
Subject: [PATCH 05/10] feat: add data verfying section

---
 src/dataImport.ts        | 42 +++++++++++++++--
 src/pages/DataImport.vue | 99 +++++++++++++++++++++++++++++++++-------
 2 files changed, 121 insertions(+), 20 deletions(-)

diff --git a/src/dataImport.ts b/src/dataImport.ts
index 822a7c01..d45b15b3 100644
--- a/src/dataImport.ts
+++ b/src/dataImport.ts
@@ -101,7 +101,9 @@ export class Importer {
   templateFields: TemplateField[];
   map: Map;
   template: string;
+  indices: number[] = [];
   parsedLabels: string[] = [];
+  parsedValues: string[][] = [];
   assignedMap: Map = {}; // target: import
 
   constructor(doctype: string) {
@@ -126,19 +128,50 @@ export class Importer {
     return this.parsedLabels.filter((l) => !assigned.includes(l));
   }
 
-  get columnsLabels() {
+  get columnLabels() {
     const assigned: string[] = [];
     const unassigned: string[] = [];
 
-    Object.keys(this.map).forEach((k) => {
-      if (this.map) {
+    this.assignableLabels.forEach((k) => {
+      if (this.assignedMap[k]) {
         assigned.push(k);
         return;
       }
       unassigned.push(k);
     });
 
-    return [...assigned, ...unassigned];
+    return [...assigned];
+  }
+
+  get assignedMatrix() {
+    this.indices = this.columnLabels
+      .map((k) => this.assignedMap[k])
+      .filter(Boolean)
+      .map((k) => this.parsedLabels.indexOf(k));
+
+    const rows = this.parsedValues.length;
+    const cols = this.columnLabels.length;
+
+    const matrix = [];
+    for (let i = 0; i < rows; i++) {
+      const row = [];
+      for (let j = 0; j < cols; j++) {
+        const ix = this.indices[j];
+        const value = this.parsedValues[i][ix] ?? '';
+        row.push(value);
+      }
+      matrix.push(row);
+    }
+
+    return matrix;
+  }
+
+  dropRow(i: number) {
+    this.parsedValues = this.parsedValues.filter((_, ix) => i !== ix);
+  }
+
+  updateValue(value: string, i: number, j: number) {
+    this.parsedValues[i][this.indices[j]] = value ?? '';
   }
 
   selectFile(text: string): boolean {
@@ -150,6 +183,7 @@ export class Importer {
       return false;
     }
 
+    this.parsedValues = values;
     this._setAssigned();
     return true;
   }
diff --git a/src/pages/DataImport.vue b/src/pages/DataImport.vue
index dee61258..0a67edd2 100644
--- a/src/pages/DataImport.vue
+++ b/src/pages/DataImport.vue
@@ -21,7 +21,6 @@
         >
       </template>
     </PageHeader>
-    <!-- <div class="flex justify-center flex-1 mb-8 mt-2"> -->
     <div class="flex px-8 mt-2 text-base w-full flex-col gap-8">
       <!-- Type selector -->
       <div class="flex flex-row justify-start items-center w-full">
@@ -42,16 +41,15 @@
           </span>
           {{ helperText }}{{ fileName ? ',' : '' }}
           <span v-if="fileName" class="font-normal">
-            {{ t`verify imported data and click on` }} </span
-          >{{ ' ' }}<span v-if="fileName">{{ t`Import Data` }}</span
-          >.
+            {{ t`verify the imported data and click on` }} </span
+          >{{ ' ' }}<span v-if="fileName">{{ t`Import Data` }}</span>
         </p>
       </div>
 
       <!-- Label Assigner -->
       <div v-if="fileName">
         <h2 class="text-lg font-semibold">{{ t`Assign Imported Labels` }}</h2>
-        <div class="gap-2 mt-4 grid grid-flow-col overflow-scroll pb-4">
+        <div class="gap-2 mt-4 grid grid-flow-col overflow-x-scroll pb-4">
           <FormControl
             :show-label="true"
             size="small"
@@ -68,10 +66,68 @@
 
       <!-- Data Verifier -->
       <div v-if="fileName">
-        <h2 class="-mt-4 text-lg font-semibold">
+        <h2 class="-mt-4 text-lg font-semibold pb-1">
           {{ t`Verify Imported Data` }}
         </h2>
-        <div></div>
+
+        <div class="overflow-scroll mt-4 pb-4">
+          <!-- Column Name Rows  -->
+          <div
+            class="grid grid-flow-col pb-4 border-b gap-2 sticky top-0 bg-white"
+            style="width: fit-content"
+            v-if="importer.columnLabels.length > 0"
+          >
+            <div class="w-4 h-4" />
+            <p
+              v-for="(c, i) in importer.columnLabels"
+              class="px-2 w-28 font-semibold text-gray-600"
+              :key="'column-' + i"
+            >
+              {{ c }}
+            </p>
+          </div>
+          <div v-else>
+            <p class="text-gray-600">
+              {{ t`No labels have been assigned.` }}
+            </p>
+          </div>
+
+          <!-- Data Rows -->
+          <div
+            v-if="importer.columnLabels.length > 0"
+            style="max-height: 500px"
+          >
+            <div
+              class="grid grid-flow-col mt-4 pb-4 border-b gap-2 items-center"
+              style="width: fit-content"
+              v-for="(r, i) in assignedMatrix"
+              :key="'matrix-row-' + i"
+            >
+              <button
+                class="w-4 h-4 text-gray-600 hover:text-gray-900 cursor-pointer"
+                @click="importer.dropRow(i)"
+              >
+                <FeatherIcon name="x" />
+              </button>
+              <input
+                v-for="(c, j) in r"
+                type="text"
+                class="
+                  w-28
+                  text-gray-900
+                  px-2
+                  py-1
+                  outline-none
+                  rounded
+                  focus:bg-gray-200
+                "
+                @change="(e) => onValueChange(e, i, j)"
+                :key="'matrix-cell-' + i + '-' + j"
+                :value="c"
+              />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -86,8 +142,15 @@ import { ipcRenderer } from 'electron';
 import { IPC_ACTIONS } from '@/messages';
 import { getSavePath, saveData, showToast } from '@/utils';
 import DropdownWithActions from '@/components/DropdownWithActions.vue';
+import FeatherIcon from '@/components/FeatherIcon.vue';
 export default {
-  components: { PageHeader, FormControl, Button, DropdownWithActions },
+  components: {
+    PageHeader,
+    FormControl,
+    Button,
+    DropdownWithActions,
+    FeatherIcon,
+  },
   data() {
     return {
       file: null,
@@ -96,6 +159,9 @@ export default {
     };
   },
   computed: {
+    assignedMatrix() {
+      return this.importer.assignedMatrix;
+    },
     actions() {
       const cancelAction = {
         component: {
@@ -107,7 +173,7 @@ export default {
 
       const secondaryAction = {
         component: {
-          template: `<span>${this.secondaryLabel}</span>`,
+          template: '<span>{{ t`Save Template` }}</span>',
         },
         condition: () => true,
         action: this.handleSecondaryClick,
@@ -129,9 +195,6 @@ export default {
       }
       return this.fileName;
     },
-    secondaryLabel() {
-      return this.file ? this.t`Toggle View` : this.t`Save Template`;
-    },
     primaryLabel() {
       return this.file ? this.t`Import Data` : this.t`Select File`;
     },
@@ -174,12 +237,11 @@ export default {
       this.importData();
     },
     handleSecondaryClick() {
-      if (!this.file) {
-        this.saveTemplate();
+      if (!this.importer) {
         return;
       }
 
-      this.toggleView();
+      this.saveTemplate();
     },
     async saveTemplate() {
       const template = this.importer.template;
@@ -209,9 +271,14 @@ export default {
     onAssignedChange(target, value) {
       this.importer.assignedMap[target] = value;
     },
+    onValueChange(event, i, j) {
+      this.importer.updateValue(event.target.value, i, j);
+    },
     importData() {},
-    toggleView() {},
     setImportType(importType) {
+      if (this.importType) {
+        this.cancel();
+      }
       this.importType = importType;
       this.importer = new Importer(this.labelDoctypeMap[this.importType]);
     },

From 5f4cbe1795f382c68c2d5389a3185d14cab3f6b5 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Wed, 23 Feb 2022 11:33:15 +0530
Subject: [PATCH 06/10] feat: mark required fields

---
 src/dataImport.ts        | 39 ++++++++++++++++++++-------
 src/pages/DataImport.vue | 58 ++++++++++++++++++++++++++--------------
 2 files changed, 68 insertions(+), 29 deletions(-)

diff --git a/src/dataImport.ts b/src/dataImport.ts
index d45b15b3..5fbb1ceb 100644
--- a/src/dataImport.ts
+++ b/src/dataImport.ts
@@ -17,7 +17,7 @@ type Exclusion = {
 };
 
 type Map = {
-  [key: string]: string;
+  [key: string]: string | boolean;
 };
 
 interface TemplateField {
@@ -105,6 +105,7 @@ export class Importer {
   parsedLabels: string[] = [];
   parsedValues: string[][] = [];
   assignedMap: Map = {}; // target: import
+  requiredMap: Map = {};
 
   constructor(doctype: string) {
     this.doctype = doctype;
@@ -115,10 +116,25 @@ export class Importer {
       acc[k] = '';
       return acc;
     }, {});
+    this.requiredMap = this.templateFields.reduce((acc: Map, k) => {
+      acc[k.label] = k.required;
+      return acc;
+    }, {});
   }
 
   get assignableLabels() {
-    return Object.keys(this.map);
+    const req: string[] = [];
+    const nreq: string[] = [];
+    Object.keys(this.map).forEach((k) => {
+      if (this.requiredMap[k]) {
+        req.push(k);
+        return;
+      }
+
+      nreq.push(k);
+    });
+
+    return [...req, ...nreq];
   }
 
   get unassignedLabels() {
@@ -129,25 +145,30 @@ export class Importer {
   }
 
   get columnLabels() {
-    const assigned: string[] = [];
-    const unassigned: string[] = [];
+    const req: string[] = [];
+    const nreq: string[] = [];
 
     this.assignableLabels.forEach((k) => {
-      if (this.assignedMap[k]) {
-        assigned.push(k);
+      if (!this.assignedMap[k]) {
         return;
       }
-      unassigned.push(k);
+
+      if (this.requiredMap[k]) {
+        req.push(k);
+        return;
+      }
+
+      nreq.push(k);
     });
 
-    return [...assigned];
+    return [...req, ...nreq];
   }
 
   get assignedMatrix() {
     this.indices = this.columnLabels
       .map((k) => this.assignedMap[k])
       .filter(Boolean)
-      .map((k) => this.parsedLabels.indexOf(k));
+      .map((k) => this.parsedLabels.indexOf(k as string));
 
     const rows = this.parsedValues.length;
     const cols = this.columnLabels.length;
diff --git a/src/pages/DataImport.vue b/src/pages/DataImport.vue
index 0a67edd2..dbe4bc93 100644
--- a/src/pages/DataImport.vue
+++ b/src/pages/DataImport.vue
@@ -47,21 +47,34 @@
       </div>
 
       <!-- Label Assigner -->
-      <div v-if="fileName">
+      <div v-if="fileName" class="pb-4">
         <h2 class="text-lg font-semibold">{{ t`Assign Imported Labels` }}</h2>
-        <div class="gap-2 mt-4 grid grid-flow-col overflow-x-scroll pb-4">
-          <FormControl
-            :show-label="true"
-            size="small"
-            class="w-28"
-            input-class="bg-gray-100"
-            v-for="(f, k) in importer.assignableLabels"
-            :df="getAssignerField(f)"
-            :value="importer.assignedMap[f] ?? ''"
-            @change="(v) => onAssignedChange(f, v)"
-            :key="f + '-' + k"
-          />
+        <div class="gap-2 mt-4 grid grid-flow-col overflow-x-scroll">
+          <div v-for="(f, k) in importer.assignableLabels" :key="f + '-' + k">
+            <p class="text-gray-600 text-sm mb-1">
+              {{ f }}
+              <span
+                v-if="importer.requiredMap[f] && !importer.assignedMap[f]"
+                class="text-red-400"
+                >*</span
+              >
+            </p>
+            <FormControl
+              size="small"
+              class="w-28"
+              input-class="bg-gray-100"
+              :df="getAssignerField(f)"
+              :value="importer.assignedMap[f] ?? ''"
+              @change="(v) => onAssignedChange(f, v)"
+            />
+          </div>
         </div>
+        <p
+          class="text-red-400 text-sm mt-1 -mb-1 p-0 h-0"
+          v-if="requiredUnassigned"
+        >
+          {{ t`* required fields` }}
+        </p>
       </div>
 
       <!-- Data Verifier -->
@@ -133,16 +146,16 @@
   </div>
 </template>
 <script>
-import FormControl from '@/components/Controls/FormControl';
-import PageHeader from '@/components/PageHeader.vue';
-import { importable, Importer } from '@/dataImport';
-import frappe from 'frappe';
 import Button from '@/components/Button.vue';
-import { ipcRenderer } from 'electron';
-import { IPC_ACTIONS } from '@/messages';
-import { getSavePath, saveData, showToast } from '@/utils';
+import FormControl from '@/components/Controls/FormControl';
 import DropdownWithActions from '@/components/DropdownWithActions.vue';
 import FeatherIcon from '@/components/FeatherIcon.vue';
+import PageHeader from '@/components/PageHeader.vue';
+import { importable, Importer } from '@/dataImport';
+import { IPC_ACTIONS } from '@/messages';
+import { getSavePath, saveData, showToast } from '@/utils';
+import { ipcRenderer } from 'electron';
+import frappe from 'frappe';
 export default {
   components: {
     PageHeader,
@@ -159,6 +172,11 @@ export default {
     };
   },
   computed: {
+    requiredUnassigned() {
+      return this.importer.assignableLabels
+        .filter((k) => this.importer.requiredMap[k])
+        .some((k) => !this.importer.assignedMap[k]);
+    },
     assignedMatrix() {
       return this.importer.assignedMatrix;
     },

From f7937935fb8b65df6e5e1addd58c18a41fdd1ee9 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Wed, 23 Feb 2022 12:52:14 +0530
Subject: [PATCH 07/10] fix: set readonly

---
 models/doctype/JournalEntry/JournalEntry.js   |   1 +
 models/doctype/Payment/Payment.js             |   1 +
 .../PurchaseInvoice/PurchaseInvoice.js        |   1 +
 models/doctype/SalesInvoice/SalesInvoice.js   |   1 +
 src/dataImport.ts                             | 109 +++++++++++-------
 src/types/model.ts                            |   3 +
 6 files changed, 75 insertions(+), 41 deletions(-)

diff --git a/models/doctype/JournalEntry/JournalEntry.js b/models/doctype/JournalEntry/JournalEntry.js
index 53fcd6dc..eb26d034 100644
--- a/models/doctype/JournalEntry/JournalEntry.js
+++ b/models/doctype/JournalEntry/JournalEntry.js
@@ -63,6 +63,7 @@ export default {
       label: t`Cancelled`,
       fieldtype: 'Check',
       default: 0,
+      readOnly: 1,
     },
   ],
   actions: [ledgerLink],
diff --git a/models/doctype/Payment/Payment.js b/models/doctype/Payment/Payment.js
index a3a62bf9..5773141c 100644
--- a/models/doctype/Payment/Payment.js
+++ b/models/doctype/Payment/Payment.js
@@ -150,6 +150,7 @@ export default {
       label: t`Cancelled`,
       fieldtype: 'Check',
       default: 0,
+      readOnly: 1,
     },
   ],
 
diff --git a/models/doctype/PurchaseInvoice/PurchaseInvoice.js b/models/doctype/PurchaseInvoice/PurchaseInvoice.js
index 7e9d3af0..ea2640eb 100644
--- a/models/doctype/PurchaseInvoice/PurchaseInvoice.js
+++ b/models/doctype/PurchaseInvoice/PurchaseInvoice.js
@@ -133,6 +133,7 @@ export default {
       label: t`Cancelled`,
       fieldtype: 'Check',
       default: 0,
+      readOnly: 1,
     },
   ],
 
diff --git a/models/doctype/SalesInvoice/SalesInvoice.js b/models/doctype/SalesInvoice/SalesInvoice.js
index 6e27ad4d..072c19e5 100644
--- a/models/doctype/SalesInvoice/SalesInvoice.js
+++ b/models/doctype/SalesInvoice/SalesInvoice.js
@@ -132,6 +132,7 @@ export default {
       label: t`Cancelled`,
       fieldtype: 'Check',
       default: 0,
+      readOnly: 1,
     },
   ],
 
diff --git a/src/dataImport.ts b/src/dataImport.ts
index 5fbb1ceb..bc4cd635 100644
--- a/src/dataImport.ts
+++ b/src/dataImport.ts
@@ -17,65 +17,85 @@ type Exclusion = {
 };
 
 type Map = {
-  [key: string]: string | boolean;
+  [key: string]: string | boolean | object;
 };
 
 interface TemplateField {
   label: string;
   fieldname: string;
   required: boolean;
+  doctype: string;
+  options?: string[];
+  fieldtype: FieldType;
 }
 
 const exclusion: Exclusion = {
   Item: ['image'],
+  Supplier: ['address', 'outstandingAmount', 'supplier', 'image', 'customer'],
+  Customer: ['address', 'outstandingAmount', 'supplier', 'image', 'customer'],
 };
 
+function getFilteredDocFields(doctype: string): [TemplateField[], string[]] {
+  const fields: TemplateField[] = [];
+  // @ts-ignore
+  const primaryFields: Field[] = frappe.models[doctype].fields;
+  const tableTypes: string[] = [];
+  const exclusionFields: string[] = exclusion[doctype] ?? [];
+
+  primaryFields.forEach(
+    ({
+      label,
+      fieldtype,
+      childtype,
+      fieldname,
+      readOnly,
+      required,
+      hidden,
+      options,
+    }) => {
+      if (
+        readOnly ||
+        (hidden && typeof hidden === 'number') ||
+        exclusionFields.includes(fieldname)
+      ) {
+        return;
+      }
+
+      if (fieldtype === FieldType.Table && childtype) {
+        tableTypes.push(childtype);
+        return;
+      }
+
+      fields.push({
+        label,
+        fieldname,
+        doctype,
+        options,
+        fieldtype,
+        required: Boolean(required ?? false),
+      });
+    }
+  );
+
+  return [fields, tableTypes];
+}
+
 function getTemplateFields(doctype: string): TemplateField[] {
   const fields: TemplateField[] = [];
   if (!doctype) {
     return [];
   }
-
-  // @ts-ignore
-  const primaryFields: Field[] = frappe.models[doctype].fields;
-  const tableTypes: string[] = [];
-  let exclusionFields: string[] = exclusion[doctype] ?? [];
-
-  primaryFields.forEach(
-    ({ label, fieldtype, childtype, fieldname, required }) => {
-      if (exclusionFields.includes(fieldname)) {
-        return;
-      }
-
-      if (fieldtype === FieldType.Table && childtype) {
-        tableTypes.push(childtype);
-      }
-
-      fields.push({
-        label,
-        fieldname,
-        required: Boolean(required ?? false),
-      });
+  const doctypes: string[] = [doctype];
+  while (doctypes.length > 0) {
+    const dt = doctypes.pop();
+    if (!dt) {
+      break;
     }
-  );
-
-  tableTypes.forEach((childtype) => {
-    exclusionFields = exclusion[childtype] ?? [];
-
-    // @ts-ignore
-    const childFields: Field[] = frappe.models[childtype].fields;
-    childFields.forEach(({ label, fieldtype, fieldname, required }) => {
-      if (
-        exclusionFields.includes(fieldname) ||
-        fieldtype === FieldType.Table
-      ) {
-        return;
-      }
-
-      fields.push({ label, fieldname, required: Boolean(required ?? false) });
-    });
-  });
 
+    const [templateFields, tableTypes] = getFilteredDocFields(dt);
+    fields.push(...templateFields);
+    doctypes.push(...tableTypes);
+  }
   return fields;
 }
 
@@ -106,6 +126,7 @@ export class Importer {
   parsedValues: string[][] = [];
   assignedMap: Map = {}; // target: import
   requiredMap: Map = {};
+  labelFieldMap: Map = {};
 
   constructor(doctype: string) {
     this.doctype = doctype;
@@ -120,6 +141,10 @@ export class Importer {
       acc[k.label] = k.required;
       return acc;
     }, {});
+    this.labelFieldMap = this.templateFields.reduce((acc: Map, k) => {
+      acc[k.label] = k;
+      return acc;
+    }, {});
   }
 
   get assignableLabels() {
@@ -222,4 +247,6 @@ export class Importer {
 }
 
 // @ts-ignore
-window.pc = parseCSV;
+window.im = importable;
+// @ts-ignore
+window.gtf = getTemplateFields;
diff --git a/src/types/model.ts b/src/types/model.ts
index d1e05552..0393932e 100644
--- a/src/types/model.ts
+++ b/src/types/model.ts
@@ -23,4 +23,7 @@ export interface Field {
   target?: string;
   default?: unknown;
   required?: number;
+  readOnly?: number;
+  hidden?: number | Function;
+  options?: string[];
 }

From 916d0ecee4a161391c8effc45835e601f8631090 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Wed, 23 Feb 2022 16:01:55 +0530
Subject: [PATCH 08/10] feat: add should submit - code for insertion - success
 state

---
 src/dataImport.ts        | 157 +++++++++++++++++++++++++++++++++++----
 src/pages/DataImport.vue | 121 +++++++++++++++++++++++++++---
 2 files changed, 253 insertions(+), 25 deletions(-)

diff --git a/src/dataImport.ts b/src/dataImport.ts
index bc4cd635..953fac6f 100644
--- a/src/dataImport.ts
+++ b/src/dataImport.ts
@@ -12,12 +12,26 @@ export const importable = [
   'Item',
 ];
 
+type Status = {
+  success: boolean;
+  message: string;
+  names: string[];
+};
+
 type Exclusion = {
   [key: string]: string[];
 };
 
 type Map = {
-  [key: string]: string | boolean | object;
+  [key: string]: unknown;
+};
+
+type ObjectMap = {
+  [key: string]: Map;
+};
+
+type LabelTemplateFieldMap = {
+  [key: string]: TemplateField;
 };
 
 interface TemplateField {
@@ -27,6 +41,27 @@ interface TemplateField {
   doctype: string;
   options?: string[];
   fieldtype: FieldType;
+  parentField: string;
+}
+
+function formatValue(value: string, fieldtype: FieldType): unknown {
+  switch (fieldtype) {
+    case FieldType.Date:
+      return new Date(value);
+    case FieldType.Currency:
+      // @ts-ignore
+      return frappe.pesa(value);
+    case FieldType.Int:
+    case FieldType.Float: {
+      const n = parseFloat(value);
+      if (!Number.isNaN(n)) {
+        return n;
+      }
+      return 0;
+    }
+    default:
+      return value;
+  }
 }
 
 const exclusion: Exclusion = {
@@ -35,11 +70,21 @@ const exclusion: Exclusion = {
   Customer: ['address', 'outstandingAmount', 'supplier', 'image', 'customer'],
 };
 
-function getFilteredDocFields(doctype: string): [TemplateField[], string[]] {
-  const fields: TemplateField[] = [];
+function getFilteredDocFields(
+  df: string | string[]
+): [TemplateField[], string[][]] {
+  let doctype = df[0];
+  let parentField = df[1] ?? '';
+
+  if (typeof df === 'string') {
+    doctype = df;
+    parentField = '';
+  }
+
   // @ts-ignore
   const primaryFields: Field[] = frappe.models[doctype].fields;
-  const tableTypes: string[] = [];
+  const fields: TemplateField[] = [];
+  const tableTypes: string[][] = [];
   const exclusionFields: string[] = exclusion[doctype] ?? [];
 
   primaryFields.forEach(
@@ -54,15 +99,16 @@ function getFilteredDocFields(doctype: string): [TemplateField[], string[]] {
       options,
     }) => {
       if (
-        readOnly ||
-        (hidden && typeof hidden === 'number') ||
-        exclusionFields.includes(fieldname)
+        !(fieldname === 'name' && !parentField) &&
+        (readOnly ||
+          (hidden && typeof hidden === 'number') ||
+          exclusionFields.includes(fieldname))
       ) {
         return;
       }
 
       if (fieldtype === FieldType.Table && childtype) {
-        tableTypes.push(childtype);
+        tableTypes.push([childtype, fieldname]);
         return;
       }
 
@@ -72,6 +118,7 @@ function getFilteredDocFields(doctype: string): [TemplateField[], string[]] {
         doctype,
         options,
         fieldtype,
+        parentField,
         required: Boolean(required ?? false),
       });
     }
@@ -85,7 +132,7 @@ function getTemplateFields(doctype: string): TemplateField[] {
   if (!doctype) {
     return [];
   }
-  const doctypes: string[] = [doctype];
+  const doctypes: string[][] = [[doctype]];
   while (doctypes.length > 0) {
     const dt = doctypes.pop();
     if (!dt) {
@@ -126,7 +173,8 @@ export class Importer {
   parsedValues: string[][] = [];
   assignedMap: Map = {}; // target: import
   requiredMap: Map = {};
-  labelFieldMap: Map = {};
+  labelTemplateFieldMap: LabelTemplateFieldMap = {};
+  shouldSubmit: boolean = false;
 
   constructor(doctype: string) {
     this.doctype = doctype;
@@ -141,10 +189,13 @@ export class Importer {
       acc[k.label] = k.required;
       return acc;
     }, {});
-    this.labelFieldMap = this.templateFields.reduce((acc: Map, k) => {
-      acc[k.label] = k;
-      return acc;
-    }, {});
+    this.labelTemplateFieldMap = this.templateFields.reduce(
+      (acc: LabelTemplateFieldMap, k) => {
+        acc[k.label] = k;
+        return acc;
+      },
+      {}
+    );
   }
 
   get assignableLabels() {
@@ -225,9 +276,11 @@ export class Importer {
     this.parsedLabels = csv[0];
     const values = csv.slice(1);
 
+    /*
     if (values.some((v) => v.length !== this.parsedLabels.length)) {
       return false;
     }
+    */
 
     this.parsedValues = values;
     this._setAssigned();
@@ -244,9 +297,81 @@ export class Importer {
       this.assignedMap[l] = l;
     });
   }
+
+  getDocs(): Map[] {
+    const fields = this.columnLabels.map((k) => this.labelTemplateFieldMap[k]);
+    const nameIndex = fields.findIndex(({ fieldname }) => fieldname === 'name');
+
+    const docMap: ObjectMap = {};
+
+    for (let r = 0; r < this.assignedMatrix.length; r++) {
+      const row = this.assignedMatrix[r];
+      const cts: ObjectMap = {};
+      const name = row[nameIndex];
+
+      docMap[name] ??= {};
+
+      for (let f = 0; f < fields.length; f++) {
+        const field = fields[f];
+        const value = formatValue(row[f], field.fieldtype);
+
+        if (field.parentField) {
+          cts[field.parentField] ??= {};
+          cts[field.parentField][field.fieldname] = value;
+          continue;
+        }
+
+        docMap[name][field.fieldname] = value;
+      }
+
+      for (const k of Object.keys(cts)) {
+        docMap[name][k] ??= [];
+        (docMap[name][k] as Map[]).push(cts[k]);
+      }
+    }
+
+    // return docObjs;
+    return Object.keys(docMap).map((k) => docMap[k]);
+  }
+
+  async importData(): Promise<Status> {
+    const status: Status = { success: false, names: [], message: '' };
+
+    for (const docObj of this.getDocs()) {
+      const doc = frappe.getNewDoc(this.doctype);
+      await doc.update(docObj);
+
+      try {
+        await doc.insert();
+      } catch (err) {
+        const message = (err as Error).message;
+
+        const messages = [
+          frappe.t`Could not import ${this.doctype} ${doc.name}.`,
+        ];
+        if (message) {
+          messages.push(frappe.t`Error: ${message}.`);
+        }
+
+        if (status.names.length) {
+          messages.push(
+            frappe.t`The following ${
+              status.names.length
+            } entries were created: ${status.names.join(', ')}`
+          );
+        }
+
+        status.message = messages.join(' ');
+        return status;
+      }
+
+      status.names.push(doc.name);
+    }
+
+    status.success = true;
+    return status;
+  }
 }
 
-// @ts-ignore
-window.im = importable;
 // @ts-ignore
 window.gtf = getTemplateFields;
diff --git a/src/pages/DataImport.vue b/src/pages/DataImport.vue
index dbe4bc93..d4b342a1 100644
--- a/src/pages/DataImport.vue
+++ b/src/pages/DataImport.vue
@@ -10,10 +10,10 @@
         <DropdownWithActions
           class="ml-2"
           :actions="actions"
-          v-if="canCancel || importType"
+          v-if="(canCancel || importType) && !complete"
         />
         <Button
-          v-if="importType"
+          v-if="importType && !complete"
           type="primary"
           class="text-sm ml-2"
           @click="handlePrimaryClick"
@@ -21,9 +21,12 @@
         >
       </template>
     </PageHeader>
-    <div class="flex px-8 mt-2 text-base w-full flex-col gap-8">
+    <div
+      class="flex px-8 mt-2 text-base w-full flex-col gap-8"
+      v-if="!complete"
+    >
       <!-- Type selector -->
-      <div class="flex flex-row justify-start items-center w-full">
+      <div class="flex flex-row justify-start items-center w-full gap-2">
         <FormControl
           :df="importableDf"
           input-class="bg-gray-100 text-gray-900 text-base"
@@ -32,6 +35,36 @@
           size="small"
           @change="setImportType"
         />
+
+        <div
+          v-if="importType && isSubmittable"
+          class="
+            justify-center
+            items-center
+            gap-2
+            flex
+            justify-between
+            items-center
+            bg-gray-100
+            px-2
+            py-1
+            rounded
+            text-gray-900
+          "
+        >
+          <p>Should Submit</p>
+          <FormControl
+            size="small"
+            input-class="bg-gray-100"
+            :df="{
+              fieldname: 'shouldSubmit',
+              label: this.t`Submit on Import`,
+              fieldtype: 'Check',
+            }"
+            :value="Number(importer.shouldSubmit)"
+            @change="(value) => (importer.shouldSubmit = !!value)"
+          />
+        </div>
         <p
           class="text-base text-base ml-2"
           :class="fileName ? 'text-gray-900 font-semibold' : 'text-gray-700'"
@@ -49,7 +82,9 @@
       <!-- Label Assigner -->
       <div v-if="fileName" class="pb-4">
         <h2 class="text-lg font-semibold">{{ t`Assign Imported Labels` }}</h2>
-        <div class="gap-2 mt-4 grid grid-flow-col overflow-x-scroll">
+        <div
+          class="gap-2 mt-4 grid grid-flow-col overflow-x-scroll no-scrollbar"
+        >
           <div v-for="(f, k) in importer.assignableLabels" :key="f + '-' + k">
             <p class="text-gray-600 text-sm mb-1">
               {{ f }}
@@ -143,6 +178,41 @@
         </div>
       </div>
     </div>
+    <div v-if="complete" class="flex justify-center h-full items-center">
+      <div
+        class="
+          flex flex-col
+          justify-center
+          items-center
+          gap-8
+          rounded-lg
+          shadow-md
+          p-6
+        "
+        style="width: 450px"
+      >
+        <h2 class="text-xl font-semibold mt-4">{{ t`Import Success` }} 🎉</h2>
+        <p class="text-lg text-center">
+          {{ t`Successfully created the following ${names.length} entries:` }}
+        </p>
+        <div class="max-h-96 overflow-y-scroll">
+          <div
+            v-for="(n, i) in names"
+            :key="i"
+            class="grid grid-cols-2 gap-2 border-b pb-2 mb-2 pr-4 text-lg w-60"
+            style="grid-template-columns: 2rem auto"
+          >
+            <p class="text-right">{{ i + 1 }}.</p>
+            <p>
+              {{ n }}
+            </p>
+          </div>
+        </div>
+        <Button type="primary" class="text-sm w-28" @click="showMe">{{
+          t`Show Me`
+        }}</Button>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -166,6 +236,8 @@ export default {
   },
   data() {
     return {
+      complete: false,
+      names: ['Bat', 'Baseball', 'Other Shit'],
       file: null,
       importer: null,
       importType: '',
@@ -186,7 +258,7 @@ export default {
           template: '<span class="text-red-700" >{{ t`Cancel` }}</span>',
         },
         condition: () => true,
-        action: this.cancel,
+        action: this.clear,
       };
 
       const secondaryAction = {
@@ -216,6 +288,13 @@ export default {
     primaryLabel() {
       return this.file ? this.t`Import Data` : this.t`Select File`;
     },
+    isSubmittable() {
+      const doctype = this.importer?.doctype;
+      if (doctype) {
+        return frappe.models[doctype].isSubmittable ?? false;
+      }
+      return false;
+    },
     importableDf() {
       return {
         fieldname: 'importType',
@@ -240,11 +319,21 @@ export default {
       return !!(this.file || this.importType);
     },
   },
+  deactivated() {
+    this.clear();
+  },
   methods: {
-    cancel() {
+    showMe() {
+      this.clear();
+      const doctype = this.importer?.doctype ?? 'Item';
+      this.$router.push(`/list/${doctype}`);
+    },
+    clear() {
       this.file = null;
+      this.names = [];
       this.importer = null;
       this.importType = '';
+      this.complete = false;
     },
     handlePrimaryClick() {
       if (!this.file) {
@@ -292,10 +381,24 @@ export default {
     onValueChange(event, i, j) {
       this.importer.updateValue(event.target.value, i, j);
     },
-    importData() {},
+    async importData() {
+      // TODO: pre import conditions
+      /*
+      if(){}
+      */
+
+      const { success, names } = await this.importer.importData();
+      if (!success || !names.length) {
+        // handle failure
+        return;
+      }
+
+      this.names = names;
+      this.complete = true;
+    },
     setImportType(importType) {
       if (this.importType) {
-        this.cancel();
+        this.clear();
       }
       this.importType = importType;
       this.importer = new Importer(this.labelDoctypeMap[this.importType]);

From 16c0bfe4fcbb67d8e06d20153149bd2d1d48ad0b Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Wed, 23 Feb 2022 17:15:20 +0530
Subject: [PATCH 09/10] feat: added importer settings

---
 src/dataImport.ts        |  49 ++++++++-----
 src/pages/DataImport.vue | 151 +++++++++++++++++++++++++++++----------
 2 files changed, 146 insertions(+), 54 deletions(-)

diff --git a/src/dataImport.ts b/src/dataImport.ts
index 953fac6f..3504dc03 100644
--- a/src/dataImport.ts
+++ b/src/dataImport.ts
@@ -175,6 +175,8 @@ export class Importer {
   requiredMap: Map = {};
   labelTemplateFieldMap: LabelTemplateFieldMap = {};
   shouldSubmit: boolean = false;
+  labelIndex: number = -1;
+  csv: string[][] = [];
 
   constructor(doctype: string) {
     this.doctype = doctype;
@@ -272,23 +274,38 @@ export class Importer {
   }
 
   selectFile(text: string): boolean {
-    const csv = parseCSV(text);
-    this.parsedLabels = csv[0];
-    const values = csv.slice(1);
-
-    /*
-    if (values.some((v) => v.length !== this.parsedLabels.length)) {
-      return false;
-    }
-    */
-
-    this.parsedValues = values;
-    this._setAssigned();
+    this.csv = parseCSV(text);
+    this.initialize(0, true);
     return true;
   }
 
-  _setAssigned() {
+  initialize(labelIndex: number, force: boolean) {
+    if (
+      (typeof labelIndex !== 'number' && !labelIndex) ||
+      (labelIndex === this.labelIndex && !force)
+    ) {
+      return;
+    }
+    console.log('initing', labelIndex);
+
+    this.labelIndex = labelIndex;
+    this.parsedLabels = this.csv[labelIndex];
+    const values = this.csv.slice(labelIndex + 1);
+
+    this.parsedValues = values;
+    this.setAssigned();
+  }
+
+  setAssigned() {
     const labels = [...this.parsedLabels];
+
+    for (const k of Object.keys(this.assignedMap)) {
+      const l = this.assignedMap[k] as string;
+      if (!labels.includes(l)) {
+        this.assignedMap[k] = '';
+      }
+    }
+
     labels.forEach((l) => {
       if (this.assignedMap[l] !== '') {
         return;
@@ -343,6 +360,9 @@ export class Importer {
 
       try {
         await doc.insert();
+        if (this.shouldSubmit) {
+          await doc.submit();
+        }
       } catch (err) {
         const message = (err as Error).message;
 
@@ -372,6 +392,3 @@ export class Importer {
     return status;
   }
 }
-
-// @ts-ignore
-window.gtf = getTemplateFields;
diff --git a/src/pages/DataImport.vue b/src/pages/DataImport.vue
index d4b342a1..e7867bd5 100644
--- a/src/pages/DataImport.vue
+++ b/src/pages/DataImport.vue
@@ -36,35 +36,6 @@
           @change="setImportType"
         />
 
-        <div
-          v-if="importType && isSubmittable"
-          class="
-            justify-center
-            items-center
-            gap-2
-            flex
-            justify-between
-            items-center
-            bg-gray-100
-            px-2
-            py-1
-            rounded
-            text-gray-900
-          "
-        >
-          <p>Should Submit</p>
-          <FormControl
-            size="small"
-            input-class="bg-gray-100"
-            :df="{
-              fieldname: 'shouldSubmit',
-              label: this.t`Submit on Import`,
-              fieldtype: 'Check',
-            }"
-            :value="Number(importer.shouldSubmit)"
-            @change="(value) => (importer.shouldSubmit = !!value)"
-          />
-        </div>
         <p
           class="text-base text-base ml-2"
           :class="fileName ? 'text-gray-900 font-semibold' : 'text-gray-700'"
@@ -79,6 +50,86 @@
         </p>
       </div>
 
+      <!-- Settings -->
+      <div v-if="fileName" class="">
+        <h2 class="text-lg font-semibold">{{ t`Importer Settings` }}</h2>
+        <div class="mt-4 flex gap-2">
+          <button
+            class="w-28 bg-gray-100 focus:bg-gray-200 rounded-md"
+            @click="importer.initialize(0, true)"
+          >
+            <span class="text-red-400">
+              {{ t`Reset` }}
+            </span>
+          </button>
+          <div
+            v-if="file && isSubmittable"
+            class="
+              justify-center
+              items-center
+              gap-2
+              flex
+              justify-between
+              items-center
+              bg-gray-100
+              px-2
+              rounded
+              text-gray-900
+              w-40
+            "
+          >
+            <p>{{ frappe.t`Submit on Import` }}</p>
+            <FormControl
+              size="small"
+              input-class="bg-gray-100"
+              :df="{
+                fieldname: 'shouldSubmit',
+                fieldtype: 'Check',
+              }"
+              :value="Number(importer.shouldSubmit)"
+              @change="(value) => (importer.shouldSubmit = !!value)"
+            />
+          </div>
+          <div
+            class="
+              flex flex-row
+              justify-center
+              items-center
+              justify-center
+              items-center
+              gap-2
+              flex
+              justify-between
+              items-center
+              bg-gray-100
+              pl-2
+              rounded
+              text-gray-900
+              w-40
+            "
+          >
+            <p class="text-gray-900">{{ t`Label Index` }}</p>
+            <input
+              type="number"
+              class="
+                bg-gray-100
+                outline-none
+                focus:bg-gray-200
+                px-2
+                py-1
+                rounded-md
+                w-10
+                text-right
+              "
+              min="1"
+              :max="importer.csv.length - 1"
+              :value="labelIndex + 1"
+              @change="setLabelIndex"
+            />
+          </div>
+        </div>
+      </div>
+
       <!-- Label Assigner -->
       <div v-if="fileName" class="pb-4">
         <h2 class="text-lg font-semibold">{{ t`Assign Imported Labels` }}</h2>
@@ -106,7 +157,7 @@
         </div>
         <p
           class="text-red-400 text-sm mt-1 -mb-1 p-0 h-0"
-          v-if="requiredUnassigned"
+          v-if="isRequiredUnassigned"
         >
           {{ t`* required fields` }}
         </p>
@@ -223,7 +274,7 @@ import FeatherIcon from '@/components/FeatherIcon.vue';
 import PageHeader from '@/components/PageHeader.vue';
 import { importable, Importer } from '@/dataImport';
 import { IPC_ACTIONS } from '@/messages';
-import { getSavePath, saveData, showToast } from '@/utils';
+import { getSavePath, saveData, showMessageDialog, showToast } from '@/utils';
 import { ipcRenderer } from 'electron';
 import frappe from 'frappe';
 export default {
@@ -244,10 +295,16 @@ export default {
     };
   },
   computed: {
+    labelIndex(){
+      return this.importer.labelIndex
+    },
     requiredUnassigned() {
-      return this.importer.assignableLabels
-        .filter((k) => this.importer.requiredMap[k])
-        .some((k) => !this.importer.assignedMap[k]);
+      return this.importer.assignableLabels.filter(
+        (k) => this.importer.requiredMap[k] && !this.importer.assignedMap[k]
+      );
+    },
+    isRequiredUnassigned() {
+      return this.requiredUnassigned.length > 0;
     },
     assignedMatrix() {
       return this.importer.assignedMatrix;
@@ -350,6 +407,10 @@ export default {
 
       this.saveTemplate();
     },
+    setLabelIndex(e) {
+      const labelIndex = (e.target.value ?? 1) - 1;
+      this.importer.initialize(labelIndex);
+    },
     async saveTemplate() {
       const template = this.importer.template;
       const templateName = this.importType + ' ' + this.t`Template`;
@@ -382,10 +443,24 @@ export default {
       this.importer.updateValue(event.target.value, i, j);
     },
     async importData() {
-      // TODO: pre import conditions
-      /*
-      if(){}
-      */
+      if (this.isRequiredUnassigned) {
+        showMessageDialog({
+          message: this.t`Required Fields not Assigned`,
+          description: this
+            .t`Please assign the following fields ${this.requiredUnassigned.join(
+            ', '
+          )}`,
+        });
+        return;
+      }
+
+      if (this.importer.assignedMatrix.length === 0) {
+        showMessageDialog({
+          message: this.t`No Data to Import`,
+          description: this.t`Please select a file with data to import.`,
+        });
+        return;
+      }
 
       const { success, names } = await this.importer.importData();
       if (!success || !names.length) {

From b29ee6ac1659cafcfbafb08d57420f09a7e0c707 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Thu, 24 Feb 2022 11:39:35 +0530
Subject: [PATCH 10/10] feat: button to add a row - fix error handling and
 insertion

---
 frappe/model/naming.js   |  18 ++++++
 src/dataImport.ts        |  37 ++++++++----
 src/pages/DataImport.vue | 126 ++++++++++++++++++++++++++++-----------
 3 files changed, 136 insertions(+), 45 deletions(-)

diff --git a/frappe/model/naming.js b/frappe/model/naming.js
index fb1f3ed0..dd42d85d 100644
--- a/frappe/model/naming.js
+++ b/frappe/model/naming.js
@@ -2,6 +2,24 @@ const frappe = require('frappe');
 const { getRandomString } = require('frappe/utils');
 
 module.exports = {
+  async isNameAutoSet(doctype) {
+    const doc = frappe.getNewDoc(doctype);
+    if (doc.meta.naming === 'autoincrement') {
+      return true;
+    }
+
+    if (!doc.meta.settings) {
+      return false;
+    }
+
+    const { numberSeries } = await doc.getSettings();
+    if (numberSeries) {
+      return true;
+    }
+
+    return false;
+  },
+
   async setName(doc) {
     if (frappe.isServer) {
       // if is server, always name again if autoincrement or other
diff --git a/src/dataImport.ts b/src/dataImport.ts
index 3504dc03..8dc23dd9 100644
--- a/src/dataImport.ts
+++ b/src/dataImport.ts
@@ -1,5 +1,6 @@
 import { Field, FieldType } from '@/types/model';
 import frappe from 'frappe';
+import { isNameAutoSet } from 'frappe/model/naming';
 import { parseCSV } from './csvParser';
 
 export const importable = [
@@ -275,7 +276,11 @@ export class Importer {
 
   selectFile(text: string): boolean {
     this.csv = parseCSV(text);
-    this.initialize(0, true);
+    try {
+      this.initialize(0, true);
+    } catch (err) {
+      return false;
+    }
     return true;
   }
 
@@ -286,13 +291,11 @@ export class Importer {
     ) {
       return;
     }
-    console.log('initing', labelIndex);
 
+    const source = this.csv.map((row) => [...row]);
     this.labelIndex = labelIndex;
-    this.parsedLabels = this.csv[labelIndex];
-    const values = this.csv.slice(labelIndex + 1);
-
-    this.parsedValues = values;
+    this.parsedLabels = source[labelIndex];
+    this.parsedValues = source.slice(labelIndex + 1);
     this.setAssigned();
   }
 
@@ -353,10 +356,15 @@ export class Importer {
 
   async importData(): Promise<Status> {
     const status: Status = { success: false, names: [], message: '' };
+    const shouldDeleteName = await isNameAutoSet(this.doctype);
 
     for (const docObj of this.getDocs()) {
+      if (shouldDeleteName) {
+        delete docObj.name;
+      }
+
       const doc = frappe.getNewDoc(this.doctype);
-      await doc.update(docObj);
+      await doc.set(docObj);
 
       try {
         await doc.insert();
@@ -364,13 +372,15 @@ export class Importer {
           await doc.submit();
         }
       } catch (err) {
-        const message = (err as Error).message;
-
         const messages = [
           frappe.t`Could not import ${this.doctype} ${doc.name}.`,
         ];
-        if (message) {
-          messages.push(frappe.t`Error: ${message}.`);
+
+        const message = (err as Error).message;
+        if (message?.includes('UNIQUE constraint failed')) {
+          messages.push(frappe.t`${doc.name} already exists.`);
+        } else if (message) {
+          messages.push(message);
         }
 
         if (status.names.length) {
@@ -391,4 +401,9 @@ export class Importer {
     status.success = true;
     return status;
   }
+
+  addRow() {
+    const emptyRow = Array(this.columnLabels.length).fill('');
+    this.parsedValues.push(emptyRow);
+  }
 }
diff --git a/src/pages/DataImport.vue b/src/pages/DataImport.vue
index e7867bd5..2068e64c 100644
--- a/src/pages/DataImport.vue
+++ b/src/pages/DataImport.vue
@@ -54,14 +54,6 @@
       <div v-if="fileName" class="">
         <h2 class="text-lg font-semibold">{{ t`Importer Settings` }}</h2>
         <div class="mt-4 flex gap-2">
-          <button
-            class="w-28 bg-gray-100 focus:bg-gray-200 rounded-md"
-            @click="importer.initialize(0, true)"
-          >
-            <span class="text-red-400">
-              {{ t`Reset` }}
-            </span>
-          </button>
           <div
             v-if="file && isSubmittable"
             class="
@@ -127,6 +119,20 @@
               @change="setLabelIndex"
             />
           </div>
+          <button
+            class="w-28 bg-gray-100 focus:bg-gray-200 rounded-md"
+            v-if="canReset"
+            @click="
+              () => {
+                importer.initialize(0, true);
+                canReset = false;
+              }
+            "
+          >
+            <span class="text-gray-900">
+              {{ t`Reset` }}
+            </span>
+          </button>
         </div>
       </div>
 
@@ -136,7 +142,10 @@
         <div
           class="gap-2 mt-4 grid grid-flow-col overflow-x-scroll no-scrollbar"
         >
-          <div v-for="(f, k) in importer.assignableLabels" :key="f + '-' + k">
+          <div
+            v-for="(f, k) in importer.assignableLabels"
+            :key="'assigner-' + k"
+          >
             <p class="text-gray-600 text-sm mb-1">
               {{ f }}
               <span
@@ -194,7 +203,7 @@
           <!-- Data Rows -->
           <div
             v-if="importer.columnLabels.length > 0"
-            style="max-height: 500px"
+            style="max-height: 400px"
           >
             <div
               class="grid grid-flow-col mt-4 pb-4 border-b gap-2 items-center"
@@ -204,7 +213,12 @@
             >
               <button
                 class="w-4 h-4 text-gray-600 hover:text-gray-900 cursor-pointer"
-                @click="importer.dropRow(i)"
+                @click="
+                  () => {
+                    importer.dropRow(i);
+                    canReset = true;
+                  }
+                "
               >
                 <FeatherIcon name="x" />
               </button>
@@ -220,11 +234,37 @@
                   rounded
                   focus:bg-gray-200
                 "
-                @change="(e) => onValueChange(e, i, j)"
+                @change="
+                  (e) => {
+                    onValueChange(e, i, j);
+                    canReset = true;
+                  }
+                "
                 :key="'matrix-cell-' + i + '-' + j"
                 :value="c"
               />
             </div>
+            <button
+              class="
+                text-gray-600
+                hover:text-gray-900
+                flex flex-row
+                w-full
+                mt-4
+                outline-none
+              "
+              @click="
+                () => {
+                  importer.addRow();
+                  canReset = true;
+                }
+              "
+            >
+              <FeatherIcon name="plus" class="w-4 h-4" />
+              <p class="pl-4">
+                {{ t`Add Row` }}
+              </p>
+            </button>
           </div>
         </div>
       </div>
@@ -249,7 +289,7 @@
         <div class="max-h-96 overflow-y-scroll">
           <div
             v-for="(n, i) in names"
-            :key="i"
+            :key="'name-' + i"
             class="grid grid-cols-2 gap-2 border-b pb-2 mb-2 pr-4 text-lg w-60"
             style="grid-template-columns: 2rem auto"
           >
@@ -274,7 +314,7 @@ import FeatherIcon from '@/components/FeatherIcon.vue';
 import PageHeader from '@/components/PageHeader.vue';
 import { importable, Importer } from '@/dataImport';
 import { IPC_ACTIONS } from '@/messages';
-import { getSavePath, saveData, showMessageDialog, showToast } from '@/utils';
+import { getSavePath, saveData, showMessageDialog } from '@/utils';
 import { ipcRenderer } from 'electron';
 import frappe from 'frappe';
 export default {
@@ -287,6 +327,7 @@ export default {
   },
   data() {
     return {
+      canReset: false,
       complete: false,
       names: ['Bat', 'Baseball', 'Other Shit'],
       file: null,
@@ -295,8 +336,8 @@ export default {
     };
   },
   computed: {
-    labelIndex(){
-      return this.importer.labelIndex
+    labelIndex() {
+      return this.importer.labelIndex;
     },
     requiredUnassigned() {
       return this.importer.assignableLabels.filter(
@@ -310,13 +351,7 @@ export default {
       return this.importer.assignedMatrix;
     },
     actions() {
-      const cancelAction = {
-        component: {
-          template: '<span class="text-red-700" >{{ t`Cancel` }}</span>',
-        },
-        condition: () => true,
-        action: this.clear,
-      };
+      const actions = [];
 
       const secondaryAction = {
         component: {
@@ -325,7 +360,28 @@ export default {
         condition: () => true,
         action: this.handleSecondaryClick,
       };
-      return [secondaryAction, cancelAction];
+      actions.push(secondaryAction);
+
+      if (this.file) {
+        actions.push({
+          component: {
+            template: '<span>{{ t`Change File` }}</span>',
+          },
+          condition: () => true,
+          action: this.selectFile,
+        });
+      }
+
+      const cancelAction = {
+        component: {
+          template: '<span class="text-red-700" >{{ t`Cancel` }}</span>',
+        },
+        condition: () => true,
+        action: this.clear,
+      };
+      actions.push(cancelAction);
+
+      return actions;
     },
 
     fileName() {
@@ -381,8 +437,8 @@ export default {
   },
   methods: {
     showMe() {
+      const doctype = this.importer.doctype;
       this.clear();
-      const doctype = this.importer?.doctype ?? 'Item';
       this.$router.push(`/list/${doctype}`);
     },
     clear() {
@@ -391,6 +447,7 @@ export default {
       this.importer = null;
       this.importType = '';
       this.complete = false;
+      this.canReset = false;
     },
     handlePrimaryClick() {
       if (!this.file) {
@@ -462,9 +519,12 @@ export default {
         return;
       }
 
-      const { success, names } = await this.importer.importData();
-      if (!success || !names.length) {
-        // handle failure
+      const { success, names, message } = await this.importer.importData();
+      if (!success) {
+        showMessageDialog({
+          message: this.t`Import Failed`,
+          description: message,
+        });
         return;
       }
 
@@ -489,7 +549,7 @@ export default {
         await ipcRenderer.invoke(IPC_ACTIONS.GET_FILE, options);
 
       if (!success && !canceled) {
-        showToast({ message: this.t`File selection failed.`, type: 'error' });
+        showMessageDialog({ message: this.t`File selection failed.` });
       }
 
       if (!success || canceled) {
@@ -499,9 +559,9 @@ export default {
       const text = new TextDecoder().decode(data);
       const isValid = this.importer.selectFile(text);
       if (!isValid) {
-        showToast({
-          message: this.t`Bad import data. Could not select file.`,
-          type: 'error',
+        showMessageDialog({
+          message: this.t`Bad import data.`,
+          description: this.t`Could not select file.`,
         });
         return;
       }
@@ -511,8 +571,6 @@ export default {
         filePath,
         text,
       };
-
-      window.i = this.importer;
     },
   },
 };