coba consume export to excel

actions/graph.js

@@ -42,3 +42,25 @@ export const getGraph = async (token, query = {}) => {
 		return false;
 	}
 };
+
+export const getExcel = async (token, filename, query = {}) => {
+	try {
+		let url = "/graph/" + filename + ".xlsx";
+		if (query != null) {
+			const { tahun } = query;
+			url += "?";
+			const parseURL = [];
+			if (tahun) {
+				parseURL.push(`tahun=${tahun}`);
+			}
+
+			url += parseURL.join("&");
+		}
+
+		const res = await axiosAPI.get(url, { headers: { Authorization: token } });
+		return res.data;
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};

components/Delegasi/CaseProgress.js

@@ -8,7 +8,7 @@ import { ChartSpline, ChartArea, ChartBarStacked, ChartDonut, ChartLine } from "
 import Datatable from "@/components/Tables/Datatable";
 import MorrisChart from "@/components/Charts//Morris";
 
-function CaseProgress({ data, nextButton, prevButton, tahun }) {
+function CaseProgress({ data, nextButton, prevButton, tahun, excel }) {
 	const ChartPie = {
 		data: [
 			{
@@ -116,7 +116,7 @@ function CaseProgress({ data, nextButton, prevButton, tahun }) {
 						<img src="/static/img/next.png"></img>
 					</Button>
 					<b className="text-tahun">Tahun {tahun} </b>
-					<Button className="float-right button-hidden icon-eksport">
+					<Button className="float-right button-hidden icon-eksport" type="submit" onClick={excel}>
 						<img src="/static/img/eksport.png"></img>
 					</Button>
 				</div>

pages/app/laporan-delegasi/index.js

@@ -1,13 +1,13 @@
 import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import Link from "next/link";
 import { Row, Col, Button } from "reactstrap";
 import { getPelaporan } from "@/actions/pelaporan";
-import { getGraph } from "@/actions/graph";
+import { getGraph, getExcel } from "@/actions/graph";
 import CaseProgress from "@/components/Delegasi/CaseProgress";
 import TableLaporan from "@/components/Main/TableLaporan";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
+import Router from "next/router";
 
 class Pelaporan extends Component {
 	constructor(props) {
@@ -41,6 +41,11 @@ class Pelaporan extends Component {
 		if (prevState.graph !== this.state.graph) return true;
 	};
 
+	excel = async () => {
+		const data = await getExcel(this.props.token, "Laporan Delegasi", { tahun: this.state.tahun });
+		Router.push(data.data.path);
+	};
+
 	render() {
 		const { pelaporan, graph } = this.state;
 		return (
@@ -50,7 +55,7 @@ class Pelaporan extends Component {
 					<div className="ml-auto"></div>
 				</div>
 				<Row>
-					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} /> : <Loader />}</Col>
+					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} excel={this.excel} /> : <Loader />}</Col>
 					<Col lg="8">{pelaporan?.data ? <TableLaporan listData={pelaporan.data} to="/app/laporan-delegasi/detail" linkName="Detail" /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>