export to excel

actions/graph.js

@@ -1,4 +1,5 @@
 import axiosAPI from "../config/axios";
+import { API_URL } from "../env";
 
 export const getGraph = async (token, query = {}) => {
 	try {
@@ -42,3 +43,19 @@ export const getGraph = async (token, query = {}) => {
 		return false;
 	}
 };
+
+export const getExcel = (token, filename, query = {}) => {
+	let url = API_URL + "/graph/" + token + "/" + filename + ".xlsx";
+	if (query != null) {
+		const { tahun } = query;
+		url += "?";
+		const parseURL = [];
+		if (tahun) {
+			parseURL.push(`tahun=${tahun}`);
+		}
+
+		url += parseURL.join("&");
+	}
+
+	return url;
+};

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>

components/Pelaporan/CaseProgress.js

@@ -6,8 +6,7 @@ import { ChartSpline, ChartArea, ChartBar, ChartBarStacked, ChartDonut, ChartLin
 import Datatable from "@/components/Tables/Datatable";
 import { useState, useEffect } from "react";
 
-function CaseProgress({ data, nextButton, prevButton, tahun, newLaporan }) {
-	console.log(data);
+function CaseProgress({ data, nextButton, prevButton, tahun, newLaporan, excel }) {
 	const laporan_pertahun = data.laporan_perTahun;
 
 	const [chartData, setChartData] = useState([
@@ -118,7 +117,7 @@ function CaseProgress({ data, nextButton, prevButton, tahun, newLaporan }) {
 						<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" onClick={excel}>
 						<img src="/static/img/eksport.png"></img>
 					</Button>
 				</div>

components/Pemeriksaan/CaseProgress.js

@@ -8,7 +8,7 @@ import Datatable from "@/components/Tables/Datatable";
 import MorrisChart from "@/components/Charts//Morris";
 import { Button } from "reactstrap";
 
-function CaseProgress({ data, nextButton, prevButton, tahun }) {
+function CaseProgress({ data, nextButton, prevButton, tahun, excel }) {
 	const ChartBar = {
 		data: [
 			{
@@ -106,7 +106,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" onClick={excel}>
 						<img src="/static/img/eksport.png"></img>
 					</Button>
 				</div>

components/Penjadwalan/CaseProgress.js

@@ -8,7 +8,7 @@ import Datatable from "@/components/Tables/Datatable";
 import MorrisChart from "@/components/Charts//Morris";
 import { Button } from "reactstrap";
 
-function CaseProgress({ data, nextButton, prevButton, tahun }) {
+function CaseProgress({ data, nextButton, prevButton, tahun, excel }) {
 	const ChartBar = {
 		data: [
 			{
@@ -106,7 +106,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" onClick={excel}>
 						<img src="/static/img/eksport.png"></img>
 					</Button>
 				</div>

components/Sanksi/CaseProgress.js

@@ -8,7 +8,7 @@ import Datatable from "@/components/Tables/Datatable";
 import MorrisChart from "@/components/Charts//Morris";
 import { Button } from "reactstrap";
 
-function CaseProgress({ data, nextButton, prevButton, tahun }) {
+function CaseProgress({ data, nextButton, prevButton, tahun, excel }) {
 	const ChartBar = {
 		data: [
 			{
@@ -105,7 +105,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" 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 = () => {
+		const url = getExcel(this.props.token, "Laporan Delegasi", { tahun: this.state.tahun });
+		Router.push(url);
+	};
+
 	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>

pages/app/pelaporan/index.js

@@ -3,11 +3,12 @@ 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/Pelaporan/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) {
@@ -43,6 +44,11 @@ class Pelaporan extends Component {
 		if (prevState.graph !== this.state.graph) return true;
 	};
 
+	excel = () => {
+		const url = getExcel(this.props.token, "Laporan", { tahun: this.state.tahun });
+		Router.push(url);
+	};
+
 	render() {
 		const { pelaporan, graph, newLaporan } = this.state;
 
@@ -58,7 +64,7 @@ class Pelaporan extends Component {
 					</Link>
 				</div>
 				<Row>
-					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} newLaporan={newLaporan} /> : <Loader />}</Col>
+					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} newLaporan={newLaporan} excel={this.excel} /> : <Loader />}</Col>
 					<Col lg="8">
 						<div className="mb-3 d-flex">
 							<div>

pages/app/pemeriksaan/index.js

@@ -2,13 +2,14 @@ import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col } from "reactstrap";
 import { getPelaporan } from "@/actions/pelaporan";
-import { getGraph } from "@/actions/graph";
+import { getGraph, getExcel } from "@/actions/graph";
 import CaseProgress from "@/components/Pemeriksaan/CaseProgress";
 import TableLaporan from "@/components/Pemeriksaan/TableLaporan";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
 import Link from "next/link";
 import Button from "reactstrap/lib/Button";
+import Router from "next/router";
 
 class Pemeriksaan extends Component {
 	constructor(props) {
@@ -43,6 +44,11 @@ class Pemeriksaan extends Component {
 		if (prevState.graph !== this.state.graph) return true;
 	};
 
+	excel = () => {
+		const url = getExcel(this.props.token, "Laporan", { tahun: this.state.tahun });
+		Router.push(url);
+	};
+
 	render() {
 		const { pelaporan, graph } = this.state;
 		return (
@@ -66,7 +72,7 @@ class Pemeriksaan extends Component {
 					</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 status noBy listData={pelaporan.data} to="/app/pemeriksaan/new" linkName="Evaluasi" /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>

pages/app/penjadwalan/index.js

@@ -2,13 +2,14 @@ import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col } from "reactstrap";
 import { getPelaporan } from "@/actions/pelaporan";
-import { getGraph } from "@/actions/graph";
+import { getGraph, getExcel } from "@/actions/graph";
 import CaseProgress from "@/components/Penjadwalan/CaseProgress";
 import TableLaporan from "@/components/Penjadwalan/TableLaporan";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
 import Link from "next/link";
 import Button from "reactstrap/lib/Button";
+import Router from "next/router";
 
 class Penjadwalan extends Component {
 	constructor(props) {
@@ -43,6 +44,11 @@ class Penjadwalan extends Component {
 		if (prevState.graph !== this.state.graph) return true;
 	};
 
+	excel = () => {
+		const url = getExcel(this.props.token, "Laporan", { tahun: this.state.tahun });
+		Router.push(url);
+	};
+
 	render() {
 		const { pelaporan, graph } = this.state;
 		return (
@@ -66,7 +72,7 @@ class Penjadwalan extends Component {
 					</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/penjadwalan/todo" linkName="Atur Jadwal" /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>

pages/app/sanksi/index.js

@@ -2,13 +2,14 @@ import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col } from "reactstrap";
 import { getPelaporan } from "@/actions/pelaporan";
-import { getGraph } from "@/actions/graph";
+import { getGraph, getExcel } from "@/actions/graph";
 import CaseProgress from "@/components/Sanksi/CaseProgress";
 import TableLaporan from "@/components/Sanksi/TableLaporan";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
 import Link from "next/link";
 import Button from "reactstrap/lib/Button";
+import Router from "next/router";
 
 class Sanksi extends Component {
 	constructor(props) {
@@ -43,6 +44,11 @@ class Sanksi extends Component {
 		if (prevState.graph !== this.state.graph) return true;
 	};
 
+	excel = () => {
+		const url = getExcel(this.props.token, "Laporan", { tahun: this.state.tahun });
+		Router.push(url);
+	};
+
 	render() {
 		const { pelaporan, graph } = this.state;
 		return (
@@ -58,7 +64,7 @@ class Sanksi extends Component {
 					</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} /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>