Developer Kit Custom Entity
This commit is contained in:
Sedat ÖZTÜRK
parent
93578c49a6
commit
e8451627bd
12 changed files with 588 additions and 595 deletions
|
|
@ -43,6 +43,7 @@ public class EntityFieldDto : FullAuditedEntityDto<Guid>
|
|||
public bool IsUnique { get; set; }
|
||||
public string? DefaultValue { get; set; }
|
||||
public string? Description { get; set; }
|
||||
public int DisplayOrder { get; set; } = 0;
|
||||
}
|
||||
|
||||
public class CreateUpdateCustomEntityFieldDto
|
||||
|
|
@ -56,4 +57,5 @@ public class CreateUpdateCustomEntityFieldDto
|
|||
public bool IsUnique { get; set; }
|
||||
public string? DefaultValue { get; set; }
|
||||
public string? Description { get; set; }
|
||||
public int DisplayOrder { get; set; } = 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,12 +35,13 @@ public class CustomEntityAppService : CrudAppService<
|
|||
_repository = repository;
|
||||
_migrationRepository = migrationRepository;
|
||||
_endpointRepository = endpointRepository;
|
||||
_fieldRepository = fieldRepository;
|
||||
}
|
||||
|
||||
public override async Task<PagedResultDto<CustomEntityDto>> GetListAsync(PagedAndSortedResultRequestDto input)
|
||||
{
|
||||
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();
|
||||
|
||||
|
|
@ -59,7 +60,7 @@ public class CustomEntityAppService : CrudAppService<
|
|||
{
|
||||
var query = await _repository.GetQueryableAsync();
|
||||
var entity = await query
|
||||
.Include(x => x.Fields)
|
||||
.Include(x => x.Fields.OrderBy(f => f.DisplayOrder))
|
||||
.FirstOrDefaultAsync(x => x.Id == id);
|
||||
|
||||
if (entity == null)
|
||||
|
|
@ -72,7 +73,7 @@ public class CustomEntityAppService : CrudAppService<
|
|||
{
|
||||
var query = await _repository.GetQueryableAsync();
|
||||
var entities = await query
|
||||
.Include(x => x.Fields)
|
||||
.Include(x => x.Fields.OrderBy(f => f.DisplayOrder))
|
||||
.Where(x => x.IsActive)
|
||||
.ToListAsync();
|
||||
|
||||
|
|
@ -83,7 +84,7 @@ public class CustomEntityAppService : CrudAppService<
|
|||
{
|
||||
var query = await _repository.GetQueryableAsync();
|
||||
var entity = await query
|
||||
.Include(x => x.Fields)
|
||||
.Include(x => x.Fields.OrderBy(f => f.DisplayOrder))
|
||||
.FirstOrDefaultAsync(x => x.Id == id);
|
||||
|
||||
if (entity == null)
|
||||
|
|
@ -115,13 +116,14 @@ public class CustomEntityAppService : CrudAppService<
|
|||
|
||||
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;
|
||||
|
||||
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)
|
||||
|
|
@ -133,6 +135,7 @@ public class CustomEntityAppService : CrudAppService<
|
|||
existingField.IsUnique = dtoField.IsUnique;
|
||||
existingField.DefaultValue = dtoField.DefaultValue;
|
||||
existingField.Description = dtoField.Description;
|
||||
existingField.DisplayOrder = dtoField.DisplayOrder;
|
||||
|
||||
updatedFields.Add(existingField);
|
||||
}
|
||||
|
|
@ -147,7 +150,8 @@ public class CustomEntityAppService : CrudAppService<
|
|||
MaxLength = dtoField.MaxLength,
|
||||
IsUnique = dtoField.IsUnique,
|
||||
DefaultValue = dtoField.DefaultValue,
|
||||
Description = dtoField.Description
|
||||
Description = dtoField.Description,
|
||||
DisplayOrder = dtoField.DisplayOrder
|
||||
};
|
||||
|
||||
await _fieldRepository.InsertAsync(newField);
|
||||
|
|
@ -156,9 +160,9 @@ public class CustomEntityAppService : CrudAppService<
|
|||
}
|
||||
|
||||
// Silinecek alanlar
|
||||
var toRemove = entity.Fields
|
||||
var toRemove = entity.Fields?
|
||||
.Where(existing => updatedFields.All(f => f.Id != existing.Id))
|
||||
.ToList();
|
||||
.ToList() ?? [];
|
||||
|
||||
if (toRemove.Any())
|
||||
{
|
||||
|
|
@ -185,9 +189,10 @@ public class CustomEntityAppService : CrudAppService<
|
|||
MigrationStatus = "pending"
|
||||
};
|
||||
|
||||
// Fields ekle
|
||||
foreach (var fieldDto in input.Fields)
|
||||
// Fields ekle - sıralama ile
|
||||
for (int i = 0; i < input.Fields.Count; i++)
|
||||
{
|
||||
var fieldDto = input.Fields[i];
|
||||
var field = new CustomEntityField
|
||||
{
|
||||
EntityId = entity.Id,
|
||||
|
|
@ -197,7 +202,8 @@ public class CustomEntityAppService : CrudAppService<
|
|||
MaxLength = fieldDto.MaxLength,
|
||||
IsUnique = fieldDto.IsUnique,
|
||||
DefaultValue = fieldDto.DefaultValue,
|
||||
Description = fieldDto.Description
|
||||
Description = fieldDto.Description,
|
||||
DisplayOrder = fieldDto.DisplayOrder
|
||||
};
|
||||
entity.Fields.Add(field);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10168,7 +10168,7 @@
|
|||
{
|
||||
"resourceName": "Platform",
|
||||
"key": "App.DeveloperKit.Entity.EndpointStatus",
|
||||
"en": "Endpoint Status:",
|
||||
"en": "Crud Endpoint Status:",
|
||||
"tr": "Uç Nokta Durumu:"
|
||||
},
|
||||
{
|
||||
|
|
@ -10681,17 +10681,11 @@
|
|||
"en": "Active",
|
||||
"tr": "Aktif"
|
||||
},
|
||||
{
|
||||
"resourceName": "Platform",
|
||||
"key": "App.DeveloperKit.ComponentEditor.Active",
|
||||
"en": "Active",
|
||||
"tr": "Aktif"
|
||||
},
|
||||
{
|
||||
"resourceName": "Platform",
|
||||
"key": "App.DeveloperKit.ComponentEditor.Save",
|
||||
"en": "Save Component",
|
||||
"tr": "Bileşeni Kaydet"
|
||||
"en": "Save",
|
||||
"tr": "Kaydet"
|
||||
},
|
||||
{
|
||||
"resourceName": "Platform",
|
||||
|
|
|
|||
|
|
@ -44042,7 +44042,7 @@ public class ListFormSeeder : IDataSeedContributor, ITransientDependency
|
|||
R = AppCodes.SupplyChain.MaterialGroup,
|
||||
U = AppCodes.SupplyChain.MaterialGroup + ".Update",
|
||||
E = true,
|
||||
I = true,
|
||||
I = false,
|
||||
Deny = false
|
||||
}),
|
||||
PivotSettingsJson = JsonSerializer.Serialize(new ListFormFieldPivotSettingsDto
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ public class CustomEntityField : FullAuditedEntity<Guid>
|
|||
public bool IsUnique { get; set; }
|
||||
public string? DefaultValue { get; set; }
|
||||
public string? Description { get; set; }
|
||||
public int DisplayOrder { get; set; } = 0;
|
||||
|
||||
public virtual CustomEntity Entity { get; set; } = null!;
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ using Volo.Abp.EntityFrameworkCore;
|
|||
namespace Kurs.Platform.Migrations
|
||||
{
|
||||
[DbContext(typeof(PlatformDbContext))]
|
||||
[Migration("20251030134034_Initial")]
|
||||
[Migration("20251031075637_Initial")]
|
||||
partial class Initial
|
||||
{
|
||||
/// <inheritdoc />
|
||||
|
|
@ -3001,6 +3001,9 @@ namespace Kurs.Platform.Migrations
|
|||
.HasMaxLength(500)
|
||||
.HasColumnType("nvarchar(500)");
|
||||
|
||||
b.Property<int>("DisplayOrder")
|
||||
.HasColumnType("int");
|
||||
|
||||
b.Property<Guid>("EntityId")
|
||||
.HasColumnType("uniqueidentifier");
|
||||
|
||||
|
|
@ -3459,6 +3459,7 @@ namespace Kurs.Platform.Migrations
|
|||
IsUnique = table.Column<bool>(type: "bit", nullable: false),
|
||||
DefaultValue = table.Column<string>(type: "nvarchar(256)", maxLength: 256, 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),
|
||||
CreatorId = table.Column<Guid>(type: "uniqueidentifier", nullable: true),
|
||||
LastModificationTime = table.Column<DateTime>(type: "datetime2", nullable: true),
|
||||
|
|
@ -2998,6 +2998,9 @@ namespace Kurs.Platform.Migrations
|
|||
.HasMaxLength(500)
|
||||
.HasColumnType("nvarchar(500)");
|
||||
|
||||
b.Property<int>("DisplayOrder")
|
||||
.HasColumnType("int");
|
||||
|
||||
b.Property<Guid>("EntityId")
|
||||
.HasColumnType("uniqueidentifier");
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import { ROUTES_ENUM } from '@/routes/route.constant'
|
|||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||
import { Formik, Form, Field, FieldProps } from 'formik'
|
||||
import * as Yup from 'yup'
|
||||
import { FormItem } from '@/components/ui'
|
||||
import { Checkbox, FormContainer, FormItem, Input } from '@/components/ui'
|
||||
|
||||
// Error tipini tanımla
|
||||
interface ValidationError {
|
||||
|
|
@ -180,207 +180,188 @@ const ComponentEditor: React.FC = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
|
||||
<div className="mx-auto">
|
||||
<Formik
|
||||
enableReinitialize
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{({ 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">
|
||||
<div className="px-4 py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
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')}
|
||||
</button>
|
||||
<div className="h-6 w-px bg-slate-300"></div>
|
||||
<div className="flex items-center gap-3">
|
||||
<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>
|
||||
<Formik
|
||||
enableReinitialize
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{({ 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">
|
||||
<div className="px-4 py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
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')}
|
||||
</button>
|
||||
<div className="h-6 w-px bg-slate-300"></div>
|
||||
<div className="flex items-center gap-3">
|
||||
<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>
|
||||
|
||||
{/* 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-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"
|
||||
>
|
||||
<FaRegSave className="w-4 h-4" />
|
||||
{isSubmitting
|
||||
? translate('::App.DeveloperKit.ComponentEditor.Saving')
|
||||
: translate('::App.DeveloperKit.ComponentEditor.Save')}
|
||||
</button>
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
|
||||
<Form className="grid grid-cols-1 lg:grid-cols-3 gap-4 pt-2">
|
||||
{/* Left Side - Component Settings */}
|
||||
<div className="space-y-4 col-span-1">
|
||||
<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="bg-blue-100 p-1.5 rounded-lg">
|
||||
<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>
|
||||
<Form className="grid grid-cols-1 lg:grid-cols-3 gap-4 pt-2">
|
||||
{/* Left Side - Component Settings */}
|
||||
<div className="space-y-4 col-span-1">
|
||||
<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="bg-blue-100 p-1.5 rounded-lg">
|
||||
<FaCog className="w-4 h-4 text-blue-600" />
|
||||
</div>
|
||||
<h2 className="text-base font-semibold text-slate-900">Component Settings</h2>
|
||||
</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>
|
||||
))}
|
||||
{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>
|
||||
)}
|
||||
<FormContainer size="sm">
|
||||
<FormItem
|
||||
label={translate('::App.DeveloperKit.ComponentEditor.ComponentName')}
|
||||
invalid={!!(errors.name && touched.name)}
|
||||
errorMessage={errors.name as string}
|
||||
>
|
||||
<Field
|
||||
name="name"
|
||||
type="text"
|
||||
component={Input}
|
||||
placeholder="e.g., Button, Card, Modal"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label={translate('::App.DeveloperKit.ComponentEditor.Description')}
|
||||
invalid={!!(errors.description && touched.description)}
|
||||
errorMessage={errors.description as string}
|
||||
>
|
||||
<Field
|
||||
name="description"
|
||||
type="text"
|
||||
component={Input}
|
||||
placeholder="Brief description of the component"
|
||||
/>
|
||||
</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),
|
||||
)
|
||||
}
|
||||
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>
|
||||
))}
|
||||
{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>
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
</Form>
|
||||
</>
|
||||
)}
|
||||
</Formik>
|
||||
</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>
|
||||
</Form>
|
||||
</>
|
||||
)}
|
||||
</Formik>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,12 +11,12 @@ import {
|
|||
FaTable,
|
||||
FaColumns,
|
||||
} 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 { useLocalization } from '@/utils/hooks/useLocalization'
|
||||
import { Formik, Form, Field, FieldProps, FieldArray } from 'formik'
|
||||
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'
|
||||
|
||||
// Validation schema
|
||||
|
|
@ -33,8 +33,9 @@ const validationSchema = Yup.object({
|
|||
isRequired: Yup.boolean(),
|
||||
maxLength: Yup.number().nullable(),
|
||||
isUnique: Yup.boolean(),
|
||||
defaultValue: Yup.string(),
|
||||
description: Yup.string(),
|
||||
defaultValue: Yup.string().notRequired(),
|
||||
description: Yup.string().notRequired(),
|
||||
displayOrder: Yup.number().required(),
|
||||
}),
|
||||
)
|
||||
.min(1, 'At least one field is required'),
|
||||
|
|
@ -67,6 +68,7 @@ const EntityEditor: React.FC = () => {
|
|||
isRequired: true,
|
||||
maxLength: 100,
|
||||
description: 'Entity name',
|
||||
displayOrder: 1,
|
||||
},
|
||||
] as CustomEntityField[],
|
||||
isActive: true,
|
||||
|
|
@ -83,12 +85,18 @@ const EntityEditor: React.FC = () => {
|
|||
if (isEditing && id) {
|
||||
const entity = getEntity(id)
|
||||
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({
|
||||
name: entity.name,
|
||||
displayName: entity.displayName,
|
||||
tableName: entity.tableName,
|
||||
description: entity.description || '',
|
||||
fields: entity.fields,
|
||||
fields: sortedFields,
|
||||
isActive: entity.isActive,
|
||||
hasAuditFields: entity.hasAuditFields,
|
||||
hasSoftDelete: entity.hasSoftDelete,
|
||||
|
|
@ -100,7 +108,8 @@ const EntityEditor: React.FC = () => {
|
|||
const handleSubmit = async (values: typeof initialValues, { setSubmitting }: any) => {
|
||||
try {
|
||||
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 } : {}),
|
||||
name: f.name.trim(),
|
||||
type: f.type,
|
||||
|
|
@ -109,6 +118,8 @@ const EntityEditor: React.FC = () => {
|
|||
isUnique: f.isUnique || false,
|
||||
defaultValue: f.defaultValue,
|
||||
description: f.description,
|
||||
displayOrder: f.displayOrder,
|
||||
order: f.displayOrder,
|
||||
}
|
||||
|
||||
return sanitized
|
||||
|
|
@ -150,171 +161,164 @@ const EntityEditor: React.FC = () => {
|
|||
]
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
|
||||
<div className="mx-auto">
|
||||
<Formik
|
||||
enableReinitialize
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{({ values, touched, errors, isSubmitting, setFieldValue, submitForm, isValid }) => (
|
||||
<>
|
||||
{/* Enhanced Header */}
|
||||
<div className="bg-white shadow border-b border-slate-200 sticky top-0 z-10">
|
||||
<div className="px-3 py-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
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-3 h-3" />
|
||||
<span className="text-sm">{translate('::App.DeveloperKit.EntityEditor.Back')}</span>
|
||||
</button>
|
||||
<div className="h-4 w-px bg-slate-300"></div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="bg-gradient-to-r from-green-500 to-blue-600 p-1 rounded">
|
||||
<FaDatabase className="w-3 h-3 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>
|
||||
<Formik
|
||||
enableReinitialize
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{({ values, touched, errors, isSubmitting, setFieldValue, submitForm, isValid }) => (
|
||||
<>
|
||||
{/* Enhanced Header */}
|
||||
<div className="bg-white shadow border-b border-slate-200 sticky top-0 z-10">
|
||||
<div className="px-4 py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate(ROUTES_ENUM.protected.saas.developerKit.entities)}
|
||||
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" />
|
||||
<span className="text-sm">
|
||||
{translate('::App.DeveloperKit.EntityEditor.Back')}
|
||||
</span>
|
||||
</button>
|
||||
<div className="h-6 w-px bg-slate-300"></div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="bg-gradient-to-r from-green-500 to-blue-600 p-1 rounded">
|
||||
<FaDatabase className="w-5 h-5 text-white" />
|
||||
</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>
|
||||
<h1 className="text-xl font-bold text-slate-900">
|
||||
{isEditing
|
||||
? `${translate('::App.DeveloperKit.EntityEditor.Title.Edit')} - ${values.name || initialValues.name || 'Entity'}`
|
||||
: translate('::App.DeveloperKit.EntityEditor.Title.Create')}
|
||||
</h1>
|
||||
<p className="text-sm text-slate-600">
|
||||
{isEditing ? 'Modify your entity' : 'Create a new entity'}
|
||||
</p>
|
||||
</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>
|
||||
|
||||
<Form className="space-y-2 pt-2">
|
||||
{/* Basic Entity Information */}
|
||||
<div className="bg-white rounded border border-slate-200 p-2">
|
||||
<div className="flex items-center gap-1.5 mb-2">
|
||||
<div className="bg-blue-100 p-1 rounded">
|
||||
<FaCog className="w-3 h-3 text-blue-600" />
|
||||
</div>
|
||||
<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>
|
||||
<Form className="grid grid-cols-1 lg:grid-cols-3 gap-4 pt-2">
|
||||
{/* Basic Entity Information */}
|
||||
<div className="space-y-4 col-span-1">
|
||||
<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="bg-blue-100 p-1.5 rounded-lg">
|
||||
<FaCog className="w-4 h-4 text-blue-600" />
|
||||
</div>
|
||||
<h2 className="text-sm font-semibold text-slate-900">Entity Settings</h2>
|
||||
</div>
|
||||
|
||||
{/* Fields Section */}
|
||||
<div className="bg-white rounded border border-slate-200 p-2">
|
||||
<FormContainer size="sm">
|
||||
<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">
|
||||
{({ push, remove }) => (
|
||||
<>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="bg-green-100 p-1 rounded">
|
||||
<FaColumns className="w-3 h-3 text-green-600" />
|
||||
<div className="bg-green-100 p-1.5 rounded">
|
||||
<FaColumns className="w-4 h-4 text-green-600" />
|
||||
</div>
|
||||
<h2 className="text-sm font-semibold text-slate-900">
|
||||
{translate('::App.DeveloperKit.EntityEditor.Fields')}
|
||||
|
|
@ -330,6 +334,8 @@ const EntityEditor: React.FC = () => {
|
|||
type: 'string',
|
||||
isRequired: false,
|
||||
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"
|
||||
|
|
@ -339,197 +345,191 @@ const EntityEditor: React.FC = () => {
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{values.fields.map((field, index) => (
|
||||
<div
|
||||
key={field.id || `new-${index}`}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
{values.fields.map((field, index) => (
|
||||
<div key={field.id || `new-${index}`}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-2 mb-2">
|
||||
<FormItem label="Order *" className="col-span-1">
|
||||
<Field type="number" name={`fields.${index}.displayOrder`} component={Input} />
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label={`${translate('::App.DeveloperKit.EntityEditor.Type')} *`}
|
||||
invalid={
|
||||
!!(
|
||||
errors.fields &&
|
||||
(errors.fields as any)[index]?.type &&
|
||||
touched.fields &&
|
||||
(touched.fields as any)[index]?.type
|
||||
)
|
||||
}
|
||||
errorMessage={(errors.fields as any)?.[index]?.type as string}
|
||||
>
|
||||
<Field name={`fields.${index}.type`}>
|
||||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||||
<Select
|
||||
field={field}
|
||||
form={form}
|
||||
options={fieldTypes.map((type) => ({
|
||||
value: type.value,
|
||||
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>
|
||||
<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}
|
||||
className="col-span-2"
|
||||
>
|
||||
<Field
|
||||
name={`fields.${index}.name`}
|
||||
component={Input}
|
||||
placeholder="e.g., Name, Email, Age"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
{field.type === 'string' && (
|
||||
<FormItem
|
||||
label={translate('::App.DeveloperKit.EntityEditor.MaxLength')}
|
||||
invalid={
|
||||
!!(
|
||||
errors.fields &&
|
||||
(errors.fields as any)[index]?.maxLength &&
|
||||
touched.fields &&
|
||||
(touched.fields as any)[index]?.maxLength
|
||||
)
|
||||
}
|
||||
errorMessage={
|
||||
(errors.fields as any)?.[index]?.maxLength as string
|
||||
}
|
||||
>
|
||||
<Field
|
||||
name={`fields.${index}.maxLength`}
|
||||
component={Input}
|
||||
type="number"
|
||||
placeholder="e.g., 100"
|
||||
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
|
||||
label={`${translate('::App.DeveloperKit.EntityEditor.Type')} *`}
|
||||
invalid={
|
||||
!!(
|
||||
errors.fields &&
|
||||
(errors.fields as any)[index]?.type &&
|
||||
touched.fields &&
|
||||
(touched.fields as any)[index]?.type
|
||||
)
|
||||
}
|
||||
errorMessage={(errors.fields as any)?.[index]?.type as string}
|
||||
className="col-span-1"
|
||||
>
|
||||
<Field name={`fields.${index}.type`}>
|
||||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||||
<Select
|
||||
field={field}
|
||||
form={form}
|
||||
options={fieldTypes.map((type) => ({
|
||||
value: type.value,
|
||||
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
|
||||
label={translate('::App.DeveloperKit.EntityEditor.DefaultValue')}
|
||||
label={translate('::App.DeveloperKit.EntityEditor.MaxLength')}
|
||||
invalid={
|
||||
!!(
|
||||
errors.fields &&
|
||||
(errors.fields as any)[index]?.defaultValue &&
|
||||
(errors.fields as any)[index]?.maxLength &&
|
||||
touched.fields &&
|
||||
(touched.fields as any)[index]?.defaultValue
|
||||
(touched.fields as any)[index]?.maxLength
|
||||
)
|
||||
}
|
||||
errorMessage={
|
||||
(errors.fields as any)?.[index]?.defaultValue as string
|
||||
(errors.fields as any)?.[index]?.maxLength as string
|
||||
}
|
||||
>
|
||||
<Field
|
||||
name={`fields.${index}.defaultValue`}
|
||||
name={`fields.${index}.maxLength`}
|
||||
component={Input}
|
||||
placeholder="Optional default 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"
|
||||
type="number"
|
||||
placeholder="e.g., 100"
|
||||
/>
|
||||
</FormItem>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between pt-2 border-t border-slate-200">
|
||||
<div className="flex-1 mr-2">
|
||||
<FormItem
|
||||
label={translate('::App.DeveloperKit.EntityEditor.Description')}
|
||||
invalid={
|
||||
!!(
|
||||
errors.fields &&
|
||||
(errors.fields as any)[index]?.description &&
|
||||
touched.fields &&
|
||||
(touched.fields as any)[index]?.description
|
||||
)
|
||||
}
|
||||
errorMessage={
|
||||
(errors.fields as any)?.[index]?.description as string
|
||||
}
|
||||
>
|
||||
<Field
|
||||
name={`fields.${index}.description`}
|
||||
component={Input}
|
||||
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>
|
||||
</div>
|
||||
<FormItem
|
||||
label={translate('::App.DeveloperKit.EntityEditor.Description')}
|
||||
invalid={
|
||||
!!(
|
||||
errors.fields &&
|
||||
(errors.fields as any)[index]?.description &&
|
||||
touched.fields &&
|
||||
(touched.fields as any)[index]?.description
|
||||
)
|
||||
}
|
||||
errorMessage={
|
||||
(errors.fields as any)?.[index]?.description as string
|
||||
}
|
||||
className={field.type === 'string' ? 'col-span-2' : 'col-span-3'}
|
||||
>
|
||||
<Field
|
||||
name={`fields.${index}.description`}
|
||||
component={Input}
|
||||
placeholder="Field description"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center p-1 bg-white rounded border border-slate-200">
|
||||
<Field
|
||||
name={`fields.${index}.isRequired`}
|
||||
component={Checkbox}
|
||||
className="w-3 h-3"
|
||||
/>
|
||||
<label className="ml-1 text-sm font-medium text-slate-700">
|
||||
{translate('::App.DeveloperKit.EntityEditor.Required')}
|
||||
</label>
|
||||
</div>
|
||||
<FormItem
|
||||
label={translate('::App.DeveloperKit.EntityEditor.Required')}
|
||||
className="items-center"
|
||||
>
|
||||
<Field name={`fields.${index}.isRequired`} component={Checkbox} />
|
||||
</FormItem>
|
||||
|
||||
<div className="flex items-center p-1 bg-white rounded border border-slate-200">
|
||||
<Field
|
||||
name={`fields.${index}.isUnique`}
|
||||
component={Checkbox}
|
||||
className="w-3 h-3"
|
||||
/>
|
||||
<label className="ml-1 text-sm font-medium text-slate-700">
|
||||
{translate('::App.DeveloperKit.EntityEditor.Unique')}
|
||||
</label>
|
||||
</div>
|
||||
<FormItem
|
||||
label={translate('::App.DeveloperKit.EntityEditor.Unique')}
|
||||
className="items-center"
|
||||
>
|
||||
<Field name={`fields.${index}.isUnique`} component={Checkbox} />
|
||||
</FormItem>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => remove(index)}
|
||||
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"
|
||||
title="Remove field"
|
||||
>
|
||||
<FaTrashAlt className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
// Remove the field and reindex displayOrder for remaining fields
|
||||
remove(index)
|
||||
const newFields = values.fields ? [...values.fields] : []
|
||||
newFields.splice(index, 1)
|
||||
newFields.forEach((f, i) => {
|
||||
// ensure sequential ordering starting at 1
|
||||
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>
|
||||
))}
|
||||
|
||||
{values.fields.length === 0 && (
|
||||
<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" />
|
||||
<h3 className="text-sm font-medium text-slate-600 mb-1">
|
||||
{translate('::App.DeveloperKit.EntityEditor.NoFields')}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-500">
|
||||
{translate('::App.DeveloperKit.EntityEditor.NoFieldsDescription')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{values.fields.length === 0 && (
|
||||
<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" />
|
||||
<h3 className="text-sm font-medium text-slate-600 mb-1">
|
||||
{translate('::App.DeveloperKit.EntityEditor.NoFields')}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-500">
|
||||
{translate('::App.DeveloperKit.EntityEditor.NoFieldsDescription')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</FieldArray>
|
||||
</div>
|
||||
</Form>
|
||||
</>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
</FormContainer>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</>
|
||||
)}
|
||||
</Formik>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ const EntityManager: React.FC = () => {
|
|||
</div>
|
||||
|
||||
{/* 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="flex items-center justify-between">
|
||||
<div>
|
||||
|
|
@ -162,94 +162,94 @@ const EntityManager: React.FC = () => {
|
|||
</div>
|
||||
|
||||
{/* 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-1 relative">
|
||||
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder={translate('::App.DeveloperKit.Entity.SearchPlaceholder')}
|
||||
value={searchTerm}
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<FaFilter className="w-5 h-5 text-slate-500" />
|
||||
<select
|
||||
value={filterActive}
|
||||
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"
|
||||
>
|
||||
<option value="all">{translate('::App.DeveloperKit.Entity.Filter.All')}</option>
|
||||
<option value="active">
|
||||
{translate('::App.DeveloperKit.Entity.Filter.Active')}
|
||||
</option>
|
||||
<option value="inactive">
|
||||
{translate('::App.DeveloperKit.Entity.Filter.Inactive')}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex flex-col lg:flex-row gap-4">
|
||||
<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" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder={translate('::App.DeveloperKit.Entity.SearchPlaceholder')}
|
||||
value={searchTerm}
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<FaFilter className="w-5 h-5 text-slate-500" />
|
||||
<select
|
||||
value={filterActive}
|
||||
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"
|
||||
>
|
||||
<option value="all">{translate('::App.DeveloperKit.Entity.Filter.All')}</option>
|
||||
<option value="active">{translate('::App.DeveloperKit.Entity.Filter.Active')}</option>
|
||||
<option value="inactive">
|
||||
{translate('::App.DeveloperKit.Entity.Filter.Inactive')}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Entities List */}
|
||||
{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) => {
|
||||
return (
|
||||
<div
|
||||
key={entity.id}
|
||||
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-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="bg-blue-100 text-blue-600 p-2 rounded-lg">
|
||||
<FaTable className="w-5 h-5" />
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
{/* Sol taraf */}
|
||||
<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>
|
||||
<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>
|
||||
|
||||
{/* Sağ taraf */}
|
||||
<div className="flex flex-col items-end text-sm text-slate-600 gap-1">
|
||||
<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>
|
||||
|
||||
{entity.description && (
|
||||
<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>
|
||||
|
||||
{/* Entity Fields Preview */}
|
||||
<div className="mb-4">
|
||||
<div className="bg-slate-50 rounded-lg p-3">
|
||||
<h4 className="text-sm font-medium text-slate-700 mb-2">
|
||||
{translate('::App.DeveloperKit.Entity.FieldLabel')}
|
||||
</h4>
|
||||
<div className="grid grid-cols-2 gap-2 text-xs">
|
||||
<div className="grid grid-cols-3 gap-2 text-xs">
|
||||
{entity.fields.slice(0, 4).map((field) => (
|
||||
<div key={field.id} className="flex items-center gap-2">
|
||||
<span
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ export interface CustomEntityField {
|
|||
description?: string;
|
||||
creationTime?: string;
|
||||
lastModificationTime?: string;
|
||||
displayOrder: number;
|
||||
}
|
||||
|
||||
export interface CreateUpdateCustomEntityFieldDto {
|
||||
|
|
@ -38,6 +39,7 @@ export interface CreateUpdateCustomEntityFieldDto {
|
|||
isUnique?: boolean;
|
||||
defaultValue?: string;
|
||||
description?: string;
|
||||
displayOrder: number;
|
||||
}
|
||||
|
||||
export interface CreateUpdateCustomEntityDto {
|
||||
|
|
|
|||
Loading…
Reference in a new issue