From 1cd569d8d7278d8493f914d9013dfca1ff41ac3d Mon Sep 17 00:00:00 2001
From: Michael Wiryadinata Halim <michael.wiryadinata@ui.ac.id>
Date: Fri, 24 Apr 2020 14:30:08 +0700
Subject: [PATCH] Coldfix sprint 3 reviewed
---
src/component/Status.jsx | 42 +++++++++++++++++
src/component/TableComponent.jsx | 4 +-
src/component/TableUtils.jsx | 8 ++++
src/component/status.jsx | 62 --------------------------
src/page/transaksi/DetailTransaksi.jsx | 19 ++++----
src/page/transaksi/ListTransaksi.jsx | 12 +++--
6 files changed, 72 insertions(+), 75 deletions(-)
create mode 100644 src/component/Status.jsx
delete mode 100644 src/component/status.jsx
diff --git a/src/component/Status.jsx b/src/component/Status.jsx
new file mode 100644
index 0000000..09f32d1
--- /dev/null
+++ b/src/component/Status.jsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { css } from "@emotion/core";
+const Status = ({ status, label }) => {
+ let color;
+ switch (status) {
+ case "001":
+ color = "#EAC435";
+ break;
+ case "002":
+ color = "#FB4D3D";
+ break;
+ case "003":
+ color = "#FC766AFF";
+ break;
+ case "004":
+ color = "#03CEA4";
+ break;
+ case "005":
+ color = "#27496d";
+ break;
+ case "006":
+ color = "#CA1551";
+ break;
+ case "007":
+ color = "#CA1551";
+ break;
+ default:
+ color = "black";
+ break;
+ }
+ return (
+ <div
+ css={css`
+ color: ${color};
+ `}
+ >
+ {label}
+ </div>
+ );
+};
+
+export default Status;
diff --git a/src/component/TableComponent.jsx b/src/component/TableComponent.jsx
index d8c1185..86f9746 100644
--- a/src/component/TableComponent.jsx
+++ b/src/component/TableComponent.jsx
@@ -251,7 +251,9 @@ const TableComponent = ({
return (
<TableCell key={`${pairs[0]}r${indexR}c${indexC}`}>
{pairs[2] !== undefined && pairs[2] !== null
- ? pairs[2](u[pairs[0]])
+ ? pairs[0] !== ""
+ ? pairs[2](u[pairs[0]])
+ : pairs[2](u)
: u[pairs[0]]}
</TableCell>
);
diff --git a/src/component/TableUtils.jsx b/src/component/TableUtils.jsx
index 3ed474d..a12dcdb 100644
--- a/src/component/TableUtils.jsx
+++ b/src/component/TableUtils.jsx
@@ -2,6 +2,7 @@ import React from "react";
import Moment from "react-moment";
import NumberFormat from "react-number-format";
import "moment-timezone";
+import Status from "./Status";
export const stringToDate = (date) => {
const dateFormat = new Date(date);
return (
@@ -20,3 +21,10 @@ export const stringToCurrency = (currency) => (
prefix={"Rp"}
/>
);
+
+export const transactionToColoredStatus = (transaction) => (
+ <Status
+ status={transaction.transaction_status}
+ label={transaction.readable_transaction_status}
+ />
+);
diff --git a/src/component/status.jsx b/src/component/status.jsx
deleted file mode 100644
index ef8011f..0000000
--- a/src/component/status.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from "react";
-import { css } from "@emotion/core";
-const Status = ({ status, label }) => {
- switch (status) {
- case "001":
- return (
- <div
- css={css`
- color: darkgoldenrod;
- `}
- >
- {label}
- </div>
- );
- case "002":
- return (
- <div
- css={css`
- color: red;
- `}
- >
- {label}
- </div>
- );
- case "003":
- return (
- <div
- css={css`
- color: #004444;
- `}
- >
- {label}
- </div>
- );
- case "004":
- return (
- <div
- css={css`
- color: #660066;
- `}
- >
- {label}
- </div>
- );
- case "005":
- return <div>{label}</div>;
- case "006":
- return <div>{label}</div>;
- case "007":
- return (
- <div
- css={css`
- color: darkred;
- `}
- >
- {label}
- </div>
- );
- }
-};
-
-export default Status;
diff --git a/src/page/transaksi/DetailTransaksi.jsx b/src/page/transaksi/DetailTransaksi.jsx
index 93df798..e151cba 100644
--- a/src/page/transaksi/DetailTransaksi.jsx
+++ b/src/page/transaksi/DetailTransaksi.jsx
@@ -11,7 +11,7 @@ import TableContainer from "@material-ui/core/TableContainer";
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 Status from "../../component/Status";
import { stringToCurrency, stringToDate } from "../../component/TableUtils";
import { ErrorDiv } from "../../component/html/html";
import Button from "@material-ui/core/Button";
@@ -102,13 +102,16 @@ const DetailTransaksi = ({ idTransaksi }) => {
</div>
<div>{transaction.transaction_number}</div>
</div>
- <FormStatus
- {...{
- idTransaksi,
- defaultStatus: transaction.transaction_status,
- paymentMethod: transaction.payment_method,
- }}
- />
+ {transaction.transaction_status !== "006" &&
+ transaction.transaction_status !== "007" && (
+ <FormStatus
+ {...{
+ idTransaksi,
+ defaultStatus: transaction.transaction_status,
+ paymentMethod: transaction.payment_method,
+ }}
+ />
+ )}
</div>
<div
css={css`
diff --git a/src/page/transaksi/ListTransaksi.jsx b/src/page/transaksi/ListTransaksi.jsx
index 129aa6c..d445963 100644
--- a/src/page/transaksi/ListTransaksi.jsx
+++ b/src/page/transaksi/ListTransaksi.jsx
@@ -2,7 +2,11 @@ import React from "react";
import TableComponent from "../../component/TableComponent";
import { css } from "@emotion/core";
import LinkYellow from "../../component/LinkYellow";
-import { stringToCurrency, stringToDate } from "../../component/TableUtils";
+import {
+ stringToCurrency,
+ stringToDate,
+ transactionToColoredStatus,
+} from "../../component/TableUtils";
const ListTransaksi = () => {
const data = {
@@ -15,13 +19,13 @@ const ListTransaksi = () => {
["user_username", "Username"],
["created_at", "Tanggal Pembuatan", stringToDate],
["updated_at", "Tanggal Update", stringToDate],
- ["readable_transaction_status", "Status"],
+ ["", "Status", transactionToColoredStatus],
["subtotal", "Total", stringToCurrency],
],
link: "/transaksi/",
filter: [
- ["updated_at_date_range_before", "Updated At Before"],
- ["updated_at_date_range_after", "Updated At After"],
+ ["updated_at_date_range_after", "Updated from"],
+ ["updated_at_date_range_before", "Updated before"],
{
transaction_status: {
label: "Status transaksi",
--
GitLab