test.js

<template>
  <div class="flex flex-col max-w-full p-4">
    <PageHeader>
      <h1 slot="title" class="text-2xl font-bold">Scyn with VSDC Items</h1>
      <template slot="actions">
        <SearchBar class="ml-2" />
      </template>
    </PageHeader>
    <div class="grid grid-cols-3 gap-4 mt-2">
      <div
        class="border border-gray-400 rounded-lg flex flex-col p-2"
        v-for="item in vsdcItems"
        :key="item.itemTitle"
      >
        <div class="flex items-center mb-2 ">
          <!-- <div class="h-6 w-6 rounded-full bg-green-700" /> -->
          <div class="flex flex-col w-56 ">
            <span class="font-semibold"> {{ item.title }}</span>
            <span class="text-sm text-gray-800 w-full">
              {{ item.description }}
            </span>
          </div>
        </div>
        <Button
          type="primary"
          class="text-sm text-white mb-1"
          @click="item.handler"
          :disabled="!doc || loading"
        >
          {{ item.buttonText }}
        </Button>
        <span class="text-xs text-gray-700">Last synced on: </span>
      </div>
    </div>
  </div>
</template>
<script>
import frappe from 'frappejs';
import PageHeader from '@/components/PageHeader';
import SearchBar from '@/components/SearchBar';
import Button from '@/components/Button';
import { remote } from 'electron';
import fs from 'fs';
import http from 'http';
import { checkVSDCStatus, request } from '@/utils';

export default {
  name: 'VATAnnexure',
  props: ['reportName', 'defaultFilters'],
  components: {
    PageHeader,
    SearchBar,
    Button
  },
  data() {
    return {
      loading: false,
      file_url: '',
      doc: null,
      vsdcItems: [
        {
          buttonText: 'Sync Purchases',
          title: 'Purchases',
          description: 'Fetch Purchases',
          handler: this.fetchVsdcAnnexure
        },
        {
          buttonText: 'Sync',
          title: 'Item Classification',
          description: 'Item classificatin Codes/UNSPC',
          handler: this.fetchItemCls
        },
        {
          buttonText: 'Coming Soon!',
          title: 'System Codes',
          description: 'Get System Codes',
          handler: this.defaultFetch
        },
        {
          buttonText: 'Fetch',
          title: 'System Codes Classification',
          description: 'Get System Codes Classification',
          handler: this.fetchSystemCodes
        },
        {
          buttonText: 'Coming Soon!',
          title: 'Taxpayer',
          description: 'Get Taxpayer, it returns 100',
          handler: this.defaultFetch
        },
        {
          buttonText: 'Coming Soon!',
          title: 'Purchase Item',
          description: 'Get Purchase Items',
          handler: this.defaultFetch
        },
        {
          buttonText: 'Coming Soon!',
          title: 'Import Item',
          description: 'Get Importations',
          handler: this.defaultFetch
        },
        {
          buttonText: 'Fetch Item',
          title: 'VSDC Annexure',
          description: 'Fetch Prepared VAT Annexure',
          handler: this.defaultFetch
        }
      ]
    };
  },
  async activated() {
    // await this.fetchReportData();
    this.doc = await frappe.getSingle('VSDCSettings');
  },
  methods: {
    async defaultFetch() {
      console.log('***** UPCOMING *****');
    },
    async fetchVsdcAnnexure() {
      try {
        this.loading = true;

        // Get filename and file url from VSDC
        let response = await fetch(
          `${this.doc.vsdc_host}/method/download_vat_annexure`,
          {
            headers: {
              Authorization: `token ${this.doc.api_key}:${this.doc.api_secret}`
            }
          }
        );
        let { success, message } = await response.json();

        if (success) {
          // Electron dowload file from file_url in message
          // Show dialog for USER to select saving directory
          var userChosenPath = await remote.dialog.showSaveDialog({
            defaultPath: message.file_name
          });

          if (userChosenPath) {
            this.download(
              message.file_url,
              userChosenPath.filePath,
              this.myUrlSaveAsComplete // Callback for when file downloading is complete
            );
          }
        } else {
          console.log('Error happened', message);
        }
      } catch (error) {
        console.log('Error >>', error);
      }
    },
    async fetchItemCls() {
      try {
        this.loading = true;

        this.vsdc_status = await checkVSDCStatus();
        // Get filename and file url from VSDC
        let {
          data: { message }
        } = await request({
          method: 'get',
          url: `method/receive_item_classification`
        });

        for (let item of message) {
          let existCode = await frappe.db.getAll({
            doctype: 'ItemClassificationCode',
            fields: ['name'],
            filters: {
              itemClsCd: item.itemclscd
            }
          });

          if (existCode.length > 0) continue;

          let item_doc = await frappe.newDoc({
            doctype: 'ItemClassificationCode',
            itemClsCd: item.itemclscd,
            itemClsNm: item.itemclsnm,
            taxTyCd: item.taxtycd,
            manageYn: item.manageyn,
            categoryLv: item.categorylv,
            useYn: item.useyn
          });
          await item_doc.insert();
        }
      } catch (error) {
        console.log('Error >>', error);
      }
    },
	    async fetchSystemCodes() {
      try {
        this.loading = true;

        this.vsdc_status = await checkVSDCStatus();
        // Get filename and file url from VSDC
        let {
          data: { message }
        } = await request({
          method: 'get',
          url: `method/receive_system_code_classification`
        });

        for (let item of message) {
          let existCode = await frappe.db.getAll({
            doctype: 'SysCodeCls',
            fields: ['name'],
            filters: {
              itemClsCd: item.codecls
            }
          });

          if (existCode.length > 0) continue;

          let SysCodeCls = await frappe.newDoc({
            doctype: 'SysCodeCls',
            codecls: item.codecls,
            codeclsnm: item.codeclsnm,
            codeclsdc: item.codeclsdc,
            useyn: item.useyn
          });
          await SysCodeCls.insert();
        }
      } catch (error) {
        console.log('Error >>', error);
      }
    },
    download(url, dest, cb) {
      var file = fs.createWriteStream(dest);
      http
        .get(url, function(response) {
          response.pipe(file);
          file.on('finish', function() {
            file.close(cb); // close() is async, call cb after close completes.
          });
        })
        .on('error', function(err) {
          // Handle errors
          fs.unlink(dest); // Delete the file async. (But we don't check the result)
          if (cb) cb(err.message);
        });
    },
    myUrlSaveAsComplete(err) {
      // Improve this callback for Stopping the reloader and provide a more frindly notification
      this.loading = false;
      console.log(err);
      alert('done');
    }
  }
};
</script>