Merge pull request #300 from e-picsa/feat/dashboard-translation-update

feat(dashboard): translation progress and edit

apps/picsa-apps/dashboard/src/app/material.module.ts

@@ -1,12 +1,14 @@
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -19,13 +21,15 @@ import { DomSanitizer } from '@angular/platform-browser';
 
 const matModules = [
   MatButtonModule,
+  MatCheckboxModule,
   MatChipsModule,
   MatDialogModule,
   MatExpansionModule,
   MatFormFieldModule,
   MatIconModule,
   MatInputModule,
   MatListModule,
+  MatProgressBarModule,
   MatRadioModule,
   MatSelectModule,
   MatSidenavModule,

apps/picsa-apps/dashboard/src/app/modules/translations/pages/edit/translations-edit.component.html

@@ -1,41 +1,21 @@
-<div class="page-content">
-  <h2>Edit Translations</h2>
-  @if(translationRow){
-  <form class="form-content">
-    <div class="form-data">
-      <label>Date of Creation</label>
-      <div>{{ translationRow.created_at | date: 'mediumDate' }}</div>
-    </div>
+<form [formGroup]="form">
+  <!-- Short text input -->
+  @if(text.length<20){
+  <mat-form-field style="width: 320px">
+    <mat-label>{{ text }}</mat-label>
+    <input matInput formControlName="value" cdkFocusInitial />
+  </mat-form-field>
 
-    <div class="form-data">
-      <label>Text</label>
-      <input matInput [(ngModel)]="translationRow.text" name="en" />
-    </div>
-
-    <div class="form-data">
-      <label>mw_ny</label>
-      <input matInput [(ngModel)]="translationRow.mw_ny" name="mw_ny" />
-    </div>
-
-    <div class="form-data">
-      <label>ke_sw</label>
-      <input matInput [(ngModel)]="translationRow.ke_sw" name="ke_sw" />
-    </div>
-    <div class="form-data">
-      <label>tj_tg</label>
-      <input matInput [(ngModel)]="translationRow.tj_tg" name="tj_tg" />
-    </div>
-    <div class="form-data">
-      <label>zm_ny</label>
-      <input matInput [(ngModel)]="translationRow.zm_ny" name="zm_ny" />
-    </div>
-    <button mat-raised-button color="primary" class="submitButton" (click)="submitForm()">Update</button>
-  </form>
-  } @else if(dataLoadError) {
-  <div>{{ dataLoadError }}</div>
   } @else {
-  <div>Loading...</div>
-  } @if(editActionFeedbackMessage){
-  <div>{{ editActionFeedbackMessage }}</div>
+  <!-- Longer textarea input -->
+  <mat-form-field style="width: 320px">
+    <p>{{ text }}</p>
+    <textarea matInput formControlName="value" cdkFocusInitial></textarea>
+  </mat-form-field>
   }
-</div>
+  <!-- Action buttons -->
+  <mat-dialog-actions>
+    <button mat-button mat-dialog-close>Cancel</button>
+    <button mat-button mat-dialog-close (click)="save()" [disabled]="form.invalid || form.pristine">Save</button>
+  </mat-dialog-actions>
+</form>

apps/picsa-apps/dashboard/src/app/modules/translations/pages/edit/translations-edit.component.scss

@@ -1,27 +0,0 @@
-.form-content {
-  display: flex;
-  flex-direction: column;
-  gap: 1.4rem;
-}
-.submitButton {
-  width: 7rem;
-  margin-bottom: 1rem;
-}
-.deleteButton {
-  width: 15rem;
-}
-.form-data {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-input {
-  padding: 8px;
-  color: var(--color-primary);
-  outline-color: var(--color-primary);
-  max-width: 300px;
-  display: block;
-  font-size: 0.9rem;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}

apps/picsa-apps/dashboard/src/app/modules/translations/pages/edit/translations-edit.component.ts

@@ -1,15 +1,12 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Component, Inject } from '@angular/core';
+import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { RouterModule } from '@angular/router';
-// eslint-disable-next-line @nx/enforce-module-boundaries
-import type { Database } from '@picsa/server-types';
+import { ILocaleCode } from '@picsa/data';
 
 import { DashboardMaterialModule } from '../../../../material.module';
-import { TranslationDashboardService } from '../../translations.service';
-
-type ITranslationEntry = Database['public']['Tables']['translations']['Row'];
+import { ITranslationRow, TranslationDashboardService } from '../../translations.service';
 
 @Component({
   selector: 'dashboard-translations-edit',
@@ -19,36 +16,28 @@ type ITranslationEntry = Database['public']['Tables']['translations']['Row'];
   styleUrls: ['./translations-edit.component.scss'],
 })
 export class TranslationsEditComponent {
-  translationRow: ITranslationEntry;
-  dataLoadError: string;
-  editActionFeedbackMessage: string;
-  constructor(private service: TranslationDashboardService, private route: ActivatedRoute, private router: Router) {
-    this.service.ready();
-    this.route.params.subscribe((params) => {
-      const id = params['id'];
-      this.service
-        .getTranslationById(id)
-        .then((data) => {
-          this.translationRow = data;
-        })
-        .catch((error) => {
-          console.error('Error fetching translation:', error);
-          this.dataLoadError = 'Failed to fetch translation.';
-        });
-    });
+  public text: string;
+
+  public form = this.fb.group({ value: [''] });
+
+  constructor(
+    private service: TranslationDashboardService,
+    @Inject(MAT_DIALOG_DATA) public data: { row: ITranslationRow; locale: ILocaleCode },
+    private fb: FormBuilder
+  ) {
+    // populate source text
+    this.text = data.row.text;
+    // populate saved translation value
+    const value = data.row[data.locale];
+    if (value) {
+      this.form.patchValue({ value });
+    }
   }
 
-  submitForm() {
-    this.service
-      .updateTranslationById(this.translationRow.id, this.translationRow)
-      .then((data) => {
-        if (data === 'Updated successfully') {
-          this.editActionFeedbackMessage = 'Updated successfully';
-        }
-      })
-      .catch((error) => {
-        console.error('Error editing translation:', error);
-        this.editActionFeedbackMessage = 'Failed to edit translation.';
-      });
+  async save() {
+    await this.service.ready();
+    const { id } = this.data.row;
+    const { value } = this.form.value;
+    await this.service.updateTranslationById(id, { [this.data.locale]: value });
   }
 }

apps/picsa-apps/dashboard/src/app/modules/translations/pages/home/translations.page.html

@@ -1,6 +1,24 @@
 <div class="page-content">
-  @if(tableOptions && tableData().length>0){
-  <picsa-data-table [data]="tableData()" [options]="tableOptions" [valueTemplates]="{created_at}">
+  <!-- Language Select -->
+  <mat-form-field>
+    <mat-label>Language</mat-label>
+    <mat-select [(ngModel)]="locale">
+      @for(locale of localeOptions(); track locale.id){
+      <mat-option [value]="locale.id">{{locale.language_label}}</mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+
+  <!-- Progress -->
+  <div style="display: flex; justify-content: center; align-items: center; gap: 8px">
+    <mat-progress-bar mode="determinate" [value]="translationProgress()" style="flex: 1"></mat-progress-bar>
+    <div>{{countTranslated}} / {{countTotal}}</div>
+    <mat-checkbox [(ngModel)]="includeTranslated">Show All</mat-checkbox>
+  </div>
+
+  <!-- Table -->
+  @if(tableOptions() && tableData().length>0){
+  <picsa-data-table [data]="tableData()" [options]="tableOptions()" [valueTemplates]="{created_at}">
     <ng-template #created_at let-value> {{value | date: 'mediumDate' }} </ng-template>
   </picsa-data-table>
   } @else {