add Builder/Editor option while create new page

projectyana · Aug 14, 2022 · 1db05ba · 1db05ba
1 parent 84e79ce
commit 1db05ba
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 44 deletions.
diff --git a/src/pages/page/editor/index.js b/src/pages/page/editor/index.js
@@ -3,8 +3,10 @@
 import React, { useEffect, useState } from 'react';
 import { useParams, useNavigate, useLocation } from "react-router-dom";
 import { useFormik } from "formik";
+import { Grid } from '@mui/material';
 
 import SuiBox from "components/SuiBox";
+import SuiButton from "components/SuiButton";
 import SuiInput from "components/SuiInput";
 
 // Soft UI Dashboard React contexts
@@ -13,6 +15,7 @@ import { useSoftUIController, setMiniSidenav } from "context";
 import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
 
 import VisualEditor from "components/Custom/VisualEditor";
+import TextEditor from "components/Custom/TextEditor";
 import { SelectCreateable } from "components/Custom/Select";
 
 import PageApi from "apis/Page";
@@ -29,6 +32,7 @@ const PageEditor = () => {
   });
   const isFullscreen = window.innerHeight == screen.height;
   const {
+    type = "",
     id = null,
     title = "",
     slug = "",
@@ -37,13 +41,20 @@ const PageEditor = () => {
     css_content = ""
   } = useLocation()?.state || {};
 
+  // some delay function before submit
+  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
   // Submit to server
-  const formSubmitHandler = (values, { setSubmitting }) => {
+  const formSubmitHandler = async (values, { setSubmitting }) => {
+    await sleep(900);
+
     const finalValue = {
       ...values,
       tags: selectedTags.map(item => item.value).join(",")
     };
 
+    console.log(finalValue);
+
     action === "create"
       ? PageApi.create(finalValue)
         .then((res) => {
@@ -72,7 +83,7 @@ const PageEditor = () => {
     onSubmit: formSubmitHandler,
   });
 
-  const { values, errors, touched, handleChange } = formik;
+  const { values, errors, touched, handleChange, handleSubmit } = formik;
 
   const fetchDropdown = () => {
     BlogApi.getTags()
@@ -98,45 +109,60 @@ const PageEditor = () => {
 
   return (
     <DashboardLayout>
-      <>
-        <SuiBox mt={2} mb={2} display="flex" justifyContent="flex-start" >
-          <SuiBox mr={2}>
-            <SuiInput
-              name="title"
-              placeholder="Title"
-              onChange={handleChange}
-              value={values.title}
-              error={Boolean(errors.title && touched.title)}
-              errorMessage={errors?.title ?? ""}
-            />
-          </SuiBox>
-
-          <SuiBox mr={2}>
-            <SuiInput
-              name="slug"
-              placeholder="Slug"
-              onChange={handleChange}
-              value={values.slug}
-              error={Boolean(errors.slug && touched.slug)}
-              errorMessage={errors?.slug ?? ""}
-            />
-          </SuiBox>
-
-          <SuiBox>
-            <SelectCreateable
-              isMulti={true}
-              placeholder="Tags"
-              option={dropdown?.tags}
-              defaultValue={selectedTags ?? []}
-              value={selectedTags}
-              onChange={setSelectedTags}
-              isLoading={dropdown.loading}
-              menuPortalTarget={document.body}
-            />
+      <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
+        <Grid item md={12}>
+          <SuiInput
+            name="title"
+            placeholder="Title"
+            onChange={handleChange}
+            value={values.title}
+            error={Boolean(errors.title && touched.title)}
+            errorMessage={errors?.title ?? ""}
+          />
+        </Grid>
+
+        <Grid item md={12}>
+          <SuiInput
+            name="slug"
+            placeholder="Slug"
+            onChange={handleChange}
+            value={values.slug}
+            error={Boolean(errors.slug && touched.slug)}
+            errorMessage={errors?.slug ?? ""}
+          />
+        </Grid>
+
+        <Grid item md={12}>
+          <SelectCreateable
+            isMulti={true}
+            placeholder="Tags"
+            option={dropdown?.tags}
+            defaultValue={selectedTags ?? []}
+            value={selectedTags}
+            onChange={setSelectedTags}
+            isLoading={dropdown.loading}
+            menuPortalTarget={document.body}
+          />
+        </Grid>
+
+        <Grid item md={12}>
+          {type === "builder"
+            ? <VisualEditor action={action} formik={formik} />
+            : <TextEditor action={action} formik={formik} />}
+        </Grid>
+
+        <Grid item md={12}>
+          <SuiBox mt={2}>
+            <SuiButton
+              mt={2}
+              size="medium"
+              color="info"
+              onClick={() => handleSubmit()}>
+              {action === "edit" ? "Save Update" : "Create"}
+            </SuiButton>
           </SuiBox>
-        </SuiBox>
-        <VisualEditor action={action} formik={formik} />
-      </>
+        </Grid>
+      </Grid>
     </DashboardLayout>
   );
 };

diff --git a/src/pages/page/index.js b/src/pages/page/index.js
@@ -8,7 +8,11 @@ import {
   TableBody,
   TableRow,
   TableCell,
-  Icon
+  Icon,
+  Menu,
+  MenuItem,
+  Fade,
+  ListItemIcon
 } from "@mui/material";
 
 import SuiBox from "components/SuiBox";
@@ -25,6 +29,66 @@ import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
 
 import ModalDelete from "./components/ModalDelete";
 
+const DropdownButton = () => {
+  const navigate = useNavigate();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event) => setAnchorEl(event.currentTarget);
+  const handleClose = () => setAnchorEl(null);
+
+  const handleClickBuilder = () => {
+    navigate("editor/create", { state: { type: 'builder' } });
+    handleClose();
+  };
+
+  const handleClickEditor = () => {
+    navigate("editor/create", { state: { type: 'editor' } });
+    handleClose();
+  };
+
+  return (
+    <div>
+      <SuiButton
+        size="medium"
+        color="info"
+        id="fade-button"
+        aria-controls={open ? 'fade-menu' : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+        onClick={handleClick}
+      >
+        Create&nbsp;
+        <Icon>arrow_drop_down</Icon>
+      </SuiButton>
+      <Menu
+        id="fade-menu"
+        MenuListProps={{
+          'aria-labelledby': 'fade-button',
+        }}
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        TransitionComponent={Fade}
+      >
+        <MenuItem onClick={handleClickBuilder}>
+          <ListItemIcon>
+            <Icon size="medium">grid_view</Icon>
+          </ListItemIcon>
+          &nbsp;Page Builder
+        </MenuItem>
+
+        <MenuItem onClick={handleClickEditor}>
+          <ListItemIcon>
+            <Icon size="medium">format_size</Icon>
+          </ListItemIcon>
+          &nbsp;Page Editor
+        </MenuItem>
+      </Menu>
+    </div>
+  );
+};
+
 const PageMenu = () => {
   const navigate = useNavigate();
   const [search, setSearch] = useState("");
@@ -64,9 +128,7 @@ const PageMenu = () => {
     <DashboardLayout>
       <SuiBox pb={2} display="flex" justifyContent="space-between" alignItems="center">
         <SuiInput placeholder="Search..." icon={{ component: "search", direction: "left" }} onChange={(e) => setSearch(e.target.value ?? "")} />
-        <SuiButton size="medium" color="info" onClick={() => navigate("editor/create")}>
-          Create
-        </SuiButton>
+        <DropdownButton />
       </SuiBox>
 
       <TableContainer component={Paper}>