Merge branch 'feat/user-groups-tab' of github.com:Budibase/budibase into feat/user-groups-tab

packages/builder/src/helpers/data/utils.js

@@ -150,12 +150,31 @@ export function flipHeaderState(headersActivity) {
   return enabled
 }
 
+export const parseToCsv = (headers, rows) => {
+  let csv = headers?.map(key => `"${key}"`)?.join(",") || ""
+
+  for (let row of rows) {
+    csv = `${csv}\n${headers
+      .map(header => {
+        let val = row[header]
+        val =
+          typeof val === "object" && !(val instanceof Date)
+            ? `"${JSON.stringify(val).replace(/"/g, "'")}"`
+            : `"${val}"`
+        return val.trim()
+      })
+      .join(",")}`
+  }
+  return csv
+}
+
 export default {
   breakQueryString,
   buildQueryString,
   fieldsToSchema,
   flipHeaderState,
   keyValueToQueryParameters,
+  parseToCsv,
   queryParametersToKeyValue,
   schemaToFields,
 }

packages/builder/src/pages/builder/portal/manage/users/_components/PasswordModal.svelte

@@ -1,6 +1,7 @@
 <script>
   import { Body, ModalContent, Table, Icon } from "@budibase/bbui"
   import PasswordCopyRenderer from "./PasswordCopyRenderer.svelte"
+  import { parseToCsv } from "helpers/data/utils"
 
   export let userData
 
@@ -15,6 +16,29 @@
     email: {},
     password: {},
   }
+
+  const downloadCsvFile = () => {
+    const fileName = "passwords.csv"
+    const content = parseToCsv(["email", "password"], mappedData)
+
+    download(fileName, content)
+  }
+
+  const download = (filename, text) => {
+    const element = document.createElement("a")
+    element.setAttribute(
+      "href",
+      "data:text/csv;charset=utf-8," + encodeURIComponent(text)
+    )
+    element.setAttribute("download", filename)
+
+    element.style.display = "none"
+    document.body.appendChild(element)
+
+    element.click()
+
+    document.body.removeChild(element)
+  }
 </script>
 
 <ModalContent
@@ -30,7 +54,7 @@
     Make not of these passwords or download the csv</Body
   >
 
-  <div class="container">
+  <div class="container" on:click={downloadCsvFile}>
     <div class="inner">
       <Icon name="Download" />