Skip to content
Snippets Groups Projects
Commit 1f17671c authored by Léo Banno-Cloutier's avatar Léo Banno-Cloutier
Browse files

jams-react-client: show CustomUiPreview in Customization tab

Change-Id: I537f76a77cbe6ef49da26c5d70bf3abc808dd1f8
parent 70ccecd1
No related branches found
No related tags found
No related merge requests found
...@@ -29,6 +29,8 @@ import Snackbar from "@material-ui/core/Snackbar"; ...@@ -29,6 +29,8 @@ import Snackbar from "@material-ui/core/Snackbar";
import MuiAlert from "@material-ui/lab/Alert"; import MuiAlert from "@material-ui/lab/Alert";
import i18next from "i18next"; import i18next from "i18next";
import CustomUiPreview from "components/CustomUiPreview/CustomUiPreview";
import EditBlueprintUiForm from "./EditBlueprintUiForm";
const DEFAULT_UI_CUSTOMIZATION = { const DEFAULT_UI_CUSTOMIZATION = {
hasTitle: true, hasTitle: true,
...@@ -124,6 +126,11 @@ export default function EditBlueprintUi({ blueprintName }) { ...@@ -124,6 +126,11 @@ export default function EditBlueprintUi({ blueprintName }) {
setPolicyData({ ...policyData, uiCustomization: ui }); setPolicyData({ ...policyData, uiCustomization: ui });
}; };
const [oldUiCustomization, setOldUiCustomization] = useState({
...uiCustomization,
});
const [opacity, setOpacity] = useState(0);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [message, setMessage] = useState(false); const [message, setMessage] = useState(false);
const [severity, setSeverity] = useState("success"); const [severity, setSeverity] = useState("success");
...@@ -176,6 +183,8 @@ export default function EditBlueprintUi({ blueprintName }) { ...@@ -176,6 +183,8 @@ export default function EditBlueprintUi({ blueprintName }) {
} }
} }
// refresh the preview
setOldUiCustomization(uiCustomizationResponse);
console.log("Found ui customization in the policy data"); console.log("Found ui customization in the policy data");
} else { } else {
setUiCustomization(DEFAULT_UI_CUSTOMIZATION); setUiCustomization(DEFAULT_UI_CUSTOMIZATION);
...@@ -194,6 +203,19 @@ export default function EditBlueprintUi({ blueprintName }) { ...@@ -194,6 +203,19 @@ export default function EditBlueprintUi({ blueprintName }) {
const handleUpdateUi = (field, value) => { const handleUpdateUi = (field, value) => {
const newUiCustomization = { ...uiCustomization, [field]: value }; const newUiCustomization = { ...uiCustomization, [field]: value };
if (field === "title" || field === "description" || field === "backgroundColor") {
// Don't fade in for those fields
setOldUiCustomization(newUiCustomization);
} else {
// To make a fade effect, the new preview fades in,
// then the old preview is updated, and the preview on top fades out
setOpacity(1);
setTimeout(() => {
setOldUiCustomization(newUiCustomization);
setOpacity(0);
}, 250);
}
axios( axios(
configApiCall( configApiCall(
api_path_blueprints + "?name=" + blueprintName, api_path_blueprints + "?name=" + blueprintName,
...@@ -337,6 +359,23 @@ export default function EditBlueprintUi({ blueprintName }) { ...@@ -337,6 +359,23 @@ export default function EditBlueprintUi({ blueprintName }) {
<Grid container spacing={5}> <Grid container spacing={5}>
<Grid item xs={12} sm={12} md={12}> <Grid item xs={12} sm={12} md={12}>
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid
item
xs={12}
sm={12}
md={12}
className={classes.previewContainer}
>
<CustomUiPreview
opacity={opacity}
uiCustomization={policyData.uiCustomization}
/>
<CustomUiPreview
isOldPreview
opacity="1"
uiCustomization={oldUiCustomization}
/>
</Grid>
<Grid item xs={12} sm={12} md={12}> <Grid item xs={12} sm={12} md={12}>
<EditBlueprintUiForm <EditBlueprintUiForm
uiCustomization={policyData.uiCustomization} uiCustomization={policyData.uiCustomization}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment