feat: edit page template

Author: santipalenque

src/actions/page-template-actions.js

@@ -29,6 +29,7 @@ import {
   DEFAULT_CURRENT_PAGE,
   DEFAULT_ORDER_DIR,
   DEFAULT_PER_PAGE,
+  PAGE_MODULES_DOWNLOAD,
   PAGES_MODULE_KINDS
 } from "../utils/constants";
 import { snackbarErrorHandler, snackbarSuccessHandler } from "./base-actions";
@@ -48,7 +49,7 @@ export const PAGE_TEMPLATE_UNARCHIVED = "PAGE_TEMPLATE_UNARCHIVED";
 
 export const getPageTemplates =
   (
-    term = null,
+    term = "",
     page = DEFAULT_CURRENT_PAGE,
     perPage = DEFAULT_PER_PAGE,
     order = "id",
@@ -106,7 +107,7 @@ export const getPageTemplate = (formTemplateId) => async (dispatch) => {
 
   const params = {
     access_token: accessToken,
-    expand: "materials,meta_fields,meta_fields.values"
+    expand: "modules"
   };
 
   return getRequest(
@@ -160,8 +161,14 @@ const normalizeEntity = (entity) => {
         module.file_type_id?.value || module.file_type_id;
     }
 
-    if (module.kind === PAGES_MODULE_KINDS.DOCUMENT && module.file) {
-      normalizedModule.file = module.file[0] || null;
+    if (module.kind === PAGES_MODULE_KINDS.DOCUMENT) {
+      if (module.type === PAGE_MODULES_DOWNLOAD.FILE) {
+        normalizedModule.file = module.file[0] || null;
+        delete normalizedModule.external_url;
+      } else {
+        delete normalizedModule.file;
+        delete normalizedModule.file_id;
+      }
     }
 
     delete normalizedModule._tempId;

src/components/forms/media-upload-form.js

@@ -14,7 +14,7 @@
 import React from "react";
 import T from "i18n-react/dist/i18n-react";
 import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css";
-import { Input, Dropdown } from "openstack-uicore-foundation/lib/components";
+import { Dropdown, Input } from "openstack-uicore-foundation/lib/components";
 import TextEditorV3 from "openstack-uicore-foundation/lib/components/inputs/editor-input-v3";
 import { isEmpty, scrollToError, shallowEqual } from "../../utils/methods";
 
@@ -103,6 +103,11 @@ class MediaUploadForm extends React.Component {
       .filter((t) => t.class_name === "PresentationType")
       .map((t) => ({ value: t.id, label: t.name }));
 
+    const mediaFileTypesDDL = mediaFileTypes.map((mft) => ({
+      value: mft.id,
+      label: mft.name
+    }));
+
     return (
       <form className="media-upload-form">
         <input type="hidden" id="id" value={entity.id} />
@@ -183,7 +188,7 @@ class MediaUploadForm extends React.Component {
               className="right-space"
               value={entity.type_id}
               placeholder={T.translate("media_upload.placeholders.select_type")}
-              options={mediaFileTypes}
+              options={mediaFileTypesDDL}
               onChange={this.handleChange}
             />
           </div>

src/components/inputs/formik-text-editor.js

@@ -1,23 +1,21 @@
 import React from "react";
 import TextEditorV3 from "openstack-uicore-foundation/lib/components/inputs/editor-input-v3";
-import { useFormikContext } from "formik";
+import { useField } from "formik";
 import normalizeHtmlString from "../../utils/normalize-html-string";
 
 const FormikTextEditor = ({ name, ...props }) => {
-  const { values, errors, touched, setFieldValue, setFieldTouched } =
-    useFormikContext();
+  const [field, meta, helpers] = useField(name);
 
   return (
     <TextEditorV3
       name={name}
       id={name}
-      value={values[name]}
+      value={field.value}
       onChange={(e) => {
         const stringValue = normalizeHtmlString(e.target.value);
-        setFieldValue(name, stringValue);
+        helpers.setValue(stringValue);
       }}
-      onBlur={() => setFieldTouched(name, true)}
-      error={touched?.[name] && errors?.[name] ? errors?.[name] : ""}
+      error={meta.touched && meta.error}
       license={process.env.JODIT_LICENSE_KEY}
       {...props}
     />

src/components/mui/formik-inputs/mui-formik-datepicker.js

@@ -45,7 +45,7 @@ const MuiFormikDatepicker = ({ name, label, required, ...props }) => {
 
 MuiFormikDatepicker.propTypes = {
   name: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
+  label: PropTypes.string,
   required: PropTypes.bool
 };
 

src/components/mui/formik-inputs/mui-formik-upload.js

@@ -12,7 +12,7 @@ import {
 const MuiFormikUpload = ({
   id,
   name,
-  onImageDeleted,
+  onDelete,
   maxFiles = MAX_INVENTORY_IMAGES_UPLOAD_QTY
 }) => {
   const [field, meta, helpers] = useField(name);
@@ -59,8 +59,8 @@ const MuiFormikUpload = ({
       (i) => i.filename !== imageFile.name
     );
     helpers.setValue(updated);
-    if (onImageDeleted) {
-      onImageDeleted(imageFile.id);
+    if (onDelete) {
+      onDelete(imageFile.id);
     }
   };
 
@@ -91,7 +91,7 @@ const MuiFormikUpload = ({
 MuiFormikUpload.propTypes = {
   id: PropTypes.string,
   name: PropTypes.string.isRequired,
-  onImageDeleted: PropTypes.func,
+  onDelete: PropTypes.func,
   maxFiles: PropTypes.number
 };
 

src/i18n/en.json

@@ -3969,6 +3969,7 @@
       "external_url": "External URL",
       "upload_file": "Upload File",
       "text_input": "Text input",
+      "input_url_link": "Input URL Link",
       "media_module": "Media Request Module",
       "name": "Name",
       "upload_deadline": "Upload Deadline",

src/pages/sponsors-global/page-templates/page-template-list-page.js

@@ -26,9 +26,10 @@ import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
 import {
   archivePageTemplate,
+  deletePageTemplate,
   getPageTemplates,
+  getPageTemplate,
   savePageTemplate,
-  deletePageTemplate,
   unarchivePageTemplate
 } from "../../../actions/page-template-actions";
 import MuiTable from "../../../components/mui/table/mui-table";
@@ -47,6 +48,7 @@ const PageTemplateListPage = ({
   hideArchived,
   totalPageTemplates,
   getPageTemplates,
+  getPageTemplate,
   archivePageTemplate,
   unarchivePageTemplate,
   savePageTemplate,
@@ -118,7 +120,7 @@ const PageTemplateListPage = ({
       : archivePageTemplate(item.id);
 
   const handleEdit = (row) => {
-    console.log("EDIT", row);
+    getPageTemplate(row.id).then(() => setPageTemplateId(row.id));
   };
 
   const handleDelete = (row) => {
@@ -283,6 +285,7 @@ const mapStateToProps = ({ pageTemplateListState }) => ({
 
 export default connect(mapStateToProps, {
   getPageTemplates,
+  getPageTemplate,
   archivePageTemplate,
   unarchivePageTemplate,
   savePageTemplate,

src/pages/sponsors-global/page-templates/page-template-popup/index.js

@@ -20,13 +20,22 @@ import { FormikProvider, useFormik } from "formik";
 import * as yup from "yup";
 import MuiFormikTextField from "../../../../components/mui/formik-inputs/mui-formik-textfield";
 import PageModules from "./page-template-modules-form";
+import { resetPageTemplateForm } from "../../../../actions/page-template-actions";
 import {
   PAGES_MODULE_KINDS,
-  PAGE_MODULES_MEDIA_TYPES
+  PAGE_MODULES_MEDIA_TYPES,
+  PAGE_MODULES_DOWNLOAD
 } from "../../../../utils/constants";
 
-const PageTemplatePopup = ({ pageTemplate, open, onClose, onSave }) => {
+const PageTemplatePopup = ({
+  pageTemplate,
+  open,
+  onClose,
+  onSave,
+  resetPageTemplateForm
+}) => {
   const handleClose = () => {
+    resetPageTemplateForm();
     onClose();
   };
 
@@ -78,8 +87,16 @@ const PageTemplatePopup = ({ pageTemplate, open, onClose, onSave }) => {
     kind: yup.string().equals([PAGES_MODULE_KINDS.DOCUMENT]),
     name: yup.string().required(T.translate("validation.required")),
     description: yup.string().required(T.translate("validation.required")),
-    external_url: yup.string(),
-    file: yup.array().min(1, T.translate("validation.file_required"))
+    external_url: yup.string().when("type", {
+      is: PAGE_MODULES_DOWNLOAD.URL,
+      then: (schema) => schema.required(T.translate("validation.required")),
+      otherwise: (schema) => schema.nullable()
+    }),
+    file: yup.array().when("type", {
+      is: PAGE_MODULES_DOWNLOAD.FILE,
+      then: (schema) => schema.min(1, T.translate("validation.file_required")),
+      otherwise: (schema) => schema.nullable()
+    })
   });
 
   const mediaModuleSchema = yup.object().shape({
@@ -88,7 +105,7 @@ const PageTemplatePopup = ({ pageTemplate, open, onClose, onSave }) => {
     type: yup.string().required(T.translate("validation.required")),
     upload_deadline: yup.date().required(T.translate("validation.required")),
     description: yup.string().required(T.translate("validation.required")),
-    file_type_id: yup.object().when("type", {
+    file_type_id: yup.number().when("type", {
       is: PAGE_MODULES_MEDIA_TYPES.FILE,
       then: (schema) => schema.required(T.translate("validation.required")),
       otherwise: (schema) => schema.nullable()
@@ -124,6 +141,7 @@ const PageTemplatePopup = ({ pageTemplate, open, onClose, onSave }) => {
         ...m,
         custom_order: idx
       }));
+
       onSave({ ...values, modules: modulesWithOrder });
     }
   });
@@ -148,24 +166,24 @@ const PageTemplatePopup = ({ pageTemplate, open, onClose, onSave }) => {
         >
           <DialogContent sx={{ p: 0 }}>
             <Grid2 container spacing={2} size={12} sx={{ p: 2 }}>
-              <Grid2 spacing={2} size={4}>
+              <Grid2 size={4}>
                 <MuiFormikTextField
                   name="code"
                   label={T.translate("page_template_list.code")}
                   fullWidth
                 />
               </Grid2>
-              <Grid2 spacing={2} size={8}>
+              <Grid2 size={8}>
                 <MuiFormikTextField
                   name="name"
                   label={T.translate("page_template_list.name")}
                   fullWidth
                 />
               </Grid2>
             </Grid2>
-            <Divider gutterBottom />
+            <Divider sx={{ mb: 2 }} />
             <Grid2 container spacing={2} size={12} sx={{ p: 2 }}>
-              <Grid2 spacing={2} size={4}>
+              <Grid2 size={4}>
                 <Button
                   variant="contained"
                   fullWidth
@@ -175,7 +193,7 @@ const PageTemplatePopup = ({ pageTemplate, open, onClose, onSave }) => {
                   {T.translate("page_template_list.page_crud.add_info")}
                 </Button>
               </Grid2>
-              <Grid2 spacing={2} size={4}>
+              <Grid2 size={4}>
                 <Button
                   variant="contained"
                   fullWidth
@@ -185,7 +203,7 @@ const PageTemplatePopup = ({ pageTemplate, open, onClose, onSave }) => {
                   {T.translate("page_template_list.page_crud.add_doc")}
                 </Button>
               </Grid2>
-              <Grid2 spacing={2} size={4}>
+              <Grid2 size={4}>
                 <Button
                   variant="contained"
                   fullWidth
@@ -196,7 +214,7 @@ const PageTemplatePopup = ({ pageTemplate, open, onClose, onSave }) => {
                 </Button>
               </Grid2>
             </Grid2>
-            <Divider gutterBottom />
+            <Divider sx={{ mb: 2 }} />
             <Box sx={{ py: 2 }}>
               <PageModules name="modules" />
             </Box>
@@ -219,8 +237,10 @@ PageTemplatePopup.propTypes = {
   onSave: PropTypes.func.isRequired
 };
 
-const mapStateToProps = ({ currentPageTemplateState }) => ({
-  ...currentPageTemplateState
+const mapStateToProps = ({ pageTemplateState }) => ({
+  pageTemplate: pageTemplateState.entity
 });
 
-export default connect(mapStateToProps, {})(PageTemplatePopup);
+export default connect(mapStateToProps, {
+  resetPageTemplateForm
+})(PageTemplatePopup);