Genel değişiklikler
This commit is contained in:
Sedat ÖZTÜRK
parent
233c9b7502
commit
48894d2bda
12 changed files with 269 additions and 175 deletions
|
|
@ -220,7 +220,7 @@ public static class LookupQueryValues
|
|||
$"\"Name\" AS \"Name\" " +
|
||||
$"FROM \"{TableNameResolver.GetFullTableName(nameof(TableNameEnum.JobPosition))}\" " +
|
||||
$"WHERE " +
|
||||
$"(\"DepartmentId\" = @param0 OR @param0 IS NULL) " +
|
||||
$"(\"DepartmentId\" = @param0 OR \"ParentId\" IS NULL OR @param0 IS NULL) " +
|
||||
$"AND \"IsDeleted\" = 'false' " +
|
||||
$"ORDER BY \"Name\";";
|
||||
|
||||
|
|
|
|||
|
|
@ -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()}%` }}
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ const MobileNav = () => {
|
|||
title="Navigation"
|
||||
isOpen={isOpen}
|
||||
bodyClass={classNames(navColor(), 'p-0')}
|
||||
width={330}
|
||||
width={320}
|
||||
placement={direction === DIR_RTL ? 'right' : 'left'}
|
||||
onClose={onDrawerClose}
|
||||
onRequestClose={onDrawerClose}
|
||||
|
|
|
|||
|
|
@ -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()}
|
||||
|
|
|
|||
Loading…
Reference in a new issue