drawdb-io/drawdb
1
0
Fork 0
mirror of https://github.com/drawdb-io/drawdb.git synced 2025-05-25 11:09:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add button to toggle showDataType

Browse Source
This commit is contained in:
KRATIK_BOHRA 2025-02-25 13:48:09 +05:30
parent 1e6aeca05e
commit 66213bf346
1 changed files with 38 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/EditorCanvas/Table.jsx
View File

@ -22,6 +22,8 @@ import { isRtl } from "../../i18n/utils/rtl";
import i18n from "../../i18n/i18n"; import i18n from "../../i18n/i18n";
export default function Table(props) { export default function Table(props) {
// show data type state
const [showDataType, setShowDataType] = useState(true);
const [hoveredField, setHoveredField] = useState(-1); const [hoveredField, setHoveredField] = useState(-1);
const { database } = useDiagram(); const { database } = useDiagram();
const { const {
@ -76,16 +78,14 @@ export default function Table(props) {
<div <div
onDoubleClick={openEditor} onDoubleClick={openEditor}
className={`border-2 hover:border-dashed hover:border-blue-500 className={`border-2 hover:border-dashed hover:border-blue-500
select-none rounded-lg w-full ${ select-none rounded-lg w-full ${settings.mode === "light"
settings.mode === "light" ? "bg-zinc-100 text-zinc-800"
? "bg-zinc-100 text-zinc-800" : "bg-zinc-800 text-zinc-200"
: "bg-zinc-800 text-zinc-200" } ${selectedElement.id === tableData.id &&
} ${ selectedElement.element === ObjectType.TABLE
selectedElement.id === tableData.id && ? "border-solid border-blue-500"
selectedElement.element === ObjectType.TABLE : "border-zinc-500"
? "border-solid border-blue-500" }`}
: "border-zinc-500"
}`}
style={{ direction: "ltr" }} style={{ direction: "ltr" }}
> >
<div <div
@ -93,15 +93,24 @@ export default function Table(props) {
style={{ backgroundColor: tableData.color }} style={{ backgroundColor: tableData.color }}
/> />
<div <div
className={`overflow-hidden font-bold h-[40px] flex justify-between items-center border-b border-gray-400 ${ className={`overflow-hidden font-bold h-[40px] flex justify-between items-center border-b border-gray-400 ${settings.mode === "light" ? "bg-zinc-200" : "bg-zinc-900"
settings.mode === "light" ? "bg-zinc-200" : "bg-zinc-900" }`}
}`}
> >
<div className=" px-3 overflow-hidden text-ellipsis whitespace-nowrap"> <div className=" px-3 overflow-hidden text-ellipsis whitespace-nowrap">
{tableData.name} {tableData.name}
</div> </div>
<div className="hidden group-hover:block"> <div className="hidden group-hover:block">
<div className="flex justify-end items-center mx-2"> <div className="flex justify-end items-center mx-2">
<Button
type="tertiary"
size="small"
style={{
backgroundColor: "#808080b5",
color: "black",
marginRight: "6px",
}}
onClick={() => setShowDataType(!showDataType)}
/>
<Button <Button
icon={<IconEdit />} icon={<IconEdit />}
size="small" size="small"
@ -126,9 +135,8 @@ export default function Table(props) {
</div> </div>
<div> <div>
<strong <strong
className={`${ className={`${tableData.indices.length === 0 ? "" : "block"
tableData.indices.length === 0 ? "" : "block" }`}
}`}
> >
{t("indices")}: {t("indices")}:
</strong>{" "} </strong>{" "}
@ -139,11 +147,10 @@ export default function Table(props) {
{tableData.indices.map((index, k) => ( {tableData.indices.map((index, k) => (
<div <div
key={k} key={k}
className={`flex items-center my-1 px-2 py-1 rounded ${ className={`flex items-center my-1 px-2 py-1 rounded ${settings.mode === "light"
settings.mode === "light" ? "bg-gray-100"
? "bg-gray-100" : "bg-zinc-800"
: "bg-zinc-800" }`}
}`}
> >
<i className="fa-solid fa-thumbtack me-2 mt-1 text-slate-500"></i> <i className="fa-solid fa-thumbtack me-2 mt-1 text-slate-500"></i>
<div> <div>
@ -202,8 +209,8 @@ export default function Table(props) {
{e.type + {e.type +
((dbToTypes[database][e.type].isSized || ((dbToTypes[database][e.type].isSized ||
dbToTypes[database][e.type].hasPrecision) && dbToTypes[database][e.type].hasPrecision) &&
e.size && e.size &&
e.size !== "" e.size !== ""
? "(" + e.size + ")" ? "(" + e.size + ")"
: "")} : "")}
</p> </p>
@ -282,11 +289,10 @@ export default function Table(props) {
function field(fieldData, index) { function field(fieldData, index) {
return ( return (
<div <div
className={`${ className={`${index === tableData.fields.length - 1
index === tableData.fields.length - 1 ? ""
? "" : "border-b border-gray-400"
: "border-b border-gray-400" } group h-[36px] px-2 py-1 flex justify-between items-center gap-1 w-full overflow-hidden`}
} group h-[36px] px-2 py-1 flex justify-between items-center gap-1 w-full overflow-hidden`}
onPointerEnter={(e) => { onPointerEnter={(e) => {
if (!e.isPrimary) return; if (!e.isPrimary) return;
@ -308,9 +314,8 @@ export default function Table(props) {
}} }}
> >
<div <div
className={`${ className={`${hoveredField === index ? "text-zinc-400" : ""
hoveredField === index ? "text-zinc-400" : "" } flex items-center gap-2 overflow-hidden`}
} flex items-center gap-2 overflow-hidden`}
> >
<button <button
className="flex-shrink-0 w-[10px] h-[10px] bg-[#2f68adcc] rounded-full" className="flex-shrink-0 w-[10px] h-[10px] bg-[#2f68adcc] rounded-full"
@ -362,8 +367,8 @@ export default function Table(props) {
{fieldData.type + {fieldData.type +
((dbToTypes[database][fieldData.type].isSized || ((dbToTypes[database][fieldData.type].isSized ||
dbToTypes[database][fieldData.type].hasPrecision) && dbToTypes[database][fieldData.type].hasPrecision) &&
fieldData.size && fieldData.size &&
fieldData.size !== "" fieldData.size !== ""
? "(" + fieldData.size + ")" ? "(" + fieldData.size + ")"
: "")} : "")}
</span> </span>