From 8c9606d68332c15cbe939d9ddc44f7f1220a398f Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Sun, 16 May 2021 04:17:04 +0300
Subject: [PATCH] Forward card

---
 public/locales/en/translations.json           | 10 +++---
 public/locales/ro/translations.json           | 10 +++---
 .../core/components/ForwardComponent.js       | 20 ++++++++++-
 .../core/components/ForwardSummary.js         | 33 +++++++++++++++++++
 .../components/SessionForwardsComponent.js    |  8 ++---
 5 files changed, 66 insertions(+), 15 deletions(-)
 create mode 100644 src/features/forwards/core/components/ForwardSummary.js

diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
index 1ac95e2..515851d 100644
--- a/public/locales/en/translations.json
+++ b/public/locales/en/translations.json
@@ -36,13 +36,15 @@
     "LogRows": "Log rows",
     "LogSize": "Log size",
     "Forwards": {
-      "Title": "Forwards",
-      "From": "From",
-      "To": "To"
+      "Title": "Forwards"
     }
   },
   "Forward": {
-    "Title": "Forward from {{from}} to {{to}}",
+    "Title": "Forward {{forwardId}}",
+    "Label": "Forward",
+    "Subtitle": "from {{from}} to {{to}}",
+    "From": "From",
+    "To": "To",
     "Options": {
       "Title": "Options",
       "Name": "Name",
diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json
index a4782f7..463ee86 100644
--- a/public/locales/ro/translations.json
+++ b/public/locales/ro/translations.json
@@ -27,13 +27,15 @@
     "LogRows": "Linii log",
     "LogSize": "Dimensiune log",
     "Forwards": {
-      "Title": "Redirectări",
-      "From": "De la",
-      "To": "Către"
+      "Title": "Redirectări"
     }
   },
   "Forward": {
-    "Title": "Redirecționare de la {{from}} către {{to}}",
+    "Title": "Redirecționare {{forwardId}}",
+    "Label": "Redirecționare",
+    "Subtitle": "de la {{from}} către {{to}}",
+    "From": "De la",
+    "To": "Către",
     "Options": {
       "Title": "Opțiuni",
       "Name": "Denumire",
diff --git a/src/features/forwards/core/components/ForwardComponent.js b/src/features/forwards/core/components/ForwardComponent.js
index 4d2f382..4cd2c11 100644
--- a/src/features/forwards/core/components/ForwardComponent.js
+++ b/src/features/forwards/core/components/ForwardComponent.js
@@ -1,9 +1,27 @@
 import React from "react";
 import PropTypes from "prop-types";
+import ExpandableCard from "../../../../components/common/ExpandableCard";
 import ForwardOptionsAdvancedContainer from "../../options/components/advanced/ForwardOptionsAdvancedContainer";
+import { useTranslation } from "react-i18next";
+import ForwardIcon from "@material-ui/icons/Forward";
+import ForwardSummary from "./ForwardSummary";
 
 const ForwardComponent = ({ forward }) => {
-  return <ForwardOptionsAdvancedContainer optionsId={forward.optionId} />;
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <ExpandableCard
+        Icon={<ForwardIcon />}
+        title={t("Forward.Label", forward)}
+        subtitle={t("Forward.Subtitle", forward)}
+        Summary={<ForwardSummary forward={forward} />}
+        Content={<div>...</div>}
+      />
+      <br />
+      <ForwardOptionsAdvancedContainer optionsId={forward.optionId} />
+    </>
+  );
 };
 
 ForwardComponent.propTypes = {
diff --git a/src/features/forwards/core/components/ForwardSummary.js b/src/features/forwards/core/components/ForwardSummary.js
new file mode 100644
index 0000000..a8d0904
--- /dev/null
+++ b/src/features/forwards/core/components/ForwardSummary.js
@@ -0,0 +1,33 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Grid } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import { useTranslation } from "react-i18next";
+import styles from "../../../../components/common/styles/gridStyles";
+
+const useStyles = makeStyles(styles);
+
+const ForwardSummary = ({ forward }) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+
+  return (
+    <Grid container>
+      <Grid item xs={6} sm={3} md={3}>
+        {`${t("Forward.From")}: `}
+        <span className={classes.value}>{forward.from}</span>
+      </Grid>
+
+      <Grid item xs={6} sm={3} md={3}>
+        {`${t("Forward.To")}: `}
+        <span className={classes.value}>{forward.to}</span>
+      </Grid>
+    </Grid>
+  );
+};
+
+ForwardSummary.propTypes = {
+  forward: PropTypes.object.isRequired
+};
+
+export default ForwardSummary;
diff --git a/src/features/session/components/SessionForwardsComponent.js b/src/features/session/components/SessionForwardsComponent.js
index cdae7c1..8e66c8f 100644
--- a/src/features/session/components/SessionForwardsComponent.js
+++ b/src/features/session/components/SessionForwardsComponent.js
@@ -55,12 +55,8 @@ const SessionForwardsComponent = ({
                 <TableHead>
                   <TableRow>
                     <StyledTableCell />
-                    <StyledTableCell>
-                      {t("Session.Forwards.From")}
-                    </StyledTableCell>
-                    <StyledTableCell>
-                      {t("Session.Forwards.To")}
-                    </StyledTableCell>
+                    <StyledTableCell>{t("Forward.From")}</StyledTableCell>
+                    <StyledTableCell>{t("Forward.To")}</StyledTableCell>
                     <StyledTableCell align="right">
                       {t("Forward.Options.Title")}
                     </StyledTableCell>