Fakultas Ilmu Komputer UI

Skip to content
GitLab
Commit ada8b954 authored by Michael Wiryadinata Halim's avatar Michael Wiryadinata Halim
Browse files

Coldfix sprint 4 Fix UI

parent 991d347f
Hide whitespace changes
Inline Side-by-side
.gitignore
View file @ ada8b954
......@@ -27,3 +27,4 @@ npm-debug.log*
yarn-debug.log*
yarn-error.log*
/.vscode
.parcel-cache
\ No newline at end of file
src/__test__/DetailPengguna.test.js
View file @ ada8b954
......@@ -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,
......
src/component/StatusDonasi.jsx 0 → 100644
View file @ ada8b954
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;
src/component/TableUtils.jsx
View file @ ada8b954
......@@ -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}
/>
......
src/page/donasi/DetailDonasi.jsx
View file @ ada8b954
......@@ -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
......
src/page/pengguna/DetailPengguna.jsx
View file @ ada8b954
......@@ -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>
......
src/page/pengguna/ListPengguna.jsx
View file @ ada8b954
......@@ -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: "",
};
......
src/page/transaksi/DetailTransaksi.jsx
View file @ ada8b954
......@@ -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}>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Excellence In Teamwork