export JSON et CSV

Author: alainabbas

src/pages/identities/export.vue

@@ -11,7 +11,9 @@
       :rows-per-page-options="[20,50,0]"
     >
       <template v-slot:top-left>
-        <q-btn color="positive" icon="mdi-cloud-download" size="md" flat >
+
+        <q-select outlined v-model="typeExport" :options="optionsExport" label="Format d'export" dense  style="width:150px;"/>
+        <q-btn color="positive" icon="mdi-cloud-download" size="md" flat @click="exportData" dense>
           Exporter
 
         </q-btn>
@@ -25,8 +27,9 @@ import {computed, onMounted, provide, ref} from "vue";
 import {useRoute} from "nuxt/app";
 const route = useRoute()
 const { columns, visibleColumns, columnsType } = useColumnsIdentites()
-
-
+const typeExport=ref('CSV')
+const optionsExport=ref(['CSV','JSON'])
+let rowsData=null
 
 // prise de la requete qui est dans l'url mise par le filtre
 const queryWithoutRead = computed(() => {
@@ -42,6 +45,7 @@ const { data: fieldsName, pending1, error1} = await useHttp('/management/identit
     const allFields=result.data.flatMap((enr)=>{
       return Object.keys(enr[enr.name].properties)
     })
+
     return allFields.map((enr)=>{
       return {name:enr,field:enr,label:enr,align: 'left'}
     })
@@ -52,6 +56,7 @@ const { data: rows1, pending, error, refresh } = await useHttp('/management/iden
     method: 'GET',
     query:queryWithoutRead,
     transform: (result)=>{
+      rowsData=result
       const allFields=result.data.map((enr)=>{
         let addF={}
         for (const [key, value] of Object.entries(enr?.additionalFields?.attributes||{})) {
@@ -80,6 +85,47 @@ const fieldsList = computed(() => {
   }, [])
 })
 
+async function exportData(){
+  if (typeExport.value === 'CSV'){
+    const csv=toCsv(fieldsName,rows1)
+    let blob=new Blob([csv],{type:'text/csv'})
+    let link=document.createElement('a')
+    link.href=window.URL.createObjectURL(blob)
+    link.download="sesame-export.csv"
+    link.click()
+  }else if(typeExport.value === 'JSON'){
+    let blob=new Blob([JSON.stringify(rowsData)],{type:'text/json'})
+    let link=document.createElement('a')
+    link.href=window.URL.createObjectURL(blob)
+    link.download="sesame-export.json"
+    link.click()
+
+  }
+
+}
+function toCsv(fields,rows){
+  const f=[]
+  const fString=[]
+  for (const [key,value] of Object.entries(fields.value)){
+    f.push(value.name )
+    fString.push('"' +value.name + '"')
+  }
+  let csv=f.join(';')
+  const tabCsv=[]
+  for (const [key,value] of Object.entries(rows.value)){
+    const ligne=f.map((k)=>{
+      if (typeof value[k] === 'string' || typeof value[k] === 'number'){
+        return '"' + value[k] +'"'
+      }else{
+        return '""'
+      }
+    })
+    tabCsv.push(ligne)
+  }
+  tabCsv.unshift(fString)
+  return tabCsv.join("\r\n")
+}
+
 provide('fieldsList', fieldsList.value)
 
 </script>