Skip to content

Instantly share code, notes, and snippets.

@fowkswe

fowkswe/flatfile.vue

Created August 31, 2022 20:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save fowkswe/ba5026a9320b3a4a01c06800512cc02b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save fowkswe/ba5026a9320b3a4a01c06800512cc02b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. fowkswe created this gist Aug 31, 2022.
    103 changes: 103 additions & 0 deletions flatfile.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,103 @@
    <template lang="pug">
    .content_assets_index
    b-button(size='sm' variant='secondary' v-if='account' @click='importClick' class='mr-2') Import Testimonials
    </template>
    <script lang="ts">
    import axios from 'axios'
    import { flatfileImporter } from '@flatfile/sdk'
    export default {
    data() {
    return {
    importer: null
    }
    },
    mounted() {
    //
    //
    //
    //
    // IF THIS COMPONENT IS LOADED MULTIPLE TIMES, THE
    // FLATFILE METHOD GETS CALLED FOR EACH ONE, CREATING
    // DUPLICATE EVENT HANDLERS
    //
    //
    //
    //
    //
    //
    console.log('Initializing Flatfile importer')
    axios
    .get('/app/api/tokens/import_testimonials')
    .then((response) => {
    this.importer = flatfileImporter(response.data.token)
    this.importer.on('error', (error) => {
    console.error(error)
    })
    this.importer.on('complete', this.handleFlatfileComplete)
    })
    .catch((e) =>
    console.error(
    'Flatfile jwt request failed. Are environment variables in place?',
    e
    )
    )
    },
    methods: {
    importClick() {
    console.log('import click')
    if (!this.importer) {
    alert('There was a problem initializing the importer.')
    return
    }
    this.importer.launch()
    },
    handleFlatfileComplete(payload) {
    //
    //
    //
    //
    // THIS IS CAN GET CALLED MULTIPLE TIMES ON THE SAME ROW
    //
    //
    //
    //
    const data = payload.data()
    const postData = {
    testimonials: data.rows.map((row) => {
    return {
    testimonial_text: row.data.testimonial_text,
    name: row.data.name,
    title: row.data.title,
    company: row.data.company,
    email: row.data.email,
    source: row.data.source,
    nps_score: row.data.nps_score,
    }
    }),
    }
    console.log('Flatfile data to POST', postData)
    axios.post('/app/api/content_assets/import.json', postData).then(
    (response) => {
    if (response.data.failures) {
    uiMessages.push(`⛔️ Uable to import ${response.data.failures} testimonials`)
    }
    if (response.data.successes) {
    uiMessages.push(`✅ ${response.data.successes} testimonials imported successfully`)
    console.log('Refreshing assets')
    setTimeout( () => {
    this.getContentAssets()
    }, 1000)
    }
    this.$toast(uiMessages.join(" "))
    }
    )
    .finally( () => {
    })
    },
    },
    }
    </script>