From 4b406caa59bf7d21d25a4f587496f0aeecacb956 Mon Sep 17 00:00:00 2001 From: Andres Date: Thu, 12 Jan 2023 09:55:46 -0800 Subject: [PATCH 1/5] Schema start wizard --- package.json | 2 +- public/images/winnerPanel.svg | 1 + src/apps/schema/src/app/main.js | 5 +- .../src/app/views/SchemaCreateWizard.tsx | 195 ++++++++++++++++++ src/index.html | 2 +- src/shell/app.config.js | 4 + .../GlobalNotifications.less | 3 +- src/shell/services/instance.ts | 16 +- 8 files changed, 222 insertions(+), 6 deletions(-) create mode 100644 public/images/winnerPanel.svg create mode 100644 src/apps/schema/src/app/views/SchemaCreateWizard.tsx diff --git a/package.json b/package.json index b840b08684..5e72f0376b 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "serve:webpack:ssl": "npm run serve:webpack -- --node-env development --https --cert ./etc/ssl/_.manager.dev.zesty.io.crt --key ./etc/ssl/_.manager.dev.zesty.io.key", "start:local": "npm run serve:webpack -- --node-env local", "start": "npm run serve:webpack -- --node-env development", - "start:stage": "npm run serve:webpack -- --node-env stage --mode=development", + "start:stage": "npm run serve:webpack -- --node-env production --mode=development", "task:clean": "rimraf build", "task:webpack": "cross-env NODE_OPTIONS='--max_old_space_size=4096' webpack --progress --config src/shell/webpack.config.js", "test": "./node_modules/.bin/cypress run --headless --browser chrome --reporter list", diff --git a/public/images/winnerPanel.svg b/public/images/winnerPanel.svg new file mode 100644 index 0000000000..4d46e495ab --- /dev/null +++ b/public/images/winnerPanel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/apps/schema/src/app/main.js b/src/apps/schema/src/app/main.js index d949e7212e..eec473ca01 100644 --- a/src/apps/schema/src/app/main.js +++ b/src/apps/schema/src/app/main.js @@ -1,6 +1,6 @@ import { useState, useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; -import { Switch, Route, useRouteMatch } from "react-router-dom"; +import { Switch, Route, useRouteMatch, Redirect } from "react-router-dom"; import { WithLoader } from "@zesty-io/core/WithLoader"; import { SchemaNav } from "./components/Nav"; @@ -13,6 +13,7 @@ import { fetchSettings } from "shell/store/settings"; import { notify } from "shell/store/notifications"; import styles from "./main.less"; +import { SchemaCreateWizard } from "./views/SchemaCreateWizard"; export default function SchemaBuilder() { const match = useRouteMatch("/schema/start"); const showNav = match && match.isExact; @@ -45,7 +46,7 @@ export default function SchemaBuilder() { width="100vw" height="100vh" > - +
{!showNav ? : ""}
diff --git a/src/apps/schema/src/app/views/SchemaCreateWizard.tsx b/src/apps/schema/src/app/views/SchemaCreateWizard.tsx new file mode 100644 index 0000000000..14c32570db --- /dev/null +++ b/src/apps/schema/src/app/views/SchemaCreateWizard.tsx @@ -0,0 +1,195 @@ +import { useEffect, useState } from "react"; +import { + Box, + Button, + Backdrop, + Dialog, + DialogContent, + DialogTitle, + Typography, + ListItemButton, + ListItemText, + DialogActions, + CircularProgress, +} from "@mui/material"; +import { theme } from "@zesty-io/material"; +import { ThemeProvider } from "@mui/material/styles"; +import EditIcon from "@mui/icons-material/Edit"; +import winnerPanel from "../../../../../../public/images/winnerPanel.svg"; +import ShoppingCartIcon from "@mui/icons-material/ShoppingCart"; +import NewspaperRoundedIcon from "@mui/icons-material/NewspaperRounded"; +import WebRoundedIcon from "@mui/icons-material/WebRounded"; +import { useCreateContentModelFromTemplateMutation } from "../../../../../shell/services/instance"; +import { AppState } from "../../../../../shell/store/types"; +import { useSelector, useDispatch } from "react-redux"; +import { fetchModels } from "../../../../../shell/store/models"; +import { notify } from "../../../../../shell/store/notifications"; +import { useHistory } from "react-router"; + +const templates = [ + { + title: "Blog", + description: + "Perfect for blogging with title, body content, feature image, and category fields.", + repository: "https://github.com/zesty-io/module-boostrap-5.2-blog", + // This variable is used to determine which content model should be used to create the content item + mainName: "module_blog", + icon: , + }, + { + title: "E Commerce", + description: "A schema consisting of models for products, and categories.", + repository: "https://github.com/zesty-io/module-bootstrap-5.2-products", + icon: , + mainName: "", + }, + // { + // title: "Documentation", + // description: + // "Perfect for writing official docs for your product or developers.", + // }, + { + title: "Landing Page", + description: + "A simple landing page with fields for a hero, feature, and footer section.", + repository: "https://github.com/zesty-io/module-bootstrap-5.2-landing-page", + icon: , + mainName: "", + }, +]; + +export const SchemaCreateWizard = () => { + const history = useHistory(); + const instance = useSelector((state: AppState) => state.instance); + const models = useSelector((state: AppState) => state.models); + const dispatch = useDispatch(); + const [selectedTemplateIndex, setSelectedTemplateIndex] = useState(null); + const [createContentModelFromTemplate, { isLoading, isSuccess }] = + useCreateContentModelFromTemplateMutation(); + + const handleNext = () => { + createContentModelFromTemplate({ + instance_zuid: instance.ZUID, + repository: templates[selectedTemplateIndex].repository, + parent_zuid: "0", + }) + .unwrap() + .then((res) => dispatch(fetchModels())) + .catch((res) => { + dispatch(notify({ kind: "error", message: res?.data?.message })); + }); + }; + + return ( + + + + + + Creating Model + + + + + Select a Schema Collections + + Start from one of our many schema collections to better understand + our product + + + + + {templates.map((template, index) => ( + setSelectedTemplateIndex(index)} + sx={{ + border: (theme) => + `1px solid ${ + selectedTemplateIndex === index + ? theme.palette.primary.main + : theme.palette.border + }`, + borderRadius: "4px", + p: 2, + maxWidth: "188px", + alignItems: "flex-start", + flexDirection: "column", + svg: { + color: selectedTemplateIndex === index && "primary.main", + }, + }} + > + {template.icon} + + + ))} + + + + + + + + + + + Your Models for Your {templates[selectedTemplateIndex]?.title} are + Now Built! + + + {/* + + Your Model has the following fields: + + */} + + + + ); +}; diff --git a/src/index.html b/src/index.html index 7501e6a820..a77be48754 100644 --- a/src/index.html +++ b/src/index.html @@ -63,7 +63,7 @@