WIP - starting to implement I18n

api/rpk-api/firm/contract/models.py

@@ -5,8 +5,9 @@ from uuid import UUID
 
 from beanie import PydanticObjectId
 from pydantic import BaseModel, Field
+from pydantic.json_schema import SkipJsonSchema
 
-from firm.core.models import CrudDocument, RichtextSingleline, RichtextMultiline, DictionaryEntry
+from firm.core.models import CrudDocument, RichtextSingleline, RichtextMultiline, DictionaryEntry, ForeignKey
 from firm.core.filter import Filter, FilterSchema
 from firm.entity.models import Entity
 
@@ -25,27 +26,10 @@ class ContractDraftStatus(str, Enum):
 
 
 class DraftParty(BaseModel):
-    entity_id: PydanticObjectId = Field(
-        foreignKey={
-            "reference": {
-                "resource": "entities",
-                "schema": "Entity",
-            }
-        },
-        default="",
-        title="Partie"
-    )
+    entity_id: PydanticObjectId = ForeignKey("entities", "Entity", default="", title="Partie")
+    entity: SkipJsonSchema[Entity] = Field(default=None, exclude=True, )
     part: str = Field(title="Rôle")
-    representative_id: PydanticObjectId = Field(
-        foreignKey={
-            "reference": {
-                "resource": "entities",
-                "schema": "Entity",
-            }
-        },
-        default="",
-        title="Représentant"
-    )
+    representative_id: PydanticObjectId = ForeignKey("entities", "Entity", default="", title="Représentant")
 
     class Config:
         title = 'Partie'
@@ -74,14 +58,10 @@ class ProvisionGenuine(BaseModel):
 
 class ContractProvisionTemplateReference(BaseModel):
     type: Literal['template'] = ContractProvisionType.template
-    provision_template_id: PydanticObjectId = Field(
-        foreignKey={
-            "reference": {
-                "resource": "templates/provisions",
-                "schema": "ProvisionTemplate",
-                "displayedFields": ['title', 'body']
-            },
-        },
+    provision_template_id: PydanticObjectId = ForeignKey(
+        "templates/provisions",
+        "ProvisionTemplate",
+        displayed_fields=['title', 'body'],
         props={"parametrized": True},
         default="",
         title="Template de clause"
@@ -173,6 +153,9 @@ class ContractDraft(CrudDocument):
         update = ContractDraftUpdateStatus(status=status)
         await self.update(db, self, update)
 
+    def compute_label(self) -> str:
+        return f"{self.name} - {self.title}"
+
 class Contract(CrudDocument):
     """
     Contrat publié. Les contrats ne peuvent pas être modifiés.

api/rpk-api/firm/core/models.py

@@ -114,6 +114,20 @@ def RichtextSingleline(*args, **kwargs):
     return Field(*args, **kwargs)
 
 
+def ForeignKey(resource, schema, displayed_fields=None, *args, **kwargs):
+    kwargs["foreignKey"] = {
+        "reference": {
+            "resource": resource,
+            "schema": schema,
+        }
+    }
+
+    if displayed_fields:
+        kwargs["foreignKey"]["reference"]["displayedFields"] = displayed_fields
+
+    return Field(*args, **kwargs)
+
+
 class DictionaryEntry(BaseModel):
     key: str
     value: str = ""

gui/rpk-gui/package.json

@@ -31,11 +31,15 @@
     "@tiptap/extension-underline": "^2.11.7",
     "@tiptap/react": "^2.11.7",
     "@tiptap/starter-kit": "^2.11.7",
+    "i18next": "^25.0.1",
+    "i18next-browser-languagedetector": "^8.0.5",
+    "i18next-http-backend": "^3.0.2",
     "lodash": "^4.17.21",
     "mui-tiptap": "^1.18.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.30.0",
+    "react-i18next": "^15.5.1",
     "react-router": "^7.0.2"
   },
   "devDependencies": {

gui/rpk-gui/public/locales/en/common.json

@@ -0,0 +1,7 @@
+{
+  "pages": {
+    "login": {
+      "title": "Sign in to your account"
+    }
+  }
+}

gui/rpk-gui/public/locales/fr/common.json

@@ -0,0 +1,7 @@
+{
+  "pages": {
+    "login": {
+      "title": "S'authentifier"
+    }
+  }
+}

gui/rpk-gui/src/App.tsx

@@ -1,4 +1,5 @@
-import { Authenticated, Refine } from "@refinedev/core";
+import { Authenticated, I18nProvider, Refine } from "@refinedev/core";
+import { useTranslation } from "react-i18next";
 
 import { RefineSnackbarProvider, useNotificationProvider } from "@refinedev/mui";
 
@@ -12,8 +13,8 @@ import routerBindings, {
   UnsavedChangesNotifier,
 } from "@refinedev/react-router";
 import { BrowserRouter, Outlet, Route, Routes } from "react-router";
-import { authProvider } from "./providers/auth-provider";
-import { dataProvider } from "./providers/data-provider";
+import authProvider from "./providers/auth-provider";
+import dataProvider from "./providers/data-provider";
 import { ColorModeContextProvider } from "./contexts/color-mode";
 import { Login } from "./components/auth/Login";
 import { Register } from "./components/auth/Register";
@@ -26,6 +27,15 @@ import { FirmRoutes } from "./pages/firm";
 import rpcTheme from "./theme";
 
 function App() {
+
+  const { t, i18n } = useTranslation();
+
+  const i18nProvider: I18nProvider = {
+    translate: (key: string, options?: any) => t(key, options) as string,
+    changeLocale: (lang: string) => i18n.changeLanguage(lang),
+    getLocale: () => i18n.language,
+  };
+
   return (
     <BrowserRouter>
       <ThemeProvider theme={rpcTheme}>
@@ -36,6 +46,7 @@ function App() {
             <Refine
               authProvider={authProvider}
               dataProvider={dataProvider}
+              i18nProvider={i18nProvider}
               notificationProvider={useNotificationProvider}
               routerProvider={routerBindings}
               options={{

gui/rpk-gui/src/components/header/index.tsx

@@ -18,10 +18,17 @@ import { FirmContext } from "../../contexts/FirmContext";
 import { Logout } from "../auth/Logout";
 import { IUser } from "../../interfaces";
 import MuiLink from "@mui/material/Link";
+import { useTranslation } from "react-i18next";
+import { useTranslation as useTranslationR } from "@refinedev/core";
+import { useSetLocale } from "@refinedev/core";
 
 export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
   sticky = true,
 }) => {
+  const { i18n } = useTranslation();
+  const { getLocale, changeLocale } = useTranslationR();
+  const currentLocale = getLocale();
+
   const collapsed = false;
   const { mode, setMode } = useContext(ColorModeContext);
   const { currentFirm } = useContext(FirmContext);
@@ -37,6 +44,16 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
     setAnchorEl(null);
   };
 
+  const [anchorIn, setAnchorIn] = React.useState<null | HTMLElement>(null);
+  const openI18nMenu = Boolean(anchorEl);
+  const handleOpenI18nMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorIn(event.currentTarget);
+  }
+  const handleCloseI18nMenu = () => {
+    setAnchorIn(null);
+  };
+
+
   return (
     <AppBar position={sticky ? "sticky" : "relative"}>
       <Toolbar>
@@ -132,7 +149,43 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
             {!user && (
               <Link to="/auth/login"><Button>Login</Button></Link>
             )}
-
+            <Button
+              id="i18n-button"
+              aria-controls={openI18nMenu ? 'i18n-menu' : undefined}
+              aria-haspopup="true"
+              aria-expanded={openI18nMenu ? 'true' : undefined}
+              onClick={handleOpenI18nMenu}>
+              <Typography
+                sx={{
+                  display: {
+                    xs: "none",
+                    sm: "inline-block",
+                  },
+                }}
+                variant="subtitle2"
+              >
+                {currentLocale}
+              </Typography>&nbsp;
+              <Avatar src={`/images/flags/${currentLocale}.svg`} alt={currentLocale}/>
+            </Button>
+            <Menu
+              id="i18n-menu"
+              open={openI18nMenu}
+              anchorEl={anchorIn}
+              onClose={handleCloseI18nMenu}
+            >
+              {[...(i18n.languages || [])].sort().map((lang: string) => (
+                <MenuItem
+                  key={lang}
+                  onClick={() => changeLocale(lang)}
+                >
+                  <span style={{ marginRight: 8 }}>
+                    <Avatar src={`/images/flags/${lang}.svg`} alt={lang}/>
+                  </span>
+                  {lang === "en" ? "English" : "Français"}
+                </MenuItem>
+              ))}
+            </Menu>
           </Stack>
         </Stack>
       </Toolbar>

gui/rpk-gui/src/i18n.tsx

@@ -0,0 +1,20 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import Backend from "i18next-http-backend";
+import detector from "i18next-browser-languagedetector";
+
+i18n
+  .use(Backend)
+  .use(detector)
+  .use(initReactI18next)
+  .init({
+    supportedLngs: ["en", "fr"],
+    backend: {
+      loadPath: "/locales/{{lng}}/{{ns}}.json", // locale files path
+    },
+    ns: ["common"],
+    defaultNS: "common",
+    fallbackLng: ["en", "fr"],
+  });
+
+export default i18n;

gui/rpk-gui/src/index.tsx

@@ -2,12 +2,15 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 
 import App from "./App";
+import "./i18n";
 
 const container = document.getElementById("root") as HTMLElement;
 const root = createRoot(container);
 
 root.render(
   <React.StrictMode>
-    <App />
+    <React.Suspense fallback="loading">
+      <App />
+    </React.Suspense>
   </React.StrictMode>
 );

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 = () => {
-  return <New<Draft> resource={`contracts/drafts`} schemaName={"ContractDraft"} />
+type ForeignKeySubSchema = ForeignKeySchema & {
+  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,13 @@
-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";
+import { DeleteButton } from "@refinedev/mui";
 
 type EditProps = {
   resource: string,
@@ -17,13 +22,26 @@ const Edit = <T,>(props: EditProps) => {
   const { record_id } = useParams();
 
   return (
-    <CrudForm
-      schemaName={schemaName}
-      uiSchema={uiSchema}
-      resourceBasePath={resourceBasePath}
-      resource={resource}
-      id={record_id}
-      />
+    <>
+      <CrudForm
+        schemaName={schemaName}
+        uiSchema={uiSchema}
+        resourceBasePath={resourceBasePath}
+        resource={resource}
+        id={record_id}
+      >
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}>
+          <Button type='submit' variant="contained" size="large"><SaveIcon />Save</Button>
+          <DeleteButton variant="contained" size="large" color="error" recordItemId={record_id}/>
+        </Stack>
+      </CrudForm>
+    </>
   )
 }
 

gui/rpk-gui/src/providers/auth-provider.tsx

@@ -9,7 +9,7 @@ const DISCORD_SCOPES = { "scopes": "identify email" }
 
 const DEFAULT_LOGIN_REDIRECT = "/hub"
 
-export const authProvider: AuthProvider = {
+const authProvider: AuthProvider = {
   login: async ({ providerName, email, password }) => {
     const to_param = findGetParameter("to");
     const redirect = to_param === null ? DEFAULT_LOGIN_REDIRECT : to_param
@@ -199,3 +199,5 @@ function findGetParameter(parameterName: string) {
         });
     return result;
 }
+
+export default authProvider;

gui/rpk-gui/src/providers/data-provider.tsx

@@ -2,7 +2,7 @@ import type { DataProvider, HttpError } from "@refinedev/core";
 
 const API_URL = "/api/v1";
 
-export const dataProvider: DataProvider = {
+const dataProvider: DataProvider = {
   getOne: async ({ resource, id, meta }) => {
     if (id === "") {
       return { data: undefined };
@@ -96,7 +96,7 @@ export const dataProvider: DataProvider = {
     };
   },
   create: async ({ resource, variables }) => {
-    const response = await fetch(`${API_URL}/${resource}`, {
+    const response = await fetch(`${API_URL}/${resource}/`, {
       method: "POST",
       body: JSON.stringify(variables),
       headers: {
@@ -148,4 +148,6 @@ export const dataProvider: DataProvider = {
   // deleteMany: () => { /* ... */ },
   // updateMany: () => { /* ... */ },
   // custom: () => { /* ... */ },
-};
+};
+
+export default dataProvider;