Genel değişiklikler
This commit is contained in:
Sedat ÖZTÜRK
parent
233c9b7502
commit
11d8e60544
14 changed files with 590 additions and 371 deletions
|
|
@ -4026,7 +4026,7 @@ public class ListFormSeeder_Saas : IDataSeedContributor, ITransientDependency
|
|||
SearchPanelJson = DefaultSearchPanelJson,
|
||||
GroupPanelJson = DefaultGroupPanelJson,
|
||||
SelectionJson = DefaultSelectionSingleJson,
|
||||
ColumnOptionJson = DefaultColumnOptionJson(false),
|
||||
ColumnOptionJson = DefaultColumnOptionJson(),
|
||||
PermissionJson = DefaultPermissionJson(listFormName),
|
||||
PagerOptionJson = DefaultPagerOptionJson,
|
||||
EditingOptionJson = DefaultEditingOptionJson(listFormName, 950, 650, true, true, true, true, false),
|
||||
|
|
|
|||
|
|
@ -47,12 +47,30 @@
|
|||
}
|
||||
|
||||
.dialog-content {
|
||||
@apply p-6 rounded-lg shadow-xl sm:my-16 relative h-full bg-white dark:bg-gray-800;
|
||||
max-height: calc(100vh - 2rem);
|
||||
@apply p-6 rounded-lg shadow-xl my-4 relative bg-white dark:bg-gray-800 flex flex-col overflow-hidden;
|
||||
}
|
||||
|
||||
@screen sm {
|
||||
.dialog-content {
|
||||
max-height: calc(100vh - 8rem);
|
||||
@apply my-16;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-header,
|
||||
.dialog-footer {
|
||||
@apply flex-shrink-0;
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
@apply flex-1 min-h-0 overflow-y-auto;
|
||||
}
|
||||
|
||||
.dialog-content.maximized {
|
||||
border-radius: 0 !important;
|
||||
height: 100vh !important;
|
||||
max-height: 100vh !important;
|
||||
margin: 0 !important;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -99,7 +99,9 @@ export const FileUploadArea: React.FC<FileUploadAreaProps> = ({
|
|||
{!selectedFile ? (
|
||||
<div
|
||||
className={`relative border-2 border-dashed rounded-lg p-3 transition-all duration-200 ${
|
||||
dragActive ? 'border-blue-400 bg-blue-50' : 'border-slate-300 hover:border-slate-400'
|
||||
dragActive
|
||||
? 'border-blue-400 bg-blue-50 dark:bg-blue-950/30'
|
||||
: 'border-slate-300 hover:border-slate-400 dark:border-slate-600 dark:hover:border-slate-500'
|
||||
} ${loading ? 'opacity-50 pointer-events-none' : ''}`}
|
||||
onDragEnter={handleDrag}
|
||||
onDragLeave={handleDrag}
|
||||
|
|
@ -117,35 +119,39 @@ export const FileUploadArea: React.FC<FileUploadAreaProps> = ({
|
|||
|
||||
<div className="text-center">
|
||||
<FaUpload
|
||||
className={`mx-auto h-3 w-3 ${dragActive ? 'text-blue-500' : 'text-slate-400'}`}
|
||||
className={`mx-auto h-3 w-3 ${dragActive ? 'text-blue-500 dark:text-blue-400' : 'text-slate-400 dark:text-slate-500'}`}
|
||||
/>
|
||||
<div className="text-lg font-medium text-slate-700 mb-2">
|
||||
<div className="text-lg font-medium text-slate-700 dark:text-slate-200 mb-2">
|
||||
{dragActive
|
||||
? translate('::App.Listforms.ImportManager.DropHere')
|
||||
: translate('::App.Listforms.ImportManager.UploadYourFile')}
|
||||
</div>
|
||||
<p className="text-slate-500 mb-4">
|
||||
<p className="text-slate-500 dark:text-slate-400 mb-4">
|
||||
{translate('::App.Listforms.ImportManager.DragOrClick')}
|
||||
</p>
|
||||
<div className="text-sm text-slate-400">
|
||||
<div className="text-sm text-slate-400 dark:text-slate-500">
|
||||
{translate('::App.Listforms.ImportManager.SupportedFormats')}{' '}
|
||||
{acceptedFormats.join(', ')} • Max size: {maxSize}MB
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="border border-slate-200 rounded-lg p-4">
|
||||
<div className="border border-slate-200 dark:border-slate-700 rounded-lg p-4 dark:bg-slate-900/40">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3 min-w-0 flex-1">
|
||||
<FaFile className="w-8 h-8 text-blue-500 flex-shrink-0" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="font-medium text-slate-800 truncate">{selectedFile.name}</div>
|
||||
<div className="text-sm text-slate-500">{formatFileSize(selectedFile.size)}</div>
|
||||
<div className="font-medium text-slate-800 dark:text-slate-100 truncate">
|
||||
{selectedFile.name}
|
||||
</div>
|
||||
<div className="text-sm text-slate-500 dark:text-slate-400">
|
||||
{formatFileSize(selectedFile.size)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={clearFile}
|
||||
className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-colors"
|
||||
className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:text-slate-500 dark:hover:text-slate-300 dark:hover:bg-slate-800 rounded-lg transition-colors"
|
||||
>
|
||||
<FaTimes className="w-4 h-4" />
|
||||
</button>
|
||||
|
|
@ -154,9 +160,9 @@ export const FileUploadArea: React.FC<FileUploadAreaProps> = ({
|
|||
)}
|
||||
|
||||
{error && (
|
||||
<div className="flex items-center space-x-2 p-3 bg-red-50 border border-red-200 rounded-lg">
|
||||
<div className="flex items-center space-x-2 p-3 bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-900/60 rounded-lg">
|
||||
<FaRegCircle className="w-5 h-5 text-red-500" />
|
||||
<span className="text-red-700">{error}</span>
|
||||
<span className="text-red-700 dark:text-red-300">{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -195,17 +195,17 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
switch (status) {
|
||||
case 'uploaded':
|
||||
case 'executed':
|
||||
return 'bg-green-50 text-green-700 border-green-200'
|
||||
return 'bg-green-50 text-green-700 border-green-200 dark:bg-green-950/30 dark:text-green-300 dark:border-green-900/60'
|
||||
case 'executed_with_errors':
|
||||
return 'bg-orange-50 text-orange-700 border-orange-200'
|
||||
return 'bg-orange-50 text-orange-700 border-orange-200 dark:bg-orange-950/30 dark:text-orange-300 dark:border-orange-900/60'
|
||||
case 'failed':
|
||||
case 'execute_failed':
|
||||
return 'bg-red-50 text-red-700 border-red-200'
|
||||
return 'bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-300 dark:border-red-900/60'
|
||||
case 'processing':
|
||||
case 'validating':
|
||||
return 'bg-blue-50 text-blue-700 border-blue-200'
|
||||
return 'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950/30 dark:text-blue-300 dark:border-blue-900/60'
|
||||
default:
|
||||
return 'bg-yellow-50 text-yellow-700 border-yellow-200'
|
||||
return 'bg-yellow-50 text-yellow-700 border-yellow-200 dark:bg-yellow-950/30 dark:text-yellow-300 dark:border-yellow-900/60'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -269,17 +269,17 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
const getExecuteStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return 'text-green-600'
|
||||
return 'text-green-600 dark:text-green-300'
|
||||
case 'completed_with_errors':
|
||||
return 'text-orange-600'
|
||||
return 'text-orange-600 dark:text-orange-300'
|
||||
case 'processing':
|
||||
return 'text-blue-600'
|
||||
return 'text-blue-600 dark:text-blue-300'
|
||||
case 'validating':
|
||||
return 'text-yellow-600'
|
||||
return 'text-yellow-600 dark:text-yellow-300'
|
||||
case 'failed':
|
||||
return 'text-red-600'
|
||||
return 'text-red-600 dark:text-red-300'
|
||||
default:
|
||||
return 'text-slate-600'
|
||||
return 'text-slate-600 dark:text-slate-400'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -331,7 +331,7 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
return (
|
||||
<div className="flex flex-col w-full mt-4">
|
||||
{/* Navigation Tabs */}
|
||||
<div className="flex space-x-1 mb-4 bg-white rounded-lg p-1 shadow-sm border border-slate-200 flex-shrink-0">
|
||||
<div className="flex space-x-1 mb-4 bg-white dark:bg-slate-900 rounded-lg p-1 shadow-sm border border-slate-200 dark:border-slate-700 flex-shrink-0">
|
||||
{['import', 'preview', 'history'].map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
|
|
@ -339,7 +339,7 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
className={`px-3 py-2 rounded-md font-medium transition-all duration-200 flex items-center space-x-2 ${
|
||||
activeTab === tab
|
||||
? 'bg-blue-500 text-white shadow-md'
|
||||
: 'text-slate-600 hover:text-slate-800 hover:bg-slate-50'
|
||||
: 'text-slate-600 hover:text-slate-800 hover:bg-slate-50 dark:text-slate-300 dark:hover:text-slate-100 dark:hover:bg-slate-800'
|
||||
}`}
|
||||
>
|
||||
{tab === 'import' && <FaUpload className="w-4 h-4" />}
|
||||
|
|
@ -358,9 +358,9 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Template Generator - 2/3 width on large screens, full width on mobile */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-200">
|
||||
<div className="px-3 py-3 border-b flex items-center justify-between">
|
||||
<h3 className="text-xl font-semibold text-slate-800 flex items-center">
|
||||
<div className="bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
|
||||
<div className="px-3 py-3 border-b border-slate-200 dark:border-slate-700 flex items-center justify-between">
|
||||
<h3 className="text-xl font-semibold text-slate-800 dark:text-slate-100 flex items-center">
|
||||
<FaDownload className="w-4 h-4 mr-2" />
|
||||
{translate('::App.Listforms.ImportManager.TemplateColumns')} (
|
||||
{editableColumns.length})
|
||||
|
|
@ -371,10 +371,10 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
<button
|
||||
onClick={() => generateTemplate('excel')}
|
||||
disabled={generating}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 border border-green-200 rounded-md hover:border-green-300 hover:bg-green-50 transition-all duration-200 group disabled:opacity-50 disabled:cursor-not-allowed bg-white text-xs"
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 border border-green-200 dark:border-green-900/60 rounded-md hover:border-green-300 hover:bg-green-50 dark:hover:bg-green-950/30 transition-all duration-200 group disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-slate-900 text-xs"
|
||||
>
|
||||
<FaFileExcel className="w-3.5 h-3.5 text-green-500 group-hover:scale-110 transition-transform" />
|
||||
<span className="font-medium text-slate-700">
|
||||
<span className="font-medium text-slate-700 dark:text-slate-200">
|
||||
{translate('::App.Listforms.ImportManager.ExcelTemplate')}
|
||||
</span>
|
||||
</button>
|
||||
|
|
@ -382,10 +382,10 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
<button
|
||||
onClick={() => generateTemplate('csv')}
|
||||
disabled={generating}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 border border-blue-200 rounded-md hover:border-blue-300 hover:bg-blue-50 transition-all duration-200 group disabled:opacity-50 disabled:cursor-not-allowed bg-white text-xs"
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 border border-blue-200 dark:border-blue-900/60 rounded-md hover:border-blue-300 hover:bg-blue-50 dark:hover:bg-blue-950/30 transition-all duration-200 group disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-slate-900 text-xs"
|
||||
>
|
||||
<FaFileAlt className="w-3.5 h-3.5 text-blue-500 group-hover:scale-110 transition-transform" />
|
||||
<span className="font-medium text-slate-700">
|
||||
<span className="font-medium text-slate-700 dark:text-slate-200">
|
||||
{translate('::App.Listforms.ImportManager.CsvTemplate')}
|
||||
</span>
|
||||
</button>
|
||||
|
|
@ -394,38 +394,38 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
|
||||
<div className="max-h-96 overflow-y-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-slate-100 sticky top-0">
|
||||
<thead className="bg-slate-100 dark:bg-slate-800 sticky top-0">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-slate-500 uppercase">
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">
|
||||
{translate('::App.Listform.ListformField.Column')}
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-slate-500 uppercase">
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">
|
||||
{translate('::ListForms.ListFormEdit.Type')}
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-slate-500 uppercase">
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">
|
||||
{translate('::App.Required')}
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-slate-500 uppercase">
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">
|
||||
{translate('::Abp.Mailing.Default')}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
<tbody className="divide-y divide-slate-100 dark:divide-slate-800">
|
||||
{editableColumns.map((column: any) => (
|
||||
<tr key={column.fieldName} className="hover:bg-slate-50">
|
||||
<td className="px-2 py-2 font-medium text-slate-800">
|
||||
<tr key={column.fieldName} className="hover:bg-slate-50 dark:hover:bg-slate-800/70">
|
||||
<td className="px-2 py-2 font-medium text-slate-800 dark:text-slate-100">
|
||||
{column.fieldName}
|
||||
</td>
|
||||
<td className="px-4 py-2 text-slate-600">
|
||||
<td className="px-4 py-2 text-slate-600 dark:text-slate-300">
|
||||
<span
|
||||
className={`px-2 py-1 rounded text-xs font-medium ${
|
||||
column.dataType === 'string'
|
||||
? 'bg-blue-100 text-blue-800'
|
||||
? 'bg-blue-100 text-blue-800 dark:bg-blue-950/40 dark:text-blue-300'
|
||||
: column.dataType === 'number'
|
||||
? 'bg-green-100 text-green-800'
|
||||
? 'bg-green-100 text-green-800 dark:bg-green-950/40 dark:text-green-300'
|
||||
: column.dataType === 'boolean'
|
||||
? 'bg-purple-100 text-purple-800'
|
||||
: 'bg-orange-100 text-orange-800'
|
||||
? 'bg-purple-100 text-purple-800 dark:bg-purple-950/40 dark:text-purple-300'
|
||||
: 'bg-orange-100 text-orange-800 dark:bg-orange-950/40 dark:text-orange-300'
|
||||
}`}
|
||||
>
|
||||
{column.dataType}
|
||||
|
|
@ -435,16 +435,16 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
{column.validationRuleDto.some(
|
||||
(rule: any) => rule.type === 'required',
|
||||
) ? (
|
||||
<span className="text-red-500 font-medium">
|
||||
<span className="text-red-500 dark:text-red-300 font-medium">
|
||||
{translate('::App.Listforms.ImportManager.Yes')}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-slate-400">
|
||||
<span className="text-slate-400 dark:text-slate-500">
|
||||
{translate('::App.Listforms.ImportManager.No')}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-2 text-slate-600 text-sm">
|
||||
<td className="px-4 py-2 text-slate-600 dark:text-slate-300 text-sm">
|
||||
{typeof column.defaultValue === 'object'
|
||||
? JSON.stringify(column.defaultValue)
|
||||
: column.defaultValue}
|
||||
|
|
@ -458,7 +458,7 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
{generating && (
|
||||
<div className="flex items-center justify-center py-4">
|
||||
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500"></div>
|
||||
<span className="ml-2 text-slate-600">
|
||||
<span className="ml-2 text-slate-600 dark:text-slate-400">
|
||||
{translate('::App.Listforms.ImportManager.GeneratingTemplate')}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -468,8 +468,8 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
|
||||
{/* File Upload - 1/3 width on large screens, full width on mobile */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-200 p-4 h-full">
|
||||
<h2 className="text-xl font-semibold text-slate-800 mb-4 flex items-center">
|
||||
<div className="bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-4 h-full">
|
||||
<h2 className="text-xl font-semibold text-slate-800 dark:text-slate-100 mb-4 flex items-center">
|
||||
<FaUpload className="w-5 h-5 mr-2 text-green-500" />
|
||||
{translate('::App.Listforms.ImportManager.UploadData')}
|
||||
</h2>
|
||||
|
|
@ -506,9 +506,9 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-200 p-12">
|
||||
<div className="text-center text-slate-500">
|
||||
<FaEye className="w-16 h-16 mx-auto mb-4 text-slate-300" />
|
||||
<div className="bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-12">
|
||||
<div className="text-center text-slate-500 dark:text-slate-400">
|
||||
<FaEye className="w-16 h-16 mx-auto mb-4 text-slate-300 dark:text-slate-600" />
|
||||
<div className="text-xl font-medium mb-2">
|
||||
{translate('::App.Listforms.ImportManager.NoDataToPreview')}
|
||||
</div>
|
||||
|
|
@ -520,22 +520,22 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
)}
|
||||
|
||||
{activeTab === 'history' && (
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-200">
|
||||
<div className="p-3 border-b border-slate-200">
|
||||
<h2 className="text-xl font-semibold text-slate-800 flex items-center">
|
||||
<div className="bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
|
||||
<div className="p-3 border-b border-slate-200 dark:border-slate-700">
|
||||
<h2 className="text-xl font-semibold text-slate-800 dark:text-slate-100 flex items-center">
|
||||
<FaClock className="w-5 h-5 mr-2 text-indigo-500" />
|
||||
{translate('::App.Listforms.ImportManager.ImportHistory')}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-slate-100">
|
||||
<div className="divide-y divide-slate-100 dark:divide-slate-800">
|
||||
{importHistory.map((session) => (
|
||||
<div
|
||||
key={session.id}
|
||||
className={`p-2 transition-colors border-l-4 ${
|
||||
currentSession?.id === session.id
|
||||
? 'bg-blue-50 border-l-blue-500 hover:bg-blue-100'
|
||||
: 'border-l-transparent hover:bg-slate-50'
|
||||
? 'bg-blue-50 border-l-blue-500 hover:bg-blue-100 dark:bg-blue-950/30 dark:hover:bg-blue-950/40'
|
||||
: 'border-l-transparent hover:bg-slate-50 dark:hover:bg-slate-800/70'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
|
|
@ -543,13 +543,15 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
{getStatusIcon(session.status)}
|
||||
<div className="flex items-center space-x-2">
|
||||
<div>
|
||||
<div className="font-medium text-slate-800">{session.blobName}</div>
|
||||
<div className="text-sm text-slate-500">
|
||||
<div className="font-medium text-slate-800 dark:text-slate-100">
|
||||
{session.blobName}
|
||||
</div>
|
||||
<div className="text-sm text-slate-500 dark:text-slate-400">
|
||||
{new Date(session.creationTime).toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
{currentSession?.id === session.id && (
|
||||
<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
||||
<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-950/40 dark:text-blue-300">
|
||||
{translate('::App.Status.Active')}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -558,7 +560,7 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="text-right">
|
||||
<div className="text-sm font-medium text-slate-800">
|
||||
<div className="text-sm font-medium text-slate-800 dark:text-slate-100">
|
||||
{session.totalRows} {translate('::App.Listforms.ImportManager.TotalRows')}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -576,8 +578,8 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
onClick={() => toggleSessionExecutes(session.id)}
|
||||
className={`p-2 rounded-lg transition-colors ${
|
||||
expandedSessions.has(session.id)
|
||||
? 'text-red-500 bg-red-50 hover:text-red-600 hover:bg-red-100'
|
||||
: 'text-slate-400 hover:text-slate-600 hover:bg-slate-100'
|
||||
? 'text-red-500 bg-red-50 hover:text-red-600 hover:bg-red-100 dark:bg-red-950/30 dark:text-red-300 dark:hover:bg-red-950/40'
|
||||
: 'text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:text-slate-500 dark:hover:text-slate-300 dark:hover:bg-slate-800'
|
||||
}`}
|
||||
title={translate('::App.Listforms.ImportManager.ViewExecutionDetails')}
|
||||
>
|
||||
|
|
@ -607,7 +609,7 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
}
|
||||
}
|
||||
}}
|
||||
className="p-2 rounded-lg transition-colors text-slate-400 hover:text-blue-500 hover:bg-blue-50"
|
||||
className="p-2 rounded-lg transition-colors text-slate-400 hover:text-blue-500 hover:bg-blue-50 dark:text-slate-500 dark:hover:text-blue-300 dark:hover:bg-blue-950/30"
|
||||
title={translate('::App.Listforms.ImportManager.RefreshExecutionDetails')}
|
||||
>
|
||||
<FaSync className="w-4 h-4" />
|
||||
|
|
@ -623,8 +625,8 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
disabled={currentSession?.id === session.id}
|
||||
className={`p-2 rounded-lg transition-colors ${
|
||||
currentSession?.id === session.id
|
||||
? 'text-slate-300 cursor-not-allowed'
|
||||
: 'text-slate-400 hover:text-red-500 hover:bg-red-50'
|
||||
? 'text-slate-300 dark:text-slate-600 cursor-not-allowed'
|
||||
: 'text-slate-400 hover:text-red-500 hover:bg-red-50 dark:text-slate-500 dark:hover:text-red-300 dark:hover:bg-red-950/30'
|
||||
}`}
|
||||
title={
|
||||
currentSession?.id === session.id
|
||||
|
|
@ -645,10 +647,10 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
session.status === 'executed_with_errors' ||
|
||||
session.status === 'failed' ||
|
||||
session.status === 'execute_failed'
|
||||
? 'bg-red-50 text-red-700 border border-red-200'
|
||||
? 'bg-red-50 text-red-700 border border-red-200 dark:bg-red-950/30 dark:text-red-300 dark:border-red-900/60'
|
||||
: session.status === 'uploaded'
|
||||
? 'bg-blue-50 text-blue-700 border border-blue-200'
|
||||
: 'bg-green-50 text-green-700 border border-green-200'
|
||||
? 'bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950/30 dark:text-blue-300 dark:border-blue-900/60'
|
||||
: 'bg-green-50 text-green-700 border border-green-200 dark:bg-green-950/30 dark:text-green-300 dark:border-green-900/60'
|
||||
}`}
|
||||
>
|
||||
<span className="mt-0.5 flex-shrink-0">
|
||||
|
|
@ -668,10 +670,10 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
|
||||
{/* Execute Details Section */}
|
||||
{expandedSessions.has(session.id) && (
|
||||
<div className="mt-3 bg-gradient-to-r from-indigo-50 to-blue-50 border border-indigo-100 rounded-lg shadow-sm hover:shadow-md transition-shadow">
|
||||
<div className="mt-3 bg-gradient-to-r from-indigo-50 to-blue-50 dark:from-slate-800 dark:to-slate-800 border border-indigo-100 dark:border-slate-700 rounded-lg shadow-sm hover:shadow-md transition-shadow">
|
||||
<div className="p-3">
|
||||
{loadingExecutes.has(session.id) ? (
|
||||
<div className="flex items-center space-x-2 text-slate-500 py-2">
|
||||
<div className="flex items-center space-x-2 text-slate-500 dark:text-slate-400 py-2">
|
||||
<FaSync className="w-4 h-4 animate-spin" />
|
||||
<span className="text-sm">
|
||||
{translate('::App.Listforms.ImportManager.LoadingExecutionDetails')}
|
||||
|
|
@ -681,38 +683,38 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
sessionExecutes[session.id].length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{sessionExecutes[session.id].map((execute) => (
|
||||
<div key={execute.id} className="p-3 rounded-lg">
|
||||
<div key={execute.id} className="p-3 rounded-lg dark:bg-slate-900/40">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Sol: Tarih */}
|
||||
<div className="flex-shrink-0">
|
||||
<div className="text-lg text-slate-500">
|
||||
<div className="text-lg text-slate-500 dark:text-slate-400">
|
||||
{new Date(execute.creationTime).toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Orta: Executed, Valid, Errors */}
|
||||
<div className="flex items-center space-x-4 text-xs text-slate-600">
|
||||
<div className="flex items-center space-x-4 text-xs text-slate-600 dark:text-slate-400">
|
||||
<div className="text-center">
|
||||
<div className="font-medium text-slate-800">
|
||||
<div className="font-medium text-slate-800 dark:text-slate-100">
|
||||
{execute.execRows}
|
||||
</div>
|
||||
<div className="text-slate-500">
|
||||
<div className="text-slate-500 dark:text-slate-400">
|
||||
{translate('::App.Listforms.ImportManager.Executed')}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="font-medium text-green-600">
|
||||
<div className="font-medium text-green-600 dark:text-green-300">
|
||||
{execute.validRows}
|
||||
</div>
|
||||
<div className="text-slate-500">
|
||||
<div className="text-slate-500 dark:text-slate-400">
|
||||
{translate('::App.Listforms.ImportManager.Valid')}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="font-medium text-red-600">
|
||||
<div className="font-medium text-red-600 dark:text-red-300">
|
||||
{execute.errorRows}
|
||||
</div>
|
||||
<div className="text-slate-500">
|
||||
<div className="text-slate-500 dark:text-slate-400">
|
||||
{translate('::App.Listforms.ImportManager.Errors')}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -737,7 +739,7 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
<div className="mt-2">
|
||||
<button
|
||||
onClick={() => toggleErrors(execute.id)}
|
||||
className="flex items-center space-x-1 text-xs text-orange-600 hover:text-orange-700 font-medium"
|
||||
className="flex items-center space-x-1 text-xs text-orange-600 hover:text-orange-700 dark:text-orange-300 dark:hover:text-orange-200 font-medium"
|
||||
>
|
||||
{expandedErrors.has(execute.id) ? (
|
||||
<FaChevronUp className="w-3 h-3" />
|
||||
|
|
@ -751,26 +753,29 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
</button>
|
||||
|
||||
{expandedErrors.has(execute.id) && (
|
||||
<div className="mt-2 max-h-48 overflow-y-auto rounded border border-orange-200 bg-orange-50">
|
||||
<div className="mt-2 max-h-48 overflow-y-auto rounded border border-orange-200 bg-orange-50 dark:border-orange-900/60 dark:bg-orange-950/30">
|
||||
{parseErrors(execute.errorsJson).length > 0 ? (
|
||||
<table className="w-full text-xs">
|
||||
<thead className="bg-orange-100 sticky top-0">
|
||||
<thead className="bg-orange-100 dark:bg-orange-950/50 sticky top-0">
|
||||
<tr>
|
||||
<th className="px-3 py-1 text-left font-medium text-orange-700 w-16">
|
||||
<th className="px-3 py-1 text-left font-medium text-orange-700 dark:text-orange-300 w-16">
|
||||
Satır
|
||||
</th>
|
||||
<th className="px-3 py-1 text-left font-medium text-orange-700">
|
||||
<th className="px-3 py-1 text-left font-medium text-orange-700 dark:text-orange-300">
|
||||
Hata Mesajı
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-orange-100">
|
||||
<tbody className="divide-y divide-orange-100 dark:divide-orange-900/50">
|
||||
{parseErrors(execute.errorsJson).map((err, idx) => (
|
||||
<tr key={idx} className="hover:bg-orange-100">
|
||||
<td className="px-3 py-1 text-orange-700 font-medium">
|
||||
<tr
|
||||
key={idx}
|
||||
className="hover:bg-orange-100 dark:hover:bg-orange-950/50"
|
||||
>
|
||||
<td className="px-3 py-1 text-orange-700 dark:text-orange-300 font-medium">
|
||||
{err.row}
|
||||
</td>
|
||||
<td className="px-3 py-1 text-slate-700">
|
||||
<td className="px-3 py-1 text-slate-700 dark:text-slate-200">
|
||||
{err.message}
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -778,7 +783,7 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<p className="px-3 py-2 text-orange-600">
|
||||
<p className="px-3 py-2 text-orange-600 dark:text-orange-300">
|
||||
Hata detayı mevcut değil.
|
||||
</p>
|
||||
)}
|
||||
|
|
@ -790,7 +795,7 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-slate-500 py-2">
|
||||
<div className="text-sm text-slate-500 dark:text-slate-400 py-2">
|
||||
{translate('::App.Listforms.ImportManager.NoExecutionRecords')}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -801,8 +806,8 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
))}
|
||||
|
||||
{importHistory.length === 0 && (
|
||||
<div className="p-12 text-center text-slate-500">
|
||||
<FaClock className="w-12 h-12 mx-auto mb-4 text-slate-300" />
|
||||
<div className="p-12 text-center text-slate-500 dark:text-slate-400">
|
||||
<FaClock className="w-12 h-12 mx-auto mb-4 text-slate-300 dark:text-slate-600" />
|
||||
<div className="text-lg font-medium mb-2">
|
||||
{translate('::App.Listforms.ImportManager.NoImportHistory')}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -100,13 +100,13 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
|
|||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'uploaded':
|
||||
return 'text-green-600 bg-green-50 border-green-200'
|
||||
return 'text-green-600 bg-green-50 border-green-200 dark:text-green-300 dark:bg-green-950/30 dark:border-green-900/60'
|
||||
case 'failed':
|
||||
return 'text-red-600 bg-red-50 border-red-200'
|
||||
return 'text-red-600 bg-red-50 border-red-200 dark:text-red-300 dark:bg-red-950/30 dark:border-red-900/60'
|
||||
case 'validating':
|
||||
return 'text-yellow-600 bg-yellow-50 border-yellow-200'
|
||||
return 'text-yellow-600 bg-yellow-50 border-yellow-200 dark:text-yellow-300 dark:bg-yellow-950/30 dark:border-yellow-900/60'
|
||||
default:
|
||||
return 'text-blue-600 bg-blue-50 border-blue-200'
|
||||
return 'text-blue-600 bg-blue-50 border-blue-200 dark:text-blue-300 dark:bg-blue-950/30 dark:border-blue-900/60'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -145,14 +145,14 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-200">
|
||||
<div className="bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
|
||||
{/* Header */}
|
||||
<div className="p-3 border-b border-slate-200">
|
||||
<div className="p-3 border-b border-slate-200 dark:border-slate-700">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-center gap-4">
|
||||
{/* Başlık kısmı - Üstte mobile, solda desktop */}
|
||||
<div className="flex items-center order-1 lg:order-none">
|
||||
<FaEye className="w-5 h-5 mr-2 text-blue-500" />
|
||||
<h3 className="text-xl font-semibold text-slate-800">
|
||||
<h3 className="text-xl font-semibold text-slate-800 dark:text-slate-100">
|
||||
{translate('::App.Listforms.ImportManager.ImportPreviewTitle')}
|
||||
</h3>
|
||||
</div>
|
||||
|
|
@ -160,9 +160,9 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
|
|||
{/* İstatistik kartları - Mobile'da alt alta, desktop'ta yan yana */}
|
||||
<div className="order-3 lg:order-none lg:absolute lg:left-1/2 lg:transform lg:-translate-x-1/2">
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-2">
|
||||
<div className="text-center px-3 py-1 bg-blue-50 rounded-full border border-blue-200 font-bold text-blue-600">
|
||||
<div className="text-center px-3 py-1 bg-blue-50 dark:bg-blue-950/30 rounded-full border border-blue-200 dark:border-blue-900/60 font-bold text-blue-600 dark:text-blue-300">
|
||||
{previewData?.rows?.length || session.totalRows || 0}{' '}
|
||||
<span className="text-xs text-blue-700">
|
||||
<span className="text-xs text-blue-700 dark:text-blue-300">
|
||||
{translate('::App.Listforms.ImportManager.TotalRows')}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -184,16 +184,16 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
|
|||
|
||||
{/* Preview Data */}
|
||||
{previewData && previewData.headers && previewData.headers.length > 0 ? (
|
||||
<div className="p-3 border-b border-slate-200">
|
||||
<h4 className="font-semibold text-slate-800 mb-4">
|
||||
<div className="p-3 border-b border-slate-200 dark:border-slate-700">
|
||||
<h4 className="font-semibold text-slate-800 dark:text-slate-100 mb-4">
|
||||
{translate('::App.Listforms.ImportManager.DataPreviewTitle')}
|
||||
</h4>
|
||||
|
||||
<div className="overflow-auto border border-slate-200 rounded-lg max-h-90">
|
||||
<div className="overflow-auto border border-slate-200 dark:border-slate-700 rounded-lg max-h-90">
|
||||
<table className="w-full text-sm min-w-full">
|
||||
<thead className="bg-slate-50 sticky top-0 z-10">
|
||||
<thead className="bg-slate-50 dark:bg-slate-800 sticky top-0 z-10">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left font-medium text-slate-700 whitespace-nowrap w-12">
|
||||
<th className="px-4 py-2 text-left font-medium text-slate-700 dark:text-slate-200 whitespace-nowrap w-12">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectAll}
|
||||
|
|
@ -204,19 +204,19 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
|
|||
{previewData.headers.map((header: string, index: number) => (
|
||||
<th
|
||||
key={index}
|
||||
className="px-4 py-2 text-left font-medium text-slate-700 whitespace-nowrap"
|
||||
className="px-4 py-2 text-left font-medium text-slate-700 dark:text-slate-200 whitespace-nowrap"
|
||||
>
|
||||
{header}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
<tbody className="divide-y divide-slate-100 dark:divide-slate-800">
|
||||
{previewData.rows.map((row: any[], rowIndex: number) => (
|
||||
<tr
|
||||
key={rowIndex}
|
||||
className={`hover:bg-slate-50 ${
|
||||
selectedRows.includes(rowIndex) ? 'bg-blue-50' : ''
|
||||
className={`hover:bg-slate-50 dark:hover:bg-slate-800/70 ${
|
||||
selectedRows.includes(rowIndex) ? 'bg-blue-50 dark:bg-blue-950/30' : ''
|
||||
}`}
|
||||
>
|
||||
<td className="px-4 py-2">
|
||||
|
|
@ -230,7 +230,7 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
|
|||
{row.map((cell, cellIndex) => (
|
||||
<td
|
||||
key={cellIndex}
|
||||
className="px-4 py-2 text-slate-600 whitespace-nowrap max-w-xs truncate"
|
||||
className="px-4 py-2 text-slate-600 dark:text-slate-300 whitespace-nowrap max-w-xs truncate"
|
||||
>
|
||||
{cell?.toString() || '-'}
|
||||
</td>
|
||||
|
|
@ -242,25 +242,25 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
|
|||
</div>
|
||||
</div>
|
||||
) : previewData && previewData.headers && previewData.headers.length === 0 ? (
|
||||
<div className="p-6 border-b border-slate-200">
|
||||
<div className="p-6 border-b border-slate-200 dark:border-slate-700">
|
||||
<div className="text-center py-8">
|
||||
<FaExclamationTriangle className="w-12 h-12 mx-auto mb-4 text-yellow-500" />
|
||||
<h4 className="font-semibold text-slate-800 mb-2">
|
||||
<h4 className="font-semibold text-slate-800 dark:text-slate-100 mb-2">
|
||||
{translate('::App.Listforms.ImportManager.NoDataFoundTitle')}
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
<p className="text-slate-600 dark:text-slate-400">
|
||||
{translate('::App.Listforms.ImportManager.NoDataFoundDescription')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-6 border-b border-slate-200">
|
||||
<div className="p-6 border-b border-slate-200 dark:border-slate-700">
|
||||
<div className="text-center py-8">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-4"></div>
|
||||
<h4 className="font-semibold text-slate-800 mb-2">
|
||||
<h4 className="font-semibold text-slate-800 dark:text-slate-100 mb-2">
|
||||
{translate('::App.Listforms.ImportManager.LoadingPreviewTitle')}
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
<p className="text-slate-600 dark:text-slate-400">
|
||||
{translate('::App.Listforms.ImportManager.LoadingPreviewDescription')}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -271,8 +271,8 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
|
|||
<div className="p-3">
|
||||
{/* Success Message */}
|
||||
{showSuccessMessage && lastExecutionResult && (
|
||||
<div className="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg">
|
||||
<div className="flex items-center space-x-2 text-green-700">
|
||||
<div className="mb-4 p-4 bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-900/60 rounded-lg">
|
||||
<div className="flex items-center space-x-2 text-green-700 dark:text-green-300">
|
||||
<FaCheckCircle className="w-5 h-5" />
|
||||
<span className="font-medium">
|
||||
{translate('::App.Listforms.ImportManager.ImportProgress.Status.Uploaded')}{' '}
|
||||
|
|
@ -286,7 +286,7 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
|
|||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
{selectedRows.length === 0 && (previewData?.rows?.length || 0) > 0 && (
|
||||
<div className="flex items-center space-x-2 text-orange-600">
|
||||
<div className="flex items-center space-x-2 text-orange-600 dark:text-orange-300">
|
||||
<FaExclamationTriangle className="w-5 h-5" />
|
||||
<span className="font-medium">
|
||||
{translate('::App.Listforms.ImportManager.SelectRowsWarning')}
|
||||
|
|
@ -295,7 +295,7 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
|
|||
)}
|
||||
|
||||
{selectedRows.length > 0 && (
|
||||
<div className="flex items-center space-x-2 text-blue-600">
|
||||
<div className="flex items-center space-x-2 text-blue-600 dark:text-blue-300">
|
||||
<FaCheckCircle className="w-5 h-5" />
|
||||
<span className="font-medium">
|
||||
{selectedRows.length} {translate('::App.Listforms.ImportManager.RowsSelected')}
|
||||
|
|
@ -304,7 +304,7 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
|
|||
)}
|
||||
|
||||
{(previewData?.rows?.length || 0) === 0 && (
|
||||
<div className="flex items-center space-x-2 text-red-600">
|
||||
<div className="flex items-center space-x-2 text-red-600 dark:text-red-300">
|
||||
<FaExclamationTriangle className="w-5 h-5" />
|
||||
<span className="font-medium">
|
||||
{translate('::App.Listforms.ImportManager.NoRowsAvailable')}
|
||||
|
|
@ -314,7 +314,7 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
|
|||
</div>
|
||||
|
||||
<div className="flex space-x-3">
|
||||
<button className="px-4 py-2 text-slate-600 hover:text-slate-800 hover:bg-slate-100 rounded-lg transition-colors flex items-center space-x-2">
|
||||
<button className="px-4 py-2 text-slate-600 hover:text-slate-800 hover:bg-slate-100 dark:text-slate-300 dark:hover:text-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors flex items-center space-x-2">
|
||||
<FaTimes className="w-4 h-4" />
|
||||
<span>{translate('::Cancel')}</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -59,15 +59,17 @@ export const ImportProgress: React.FC<ImportProgressProps> = ({ session }) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
|
||||
<div className="bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
|
||||
<div className="text-center space-y-6">
|
||||
{/* Status Icon */}
|
||||
<div className="flex justify-center">{getStatusIcon()}</div>
|
||||
|
||||
{/* Status Message */}
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-2">{getStatusMessage()}</h3>
|
||||
<p className="text-slate-600">
|
||||
<h3 className="text-xl font-semibold text-slate-800 dark:text-slate-100 mb-2">
|
||||
{getStatusMessage()}
|
||||
</h3>
|
||||
<p className="text-slate-600 dark:text-slate-400">
|
||||
{translate('::App.Listforms.Status.Processing')}{' '}
|
||||
{session.blobName}
|
||||
</p>
|
||||
|
|
@ -75,11 +77,11 @@ export const ImportProgress: React.FC<ImportProgressProps> = ({ session }) => {
|
|||
|
||||
{/* Progress Bar */}
|
||||
<div className="w-full max-w-md mx-auto">
|
||||
<div className="flex justify-between text-sm text-slate-600 mb-2">
|
||||
<div className="flex justify-between text-sm text-slate-600 dark:text-slate-400 mb-2">
|
||||
<span>{translate('::App.Listforms.ImportManager.ImportProgress.ProgressLabel')}</span>
|
||||
<span>{Math.round(getProgressPercentage())}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-slate-200 rounded-full h-2">
|
||||
<div className="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-500 h-2 rounded-full transition-all duration-300 ease-out"
|
||||
style={{ width: `${getProgressPercentage()}%` }}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,19 @@ const DialogContext = createContext<DialogContextValue>({ isMaximized: false })
|
|||
|
||||
export const useDialogContext = () => useContext(DialogContext)
|
||||
|
||||
const DialogHeader = ({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children?: ReactNode
|
||||
className?: string
|
||||
}) => (
|
||||
<div className={classNames('dialog-header', className)}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
DialogHeader.displayName = 'Dialog.Header'
|
||||
|
||||
const DialogBody = ({
|
||||
children,
|
||||
className,
|
||||
|
|
@ -24,14 +37,8 @@ const DialogBody = ({
|
|||
children?: ReactNode
|
||||
className?: string
|
||||
}) => {
|
||||
const { isMaximized } = useContext(DialogContext)
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
isMaximized && 'flex-1 min-h-0 flex flex-col overflow-hidden',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className={classNames('dialog-body', className)}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
|
@ -45,9 +52,8 @@ const DialogFooter = ({
|
|||
children?: ReactNode
|
||||
className?: string
|
||||
}) => {
|
||||
const { isMaximized } = useContext(DialogContext)
|
||||
return (
|
||||
<div className={classNames(isMaximized && 'flex-shrink-0', className)}>
|
||||
<div className={classNames('dialog-footer', className)}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
|
@ -231,13 +237,7 @@ const Dialog = (props: DialogProps) => {
|
|||
{closable && !showWindowControls && renderCloseButton}
|
||||
{closable && showWindowControls && renderWindowControls}
|
||||
<DialogContext.Provider value={{ isMaximized }}>
|
||||
{isMaximized ? (
|
||||
<div className="flex-1 min-h-0 flex flex-col overflow-hidden">
|
||||
{children}
|
||||
</div>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
{children}
|
||||
</DialogContext.Provider>
|
||||
</motion.div>
|
||||
</Modal>
|
||||
|
|
@ -247,11 +247,13 @@ const Dialog = (props: DialogProps) => {
|
|||
Dialog.displayName = 'Dialog'
|
||||
|
||||
type DialogType = typeof Dialog & {
|
||||
Header: typeof DialogHeader
|
||||
Body: typeof DialogBody
|
||||
Footer: typeof DialogFooter
|
||||
}
|
||||
|
||||
const DialogWithSubComponents = Dialog as DialogType
|
||||
DialogWithSubComponents.Header = DialogHeader
|
||||
DialogWithSubComponents.Body = DialogBody
|
||||
DialogWithSubComponents.Footer = DialogFooter
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { SelectBoxOption } from '@/types/shared'
|
|||
import { Field, FieldProps, FormikErrors, FormikTouched, useFormikContext } from 'formik'
|
||||
import { useState } from 'react'
|
||||
import CreatableSelect from 'react-select/creatable'
|
||||
import { FaArrowLeft, FaArrowRight, FaPlus } from 'react-icons/fa'
|
||||
import { FaArrowLeft, FaArrowRight, FaPlus, FaTable } from 'react-icons/fa'
|
||||
import { dbSourceTypeOptions, listFormDefaultLayoutOptions, selectCommandTypeOptions, sqlDataTypeToDbType } from '../edit/options'
|
||||
import { ListFormWizardDto } from '@/proxy/admin/wizard/models'
|
||||
import SqlTableDesignerDialog from '@/views/developerKit/SqlTableDesignerDialog'
|
||||
|
|
@ -68,8 +68,35 @@ const WizardStep2 = ({
|
|||
onNext,
|
||||
}: WizardStep2Props) => {
|
||||
const [showTableDesignerDialog, setShowTableDesignerDialog] = useState(false)
|
||||
const [designTableData, setDesignTableData] = useState<{
|
||||
schemaName: string
|
||||
tableName: string
|
||||
} | null>(null)
|
||||
const formik = useFormikContext<ListFormWizardDto>()
|
||||
|
||||
const selectedTable = values.selectCommand
|
||||
? dbObjects?.tables.find(
|
||||
(table) =>
|
||||
table.tableName === values.selectCommand ||
|
||||
table.fullName === values.selectCommand ||
|
||||
`${table.schemaName}.${table.tableName}` === values.selectCommand,
|
||||
)
|
||||
: undefined
|
||||
|
||||
const handleNewTable = () => {
|
||||
setDesignTableData(null)
|
||||
setShowTableDesignerDialog(true)
|
||||
}
|
||||
|
||||
const handleDesignTable = () => {
|
||||
if (!selectedTable) return
|
||||
setDesignTableData({
|
||||
schemaName: selectedTable.schemaName,
|
||||
tableName: selectedTable.tableName,
|
||||
})
|
||||
setShowTableDesignerDialog(true)
|
||||
}
|
||||
|
||||
const handleTableDeployed = async (table: { schemaName: string; tableName: string }) => {
|
||||
await onDbObjectsRefresh(values.dataSourceCode)
|
||||
formik.setFieldValue('selectCommand', table.tableName)
|
||||
|
|
@ -283,10 +310,19 @@ const WizardStep2 = ({
|
|||
variant="solid"
|
||||
icon={<FaPlus />}
|
||||
disabled={!values.dataSourceCode}
|
||||
onClick={() => setShowTableDesignerDialog(true)}
|
||||
onClick={handleNewTable}
|
||||
>
|
||||
New Table
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="default"
|
||||
icon={<FaTable />}
|
||||
disabled={!values.dataSourceCode || !selectedTable}
|
||||
onClick={handleDesignTable}
|
||||
>
|
||||
Design Table
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
|
|
@ -832,9 +868,12 @@ const WizardStep2 = ({
|
|||
|
||||
<SqlTableDesignerDialog
|
||||
isOpen={showTableDesignerDialog}
|
||||
onClose={() => setShowTableDesignerDialog(false)}
|
||||
onClose={() => {
|
||||
setShowTableDesignerDialog(false)
|
||||
setDesignTableData(null)
|
||||
}}
|
||||
dataSource={values.dataSourceCode}
|
||||
initialTableData={null}
|
||||
initialTableData={designTableData}
|
||||
onDeployed={handleTableDeployed}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -196,34 +196,56 @@ function WizardStep6({
|
|||
|
||||
const resetDemo = () => {
|
||||
const startId = uniqueCriteriaId([])
|
||||
const approvalId = uniqueCriteriaId([], [startId])
|
||||
const endId = uniqueCriteriaId([], [startId, approvalId])
|
||||
const approval1Id = uniqueCriteriaId([], [startId])
|
||||
const approval2Id = uniqueCriteriaId([], [startId, approval1Id])
|
||||
const informId = uniqueCriteriaId([], [startId, approval1Id, approval2Id])
|
||||
const endId = uniqueCriteriaId([], [startId, approval1Id, approval2Id, informId])
|
||||
updateCriteria([
|
||||
{
|
||||
...normalizeCriteria(emptyCriteria('Start', listFormCode)),
|
||||
id: startId,
|
||||
nodeId: startId,
|
||||
title: uniqueCriteriaTitle('Start', []),
|
||||
nextOnStart: approvalId,
|
||||
positionX: 72,
|
||||
positionY: 160,
|
||||
title: 'İş Akışı Başlat1',
|
||||
nextOnStart: approval1Id,
|
||||
positionX: 34,
|
||||
positionY: 28,
|
||||
} as WorkflowCriteriaDto,
|
||||
{
|
||||
...normalizeCriteria(emptyCriteria('Approval', listFormCode)),
|
||||
id: approvalId,
|
||||
nodeId: approvalId,
|
||||
title: uniqueCriteriaTitle('Approval', []),
|
||||
nextOnApprove: endId,
|
||||
positionX: 360,
|
||||
positionY: 160,
|
||||
id: approval1Id,
|
||||
nodeId: approval1Id,
|
||||
title: 'Onay1',
|
||||
nextOnApprove: approval2Id,
|
||||
nextOnReject: informId,
|
||||
positionX: 323,
|
||||
positionY: 28,
|
||||
} as WorkflowCriteriaDto,
|
||||
{
|
||||
...normalizeCriteria(emptyCriteria('Approval', listFormCode)),
|
||||
id: approval2Id,
|
||||
nodeId: approval2Id,
|
||||
title: 'Onay2',
|
||||
nextOnApprove: informId,
|
||||
nextOnReject: informId,
|
||||
positionX: 586,
|
||||
positionY: 28,
|
||||
} as WorkflowCriteriaDto,
|
||||
{
|
||||
...normalizeCriteria(emptyCriteria('Inform', listFormCode)),
|
||||
id: informId,
|
||||
nodeId: informId,
|
||||
title: 'Bilgilendirme1',
|
||||
nextOnStart: endId,
|
||||
positionX: 458,
|
||||
positionY: 336,
|
||||
} as WorkflowCriteriaDto,
|
||||
{
|
||||
...normalizeCriteria(emptyCriteria('End', listFormCode)),
|
||||
id: endId,
|
||||
nodeId: endId,
|
||||
title: uniqueCriteriaTitle('End', []),
|
||||
positionX: 650,
|
||||
positionY: 160,
|
||||
title: 'İş Akışı Bitir1',
|
||||
positionX: 792,
|
||||
positionY: 336,
|
||||
} as WorkflowCriteriaDto,
|
||||
])
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
import classNames from 'classnames'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { Button, Dialog, Notification, toast, Checkbox } from '@/components/ui'
|
||||
import { useDialogContext } from '@/components/ui/Dialog/Dialog'
|
||||
import {
|
||||
FaPlus,
|
||||
FaTrash,
|
||||
|
|
@ -835,9 +834,8 @@ const STEPS = ['Sütun Tasarımı', 'Entity Ayarları', 'Index / Key', 'İlişki
|
|||
type Step = 0 | 1 | 2 | 3 | 4
|
||||
|
||||
function StepContentWrapper({ children }: { children: React.ReactNode }) {
|
||||
const { isMaximized } = useDialogContext()
|
||||
return (
|
||||
<div className={isMaximized ? 'flex-1 min-h-0 overflow-auto' : 'min-h-[420px]'}>
|
||||
<div className="min-h-[420px] flex flex-col">
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
|
@ -1810,7 +1808,7 @@ const SqlTableDesignerDialog = ({
|
|||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-1 max-h-80 overflow-y-auto pr-1">
|
||||
<div className="flex flex-col gap-1 pr-1">
|
||||
{columns.map((col, idx) => {
|
||||
const isDuplicate =
|
||||
col.columnName.trim() !== '' &&
|
||||
|
|
@ -2741,7 +2739,7 @@ const SqlTableDesignerDialog = ({
|
|||
|
||||
return (
|
||||
<Dialog isOpen={isOpen} onClose={handleClose} onRequestClose={handleClose} width={1100}>
|
||||
<Dialog.Body className="flex flex-col gap-2">
|
||||
<Dialog.Header className="flex flex-col gap-2">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 border-b pb-3 flex-shrink-0">
|
||||
<FaTable className="text-2xl text-blue-500" />
|
||||
|
|
@ -2761,7 +2759,9 @@ const SqlTableDesignerDialog = ({
|
|||
|
||||
{/* Steps */}
|
||||
<div className="flex-shrink-0">{renderStepIndicator()}</div>
|
||||
</Dialog.Header>
|
||||
|
||||
<Dialog.Body className="flex flex-col gap-2">
|
||||
{/* Content */}
|
||||
<StepContentWrapper>
|
||||
{step === 0 && renderColumnDesigner()}
|
||||
|
|
|
|||
|
|
@ -140,7 +140,9 @@ const getValueByField = (data: Record<string, any> = {}, field?: string) => {
|
|||
}
|
||||
|
||||
const shouldRunEditorScriptOnContentReady = (script?: string) =>
|
||||
Boolean(script && (script.includes('setEditorReadOnly') || script.includes('runtimeSetEditorReadOnly')))
|
||||
Boolean(
|
||||
script && (script.includes('setEditorReadOnly') || script.includes('runtimeSetEditorReadOnly')),
|
||||
)
|
||||
|
||||
const FormDevExpress = (props: {
|
||||
listFormCode: string
|
||||
|
|
@ -158,9 +160,15 @@ const FormDevExpress = (props: {
|
|||
const formItemsRef = useRef(formItems)
|
||||
const formInstanceRef = useRef<any>()
|
||||
const lastContentReadyScriptKeyRef = useRef<string>()
|
||||
const didAutoFocusRef = useRef(false)
|
||||
const [runtimeReadOnlyFields, setRuntimeReadOnlyFields] = useState<Record<string, boolean>>({})
|
||||
const runtimeReadOnlyFieldsRef = useRef<Record<string, boolean>>({})
|
||||
|
||||
const isTouchLikeDevice = () =>
|
||||
typeof window !== 'undefined' &&
|
||||
(window.matchMedia?.('(pointer: coarse)').matches ||
|
||||
window.matchMedia?.('(hover: none)').matches)
|
||||
|
||||
useEffect(() => {
|
||||
formDataRef.current = formData
|
||||
}, [formData])
|
||||
|
|
@ -173,6 +181,10 @@ const FormDevExpress = (props: {
|
|||
runtimeReadOnlyFieldsRef.current = runtimeReadOnlyFields
|
||||
}, [runtimeReadOnlyFields])
|
||||
|
||||
useEffect(() => {
|
||||
didAutoFocusRef.current = false
|
||||
}, [listFormCode, mode])
|
||||
|
||||
const setRuntimeEditorReadOnly = (field: string, readOnly: boolean) => {
|
||||
const resolvedField = findFormFieldKey(formItemsRef.current, field)
|
||||
const key = String(resolvedField || field || '').toLowerCase()
|
||||
|
|
@ -202,11 +214,7 @@ const FormDevExpress = (props: {
|
|||
setTimeout(() => setFormEditorReadOnly(formInstanceRef.current ?? form, field, readOnly), 0)
|
||||
}
|
||||
|
||||
const runEditorScript = (
|
||||
formItem: SimpleItemWithColData,
|
||||
eventValue: any,
|
||||
component?: any,
|
||||
) => {
|
||||
const runEditorScript = (formItem: SimpleItemWithColData, eventValue: any, component?: any) => {
|
||||
if (!formItem?.editorScript) {
|
||||
return
|
||||
}
|
||||
|
|
@ -250,7 +258,9 @@ const FormDevExpress = (props: {
|
|||
const prevOnValueChanged = formItem.editorOptions?.onValueChanged
|
||||
|
||||
return {
|
||||
...(index !== undefined && mode !== 'view' ? { autoFocus: index === 1 } : {}),
|
||||
...(index !== undefined && mode !== 'view' && !isTouchLikeDevice()
|
||||
? { autoFocus: index === 1 }
|
||||
: {}),
|
||||
...(formItem.editorType === 'dxDateBox'
|
||||
? {
|
||||
useMaskBehavior: true,
|
||||
|
|
@ -466,7 +476,6 @@ const FormDevExpress = (props: {
|
|||
setTimeout(() => {
|
||||
updateCascadeDisabledStates()
|
||||
}, 0)
|
||||
|
||||
}}
|
||||
onContentReady={(e) => {
|
||||
formInstanceRef.current = e.component
|
||||
|
|
@ -478,7 +487,8 @@ const FormDevExpress = (props: {
|
|||
const groupItems = e.component.option('items') as any[]
|
||||
const firstItem = groupItems?.[0]?.items?.[0]
|
||||
|
||||
if (firstItem?.dataField) {
|
||||
if (!didAutoFocusRef.current && firstItem?.dataField && !isTouchLikeDevice()) {
|
||||
didAutoFocusRef.current = true
|
||||
const editor = e.component.getEditor(firstItem.dataField)
|
||||
mode !== 'view' && editor?.focus()
|
||||
}
|
||||
|
|
@ -492,98 +502,100 @@ const FormDevExpress = (props: {
|
|||
colSpan={formGroupItem.colSpan}
|
||||
caption={formGroupItem.caption}
|
||||
>
|
||||
{(formGroupItem.items as SimpleItemWithColData[])?.filter((formItem) => {
|
||||
if (mode === 'edit') return formItem.allowEditing !== false
|
||||
if (mode === 'new') return formItem.allowAdding !== false
|
||||
return true
|
||||
}).map((formItem, i) => {
|
||||
return formItem.editorType2 === PlatformEditorTypes.dxTagBox ? (
|
||||
<SimpleItemDx
|
||||
cssClass="font-semibold"
|
||||
key={getFormItemKey(formItem, i)}
|
||||
{...formItem}
|
||||
render={() => (
|
||||
<TagBoxEditorComponent
|
||||
value={formData[formItem.dataField!] || []}
|
||||
setDefaultValue={false}
|
||||
values={formData}
|
||||
options={formItem.tagBoxOptions}
|
||||
col={formItem.colData}
|
||||
onValueChanged={(e: any) => {
|
||||
const newData = { ...formDataRef.current, [formItem.dataField!]: e }
|
||||
formDataRef.current = newData
|
||||
setFormData(newData)
|
||||
runEditorScript(formItem, e, formInstanceRef.current)
|
||||
}}
|
||||
editorOptions={getEditorOptions(formItem)}
|
||||
></TagBoxEditorComponent>
|
||||
)}
|
||||
label={{
|
||||
text: translate('::' + formItem.colData?.captionName),
|
||||
className: 'font-semibold',
|
||||
}}
|
||||
></SimpleItemDx>
|
||||
) : formItem.editorType2 === PlatformEditorTypes.dxGridBox ? (
|
||||
<SimpleItemDx
|
||||
cssClass="font-semibold"
|
||||
key={getFormItemKey(formItem, i)}
|
||||
{...formItem}
|
||||
render={() => (
|
||||
<GridBoxEditorComponent
|
||||
value={formData[formItem.dataField!] || []}
|
||||
values={formData}
|
||||
options={formItem.gridBoxOptions}
|
||||
col={formItem.colData}
|
||||
onValueChanged={(e: any) => {
|
||||
const newData = { ...formDataRef.current, [formItem.dataField!]: e }
|
||||
formDataRef.current = newData
|
||||
setFormData(newData)
|
||||
runEditorScript(formItem, e, formInstanceRef.current)
|
||||
}}
|
||||
editorOptions={getEditorOptions(formItem)}
|
||||
></GridBoxEditorComponent>
|
||||
)}
|
||||
label={{
|
||||
text: translate('::' + formItem.colData?.captionName),
|
||||
className: 'font-semibold',
|
||||
}}
|
||||
></SimpleItemDx>
|
||||
) : formItem.editorType2 === PlatformEditorTypes.dxImageUpload ? (
|
||||
<SimpleItemDx
|
||||
cssClass="font-semibold"
|
||||
key={getFormItemKey(formItem, i)}
|
||||
dataField={formItem.dataField}
|
||||
name={formItem.name}
|
||||
colSpan={formItem.colSpan}
|
||||
isRequired={formItem.isRequired}
|
||||
render={() => (
|
||||
<ImageUploadEditorComponent
|
||||
value={formData[formItem.dataField!]}
|
||||
options={formItem.imageUploadOptions}
|
||||
onValueChanged={(val: any) => {
|
||||
const newData = { ...formDataRef.current, [formItem.dataField!]: val }
|
||||
formDataRef.current = newData
|
||||
setFormData(newData)
|
||||
runEditorScript(formItem, val, formInstanceRef.current)
|
||||
}}
|
||||
editorOptions={getEditorOptions(formItem)}
|
||||
/>
|
||||
)}
|
||||
label={{
|
||||
text: translate('::' + formItem.colData?.captionName),
|
||||
className: 'font-semibold',
|
||||
}}
|
||||
></SimpleItemDx>
|
||||
) : (
|
||||
<SimpleItemDx
|
||||
cssClass="font-semibold"
|
||||
key={getFormItemKey(formItem, i)}
|
||||
{...formItem}
|
||||
editorOptions={getEditorOptions(formItem, i)}
|
||||
label={{ text: translate('::' + formItem.colData?.captionName) }}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
{(formGroupItem.items as SimpleItemWithColData[])
|
||||
?.filter((formItem) => {
|
||||
if (mode === 'edit') return formItem.allowEditing !== false
|
||||
if (mode === 'new') return formItem.allowAdding !== false
|
||||
return true
|
||||
})
|
||||
.map((formItem, i) => {
|
||||
return formItem.editorType2 === PlatformEditorTypes.dxTagBox ? (
|
||||
<SimpleItemDx
|
||||
cssClass="font-semibold"
|
||||
key={getFormItemKey(formItem, i)}
|
||||
{...formItem}
|
||||
render={() => (
|
||||
<TagBoxEditorComponent
|
||||
value={formData[formItem.dataField!] || []}
|
||||
setDefaultValue={false}
|
||||
values={formData}
|
||||
options={formItem.tagBoxOptions}
|
||||
col={formItem.colData}
|
||||
onValueChanged={(e: any) => {
|
||||
const newData = { ...formDataRef.current, [formItem.dataField!]: e }
|
||||
formDataRef.current = newData
|
||||
setFormData(newData)
|
||||
runEditorScript(formItem, e, formInstanceRef.current)
|
||||
}}
|
||||
editorOptions={getEditorOptions(formItem)}
|
||||
></TagBoxEditorComponent>
|
||||
)}
|
||||
label={{
|
||||
text: translate('::' + formItem.colData?.captionName),
|
||||
className: 'font-semibold',
|
||||
}}
|
||||
></SimpleItemDx>
|
||||
) : formItem.editorType2 === PlatformEditorTypes.dxGridBox ? (
|
||||
<SimpleItemDx
|
||||
cssClass="font-semibold"
|
||||
key={getFormItemKey(formItem, i)}
|
||||
{...formItem}
|
||||
render={() => (
|
||||
<GridBoxEditorComponent
|
||||
value={formData[formItem.dataField!] || []}
|
||||
values={formData}
|
||||
options={formItem.gridBoxOptions}
|
||||
col={formItem.colData}
|
||||
onValueChanged={(e: any) => {
|
||||
const newData = { ...formDataRef.current, [formItem.dataField!]: e }
|
||||
formDataRef.current = newData
|
||||
setFormData(newData)
|
||||
runEditorScript(formItem, e, formInstanceRef.current)
|
||||
}}
|
||||
editorOptions={getEditorOptions(formItem)}
|
||||
></GridBoxEditorComponent>
|
||||
)}
|
||||
label={{
|
||||
text: translate('::' + formItem.colData?.captionName),
|
||||
className: 'font-semibold',
|
||||
}}
|
||||
></SimpleItemDx>
|
||||
) : formItem.editorType2 === PlatformEditorTypes.dxImageUpload ? (
|
||||
<SimpleItemDx
|
||||
cssClass="font-semibold"
|
||||
key={getFormItemKey(formItem, i)}
|
||||
dataField={formItem.dataField}
|
||||
name={formItem.name}
|
||||
colSpan={formItem.colSpan}
|
||||
isRequired={formItem.isRequired}
|
||||
render={() => (
|
||||
<ImageUploadEditorComponent
|
||||
value={formData[formItem.dataField!]}
|
||||
options={formItem.imageUploadOptions}
|
||||
onValueChanged={(val: any) => {
|
||||
const newData = { ...formDataRef.current, [formItem.dataField!]: val }
|
||||
formDataRef.current = newData
|
||||
setFormData(newData)
|
||||
runEditorScript(formItem, val, formInstanceRef.current)
|
||||
}}
|
||||
editorOptions={getEditorOptions(formItem)}
|
||||
/>
|
||||
)}
|
||||
label={{
|
||||
text: translate('::' + formItem.colData?.captionName),
|
||||
className: 'font-semibold',
|
||||
}}
|
||||
></SimpleItemDx>
|
||||
) : (
|
||||
<SimpleItemDx
|
||||
cssClass="font-semibold"
|
||||
key={getFormItemKey(formItem, i)}
|
||||
{...formItem}
|
||||
editorOptions={getEditorOptions(formItem, i)}
|
||||
label={{ text: translate('::' + formItem.colData?.captionName) }}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</GroupItemDx>
|
||||
)
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,13 @@ import { layoutTypes } from '../admin/listForm/edit/types'
|
|||
import { useListFormCustomDataSource } from '../list/useListFormCustomDataSource'
|
||||
import { useListFormColumns } from '../list/useListFormColumns'
|
||||
|
||||
const flattenFormItems = (items: any[] = []): SimpleItemWithColData[] =>
|
||||
items.flatMap((item) => [
|
||||
...(item?.dataField ? [item] : []),
|
||||
...flattenFormItems(item?.items || []),
|
||||
...(item?.tabs || []).flatMap((tab: any) => flattenFormItems(tab?.items || [])),
|
||||
])
|
||||
|
||||
const useGridData = (props: {
|
||||
mode: RowMode
|
||||
listFormCode: string
|
||||
|
|
@ -41,6 +48,7 @@ const useGridData = (props: {
|
|||
const [permissionResults, setPermissionResults] = useState<PermissionResults>()
|
||||
|
||||
const refForm = useRef<FormRef>(null)
|
||||
const previousFormDataRef = useRef<any>()
|
||||
const [searchParams] = useSearchParams()
|
||||
const navigate = useNavigate()
|
||||
const { translate } = useLocalization()
|
||||
|
|
@ -306,18 +314,36 @@ const useGridData = (props: {
|
|||
setGridReady(true)
|
||||
}, [gridDto])
|
||||
|
||||
// formData değiştiğinde sadece lookup datasource'ları güncelle
|
||||
// formData değiştiğinde sadece etkilenen cascading lookup datasource'ları güncelle
|
||||
useEffect(() => {
|
||||
if (!gridDto || !formItems.length) {
|
||||
previousFormDataRef.current = formData
|
||||
return
|
||||
}
|
||||
|
||||
// View mode'da formData olsa da olmasa da cascading alanlar için dataSource oluşturulmalı
|
||||
const updatedItems = formItems.map((groupItem) => ({
|
||||
...groupItem,
|
||||
items: (groupItem.items as SimpleItemWithColData[])?.map((item) => {
|
||||
const previousFormData = previousFormDataRef.current
|
||||
const changedFields = previousFormData
|
||||
? Object.keys({ ...(previousFormData || {}), ...(formData || {}) }).filter(
|
||||
(field) => !Object.is(previousFormData?.[field], formData?.[field]),
|
||||
)
|
||||
: []
|
||||
|
||||
const shouldRefreshLookup = (item: SimpleItemWithColData) => {
|
||||
const cascadeParentFields = item.colData?.lookupDto?.cascadeParentFields
|
||||
?.split(',')
|
||||
.map((field: string) => field.trim())
|
||||
.filter(Boolean)
|
||||
|
||||
return (
|
||||
!previousFormData ||
|
||||
cascadeParentFields?.some((field: string) => changedFields.includes(field))
|
||||
)
|
||||
}
|
||||
|
||||
const updateItems = (items: any[] = []) =>
|
||||
items.map((item) => {
|
||||
const colData = gridDto.columnFormats.find((x) => x.fieldName === item.dataField)
|
||||
if (colData?.lookupDto?.dataSourceType) {
|
||||
if (colData?.lookupDto?.dataSourceType && shouldRefreshLookup(item)) {
|
||||
const currentDataSource = item.editorOptions?.dataSource
|
||||
const keepCustomDataSource =
|
||||
currentDataSource !== undefined && typeof currentDataSource?.load !== 'function'
|
||||
|
|
@ -330,16 +356,55 @@ const useGridData = (props: {
|
|||
dataSource: keepCustomDataSource
|
||||
? currentDataSource
|
||||
: getLookupDataSource(colData?.editorOptions, colData, formData || null),
|
||||
valueExpr: item.editorOptions?.valueExpr ?? colData?.lookupDto?.valueExpr?.toLowerCase(),
|
||||
valueExpr:
|
||||
item.editorOptions?.valueExpr ?? colData?.lookupDto?.valueExpr?.toLowerCase(),
|
||||
displayExpr:
|
||||
item.editorOptions?.displayExpr ?? colData?.lookupDto?.displayExpr?.toLowerCase(),
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
if (item?.items?.length) {
|
||||
return {
|
||||
...item,
|
||||
items: updateItems(item.items),
|
||||
}
|
||||
}
|
||||
|
||||
if (item?.tabs?.length) {
|
||||
return {
|
||||
...item,
|
||||
tabs: item.tabs.map((tab: any) => ({
|
||||
...tab,
|
||||
items: updateItems(tab.items),
|
||||
})),
|
||||
}
|
||||
}
|
||||
|
||||
return item
|
||||
}),
|
||||
})
|
||||
|
||||
const hasAffectedLookup =
|
||||
!previousFormData ||
|
||||
formItems
|
||||
.flatMap((group) => flattenFormItems([group]))
|
||||
.some((item) => item.colData?.lookupDto?.dataSourceType && shouldRefreshLookup(item))
|
||||
|
||||
if (!hasAffectedLookup) {
|
||||
previousFormDataRef.current = formData
|
||||
return
|
||||
}
|
||||
|
||||
const updatedItems = formItems.map((groupItem) => ({
|
||||
...groupItem,
|
||||
items: updateItems(groupItem.items as any[]),
|
||||
tabs: (groupItem as any).tabs?.map((tab: any) => ({
|
||||
...tab,
|
||||
items: updateItems(tab.items),
|
||||
})),
|
||||
}))
|
||||
|
||||
previousFormDataRef.current = formData
|
||||
setFormItems(updatedItems)
|
||||
}, [formData, gridDto])
|
||||
|
||||
|
|
|
|||
|
|
@ -239,7 +239,9 @@ const getValueByField = (data: Record<string, any> = {}, field?: string) => {
|
|||
}
|
||||
|
||||
const shouldRunEditorScriptOnContentReady = (script?: string) =>
|
||||
Boolean(script && (script.includes('setEditorReadOnly') || script.includes('runtimeSetEditorReadOnly')))
|
||||
Boolean(
|
||||
script && (script.includes('setEditorReadOnly') || script.includes('runtimeSetEditorReadOnly')),
|
||||
)
|
||||
|
||||
const Grid = (props: GridProps) => {
|
||||
const { listFormCode, searchParams, isSubForm, level, gridDto: extGridDto } = props
|
||||
|
|
@ -252,6 +254,7 @@ const Grid = (props: GridProps) => {
|
|||
const widgetGroupRef = useRef<HTMLDivElement>(null)
|
||||
const editingFormDataRef = useRef<Record<string, any>>({})
|
||||
const editingFormInstanceRef = useRef<any>()
|
||||
const lastEditingContentReadyScriptKeyRef = useRef<string>()
|
||||
// Edit popup state kaydetmeyi engellemek için flag
|
||||
const isEditingRef = useRef(false)
|
||||
|
||||
|
|
@ -1181,20 +1184,20 @@ const Grid = (props: GridProps) => {
|
|||
|
||||
if (listFormField?.sourceDbType === DbTypeEnum.Date) {
|
||||
Object.assign(defaultEditorOptions, {
|
||||
type: 'date',
|
||||
dateSerializationFormat: 'yyyy-MM-dd',
|
||||
displayFormat: 'shortDate',
|
||||
})
|
||||
type: 'date',
|
||||
dateSerializationFormat: 'yyyy-MM-dd',
|
||||
displayFormat: 'shortDate',
|
||||
})
|
||||
} else if (
|
||||
listFormField?.sourceDbType === DbTypeEnum.DateTime ||
|
||||
listFormField?.sourceDbType === DbTypeEnum.DateTime2 ||
|
||||
listFormField?.sourceDbType === DbTypeEnum.DateTimeOffset
|
||||
) {
|
||||
Object.assign(defaultEditorOptions, {
|
||||
type: 'datetime',
|
||||
dateSerializationFormat: 'yyyy-MM-ddTHH:mm:ss',
|
||||
displayFormat: 'shortDateShortTime',
|
||||
})
|
||||
type: 'datetime',
|
||||
dateSerializationFormat: 'yyyy-MM-ddTHH:mm:ss',
|
||||
displayFormat: 'shortDateShortTime',
|
||||
})
|
||||
}
|
||||
|
||||
// Her item'a placeholder olarak captionName ekle
|
||||
|
|
@ -1601,15 +1604,27 @@ const Grid = (props: GridProps) => {
|
|||
}
|
||||
|
||||
const runReadOnlyScripts = () => {
|
||||
const editorValues = gridDto.gridOptions.editingFormDto
|
||||
.flatMap((group) => flattenEditingFormItems([group]))
|
||||
.reduce<Record<string, any>>((values, formItem) => {
|
||||
const formItems = gridDto.gridOptions.editingFormDto.flatMap((group) =>
|
||||
flattenEditingFormItems([group]),
|
||||
)
|
||||
const scriptItems = formItems.filter((formItem) =>
|
||||
shouldRunEditorScriptOnContentReady(formItem.editorScript),
|
||||
)
|
||||
|
||||
if (!scriptItems.length) {
|
||||
return
|
||||
}
|
||||
|
||||
const editorValues = formItems.reduce<Record<string, any>>(
|
||||
(values, formItem) => {
|
||||
const editorInstance = form?.getEditor?.(formItem.dataField)
|
||||
if (editorInstance?.option) {
|
||||
values[formItem.dataField] = editorInstance.option('value')
|
||||
}
|
||||
return values
|
||||
}, {})
|
||||
},
|
||||
{},
|
||||
)
|
||||
const formData = {
|
||||
...editingFormDataRef.current,
|
||||
...(form?.option?.('formData') || {}),
|
||||
|
|
@ -1617,38 +1632,47 @@ const Grid = (props: GridProps) => {
|
|||
}
|
||||
editingFormDataRef.current = { ...formData }
|
||||
|
||||
gridDto.gridOptions.editingFormDto
|
||||
.flatMap((group) => flattenEditingFormItems([group]))
|
||||
.filter((formItem) =>
|
||||
shouldRunEditorScriptOnContentReady(formItem.editorScript),
|
||||
)
|
||||
.forEach((formItem) => {
|
||||
try {
|
||||
const editorInstance = form?.getEditor?.(formItem.dataField)
|
||||
const editorValue =
|
||||
editorInstance?.option?.('value') ??
|
||||
getValueByField(formData, formItem.dataField)
|
||||
const editor = {
|
||||
dataField: formItem.dataField,
|
||||
component: grid,
|
||||
}
|
||||
const e = {
|
||||
component: form,
|
||||
dataField: formItem.dataField,
|
||||
value: editorValue,
|
||||
}
|
||||
const scriptKey = `${mode}|${String(rowKey)}|${scriptItems
|
||||
.map((formItem) => formItem.dataField)
|
||||
.join('|')}|${JSON.stringify(formData)}`
|
||||
|
||||
executeEditorScript(formItem.editorScript!, {
|
||||
formData,
|
||||
e,
|
||||
editor,
|
||||
runtimeSetEditorReadOnly,
|
||||
setFormData,
|
||||
})
|
||||
} catch (err) {
|
||||
console.error('Script exec error on contentReady', formItem.dataField, err)
|
||||
if (lastEditingContentReadyScriptKeyRef.current === scriptKey) {
|
||||
return
|
||||
}
|
||||
|
||||
lastEditingContentReadyScriptKeyRef.current = scriptKey
|
||||
|
||||
scriptItems.forEach((formItem) => {
|
||||
try {
|
||||
const editorInstance = form?.getEditor?.(formItem.dataField)
|
||||
const editorValue =
|
||||
editorInstance?.option?.('value') ??
|
||||
getValueByField(formData, formItem.dataField)
|
||||
const editor = {
|
||||
dataField: formItem.dataField,
|
||||
component: grid,
|
||||
}
|
||||
})
|
||||
const e = {
|
||||
component: form,
|
||||
dataField: formItem.dataField,
|
||||
value: editorValue,
|
||||
}
|
||||
|
||||
executeEditorScript(formItem.editorScript!, {
|
||||
formData,
|
||||
e,
|
||||
editor,
|
||||
runtimeSetEditorReadOnly,
|
||||
setFormData,
|
||||
})
|
||||
} catch (err) {
|
||||
console.error(
|
||||
'Script exec error on contentReady',
|
||||
formItem.dataField,
|
||||
err,
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
runReadOnlyScripts()
|
||||
|
|
@ -1704,7 +1728,6 @@ const Grid = (props: GridProps) => {
|
|||
console.error('Script exec error', err)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
items:
|
||||
|
|
|
|||
|
|
@ -227,7 +227,9 @@ const getValueByField = (data: Record<string, any> = {}, field?: string) => {
|
|||
}
|
||||
|
||||
const shouldRunEditorScriptOnContentReady = (script?: string) =>
|
||||
Boolean(script && (script.includes('setEditorReadOnly') || script.includes('runtimeSetEditorReadOnly')))
|
||||
Boolean(
|
||||
script && (script.includes('setEditorReadOnly') || script.includes('runtimeSetEditorReadOnly')),
|
||||
)
|
||||
|
||||
const Tree = (props: TreeProps) => {
|
||||
const { listFormCode, searchParams, isSubForm, level, gridDto: extGridDto } = props
|
||||
|
|
@ -240,6 +242,7 @@ const Tree = (props: TreeProps) => {
|
|||
const widgetGroupRef = useRef<HTMLDivElement>(null)
|
||||
const editingFormDataRef = useRef<Record<string, any>>({})
|
||||
const editingFormInstanceRef = useRef<any>()
|
||||
const lastEditingContentReadyScriptKeyRef = useRef<string>()
|
||||
// Edit popup state kaydetmeyi engellemek için flag
|
||||
const isEditingRef = useRef(false)
|
||||
|
||||
|
|
@ -1263,15 +1266,27 @@ const Tree = (props: TreeProps) => {
|
|||
}
|
||||
|
||||
const runReadOnlyScripts = () => {
|
||||
const editorValues = gridDto.gridOptions.editingFormDto
|
||||
.flatMap((group) => flattenEditingFormItems([group]))
|
||||
.reduce<Record<string, any>>((values, formItem) => {
|
||||
const formItems = gridDto.gridOptions.editingFormDto.flatMap((group) =>
|
||||
flattenEditingFormItems([group]),
|
||||
)
|
||||
const scriptItems = formItems.filter((formItem) =>
|
||||
shouldRunEditorScriptOnContentReady(formItem.editorScript),
|
||||
)
|
||||
|
||||
if (!scriptItems.length) {
|
||||
return
|
||||
}
|
||||
|
||||
const editorValues = formItems.reduce<Record<string, any>>(
|
||||
(values, formItem) => {
|
||||
const editorInstance = form?.getEditor?.(formItem.dataField)
|
||||
if (editorInstance?.option) {
|
||||
values[formItem.dataField] = editorInstance.option('value')
|
||||
}
|
||||
return values
|
||||
}, {})
|
||||
},
|
||||
{},
|
||||
)
|
||||
const formData = {
|
||||
...editingFormDataRef.current,
|
||||
...(form?.option?.('formData') || {}),
|
||||
|
|
@ -1279,38 +1294,47 @@ const Tree = (props: TreeProps) => {
|
|||
}
|
||||
editingFormDataRef.current = { ...formData }
|
||||
|
||||
gridDto.gridOptions.editingFormDto
|
||||
.flatMap((group) => flattenEditingFormItems([group]))
|
||||
.filter((formItem) =>
|
||||
shouldRunEditorScriptOnContentReady(formItem.editorScript),
|
||||
)
|
||||
.forEach((formItem) => {
|
||||
try {
|
||||
const editorInstance = form?.getEditor?.(formItem.dataField)
|
||||
const editorValue =
|
||||
editorInstance?.option?.('value') ??
|
||||
getValueByField(formData, formItem.dataField)
|
||||
const editor = {
|
||||
dataField: formItem.dataField,
|
||||
component: grid,
|
||||
}
|
||||
const e = {
|
||||
component: form,
|
||||
dataField: formItem.dataField,
|
||||
value: editorValue,
|
||||
}
|
||||
const scriptKey = `${mode}|${String(rowKey)}|${scriptItems
|
||||
.map((formItem) => formItem.dataField)
|
||||
.join('|')}|${JSON.stringify(formData)}`
|
||||
|
||||
executeEditorScript(formItem.editorScript!, {
|
||||
formData,
|
||||
e,
|
||||
editor,
|
||||
runtimeSetEditorReadOnly,
|
||||
setFormData,
|
||||
})
|
||||
} catch (err) {
|
||||
console.error('Script exec error on contentReady', formItem.dataField, err)
|
||||
if (lastEditingContentReadyScriptKeyRef.current === scriptKey) {
|
||||
return
|
||||
}
|
||||
|
||||
lastEditingContentReadyScriptKeyRef.current = scriptKey
|
||||
|
||||
scriptItems.forEach((formItem) => {
|
||||
try {
|
||||
const editorInstance = form?.getEditor?.(formItem.dataField)
|
||||
const editorValue =
|
||||
editorInstance?.option?.('value') ??
|
||||
getValueByField(formData, formItem.dataField)
|
||||
const editor = {
|
||||
dataField: formItem.dataField,
|
||||
component: grid,
|
||||
}
|
||||
})
|
||||
const e = {
|
||||
component: form,
|
||||
dataField: formItem.dataField,
|
||||
value: editorValue,
|
||||
}
|
||||
|
||||
executeEditorScript(formItem.editorScript!, {
|
||||
formData,
|
||||
e,
|
||||
editor,
|
||||
runtimeSetEditorReadOnly,
|
||||
setFormData,
|
||||
})
|
||||
} catch (err) {
|
||||
console.error(
|
||||
'Script exec error on contentReady',
|
||||
formItem.dataField,
|
||||
err,
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
runReadOnlyScripts()
|
||||
|
|
@ -1366,7 +1390,6 @@ const Tree = (props: TreeProps) => {
|
|||
console.error('Script exec error', err)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
items:
|
||||
|
|
@ -1388,7 +1411,9 @@ const Tree = (props: TreeProps) => {
|
|||
let parsedEditorOptions: EditorOptionsWithButtons = {}
|
||||
const forcedEditorOptions: EditorOptionsWithButtons = {}
|
||||
try {
|
||||
parsedEditorOptions = i.editorOptions ? JSON.parse(i.editorOptions) : {}
|
||||
parsedEditorOptions = i.editorOptions
|
||||
? JSON.parse(i.editorOptions)
|
||||
: {}
|
||||
|
||||
const rawFilter = searchParams?.get('filter')
|
||||
if (rawFilter) {
|
||||
|
|
@ -1420,20 +1445,20 @@ const Tree = (props: TreeProps) => {
|
|||
|
||||
if (listFormField?.sourceDbType === DbTypeEnum.Date) {
|
||||
Object.assign(defaultEditorOptions, {
|
||||
type: 'date',
|
||||
dateSerializationFormat: 'yyyy-MM-dd',
|
||||
displayFormat: 'shortDate',
|
||||
})
|
||||
type: 'date',
|
||||
dateSerializationFormat: 'yyyy-MM-dd',
|
||||
displayFormat: 'shortDate',
|
||||
})
|
||||
} else if (
|
||||
listFormField?.sourceDbType === DbTypeEnum.DateTime ||
|
||||
listFormField?.sourceDbType === DbTypeEnum.DateTime2 ||
|
||||
listFormField?.sourceDbType === DbTypeEnum.DateTimeOffset
|
||||
) {
|
||||
Object.assign(defaultEditorOptions, {
|
||||
type: 'datetime',
|
||||
dateSerializationFormat: 'yyyy-MM-ddTHH:mm:ss',
|
||||
displayFormat: 'shortDateShortTime',
|
||||
})
|
||||
type: 'datetime',
|
||||
dateSerializationFormat: 'yyyy-MM-ddTHH:mm:ss',
|
||||
displayFormat: 'shortDateShortTime',
|
||||
})
|
||||
}
|
||||
|
||||
editorOptions = {
|
||||
|
|
|
|||
Loading…
Reference in a new issue