Prefilled drafts

gui/rpk-gui/src/lib/crud/components/base-form.tsx

@@ -4,6 +4,7 @@ import { RegistryFieldsType, RegistryWidgetsType, RJSFSchema, UiSchema } from "@
 import CrudTextWidget from "./widgets/crud-text-widget";
 import UnionEnumField from "./fields/union-enum";
 import { ResourceContext } from "../contexts/ResourceContext";
+import { ReactNode } from "react";
 
 type BaseFormProps = {
   schema: RJSFSchema,
@@ -12,6 +13,7 @@ type BaseFormProps = {
   onChange?: (data: any) => void,
   uiSchema?: UiSchema,
   formData?: any,
+  children?: ReactNode
 }
 
 export const customWidgets: RegistryWidgetsType = {
@@ -23,7 +25,7 @@ export const customFields: RegistryFieldsType = {
 }
 
 export const BaseForm: React.FC<BaseFormProps> = (props) => {
-  const { schema, uiSchema, resourceBasePath, formData, onSubmit, onChange } = props;
+  const { schema, uiSchema, resourceBasePath, formData, children, onSubmit, onChange } = props;
 
   return (
     <ResourceContext.Provider value={{basePath: resourceBasePath}} >
@@ -37,6 +39,7 @@ export const BaseForm: React.FC<BaseFormProps> = (props) => {
         widgets={customWidgets}
         fields={customFields}
         onChange={(e, id) => onChange != undefined && onChange(e.formData)}
+        children={children}
       />
     </ResourceContext.Provider>
   )

gui/rpk-gui/src/lib/crud/components/crud-form.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import { CircularProgress } from "@mui/material";
 import { useForm } from "@refinedev/core";
 import { UiSchema } from "@rjsf/utils";
@@ -12,11 +12,12 @@ type CrudFormProps = {
   resource: string,
   id?: string,
   onSuccess?: (data: any) => void,
-  defaultValue?: any
+  defaultValue?: any,
+  children?: ReactNode
 }
 
 export const CrudForm: React.FC<CrudFormProps> = (props) => {
-  const { schemaName, uiSchema, resourceBasePath="" ,resource, id, onSuccess, defaultValue } = props;
+  const { schemaName, uiSchema, resourceBasePath="" ,resource, id, onSuccess, defaultValue, children } = props;
 
   const { onFinish, query, formLoading } = useForm({
     resource: resourceBasePath == "" ? resource : `${resourceBasePath}/${resource}`,
@@ -57,6 +58,7 @@ export const CrudForm: React.FC<CrudFormProps> = (props) => {
       onSubmit={
         (data: any) => onFinish(data)
       }
+      children={children}
     />
   )
 }

gui/rpk-gui/src/pages/firm/DraftRoutes.tsx

@@ -1,4 +1,11 @@
 import { Route, Routes } from "react-router";
+import { CircularProgress } from "@mui/material";
+import React, { useContext, useState } from "react";
+import { useOne } from "@refinedev/core";
+import { BaseForm } from "../../lib/crud/components/base-form";
+import { ForeignKeyReference, ForeignKeySchema } from "../../lib/crud/components/widgets/foreign-key";
+
+import { FirmContext } from "../../contexts/FirmContext";
 import List from "./base-page/List";
 import Edit from "./base-page/Edit";
 import New from "./base-page/New";
@@ -29,6 +36,79 @@ const EditDraft = () => {
   return <Edit<Draft> resource={`contracts/drafts`} schemaName={"ContractDraft"} />
 }
 
-const CreateDraft = () => {
+type ForeignKeySubSchema = ForeignKeySchema & {
-  return <New<Draft> resource={`contracts/drafts`} schemaName={"ContractDraft"} />
+  properties: { [key: string]: { foreignKey: { reference: ForeignKeyReference } } }
+}
+
+const CreateDraft = () => {
+  const [chosenDraft, setChosenDraft] = useState<string|null>(null)
+  const { currentFirm } = useContext(FirmContext);
+  const resourceBasePath = `firm/${currentFirm.instance}/${currentFirm.firm}`
+  const templateFieldSchema: ForeignKeySubSchema = {
+    type: "object",
+    properties: {
+      template_id: {
+        type: "string",
+        title: "Find a template",
+        foreignKey: {
+          reference: {
+            resource: "templates/contracts",
+            schema: "ContractTemplate"
+          }
+        }
+      }
+    },
+  };
+
+  const templateForm = (
+    <BaseForm
+      schema={templateFieldSchema}
+      formData={{template_id: chosenDraft}}
+      resourceBasePath={resourceBasePath}
+      onChange={(data) => {
+        const { template_id } = data;
+        setChosenDraft(template_id);
+      }}
+    >
+      &nbsp;
+    </BaseForm>
+  )
+
+  if (chosenDraft !== null) {
+    return (
+      <>
+        {templateForm}
+        <CreateDraftFromTemplate template_id={chosenDraft}/>
+      </>
+    )
+  }
+
+  return (
+    <>
+      {templateForm}
+      <New<Draft> resource={`contracts/drafts`} schemaName={"ContractDraft"} />
+    </>
+  )
+}
+
+const CreateDraftFromTemplate = (props: { template_id: string }) => {
+  const { template_id } = props;
+  const { currentFirm } = useContext(FirmContext);
+  const resourceBasePath = `firm/${currentFirm.instance}/${currentFirm.firm}`
+  const resource = "templates/contracts"
+  const { data, isLoading } = useOne({
+    resource: `${resourceBasePath}/${resource}`,
+    id: template_id
+  });
+
+  if (isLoading || data === undefined) {
+    return <CircularProgress />
+  }
+
+  let template = { ...data.data };
+  template.provisions = data.data.provisions.map((item: any) => {
+    return { provision: {type: "template", provision_template_id: item.provision_template_id} }
+  })
+
+  return <New<Draft> resource={`contracts/drafts`} schemaName={"ContractDraft"} defaultValue={ template }/>
 }

gui/rpk-gui/src/pages/firm/base-page/Edit.tsx

@@ -1,8 +1,12 @@
-import { CrudForm } from "../../../lib/crud/components/crud-form";
 import { UiSchema } from "@rjsf/utils";
 import { useParams } from "react-router";
 import { useContext } from "react";
+import { Button } from "@mui/material";
+import DeleteIcon from '@mui/icons-material/Delete';
+import SaveIcon from '@mui/icons-material/Save';
 import { FirmContext } from "../../../contexts/FirmContext";
+import { CrudForm } from "../../../lib/crud/components/crud-form";
+import Stack from "@mui/material/Stack";
 
 type EditProps = {
   resource: string,
@@ -17,13 +21,26 @@ const Edit = <T,>(props: EditProps) => {
   const { record_id } = useParams();
 
   return (
+    <>
       <CrudForm
         schemaName={schemaName}
         uiSchema={uiSchema}
         resourceBasePath={resourceBasePath}
         resource={resource}
         id={record_id}
-      />
+      >
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}>
+          <Button variant="contained" size="large"><SaveIcon /></Button>
+          <Button variant="contained" size="large" color="error"><DeleteIcon /></Button>
+        </Stack>
+      </CrudForm>
+    </>
   )
 }