Gagan7900
127 lines
4.2 KiB
HTML
127 lines
4.2 KiB
HTML
<modal
|
|
[open]="open()"
|
|
[title]="mode() === 'edit' ? 'Edit Translation' : 'Add New Translation Key'"
|
|
size="md"
|
|
[submitAction]="mode() === 'edit' ? 'update' : 'save'"
|
|
[submitLabel]="mode() === 'edit' ? 'Update' : 'Save'"
|
|
[loadingLabel]="mode() === 'edit' ? 'Updating...' : 'Saving...'"
|
|
[loading]="saving()"
|
|
(closed)="onClose()"
|
|
(submitted)="onSubmit()"
|
|
>
|
|
<form [formGroup]="form" (ngSubmit)="onSubmit()" autocomplete="off">
|
|
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
|
|
<!-- Key Field -->
|
|
<div class="col-span-12 md:col-span-6">
|
|
<app-form-input
|
|
formControlName="key"
|
|
inputId="translation-key"
|
|
variant="floating"
|
|
label="Key Identifier"
|
|
placeholder="e.g. k_common_btn_save"
|
|
[required]="true"
|
|
[readonly]="mode() === 'edit'"
|
|
[submitAttempted]="submitAttempted()"
|
|
[validationMessages]="{ required: 'Key identifier is required.', pattern: 'Must contain letters, numbers, underscores, or hyphens.' }"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Module Autocomplete -->
|
|
<div class="col-span-12 md:col-span-6">
|
|
<app-autocomplete
|
|
formControlName="module"
|
|
inputId="translation-module"
|
|
variant="floating"
|
|
label="Module"
|
|
placeholder="Search module..."
|
|
[searchFn]="searchModules"
|
|
[displayWith]="displayModule"
|
|
[valueWith]="moduleValue"
|
|
[selectedItem]="selectedModuleOption()"
|
|
[minSearchLength]="0"
|
|
[debounceTime]="100"
|
|
[limit]="20"
|
|
[required]="true"
|
|
[submitAttempted]="submitAttempted()"
|
|
(itemSelected)="onModuleSelected($event)"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Translations Sub-Header -->
|
|
<div class="col-span-12">
|
|
<div class="border-t border-defaultborder pt-2">
|
|
<span class="text-xs font-semibold uppercase text-textmuted tracking-wider block mb-1">Translations</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- English (en-US) -->
|
|
<div class="col-span-12">
|
|
<app-form-input
|
|
formControlName="enUs"
|
|
inputId="translation-en-us"
|
|
variant="floating"
|
|
label="English (en-US)"
|
|
placeholder="e.g. Save Changes"
|
|
[required]="true"
|
|
[submitAttempted]="submitAttempted()"
|
|
[validationMessages]="{ required: 'English translation is required.' }"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Arabic (ar-SA) -->
|
|
<div class="col-span-12">
|
|
<app-form-input
|
|
formControlName="arSa"
|
|
inputId="translation-ar-sa"
|
|
variant="floating"
|
|
label="Arabic (ar-SA)"
|
|
placeholder="مثال: حفظ التغييرات"
|
|
[submitAttempted]="submitAttempted()"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Hindi (hi-IN) -->
|
|
<div class="col-span-12">
|
|
<app-form-input
|
|
formControlName="hiIn"
|
|
inputId="translation-hi-in"
|
|
variant="floating"
|
|
label="Hindi (hi-IN)"
|
|
placeholder="उदाहरण: परिवर्तन सहेजें"
|
|
[submitAttempted]="submitAttempted()"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Tenant Override Section -->
|
|
<div class="col-span-12 border-t border-defaultborder pt-3">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<span class="text-xs font-semibold text-defaulttextcolor block">Tenant Override</span>
|
|
<span class="text-[11px] text-textmuted block">Check if this is a tenant-specific text override.</span>
|
|
</div>
|
|
<label class="inline-flex cursor-pointer items-center">
|
|
<input
|
|
type="checkbox"
|
|
formControlName="isTenantOverride"
|
|
class="form-check-input"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
@if (form.controls.isTenantOverride.value) {
|
|
<div class="mt-3">
|
|
<app-form-input
|
|
formControlName="tenantName"
|
|
inputId="translation-tenant-name"
|
|
variant="floating"
|
|
label="Tenant Name"
|
|
placeholder="e.g. TNT One"
|
|
[submitAttempted]="submitAttempted()"
|
|
/>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</modal>
|