jams-react-client: show EditBlueprintUiForm on the Customization tab

Change-Id: I3388cbedc7299fd99034899b2857411a16f46578

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,
 };

jams-react-client/src/views/Blueprint/EditBlueprintUi.js

-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>

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: "",
     });
   };