Implement exporters config ui

.eslintrc.js

@@ -48,7 +48,7 @@ module.exports = {
     // 'no-param-reassign': ['error', { ignorePropertyModificationsFor: ['state'] }],
     'no-param-reassign': 'off',
     'no-shadow': ['error', { allow: ['state'] }],
-    'import/extensions': ['error', { js: 'never', vue: 'never', json: 'always' }],
+    'import/extensions': ['off'],
     'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
     // allow debugger during development
     'no-debugger': productionError,

package.json

@@ -28,6 +28,7 @@
     "@brafdlog/israeli-bank-scrapers-core": "^0.9.2",
     "@getstation/electron-google-oauth2": "2.1.0",
     "@sentry/electron": "^1.3.0",
+    "@vue/composition-api": "^1.0.0-beta.11",
     "core-js": "^3.4.4",
     "direct-vuex": "^0.12.0",
     "download-chromium": "^2.2.0",

src/components/app/ConfigEditor.vue

@@ -40,6 +40,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import { VForm } from '@/types/vuetify';
+import { required, positive } from '@/components/shared/formValidations';
 import store from '@/store';
 
 export default Vue.extend({
@@ -64,8 +65,8 @@ export default Vue.extend({
     this.reset();
   },
   methods: {
-    required: (value) => !!value || 'Required.',
-    positive: (value: number) => value > 0 || 'Must be grater than 0',
+    required,
+    positive,
     updateGlobalConfig: store.dispatch.Config.updateGlobalConfig,
     reset() {
       this.globalConfig = JSON.parse(JSON.stringify(this.storeGlobalConfig));

src/components/app/Exporters.vue

@@ -1,34 +1,32 @@
 <template>
   <div>
     <v-toolbar>
-      <v-toolbar-title>
-        Exporters
-      </v-toolbar-title>
+      <v-toolbar-title>Exporters</v-toolbar-title>
     </v-toolbar>
-    <exporter
-      v-for="vendor in vendors"
-      :key="vendor.name"
-      :vendor="vendor"
-    />
+    <expansion-panel title="Json">
+      <json-exporter />
+    </expansion-panel>
+    <expansion-panel title="Ynab">
+      <ynab-exporter />
+    </expansion-panel>
+    <expansion-panel title="Google Sheets">
+      <google-sheets-exporter />
+    </expansion-panel>
   </div>
 </template>
 
-<script>
-import { outputVendors } from '@/originalBudgetTrackingApp';
-import Exporter from './exporters/Exporter';
+<script lang="ts">
+import Vue from 'vue';
+import JsonExporter from './exporters/JsonExporter.vue';
+import GoogleSheetsExporter from './exporters/GoogleSheetsExporter.vue';
+import YnabExporter from './exporters/YnabExporter.vue';
+import ExpansionPanel from './exporters/ExpansionPanel.vue';
 
-export default {
-  components: { Exporter },
-  data() {
-    return {
-      accordionActiveItem: '',
-      statuses: {},
-    };
+export default Vue.extend({
+  components: {
+    ExpansionPanel, JsonExporter, GoogleSheetsExporter, YnabExporter
   },
-  computed: {
-    vendors: () => outputVendors,
-  },
-};
+});
 </script>
 
 <style scoped>

src/components/app/exporters/ExpansionPanel.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-expansion-panels>
+    <v-expansion-panel>
+      <v-expansion-panel-header disable-icon-rotate>
+        {{ title }}
+      </v-expansion-panel-header>
+      <v-expansion-panel-content>
+        <slot />
+      </v-expansion-panel-content>
+    </v-expansion-panel>
+  </v-expansion-panels>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'ExpansionPanel',
+  props: {
+    title: {
+      type: String,
+      required: true,
+    }
+  }
+});
+</script>
+
+<style>
+</style>

src/components/app/exporters/GoogleSheetsExporter.vue

@@ -0,0 +1,59 @@
+<template>
+  <v-form
+    ref="vForm"
+    v-model="validated"
+  >
+    <v-checkbox
+      v-model="exporter.active"
+      label="Active"
+      hide-details="auto"
+      @change="changed = true"
+    />
+    <v-text-field
+      v-model="exporter.options.credentialsFilePath"
+      label="Credentials file path"
+      hint="Path to google service account json file"
+      @change="changed = true"
+    />
+    <v-text-field
+      v-model="exporter.options.spreadsheetId"
+      label="Spreadsheet id"
+      hint="The id of the google spreadsheet"
+      @change="changed = true"
+    />
+    <v-text-field
+      v-model="exporter.options.sheetName"
+      label="Sheet name"
+      hint="The name of the sheet inside the spreadsheet to export to"
+      @change="changed = true"
+    />
+    <v-btn
+      color="primary"
+      :disabled="!readyToSave.value"
+      @click="submit()"
+    >
+      Save
+    </v-btn>
+  </v-form>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { OutputVendorName } from '@/originalBudgetTrackingApp/commonTypes';
+import { setupExporterConfigForm } from '@/components/app/exporters/exportersCommon';
+
+export default Vue.extend({
+  name: 'GoogleSheetsExporter',
+
+  setup() {
+    return {
+      ...setupExporterConfigForm(OutputVendorName.GOOGLE_SHEETS)
+    };
+  }
+});
+
+</script>
+
+<style scoped>
+
+</style>

src/components/app/exporters/JsonExporter.vue

@@ -0,0 +1,45 @@
+<template>
+  <v-form
+    ref="vForm"
+    v-model="validated"
+  >
+    <v-checkbox
+      v-model="exporter.active"
+      label="Active"
+      @change="changed = true"
+    />
+    <v-text-field
+      v-model="exporter.options.filePath"
+      label="JSON file"
+      outlined
+      @change="changed = true"
+    />
+    <v-btn
+      color="primary"
+      :disabled="!readyToSave.value"
+      @click="submit()"
+    >
+      Save
+    </v-btn>
+  </v-form>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { setupExporterConfigForm } from '@/components/app/exporters/exportersCommon';
+import { OutputVendorName } from '@/originalBudgetTrackingApp/commonTypes';
+
+export default Vue.extend({
+  name: 'JsonExporter',
+
+  setup() {
+    return {
+      ...setupExporterConfigForm(OutputVendorName.JSON)
+    };
+  }
+});
+</script>
+
+<style scoped>
+
+</style>

src/components/app/exporters/YnabAccountMappingTable.vue

@@ -0,0 +1,81 @@
+<template>
+  <v-simple-table dense>
+    <template v-slot:default>
+      <thead>
+        <tr>
+          <th>Account number</th>
+          <th>Ynab account id</th>
+          <th>Delete</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="accountNumberAndId in accountNumbersToYnabAccountIds"
+          :key="accountNumberAndId.accountNumber"
+        >
+          <td>
+            <v-text-field
+              v-model="accountNumberAndId.accountNumber"
+              full-width
+              dense
+              :rules="[rules.required]"
+              @keydown="$emit('mappingChanged')"
+            />
+          </td>
+          <td>
+            <v-text-field
+              v-model="accountNumberAndId.ynabAccountId"
+              full-width
+              dense
+              :rules="[rules.required]"
+              @keydown="$emit('mappingChanged')"
+            />
+          </td>
+          <td>
+            <v-btn
+              icon
+              color="red"
+              @click="deleteAccountMapping(accountNumberAndId.accountNumber)"
+            >
+              <v-icon>mdi-delete</v-icon>
+            </v-btn>
+          </td>
+        </tr>
+      </tbody>
+    </template>
+  </v-simple-table>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { required } from '@/components/shared/formValidations';
+
+export default Vue.extend({
+  name: 'YnabAccountMappingTable',
+  props: {
+    accountNumbersToYnabAccountIds: {
+      type: Array,
+      required: true
+    }
+  },
+  setup(_props) {
+    return {
+      deleteAccountMapping(accountNumberToDelete) {
+        // @ts-ignore
+        this.$emit('deleteAccountMapping', accountNumberToDelete);
+      },
+      addAccountMapping() {
+        // @ts-ignore
+        this.$emit('addAccountMapping');
+      },
+      rules: {
+        required
+      }
+    };
+  }
+});
+</script>
+
+<style scoped>
+
+</style>