Implement exporters config ui

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

@@ -23,7 +23,9 @@ import YnabExporter from './exporters/YnabExporter.vue';
 import ExpansionPanel from './exporters/ExpansionPanel.vue';
 
 export default Vue.extend({
-  components: { ExpansionPanel, JsonExporter, GoogleSheetsExporter, YnabExporter },
+  components: {
+    ExpansionPanel, JsonExporter, GoogleSheetsExporter, YnabExporter
+  },
 });
 </script>
 

src/components/app/exporters/GoogleSheetsExporter.vue

@@ -39,35 +39,19 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { computed, ref, reactive } from '@vue/composition-api';
-import store from '@/store';
-import { GoogleSheetsConfig } from '@/originalBudgetTrackingApp/configManager/configManager';
-import { VForm } from '@/types/vuetify';
+import { OutputVendorName } from '@/originalBudgetTrackingApp/commonTypes';
+import { setupExporterConfigForm } from '@/components/app/exporters/exportersCommon';
 
 export default Vue.extend({
   name: 'GoogleSheetsExporter',
 
   setup() {
-    const vForm = ref<VForm>();
-
-    const exporterName = 'googleSheets';
-    const exporter = reactive(JSON.parse(JSON.stringify(store.getters.Config.getExporter(exporterName))) as GoogleSheetsConfig);
-
-    const validated = ref(true);
-    const changed = ref(false);
-    const readyToSave = computed(() => validated && changed);
-    const submit = async () => {
-      if (vForm.value?.validate()) {
-        await store.dispatch.Config.updateExporter({ name: exporterName, exporter });
-        changed.value = false;
-      }
-    };
-
     return {
-      validated, changed, readyToSave, submit, exporter, vForm
+      ...setupExporterConfigForm(OutputVendorName.GOOGLE_SHEETS)
     };
   }
 });
+
 </script>
 
 <style scoped>

src/components/app/exporters/JsonExporter.vue

@@ -26,31 +26,15 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { computed, ref, reactive } from '@vue/composition-api';
-import store from '@/store';
-import { JsonConfig } from '@/originalBudgetTrackingApp/configManager/configManager';
-import { VForm } from '@/types/vuetify';
+import { setupExporterConfigForm } from '@/components/app/exporters/exportersCommon';
+import { OutputVendorName } from '@/originalBudgetTrackingApp/commonTypes';
 
 export default Vue.extend({
   name: 'JsonExporter',
 
   setup() {
-    const vForm = ref<VForm>();
-
-    const exporter = reactive(JSON.parse(JSON.stringify(store.getters.Config.getExporter('json'))) as JsonConfig);
-
-    const validated = ref(true);
-    const changed = ref(false);
-    const readyToSave = computed(() => validated && changed);
-    const submit = () => {
-      if (vForm.value?.validate()) {
-        store.dispatch.Config.updateExporter({ name: 'json', exporter })
-          .then(() => { changed.value = false; });
-      }
-    };
-
     return {
-      validated, changed, readyToSave, submit, exporter, vForm
+      ...setupExporterConfigForm(OutputVendorName.JSON)
     };
   }
 });

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>

src/components/app/exporters/YnabExporter.vue

@@ -14,47 +14,95 @@
       type="password"
       label="Access Token"
       outlined
+      @change="changed = true"
+    />
+    <v-text-field
+      v-model="exporter.options.budgetId"
+      label="Budget id"
+      outlined
+      @change="changed = true"
+    />
+    <ynab-account-mapping-table
+      :account-numbers-to-ynab-account-ids="accountNumbersToYnabAccountIdsArray"
+      @mappingChanged="markChanged()"
+      @addAccountMapping="addAccountMapping()"
+      @deleteAccountMapping="deleteAccountMapping($event)"
     />
-    <v-btn
-      color="primary"
-      :disabled="!readyToSave.value"
-      @click="submit()"
-    >
-      Save
-    </v-btn>
+    <v-container>
+      <v-row>
+        <v-col cols="10">
+          <v-btn
+            color="primary"
+            :disabled="!readyToSave.value"
+            @click="submit()"
+          >
+            Save
+          </v-btn>
+        </v-col>
+        <v-col cols="2">
+          <v-btn
+            color="blue"
+            fab
+            dark
+            small
+            @click="addAccountMapping()"
+          >
+            <v-icon dark>
+              mdi-plus
+            </v-icon>
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
   </v-form>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import { computed, ref, reactive } from '@vue/composition-api';
-import store from '@/store';
-import { OutputVendorsConfig } from '@/originalBudgetTrackingApp/configManager/configManager';
-import { VForm } from '@/types/vuetify';
-
-const exporterName = 'ynab';
+import { setupExporterConfigForm } from '@/components/app/exporters/exportersCommon';
+import { OutputVendorName } from '@/originalBudgetTrackingApp/commonTypes';
+import { computed } from '@vue/composition-api';
+import YnabAccountMappingTable from '@/components/app/exporters/YnabAccountMappingTable.vue';
+import { YnabConfig } from '@/originalBudgetTrackingApp/configManager/configManager';
 
 export default Vue.extend({
   name: 'YnabExporter',
 
+  components: { YnabAccountMappingTable },
+
   setup() {
-    const vForm = ref<VForm>();
+    const dataToReturn = setupExporterConfigForm(OutputVendorName.YNAB);
+    const ynabConfig = dataToReturn.exporter as YnabConfig;
+    const accountNumbersToYnabAccountIdsArray = computed(() => {
+      return Object.keys(ynabConfig.options.accountNumbersToYnabAccountIds).map((accountNumber) => ({
+        accountNumber,
+        ynabAccountId: ynabConfig.options.accountNumbersToYnabAccountIds[accountNumber]
+      }));
+    });
 
-    const exporter = reactive(JSON.parse(JSON.stringify(store.getters.Config.getExporter(exporterName))) as OutputVendorsConfig<typeof exporterName>);
+    return {
+      ...dataToReturn,
+      accountNumbersToYnabAccountIdsArray,
+      submit: () => {
+        const updatedAccountNumbersToYnabAccountIds = {};
+        accountNumbersToYnabAccountIdsArray.value.forEach(({ accountNumber, ynabAccountId }) => {
+          updatedAccountNumbersToYnabAccountIds[accountNumber] = ynabAccountId;
+        });
+        ynabConfig.options.accountNumbersToYnabAccountIds = updatedAccountNumbersToYnabAccountIds;
 
-    const validated = ref(true);
-    const changed = ref(false);
-    const readyToSave = computed(() => validated && changed);
-    const submit = () => {
-      if (vForm.value?.validate()) {
-        store.dispatch.Config.updateExporter({ name: exporterName, exporter })
-          .then(() => { changed.value = false; });
+        dataToReturn.submit();
+      },
+      deleteAccountMapping: (accountNumber) => {
+        Vue.delete(ynabConfig.options.accountNumbersToYnabAccountIds, accountNumber);
+        dataToReturn.changed.value = true;
+      },
+      addAccountMapping: () => {
+        Vue.set(ynabConfig.options.accountNumbersToYnabAccountIds, '###', '###');
+      },
+      markChanged: () => {
+        dataToReturn.changed.value = true;
       }
     };
-
-    return {
-      validated, changed, readyToSave, submit, exporter, vForm
-    };
   }
 });
 </script>

src/components/app/exporters/exportersCommon.ts

@@ -0,0 +1,25 @@
+import { cloneDeep } from 'lodash';
+import { computed, reactive, ref } from '@vue/composition-api';
+import { VForm } from '@/types/vuetify';
+import store from '@/store';
+import { OutputVendorName } from '@/originalBudgetTrackingApp/commonTypes';
+
+export function setupExporterConfigForm<T extends OutputVendorName>(exporterName: T) {
+  const vForm = ref<VForm>();
+
+  const exporter = reactive(cloneDeep(store.getters.Config.getExporter(exporterName)));
+
+  const validated = ref(true);
+  const changed = ref(false);
+  const readyToSave = computed(() => validated && changed);
+  const submit = async () => {
+    if (vForm.value?.validate()) {
+      await store.dispatch.Config.updateExporter({ name: exporterName, exporter });
+      changed.value = false;
+    }
+  };
+
+  return {
+    validated, changed, readyToSave, submit, exporter, vForm
+  };
+}

src/components/shared/formValidations.ts

@@ -0,0 +1,7 @@
+export function required(value) {
+  return !!value || 'Required.';
+}
+
+export function positive(value: number) {
+  return value > 0 || 'Must be grater than 0';
+}

src/originalBudgetTrackingApp/commonTypes.ts

@@ -10,7 +10,8 @@ export interface EnrichedTransaction extends Transaction {
 
 export enum OutputVendorName {
   YNAB = 'ynab',
-  GOOGLE_SHEETS = 'googleSheets'
+  GOOGLE_SHEETS = 'googleSheets',
+  JSON = 'json'
 }
 
 export type ExportTransactionsParams = {

src/store/modules/config.ts

@@ -2,7 +2,6 @@ import { randomHex } from '@/modules/encryption/crypto';
 import {
   AccountToScrapeConfig, Config, OutputVendorsConfig, OutputVendorsNames
 } from '@/originalBudgetTrackingApp/configManager/configManager';
-import defaultConfig from '@/originalBudgetTrackingApp/configManager/defaultConfig';
 import { defineModule } from 'direct-vuex';
 import { moduleActionContext } from '..';
 
@@ -15,7 +14,6 @@ type ExporterPayload<T extends OutputVendorsNames> = { name: T, exporter: Output
 
 const configModule = defineModule({
   namespaced: true as true,
-  state: defaultConfig,
   mutations: {
     addImporter: (state: Config, importer: AccountToScrapeConfig) => state.scraping.accountsToScrape.push(importer),
     removeImporter: (state: Config, importerId: string) => {
@@ -37,7 +35,7 @@ const configModule = defineModule({
       });
       return importers;
     },
-    getExporter: (state) => (name: OutputVendorsNames) => state.outputVendors[name],
+    getExporter: <T extends OutputVendorsNames>(state) => (name: T): OutputVendorsConfig<T> => state.outputVendors[name],
     globalConfig: ({ scraping }): GlobalConfig => {
       const { numDaysBack, showBrowser } = scraping;
       return { numDaysBack, showBrowser };