+
+
スクリーン
+
+
+
+ {screenData.screens.map((screen, index) => (
+
+ ))}
+
+
+
+
+
+
+ {/* Click outside to close dropdown */}
+ {activeDropdown !== -1 && (
+
setActiveDropdown(-1)}
+ />
+ )}
+ {showAddModal &&
setShowAddModel(false)}
+ addScreen={screenActions.addScreen}
+ editIndex={editIndex}
+ editName={editName}
+ selectComponent={selectComponent}
+ updateScreen={screenActions.updateScreen}
+ />}
+ {showTemplateModal && setShowTemplateModal(false)}
+ />}
+
+ )
+}
+
+interface ScreenCardProps {
+ screen: Screen,
+ selected: boolean,
+ setCurScreenIndex: (index: number) => void
+ index: number,
+ activeDropdown: number,
+ setActiveDropdown: (index: number) => void,
+ isLast: boolean,
+ closeDropdown: () => void,
+ deleteScreen: (index: number) => void,
+ startEdit: (index: number, curName: string) => void
+ selectComponent: (index: number) => void
+}
+
+function ScreenCard({
+ screen,
+ selected,
+ setCurScreenIndex,
+ index,
+ activeDropdown,
+ setActiveDropdown,
+ isLast,
+ closeDropdown,
+ deleteScreen,
+ startEdit,
+ selectComponent
+}: ScreenCardProps) {
+
+ const handleSelectScreen = (index: number) => {
+ selectComponent(-1);
+ setCurScreenIndex(index)
+ }
+
+ const handleEditAction = (index: number, name: string) => {
+ startEdit(index, name)
+ closeDropdown()
+ };
+ const handleDeleteAction = (index: number) => {
+ deleteScreen(index);
+ closeDropdown()
+ };
+
+
+ return (
+
+
{ handleSelectScreen(index) }} className="flex items-center p-3 cursor-pointer">
+
+
+
+
+ {activeDropdown === index && (
+
+
+ {!isLast && (
+ <>
+
+
+
+ )}
+
+ )}
+
+
+ )
+}
+
+interface AddScreenModalProps {
+ close: () => void,
+ addScreen: (name: string) => void,
+ editIndex: number,
+ editName: string,
+ updateScreen: (index: number, name: string) => void
+ selectComponent: (index: number) => void
+}
+
+function AddScreenModal({ close, addScreen, editName, editIndex, updateScreen, selectComponent }: AddScreenModalProps) {
+
+ const [newScreenName, setNewScreenName] = useState
(editIndex !== -1 ? editName : "");
+
+ const handleCancelCreate = () => {
+ setNewScreenName("");
+ close();
+ }
+
+ const handleCreateConfirm = () => {
+ selectComponent(-1);
+ if (editIndex === -1) {
+ addScreen(newScreenName);
+ } else {
+ updateScreen(editIndex, newScreenName);
+ }
+ setNewScreenName("");
+ close();
+ }
+
+ return (
+
+
+
+
新しいスクリーンを作成
+
+
+
+
+
+ setNewScreenName(e.target.value)}
+ placeholder="スクリーン名を入力してください"
+ className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
+ autoFocus
+ />
+
+
+
+
+
+
+
+
+
{ e.stopPropagation() }}>
+
+
テンプレートを選択
+
+
+
+
+ setScreenName(e.target.value)}
+ value={screenName}
+ />
+
+
+
+
+
+ {type === "add" &&
}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {activeTabId === "screens" &&
+
+ }
+ {activeTabId === "layer" &&
+
+ }
+ {activeTabId === "components" &&
+
+ }
+ {activeTabId === "tables" &&
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+
+function IconButton({
+ children,
+ id,
+ activeTab,
+ setActiveTab
+}: { children: React.ReactNode, id: string, activeTab: string, setActiveTab: Dispatch> }) {
+ const handleTabClick = () => {
+ if (activeTab === id) {
+ setActiveTab("")
+ } else {
+ setActiveTab(id)
+ }
+ }
+
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/sidebar/tableList.tsx b/src/components/sidebar/tableList.tsx
new file mode 100644
index 0000000..a795ce0
--- /dev/null
+++ b/src/components/sidebar/tableList.tsx
@@ -0,0 +1,598 @@
+import type { useTablesActions, useTablesData } from "../../hooks/useTables";
+import { DataType, translateDataType } from "../../types/table";
+import type { Column, Table } from "../../types/table";
+import { useMemo, useState } from "react"
+import { FiX } from "react-icons/fi";
+import { MdDeleteOutline, MdOutlineDelete, MdOutlineEdit } from "react-icons/md";
+
+interface TalbeListProps {
+ tableData: useTablesData,
+ tableActions: useTablesActions
+}
+
+export function TableList({ tableData, tableActions }: TalbeListProps) {
+
+ const [showAddModal, setShowAddModal] = useState(false);
+ const [editTableIndex, setEditTableIndex] = useState(-1);
+
+ const handleAddTable = () => {
+ setShowAddModal(true);
+ }
+
+ const handleDeleteTable = (e: React.MouseEvent, id: string) => {
+ e.stopPropagation();
+ tableActions.deleteTable(id)
+ }
+
+ return (
+
+
+
テーブル
+
+
+
+ {tableData.tables.map((table, idx) =>
+
{ setEditTableIndex(idx); setShowAddModal(true) }}
+ className={`group relative rounded-xl border transition-all duration-200 hover:border-gray-300 hover:shadow-sm bg-sky-100 border-gray-200 bg-white border-gray-200`}
+ >
+
+
+
+
+
+ )}
+
+
+
+
+
+ {showAddModal &&
{ setEditTableIndex(-1); setShowAddModal(false) }}
+ tables={tableData.tables}
+ editTable={editTableIndex === -1 ? null : tableData.tables[editTableIndex]}
+ addTable={tableActions.addTable}
+ updateTable={tableActions.updateTable}
+ />}
+
+
+
+
{editTable === null ? "新しいテーブルを作成" : "テーブルを編集"}
+
+
+
+ {pageNum == 0 &&
+
+
setTableName(e.target.value)}
+ placeholder="スクリーン名を入力してください"
+ className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
+ autoFocus
+ />
+
+
+
+
+
}
+
+ {pageNum == 1 &&
+
+
+
+
+
+
+
+
+
+
+
}
+
+ {pageNum == 2 &&
+ { setEditColumnIndex(-1); setPageNum(1) }}
+ column={editColumnIndex === -1 ? null : columns[editColumnIndex]}
+ />
+
}
+
+ {pageNum === 3 &&
+ { setEditColumnIndex(-1); setPageNum(1) }}
+ column={editColumnIndex === -1 ? null : columns[editColumnIndex]}
+ tables={tables}
+ tableId={editTable !== null ? editTable.id : ""}
+ />
+
}
+
+
+
+ {columns.length === 0 ?
+
+ まだカラムがありません
+
:
+
+
+
+ 主キー
+
+
+ 名前
+
+
+ 型
+
+
+ 参照テーブル
+
+
+ その他
+
+
+ {columns.map((col, idx) => {
+ if (!col.foreignTableName) {
+ return (
+
+
+
+
+
+ {col.name}
+
+
+ {col.type != "foreign" ? translateDataType(col.type) : ""}
+
+
+
+
+
+
+
+
+ )
+ }
+ return (
+
+
+
+
+
+ {col.name}
+
+
+ {col.foreignTableColumns?.map((col, idx) =>
+
+ {col}
+
+ )}
+
+
+ {getForeignColType(col.foreignTableName, col.foreignTableColumns!).map((type, idx) =>
+
+ {translateDataType(type)}
+
+ )}
+
+
+ {tables.find(table => table.name === col.foreignTableName)?.name ?? "error"}
+
+
+
+
+
+
+ )
+ })}
+
+ }
+
+
+
+ setName(e.target.value)}
+ placeholder="カラム名を入力してください"
+ className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
+ autoFocus
+ />
+
+
+
+ setIsPrimary(e.target.checked)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ setName(e.target.value)}
+ placeholder="カラム名を入力してください"
+ className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
+ autoFocus
+ />
+
+
+
+
+
+
+
+
+ {referencedTableColumns.map((col, idx) =>
+
+
+
+ )}
+
+
+
+
+
+
+