Use i18n keys to store cardinality (#231)

drawdb-io · Sep 5, 2024 · 6cd0a69 · 6cd0a69
1 parent 7b9d9c2
commit 6cd0a69
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 12 deletions.
diff --git a/src/components/EditorCanvas/Relationship.jsx b/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";

diff --git a/src/components/EditorSidePanel/RelationshipsTab/RelationshipInfo.jsx b/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}

diff --git a/src/data/constants.js b/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 = {

diff --git a/src/data/heroDiagram.js b/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",
  },
  ],
 };
diff --git a/src/utils/exportAs/mermaid.js b/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 "--";