first poc

common/scripts.ts

@@ -349,7 +349,7 @@ export class Base64 {
 /**
  * Simple object check.
  */
-export function isObject(item: any) {
+function isObject(item: any) {
   return item && typeof item === 'object' && !Array.isArray(item) && !(item instanceof Date)
 }
 
@@ -376,7 +376,7 @@ export function mergeDeep(target: any, ...sources: any) {
   return mergeDeep(target, ...sources)
 }
 
-export function csvToObjects(csv: string, separator = '\t', arraySeparator = ', ') {
+export function csvToObjects(csv: string, separator = '\t', arraySeparator = ', ', pathSeparator = '.') {
   var lines = csv.split('\n')
   var result = []
   var headers = lines[0].split(separator)
@@ -387,12 +387,21 @@ export function csvToObjects(csv: string, separator = '\t', arraySeparator = ',
     }
     var currentline = lines[i].split(separator)
     for (var j = 0; j < headers.length; j++) {
+      let object = obj
+      const pathParts = headers[j].split(pathSeparator)
+      for (var k = 0; k < pathParts.length - 1; k++) {
+        if (j == 0) {
+          object[pathParts[k]] = {}
+        }
+        object = object[pathParts[k]]
+      }
+      let key = pathParts[pathParts.length - 1]
       // search for [] to identify arrays
       const match = currentline[j].match(/^\[(.*)\]$/)
       if (match === null) {
-        obj[headers[j]] = currentline[j]
+        object[key] = currentline[j]
       } else {
-        obj[headers[j]] = match[1].split(arraySeparator)
+        object[key] = match[1].split(arraySeparator)
       }
     }
     result.push(obj)

frontend/src/components/settings/SettingsPage.vue

@@ -19,6 +19,7 @@
         <h1>{{ $t('labels.' + entry) }}</h1>
         <SettingsForm v-if="entry === 'settings'"></SettingsForm>
         <template v-else-if="entry === 'users'">
+          <CSVImport endpoint="admin/user/bulk"></CSVImport>
           <UserList class="mb-5"</UserList>
           <h2>{{ $t('labels.mergeUsers') }}</h2>
           <UserMerge></UserMerge>
@@ -37,6 +38,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import CountryList from './elements/CountryList.vue'
+import CSVImport from './elements/CSVImport.vue'
 import CurrencyList from './elements/CurrencyList.vue'
 import HealthInsuranceList from './elements/HealthInsuranceList.vue'
 import OrganisationList from './elements/OrganisationList.vue'
@@ -49,7 +51,7 @@ const entries = ['users', 'organisations', 'projects', 'countries', 'currencies'
 
 export default defineComponent({
   name: 'SettingsPage',
-  components: { UserList, SettingsForm, OrganisationList, ProjectList, CountryList, CurrencyList, HealthInsuranceList, UserMerge },
+  components: { UserList, SettingsForm, OrganisationList, ProjectList, CountryList, CurrencyList, HealthInsuranceList, UserMerge, CSVImport },
   data() {
     return {
       entries,

frontend/src/components/settings/elements/CSVImport.vue

@@ -0,0 +1,43 @@
+<template>
+  <h3>CSV Import</h3>
+  <input class="form-control" type="file" accept=".csv,.tsv,.tab" @change="readFile" required />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { csvToObjects } from '../../../../../common/scripts'
+
+export default defineComponent({
+  name: 'CSVImport',
+  data() {
+    return {}
+  },
+  components: {},
+  props: { endpoint: { type: String, required: true } },
+  methods: {
+    readFile(event: Event) {
+      if (event.target && (event.target as HTMLInputElement).files && (event.target as HTMLInputElement).files!.length > 0) {
+        const file = (event.target as HTMLInputElement).files![0]
+        const reader = new FileReader()
+        reader.readAsText(file)
+        reader.onload = (e: Event) => {
+          this.submit(this.convert((e.target as FileReader).result as string))
+        }
+      }
+    },
+    convert(csv: string) {
+      return csvToObjects(csv)
+    },
+    async submit(data: any[]) {
+      const result = await this.$root.setter<any[]>(this.endpoint, data)
+      if (result.error) {
+        console.log(result.error)
+      }
+    }
+  },
+  mounted() {},
+  watch: {}
+})
+</script>
+
+<style></style>