Output vendor interface

.eslintrc.js

@@ -56,7 +56,8 @@ module.exports = {
     'comma-dangle': 'off',
     'no-await-in-loop': 'off',
     'import/prefer-default-export': 'off',
-    'no-unused-vars': ['error', { args: 'after-used', argsIgnorePattern: '^_' }]
+    'no-unused-vars': ['error', { args: 'after-used', argsIgnorePattern: '^_|h' }],
+    'arrow-body-style': 'off',
   },
 
   overrides: [

package.json

@@ -11,7 +11,7 @@
     "build": "vue-cli-service electron:build",
     "postinstall": "electron-builder install-app-deps",
     "postuninstall": "electron-builder install-app-deps",
-    "prepare": "cp -n src/originalBudgetTrackingApp/categoryCalculationScript-example.js src/originalBudgetTrackingApp/categoryCalculationScript.js || true",
+    "prepare": "ncp src/originalBudgetTrackingApp/categoryCalculationScript-example.js src/originalBudgetTrackingApp/categoryCalculationScript.js || true",
     "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src",
     "lint:fix": "yarn lint --fix",
     "test": "yarn unit && yarn e2e",
@@ -78,7 +78,9 @@
     "jest": "^26.0.1",
     "jest-circus": "^26.0.1",
     "jest-config": "^26.0.1",
+    "jest-each": "^26.0.1",
     "jest-environment-jsdom": "^26.0.1",
+    "ncp": "^2.0.0",
     "prettier": "^2.0.5",
     "replace-in-file": "5.0.2",
     "sass": "^1.26.3",
@@ -90,9 +92,5 @@
     "vue-template-compiler": "^2.6.11",
     "vuetify-loader": "^1.4.4"
   },
-  "resolutions": {
-    "deepmerge": "^4.0.0",
-    "electron-builder": "^22.0.0"
-  },
   "snyk": true
 }

src/Splash.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>splash</div>
+</template>
+
+<script>
+export default {
+  name: 'Splash'
+};
+</script>
+
+<style>
+
+</style>

src/background.js

@@ -3,7 +3,7 @@ import { app, BrowserWindow } from 'electron';
 import { createProtocol, installVueDevtools } from 'vue-cli-plugin-electron-builder/lib';
 import CreateLogger from './logger';
 import { initializeReporter } from './modules/reporting';
-import './store';
+// import './store';
 
 initializeReporter();
 
@@ -16,7 +16,6 @@ let mainWindow;
 global.logger = CreateLogger(app);
 const { logger } = global;
 
-
 function createWindow() {
   // Create the browser window.
   mainWindow = new BrowserWindow({
@@ -28,14 +27,17 @@ function createWindow() {
     },
   });
 
+  // Workaround from https://github.com/electron/electron/issues/19554
+  const loadURL = (url) => setTimeout(() => mainWindow.loadURL(url), 100);
+
   if (process.env.WEBPACK_DEV_SERVER_URL) {
     // Load the url of the dev server if in development mode
-    mainWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
+    loadURL(process.env.WEBPACK_DEV_SERVER_URL);
     if (!process.env.IS_TEST) mainWindow.webContents.openDevTools();
   } else {
     createProtocol('app');
     // Load the index.html when not in development
-    mainWindow.loadURL('app://./index.html');
+    loadURL('app://./index.html');
   }
   mainWindow.on('closed', () => {
     mainWindow = null;

src/components/MainPage/DataTable.vue

@@ -43,7 +43,6 @@ const detailes = properties.map((prop) => ({
 
 const tableFooterHeight = 59;
 
-
 export default {
   name: 'DataTable',
   data() {

src/components/MainPage/Exporters.vue

@@ -5,89 +5,28 @@
         Exporters
       </v-toolbar-title>
     </v-toolbar>
-    <v-expansion-panels>
-      <v-expansion-panel
-        v-for="comp in exportersComponents"
-        :key="comp.name"
-        :name="comp.name"
-      >
-        <v-expansion-panel-header disable-icon-rotate>
-          {{ comp.title }}
-          <template v-slot:actions>
-            <v-tooltip
-              v-if="statuses[comp.name].lastMessage !== null"
-              left
-            >
-              <template v-slot:activator="{ on }">
-                <v-icon
-                  :color="iconClass(statuses[comp.name].success).color"
-                  dark
-                  v-on="on"
-                >
-                  {{ iconClass(statuses[comp.name].success).icon }}
-                </v-icon>
-              </template>
-              <span>{{ statuses[comp.name].lastMessage }}</span>
-            </v-tooltip>
-          </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
-          <component
-            :is="comp.name"
-            :message.sync="statuses[comp.name].lastMessage"
-            :success.sync="statuses[comp.name].success"
-          />
-        </v-expansion-panel-content>
-      </v-expansion-panel>
-    </v-expansion-panels>
+    <exporter
+      v-for="vendor in vendors"
+      :key="vendor.name"
+      :vendor="vendor"
+    />
   </div>
 </template>
 
 <script>
-import JsonExporter from './Exporters/JsonExporter';
-import SpreadsheetExporter from './Exporters/SpreadsheetExporter';
-
-const exportersComponents = {
-  JsonExporter,
-  SpreadsheetExporter,
-};
-
-const statuses = {};
-Object.keys(exportersComponents).forEach((key) => {
-  statuses[key] = {
-    lastMessage: null,
-    success: null,
-  };
-});
+import { outputVendors } from '@/originalBudgetTrackingApp';
+import Exporter from './Exporters/Exporter';
 
 export default {
-  components: { ...exportersComponents },
+  components: { Exporter },
   data() {
     return {
       accordionActiveItem: '',
-      exportersComponents,
-      statuses,
+      statuses: {},
     };
   },
-  methods: {
-    iconClass(success) {
-      if (success === true) {
-        return {
-          icon: 'mdi-check-circle',
-          color: 'green',
-        };
-      }
-      if (success === false) {
-        return {
-          icon: 'mdi-alert-circle',
-          color: 'error',
-        };
-      }
-      return {
-        icon: 'mdi-help-circle',
-        color: 'info',
-      };
-    },
+  computed: {
+    vendors: () => outputVendors,
   },
 };
 </script>

src/components/MainPage/Exporters/Exporter.vue

@@ -0,0 +1,83 @@
+<template>
+  <v-expansion-panels>
+    <v-expansion-panel>
+      <v-expansion-panel-header disable-icon-rotate>
+        {{ vendor.displayName }}
+      </v-expansion-panel-header>
+      <v-expansion-panel-content>
+        <v-form
+          ref="form"
+          v-model="validated"
+        >
+          <form-field
+            v-for="(fieldProps, fieldName) in vendor.fields"
+            :key="fieldName"
+            v-bind="fieldProps"
+            :value="loadedExporter[fieldName]"
+            @input="updateExporter($event, fieldName)"
+          />
+          <v-btn
+            color="primary"
+            :disabled="disableSave"
+            @click="submitForm()"
+          >
+            Save
+          </v-btn>
+        </v-form>
+      </v-expansion-panel-content>
+    </v-expansion-panel>
+  </v-expansion-panels>
+</template>
+
+<script>
+import FormField from '@/components/shared/FormField';
+import { GET_EXPORTER_GETTER, ADD_EXPORTER_ACTION } from '@/store/modules/Config';
+
+// TODO checkbox enabled/disabled
+// TODO rename to Exporter
+export default {
+  name: 'JsonExporter',
+  components: {
+    // TODO register global
+    FormField
+  },
+  props: {
+    vendor: {
+      type: Object,
+      required: true,
+    }
+  },
+  data() {
+    return {
+      exporter: {},
+      validated: true,
+      changed: false,
+    };
+  },
+  computed: {
+    loadedExporter() {
+      return this.$store.getters[GET_EXPORTER_GETTER](this.vendor.name);
+    },
+    disableSave() {
+      return !this.validated || !this.changed;
+    }
+  },
+  methods: {
+    updateExporter(value, fieldName) {
+      this.changed = true;
+      this.exporter[fieldName] = value;
+    },
+    submitForm() {
+      if (this.$refs.form.validate()) {
+        // TODO the arguments should be simple
+        this.$store.dispatch(ADD_EXPORTER_ACTION, { name: this.vendor.name, ...this.loadedExporter, ...this.exporter })
+          .then(() => { this.changed = false; });
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>