Use i18n keys to store cardinality (#231)

src/components/EditorCanvas/Relationship.jsx

@@ -2,26 +2,32 @@ import { useRef } from "react";
 import { Cardinality, ObjectType, Tab } from "../../data/constants";
 import { calcPath } from "../../utils/calcPath";
 import { useDiagram, useSettings, useLayout, useSelect } from "../../hooks";
+import { useTranslation } from "react-i18next";
 
 export default function Relationship({ data }) {
   const { settings } = useSettings();
   const { tables } = useDiagram();
   const { layout } = useLayout();
   const { selectedElement, setSelectedElement } = useSelect();
+  const { t } = useTranslation();
   const pathRef = useRef();
 
   let cardinalityStart = "1";
   let cardinalityEnd = "1";
 
   switch (data.cardinality) {
+    // the translated values are to ensure backwards compatibility
+    case t(Cardinality.MANY_TO_ONE):
     case Cardinality.MANY_TO_ONE:
       cardinalityStart = "n";
       cardinalityEnd = "1";
       break;
+    case t(Cardinality.ONE_TO_MANY):
     case Cardinality.ONE_TO_MANY:
       cardinalityStart = "1";
       cardinalityEnd = "n";
       break;
+    case t(Cardinality.ONE_TO_ONE):
     case Cardinality.ONE_TO_ONE:
       cardinalityStart = "1";
       cardinalityEnd = "1";

src/components/EditorSidePanel/RelationshipsTab/RelationshipInfo.jsx

@@ -190,7 +190,7 @@ export default function RelationshipInfo({ data }) {
         <div className="font-semibold my-1">{t("cardinality")}:</div>
         <Select
           optionList={Object.values(Cardinality).map((v) => ({
-            label: v,
+            label: t(v),
             value: v,
           }))}
           value={data.cardinality}

src/data/constants.js

@@ -1,5 +1,3 @@
-import i18n from "../i18n/i18n";
-
 export const tableThemes = [
   "#f03c3c",
   "#ff4f81",
@@ -31,9 +29,9 @@ export const tableFieldHeight = 36;
 export const tableColorStripHeight = 7;
 
 export const Cardinality = {
-  ONE_TO_ONE: i18n.t("one_to_one"),
-  ONE_TO_MANY: i18n.t("one_to_many"),
-  MANY_TO_ONE: i18n.t("many_to_one"),
+  ONE_TO_ONE: "one_to_one",
+  ONE_TO_MANY: "one_to_many",
+  MANY_TO_ONE: "many_to_one",
 };
 
 export const Constraint = {

src/data/heroDiagram.js

@@ -121,21 +121,21 @@ export const diagram = {
       startFieldId: 1,
       endTableId: 0,
       endFieldId: 0,
-      cardinality: "Many to one",
+      cardinality: "many_to_one",
     },
     {
       startTableId: 2,
       startFieldId: 2,
       endTableId: 1,
       endFieldId: 0,
-      cardinality: "One to one",
+      cardinality: "one_to_one",
     },
     {
       startTableId: 2,
       startFieldId: 1,
       endTableId: 3,
       endFieldId: 0,
-      cardinality: "Many to one",
+      cardinality: "many_to_one",
     },
   ],
 };

src/utils/exportAs/mermaid.js

@@ -1,13 +1,18 @@
+import { Cardinality } from "../../data/constants";
 import { dbToTypes } from "../../data/datatypes";
+import i18n from "../../i18n/i18n";
 
 export function jsonToMermaid(obj) {
   function getMermaidRelationship(relationship) {
     switch (relationship) {
-      case "One to one":
+      case i18n.t(Cardinality.ONE_TO_ONE):
+      case Cardinality.ONE_TO_ONE:
         return "||--||";
-      case "One to many":
+      case i18n.t(Cardinality.MANY_TO_ONE_TO_ONE):
+      case Cardinality.MANY_TO_ONE:
         return "||--o{";
-      case "Many to one":
+      case i18n.t(Cardinality.ONE_TO_MANY):
+      case Cardinality.ONE_TO_MANY:
         return "}o--||";
       default:
         return "--";