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,187 @@
+<div class="grid grid-cols-12 gap-x-6 my-4">
+  <div class="col-span-12">
+    <app-data-table
+      [columns]="columns()"
+      [rows]="paginatedRows()"
+      [actions]="actions()"
+      [totalRecords]="totalRecords()"
+      [pageIndex]="pageIndex()"
+      [pageSize]="pageSize()"
+      tableTitle="Translations Manager"
+      [showSearch]="true"
+      searchPlaceholder="Search key..."
+      [searchDebounceTime]="300"
+      [showFilterButton]="true"
+      [filterActive]="showFilters()"
+      [showAddButton]="true"
+      buttonTitle="Add"
+      [showImportExportButtons]="true"
+      (addClicked)="onAddTranslationClicked()"
+      (importClicked)="onImportCsvClicked()"
+      (exportClicked)="onExportCsv()"
+      (filterClicked)="onToggleFilters()"
+      (searchChanged)="onSearchChanged($event)"
+      (pageChanged)="onPageChanged($event)"
+      (actionClicked)="onActionClick($event)"
+    >
+      <!-- Data Table Filter Toolbar Template -->
+      <ng-template appDataTableToolbar>
+        <form [formGroup]="filterForm" (ngSubmit)="applyFilters()" class="flex flex-wrap items-end gap-3 w-full">
+          <!-- Module Filter Autocomplete with Floating Label -->
+          <div class="w-64 min-w-[200px]">
+            <app-autocomplete
+              formControlName="module"
+              inputId="translation-filter-module"
+              variant="floating"
+              size="sm"
+              label="Module"
+              placeholder="Search module..."
+              [searchFn]="searchModuleFilters"
+              [displayWith]="displayModuleFilter"
+              [valueWith]="moduleFilterValue"
+              [selectedItem]="selectedModuleFilter()"
+              [minSearchLength]="0"
+              [debounceTime]="100"
+              [limit]="20"
+              [clearable]="true"
+              [hideValidation]="true"
+              wrapperClass="!mb-0 w-full"
+              (itemSelected)="onFilterModuleSelected($event)"
+            />
+          </div>
+
+          <!-- Language Filter Autocomplete with Floating Label -->
+          <div class="w-64 min-w-[200px]">
+            <app-autocomplete
+              formControlName="languageId"
+              inputId="translation-filter-language"
+              variant="floating"
+              size="sm"
+              label="Language"
+              placeholder="Search language..."
+              [searchFn]="searchLanguageFilters"
+              [displayWith]="displayLanguageFilter"
+              [valueWith]="languageFilterValue"
+              [selectedItem]="selectedLanguageFilter()"
+              [minSearchLength]="0"
+              [debounceTime]="100"
+              [limit]="20"
+              [clearable]="true"
+              [hideValidation]="true"
+              wrapperClass="!mb-0 w-full"
+              (itemSelected)="onFilterLanguageSelected($event)"
+            />
+          </div>
+
+          <!-- Filter Actions -->
+          <div class="flex items-center gap-2">
+            <app-button
+              action="custom"
+              label="Apply"
+              icon="ti ti-filter"
+              variant="primary-full"
+              type="submit"
+              size="sm"
+              className="!rounded-full shadow-sm !mb-0 min-h-8"
+            />
+            <app-button
+              action="custom"
+              label="Reset"
+              icon="ti ti-refresh"
+              variant="light"
+              type="button"
+              size="sm"
+              className="!rounded-full shadow-sm !mb-0 min-h-8"
+              (buttonClicked)="resetFilters()"
+            />
+          </div>
+        </form>
+      </ng-template>
+
+      <!-- Custom Cell Template: Sr. No. -->
+      <ng-template appDataTableCell="serialNumber" let-row let-value="value">
+        <div class="text-center py-1">
+          <span class="font-medium text-textmuted text-xs">{{ value }}</span>
+        </div>
+      </ng-template>
+
+      <!-- Custom Cell Template: Key -->
+      <ng-template appDataTableCell="key" let-row let-value="value">
+        <div class="py-1">
+          <div class="font-mono text-xs font-semibold text-primary break-all">
+            {{ value }}
+          </div>
+        </div>
+      </ng-template>
+
+      <!-- Custom Cell Template: Module -->
+      <ng-template appDataTableCell="module" let-value="value">
+        <div class="py-1">
+          <span class="badge bg-primary/10 text-primary font-medium px-2 py-1 rounded text-xs">
+            {{ value || 'Common' }}
+          </span>
+        </div>
+      </ng-template>
+
+      <!-- Custom Cell Template: en-US (Display Text) -->
+      <ng-template appDataTableCell="en-US" let-row>
+        <div class="py-1">
+          <span class="text-sm font-normal text-defaulttextcolor">
+            {{ row.translations['en-US'] || '—' }}
+          </span>
+        </div>
+      </ng-template>
+
+      <!-- Custom Cell Template: ar-SA (Display Text) -->
+      <ng-template appDataTableCell="ar-SA" let-row>
+        <div class="py-1">
+          <span dir="rtl" class="text-sm font-normal font-serif text-defaulttextcolor">
+            {{ row.translations['ar-SA'] || '—' }}
+          </span>
+        </div>
+      </ng-template>
+
+      <!-- Custom Cell Template: hi-IN (Display Text) -->
+      <ng-template appDataTableCell="hi-IN" let-row>
+        <div class="py-1">
+          <span class="text-sm font-normal text-defaulttextcolor">
+            {{ row.translations['hi-IN'] || '—' }}
+          </span>
+        </div>
+      </ng-template>
+
+      <!-- Custom Cell Template: Override -->
+      <ng-template appDataTableCell="overrideStatus" let-row let-value="value">
+        <div class="text-center py-1">
+          @if (value === '—' || !value || value === 'Global') {
+            <span class="text-textmuted text-sm font-medium">—</span>
+          } @else {
+            <span class="badge bg-primary/10 text-primary border border-primary/20 font-semibold px-2 py-1 rounded">
+              {{ value }}
+            </span>
+          }
+        </div>
+      </ng-template>
+    </app-data-table>
+  </div>
+</div>
+
+<!-- Add/Edit Translation Form Modal Component -->
+<app-translation-form-modal
+  [open]="modalOpen()"
+  [mode]="modalMode()"
+  [initialData]="selectedRow()"
+  [saving]="saving()"
+  (saved)="onTranslationFormSaved($event)"
+  (closed)="onModalClosed()"
+/>
+
+<!-- Delete Confirm Dialog Component -->
+<app-confirm-dialog
+  title="Delete Translation Key"
+  text="Do you really want to delete this translation key?"
+  confirmButtonText="Delete"
+  cancelButtonText="Cancel"
+  (confirmed)="onDeleteConfirmed()"
+  (cancelled)="onDeleteCancelled()"
+/>