From ada8b954b6a797cad0683bbc79b81bb01e9a8e30 Mon Sep 17 00:00:00 2001
From: Michael Wiryadinata Halim <michael.wiryadinata@ui.ac.id>
Date: Thu, 7 May 2020 23:54:40 +0700
Subject: [PATCH] Coldfix sprint 4 Fix UI
---
.gitignore | 1 +
src/__test__/DetailPengguna.test.js | 19 +++++++++
src/component/StatusDonasi.jsx | 33 +++++++++++++++
src/component/TableUtils.jsx | 3 +-
src/page/donasi/DetailDonasi.jsx | 56 ++++++++++++++-----------
src/page/pengguna/DetailPengguna.jsx | 58 ++++++++++++++++++++++++--
src/page/pengguna/ListPengguna.jsx | 4 +-
src/page/transaksi/DetailTransaksi.jsx | 57 +++++++++++++------------
8 files changed, 174 insertions(+), 57 deletions(-)
create mode 100644 src/component/StatusDonasi.jsx
diff --git a/.gitignore b/.gitignore
index e49541d..bdafb28 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,3 +27,4 @@ npm-debug.log*
yarn-debug.log*
yarn-error.log*
/.vscode
+.parcel-cache
\ No newline at end of file
diff --git a/src/__test__/DetailPengguna.test.js b/src/__test__/DetailPengguna.test.js
index fe6bae9..e2d3ab7 100644
--- a/src/__test__/DetailPengguna.test.js
+++ b/src/__test__/DetailPengguna.test.js
@@ -11,6 +11,25 @@ afterEach(cleanup);
test("Test detail pengguna renders", async () => {
fetch
+ .once({
+ id: "8e9a8f94-cb5c-4b2d-b4f1-81ccfb9f1b0a",
+ donation_number: "7NGVBN",
+ user: "45897cc5-968c-44cf-931d-e646b095fcaf",
+ user_username: "admin-staging",
+ program: "6d7462da-6a85-4e2b-9930-69567090a5d5",
+ program_code: "3MXZ9T",
+ user_full_name: "Hello",
+ user_phone_number: "012345",
+ program_name: "dummy 2",
+ amount: "10000.00",
+ donation_status: "001",
+ readable_donation_status: "Menunggu konfirmasi admin",
+ proof_of_bank_transfer: "a",
+ user_bank_account_name: "Jeffrey",
+ user_bank_account_number: "12345678",
+ created_at: "2020-04-28T21:34:15.565614+07:00",
+ updated_at: "2020-04-28T21:34:15.565651+07:00",
+ })
.once(
JSON.stringify({
count: 17,
diff --git a/src/component/StatusDonasi.jsx b/src/component/StatusDonasi.jsx
new file mode 100644
index 0000000..5cff3fb
--- /dev/null
+++ b/src/component/StatusDonasi.jsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { css } from "@emotion/core";
+const StatusDonasi = ({ status, label }) => {
+ let color;
+ switch (status) {
+ case "001":
+ color = "#EAC435";
+ break;
+ case "002":
+ color = "#27496d";
+ break;
+ case "003":
+ color = "#CA1551";
+ break;
+ case "004":
+ color = "#FC766AFF";
+ break;
+ default:
+ color = "black";
+ break;
+ }
+ return (
+ <div
+ css={css`
+ color: ${color};
+ `}
+ >
+ {label}
+ </div>
+ );
+};
+
+export default StatusDonasi;
diff --git a/src/component/TableUtils.jsx b/src/component/TableUtils.jsx
index b2bc887..a1c25aa 100644
--- a/src/component/TableUtils.jsx
+++ b/src/component/TableUtils.jsx
@@ -3,6 +3,7 @@ import Moment from "react-moment";
import NumberFormat from "react-number-format";
import "moment-timezone";
import Status from "./Status";
+import StatusDonasi from "./StatusDonasi";
export const stringToDate = (date) => {
const dateFormat = new Date(date);
return (
@@ -30,7 +31,7 @@ export const transactionToColoredStatus = (transaction) => (
);
export const donationToColoredStatus = (donation) => (
- <Status
+ <StatusDonasi
status={donation.donation_status}
label={donation.readable_donation_status}
/>
diff --git a/src/page/donasi/DetailDonasi.jsx b/src/page/donasi/DetailDonasi.jsx
index 479127d..db3ed67 100644
--- a/src/page/donasi/DetailDonasi.jsx
+++ b/src/page/donasi/DetailDonasi.jsx
@@ -6,7 +6,6 @@ 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 Status from "../../component/Status";
import { stringToDate } from "../../component/TableUtils";
import { ErrorDiv } from "../../component/html/html";
import Button from "@material-ui/core/Button";
@@ -15,6 +14,7 @@ import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import FormDonasi from "./FormDonasi";
+import StatusDonasi from "../../component/StatusDonasi";
const DetailDonasi = ({ idDonasi }) => {
const url = `${process.env.REACT_APP_BASE_URL}/program-donations/${idDonasi}/`;
const [donation, error] = useFetchSingleData(url);
@@ -51,30 +51,36 @@ const DetailDonasi = ({ idDonasi }) => {
margin: 2rem 3rem 3rem 3rem;
flex-direction: column;
justify-content: space-around;
- height: 125vh;
+ height: 75vh;
`}
>
{error && <ErrorDiv>Something error</ErrorDiv>}
- <button
- css={css`
- align-self: start;
- background-color: Transparent;
- background-repeat: no-repeat;
- border: none;
- cursor: pointer;
- overflow: hidden;
- outline: none;
- `}
- onClick={() => navigate(-1)}
- >
- <ArrowBackIcon fontSize="large" />
- </button>
- <div
- css={css`
- font-size: 1rem;
- `}
- >
- ADMIN - DETAIL DONASI
+ <div>
+ <button
+ css={css`
+ align-self: start;
+ background-color: Transparent;
+ background-repeat: no-repeat;
+ border: none;
+ cursor: pointer;
+ overflow: hidden;
+ outline: none;
+ display: inline-block;
+ vertical-align: middle;
+ `}
+ onClick={() => navigate(-1)}
+ >
+ <ArrowBackIcon fontSize="large" />
+ </button>
+ <div
+ css={css`
+ display: inline-block;
+ font-size: 2rem;
+ vertical-align: middle;
+ `}
+ >
+ DETAIL DONASI
+ </div>
</div>
<div
css={css`
@@ -120,7 +126,7 @@ const DetailDonasi = ({ idDonasi }) => {
>
Status:{" "}
</div>
- <Status
+ <StatusDonasi
label={donation.readable_donation_status}
status={donation.donation_status}
/>
@@ -162,7 +168,7 @@ const DetailDonasi = ({ idDonasi }) => {
align-items: baseline;
`}
>
- <PersonIcon />
+ <PersonIcon style={{ color: "FFC80A" }} />
<Link to={`/pengguna/${donation.user}`}>
{donation.user_full_name} / {donation.user_username}
</Link>
@@ -174,7 +180,7 @@ const DetailDonasi = ({ idDonasi }) => {
align-items: baseline;
`}
>
- <PhoneIcon />
+ <PhoneIcon style={{ color: "FFC80A" }} />
<div>{donation.user_phone_number}</div>
</div>
<div
diff --git a/src/page/pengguna/DetailPengguna.jsx b/src/page/pengguna/DetailPengguna.jsx
index 5b9678b..8c09272 100644
--- a/src/page/pengguna/DetailPengguna.jsx
+++ b/src/page/pengguna/DetailPengguna.jsx
@@ -10,6 +10,7 @@ import useFetchSingleData from "../../utils/useFetchSingleData";
import { ErrorDiv } from "../../component/html/html";
import { stringToCurrency, stringToDate } from "../../component/TableUtils";
import TableComponent from "../../component/TableComponent";
+import { donationToColoredStatus } from "../../component/TableUtils";
const DetailPengguna = ({ userId }) => {
const url = `${process.env.REACT_APP_BASE_URL}/users/${userId}/`;
@@ -18,7 +19,7 @@ const DetailPengguna = ({ userId }) => {
url: `${process.env.REACT_APP_BASE_URL}/transactions/`,
pageDefault: 1,
argument: `user=${userId}`,
- title: "Riwayat Transaksi",
+ title: "",
keyValuePairs: [
["id", "id"],
["transaction_number", "ID Transaksi"],
@@ -46,6 +47,35 @@ const DetailPengguna = ({ userId }) => {
},
],
};
+ const data_donasi = {
+ url: `${process.env.REACT_APP_BASE_URL}/program-donations/`,
+ pageDefault: 1,
+ argument: `user=${userId}`,
+ title: "",
+ keyValuePairs: [
+ ["id", "id"],
+ ["donation_number", "ID Donasi"],
+ ["user_username", "Username"],
+ ["program_name", "Nama Program"],
+ ["", "Status", donationToColoredStatus],
+ ],
+ link: "/donasi/",
+ filter: [
+ ["updated_at_date_range_after", "Updated from"],
+ ["updated_at_date_range_before", "Updated before"],
+ {
+ donation_status: {
+ label: "Status Donasi",
+ choices: [
+ { "001": "Menunggu konfirmasi admin" },
+ { "002": "Selesai" },
+ { "003": "Dibatalkan" },
+ { "004": "Menunggu pengunggahan kembali bukti transfer bank" },
+ ],
+ },
+ },
+ ],
+ };
return (
<div
data-testid="page-profile"
@@ -190,6 +220,20 @@ const DetailPengguna = ({ userId }) => {
margin-top: 1rem;
`}
>
+ <div
+ css={css`
+ display: flex;
+ `}
+ >
+ <ScheduleIcon style={{ fontSize: 25, color: "FFC80A" }} />
+ <div
+ css={css`
+ font-weight: bold;
+ `}
+ >
+ Riwayat Transaksi
+ </div>
+ </div>
<div
css={css`
display: flex;
@@ -204,7 +248,7 @@ const DetailPengguna = ({ userId }) => {
font-style: normal;
font-weight: normal;
font-size: 15px;
- line-height: 15px;
+ line-height: 25px;
margin-top: 1rem;
`}
>
@@ -216,12 +260,20 @@ const DetailPengguna = ({ userId }) => {
<ScheduleIcon style={{ fontSize: 25, color: "FFC80A" }} />
<div
css={css`
- margin-left: 2rem;
+ font-weight: bold;
`}
>
Riwayat Donasi
</div>
</div>
+ <div
+ css={css`
+ display: flex;
+ flex-direction: column;
+ `}
+ >
+ <TableComponent {...data_donasi} />
+ </div>
</div>
</div>
</div>
diff --git a/src/page/pengguna/ListPengguna.jsx b/src/page/pengguna/ListPengguna.jsx
index 3ec3758..3d57edc 100644
--- a/src/page/pengguna/ListPengguna.jsx
+++ b/src/page/pengguna/ListPengguna.jsx
@@ -12,8 +12,8 @@ const ListPengguna = () => {
["id", "id"],
["full_name", "Nama Lengkap"],
["username", "Username"],
- ["dummy", "dummy"],
- ["dummy", "dummy"],
+ ["total_transactions", "Jumlah Transaksi"],
+ ["total_program_donations", "Jumlah Donasi"],
],
link: "",
};
diff --git a/src/page/transaksi/DetailTransaksi.jsx b/src/page/transaksi/DetailTransaksi.jsx
index 6951315..7a7e2be 100644
--- a/src/page/transaksi/DetailTransaksi.jsx
+++ b/src/page/transaksi/DetailTransaksi.jsx
@@ -63,26 +63,32 @@ const DetailTransaksi = ({ idTransaksi }) => {
`}
>
{error && <ErrorDiv>Something error</ErrorDiv>}
- <button
- css={css`
- align-self: start;
- background-color: Transparent;
- background-repeat: no-repeat;
- border: none;
- cursor: pointer;
- overflow: hidden;
- outline: none;
- `}
- onClick={() => navigate(-1)}
- >
- <ArrowBackIcon fontSize="large" />
- </button>
- <div
- css={css`
- font-size: 1rem;
- `}
- >
- ADMIN - KELOLA TRANSAKSI
+ <div>
+ <button
+ css={css`
+ align-self: start;
+ background-color: Transparent;
+ background-repeat: no-repeat;
+ border: none;
+ cursor: pointer;
+ overflow: hidden;
+ outline: none;
+ vertical-align: middle;
+ display: inline-block;
+ `}
+ onClick={() => navigate(-1)}
+ >
+ <ArrowBackIcon fontSize="large" />
+ </button>
+ <div
+ css={css`
+ font-size: 2rem;
+ vertical-align: middle;
+ display: inline-block;
+ `}
+ >
+ KELOLA TRANSAKSI
+ </div>
</div>
<div
css={css`
@@ -172,7 +178,7 @@ const DetailTransaksi = ({ idTransaksi }) => {
align-items: baseline;
`}
>
- <PersonIcon />
+ <PersonIcon style={{ color: "FFC80A" }} />
<Link to={`/pengguna/${transaction.user}`}>
{transaction.user_full_name} / {transaction.user_username}
</Link>
@@ -185,7 +191,7 @@ const DetailTransaksi = ({ idTransaksi }) => {
align-items: baseline;
`}
>
- <PhoneIcon />
+ <PhoneIcon style={{ color: "FFC80A" }} />
<div>{transaction.user_phone_number}</div>
</div>
<div
@@ -199,13 +205,12 @@ const DetailTransaksi = ({ idTransaksi }) => {
font-size: 1.2rem;
`}
>
- <ContactsIcon />
- Alamat Pengiriman
- <div>{`${transaction.shipping_address},
+ <ContactsIcon style={{ color: "FFC80A", marginRight: "4px" }} />
+ {`${transaction.shipping_address},
RT ${transaction.shipping_neighborhood},
RW ${transaction.shipping_hamlet},
Kelurahan ${transaction.shipping_urban_village},
- Kecamatan ${transaction.shipping_sub_district}`}</div>
+ Kecamatan ${transaction.shipping_sub_district}`}
</div>
</div>
<TableContainer component={Paper}>
--
GitLab