From 4dd5ccc0fe42e533d74ccf654efbeeaf912e57a8 Mon Sep 17 00:00:00 2001 From: Muhammad Dzikra Muzaki Date: Thu, 18 Mar 2021 19:42:47 +0700 Subject: [PATCH 01/11] [CHORES] Add Dockerfile and docker-compose --- Dockerfile | 5 +++++ docker-compose.yml | 13 +++++++++++++ 2 files changed, 18 insertions(+) create mode 100644 Dockerfile create mode 100644 docker-compose.yml diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..690d48a --- /dev/null +++ b/Dockerfile @@ -0,0 +1,5 @@ +FROM node:15.11.0 +WORKDIR /app +COPY . . +RUN npm install -g npm@7.6.3 && npm install && npm install -g serve && npm run build +CMD ["serve", "-s", "dist"] \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..bee77fe --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,13 @@ +version: '3.9' + +services: + web: + container_name: pilar-web + build: + context: . + dockerfile: Dockerfile + volumes: + - '.:/app' + - '/app/node_modules' + ports: + - 9000:5000 \ No newline at end of file -- GitLab From d99dbef60297c88e7f21087c0e1258a4ade55853 Mon Sep 17 00:00:00 2001 From: Muhammad Dzikra Muzaki Date: Mon, 29 Mar 2021 15:43:07 +0700 Subject: [PATCH 02/11] [CHORES] Add docker instructions --- README.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/README.md b/README.md index 6508492..612a838 100644 --- a/README.md +++ b/README.md @@ -53,6 +53,26 @@ npm run start You can see the app running by going to localhost:1234 via your favourite web browser. +## Running Development Mode in Docker + +To build and run the container image in Docker: + +``` +docker-compose up -d --build +``` + +If you have an existing image from a previous build you can instead run: + +``` +docker start pilar-web +``` + +To stop the running container: + +``` +docker stop pilar-web +``` + ## References - https://docs.gitlab.com/ee/user/markdown.html#wiki---direct-page-link -- GitLab From 37e9ce985231429cec796ab7096cdb8c3d2ed441 Mon Sep 17 00:00:00 2001 From: Muhammad Dzikra Muzaki Date: Mon, 29 Mar 2021 15:43:32 +0700 Subject: [PATCH 03/11] [CHORES] Fix env prep instructions --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 612a838..518545a 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,7 @@ npm build ## Prepare environment -Create a .env file in the root folder. Inside the .env file, put +Create a .env file in the root folder. Inside the .env_var file, put ``` REACT_APP_BASE_URL= https://industripilar-staging.herokuapp.com -- GitLab From 45082d24639a248c57deafb1dff001cf669a2c28 Mon Sep 17 00:00:00 2001 From: Muhammad Dzikra Muzaki Date: Mon, 29 Mar 2021 16:06:57 +0700 Subject: [PATCH 04/11] [CHORES] Update readme with docker as recommended --- README.md | 61 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 31 insertions(+), 30 deletions(-) diff --git a/README.md b/README.md index 518545a..e8cb28d 100644 --- a/README.md +++ b/README.md @@ -7,72 +7,73 @@ A local e-commerce application created for ease of buying and selling transactio ## Table of Contents -- [Install](#install) -- [Running Development Mode](#running-development-mode) +- [Prepare Environment](#prepare-environment) +- [Running Development Mode With Docker (Recommended)](#running-development-mode-with-docker-recommended) +- [Running Development Mode Without Docker (Optional)](#running-development-mode-without-docker-optional) - [References](#references) -## Install - -The Admin Website's frontend uses Node.js and is developed using React. You need to install the required dependencies prior to building and contributing to the project. - -- [Node.js](https://nodejs.org/en/download/releases/) and npm package manager +## Prepare environment -Verify that Node.js has been successfully installed. Make sure the interpreter can be invoked from the shell. For example: +Before starting development, you need to create a `.env_var` file in the root folder. Inside the `.env_var` file, put ``` -npm --version +REACT_APP_BASE_URL=https://industripilar-staging.herokuapp.com ``` -Now install the packages required for Node.js: +## Running Development Mode with Docker (Recommended) + +The recommended way of serving the frontend is to utilize Docker. To build and run the container image in Docker: ``` -npm install +docker-compose up -d --build ``` -## Build +If you have an existing image from a previous build you can instead run: ``` -npm build +docker start pilar-web ``` -## Prepare environment - -Create a .env file in the root folder. Inside the .env_var file, put +To stop the running container: ``` -REACT_APP_BASE_URL= https://industripilar-staging.herokuapp.com +docker stop pilar-web ``` -## Running Development Mode +## Running Development Mode without Docker (Optional) -To serve the frontend: +If your system doesn't support Docker, you can install the required packages and serve the frontend directly without a container. The Admin Website's frontend uses Node.js and is developed using React. You need to install the required dependencies prior to building and contributing to the project. -``` -npm run start -``` +- [Node.js](https://nodejs.org/en/download/releases/) and npm package manager -You can see the app running by going to localhost:1234 via your favourite web browser. +Verify that Node.js has been successfully installed. Make sure the interpreter can be invoked from the shell. For example: -## Running Development Mode in Docker +``` +npm --version +``` -To build and run the container image in Docker: +Now install the packages required for Node.js: ``` -docker-compose up -d --build +npm install ``` -If you have an existing image from a previous build you can instead run: +After the required dependencies are installed you can start the development server with: ``` -docker start pilar-web +npm start ``` -To stop the running container: +You can see the app running by going to localhost:1234 via your favourite web browser. + +If you want to see the production version of the server you can instead run: ``` -docker stop pilar-web +npm run build ``` +When using `start` the server will have hot-reload, this is recommended for development. However, to see the end product the `build` version will have bundled code and will detect any production-breaking code. + ## References - https://docs.gitlab.com/ee/user/markdown.html#wiki---direct-page-link -- GitLab From f5561c6c9a64c700ef7806ce9118e24df96aa389 Mon Sep 17 00:00:00 2001 From: Muhammad Dzikra Muzaki Date: Mon, 29 Mar 2021 16:29:51 +0700 Subject: [PATCH 05/11] [CHORES] Fix obsolete base url --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e8cb28d..03c28ea 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ A local e-commerce application created for ease of buying and selling transactio Before starting development, you need to create a `.env_var` file in the root folder. Inside the `.env_var` file, put ``` -REACT_APP_BASE_URL=https://industripilar-staging.herokuapp.com +REACT_APP_BASE_URL=https://pilar-be-staging.cs.ui.ac.id ``` ## Running Development Mode with Docker (Recommended) -- GitLab From a803ae9345106202d8db04a165311ca96bfa8a9b Mon Sep 17 00:00:00 2001 From: Muhammad Dzikra Muzaki Date: Mon, 29 Mar 2021 18:45:39 +0700 Subject: [PATCH 06/11] [CHORES] Change docker to use development server --- Dockerfile | 4 ++-- docker-compose.yml | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Dockerfile b/Dockerfile index 690d48a..4ac340c 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,5 +1,5 @@ FROM node:15.11.0 WORKDIR /app COPY . . -RUN npm install -g npm@7.6.3 && npm install && npm install -g serve && npm run build -CMD ["serve", "-s", "dist"] \ No newline at end of file +RUN npm install +CMD ["npm", "start"] \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml index bee77fe..c9e5742 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -10,4 +10,4 @@ services: - '.:/app' - '/app/node_modules' ports: - - 9000:5000 \ No newline at end of file + - 9000:1234 \ No newline at end of file -- GitLab From b8f865400ad41b97fd89f3fa6ceff6ec9b2d6080 Mon Sep 17 00:00:00 2001 From: Muhammad Dzikra Muzaki Date: Mon, 29 Mar 2021 19:29:09 +0700 Subject: [PATCH 07/11] [CHORES] Update badges --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 03c28ea..5d37b4c 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,8 @@ # Home Industry Admin -[![pipeline status](https://gitlab.cs.ui.ac.id/ppl-fasilkom-ui/2020/ppl-c/diskominfo-depok-tpu-online/post-rpl-web/badges/master/pipeline.svg)](https://gitlab.cs.ui.ac.id/ppl-fasilkom-ui/2020/ppl-c/diskominfo-depok-tpu-online/post-rpl-web/commits/master) -[![coverage report](https://gitlab.cs.ui.ac.id/ppl-fasilkom-ui/2020/ppl-c/diskominfo-depok-tpu-online/post-rpl-web/badges/master/coverage.svg)](https://gitlab.cs.ui.ac.id/ppl-fasilkom-ui/2020/ppl-c/diskominfo-depok-tpu-online/post-rpl-web/commits/master) +[![pipeline status](https://gitlab.cs.ui.ac.id/ppl-fasilkom-ui/sosial/pilar/pilar-web/badges/dev/pipeline.svg)](https://gitlab.cs.ui.ac.id/ppl-fasilkom-ui/sosial/pilar/pilar-web/-/commits/dev) +[![coverage report](https://gitlab.cs.ui.ac.id/ppl-fasilkom-ui/sosial/pilar/pilar-web/badges/dev/coverage.svg)](https://gitlab.cs.ui.ac.id/ppl-fasilkom-ui/sosial/pilar/pilar-web/-/commits/dev) + A local e-commerce application created for ease of buying and selling transactions. -- GitLab From 004b0fab98f30a5b86bc90f238d8665cc4b7efdd Mon Sep 17 00:00:00 2001 From: "shella.gabriella" Date: Tue, 30 Mar 2021 01:50:54 +0700 Subject: [PATCH 08/11] [REFRACTOR] merubah date time formatting --- src/page/batch/DetailBatch.jsx | 6 ++++-- src/page/batch/FormBatch.jsx | 3 ++- src/page/donasi/DetailDonasiUang.jsx | 6 ++++-- src/page/transaksi/DetailTransaksi.jsx | 7 +++++-- 4 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/page/batch/DetailBatch.jsx b/src/page/batch/DetailBatch.jsx index 8a5cb5e..729202f 100644 --- a/src/page/batch/DetailBatch.jsx +++ b/src/page/batch/DetailBatch.jsx @@ -1,4 +1,6 @@ import React from "react"; +import "moment-timezone"; +import Moment from "react-moment"; import useFetchSingleData from "../../utils/useFetchSingleData"; import { css } from "@emotion/core"; import ArrowBackIcon from "@material-ui/icons/ArrowBack"; @@ -91,13 +93,13 @@ const DetailBatch = ({ batchId }) => {
Tanggal Mulai:{" "}
-
{stringToDateNoTime(batch.start_date)}
+
{}
Tanggal Berakhir:{" "}
-
{stringToDateNoTime(batch.end_date)}
+
{}
diff --git a/src/page/batch/FormBatch.jsx b/src/page/batch/FormBatch.jsx index 01e2c08..eadd623 100644 --- a/src/page/batch/FormBatch.jsx +++ b/src/page/batch/FormBatch.jsx @@ -8,6 +8,7 @@ import { InputSubmitForm, } from "../../component/html/html"; import { css } from "@emotion/core"; +import DatePicker from "react-datepicker"; const FormBatch = ({ onSubmit, initialData = null }) => { const { register, handleSubmit, errors } = useForm({ @@ -48,7 +49,7 @@ const FormBatch = ({ onSubmit, initialData = null }) => { { const url = `${process.env.REACT_APP_BASE_URL}/program-donations/${idDonasi}/`; @@ -145,7 +147,7 @@ const DetailDonasiUang = ({ idDonasi }) => { > Tanggal dibuat:{" "}
-
{stringToDate(donation.created_at)}
+
{}
{ > Tanggal Update:{" "}
-
{stringToDate(donation.updated_at)}
+
{}
{ const url = `${process.env.REACT_APP_BASE_URL}/transactions/${idTransaksi}/`; const [transaction, error] = useFetchSingleData(url); @@ -154,7 +157,7 @@ const DetailTransaksi = ({ idTransaksi }) => { > Tanggal Pembuatan:{" "}
-
{stringToDate(transaction.created_at)}
+
{}
{ > Tanggal Update:{" "}
-
{stringToDate(transaction.updated_at)}
+
{}
Date: Tue, 30 Mar 2021 10:02:35 +0700 Subject: [PATCH 09/11] [REFRACTOR] menghapus import yang tidak dipakai --- src/page/batch/DetailBatch.jsx | 2 +- src/page/batch/FormBatch.jsx | 1 - src/page/donasi/DetailDonasiUang.jsx | 2 +- src/page/transaksi/DetailTransaksi.jsx | 2 +- 4 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/page/batch/DetailBatch.jsx b/src/page/batch/DetailBatch.jsx index 729202f..e8613f6 100644 --- a/src/page/batch/DetailBatch.jsx +++ b/src/page/batch/DetailBatch.jsx @@ -5,7 +5,7 @@ import useFetchSingleData from "../../utils/useFetchSingleData"; import { css } from "@emotion/core"; import ArrowBackIcon from "@material-ui/icons/ArrowBack"; import { navigate } from "@reach/router"; -import { stringToCurrency, stringToDateNoTime } from "../../component/TableUtils"; +import { stringToCurrency } from "../../component/TableUtils"; import { ErrorDiv, ButtonDeleteStyled } from "../../component/html/html"; import LinkYellow from "../../component/LinkYellow"; import useDelete from "../../utils/useDelete"; diff --git a/src/page/batch/FormBatch.jsx b/src/page/batch/FormBatch.jsx index eadd623..3ac728a 100644 --- a/src/page/batch/FormBatch.jsx +++ b/src/page/batch/FormBatch.jsx @@ -8,7 +8,6 @@ import { InputSubmitForm, } from "../../component/html/html"; import { css } from "@emotion/core"; -import DatePicker from "react-datepicker"; const FormBatch = ({ onSubmit, initialData = null }) => { const { register, handleSubmit, errors } = useForm({ diff --git a/src/page/donasi/DetailDonasiUang.jsx b/src/page/donasi/DetailDonasiUang.jsx index 3a12dfc..d30267c 100644 --- a/src/page/donasi/DetailDonasiUang.jsx +++ b/src/page/donasi/DetailDonasiUang.jsx @@ -6,7 +6,7 @@ import PhoneIcon from "@material-ui/icons/Phone"; import PhotoIcon from "@material-ui/icons/Photo"; import { Link, navigate } from "@reach/router"; import PersonIcon from "@material-ui/icons/Person"; -import { stringToCurrency, stringToDate } from "../../component/TableUtils"; +import { stringToCurrency } from "../../component/TableUtils"; import { ErrorDiv } from "../../component/html/html"; import Button from "@material-ui/core/Button"; import Dialog from "@material-ui/core/Dialog"; diff --git a/src/page/transaksi/DetailTransaksi.jsx b/src/page/transaksi/DetailTransaksi.jsx index 09233b5..6819694 100644 --- a/src/page/transaksi/DetailTransaksi.jsx +++ b/src/page/transaksi/DetailTransaksi.jsx @@ -15,7 +15,7 @@ import TableHead from "@material-ui/core/TableHead"; import TableRow from "@material-ui/core/TableRow"; import Paper from "@material-ui/core/Paper"; import Status from "../../component/Status"; -import { stringToCurrency, stringToDate } from "../../component/TableUtils"; +import { stringToCurrency } from "../../component/TableUtils"; import { ErrorDiv } from "../../component/html/html"; import Button from "@material-ui/core/Button"; import Dialog from "@material-ui/core/Dialog"; -- GitLab From 201600cc56bd67b0b8fcab4479e688981aa20d2d Mon Sep 17 00:00:00 2001 From: shella_20 Date: Mon, 5 Apr 2021 19:57:38 +0700 Subject: [PATCH 10/11] [RED] refractor test pada date formatting --- src/__test__/batch/TambahBatch.test.js | 53 ++++++++++++++++------ src/__test__/program/TambahProgram.test.js | 39 ++++++++++++---- 2 files changed, 68 insertions(+), 24 deletions(-) diff --git a/src/__test__/batch/TambahBatch.test.js b/src/__test__/batch/TambahBatch.test.js index 6539b1b..e7fdb76 100644 --- a/src/__test__/batch/TambahBatch.test.js +++ b/src/__test__/batch/TambahBatch.test.js @@ -2,6 +2,7 @@ import { act, cleanup, fireEvent, render } from "@testing-library/react"; import AuthContext from "../../utils/contex"; import React from "react"; import TambahBatch from "../../page/batch/TambahBatch"; +import moment from "moment"; beforeEach(() => { fetch.resetMocks(); @@ -10,25 +11,27 @@ afterEach(cleanup); test("Test tambah batch renders", async () => { fetch.once(JSON.stringify({})); - const { getByTestId } = render( + const wrapper = render( ); - const name_batch = getByTestId("name-batch-input"); - const start_date = getByTestId("start-date-input"); - const end_date = getByTestId("end-date-input"); + const startDateMoment = moment("Fri Apr 16 2021 00:00:00 GMT+0700") + const endDateMoment = moment("Sat Apr 17 2021 00:00:00 GMT+0700") + const name_batch = wrapper.getByTestId("name-batch-input"); + const start_date = wrapper.getByTitle("start-date-title"); + const end_date = wrapper.getByTitle("end-date-title"); await act(async () => { await fireEvent.input(name_batch, { target: { value: "test" } }); }); await act(async () => { - await fireEvent.input(start_date, { target: { value: "2020-10-08" } }); + await fireEvent.input(start_date, { target: { value: startDateMoment } }); }); await act(async () => { - await fireEvent.input(end_date, { target: { value: "2020-10-15" } }); + await fireEvent.input(end_date, { target: { value: endDateMoment } }); }); await act(async () => { - await fireEvent.submit(getByTestId("submit-batch")); + await fireEvent.submit(wrapper.getByTestId("submit-batch")); }); expect(fetch.mock.calls.length).toEqual(1); }); @@ -50,27 +53,47 @@ test("Test tambah batch form required", async () => { test("Test tambah batch error", async () => { fetch.once(JSON.stringify({}), { status: 400 }); - const { getByTestId } = render( + const wrapper = render( ); - const name_batch = getByTestId("name-batch-input"); - const start_date = getByTestId("start-date-input"); - const end_date = getByTestId("end-date-input"); + const startDateMoment = moment("Fri Apr 16 2021 00:00:00 GMT+0700") + const endDateMoment = moment("Sat Apr 17 2021 00:00:00 GMT+0700") + const name_batch = wrapper.getByTestId("name-batch-input"); + const start_date = wrapper.getByTitle("start-date-title"); + const end_date = wrapper.getByTitle("end-date-title"); await act(async () => { await fireEvent.input(name_batch, { target: { value: "test" } }); }); await act(async () => { - await fireEvent.input(start_date, { target: { value: "2020-10-08" } }); + await fireEvent.input(start_date, { target: { value: startDateMoment } }); }); await act(async () => { - await fireEvent.input(end_date, { target: { value: "2020-10-15" } }); + await fireEvent.input(end_date, { target: { value: endDateMoment } }); }); await act(async () => { - await fireEvent.submit(getByTestId("submit-batch")); + await fireEvent.submit(wrapper.getByTestId("submit-batch")); }); - const batch = getByTestId("tambah-batch"); + const batch = wrapper.getByTestId("tambah-batch"); expect(batch.textContent).toContain("Error !, Data tidak dapat disimpan"); expect(fetch.mock.calls.length).toEqual(1); }); + +test("Test tanggal form required", async () => { + const { getByTestId } = render( + + + + ); + await act(async () => { + await fireEvent.submit(getByTestId("submit-batch")); + }); + const formBatch = getByTestId("form-batch"); + expect(formBatch.textContent).toContain( + "Tanggal mulai tidak boleh kosong" + ); + expect(formBatch.textContent).toContain( + "Tanggal berakhir tidak boleh kosong" + ); +}); \ No newline at end of file diff --git a/src/__test__/program/TambahProgram.test.js b/src/__test__/program/TambahProgram.test.js index db22db1..2bd4ea1 100644 --- a/src/__test__/program/TambahProgram.test.js +++ b/src/__test__/program/TambahProgram.test.js @@ -2,6 +2,7 @@ import { act, cleanup, fireEvent, render } from "@testing-library/react"; import AuthContext from "../../utils/contex"; import React from "react"; import TambahProgram from "../../page/program/TambahProgram"; +import moment from "moment"; beforeEach(() => { fetch.resetMocks(); @@ -36,38 +37,58 @@ test("Test tambah program renders", async () => { }) ); - const { getByTestId } = render( + const startDateMoment = moment("Fri Apr 16 2021 00:00:00 GMT+0700") + const endDateMoment = moment("Sat Apr 17 2021 00:00:00 GMT+0700") + const wrapper = render( ); - const name_program = getByTestId("name-program-input"); + const name_program = wrapper.getByTestId("name-program-input"); await act(async () => { await fireEvent.input(name_program, { target: { value: "test" } }); }); - const desc_program = getByTestId("description-program-input"); + const desc_program = wrapper.getByTestId("description-program-input"); await act(async () => { await fireEvent.input(desc_program, { target: { value: "test" } }); }); - const start_date_time = getByTestId("start-date-time-program-input"); + const start_date_time = wrapper.getByTitle("start-date-time-title"); await act(async () => { await fireEvent.input(start_date_time, { - target: { value: "2020-05-12T19:30" }, + target: { value: startDateMoment }, }); }); - const end_date_time = getByTestId("end-date-time-program-input"); + const end_date_time = wrapper.getByTitle("end-date-time-title"); await act(async () => { await fireEvent.input(end_date_time, { - target: { value: "2020-05-15T19:30" }, + target: { value: endDateMoment }, }); }); await act(async () => { - await fireEvent.click(getByTestId("is-open-program-input"), { + await fireEvent.click(wrapper.getByTestId("is-open-program-input"), { target: { value: "true" }, }); }); await act(async () => { - await fireEvent.submit(getByTestId("submit-program")); + await fireEvent.submit(wrapper.getByTestId("submit-program")); }); expect(fetch.mock.calls.length).toEqual(1); }); + +test("Test tanggal form required", async () => { + const { getByTestId } = render( + + + + ); + await act(async () => { + await fireEvent.submit(getByTestId("submit-program")); + }); + const formBatch = getByTestId("form-program"); + expect(formBatch.textContent).toContain( + "Tanggal dan waktu mulai tidak boleh kosong" + ); + expect(formBatch.textContent).toContain( + "Tanggal dan waktu akhir tidak boleh kosong" + ); +}); \ No newline at end of file -- GitLab From 4f06215bdf0d8b2e39d45f041c12f8e020968761 Mon Sep 17 00:00:00 2001 From: shella_20 Date: Mon, 5 Apr 2021 22:50:19 +0700 Subject: [PATCH 11/11] [GREEN] mengubah seluruh format tanggal menjadi dd/mm/yyyy --- package-lock.json | 31 ++++++++++++----- package.json | 1 + src/component/FormDownload.jsx | 56 +++++++++++++++++++++++++++-- src/component/html/html.js | 10 ++++++ src/page/batch/FormBatch.jsx | 59 +++++++++++++++++++++++++------ src/page/batch/ListBatch.jsx | 6 ++-- src/page/program/FormProgram.jsx | 60 ++++++++++++++++++++++++++------ 7 files changed, 188 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index 87040db..624564d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "popper.js": "^1.16.1", "react": "^16.14.0", "react-datepicker": "^3.2.2", + "react-datetime": "^3.0.4", "react-dom": "^16.14.0", "react-hook-form": "^5.7.2", "react-moment": "^0.9.7", @@ -1899,7 +1900,6 @@ "jest-resolve": "^25.5.1", "jest-util": "^25.5.0", "jest-worker": "^25.5.0", - "node-notifier": "^6.0.0", "slash": "^3.0.0", "source-map": "^0.6.0", "string-length": "^3.1.0", @@ -4143,7 +4143,6 @@ "anymatch": "^2.0.0", "async-each": "^1.0.1", "braces": "^2.3.2", - "fsevents": "^1.2.7", "glob-parent": "^3.1.0", "inherits": "^2.0.3", "is-binary-path": "^1.0.0", @@ -6071,8 +6070,7 @@ "esprima": "^4.0.1", "estraverse": "^4.2.0", "esutils": "^2.0.2", - "optionator": "^0.8.1", - "source-map": "~0.6.1" + "optionator": "^0.8.1" }, "bin": { "escodegen": "bin/escodegen.js", @@ -9655,7 +9653,6 @@ "@jest/types": "^24.9.0", "anymatch": "^2.0.0", "fb-watchman": "^2.0.0", - "fsevents": "^1.2.7", "graceful-fs": "^4.1.15", "invariant": "^2.2.4", "jest-serializer": "^24.9.0", @@ -10153,7 +10150,6 @@ "@types/graceful-fs": "^4.1.2", "anymatch": "^3.0.3", "fb-watchman": "^2.0.0", - "fsevents": "^2.1.2", "graceful-fs": "^4.2.4", "jest-serializer": "^25.5.0", "jest-util": "^25.5.0", @@ -15560,6 +15556,18 @@ "react-dom": "^16.9.0 || ^17" } }, + "node_modules/react-datetime": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-datetime/-/react-datetime-3.0.4.tgz", + "integrity": "sha512-v6MVwCve+DRaLN2f22LTO5TlrPpkUXumPkp1zfrbhaFtSYGl2grZ2JtwJfLxRj/T4ACyePAV4srCR6cMSiQ/Iw==", + "dependencies": { + "prop-types": "^15.5.7" + }, + "peerDependencies": { + "moment": "^2.16.0", + "react": "^16.5.0" + } + }, "node_modules/react-dom": { "version": "16.14.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", @@ -17486,8 +17494,7 @@ "esprima": "^3.1.3", "estraverse": "^4.2.0", "esutils": "^2.0.2", - "optionator": "^0.8.1", - "source-map": "~0.6.1" + "optionator": "^0.8.1" }, "bin": { "escodegen": "bin/escodegen.js", @@ -31673,6 +31680,14 @@ "react-popper": "^1.3.8" } }, + "react-datetime": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-datetime/-/react-datetime-3.0.4.tgz", + "integrity": "sha512-v6MVwCve+DRaLN2f22LTO5TlrPpkUXumPkp1zfrbhaFtSYGl2grZ2JtwJfLxRj/T4ACyePAV4srCR6cMSiQ/Iw==", + "requires": { + "prop-types": "^15.5.7" + } + }, "react-dom": { "version": "16.14.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", diff --git a/package.json b/package.json index 7f58684..daa5bee 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "popper.js": "^1.16.1", "react": "^16.14.0", "react-datepicker": "^3.2.2", + "react-datetime": "^3.0.4", "react-dom": "^16.14.0", "react-hook-form": "^5.7.2", "react-moment": "^0.9.7", diff --git a/src/component/FormDownload.jsx b/src/component/FormDownload.jsx index f4901c7..551db8e 100644 --- a/src/component/FormDownload.jsx +++ b/src/component/FormDownload.jsx @@ -1,10 +1,14 @@ import React from "react"; import { useForm } from "react-hook-form"; import useDownloadFile from "../utils/useDownloadFile"; -import { ErrorDiv } from "./html/html"; +import { ErrorDiv, HiddenInputForm} from "./html/html"; import Button from "@material-ui/core/Button"; import { css } from "@emotion/core"; import GetAppIcon from "@material-ui/icons/GetApp"; +import { useState } from "react"; +import moment from "moment"; +import DateTime from 'react-datetime'; +import "react-datetime/css/react-datetime.css"; const FormDownload = ({ url }) => { const [download, error] = useDownloadFile( @@ -14,6 +18,10 @@ const FormDownload = ({ url }) => { const onSubmit = (data) => { download({ ...data }); }; + + const [after, setAfter] = useState(''); + const [before, setBefore] = useState(''); + return (
{ > Tanggal Mulai{" "} - + + setAfter(moment(e).toDate())} + />
- + + setBefore(moment(e).toDate())} + />