From 7ce82d5f6b323bd50825ac5027818c001ed72c86 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:44:23 -0400
Subject: [PATCH] jams-react-client: show EditBlueprintUiForm on the
Customization tab
Change-Id: I3388cbedc7299fd99034899b2857411a16f46578
---
jams-react-client/src/globalUrls.js | 4 +
.../src/views/Blueprint/EditBlueprintUi.js | 202 +++++++++++++++++-
.../views/Blueprint/EditBlueprintUiForm.js | 40 ++--
3 files changed, 223 insertions(+), 23 deletions(-)
diff --git a/jams-react-client/src/globalUrls.js b/jams-react-client/src/globalUrls.js
index aef3865f..ffae7eff 100644
--- a/jams-react-client/src/globalUrls.js
+++ b/jams-react-client/src/globalUrls.js
@@ -55,6 +55,8 @@ const api_path_get_group_members = "/api/admin/group/members/";
const api_path_post_group_member = "/api/admin/group/members/";
const api_path_delete_group_member = "/api/admin/group/members/";
const api_path_get_admin_user_groups = "/api/admin/user/groups/";
+const api_path_get_image = "/api/image/filehandler";
+const api_path_post_image = "/api/image/filehandler";
module.exports = {
uri,
@@ -112,4 +114,6 @@ module.exports = {
api_path_post_group_member,
api_path_delete_group_member,
api_path_get_admin_user_groups,
+ api_path_get_image,
+ api_path_post_image,
};
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintUi.js b/jams-react-client/src/views/Blueprint/EditBlueprintUi.js
index ebafec42..7fe1480d 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintUi.js
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintUi.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
@@ -115,10 +115,193 @@ function Alert(props) {
export default function EditBlueprintUi({ blueprintName }) {
const classes = useStyles();
+ const [policyData, setPolicyData] = useState({
+ uiCustomization: DEFAULT_UI_CUSTOMIZATION,
+ });
+ let { uiCustomization } = policyData;
+
+ const setUiCustomization = (ui) => {
+ setPolicyData({ ...policyData, uiCustomization: ui });
+ };
+
const [open, setOpen] = useState(false);
const [message, setMessage] = useState(false);
const [severity, setSeverity] = useState("success");
+ const [bgFile, setBgFile] = useState(null);
+ const [logoFile, setLogoFile] = useState(null);
+
+ useEffect(() => {
+ axios(
+ configApiCall(
+ api_path_blueprints + "?name=" + blueprintName,
+ "GET",
+ null,
+ null
+ )
+ )
+ .then((response) => {
+ let policyDataResponse = JSON.parse(response.data.policyData);
+ policyDataResponse.uiCustomization = JSON.parse(
+ policyDataResponse.uiCustomization
+ );
+
+ setPolicyData(policyDataResponse);
+
+ const { uiCustomization: uiCustomizationResponse } = policyDataResponse;
+
+ if (uiCustomizationResponse) {
+ if (
+ uiCustomizationResponse.customBackgroundImageUrl &&
+ uiCustomizationResponse.hasBackgroundCustom
+ ) {
+ //Get the name of the file from the url
+ let urlParts = uiCustomizationResponse.customBackgroundImageUrl.split(
+ "/"
+ );
+ if (urlParts.length) {
+ setBgFile(urlParts[urlParts.length - 1]);
+ }
+ }
+ if (
+ uiCustomizationResponse.customLogoImageUrl &&
+ uiCustomizationResponse.hasLogo
+ ) {
+ //Get the name of the file from the url
+ let urlParts = uiCustomizationResponse.customLogoImageUrl.split(
+ "/"
+ );
+ if (urlParts.length) {
+ setLogoFile(urlParts[urlParts.length - 1]);
+ }
+ }
+
+ console.log("Found ui customization in the policy data");
+ } else {
+ setUiCustomization(DEFAULT_UI_CUSTOMIZATION);
+ console.log("Did not find ui customization in the policy data");
+ }
+ })
+ .catch((error) => {
+ setUiCustomization(DEFAULT_UI_CUSTOMIZATION);
+
+ console.log(
+ `Error fetching blueprint permissions : ${blueprintName} ${error}`
+ );
+ });
+ }, [blueprintName]);
+
+ const handleUpdateUi = (field, value) => {
+ const newUiCustomization = { ...uiCustomization, [field]: value };
+
+ axios(
+ configApiCall(
+ api_path_blueprints + "?name=" + blueprintName,
+ "PUT",
+ { ...policyData, uiCustomization: JSON.stringify(newUiCustomization) },
+ null
+ )
+ )
+ .then(() => {
+ setOpen(false);
+ setSeverity("success");
+ setOpen(true);
+ setMessage(
+ i18next.t(
+ "updated_blueprint_permissions_successfully",
+ "Blueprint permissions successfully updated."
+ )
+ );
+ })
+ .catch((error) => {
+ console.error(error);
+ setOpen(false);
+ setSeverity("error");
+ setOpen(true);
+ setMessage(
+ i18next.t(
+ "error_updating_blueprint_permissions",
+ "Error occurred while updating blueprint permissions."
+ ) +
+ error +
+ "!"
+ );
+ });
+ };
+
+ const handleImgDrop = (acceptedFiles, imgType) => {
+ const formData = new FormData();
+ formData.append("file", acceptedFiles[0]);
+
+ const url = `${api_path_post_image}/${blueprintName}/${imgType}`;
+
+ fetch(url, {
+ method: "POST",
+ body: formData,
+ })
+ .then(() => {
+ if (imgType === "background") {
+ let newUrl =
+ api_path_get_image +
+ "/" +
+ blueprintName +
+ "/background/" +
+ acceptedFiles[0].name;
+ setUiCustomization({
+ ...uiCustomization,
+ backgroundUrl: newUrl,
+ backgroundColor: "",
+ });
+ setBgFile(acceptedFiles[0].name);
+ handleUpdateUi("backgroundUrl", newUrl);
+ } else if (imgType === "logo") {
+ let newUrl =
+ api_path_get_image +
+ "/" +
+ blueprintName +
+ "/logo/" +
+ acceptedFiles[0].name;
+ setUiCustomization({
+ ...uiCustomization,
+ logoUrl: newUrl,
+ });
+ setLogoFile(acceptedFiles[0].name);
+ handleUpdateUi("logoUrl", newUrl);
+ }
+ })
+ .catch((error) => {
+ console.error(error);
+ });
+ };
+
+ const handleDeleteLogo = (e) => {
+ setLogoFile(null);
+ setUiCustomization({
+ ...uiCustomization,
+ customLogoImageUrl: null,
+ });
+ e.stopPropagation();
+ };
+
+ const handleDeleteBg = (e) => {
+ setBgFile(null);
+ setUiCustomization({
+ ...uiCustomization,
+ customBackgroundImageUrl: null,
+ });
+ e.preventDefault();
+ e.stopPropagation();
+ };
+
+ const handleColorChange = (color) => {
+ setUiCustomization({
+ ...uiCustomization,
+ customBackgroundColor: color.hex,
+ customBackgroundImageUrl: null,
+ });
+ setBgFile(null);
+ };
+
const handleClose = () => {
setOpen(false);
};
@@ -154,8 +337,21 @@ export default function EditBlueprintUi({ blueprintName }) {
<Grid container spacing={5}>
<Grid item xs={12} sm={12} md={12}>
<Grid container spacing={2}>
- {/* TODO */}
- Coming soon
+ <Grid item xs={12} sm={12} md={12}>
+ <EditBlueprintUiForm
+ uiCustomization={policyData.uiCustomization}
+ setUiCustomization={setUiCustomization}
+ handleUpdateUi={handleUpdateUi}
+ handleImgDrop={handleImgDrop}
+ logoFile={logoFile}
+ setLogoFile={setLogoFile}
+ handleDeleteLogo={handleDeleteLogo}
+ bgFile={bgFile}
+ setBgFile={setBgFile}
+ handleDeleteBg={handleDeleteBg}
+ handleColorChange={handleColorChange}
+ />
+ </Grid>
</Grid>
</Grid>
</Grid>
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js b/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js
index 03f4b4bb..eee10366 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js
@@ -92,11 +92,11 @@ const TitleForm = ({ uiCustomization, handleUpdateUi }) => {
)}
</span>
<TextField
- id="customTitle"
+ id="title"
placeholder={i18next.t("welcome_title", "Welcome to Jami")}
- value={uiCustomization.customTitle}
+ value={uiCustomization.title}
onChange={(e) => {
- handleUpdateUi("customTitle", e.target.value);
+ handleUpdateUi("title", e.target.value);
}}
fullWidth
inputProps={{ maxLength: 20 }}
@@ -137,14 +137,14 @@ const DescriptionForm = ({ uiCustomization, handleUpdateUi }) => {
)}
</span>
<TextField
- id="customDescription"
+ id="description"
placeholder={i18next.t(
"welcome_Description",
"Here is your Jami identifier, don’t hesitate to share it in order to be contacted more easily!"
)}
- value={uiCustomization.customDescription}
+ value={uiCustomization.description}
onChange={(e) => {
- handleUpdateUi("customDescription", e.target.value);
+ handleUpdateUi("description", e.target.value);
}}
fullWidth
inputProps={{ maxLength: 100 }}
@@ -181,12 +181,12 @@ const HasBackgroundCustomForm = ({ uiCustomization, handleUpdateUi }) => {
<FormControlLabel
control={
<Checkbox
- checked={uiCustomization.hasBackgroundCustom}
+ checked={uiCustomization.hasBackground}
color="primary"
onChange={(e) => {
- handleUpdateUi("hasBackgroundCustom", e.target.checked);
+ handleUpdateUi("hasBackground", e.target.checked);
}}
- name="hasBackgroundCustom"
+ name="hasBackground"
/>
}
label={i18next.t("welcome_has_BackgroundCustom", "Background")}
@@ -220,7 +220,7 @@ const CustomBackgroundForm = ({
return (
<FormGroup row>
- {uiCustomization.hasBackgroundCustom && (
+ {uiCustomization.hasBackground && (
<>
<span>
{i18next.t(
@@ -240,7 +240,7 @@ const CustomBackgroundForm = ({
<div style={{ padding: "0 20px" }}>
<button
style={{
- backgroundColor: uiCustomization.customBackgroundColor,
+ backgroundColor: uiCustomization.backgroundColor,
}}
className={classes.colorButtonStyle}
onClick={() => {
@@ -251,10 +251,10 @@ const CustomBackgroundForm = ({
<div className={classes.popover}>
<div className={classes.cover} onClick={handleCloseColor} />
<SketchPicker
- color={uiCustomization.customBackgroundColor}
+ color={uiCustomization.backgroundColor}
onChange={(color) => {
handleColorChange(color);
- handleUpdateUi("customBackgroundColor", color.hex);
+ handleUpdateUi("backgroundColor", color.hex);
}}
/>
</div>
@@ -274,7 +274,7 @@ const CustomBackgroundForm = ({
file={bgFile}
setFile={setBgFile}
handleDelete={(e) => {
- handleUpdateUi("customBackgroundImageUrl", "");
+ handleUpdateUi("backgroundUrl", "");
e.preventDefault();
e.stopPropagation();
}}
@@ -334,7 +334,7 @@ const LogoForm = ({
setFile={setLogoFile}
handleDelete={(e) => {
handleDeleteLogo(e);
- handleUpdateUi("customLogoImageUrl", null);
+ handleUpdateUi("logoUrl", null);
}}
/>
</FormGroup>
@@ -350,13 +350,13 @@ const EditBlueprintUiForm = ({
}) => {
const { isCustomizationEnabled } = uiCustomization;
- const bgFile = uiCustomization.customBackgroundImageUrl?.split("/").pop();
- const logoFile = uiCustomization.customLogoImageUrl?.split("/").pop();
+ const bgFile = uiCustomization.backgroundUrl?.split("/").pop();
+ const logoFile = uiCustomization.logoUrl?.split("/").pop();
const handleDeleteLogo = (e) => {
setUiCustomization({
...uiCustomization,
- customLogoImageUrl: "",
+ logoUrl: "",
});
e.stopPropagation();
};
@@ -364,8 +364,8 @@ const EditBlueprintUiForm = ({
const handleColorChange = (color) => {
setUiCustomization({
...uiCustomization,
- customBackgroundColor: color.hex,
- customBackgroundImageUrl: "",
+ backgroundColor: color.hex,
+ backgroundUrl: "",
});
};
--
GitLab