From 1f17671cfca8615d13081ae47a93c99cc424276e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Banno-Cloutier?=
<leo.banno-cloutier@savoirfairelinux.com>
Date: Wed, 14 Jun 2023 17:46:08 -0400
Subject: [PATCH] jams-react-client: show CustomUiPreview in Customization tab
Change-Id: I537f76a77cbe6ef49da26c5d70bf3abc808dd1f8
---
.../src/views/Blueprint/EditBlueprintUi.js | 39 +++++++++++++++++++
1 file changed, 39 insertions(+)
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintUi.js b/jams-react-client/src/views/Blueprint/EditBlueprintUi.js
index 7fe1480d..79064858 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintUi.js
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintUi.js
@@ -29,6 +29,8 @@ import Snackbar from "@material-ui/core/Snackbar";
import MuiAlert from "@material-ui/lab/Alert";
import i18next from "i18next";
+import CustomUiPreview from "components/CustomUiPreview/CustomUiPreview";
+import EditBlueprintUiForm from "./EditBlueprintUiForm";
const DEFAULT_UI_CUSTOMIZATION = {
hasTitle: true,
@@ -124,6 +126,11 @@ export default function EditBlueprintUi({ blueprintName }) {
setPolicyData({ ...policyData, uiCustomization: ui });
};
+ const [oldUiCustomization, setOldUiCustomization] = useState({
+ ...uiCustomization,
+ });
+ const [opacity, setOpacity] = useState(0);
+
const [open, setOpen] = useState(false);
const [message, setMessage] = useState(false);
const [severity, setSeverity] = useState("success");
@@ -176,6 +183,8 @@ export default function EditBlueprintUi({ blueprintName }) {
}
}
+ // refresh the preview
+ setOldUiCustomization(uiCustomizationResponse);
console.log("Found ui customization in the policy data");
} else {
setUiCustomization(DEFAULT_UI_CUSTOMIZATION);
@@ -194,6 +203,19 @@ export default function EditBlueprintUi({ blueprintName }) {
const handleUpdateUi = (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(
configApiCall(
api_path_blueprints + "?name=" + blueprintName,
@@ -337,6 +359,23 @@ export default function EditBlueprintUi({ blueprintName }) {
<Grid container spacing={5}>
<Grid item xs={12} sm={12} md={12}>
<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}>
<EditBlueprintUiForm
uiCustomization={policyData.uiCustomization}
--
GitLab