enable editing for a single translation

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

@@ -1,5 +1,42 @@
 <div class="page-content">
   <h2>Edit Translations</h2>
+  @if(translationRow){
+  <form class="form-content">
+    <div>
+      <label>Created At</label>
+      <div>{{ translationRow.created_at | date: 'mediumDate' }}</div>
+    </div>
 
-
-</div>
+    <div class="form-data">
+      <label>English</label>
+      <input matInput [(ngModel)]="translationRow.en" 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>sw</label>
+      <input matInput [(ngModel)]="translationRow.sw" name="sw" />
+    </div>
+    <div class="form-data">
+      <label>tg</label>
+      <input matInput [(ngModel)]="translationRow.tg" name="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()">Submit</button>
+  </form>
+  } @else if(dataLoadError) {
+  <div>{{dataLoadError}}</div>
+  } @else {
+  <div>Loading...</div>
+  }
+  @if(editActionFeedbackMessage){
+    <div>{{editActionFeedbackMessage}}</div>
+  }
+</div>

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

@@ -0,0 +1,26 @@
+.form-content{
+    display: flex;
+    flex-direction: column;
+    gap: 1.4rem;
+}
+.submitButton{
+    width: 7rem;
+    margin-bottom: 1rem;
+}
+.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,33 +1,55 @@
 import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
- import { FormBuilder, FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormBuilder, FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 // eslint-disable-next-line @nx/enforce-module-boundaries
- import type { Database } from '@picsa/server-types';
- import { PICSAFormValidators } from '@picsa/shared/modules/forms/validators';
+import type { Database } from '@picsa/server-types';
+import { PICSAFormValidators } from '@picsa/shared/modules/forms/validators';
 
- import { DashboardMaterialModule } from '../../../../material.module';
+import { DashboardMaterialModule } from '../../../../material.module';
 // import { DashboardResourcesStorageLinkComponent } from '../../components/storage-link/storage-link.component';
 import { TranslationDashboardService } from '../../translations.service';
 
-// type IResourceEntry = Database['public']['Tables']['resources']['Row'];
+type ITranslationEntry = Database['public']['Tables']['translations']['Row'];
 
 @Component({
   selector: 'dashboard-translations-edit',
   standalone: true,
-  imports: [
-    CommonModule,
-    DashboardMaterialModule,
-    FormsModule,
-    ReactiveFormsModule,
-  ],
+  imports: [CommonModule, DashboardMaterialModule, FormsModule, ReactiveFormsModule],
   templateUrl: './translations-edit.component.html',
   styleUrls: ['./translations-edit.component.scss'],
 })
 export class TranslationsEditComponent {
-  constructor(
-    private service: TranslationDashboardService,
-    private route: ActivatedRoute
-  ) {}
+  translationRow: ITranslationEntry;
+  dataLoadError: string;
+  editActionFeedbackMessage: string;
+  constructor(private service: TranslationDashboardService, private route: ActivatedRoute) {
+    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.';
+        });
+    });
+  }
 
+  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.';
+      });
+  }
 }

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

@@ -21,11 +21,8 @@ export class TranslationsPageComponent implements OnInit {
   constructor(public service: TranslationDashboardService, private router: Router) {}
   ngOnInit(): void {
     this.service.ready();
-
   }
   goToRecord(row:ITranslationRow){
-    console.log(row)
-    this.router.navigate([`/`, row.id]);
-
+    this.router.navigate([`/translations`, row.id]);
   }
 }

apps/picsa-apps/dashboard/src/app/modules/translations/translations.service.ts

@@ -38,4 +38,24 @@ export class TranslationDashboardService extends PicsaAsyncService {
     }
     this.translations = data || [];
   }
+
+  // update a translation record by ID
+  public async updateTranslationById(id: number, updatedData: Partial<ITranslationRow>): Promise<string> {
+    const { data, error } = await this.supabaseService.db.table('translations').update(updatedData).eq('id', id);
+    if (error) {
+      throw error;
+    }
+    return "Updated successfully";
+  }
+
+  // Fetch a translation record by ID
+  public async getTranslationById(id: number): Promise<ITranslationRow> {
+    const { data, error } = await this.supabaseService.db.table('translations').select('*').eq('id', id).single();
+    if (error) {
+      throw error;
+    }
+
+    return data;
+  }
+
 }