feat(page): Editor modal

editor.planx.uk/src/@planx/components/Page/Editor.tsx

@@ -1,13 +1,25 @@
+import MenuItem from "@mui/material/MenuItem";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { useFormik } from "formik";
 import React from "react";
+import ModalSection from "ui/editor/ModalSection";
+import ModalSectionContent from "ui/editor/ModalSectionContent";
+import RichTextInput from "ui/editor/RichTextInput";
+import SelectInput from "ui/editor/SelectInput";
+import Input from "ui/shared/Input";
+import InputRow from "ui/shared/InputRow";
+import InputRowItem from "ui/shared/InputRowItem";
+import InputRowLabel from "ui/shared/InputRowLabel";
 
-import { EditorProps } from "../ui";
+import { EditorProps, ICONS, InternalNotes, MoreInformation } from "../ui";
 import { Page, parsePage } from "./model";
+import { ProposedAdvertisements } from "./schema/AdvertConsent";
 
 type Props = EditorProps<TYPES.Page, Page>;
 
-export default PageComponent;
+export const PAGE_SCHEMAS = [
+  { name: "Advert consent", schema: ProposedAdvertisements },
+] as const;
 
 function PageComponent(props: Props) {
   const formik = useFormik({
@@ -22,7 +34,75 @@ function PageComponent(props: Props) {
 
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
-      //...
+      <ModalSection>
+        <ModalSectionContent title="Page" Icon={ICONS[TYPES.Page]}>
+          <InputRow>
+            <Input
+              format="large"
+              name="title"
+              value={formik.values.title}
+              placeholder="Title"
+              onChange={formik.handleChange}
+              required
+            />
+          </InputRow>
+          <InputRow>
+            <RichTextInput
+              placeholder="Description"
+              name="description"
+              value={formik.values.description}
+              onChange={formik.handleChange}
+            />
+          </InputRow>
+          <InputRow>
+            <Input
+              format="data"
+              name="fn"
+              value={formik.values.fn}
+              placeholder="Data Field"
+              onChange={formik.handleChange}
+              required
+            />
+          </InputRow>
+          <InputRow>
+            <InputRowLabel>Schema</InputRowLabel>
+            <InputRowItem>
+              <SelectInput
+                value={formik.values.schemaName}
+                onChange={(e) => {
+                  formik.setFieldValue("schemaName", e.target.value);
+                  formik.setFieldValue(
+                    "schema",
+                    PAGE_SCHEMAS.find(
+                      ({ name }) => name === (e.target.value as string),
+                    )?.schema,
+                  );
+                }}
+              >
+                {PAGE_SCHEMAS.map(({ name }) => (
+                  <MenuItem key={name} value={name}>
+                    {name}
+                  </MenuItem>
+                ))}
+              </SelectInput>
+            </InputRowItem>
+          </InputRow>
+        </ModalSectionContent>
+      </ModalSection>
+      <MoreInformation
+        changeField={formik.handleChange}
+        definitionImg={formik.values.definitionImg}
+        howMeasured={formik.values.howMeasured}
+        policyRef={formik.values.policyRef}
+        info={formik.values.info}
+      />
+      <InternalNotes
+        name="notes"
+        value={formik.values.notes}
+        onChange={formik.handleChange}
+      />
     </form>
   );
 }
+
+export default PageComponent;

editor.planx.uk/src/@planx/components/Page/model.ts

@@ -1,10 +1,27 @@
+import { cloneDeep } from "lodash";
+
 import { MoreInformation, parseMoreInformation } from "../shared";
+import { Schema } from "../shared/Schema/model";
+import { PAGE_SCHEMAS } from "./Editor";
+
+export interface PageSchema extends Schema {
+  min: 1;
+  max: 1;
+}
 
 export interface Page extends MoreInformation {
   fn: string;
+  title: string;
+  description?: string;
+  schemaName: string;
+  schema: PageSchema;
 }
 
 export const parsePage = (data: Record<string, any> | undefined): Page => ({
-  fn: data?.fn || "",
+  fn: data?.fn,
+  title: data?.title,
+  description: data?.description,
+  schemaName: data?.schemaName || PAGE_SCHEMAS[0].name,
+  schema: cloneDeep(data?.schema) || PAGE_SCHEMAS[0].schema,
   ...parseMoreInformation(data),
 });

editor.planx.uk/src/@planx/components/Page/schema/AdvertConsent.ts

@@ -0,0 +1,41 @@
+import { PageSchema } from "../model";
+
+export const ProposedAdvertisements: PageSchema = {
+  type: "Proposed advertisements",
+  fields: [
+    {
+      type: "number",
+      data: {
+        title: "How many fascia signs are you applying for?",
+        fn: "fascia",
+        allowNegatives: false,
+      },
+    },
+    {
+      type: "number",
+      data: {
+        title: "How many projecting or hanging signs are you applying for?",
+        fn: "projecting",
+        allowNegatives: false,
+      },
+    },
+    {
+      type: "number",
+      data: {
+        title: "How many hoardings are you applying for?",
+        fn: "hoarding",
+        allowNegatives: false,
+      },
+    },
+    {
+      type: "number",
+      data: {
+        title: "How many other advertisements are you applying for?",
+        fn: "other",
+        allowNegatives: false,
+      },
+    },
+  ],
+  min: 1,
+  max: 1,
+} as const;