984 lines
33 KiB
TypeScript
984 lines
33 KiB
TypeScript
import { useState, useCallback, useEffect, useRef } from 'react'
|
||
import { Button, Dialog, Input, Notification, toast } from '@/components/ui'
|
||
import Container from '@/components/shared/Container'
|
||
import AdaptableCard from '@/components/shared/AdaptableCard'
|
||
import { getDataSources } from '@/services/data-source.service'
|
||
import type { DataSourceDto } from '@/proxy/data-source'
|
||
import type {
|
||
SqlFunctionDto,
|
||
SqlQueryDto,
|
||
SqlStoredProcedureDto,
|
||
SqlViewDto,
|
||
SqlQueryExecutionResultDto,
|
||
} from '@/proxy/sql-query-manager/models'
|
||
import { SqlObjectType } from '@/proxy/sql-query-manager/models'
|
||
import { sqlObjectManagerService } from '@/services/sql-query-manager.service'
|
||
import { FaDatabase, FaPlay, FaSave, FaSyncAlt, FaCloudUploadAlt } from 'react-icons/fa'
|
||
import { HiOutlineCheckCircle } from 'react-icons/hi'
|
||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||
import SqlObjectExplorer from './components/SqlObjectExplorer'
|
||
import SqlEditor, { SqlEditorRef } from './components/SqlEditor'
|
||
import SqlResultsGrid from './components/SqlResultsGrid'
|
||
import SqlObjectProperties from './components/SqlObjectProperties'
|
||
import { Splitter } from '@/components/codeLayout/Splitter'
|
||
import { Helmet } from 'react-helmet'
|
||
|
||
export type SqlObject = SqlFunctionDto | SqlQueryDto | SqlStoredProcedureDto | SqlViewDto
|
||
|
||
interface SqlManagerState {
|
||
dataSources: DataSourceDto[]
|
||
selectedDataSource: DataSourceDto | null
|
||
selectedObject: SqlObject | null
|
||
selectedObjectType: SqlObjectType | null
|
||
editorContent: string
|
||
isExecuting: boolean
|
||
executionResult: SqlQueryExecutionResultDto | null
|
||
showProperties: boolean
|
||
isDirty: boolean
|
||
tableColumns: any | null
|
||
isSaved: boolean
|
||
refreshTrigger: number
|
||
}
|
||
|
||
const SqlQueryManager = () => {
|
||
const { translate } = useLocalization()
|
||
const editorRef = useRef<SqlEditorRef>(null)
|
||
|
||
const [state, setState] = useState<SqlManagerState>({
|
||
dataSources: [],
|
||
selectedDataSource: null,
|
||
selectedObject: null,
|
||
selectedObjectType: null,
|
||
editorContent: '',
|
||
isExecuting: false,
|
||
refreshTrigger: 0,
|
||
executionResult: null,
|
||
showProperties: false,
|
||
isDirty: false,
|
||
tableColumns: null,
|
||
isSaved: false,
|
||
})
|
||
|
||
const [showSaveDialog, setShowSaveDialog] = useState(false)
|
||
const [saveDialogData, setSaveDialogData] = useState({
|
||
name: '',
|
||
description: '',
|
||
detectedType: '',
|
||
detectedName: '',
|
||
isExistingObject: false,
|
||
})
|
||
const [showTemplateConfirmDialog, setShowTemplateConfirmDialog] = useState(false)
|
||
const [pendingTemplate, setPendingTemplate] = useState<{ content: string; type: string } | null>(
|
||
null,
|
||
)
|
||
|
||
useEffect(() => {
|
||
loadDataSources()
|
||
}, [])
|
||
|
||
const loadDataSources = async () => {
|
||
try {
|
||
const response = await getDataSources()
|
||
const items = response.data.items || []
|
||
if (items.length > 0) {
|
||
setState((prev) => ({
|
||
...prev,
|
||
dataSources: items,
|
||
selectedDataSource: items[0],
|
||
}))
|
||
}
|
||
} catch (error) {
|
||
toast.push(
|
||
<Notification type="danger" title={translate('::App.Platform.Error')}>
|
||
{translate('::App.Platform.FailedtoloadDatasources')}
|
||
</Notification>,
|
||
{ placement: 'top-center' },
|
||
)
|
||
}
|
||
}
|
||
|
||
const handleDataSourceChange = useCallback((dataSource: DataSourceDto) => {
|
||
setState((prev) => ({
|
||
...prev,
|
||
selectedDataSource: dataSource,
|
||
selectedObject: null,
|
||
editorContent: '',
|
||
executionResult: null,
|
||
isDirty: false,
|
||
}))
|
||
}, [])
|
||
|
||
const handleObjectSelect = useCallback(
|
||
(object: SqlObject | null, objectType: SqlObjectType | null) => {
|
||
if (state.isDirty) {
|
||
if (!confirm(translate('::App.Platform.UnsavedChangesConfirmation'))) {
|
||
return
|
||
}
|
||
}
|
||
|
||
let content = ''
|
||
if (object) {
|
||
if (objectType === 1) {
|
||
// Query
|
||
content = (object as SqlQueryDto).queryText
|
||
} else if (objectType === 2) {
|
||
// Stored Procedure
|
||
content = (object as SqlStoredProcedureDto).procedureBody
|
||
} else if (objectType === 3) {
|
||
// View
|
||
content = (object as SqlViewDto).viewDefinition
|
||
} else if (objectType === 4) {
|
||
// Function
|
||
content = (object as SqlFunctionDto).functionBody
|
||
}
|
||
}
|
||
|
||
setState((prev) => ({
|
||
...prev,
|
||
selectedObject: object,
|
||
selectedObjectType: objectType,
|
||
editorContent: content,
|
||
executionResult: null,
|
||
tableColumns: null,
|
||
isDirty: false,
|
||
isSaved: false,
|
||
}))
|
||
},
|
||
[state.isDirty, translate],
|
||
)
|
||
|
||
const handleEditorChange = useCallback((value: string | undefined) => {
|
||
setState((prev) => ({
|
||
...prev,
|
||
editorContent: value || '',
|
||
isDirty: true,
|
||
isSaved: false,
|
||
}))
|
||
}, [])
|
||
|
||
const getTemplateContent = (templateType: string): string => {
|
||
const templates: Record<string, string> = {
|
||
select: `-- Basic SELECT query
|
||
SELECT
|
||
Column1,
|
||
Column2,
|
||
Column3
|
||
FROM
|
||
TableName
|
||
WHERE
|
||
-- Add your conditions
|
||
Column1 = 'value'
|
||
AND IsActive = 1
|
||
ORDER BY
|
||
Column1 ASC;`,
|
||
|
||
insert: `-- Basic INSERT query
|
||
INSERT INTO TableName (Column1, Column2, Column3)
|
||
VALUES
|
||
('Value1', 'Value2', 'Value3');`,
|
||
|
||
update: `-- Basic UPDATE query
|
||
UPDATE TableName
|
||
SET
|
||
Column1 = 'NewValue1',
|
||
Column2 = 'NewValue2'
|
||
WHERE
|
||
-- Add your conditions
|
||
Id = 1;`,
|
||
|
||
delete: `-- Basic DELETE query
|
||
DELETE FROM TableName
|
||
WHERE
|
||
-- Add your conditions
|
||
Id = 1;`,
|
||
|
||
'create-procedure': `-- Create Stored Procedure
|
||
CREATE PROCEDURE [dbo].[ProcedureName]
|
||
@Parameter1 INT,
|
||
@Parameter2 NVARCHAR(100)
|
||
AS
|
||
BEGIN
|
||
SET NOCOUNT ON;
|
||
|
||
-- Add your logic here
|
||
SELECT
|
||
Column1,
|
||
Column2
|
||
FROM
|
||
TableName
|
||
WHERE
|
||
Column1 = @Parameter1
|
||
AND Column2 = @Parameter2;
|
||
END
|
||
GO`,
|
||
|
||
'create-view': `-- Create View
|
||
CREATE VIEW [dbo].[ViewName]
|
||
AS
|
||
SELECT
|
||
t1.Column1,
|
||
t1.Column2,
|
||
t2.Column3
|
||
FROM
|
||
TableName1 t1
|
||
INNER JOIN TableName2 t2 ON t1.Id = t2.TableName1Id
|
||
WHERE
|
||
t1.IsActive = 1;
|
||
GO`,
|
||
|
||
'create-scalar-function': `-- Create Scalar Function
|
||
CREATE FUNCTION [dbo].[ScalarFunctionName]
|
||
(
|
||
@Parameter1 INT,
|
||
@Parameter2 NVARCHAR(100)
|
||
)
|
||
RETURNS NVARCHAR(200)
|
||
AS
|
||
BEGIN
|
||
DECLARE @Result NVARCHAR(200);
|
||
|
||
-- Add your logic here
|
||
SELECT @Result = Column1 + ' ' + @Parameter2
|
||
FROM TableName
|
||
WHERE Id = @Parameter1;
|
||
|
||
RETURN @Result;
|
||
END
|
||
GO`,
|
||
|
||
'create-table-function': `-- Create Table-Valued Function
|
||
CREATE FUNCTION [dbo].[TableFunctionName]
|
||
(
|
||
@Parameter1 INT,
|
||
@Parameter2 NVARCHAR(100)
|
||
)
|
||
RETURNS TABLE
|
||
AS
|
||
RETURN
|
||
(
|
||
SELECT
|
||
t.Column1,
|
||
t.Column2,
|
||
t.Column3,
|
||
t.Column4
|
||
FROM
|
||
TableName t
|
||
WHERE
|
||
t.Id = @Parameter1
|
||
AND t.Column2 LIKE '%' + @Parameter2 + '%'
|
||
AND t.IsActive = 1
|
||
)
|
||
GO`,
|
||
}
|
||
|
||
return templates[templateType] || templates['select']
|
||
}
|
||
|
||
// SQL analiz fonksiyonu - SQL metnini analiz edip nesne türünü ve adını tespit eder
|
||
const detectSqlObject = (sql: string): { type: string; name: string } => {
|
||
const upperSql = sql.trim().toUpperCase()
|
||
|
||
// VIEW tespiti
|
||
if (upperSql.includes('CREATE VIEW') || upperSql.includes('ALTER VIEW')) {
|
||
// Son kelimeyi al (schema varsa sonraki kelime, yoksa ilk kelime)
|
||
const viewMatch = sql.match(
|
||
/(?:CREATE|ALTER)\s+VIEW\s+(?:[\[\]]*\w+[\[\]]*\.)?\s*[\[]?(\w+)[\]]?/i,
|
||
)
|
||
return {
|
||
type: 'View',
|
||
name: viewMatch ? viewMatch[1] : '',
|
||
}
|
||
}
|
||
|
||
// STORED PROCEDURE tespiti
|
||
if (
|
||
upperSql.includes('CREATE PROCEDURE') ||
|
||
upperSql.includes('CREATE PROC') ||
|
||
upperSql.includes('ALTER PROCEDURE') ||
|
||
upperSql.includes('ALTER PROC')
|
||
) {
|
||
const procMatch = sql.match(
|
||
/(?:CREATE|ALTER)\s+(?:PROCEDURE|PROC)\s+(?:[\[\]]*\w+[\[\]]*\.)?\s*[\[]?(\w+)[\]]?/i,
|
||
)
|
||
return {
|
||
type: 'StoredProcedure',
|
||
name: procMatch ? procMatch[1] : '',
|
||
}
|
||
}
|
||
|
||
// FUNCTION tespiti
|
||
if (upperSql.includes('CREATE FUNCTION') || upperSql.includes('ALTER FUNCTION')) {
|
||
const funcMatch = sql.match(
|
||
/(?:CREATE|ALTER)\s+FUNCTION\s+(?:[\[\]]*\w+[\[\]]*\.)?\s*[\[]?(\w+)[\]]?/i,
|
||
)
|
||
return {
|
||
type: 'Function',
|
||
name: funcMatch ? funcMatch[1] : '',
|
||
}
|
||
}
|
||
|
||
// Default: Query
|
||
return {
|
||
type: 'Query',
|
||
name: '',
|
||
}
|
||
}
|
||
|
||
const applyTemplate = useCallback(
|
||
(templateContent: string) => {
|
||
setState((prev) => ({
|
||
...prev,
|
||
editorContent: templateContent,
|
||
selectedObject: null,
|
||
selectedObjectType: null,
|
||
executionResult: null,
|
||
isDirty: false,
|
||
}))
|
||
},
|
||
[translate],
|
||
)
|
||
|
||
const handleTemplateSelect = useCallback(
|
||
(template: string, templateType: string) => {
|
||
// If template is already provided (e.g., from table click), use it
|
||
const templateContent = template || getTemplateContent(templateType)
|
||
|
||
// Check if editor has content and it's not from a previous template
|
||
const hasUserContent = state.editorContent.trim() && state.isDirty
|
||
|
||
if (hasUserContent) {
|
||
// Ask for confirmation
|
||
setPendingTemplate({ content: templateContent, type: templateType })
|
||
setShowTemplateConfirmDialog(true)
|
||
} else {
|
||
// Apply template directly
|
||
applyTemplate(templateContent)
|
||
}
|
||
},
|
||
[translate, state.editorContent, state.isDirty, applyTemplate],
|
||
)
|
||
|
||
const handleConfirmTemplateReplace = useCallback(() => {
|
||
if (pendingTemplate) {
|
||
applyTemplate(pendingTemplate.content)
|
||
}
|
||
setShowTemplateConfirmDialog(false)
|
||
setPendingTemplate(null)
|
||
}, [pendingTemplate, applyTemplate])
|
||
|
||
const handleCancelTemplateReplace = useCallback(() => {
|
||
setShowTemplateConfirmDialog(false)
|
||
setPendingTemplate(null)
|
||
}, [])
|
||
|
||
const handleExecute = async () => {
|
||
if (!state.selectedDataSource) {
|
||
toast.push(
|
||
<Notification type="warning" title={translate('::App.Platform.Warning')}>
|
||
{translate('::App.Platform.PleaseSelectDataSource')}
|
||
</Notification>,
|
||
{ placement: 'top-center' },
|
||
)
|
||
return
|
||
}
|
||
|
||
// Seçili text varsa onu, yoksa tüm editor içeriğini kullan
|
||
const selectedText = editorRef.current?.getSelectedText() || ''
|
||
const queryToExecute = selectedText.trim() || state.editorContent.trim()
|
||
|
||
if (!queryToExecute) {
|
||
toast.push(
|
||
<Notification type="warning" title={translate('::App.Platform.Warning')}>
|
||
{translate('::App.Platform.PleaseEnterQuery')}
|
||
</Notification>,
|
||
{ placement: 'top-center' },
|
||
)
|
||
return
|
||
}
|
||
|
||
// Seçili metni koru
|
||
const savedSelection = editorRef.current?.preserveSelection()
|
||
|
||
setState((prev) => ({ ...prev, isExecuting: true, executionResult: null, tableColumns: null }))
|
||
|
||
try {
|
||
const result = await sqlObjectManagerService.executeQuery({
|
||
queryText: queryToExecute,
|
||
dataSourceCode: state.selectedDataSource.code || '',
|
||
})
|
||
|
||
setState((prev) => ({
|
||
...prev,
|
||
executionResult: result.data,
|
||
isExecuting: false,
|
||
tableColumns: null,
|
||
}))
|
||
|
||
// Seçili metni geri yükle
|
||
setTimeout(() => {
|
||
if (savedSelection) {
|
||
editorRef.current?.restoreSelection(savedSelection)
|
||
}
|
||
}, 100)
|
||
} catch (error: any) {
|
||
setState((prev) => ({ ...prev, isExecuting: false }))
|
||
|
||
// Hata durumunda da seçili metni geri yükle
|
||
setTimeout(() => {
|
||
if (savedSelection) {
|
||
editorRef.current?.restoreSelection(savedSelection)
|
||
}
|
||
}, 100)
|
||
|
||
toast.push(
|
||
<Notification type="danger" title={translate('::App.Platform.Error')}>
|
||
{error.response?.data?.error?.message || translate('::App.Platform.FailedToExecuteQuery')}
|
||
</Notification>,
|
||
{ placement: 'top-center' },
|
||
)
|
||
}
|
||
}
|
||
|
||
const handleSave = async () => {
|
||
if (!state.selectedDataSource) {
|
||
toast.push(
|
||
<Notification type="warning" title={translate('::App.Platform.Warning')}>
|
||
{translate('::App.Platform.PleaseSelectDataSource')}
|
||
</Notification>,
|
||
{ placement: 'top-center' },
|
||
)
|
||
return
|
||
}
|
||
|
||
if (!state.editorContent.trim()) {
|
||
toast.push(
|
||
<Notification type="warning" title={translate('::App.Platform.Warning')}>
|
||
{translate('::App.Platform.PleaseEnterContentToSave')}
|
||
</Notification>,
|
||
{ placement: 'top-center' },
|
||
)
|
||
return
|
||
}
|
||
|
||
if (state.selectedObject && state.selectedObjectType) {
|
||
// Update existing object - open dialog with existing data
|
||
const typeMap: Record<SqlObjectType, string> = {
|
||
[SqlObjectType.Query]: 'Query',
|
||
[SqlObjectType.View]: 'View',
|
||
[SqlObjectType.StoredProcedure]: 'StoredProcedure',
|
||
[SqlObjectType.Function]: 'Function',
|
||
}
|
||
|
||
// Get name based on object type
|
||
let objectName = ''
|
||
if ('viewName' in state.selectedObject) {
|
||
objectName = state.selectedObject.viewName || state.selectedObject.displayName || ''
|
||
} else if ('procedureName' in state.selectedObject) {
|
||
objectName = state.selectedObject.procedureName || state.selectedObject.displayName || ''
|
||
} else if ('functionName' in state.selectedObject) {
|
||
objectName = state.selectedObject.functionName || state.selectedObject.displayName || ''
|
||
} else if ('name' in state.selectedObject) {
|
||
objectName = state.selectedObject.name || ''
|
||
}
|
||
|
||
setSaveDialogData({
|
||
name: objectName,
|
||
description: state.selectedObject.description || '',
|
||
detectedType: typeMap[state.selectedObjectType] || '',
|
||
detectedName: objectName,
|
||
isExistingObject: true,
|
||
})
|
||
setShowSaveDialog(true)
|
||
} else {
|
||
// New object - analyze SQL and show dialog with detection
|
||
const detection = detectSqlObject(state.editorContent)
|
||
setSaveDialogData({
|
||
name: detection.name,
|
||
description: '',
|
||
detectedType: detection.type,
|
||
detectedName: detection.name,
|
||
isExistingObject: false,
|
||
})
|
||
setShowSaveDialog(true)
|
||
}
|
||
}
|
||
|
||
const handleCreateNewQuery = async () => {
|
||
if (!state.selectedDataSource || !saveDialogData.name) return
|
||
|
||
try {
|
||
// Smart save ile kaydet
|
||
const result = await sqlObjectManagerService.smartSave({
|
||
sqlText: state.editorContent,
|
||
dataSourceCode: state.selectedDataSource.code || '',
|
||
name: saveDialogData.name,
|
||
description: saveDialogData.description,
|
||
})
|
||
|
||
// Kaydedilen objeyi state'e set et
|
||
const savedObject: any = {
|
||
id: result.data.objectId,
|
||
displayName: saveDialogData.name,
|
||
description: saveDialogData.description,
|
||
isDeployed: result.data.deployed,
|
||
}
|
||
|
||
// ObjectType'a göre ekstra alanlar ekle
|
||
let objectType: SqlObjectType | null = null
|
||
if (result.data.objectType === 'View') {
|
||
objectType = SqlObjectType.View
|
||
savedObject.viewName = saveDialogData.name
|
||
savedObject.viewDefinition = state.editorContent
|
||
} else if (result.data.objectType === 'StoredProcedure') {
|
||
objectType = SqlObjectType.StoredProcedure
|
||
savedObject.procedureName = saveDialogData.name
|
||
savedObject.procedureBody = state.editorContent
|
||
} else if (result.data.objectType === 'Function') {
|
||
objectType = SqlObjectType.Function
|
||
savedObject.functionName = saveDialogData.name
|
||
savedObject.functionBody = state.editorContent
|
||
} else if (result.data.objectType === 'Query') {
|
||
objectType = SqlObjectType.Query
|
||
savedObject.queryText = state.editorContent
|
||
}
|
||
|
||
setState((prev) => ({
|
||
...prev,
|
||
isDirty: false,
|
||
isSaved: true,
|
||
selectedObject: savedObject,
|
||
selectedObjectType: objectType,
|
||
refreshTrigger: prev.refreshTrigger + 1,
|
||
}))
|
||
setShowSaveDialog(false)
|
||
|
||
toast.push(
|
||
<Notification type="success" title={translate('::App.Platform.Success')}>
|
||
{result.data.message || translate('::App.Platform.SavedSuccessfully')}
|
||
</Notification>,
|
||
{ placement: 'top-center' },
|
||
)
|
||
} catch (error: any) {
|
||
toast.push(
|
||
<Notification type="danger" title={translate('::App.Platform.Error')}>
|
||
{error.response?.data?.error?.message || translate('::App.Platform.FailedToSaveQuery')}
|
||
</Notification>,
|
||
{ placement: 'top-center' },
|
||
)
|
||
}
|
||
}
|
||
|
||
const handleDeploy = async () => {
|
||
if (!state.selectedObject || !state.selectedObjectType) {
|
||
toast.push(
|
||
<Notification type="warning" title={translate('::App.Platform.Warning')}>
|
||
{translate('::App.Platform.PleaseSelectAnObjectToDeploy')}
|
||
</Notification>,
|
||
{ placement: 'top-center' },
|
||
)
|
||
return
|
||
}
|
||
if (!state.selectedObject.id) return
|
||
|
||
try {
|
||
const objectId = state.selectedObject.id
|
||
let result: any
|
||
|
||
switch (state.selectedObjectType) {
|
||
case SqlObjectType.StoredProcedure:
|
||
result = await sqlObjectManagerService.deployStoredProcedure({
|
||
id: objectId,
|
||
dropIfExists: true,
|
||
})
|
||
break
|
||
case SqlObjectType.View:
|
||
result = await sqlObjectManagerService.deployView({ id: objectId, dropIfExists: true })
|
||
break
|
||
case SqlObjectType.Function:
|
||
result = await sqlObjectManagerService.deployFunction({
|
||
id: objectId,
|
||
dropIfExists: true,
|
||
})
|
||
break
|
||
default:
|
||
toast.push(
|
||
<Notification type="warning" title={translate('::App.Platform.Warning')}>
|
||
{translate('::App.Platform.ThisObjectTypeCannotBeDeployed')}
|
||
</Notification>,
|
||
{ placement: 'top-center' },
|
||
)
|
||
return
|
||
}
|
||
|
||
// Update selectedObject's isDeployed status
|
||
setState((prev) => ({
|
||
...prev,
|
||
selectedObject: prev.selectedObject ? { ...prev.selectedObject, isDeployed: true } : null,
|
||
refreshTrigger: prev.refreshTrigger + 1,
|
||
}))
|
||
|
||
toast.push(
|
||
<Notification type="success" title={translate('::App.Platform.Success')}>
|
||
{translate('::App.Platform.ObjectDeployedSuccessfully')}
|
||
</Notification>,
|
||
{ placement: 'top-center' },
|
||
)
|
||
} catch (error: any) {
|
||
toast.push(
|
||
<Notification type="danger" title={translate('::App.Platform.Error')}>
|
||
{error.response?.data?.error?.message || translate('::App.Platform.FailedToDeployObject')}
|
||
</Notification>,
|
||
{ placement: 'top-center' },
|
||
)
|
||
}
|
||
}
|
||
|
||
const handleShowTableColumns = async (schemaName: string, tableName: string) => {
|
||
if (!state.selectedDataSource) return
|
||
|
||
try {
|
||
const response = await sqlObjectManagerService.getTableColumns(
|
||
state.selectedDataSource.code || '',
|
||
schemaName,
|
||
tableName,
|
||
)
|
||
|
||
// Transform API response to match display format
|
||
const transformedData = response.data.map((col: any) => ({
|
||
ColumnName: col.columnName,
|
||
DataType: col.dataType,
|
||
MaxLength: col.maxLength || '-',
|
||
IsNullable: col.isNullable,
|
||
IsPrimaryKey: col.isPrimaryKey || false,
|
||
}))
|
||
|
||
// Create a result object that looks like execution result for display
|
||
const columnsResult = {
|
||
success: true,
|
||
message: `Columns for ${schemaName}.${tableName}`,
|
||
data: transformedData,
|
||
rowsAffected: transformedData.length,
|
||
executionTimeMs: 0,
|
||
metadata: {
|
||
columns: [
|
||
{ name: 'ColumnName', dataType: 'string' },
|
||
{ name: 'DataType', dataType: 'string' },
|
||
{ name: 'MaxLength', dataType: 'string' },
|
||
{ name: 'IsNullable', dataType: 'boolean' },
|
||
{ name: 'IsPrimaryKey', dataType: 'boolean' },
|
||
],
|
||
},
|
||
}
|
||
|
||
setState((prev) => ({
|
||
...prev,
|
||
tableColumns: columnsResult,
|
||
executionResult: null, // Clear query results when showing columns
|
||
}))
|
||
} catch (error: any) {
|
||
toast.push(
|
||
<Notification type="danger" title={translate('::App.Platform.Error')}>
|
||
{error.response?.data?.error?.message || translate('::App.Platform.FailedToLoadColumns')}
|
||
</Notification>,
|
||
{ placement: 'top-center' },
|
||
)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Container className="h-full overflow-hidden">
|
||
<Helmet
|
||
titleTemplate="%s | Erp Platform"
|
||
title={translate('::' + 'App.SqlQueryManager')}
|
||
defaultTitle="Erp Platform"
|
||
></Helmet>
|
||
|
||
<div className="flex flex-col h-full p-1">
|
||
{/* Toolbar */}
|
||
<div className="flex-shrink-0 shadow-sm mb-4">
|
||
<div className="flex items-center justify-between px-1 py-1">
|
||
<div className="flex items-center gap-3">
|
||
<FaDatabase className="text-lg text-blue-500" />
|
||
<span className="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||
{translate('::App.Platform.DataSource')}:
|
||
</span>
|
||
<select
|
||
className="border border-gray-300 rounded px-1 py-1"
|
||
value={state.selectedDataSource?.code || ''}
|
||
onChange={(e) => {
|
||
const ds = state.dataSources.find((d) => d.code === e.target.value)
|
||
if (ds) handleDataSourceChange(ds)
|
||
}}
|
||
>
|
||
{state.dataSources.map((ds) => (
|
||
<option key={ds.code} value={ds.code}>
|
||
{ds.code}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3">
|
||
<Button
|
||
size="sm"
|
||
variant="solid"
|
||
color="blue-600"
|
||
icon={<FaPlay />}
|
||
onClick={handleExecute}
|
||
loading={state.isExecuting}
|
||
disabled={!state.selectedDataSource}
|
||
className="shadow-sm"
|
||
>
|
||
{translate('::App.Platform.Execute')}
|
||
<span className="ml-1 text-xs opacity-75">(F5)</span>
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
variant="solid"
|
||
icon={<FaSave />}
|
||
onClick={handleSave}
|
||
disabled={
|
||
!state.selectedDataSource ||
|
||
!state.editorContent.trim() ||
|
||
(state.isSaved && !state.isDirty) ||
|
||
!state.executionResult?.success
|
||
}
|
||
className="shadow-sm"
|
||
>
|
||
{translate('::App.Platform.Save')}
|
||
<span className="ml-1 text-xs opacity-75">(Ctrl+S)</span>
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
variant="solid"
|
||
color="green-600"
|
||
icon={<FaCloudUploadAlt />}
|
||
onClick={handleDeploy}
|
||
disabled={
|
||
!state.selectedObject ||
|
||
!state.selectedObjectType ||
|
||
state.selectedObjectType === SqlObjectType.Query ||
|
||
(state.selectedObject &&
|
||
'isDeployed' in state.selectedObject &&
|
||
state.selectedObject.isDeployed)
|
||
}
|
||
className="shadow-sm"
|
||
>
|
||
{translate('::App.Platform.Deploy')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Main Content Area */}
|
||
<div className="flex-1 flex min-h-0">
|
||
{/* Left Panel - Object Explorer */}
|
||
<div className="w-1/3 flex-shrink-0 flex flex-col min-h-0 mr-4">
|
||
<AdaptableCard className="h-full" bodyClass="p-0">
|
||
<div className="h-full flex flex-col">
|
||
<div className="border-b px-4 py-3 bg-gray-50 dark:bg-gray-800 flex-shrink-0">
|
||
<h6 className="font-semibold text-sm">
|
||
{translate('::App.Platform.ObjectExplorer')}
|
||
</h6>
|
||
</div>
|
||
<SqlObjectExplorer
|
||
dataSource={state.selectedDataSource}
|
||
onObjectSelect={handleObjectSelect}
|
||
selectedObject={state.selectedObject}
|
||
onTemplateSelect={handleTemplateSelect}
|
||
onShowTableColumns={handleShowTableColumns}
|
||
refreshTrigger={state.refreshTrigger}
|
||
/>
|
||
</div>
|
||
</AdaptableCard>
|
||
</div>
|
||
|
||
{/* Center Panel - Editor and Results */}
|
||
<div className="flex-1 flex flex-col min-h-0 mr-4">
|
||
{state.executionResult || state.tableColumns ? (
|
||
<Splitter direction="vertical" initialSize={250} minSize={150} maxSize={1200}>
|
||
<div className="border rounded-lg shadow-sm bg-white dark:bg-gray-800 flex flex-col h-full">
|
||
<div className="border-b px-4 py-2 bg-gray-50 dark:bg-gray-800 flex-shrink-0">
|
||
<h6 className="font-semibold text-sm">
|
||
{translate('::App.Platform.QueryEditor')}
|
||
</h6>
|
||
</div>
|
||
<div className="flex-1 min-h-0 overflow-hidden">
|
||
<SqlEditor
|
||
ref={editorRef}
|
||
value={state.editorContent}
|
||
onChange={handleEditorChange}
|
||
onExecute={handleExecute}
|
||
onSave={handleSave}
|
||
readOnly={state.isExecuting}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="border rounded-lg shadow-sm bg-white dark:bg-gray-800 flex flex-col h-full">
|
||
<div className="border-b px-4 py-2 bg-gray-50 dark:bg-gray-800 flex-shrink-0 flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<HiOutlineCheckCircle className="text-green-500" />
|
||
<span className="text-sm text-green-700 dark:text-green-400">
|
||
{state.executionResult?.message ||
|
||
state.tableColumns?.message ||
|
||
translate('::App.Platform.QueryExecutedSuccessfully')}
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-4">
|
||
<div className="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
|
||
<span>
|
||
{translate('::App.Platform.Rows')}:{' '}
|
||
<strong>
|
||
{state.executionResult?.rowsAffected ||
|
||
state.executionResult?.data?.length ||
|
||
state.tableColumns?.rowsAffected ||
|
||
0}
|
||
</strong>
|
||
</span>
|
||
{state.executionResult && (
|
||
<span>
|
||
{translate('::App.Platform.Time')}:{' '}
|
||
<strong>{state.executionResult.executionTimeMs}ms</strong>
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex-1 overflow-hidden p-2">
|
||
<SqlResultsGrid result={(state.executionResult || state.tableColumns)!} />
|
||
</div>
|
||
</div>
|
||
</Splitter>
|
||
) : (
|
||
<div className="flex-1 border rounded-lg shadow-sm bg-white dark:bg-gray-800 flex flex-col overflow-hidden">
|
||
<div className="border-b px-4 py-2 bg-gray-50 dark:bg-gray-800 flex-shrink-0">
|
||
<h6 className="font-semibold text-sm">
|
||
{translate('::App.Platform.QueryEditor')}
|
||
</h6>
|
||
</div>
|
||
<div className="flex-1 min-h-0">
|
||
<SqlEditor
|
||
ref={editorRef}
|
||
value={state.editorContent}
|
||
onChange={handleEditorChange}
|
||
onExecute={handleExecute}
|
||
onSave={handleSave}
|
||
readOnly={state.isExecuting}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Right Panel - Properties (Optional) */}
|
||
{state.showProperties && state.selectedObject && (
|
||
<div className="w-80 flex-shrink-0 flex flex-col min-h-0">
|
||
<SqlObjectProperties object={state.selectedObject} type={state.selectedObjectType} />
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Template Confirmation Dialog */}
|
||
<Dialog
|
||
isOpen={showTemplateConfirmDialog}
|
||
onClose={handleCancelTemplateReplace}
|
||
onRequestClose={handleCancelTemplateReplace}
|
||
>
|
||
<h5 className="mb-4">{translate('::App.Platform.ConfirmTemplateReplace')}</h5>
|
||
<p className="mb-6 text-gray-600 dark:text-gray-400">
|
||
{translate('::App.Platform.TemplateReplaceWarning')}
|
||
</p>
|
||
<div className="flex justify-end gap-2">
|
||
<Button variant="plain" onClick={handleCancelTemplateReplace}>
|
||
{translate('::App.Platform.Cancel')}
|
||
</Button>
|
||
<Button variant="solid" onClick={handleConfirmTemplateReplace}>
|
||
{translate('::App.Platform.Replace')}
|
||
</Button>
|
||
</div>
|
||
</Dialog>
|
||
|
||
{/* Save Dialog */}
|
||
<Dialog
|
||
isOpen={showSaveDialog}
|
||
onClose={() => setShowSaveDialog(false)}
|
||
onRequestClose={() => setShowSaveDialog(false)}
|
||
>
|
||
<h5 className="mb-4">{translate('::App.Platform.SaveQuery')}</h5>
|
||
<div className="space-y-4">
|
||
{/* Detected Object Type */}
|
||
{saveDialogData.detectedType && (
|
||
<div className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-md border border-blue-200 dark:border-blue-800">
|
||
<div className="flex items-center gap-2">
|
||
<HiOutlineCheckCircle className="text-blue-600 dark:text-blue-400 text-xl" />
|
||
<div>
|
||
<div className="text-sm font-semibold text-blue-900 dark:text-blue-100">
|
||
{translate('::App.Platform.DetectedObjectType')}
|
||
</div>
|
||
<div className="text-sm text-blue-700 dark:text-blue-300">
|
||
{saveDialogData.detectedType === 'View' && translate('::App.Platform.View')}
|
||
{saveDialogData.detectedType === 'StoredProcedure' &&
|
||
translate('::App.Platform.StoredProcedure')}
|
||
{saveDialogData.detectedType === 'Function' &&
|
||
translate('::App.Platform.Function')}
|
||
{saveDialogData.detectedType === 'Query' && translate('::App.Platform.Query')}
|
||
</div>
|
||
{saveDialogData.detectedName && (
|
||
<div className="text-xs text-blue-600 dark:text-blue-400 mt-1">
|
||
{translate('::App.Platform.DetectedName')}:{' '}
|
||
<span className="font-mono">{saveDialogData.detectedName}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div>
|
||
<label className="block mb-2">
|
||
{translate('::App.Platform.Name')} <span className="text-red-500">*</span>
|
||
{saveDialogData.isExistingObject && (
|
||
<span className="text-xs text-gray-500 ml-2">
|
||
({translate('::App.Platform.CannotBeChanged')})
|
||
</span>
|
||
)}
|
||
</label>
|
||
<Input
|
||
autoFocus={!saveDialogData.isExistingObject}
|
||
value={saveDialogData.name}
|
||
onChange={(e) => setSaveDialogData((prev) => ({ ...prev, name: e.target.value }))}
|
||
placeholder={saveDialogData.detectedName || translate('::App.Platform.Name')}
|
||
invalid={!saveDialogData.name.trim()}
|
||
disabled={saveDialogData.isExistingObject}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block mb-2">{translate('::App.Platform.Description')}</label>
|
||
<Input
|
||
value={saveDialogData.description}
|
||
onChange={(e) =>
|
||
setSaveDialogData((prev) => ({ ...prev, description: e.target.value }))
|
||
}
|
||
placeholder={translate('::App.Platform.Description')}
|
||
/>
|
||
</div>
|
||
<div className="flex justify-end gap-2">
|
||
<Button variant="plain" onClick={() => setShowSaveDialog(false)}>
|
||
{translate('::App.Platform.Cancel')}
|
||
</Button>
|
||
<Button
|
||
variant="solid"
|
||
onClick={handleCreateNewQuery}
|
||
disabled={!saveDialogData.name.trim()}
|
||
>
|
||
{translate('::App.Platform.Save')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Dialog>
|
||
</Container>
|
||
)
|
||
}
|
||
|
||
export default SqlQueryManager
|