feat: custom download implemented on frontend

Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>

frontend/src/views/BhavCopy.vue

@@ -1,9 +1,34 @@
 <template>
   <div class="table">
+    <v-card-title>
+      Bhav Copy - Equity
+      <v-spacer></v-spacer>
+        <v-btn
+          class="ma-2"
+          color="indigo"
+          @click="downloadcsv"
+        >
+          Download
+          <v-icon
+            dark
+            right
+          >
+            mdi-cloud-download
+          </v-icon>
+        </v-btn>
+      <v-spacer></v-spacer>
+      <v-text-field
+        ref="searchField"
+        v-model="sc_name"
+        append-icon="mdi-magnify"
+        label="Search Stock Name"
+      ></v-text-field>
+    </v-card-title>
     <v-data-table
+      ref="bhavCopyTable"
       :items="APIData"
       :headers="headers"
-      :items-per-page="15"
+      :items-per-page="10"
       :footer-props="{
         showFirstLastPage: true,
         firstIcon: 'mdi-arrow-collapse-left',
@@ -11,19 +36,64 @@
         prevIcon: 'mdi-minus',
         nextIcon: 'mdi-plus'
       }"
-    ></v-data-table>
+    >
+      <template v-slot:top>
+      </template>
+    </v-data-table>
   </div>
 </template>
 
 <script>
   import { getAPI } from '../axios-api'
   export default {
-    name: 'Posts',
+    name: 'BhavStock',
+    methods: {
+      downloadcsv() {
+        var table_data = this.$refs["bhavCopyTable"];
+        var searchField = this.$refs["searchField"];
+        var rows = []
+        table_data.items.forEach(element => {
+          if (element.sc_name.toLowerCase().includes(searchField.value.toLowerCase())){
+            rows.push([
+              element.sc_code,
+              element.sc_name,
+              element.sc_group,
+              element.sc_type,
+              element.open_price,
+              element.high_price,
+              element.low_price,
+              element.close_price,
+              element.last_price,
+              element.prevclose_price,
+              element.no_trades,
+              element.no_of_shrs,
+              element.net_turnov,
+              element.tdcloindi,
+            ])
+          }
+        })
+        // console.log(rows)
+        let csvContent = "data:text/csv;charset=utf-8,"
+          + rows.map(e => e.join(",")).join("\n");
+        var encodedUri = encodeURI(csvContent);
+        var link = document.createElement("a");
+        link.setAttribute("href", encodedUri);
+        link.setAttribute("download", "custom_bhav_copy_equity.csv");
+        document.body.appendChild(link);
+        link.click();
+      },
+    },
     computed: {
       headers() {
         return [
           {text: 'Stock Code', value: 'sc_code'},
-          {text: 'Stock Name', value: 'sc_name'},
+          {
+            text: 'Stock Name',
+            value: 'sc_name',
+            filter: value => {
+              return value.toLowerCase().includes(this.sc_name.toLowerCase())
+            },
+          },
           {text: 'Stock Group', value: 'sc_group'},
           {text: 'Stock Type', value: 'sc_type'},
           {text: 'Open', value: 'open_price'},
@@ -41,6 +111,7 @@
     },
     data() {
       return {
+        sc_name: '',
         APIData: []
       }
     },