From 3e7d1ac6f61bd3d7dc87e4d5627534f0f46f5086 Mon Sep 17 00:00:00 2001
From: Kratik <kratikbohra5@gmail.com>
Date: Mon, 17 Mar 2025 03:20:59 +0530
Subject: [PATCH] Toggle datatypes visibility (#366)

* showDatatype setting added in view control panel

* removed shortcut

can be discussed later

* fixed linting issue and made sure the condition check is above div element

in table.jsx code
in the else part im directly returning the element by keeping a check  for settings.showDataTypes?
which helps to not add empty element

for setSetting issue
I used the similar code used just above the snippet and modified it
---
 src/components/EditorCanvas/Table.jsx        | 11 ++++++-----
 src/components/EditorHeader/ControlPanel.jsx |  9 +++++++++
 src/context/SettingsContext.jsx              |  1 +
 src/i18n/locales/en.js                       |  1 +
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/EditorCanvas/Table.jsx b/src/components/EditorCanvas/Table.jsx
index 1e656f9..91600b3 100644
--- a/src/components/EditorCanvas/Table.jsx
+++ b/src/components/EditorCanvas/Table.jsx
@@ -354,7 +354,7 @@ export default function Table(props) {
               icon={<IconMinus />}
               onClick={() => deleteField(fieldData, tableData.id)}
             />
-          ) : (
+          ) : settings.showDataTypes ? (
             <div className="flex gap-1 items-center">
               {fieldData.primary && <IconKeyStroked />}
               {!fieldData.notNull && <span>?</span>}
@@ -362,13 +362,14 @@ export default function Table(props) {
                 {fieldData.type +
                   ((dbToTypes[database][fieldData.type].isSized ||
                     dbToTypes[database][fieldData.type].hasPrecision) &&
-                  fieldData.size &&
-                  fieldData.size !== ""
-                    ? "(" + fieldData.size + ")"
+                    fieldData.size &&
+                    fieldData.size !== ""
+                    ? `(${fieldData.size})`
                     : "")}
               </span>
             </div>
-          )}
+          ) : null
+          }
         </div>
       </div>
     );
diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx
index 40afb06..47ed69d 100644
--- a/src/components/EditorHeader/ControlPanel.jsx
+++ b/src/components/EditorHeader/ControlPanel.jsx
@@ -1211,6 +1211,15 @@ export default function ControlPanel({
         function: resetView,
         shortcut: "Ctrl+R",
       },
+      show_datatype: {
+        state: settings.showDataTypes ? (
+          <i className="bi bi-toggle-on" />
+        ) : (
+          <i className="bi bi-toggle-off" />
+        ),
+        function: () =>
+          setSettings((prev) => ({ ...prev, showDataTypes: !prev.showDataTypes })),
+      },
       show_grid: {
         state: settings.showGrid ? (
           <i className="bi bi-toggle-on" />
diff --git a/src/context/SettingsContext.jsx b/src/context/SettingsContext.jsx
index 3c70f6d..19cd69e 100644
--- a/src/context/SettingsContext.jsx
+++ b/src/context/SettingsContext.jsx
@@ -5,6 +5,7 @@ const defaultSettings = {
   strictMode: false,
   showFieldSummary: true,
   showGrid: true,
+  showDataTypes: true,
   mode: "light",
   autosave: true,
   panning: true,
diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js
index f4e6886..22d0f54 100644
--- a/src/i18n/locales/en.js
+++ b/src/i18n/locales/en.js
@@ -49,6 +49,7 @@ const en = {
     field_details: "Field details",
     reset_view: "Reset view",
     show_grid: "Show grid",
+    show_datatype: "Show datatype",
     show_cardinality: "Show cardinality",
     theme: "Theme",
     light: "Light",