sozsoft/erp-platform
1
0
Fork 0
Code Issues 6 Pull requests Projects 3 Releases Packages Wiki Activity Actions

Developer Kit Custom Entity

Browse source
This commit is contained in:
Sedat ÖZTÜRK 2025-10-31 11:30:04 +03:00
parent 93578c49a6
commit e8451627bd
12 changed files with 588 additions and 595 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
api/src/Kurs.Platform.Application.Contracts/DeveloperKit/CustomEntityDto.cs
View file

@ -43,6 +43,7 @@ public class EntityFieldDto : FullAuditedEntityDto<Guid>
public bool IsUnique { get; set; } public bool IsUnique { get; set; }
public string? DefaultValue { get; set; } public string? DefaultValue { get; set; }
public string? Description { get; set; } public string? Description { get; set; }
public int DisplayOrder { get; set; } = 0;
} }
public class CreateUpdateCustomEntityFieldDto public class CreateUpdateCustomEntityFieldDto
@ -56,4 +57,5 @@ public class CreateUpdateCustomEntityFieldDto
public bool IsUnique { get; set; } public bool IsUnique { get; set; }
public string? DefaultValue { get; set; } public string? DefaultValue { get; set; }
public string? Description { get; set; } public string? Description { get; set; }
public int DisplayOrder { get; set; } = 0;
} }

30
api/src/Kurs.Platform.Application/DeveloperKit/CustomEntityAppService.cs
View file

@ -35,12 +35,13 @@ public class CustomEntityAppService : CrudAppService<
_repository = repository; _repository = repository;
_migrationRepository = migrationRepository; _migrationRepository = migrationRepository;
_endpointRepository = endpointRepository; _endpointRepository = endpointRepository;
_fieldRepository = fieldRepository;
} }
public override async Task<PagedResultDto<CustomEntityDto>> GetListAsync(PagedAndSortedResultRequestDto input) public override async Task<PagedResultDto<CustomEntityDto>> GetListAsync(PagedAndSortedResultRequestDto input)
{ {
var query = await _repository.GetQueryableAsync(); var query = await _repository.GetQueryableAsync();
var fullQuery = query.Include(x => x.Fields); var fullQuery = query.Include(x => x.Fields.OrderBy(f => f.DisplayOrder));
var totalCount = await fullQuery.CountAsync(); var totalCount = await fullQuery.CountAsync();
@ -59,7 +60,7 @@ public class CustomEntityAppService : CrudAppService<
{ {
var query = await _repository.GetQueryableAsync(); var query = await _repository.GetQueryableAsync();
var entity = await query var entity = await query
.Include(x => x.Fields) .Include(x => x.Fields.OrderBy(f => f.DisplayOrder))
.FirstOrDefaultAsync(x => x.Id == id); .FirstOrDefaultAsync(x => x.Id == id);
if (entity == null) if (entity == null)
@ -72,7 +73,7 @@ public class CustomEntityAppService : CrudAppService<
{ {
var query = await _repository.GetQueryableAsync(); var query = await _repository.GetQueryableAsync();
var entities = await query var entities = await query
.Include(x => x.Fields) .Include(x => x.Fields.OrderBy(f => f.DisplayOrder))
.Where(x => x.IsActive) .Where(x => x.IsActive)
.ToListAsync(); .ToListAsync();
@ -83,7 +84,7 @@ public class CustomEntityAppService : CrudAppService<
{ {
var query = await _repository.GetQueryableAsync(); var query = await _repository.GetQueryableAsync();
var entity = await query var entity = await query
.Include(x => x.Fields) .Include(x => x.Fields.OrderBy(f => f.DisplayOrder))
.FirstOrDefaultAsync(x => x.Id == id); .FirstOrDefaultAsync(x => x.Id == id);
if (entity == null) if (entity == null)
@ -115,13 +116,14 @@ public class CustomEntityAppService : CrudAppService<
var updatedFields = new List<CustomEntityField>(); var updatedFields = new List<CustomEntityField>();
foreach (var dtoField in input.Fields) for (int i = 0; i < input.Fields.Count; i++)
{ {
var dtoField = input.Fields[i];
CustomEntityField? existingField = null; CustomEntityField? existingField = null;
if (dtoField.Id.HasValue) if (dtoField.Id.HasValue)
{ {
existingField = entity.Fields.FirstOrDefault(f => f.Id == dtoField.Id.Value); existingField = entity.Fields?.FirstOrDefault(f => f.Id == dtoField.Id.Value);
} }
if (existingField != null) if (existingField != null)
@ -133,6 +135,7 @@ public class CustomEntityAppService : CrudAppService<
existingField.IsUnique = dtoField.IsUnique; existingField.IsUnique = dtoField.IsUnique;
existingField.DefaultValue = dtoField.DefaultValue; existingField.DefaultValue = dtoField.DefaultValue;
existingField.Description = dtoField.Description; existingField.Description = dtoField.Description;
existingField.DisplayOrder = dtoField.DisplayOrder;
updatedFields.Add(existingField); updatedFields.Add(existingField);
} }
@ -147,7 +150,8 @@ public class CustomEntityAppService : CrudAppService<
MaxLength = dtoField.MaxLength, MaxLength = dtoField.MaxLength,
IsUnique = dtoField.IsUnique, IsUnique = dtoField.IsUnique,
DefaultValue = dtoField.DefaultValue, DefaultValue = dtoField.DefaultValue,
Description = dtoField.Description Description = dtoField.Description,
DisplayOrder = dtoField.DisplayOrder
}; };
await _fieldRepository.InsertAsync(newField); await _fieldRepository.InsertAsync(newField);
@ -156,9 +160,9 @@ public class CustomEntityAppService : CrudAppService<
} }
// Silinecek alanlar // Silinecek alanlar
var toRemove = entity.Fields var toRemove = entity.Fields?
.Where(existing => updatedFields.All(f => f.Id != existing.Id)) .Where(existing => updatedFields.All(f => f.Id != existing.Id))
.ToList(); .ToList() ?? [];
if (toRemove.Any()) if (toRemove.Any())
{ {
@ -185,9 +189,10 @@ public class CustomEntityAppService : CrudAppService<
MigrationStatus = "pending" MigrationStatus = "pending"
}; };
// Fields ekle // Fields ekle - sıralama ile
foreach (var fieldDto in input.Fields) for (int i = 0; i < input.Fields.Count; i++)
{ {
var fieldDto = input.Fields[i];
var field = new CustomEntityField var field = new CustomEntityField
{ {
EntityId = entity.Id, EntityId = entity.Id,
@ -197,7 +202,8 @@ public class CustomEntityAppService : CrudAppService<
MaxLength = fieldDto.MaxLength, MaxLength = fieldDto.MaxLength,
IsUnique = fieldDto.IsUnique, IsUnique = fieldDto.IsUnique,
DefaultValue = fieldDto.DefaultValue, DefaultValue = fieldDto.DefaultValue,
Description = fieldDto.Description Description = fieldDto.Description,
DisplayOrder = fieldDto.DisplayOrder
}; };
entity.Fields.Add(field); entity.Fields.Add(field);
} }

12
api/src/Kurs.Platform.DbMigrator/Seeds/LanguagesData.json
View file

@ -10168,7 +10168,7 @@
{ {
"resourceName": "Platform", "resourceName": "Platform",
"key": "App.DeveloperKit.Entity.EndpointStatus", "key": "App.DeveloperKit.Entity.EndpointStatus",
"en": "Endpoint Status:", "en": "Crud Endpoint Status:",
"tr": "Uç Nokta Durumu:" "tr": "Uç Nokta Durumu:"
}, },
{ {
@ -10681,17 +10681,11 @@
"en": "Active", "en": "Active",
"tr": "Aktif" "tr": "Aktif"
}, },
{
"resourceName": "Platform",
"key": "App.DeveloperKit.ComponentEditor.Active",
"en": "Active",
"tr": "Aktif"
},
{ {
"resourceName": "Platform", "resourceName": "Platform",
"key": "App.DeveloperKit.ComponentEditor.Save", "key": "App.DeveloperKit.ComponentEditor.Save",
"en": "Save Component", "en": "Save",
"tr": "Bileşeni Kaydet" "tr": "Kaydet"
}, },
{ {
"resourceName": "Platform", "resourceName": "Platform",

2
api/src/Kurs.Platform.DbMigrator/Seeds/ListFormSeeder.cs
View file

@ -44042,7 +44042,7 @@ public class ListFormSeeder : IDataSeedContributor, ITransientDependency
R = AppCodes.SupplyChain.MaterialGroup, R = AppCodes.SupplyChain.MaterialGroup,
U = AppCodes.SupplyChain.MaterialGroup + ".Update", U = AppCodes.SupplyChain.MaterialGroup + ".Update",
E = true, E = true,
I = true, I = false,
Deny = false Deny = false
}), }),
PivotSettingsJson = JsonSerializer.Serialize(new ListFormFieldPivotSettingsDto PivotSettingsJson = JsonSerializer.Serialize(new ListFormFieldPivotSettingsDto

1
api/src/Kurs.Platform.Domain/Entities/Tenant/Administration/CustomEntity.cs
View file

@ -38,6 +38,7 @@ public class CustomEntityField : FullAuditedEntity<Guid>
public bool IsUnique { get; set; } public bool IsUnique { get; set; }
public string? DefaultValue { get; set; } public string? DefaultValue { get; set; }
public string? Description { get; set; } public string? Description { get; set; }
public int DisplayOrder { get; set; } = 0;
public virtual CustomEntity Entity { get; set; } = null!; public virtual CustomEntity Entity { get; set; } = null!;

5
api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20251030134034_Initial.Designer.cs → api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20251031075637_Initial.Designer.cs generated
View file

@ -13,7 +13,7 @@ using Volo.Abp.EntityFrameworkCore;
namespace Kurs.Platform.Migrations namespace Kurs.Platform.Migrations
{ {
[DbContext(typeof(PlatformDbContext))] [DbContext(typeof(PlatformDbContext))]
[Migration("20251030134034_Initial")] [Migration("20251031075637_Initial")]
partial class Initial partial class Initial
{ {
/// <inheritdoc /> /// <inheritdoc />
@ -3001,6 +3001,9 @@ namespace Kurs.Platform.Migrations
.HasMaxLength(500) .HasMaxLength(500)
.HasColumnType("nvarchar(500)"); .HasColumnType("nvarchar(500)");
b.Property<int>("DisplayOrder")
.HasColumnType("int");
b.Property<Guid>("EntityId") b.Property<Guid>("EntityId")
.HasColumnType("uniqueidentifier"); .HasColumnType("uniqueidentifier");

1
api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20251030134034_Initial.cs → api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20251031075637_Initial.cs
View file

@ -3459,6 +3459,7 @@ namespace Kurs.Platform.Migrations
IsUnique = table.Column<bool>(type: "bit", nullable: false), IsUnique = table.Column<bool>(type: "bit", nullable: false),
DefaultValue = table.Column<string>(type: "nvarchar(256)", maxLength: 256, nullable: true), DefaultValue = table.Column<string>(type: "nvarchar(256)", maxLength: 256, nullable: true),
Description = table.Column<string>(type: "nvarchar(500)", maxLength: 500, nullable: true), Description = table.Column<string>(type: "nvarchar(500)", maxLength: 500, nullable: true),
DisplayOrder = table.Column<int>(type: "int", nullable: false),
CreationTime = table.Column<DateTime>(type: "datetime2", nullable: false), CreationTime = table.Column<DateTime>(type: "datetime2", nullable: false),
CreatorId = table.Column<Guid>(type: "uniqueidentifier", nullable: true), CreatorId = table.Column<Guid>(type: "uniqueidentifier", nullable: true),
LastModificationTime = table.Column<DateTime>(type: "datetime2", nullable: true), LastModificationTime = table.Column<DateTime>(type: "datetime2", nullable: true),

3
api/src/Kurs.Platform.EntityFrameworkCore/Migrations/PlatformDbContextModelSnapshot.cs
View file

@ -2998,6 +2998,9 @@ namespace Kurs.Platform.Migrations
.HasMaxLength(500) .HasMaxLength(500)
.HasColumnType("nvarchar(500)"); .HasColumnType("nvarchar(500)");
b.Property<int>("DisplayOrder")
.HasColumnType("int");
b.Property<Guid>("EntityId") b.Property<Guid>("EntityId")
.HasColumnType("uniqueidentifier"); .HasColumnType("uniqueidentifier");

357
ui/src/components/developerKit/ComponentEditor.tsx
View file

@ -17,7 +17,7 @@ import { ROUTES_ENUM } from '@/routes/route.constant'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import { Formik, Form, Field, FieldProps } from 'formik' import { Formik, Form, Field, FieldProps } from 'formik'
import * as Yup from 'yup' import * as Yup from 'yup'
import { FormItem } from '@/components/ui' import { Checkbox, FormContainer, FormItem, Input } from '@/components/ui'
// Error tipini tanımla // Error tipini tanımla
interface ValidationError { interface ValidationError {
@ -180,207 +180,188 @@ const ComponentEditor: React.FC = () => {
} }
return ( return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100"> <Formik
<div className="mx-auto"> enableReinitialize
<Formik initialValues={initialValues}
enableReinitialize validationSchema={validationSchema}
initialValues={initialValues} onSubmit={handleSubmit}
validationSchema={validationSchema} >
onSubmit={handleSubmit} {({ values, touched, errors, isSubmitting, setFieldValue, submitForm, isValid }) => (
> <>
{({ values, touched, errors, isSubmitting, setFieldValue, submitForm, isValid }) => ( {/* Enhanced Header */}
<> <div className="bg-white shadow-lg border-b border-slate-200 sticky top-0 z-10">
{/* Enhanced Header */} <div className="px-4 py-3">
<div className="bg-white shadow-lg border-b border-slate-200 sticky top-0 z-10"> <div className="flex items-center justify-between">
<div className="px-4 py-3"> <div className="flex items-center gap-4">
<div className="flex items-center justify-between"> <button
<div className="flex items-center gap-4"> type="button"
<button onClick={() => navigate(ROUTES_ENUM.protected.saas.developerKit.components)}
type="button" className="flex items-center gap-2 text-slate-600 hover:text-blue-600 hover:bg-blue-50 px-3 py-2 rounded-lg transition-all duration-200"
onClick={() => navigate(ROUTES_ENUM.protected.saas.developerKit.components)} >
className="flex items-center gap-2 text-slate-600 hover:text-blue-600 hover:bg-blue-50 px-3 py-2 rounded-lg transition-all duration-200" <FaArrowLeft className="w-4 h-4" />
> {translate('::App.DeveloperKit.ComponentEditor.Back')}
<FaArrowLeft className="w-4 h-4" /> </button>
{translate('::App.DeveloperKit.ComponentEditor.Back')} <div className="h-6 w-px bg-slate-300"></div>
</button> <div className="flex items-center gap-3">
<div className="h-6 w-px bg-slate-300"></div> <div className="bg-gradient-to-r from-blue-500 to-purple-600 p-2 rounded-lg">
<div className="flex items-center gap-3"> <FaCode className="w-5 h-5 text-white" />
<div className="bg-gradient-to-r from-blue-500 to-purple-600 p-2 rounded-lg">
<FaCode className="w-5 h-5 text-white" />
</div>
<div>
<h1 className="text-xl font-bold text-slate-900">
{isEditing
? `${translate('::App.DeveloperKit.ComponentEditor.Title.Edit')} - ${values.name || initialValues.name || 'Component'}`
: translate('::App.DeveloperKit.ComponentEditor.Title.Create')}
</h1>
<p className="text-sm text-slate-600">
{isEditing
? 'Modify your React component'
: 'Create a new React component'}
</p>
</div>
</div>
</div> </div>
<div>
{/* Save Button in Header */} <h1 className="text-xl font-bold text-slate-900">
<div className="flex items-center gap-3"> {isEditing
<button ? `${translate('::App.DeveloperKit.ComponentEditor.Title.Edit')} - ${values.name || initialValues.name || 'Component'}`
type="button" : translate('::App.DeveloperKit.ComponentEditor.Title.Create')}
onClick={submitForm} </h1>
disabled={isSubmitting || !values.name.trim() || !isValid} <p className="text-sm text-slate-600">
className="flex items-center gap-2 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold px-4 py-2 rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed" {isEditing ? 'Modify your React component' : 'Create a new React component'}
> </p>
<FaRegSave className="w-4 h-4" />
{isSubmitting
? translate('::App.DeveloperKit.ComponentEditor.Saving')
: translate('::App.DeveloperKit.ComponentEditor.Save')}
</button>
</div> </div>
</div> </div>
</div> </div>
{/* Save Button in Header */}
<div className="flex items-center gap-3">
<button
type="button"
onClick={submitForm}
disabled={isSubmitting || !values.name.trim() || !isValid}
className="flex items-center gap-1 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-semibold px-2 py-1.5 rounded shadow transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
>
<FaRegSave className="w-4 h-4" />
{isSubmitting
? translate('::App.DeveloperKit.ComponentEditor.Saving')
: translate('::App.DeveloperKit.ComponentEditor.Save')}
</button>
</div>
</div> </div>
</div>
</div>
<Form className="grid grid-cols-1 lg:grid-cols-3 gap-4 pt-2"> <Form className="grid grid-cols-1 lg:grid-cols-3 gap-4 pt-2">
{/* Left Side - Component Settings */} {/* Left Side - Component Settings */}
<div className="space-y-4 col-span-1"> <div className="space-y-4 col-span-1">
<div className="bg-white rounded-lg shadow-sm border border-slate-200 p-3"> <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-3">
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-4">
<div className="bg-blue-100 p-1.5 rounded-lg"> <div className="bg-blue-100 p-1.5 rounded-lg">
<FaCog className="w-4 h-4 text-blue-600" /> <FaCog className="w-4 h-4 text-blue-600" />
</div>
<h2 className="text-base font-semibold text-slate-900">Component Settings</h2>
</div>
<div className="space-y-3">
<FormItem
label={translate('::App.DeveloperKit.ComponentEditor.ComponentName')}
invalid={!!(errors.name && touched.name)}
errorMessage={errors.name as string}
>
<Field
name="name"
type="text"
placeholder="e.g., Button, Card, Modal"
className="w-full px-2 py-1.5 border border-slate-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 text-sm bg-slate-50 focus:bg-white"
/>
</FormItem>
<FormItem
label={translate('::App.DeveloperKit.ComponentEditor.Description')}
invalid={!!(errors.description && touched.description)}
errorMessage={errors.description as string}
>
<Field
name="description"
type="text"
placeholder="Brief description of the component"
className="w-full px-2 py-1.5 border border-slate-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 text-sm bg-slate-50 focus:bg-white"
/>
</FormItem>
<FormItem
label={translate('::App.DeveloperKit.ComponentEditor.Dependencies')}
invalid={!!(errors.dependencies && touched.dependencies)}
errorMessage={errors.dependencies as string}
>
<Field name="dependencies">
{({ field }: FieldProps) => (
<input
type="text"
value={(values.dependencies || []).join(', ')}
onChange={(e) =>
setFieldValue(
'dependencies',
e.target.value
.split(',')
.map((s) => s.trim())
.filter(Boolean),
)
}
className="w-full px-2 py-1.5 border border-slate-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 text-sm bg-slate-50 focus:bg-white"
placeholder="MyComponent, AnotherComponent, etc."
/>
)}
</Field>
</FormItem>
<FormItem>
<div className="flex items-center p-2 bg-slate-50 rounded border border-slate-200">
<Field
name="isActive"
type="checkbox"
className="rounded border-slate-300 text-blue-600 focus:ring-blue-500 w-3.5 h-3.5"
/>
<label className="ml-2 text-xs font-medium text-slate-700">
{translate('::App.DeveloperKit.ComponentEditor.Active')}
</label>
</div>
</FormItem>
</div>
</div> </div>
<h2 className="text-base font-semibold text-slate-900">Component Settings</h2>
</div> </div>
{/* Right Side - Preview and Validation */} <FormContainer size="sm">
<div className="space-y-4 col-span-2"> <FormItem
{/* Validation Errors */} label={translate('::App.DeveloperKit.ComponentEditor.ComponentName')}
{validationErrors.length > 0 && ( invalid={!!(errors.name && touched.name)}
<div className="bg-red-50 border border-red-200 rounded-lg p-3 shadow-sm"> errorMessage={errors.name as string}
<div className="flex items-start gap-2"> >
<div className="bg-red-100 rounded-full p-1.5"> <Field
<FaExclamationCircle className="w-4 h-4 text-red-600" /> name="name"
</div> type="text"
<div className="flex-1"> component={Input}
<h3 className="text-base font-semibold text-red-800 mb-1"> placeholder="e.g., Button, Card, Modal"
Validation Issues />
</h3> </FormItem>
<p className="text-xs text-red-700 mb-3">
{validationErrors.length} issue <FormItem
{validationErrors.length !== 1 ? 's' : ''} found in your code label={translate('::App.DeveloperKit.ComponentEditor.Description')}
</p> invalid={!!(errors.description && touched.description)}
<div className="space-y-1.5 max-h-32 overflow-y-auto"> errorMessage={errors.description as string}
{validationErrors.slice(0, 5).map((error, index) => ( >
<div <Field
key={index} name="description"
className="bg-white p-2 rounded border border-red-100" type="text"
> component={Input}
<div className="text-xs text-red-800"> placeholder="Brief description of the component"
<span className="font-medium bg-red-100 px-1.5 py-0.5 rounded text-xs"> />
Line {error.startLineNumber} </FormItem>
</span>
<span className="ml-2">{error.message}</span> <FormItem
</div> label={translate('::App.DeveloperKit.ComponentEditor.Dependencies')}
</div> invalid={!!(errors.dependencies && touched.dependencies)}
))} errorMessage={errors.dependencies as string}
{validationErrors.length > 5 && ( >
<div className="text-xs text-red-600 italic text-center py-1"> <Field name="dependencies">
... and {validationErrors.length - 5} more issue {({ field }: FieldProps) => (
{validationErrors.length - 5 !== 1 ? 's' : ''} <Input
</div> type="text"
)} value={(values.dependencies || []).join(', ')}
onChange={(e) =>
setFieldValue(
'dependencies',
e.target.value
.split(',')
.map((s) => s.trim())
.filter(Boolean),
)
}
placeholder="MyComponent, AnotherComponent, etc."
/>
)}
</Field>
</FormItem>
<FormItem label={translate('::App.DeveloperKit.ComponentEditor.Active')}>
<Field name="isActive" component={Checkbox} />
</FormItem>
</FormContainer>
</div>
</div>
{/* Right Side - Preview and Validation */}
<div className="space-y-4 col-span-2">
{/* Validation Errors */}
{validationErrors.length > 0 && (
<div className="bg-red-50 border border-red-200 rounded-lg p-3 shadow-sm">
<div className="flex items-start gap-2">
<div className="bg-red-100 rounded-full p-1.5">
<FaExclamationCircle className="w-4 h-4 text-red-600" />
</div>
<div className="flex-1">
<h3 className="text-base font-semibold text-red-800 mb-1">
Validation Issues
</h3>
<p className="text-xs text-red-700 mb-3">
{validationErrors.length} issue
{validationErrors.length !== 1 ? 's' : ''} found in your code
</p>
<div className="space-y-1.5 max-h-32 overflow-y-auto">
{validationErrors.slice(0, 5).map((error, index) => (
<div key={index} className="bg-white p-2 rounded border border-red-100">
<div className="text-xs text-red-800">
<span className="font-medium bg-red-100 px-1.5 py-0.5 rounded text-xs">
Line {error.startLineNumber}
</span>
<span className="ml-2">{error.message}</span>
</div>
</div> </div>
</div> ))}
{validationErrors.length > 5 && (
<div className="text-xs text-red-600 italic text-center py-1">
... and {validationErrors.length - 5} more issue
{validationErrors.length - 5 !== 1 ? 's' : ''}
</div>
)}
</div> </div>
</div> </div>
)}
{/* Component Preview */}
<div className="bg-white rounded-lg shadow-sm border border-slate-200 p-3">
<div className="flex items-center gap-2 mb-3">
<div className="bg-purple-100 p-1.5 rounded-lg">
<FaEye className="w-4 h-4 text-purple-600" />
</div>
<h2 className="text-base font-semibold text-slate-900">Preview</h2>
</div>
<ComponentPreview componentName={values.name} />
</div> </div>
</div> </div>
</Form> )}
</>
)} {/* Component Preview */}
</Formik> <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-3">
</div> <div className="flex items-center gap-2 mb-3">
</div> <div className="bg-purple-100 p-1.5 rounded-lg">
<FaEye className="w-4 h-4 text-purple-600" />
</div>
<h2 className="text-base font-semibold text-slate-900">Preview</h2>
</div>
<ComponentPreview componentName={values.name} />
</div>
</div>
</Form>
</>
)}
</Formik>
) )
} }

642
ui/src/components/developerKit/EntityEditor.tsx
View file

@ -11,12 +11,12 @@ import {
FaTable, FaTable,
FaColumns, FaColumns,
} from 'react-icons/fa' } from 'react-icons/fa'
import { CreateUpdateCustomEntityFieldDto, CustomEntityField } from '@/proxy/developerKit/models' import { CustomEntityField } from '@/proxy/developerKit/models'
import { ROUTES_ENUM } from '@/routes/route.constant' import { ROUTES_ENUM } from '@/routes/route.constant'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import { Formik, Form, Field, FieldProps, FieldArray } from 'formik' import { Formik, Form, Field, FieldProps, FieldArray } from 'formik'
import * as Yup from 'yup' import * as Yup from 'yup'
import { FormItem, Input, Select, Checkbox } from '@/components/ui' import { FormItem, Input, Select, Checkbox, FormContainer } from '@/components/ui'
import { SelectBoxOption } from '@/shared/types' import { SelectBoxOption } from '@/shared/types'
// Validation schema // Validation schema
@ -33,8 +33,9 @@ const validationSchema = Yup.object({
isRequired: Yup.boolean(), isRequired: Yup.boolean(),
maxLength: Yup.number().nullable(), maxLength: Yup.number().nullable(),
isUnique: Yup.boolean(), isUnique: Yup.boolean(),
defaultValue: Yup.string(), defaultValue: Yup.string().notRequired(),
description: Yup.string(), description: Yup.string().notRequired(),
displayOrder: Yup.number().required(),
}), }),
) )
.min(1, 'At least one field is required'), .min(1, 'At least one field is required'),
@ -67,6 +68,7 @@ const EntityEditor: React.FC = () => {
isRequired: true, isRequired: true,
maxLength: 100, maxLength: 100,
description: 'Entity name', description: 'Entity name',
displayOrder: 1,
}, },
] as CustomEntityField[], ] as CustomEntityField[],
isActive: true, isActive: true,
@ -83,12 +85,18 @@ const EntityEditor: React.FC = () => {
if (isEditing && id) { if (isEditing && id) {
const entity = getEntity(id) const entity = getEntity(id)
if (entity) { if (entity) {
// Ensure fields are sorted by displayOrder and normalized to sequential values
const sortedFields = (entity.fields || [])
.slice()
.sort((a, b) => (a.displayOrder ?? 0) - (b.displayOrder ?? 0))
.map((f, idx) => ({ ...f, displayOrder: f.displayOrder ?? idx + 1 }))
setInitialValues({ setInitialValues({
name: entity.name, name: entity.name,
displayName: entity.displayName, displayName: entity.displayName,
tableName: entity.tableName, tableName: entity.tableName,
description: entity.description || '', description: entity.description || '',
fields: entity.fields, fields: sortedFields,
isActive: entity.isActive, isActive: entity.isActive,
hasAuditFields: entity.hasAuditFields, hasAuditFields: entity.hasAuditFields,
hasSoftDelete: entity.hasSoftDelete, hasSoftDelete: entity.hasSoftDelete,
@ -100,7 +108,8 @@ const EntityEditor: React.FC = () => {
const handleSubmit = async (values: typeof initialValues, { setSubmitting }: any) => { const handleSubmit = async (values: typeof initialValues, { setSubmitting }: any) => {
try { try {
const sanitizedFields = values.fields.map((f) => { const sanitizedFields = values.fields.map((f) => {
const sanitized: CreateUpdateCustomEntityFieldDto = { // send both `displayOrder` (frontend proxy) and `order` (backend DTO) to be safe
const sanitized: any = {
...(f.id && isEditing ? { id: f.id } : {}), ...(f.id && isEditing ? { id: f.id } : {}),
name: f.name.trim(), name: f.name.trim(),
type: f.type, type: f.type,
@ -109,6 +118,8 @@ const EntityEditor: React.FC = () => {
isUnique: f.isUnique || false, isUnique: f.isUnique || false,
defaultValue: f.defaultValue, defaultValue: f.defaultValue,
description: f.description, description: f.description,
displayOrder: f.displayOrder,
order: f.displayOrder,
} }
return sanitized return sanitized
@ -150,171 +161,164 @@ const EntityEditor: React.FC = () => {
] ]
return ( return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100"> <Formik
<div className="mx-auto"> enableReinitialize
<Formik initialValues={initialValues}
enableReinitialize validationSchema={validationSchema}
initialValues={initialValues} onSubmit={handleSubmit}
validationSchema={validationSchema} >
onSubmit={handleSubmit} {({ values, touched, errors, isSubmitting, setFieldValue, submitForm, isValid }) => (
> <>
{({ values, touched, errors, isSubmitting, setFieldValue, submitForm, isValid }) => ( {/* Enhanced Header */}
<> <div className="bg-white shadow border-b border-slate-200 sticky top-0 z-10">
{/* Enhanced Header */} <div className="px-4 py-3">
<div className="bg-white shadow border-b border-slate-200 sticky top-0 z-10"> <div className="flex items-center justify-between">
<div className="px-3 py-2"> <div className="flex items-center gap-4">
<div className="flex items-center justify-between"> <button
<div className="flex items-center gap-2"> type="button"
<button onClick={() => navigate(ROUTES_ENUM.protected.saas.developerKit.entities)}
type="button" className="flex items-center gap-2 text-slate-600 hover:text-blue-600 hover:bg-blue-50 px-3 py-2 rounded-lg transition-all duration-200"
onClick={() => navigate(ROUTES_ENUM.protected.saas.developerKit.entities)} >
className="flex items-center gap-1 text-slate-600 hover:text-blue-600 hover:bg-blue-50 px-2 py-1.5 rounded transition-all duration-200" <FaArrowLeft className="w-4 h-4" />
> <span className="text-sm">
<FaArrowLeft className="w-3 h-3" /> {translate('::App.DeveloperKit.EntityEditor.Back')}
<span className="text-sm">{translate('::App.DeveloperKit.EntityEditor.Back')}</span> </span>
</button> </button>
<div className="h-4 w-px bg-slate-300"></div> <div className="h-6 w-px bg-slate-300"></div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-3">
<div className="bg-gradient-to-r from-green-500 to-blue-600 p-1 rounded"> <div className="bg-gradient-to-r from-green-500 to-blue-600 p-1 rounded">
<FaDatabase className="w-3 h-3 text-white" /> <FaDatabase className="w-5 h-5 text-white" />
</div>
<div>
<h1 className="text-sm font-bold text-slate-900">
{isEditing
? `${translate('::App.DeveloperKit.EntityEditor.Title.Edit')} - ${values.name || initialValues.name || 'Entity'}`
: translate('::App.DeveloperKit.EntityEditor.Title.Create')}
</h1>
</div>
</div>
</div> </div>
<div>
{/* Save Button in Header */} <h1 className="text-xl font-bold text-slate-900">
<div className="flex items-center gap-2"> {isEditing
<button ? `${translate('::App.DeveloperKit.EntityEditor.Title.Edit')} - ${values.name || initialValues.name || 'Entity'}`
type="button" : translate('::App.DeveloperKit.EntityEditor.Title.Create')}
onClick={submitForm} </h1>
disabled={isSubmitting || !isValid} <p className="text-sm text-slate-600">
className="flex items-center gap-1 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-semibold px-2 py-1.5 rounded shadow transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed text-sm" {isEditing ? 'Modify your entity' : 'Create a new entity'}
> </p>
<FaSave className="w-3 h-3" />
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</button>
</div> </div>
</div> </div>
</div> </div>
{/* Save Button in Header */}
<div className="flex items-center gap-2">
<button
type="button"
onClick={submitForm}
disabled={isSubmitting || !isValid}
className="flex items-center gap-1 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-semibold px-2 py-1.5 rounded shadow transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
>
<FaSave className="w-3 h-3" />
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</button>
</div>
</div> </div>
</div>
</div>
<Form className="space-y-2 pt-2"> <Form className="grid grid-cols-1 lg:grid-cols-3 gap-4 pt-2">
{/* Basic Entity Information */} {/* Basic Entity Information */}
<div className="bg-white rounded border border-slate-200 p-2"> <div className="space-y-4 col-span-1">
<div className="flex items-center gap-1.5 mb-2"> <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-3">
<div className="bg-blue-100 p-1 rounded"> <div className="flex items-center gap-2 mb-4">
<FaCog className="w-3 h-3 text-blue-600" /> <div className="bg-blue-100 p-1.5 rounded-lg">
</div> <FaCog className="w-4 h-4 text-blue-600" />
<h2 className="text-sm font-semibold text-slate-900">Entity Settings</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<FormItem
label={translate('::App.DeveloperKit.EntityEditor.EntityName')}
invalid={!!(errors.name && touched.name)}
errorMessage={errors.name as string}
>
<Field name="name">
{({ field }: FieldProps) => (
<Input
{...field}
onBlur={(e) => {
field.onBlur(e)
if (!values.tableName) {
setFieldValue('tableName', values.name + 's')
}
if (!values.displayName) {
setFieldValue('displayName', values.name)
}
}}
disabled={isMigrationApplied}
placeholder="e.g., Product, User, Order"
className="px-2 py-1.5 bg-slate-50 focus:bg-white transition-all duration-200 text-sm h-7"
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::App.DeveloperKit.EntityEditor.DisplayName')}
invalid={!!(errors.displayName && touched.displayName)}
errorMessage={errors.displayName as string}
>
<Field
name="displayName"
component={Input}
placeholder="e.g., Product, User, Order"
className="px-2 py-1.5 bg-slate-50 focus:bg-white transition-all duration-200 text-sm h-7"
/>
</FormItem>
<FormItem
label={translate('::App.DeveloperKit.EntityEditor.TableName')}
invalid={!!(errors.tableName && touched.tableName)}
errorMessage={errors.tableName as string}
>
<Field
name="tableName"
component={Input}
disabled={isMigrationApplied}
placeholder="e.g., Products, Users, Orders"
className="px-2 py-1.5 bg-slate-50 focus:bg-white transition-all duration-200 disabled:bg-slate-100 disabled:text-slate-500 text-sm h-7"
/>
</FormItem>
<FormItem
label={translate('::App.DeveloperKit.EntityEditor.Description')}
invalid={!!(errors.description && touched.description)}
errorMessage={errors.description as string}
>
<Field
name="description"
component={Input}
placeholder="Brief description of this entity"
className="px-2 py-1.5 bg-slate-50 focus:bg-white transition-all duration-200 text-sm h-7"
/>
</FormItem>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 mt-2 pt-2 border-t border-slate-200">
<div className="flex items-center p-1 bg-slate-50 rounded border border-slate-200">
<Field name="isActive" component={Checkbox} className="w-3 h-3" />
<label className="ml-1 text-sm font-medium text-slate-700">
{translate('::App.DeveloperKit.EntityEditor.Active')}
</label>
</div>
<div className="flex items-center p-1 bg-slate-50 rounded border border-slate-200">
<Field name="hasAuditFields" component={Checkbox} className="w-3 h-3" />
<label className="ml-1 text-sm font-medium text-slate-700">
{translate('::App.DeveloperKit.EntityEditor.Audit')}
</label>
</div>
<div className="flex items-center p-1 bg-slate-50 rounded border border-slate-200">
<Field name="hasSoftDelete" component={Checkbox} className="w-3 h-3" />
<label className="ml-1 text-sm font-medium text-slate-700">
{translate('::App.DeveloperKit.EntityEditor.SoftDelete')}
</label>
</div>
</div> </div>
<h2 className="text-sm font-semibold text-slate-900">Entity Settings</h2>
</div> </div>
{/* Fields Section */} <FormContainer size="sm">
<div className="bg-white rounded border border-slate-200 p-2"> <FormItem
label={translate('::App.DeveloperKit.EntityEditor.EntityName')}
invalid={!!(errors.name && touched.name)}
errorMessage={errors.name as string}
>
<Field name="name">
{({ field }: FieldProps) => (
<Input
{...field}
onBlur={(e) => {
field.onBlur(e)
if (!values.tableName) {
setFieldValue('tableName', values.name + 's')
}
if (!values.displayName) {
setFieldValue('displayName', values.name)
}
}}
disabled={isMigrationApplied}
placeholder="e.g., Product, User, Order"
className="px-2 py-1.5 bg-slate-50 focus:bg-white transition-all duration-200 text-sm h-7"
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::App.DeveloperKit.EntityEditor.DisplayName')}
invalid={!!(errors.displayName && touched.displayName)}
errorMessage={errors.displayName as string}
>
<Field
name="displayName"
component={Input}
placeholder="e.g., Product, User, Order"
/>
</FormItem>
<FormItem
label={translate('::App.DeveloperKit.EntityEditor.TableName')}
invalid={!!(errors.tableName && touched.tableName)}
errorMessage={errors.tableName as string}
>
<Field
name="tableName"
component={Input}
disabled={isMigrationApplied}
placeholder="e.g., Products, Users, Orders"
/>
</FormItem>
<FormItem
label={translate('::App.DeveloperKit.EntityEditor.Description')}
invalid={!!(errors.description && touched.description)}
errorMessage={errors.description as string}
>
<Field
name="description"
component={Input}
placeholder="Brief description of this entity"
/>
</FormItem>
<FormItem label={translate('::App.DeveloperKit.ComponentEditor.Active')}>
<Field name="isActive" component={Checkbox} />
</FormItem>
<FormItem label={translate('::App.DeveloperKit.EntityEditor.Audit')}>
<Field name="hasAuditFields" component={Checkbox} />
</FormItem>
<FormItem label={translate('::App.DeveloperKit.EntityEditor.SoftDelete')}>
<Field name="hasSoftDelete" component={Checkbox} />
</FormItem>
</FormContainer>
</div>
</div>
{/* Fields Section */}
<div className="space-y-4 col-span-2">
<div className="bg-white rounded-lg shadow-sm border border-slate-200 p-3">
<FormContainer size="sm">
<FieldArray name="fields"> <FieldArray name="fields">
{({ push, remove }) => ( {({ push, remove }) => (
<> <>
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<div className="bg-green-100 p-1 rounded"> <div className="bg-green-100 p-1.5 rounded">
<FaColumns className="w-3 h-3 text-green-600" /> <FaColumns className="w-4 h-4 text-green-600" />
</div> </div>
<h2 className="text-sm font-semibold text-slate-900"> <h2 className="text-sm font-semibold text-slate-900">
{translate('::App.DeveloperKit.EntityEditor.Fields')} {translate('::App.DeveloperKit.EntityEditor.Fields')}
@ -330,6 +334,8 @@ const EntityEditor: React.FC = () => {
type: 'string', type: 'string',
isRequired: false, isRequired: false,
description: '', description: '',
// Assign next sequential displayOrder
displayOrder: (values.fields?.length ?? 0) + 1,
}) })
} }
className="flex items-center gap-1 bg-gradient-to-r from-blue-600 to-blue-700 text-white px-2 py-1.5 rounded hover:from-blue-700 hover:to-blue-800 transition-all duration-200 text-sm" className="flex items-center gap-1 bg-gradient-to-r from-blue-600 to-blue-700 text-white px-2 py-1.5 rounded hover:from-blue-700 hover:to-blue-800 transition-all duration-200 text-sm"
@ -339,197 +345,191 @@ const EntityEditor: React.FC = () => {
</button> </button>
</div> </div>
<div className="space-y-2"> {values.fields.map((field, index) => (
{values.fields.map((field, index) => ( <div key={field.id || `new-${index}`}>
<div <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-2 mb-2">
key={field.id || `new-${index}`} <FormItem label="Order *" className="col-span-1">
className="bg-gradient-to-r from-slate-50 to-slate-100 border border-slate-200 rounded p-2 shadow-sm hover:shadow-md transition-all duration-200" <Field type="number" name={`fields.${index}.displayOrder`} component={Input} />
> </FormItem>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 mb-2">
<FormItem
label={`${translate('::App.DeveloperKit.EntityEditor.FieldName')} *`}
invalid={
!!(
errors.fields &&
(errors.fields as any)[index]?.name &&
touched.fields &&
(touched.fields as any)[index]?.name
)
}
errorMessage={(errors.fields as any)?.[index]?.name as string}
>
<Field
name={`fields.${index}.name`}
component={Input}
placeholder="e.g., Name, Email, Age"
className="px-2 py-1.5 bg-white border-slate-300 focus:border-blue-500 focus:ring-blue-500 transition-all duration-200 text-sm h-6"
/>
</FormItem>
<FormItem <FormItem
label={`${translate('::App.DeveloperKit.EntityEditor.Type')} *`} label={`${translate('::App.DeveloperKit.EntityEditor.FieldName')} *`}
invalid={ invalid={
!!( !!(
errors.fields && errors.fields &&
(errors.fields as any)[index]?.type && (errors.fields as any)[index]?.name &&
touched.fields && touched.fields &&
(touched.fields as any)[index]?.type (touched.fields as any)[index]?.name
) )
} }
errorMessage={(errors.fields as any)?.[index]?.type as string} errorMessage={(errors.fields as any)?.[index]?.name as string}
> className="col-span-2"
<Field name={`fields.${index}.type`}> >
{({ field, form }: FieldProps<SelectBoxOption>) => ( <Field
<Select name={`fields.${index}.name`}
field={field} component={Input}
form={form} placeholder="e.g., Name, Email, Age"
options={fieldTypes.map((type) => ({ />
value: type.value, </FormItem>
label: type.label,
}))}
value={fieldTypes
.map((type) => ({ value: type.value, label: type.label }))
.filter((option) => option.value === field.value)}
onChange={(option) =>
form.setFieldValue(field.name, option?.value)
}
className="bg-white border-slate-300 focus:border-blue-500 focus:ring-blue-500"
/>
)}
</Field>
</FormItem>
{field.type === 'string' && ( <FormItem
<FormItem label={`${translate('::App.DeveloperKit.EntityEditor.Type')} *`}
label={translate('::App.DeveloperKit.EntityEditor.MaxLength')} invalid={
invalid={ !!(
!!( errors.fields &&
errors.fields && (errors.fields as any)[index]?.type &&
(errors.fields as any)[index]?.maxLength && touched.fields &&
touched.fields && (touched.fields as any)[index]?.type
(touched.fields as any)[index]?.maxLength )
) }
} errorMessage={(errors.fields as any)?.[index]?.type as string}
errorMessage={ className="col-span-1"
(errors.fields as any)?.[index]?.maxLength as string >
} <Field name={`fields.${index}.type`}>
> {({ field, form }: FieldProps<SelectBoxOption>) => (
<Field <Select
name={`fields.${index}.maxLength`} field={field}
component={Input} form={form}
type="number" options={fieldTypes.map((type) => ({
placeholder="e.g., 100" value: type.value,
className="px-2 py-1.5 bg-white border-slate-300 focus:border-blue-500 focus:ring-blue-500 transition-all duration-200 text-sm h-6" label: type.label,
}))}
value={fieldTypes
.map((type) => ({ value: type.value, label: type.label }))
.filter((option) => option.value === field.value)}
onChange={(option) =>
form.setFieldValue(field.name, option?.value)
}
/> />
</FormItem> )}
)} </Field>
</FormItem>
<FormItem
label={translate('::App.DeveloperKit.EntityEditor.DefaultValue')}
invalid={
!!(
errors.fields &&
(errors.fields as any)[index]?.defaultValue &&
touched.fields &&
(touched.fields as any)[index]?.defaultValue
)
}
errorMessage={
(errors.fields as any)?.[index]?.defaultValue as string
}
className="col-span-2"
>
<Field
name={`fields.${index}.defaultValue`}
component={Input}
placeholder="Optional default value"
/>
</FormItem>
{field.type === 'string' && (
<FormItem <FormItem
label={translate('::App.DeveloperKit.EntityEditor.DefaultValue')} label={translate('::App.DeveloperKit.EntityEditor.MaxLength')}
invalid={ invalid={
!!( !!(
errors.fields && errors.fields &&
(errors.fields as any)[index]?.defaultValue && (errors.fields as any)[index]?.maxLength &&
touched.fields && touched.fields &&
(touched.fields as any)[index]?.defaultValue (touched.fields as any)[index]?.maxLength
) )
} }
errorMessage={ errorMessage={
(errors.fields as any)?.[index]?.defaultValue as string (errors.fields as any)?.[index]?.maxLength as string
} }
> >
<Field <Field
name={`fields.${index}.defaultValue`} name={`fields.${index}.maxLength`}
component={Input} component={Input}
placeholder="Optional default value" type="number"
className="px-2 py-1.5 bg-white border-slate-300 focus:border-blue-500 focus:ring-blue-500 transition-all duration-200 text-sm h-6" placeholder="e.g., 100"
/> />
</FormItem> </FormItem>
</div> )}
<div className="flex items-center justify-between pt-2 border-t border-slate-200"> <FormItem
<div className="flex-1 mr-2"> label={translate('::App.DeveloperKit.EntityEditor.Description')}
<FormItem invalid={
label={translate('::App.DeveloperKit.EntityEditor.Description')} !!(
invalid={ errors.fields &&
!!( (errors.fields as any)[index]?.description &&
errors.fields && touched.fields &&
(errors.fields as any)[index]?.description && (touched.fields as any)[index]?.description
touched.fields && )
(touched.fields as any)[index]?.description }
) errorMessage={
} (errors.fields as any)?.[index]?.description as string
errorMessage={ }
(errors.fields as any)?.[index]?.description as string className={field.type === 'string' ? 'col-span-2' : 'col-span-3'}
} >
> <Field
<Field name={`fields.${index}.description`}
name={`fields.${index}.description`} component={Input}
component={Input} placeholder="Field description"
placeholder="Field description" />
className="px-2 py-1.5 bg-white border-slate-300 focus:border-blue-500 focus:ring-blue-500 transition-all duration-200 text-sm h-6" </FormItem>
/>
</FormItem>
</div>
<div className="flex items-center gap-2"> <FormItem
<div className="flex items-center p-1 bg-white rounded border border-slate-200"> label={translate('::App.DeveloperKit.EntityEditor.Required')}
<Field className="items-center"
name={`fields.${index}.isRequired`} >
component={Checkbox} <Field name={`fields.${index}.isRequired`} component={Checkbox} />
className="w-3 h-3" </FormItem>
/>
<label className="ml-1 text-sm font-medium text-slate-700">
{translate('::App.DeveloperKit.EntityEditor.Required')}
</label>
</div>
<div className="flex items-center p-1 bg-white rounded border border-slate-200"> <FormItem
<Field label={translate('::App.DeveloperKit.EntityEditor.Unique')}
name={`fields.${index}.isUnique`} className="items-center"
component={Checkbox} >
className="w-3 h-3" <Field name={`fields.${index}.isUnique`} component={Checkbox} />
/> </FormItem>
<label className="ml-1 text-sm font-medium text-slate-700">
{translate('::App.DeveloperKit.EntityEditor.Unique')}
</label>
</div>
<button <button
type="button" type="button"
onClick={() => remove(index)} onClick={() => {
className="p-1 text-red-600 hover:text-red-800 hover:bg-red-50 rounded transition-all duration-200 border border-red-200 hover:border-red-300" // Remove the field and reindex displayOrder for remaining fields
title="Remove field" remove(index)
> const newFields = values.fields ? [...values.fields] : []
<FaTrashAlt className="w-3 h-3" /> newFields.splice(index, 1)
</button> newFields.forEach((f, i) => {
</div> // ensure sequential ordering starting at 1
</div> f.displayOrder = i + 1
})
setFieldValue('fields', newFields)
}}
className="p-3 text-red-600 hover:text-red-800 rounded transition-all duration-200"
title="Remove field"
>
<FaTrashAlt className="w-5 h-5" />
</button>
</div> </div>
))} </div>
))}
{values.fields.length === 0 && ( {values.fields.length === 0 && (
<div className="text-center py-4 bg-slate-50 rounded border-2 border-dashed border-slate-300"> <div className="text-center py-4 bg-slate-50 rounded border-2 border-dashed border-slate-300">
<FaTable className="w-8 h-8 mx-auto mb-2 text-slate-400" /> <FaTable className="w-8 h-8 mx-auto mb-2 text-slate-400" />
<h3 className="text-sm font-medium text-slate-600 mb-1"> <h3 className="text-sm font-medium text-slate-600 mb-1">
{translate('::App.DeveloperKit.EntityEditor.NoFields')} {translate('::App.DeveloperKit.EntityEditor.NoFields')}
</h3> </h3>
<p className="text-sm text-slate-500"> <p className="text-sm text-slate-500">
{translate('::App.DeveloperKit.EntityEditor.NoFieldsDescription')} {translate('::App.DeveloperKit.EntityEditor.NoFieldsDescription')}
</p> </p>
</div> </div>
)} )}
</div>
</> </>
)} )}
</FieldArray> </FieldArray>
</div> </FormContainer>
</Form> </div>
</> </div>
)} </Form>
</Formik> </>
</div> )}
</div> </Formik>
) )
} }

126
ui/src/components/developerKit/EntityManager.tsx
View file

@ -103,7 +103,7 @@ const EntityManager: React.FC = () => {
</div> </div>
{/* Stats Cards */} {/* Stats Cards */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"> <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
<div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6"> <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
@ -162,94 +162,94 @@ const EntityManager: React.FC = () => {
</div> </div>
{/* Filters */} {/* Filters */}
<div className="bg-white rounded-lg border border-slate-200 p-6 mb-6 shadow-sm"> <div className="flex flex-col lg:flex-row gap-4">
<div className="flex flex-col lg:flex-row gap-4"> <div className="flex-1 relative">
<div className="flex-1 relative"> <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" />
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" /> <input
<input type="text"
type="text" placeholder={translate('::App.DeveloperKit.Entity.SearchPlaceholder')}
placeholder={translate('::App.DeveloperKit.Entity.SearchPlaceholder')} value={searchTerm}
value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)}
onChange={(e) => setSearchTerm(e.target.value)} className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-colors"
className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-colors" />
/> </div>
</div> <div className="flex items-center gap-4">
<div className="flex items-center gap-4"> <div className="flex items-center gap-2">
<div className="flex items-center gap-2"> <FaFilter className="w-5 h-5 text-slate-500" />
<FaFilter className="w-5 h-5 text-slate-500" /> <select
<select value={filterActive}
value={filterActive} onChange={(e) => setFilterActive(e.target.value as 'all' | 'active' | 'inactive')}
onChange={(e) => setFilterActive(e.target.value as 'all' | 'active' | 'inactive')} className="px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-colors"
className="px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-colors" >
> <option value="all">{translate('::App.DeveloperKit.Entity.Filter.All')}</option>
<option value="all">{translate('::App.DeveloperKit.Entity.Filter.All')}</option> <option value="active">{translate('::App.DeveloperKit.Entity.Filter.Active')}</option>
<option value="active"> <option value="inactive">
{translate('::App.DeveloperKit.Entity.Filter.Active')} {translate('::App.DeveloperKit.Entity.Filter.Inactive')}
</option> </option>
<option value="inactive"> </select>
{translate('::App.DeveloperKit.Entity.Filter.Inactive')}
</option>
</select>
</div>
</div> </div>
</div> </div>
</div> </div>
{/* Entities List */} {/* Entities List */}
{filteredEntities.length > 0 ? ( {filteredEntities.length > 0 ? (
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6"> <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
{filteredEntities.map((entity) => { {filteredEntities.map((entity) => {
return ( return (
<div <div
key={entity.id} key={entity.id}
className="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-all duration-200 group" className="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-all duration-200 group"
> >
<div className="p-6"> <div className="p-5">
<div className="flex items-start justify-between mb-4"> <div className="flex items-start justify-between mb-4">
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center gap-3 mb-2"> <div className="flex items-center justify-between mb-2">
<div className="bg-blue-100 text-blue-600 p-2 rounded-lg"> {/* Sol taraf */}
<FaTable className="w-5 h-5" /> <div className="flex items-center gap-3">
<div className="bg-blue-100 text-blue-600 p-2 rounded-lg">
<FaTable className="w-5 h-5" />
</div>
<div>
<h3 className="text-lg font-semibold text-slate-900">
{entity.displayName}
</h3>
<p className="text-sm text-slate-500">
{translate('::App.DeveloperKit.Entity.TableLabel')}:{' '}
{entity.tableName}
</p>
</div>
</div> </div>
<div>
<h3 className="text-lg font-semibold text-slate-900"> {/* Sağ taraf */}
{entity.displayName} <div className="flex flex-col items-end text-sm text-slate-600 gap-1">
</h3> <div className="flex items-center gap-1">
<p className="text-sm text-slate-500"> <FaCalendarAlt className="w-3 h-3" />
{translate('::App.DeveloperKit.Entity.TableLabel')}: {entity.tableName} <span>
</p> {translate('::App.DeveloperKit.Entity.Updated')}:{' '}
{entity.lastModificationTime
? new Date(entity.lastModificationTime).toLocaleDateString()
: 'Never'}
</span>
</div>
<div className="flex items-center gap-1">
<FaDatabase className="w-3 h-3" />
<span>
{entity.fields.length} {translate('::App.DeveloperKit.Entity.Fields')}
</span>
</div>
</div> </div>
</div> </div>
{entity.description && ( {entity.description && (
<p className="text-slate-600 text-sm mb-3">{entity.description}</p> <p className="text-slate-600 text-sm mb-3">{entity.description}</p>
)} )}
<div className="flex items-center gap-4 text-xs text-slate-500 mb-3">
<div className="flex items-center gap-1">
<FaCalendarAlt className="w-3 h-3" />
<span>
{translate('::App.DeveloperKit.Entity.Updated')}:{' '}
{entity.lastModificationTime
? new Date(entity.lastModificationTime).toLocaleDateString()
: 'Never'}
</span>
</div>
<div className="flex items-center gap-1">
<FaDatabase className="w-3 h-3" />
<span>
{entity.fields.length} {translate('::App.DeveloperKit.Entity.Fields')}
</span>
</div>
</div>
</div> </div>
</div> </div>
{/* Entity Fields Preview */} {/* Entity Fields Preview */}
<div className="mb-4"> <div className="mb-4">
<div className="bg-slate-50 rounded-lg p-3"> <div className="bg-slate-50 rounded-lg p-3">
<h4 className="text-sm font-medium text-slate-700 mb-2"> <div className="grid grid-cols-3 gap-2 text-xs">
{translate('::App.DeveloperKit.Entity.FieldLabel')}
</h4>
<div className="grid grid-cols-2 gap-2 text-xs">
{entity.fields.slice(0, 4).map((field) => ( {entity.fields.slice(0, 4).map((field) => (
<div key={field.id} className="flex items-center gap-2"> <div key={field.id} className="flex items-center gap-2">
<span <span

2
ui/src/proxy/developerKit/models.ts
View file

@ -27,6 +27,7 @@ export interface CustomEntityField {
description?: string; description?: string;
creationTime?: string; creationTime?: string;
lastModificationTime?: string; lastModificationTime?: string;
displayOrder: number;
} }
export interface CreateUpdateCustomEntityFieldDto { export interface CreateUpdateCustomEntityFieldDto {
@ -38,6 +39,7 @@ export interface CreateUpdateCustomEntityFieldDto {
isUnique?: boolean; isUnique?: boolean;
defaultValue?: string; defaultValue?: string;
description?: string; description?: string;
displayOrder: number;
} }
export interface CreateUpdateCustomEntityDto { export interface CreateUpdateCustomEntityDto {