buttons labels and fix grid of translation manager, import and export functionality in data-table

2026-08-04 16:47:01 +05:30
parent c7c361cc0b
commit c683f6fea9
28 changed files with 1742 additions and 55 deletions
@@ -0,0 +1,126 @@
+<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>