Merge branch 'main' of https://gitlab.com/empatnusabangsa/ppob/ppob-frontend into devops-production

2023-01-04 01:18:03 +07:00 · 2023-01-04 01:18:03 +07:00 · d85051d164
commit d85051d164
parent e315a2d7d7 32d3a0f4fc
5 changed files with 9626 additions and 9044 deletions
--- a/package.json
+++ b/package.json
@ -16,12 +16,14 @@
    "@typescript-eslint/eslint-plugin": "^4.26.1",
    "@typescript-eslint/parser": "^4.26.1",
    "antd": "^4.16.2",
+    "axios": "^1.2.2",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^27.0.2",
    "babel-loader": "8.2.2",
    "babel-plugin-named-asset-import": "^0.3.7",
    "babel-preset-react-app": "^10.0.0",
    "bfj": "^7.0.2",
+    "blob-util": "^2.0.2",
    "camelcase": "^6.2.0",
    "case-sensitive-paths-webpack-plugin": "2.4.0",
    "css-loader": "4.3.0",
@ -39,6 +41,7 @@
    "eslint-plugin-testing-library": "^3.9.2",
    "eslint-webpack-plugin": "^2.5.4",
    "file-loader": "6.2.0",
+    "file-saver": "^2.0.5",
    "fs-extra": "^10.0.0",
    "html-webpack-plugin": "4.5.0",
    "identity-obj-proxy": "3.0.0",
@ -65,6 +68,7 @@
    "react-app-polyfill": "^2.0.0",
    "react-dev-utils": "^11.0.4",
    "react-dom": "^17.0.2",
+    "react-file-download": "^0.3.5",
    "react-refresh": "^0.8.3",
    "react-responsive": "^9.0.0-beta.5",
    "react-router-dom": "^5.2.0",
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@ -17,7 +17,7 @@ import {
  Form,
  DatePicker,
 } from "antd";
-import { UserOutlined, FilterOutlined } from "@ant-design/icons";
+import { UserOutlined, FilterOutlined,ExportOutlined } from "@ant-design/icons";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { LINKS } from "../../routes/app";
 import { useStore } from "../../utils/useStore";
@ -28,12 +28,14 @@ import { useParams } from "react-router-dom";
 import { appConfig } from "../../config/app";
 import { MembershipModal } from "./MembershipModal";
 import moment from "moment";
+import FileSaver from "file-saver";

 const { Title, Text } = Typography;
 const { TabPane } = Tabs;
 export const DetailUser = observer(() => {
  const store = useStore();
  const [form] = Form.useForm();
+  const [formExport] = Form.useForm();
  const modalLoader = useContext(ModalLoaderContext);
  const { id } = useParams();
  const [visibleModal, setVisibleModal] = useState(false);
@ -43,6 +45,7 @@ export const DetailUser = observer(() => {
  const [filterEnd, setFilterEnd] = useState([]);
  const [visibleHis, setVisibleHis] = useState(true);
  const [actionFilter, setAction] = useState(false);
+  const [modalExport, setModalExport] = useState(false);

  useEffect(() => {
    (async () => {
@ -160,6 +163,27 @@ export const DetailUser = observer(() => {
    }
    modalLoader.setLoading(false);
  };
+
+  const handleSubmitExport = async () => {
+    const date = formExport.getFieldsValue();
+    const dataDate ={
+      dateStart: moment(date.tanggal_export).format("YYYY-MM-DD")
+    }
+    modalLoader.setLoading(true);
+    try {
+      await store.transaction.exportTransaction(store.membership.dataDetail, dataDate)
+        // console.log('responseiniyak', response);
+        // message.success("Success export");
+        setModalExport(false);
+        modalLoader.setLoading(false);
+     } catch (e) {
+      setModalExport(false);
+      console.error(e, "apa errornya");
+      message.error(e.response?.body?.message || "Failed to export");
+      modalLoader.setLoading(false);
+    }
+  };
+
  const columns = [
    {
      title: "Pengirim",
@ -536,11 +560,18 @@ export const DetailUser = observer(() => {
                  </Button>
                )}
              {store.authentication.userData.role === "Admin" && (
+                <>
                <Button
                  onClick={() => withdrawProfit(store.membership.dataDetail.id)}
                >
                  Withdraw Profit
                </Button>
+                <Button
+                  onClick={() => setModalExport(true)}
+                >
+                  <ExportOutlined /> Export
+                </Button>
+                </>
              )}
            </Space>
          </Col>
@ -787,9 +818,9 @@ export const DetailUser = observer(() => {
                      dataSource={store.transaction.dataHistoryTopUp}
                      bordered
                      pagination={{
-                        pageSize: store.transaction.pageSizeHistoryTransaction,
-                        total: store.transaction.total_dataHistoryTransaction,
-                        current: store.transaction.pageHistoryTransaction + 1,
+                        pageSize: store.transaction.pageSizeHistoryTopUp,
+                        total: store.transaction.total_dataHistoryTopUp,
+                        current: store.transaction.pageHistoryTopUp + 1,
                        showSizeChanger: true,
                        simple: false,
                      }}
@ -1106,6 +1137,28 @@ export const DetailUser = observer(() => {
          </Col>
        </Row>
      </Modal>
+       <Modal
+        visible={modalExport}
+        title={"Export"}
+				onOk={handleSubmitExport}
+        onCancel={() => {
+          setModalExport(false);
+        }}
+      >
+        <Row>
+          <Col span={24}>
+            <Form layout="vertical" name="filter" form={formExport}>
+              <Form.Item
+                name="tanggal_export"
+                label="Tanggal"
+                rules={[{ required: true, message: "Please input Date!" }]}
+              >
+                <DatePicker style={{ width: "100%" }} />
+              </Form.Item>
+            </Form>
+          </Col>
+        </Row>
+      </Modal>
    </div>
  );
 });
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@ -23,7 +23,7 @@ import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { LINKS } from "../../routes/app";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
-import { FilterOutlined } from "@ant-design/icons";
+import { FilterOutlined, ExportOutlined } from "@ant-design/icons";
 import { format, parseISO } from "date-fns";
 import { appConfig } from "../../config/app";
 import { ModalLoaderContext } from "../../utils/modal";
@ -34,12 +34,14 @@ const { RangePicker } = DatePicker;
 export const Profile = observer(() => {
  const store = useStore();
  const [form] = Form.useForm();
+  const [formExport] = Form.useForm();
  const { id } = useParams();
  const modalLoader = useContext(ModalLoaderContext);
  const [filterStart, setFilterStart] = useState([]);
  const [filterEnd, setFilterEnd] = useState([]);
  const [actionFilter, setAction] = useState(false);
  const [visible, setVisible] = useState(false);
+  const [modalExport, setModalExport] = useState(false);

  const routeData = [
    {
@ -383,6 +385,27 @@ export const Profile = observer(() => {
    setVisible(false);
    form.resetFields();
  };
+
+ const handleSubmitExport = async () => {
+    const date = formExport.getFieldsValue();
+    const dataDate ={
+      dateStart: moment(date.tanggal_export).format("YYYY-MM-DD")
+    }
+    modalLoader.setLoading(true);
+    try {
+      await store.transaction.exportTransaction(store.authentication.profileData, dataDate)
+        // console.log('responseiniyak', response);
+        // message.success("Success export");
+        setModalExport(false);
+        modalLoader.setLoading(false);
+     } catch (e) {
+      setModalExport(false);
+      console.error(e, "apa errornya");
+      message.error(e.response?.body?.message || "Failed to export");
+      modalLoader.setLoading(false);
+    }
+  };
+
  return (
    <div className={["ppob-container"].join(" ")}>
      <BreadcumbComponent
@ -394,8 +417,32 @@ export const Profile = observer(() => {
            : dataRoute
        }
      />
-      <Card>
+      <Card>{console.log(store.authentication.profileData?.userDetail,':)')}
+        
+        {store.authentication.userData.role === "Admin Partner" ? (
+        <Row style={{ marginBottom: 10 }}>
        <Title strong>Profile</Title>
+          <Col
+            lg={17}
+            xs={17}
+            style={{ textAlign: "right" }}
+          >
+            <Space
+              size="small"
+              align={"center"}
+              wrap={true}
+              style={{ textAlign: "center" }}
+            >
+                <Button
+                  onClick={() => setModalExport(true)}
+                >
+                  <ExportOutlined /> Export
+                </Button>
+            </Space>
+          </Col>
+        </Row>
+        ):
+        <Title strong>Profile</Title>}

        <Row style={{ marginBottom: 20 }}>
          <Col lg={12} xs={24}>
@ -982,6 +1029,28 @@ export const Profile = observer(() => {
          </Form.Item>
        </Form>
      </Modal>
+       <Modal
+        visible={modalExport}
+        title={"Export"}
+				onOk={handleSubmitExport}
+        onCancel={() => {
+          setModalExport(false);
+        }}
+      >
+        <Row>
+          <Col span={24}>
+            <Form layout="vertical" name="filter" form={formExport}>
+              <Form.Item
+                name="tanggal_export"
+                label="Tanggal"
+                rules={[{ required: true, message: "Please input Date!" }]}
+              >
+                <DatePicker style={{ width: "100%" }} />
+              </Form.Item>
+            </Form>
+          </Col>
+        </Row>
+      </Modal>
    </div>
  );
 });
--- a/src/store/transaction.js
+++ b/src/store/transaction.js
@ -1,5 +1,11 @@
 import { makeAutoObservable } from "mobx";
 import { http } from "../utils/http";
+import { binaryStringToArrayBuffer, arrayBufferToBlob } from 'blob-util'
+import axios from "axios";
+import {appConfig} from "../config/app";
+import fileDownload from "react-file-download";
+import {TokenUtil} from "../utils/token";
+import {message} from "antd";

 export class Transaction {
  page = 0;
@ -267,4 +273,27 @@ export class Transaction {
      console.error(e);
    }
  }
+
+    exportTransaction(data,date) {
+    try {
+    axios({
+      url: appConfig.apiUrl + `/excel/history-user/export/${data.id}`,
+      headers: {"Authorization" : `Bearer ${TokenUtil.accessToken}`},
+      method: 'POST',
+      data: date,
+      responseType: 'blob'
+    }).then((response) => {
+        var fileDownload = require('react-file-download');
+        message.success("Success export");
+        fileDownload(response.data, `Mutasi Transaki ${data.userDetail.name} ${date.dateStart}.xlsx`);
+        return fileDownload;
+      }).catch(function (error) {
+        message.error("No data to export");
+        return error;
+    });
+
+    } catch (e) {
+      console.error(e,':)')
+    }
+  }
 }
--- a/yarn.lock
+++ b/yarn.lock