Implementing Contract creation on draft page

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

@@ -1,7 +1,7 @@
-import { Route, Routes } from "react-router";
+import { Navigate, Route, Routes, useParams } from "react-router";
 import { CircularProgress } from "@mui/material";
 import React, { useContext, useState } from "react";
-import { useOne } from "@refinedev/core";
+import { useOne, useTranslation } from "@refinedev/core";
 import { BaseForm } from "../../lib/crud/components/base-form";
 import { ForeignKeyReference, ForeignKeySchema } from "../../lib/crud/components/widgets/foreign-key";
 
@@ -9,6 +9,8 @@ import { FirmContext } from "../../contexts/FirmContext";
 import List from "./base-page/List";
 import Edit from "./base-page/Edit";
 import New from "./base-page/New";
+import { Contract } from "./ContractRoutes";
+import dayjs from "dayjs";
 
 type Draft = {
   id: string,
@@ -33,7 +35,63 @@ const ListDraft = () => {
 }
 
 const EditDraft = () => {
-  return <Edit<Draft> resource={`contracts/drafts`} schemaName={"ContractDraft"} />
+  const { currentFirm } = useContext(FirmContext);
+  const { record_id } = useParams();
+  const resourceBasePath = `firm/${currentFirm.instance}/${currentFirm.firm}`
+
+  const { data, isLoading } = useOne({
+    resource: `${resourceBasePath}/contracts/drafts`,
+    id: record_id
+  })
+
+  if (isLoading) {
+    return <CircularProgress />
+  }
+
+  if (!data?.data) {
+    return <Navigate to="../" />
+  }
+
+  const draft = data?.data
+  const readOnly = draft.status === "published";
+
+  const uiSchema = {
+    "ui:readonly":  readOnly
+  }
+
+  return (
+    <>
+      <Edit<Draft> resource={"contracts/drafts"} schemaName={"ContractDraft"} uiSchema={uiSchema} />
+      <ContractCreate draft={draft}></ContractCreate>
+    </>
+  )
+}
+
+const ContractCreate = (props: { draft: any}) => {
+  const { translate: t } = useTranslation();
+  const { draft } = props;
+
+  if (draft.status === "published") {
+    return <h4>{t("resource.draft.already_published") }</h4>
+  }
+  if (draft.status === "in_progress") {
+    return (
+      <>
+        <h4>{ t("resource.draft.todo") + ":" }</h4>
+        <ul>{ draft.todo.map((item: any) => <li>{ item }</li>) }</ul>
+      </>
+    )
+  }
+  return <New<Contract>
+    resource={"contracts"}
+    schemaName={"Contract"}
+    defaultValue={{
+      date: dayjs().format("YYYY-MM-DD"),
+      location: "Los Santos, SA",
+      draft_id: draft.id
+    }}
+    uiSchema={{ draft_id: { 'ui:widget': 'hidden' } }}
+  />
 }
 
 type ForeignKeySubSchema = ForeignKeySchema & {