feat(dashboard) - add translations frontend and db

apps/picsa-apps/dashboard/src/app/app.component.ts

@@ -42,10 +42,10 @@ export class AppComponent implements AfterViewInit {
     //   label: 'Monitoring Forms',
     //   href: '/monitoring-forms',
     // },
-    // {
-    //   label: 'Translations',
-    //   href: '/translations',
-    // },
+    {
+      label: 'Translations',
+      href: '/translations',
+    },
   ];
 
   globalLinks: INavLink[] = [

apps/picsa-apps/dashboard/src/app/app.routes.ts

@@ -9,4 +9,8 @@ export const appRoutes: Route[] = [
     path: 'climate-data',
     loadChildren: () => import('./modules/climate-data/climate-data.module').then((m) => m.ClimateDataModule),
   },
+  {
+    path: 'translations',
+    loadChildren: () => import('./modules/translations/translations.module').then((m) => m.TranslationsPageModule),
+  },
 ];

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

@@ -24,7 +24,7 @@ const matModules = [
   MatStepperModule,
   MatTableModule,
   MatTabsModule,
-  MatToolbarModule,
+  MatToolbarModule
 ];
 
 @NgModule({

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

@@ -0,0 +1,47 @@
+<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>
+
+    <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()">Update</button>
+  </form>
+  } @else if(dataLoadError) {
+  <div>{{dataLoadError}}</div>
+  } @else {
+  <div>Loading...</div>
+  }
+  @if(editActionFeedbackMessage){
+  <div>{{editActionFeedbackMessage}}</div>
+  }
+  @if(translationRow){
+  <h2>Delete this Translation</h2>
+  <button mat-raised-button color="primary" class="deleteButton" (click)="openTranslationDeleteDialog()">Delete this
+    translation <mat-icon color="white">delete</mat-icon></button>
+  }
+</div>

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

@@ -0,0 +1,29 @@
+.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.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslationsEditComponent } from './translations-edit.component';
+
+describe('TranslationsEditComponent', () => {
+  let component: TranslationsEditComponent;
+  let fixture: ComponentFixture<TranslationsEditComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TranslationsEditComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TranslationsEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,69 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute,Router } from '@angular/router';
+import { RouterModule } from '@angular/router';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import type { Database } from '@picsa/server-types';
+
+import { DashboardMaterialModule } from '../../../../material.module';
+// import { DashboardResourcesStorageLinkComponent } from '../../components/storage-link/storage-link.component';
+import { TranslationDashboardService } from '../../translations.service';
+
+type ITranslationEntry = Database['public']['Tables']['translations']['Row'];
+
+@Component({
+  selector: 'dashboard-translations-edit',
+  standalone: true,
+  imports: [CommonModule, DashboardMaterialModule, FormsModule, ReactiveFormsModule,RouterModule],
+  templateUrl: './translations-edit.component.html',
+  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.';
+        });
+    });
+  }
+
+  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.';
+      });
+  }
+  deleteTranslation(id:number){
+    this.service.deleteTranslationById(id).then((data) => {
+      if (data === 'Deleted Successfully') {
+        this.router.navigate([`/translations`]);
+      }
+    })
+    .catch((error) => {
+      console.error('Error deleting translation:', error);
+    });
+  }
+  async openTranslationDeleteDialog() {
+    //failed attempt to use a shared delete model
+    this.deleteTranslation(this.translationRow.id);
+  }
+}

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

@@ -0,0 +1,61 @@
+<div class="page-content">
+  <div style="display: flex; align-items: center">
+    <h2 style="flex: 1">Translations</h2>
+    <button mat-raised-button color="primary" routerLink="/translations/new">Add New Translation</button>
+  </div>
+  @if(service.translations){
+  <table mat-table [dataSource]="service.translations">
+    <!-- 'tool' Column -->
+    <ng-container matColumnDef="tool" clickable>
+      <th mat-header-cell *matHeaderCellDef>Tool</th>
+      <td mat-cell *matCellDef="let element">{{ element.tool }}</td>
+    </ng-container>
+
+    <!-- 'context' Column -->
+    <ng-container matColumnDef="context" clickable>
+      <th mat-header-cell *matHeaderCellDef>Context</th>
+      <td mat-cell *matCellDef="let element">{{ element.context }}</td>
+    </ng-container>
+
+    <!-- 'en' Column -->
+    <ng-container matColumnDef="en" clickable>
+      <th mat-header-cell *matHeaderCellDef>en</th>
+      <td mat-cell *matCellDef="let element">{{ element.en }}</td>
+    </ng-container>
+
+    <!-- 'mw_ny' Column -->
+    <ng-container matColumnDef="mw_ny">
+      <th mat-header-cell *matHeaderCellDef>mw_ny</th>
+      <td mat-cell *matCellDef="let element">{{ element.mw_ny }}</td>
+    </ng-container>
+
+    <!-- 'zm_ny' Column -->
+    <ng-container matColumnDef="zm_ny">
+      <th mat-header-cell *matHeaderCellDef>zm_ny</th>
+      <td mat-cell *matCellDef="let element">{{ element.zm_ny }}</td>
+    </ng-container>
+
+    <!-- 'ke_sw' Column -->
+    <ng-container matColumnDef="sw">
+      <th mat-header-cell *matHeaderCellDef>ke_sw</th>
+      <td mat-cell *matCellDef="let element">{{ element.ke_sw }}</td>
+    </ng-container>
+
+    <!-- 'tg' Column -->
+    <ng-container matColumnDef="tg">
+      <th mat-header-cell *matHeaderCellDef>tj_tg</th>
+      <td mat-cell *matCellDef="let element">{{ element.tj_tg }}</td>
+    </ng-container>
+
+    <!-- 'created_at' Column -->
+    <ng-container matColumnDef="created_at">
+      <th mat-header-cell *matHeaderCellDef>Date</th>
+      <td mat-cell *matCellDef="let element">{{ element.created_at | date: 'mediumDate' }}</td>
+    </ng-container>
+
+    <!-- Table Rows -->
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="goToRecord(row)"></tr>
+  </table>
+  }
+</div>

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

@@ -0,0 +1,27 @@
+table.resources-table {
+  max-height: 50vh;
+  display: block;
+  overflow: auto;
+}
+tr.resource-row {
+  cursor: pointer;
+  &:hover {
+    background: whitesmoke;
+  }
+}
+th {
+  font-weight: bold;
+}
+
+td {
+  cursor: pointer;
+}
+
+.disallow-click{
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.allow-click{
+  pointer-events:all;
+  cursor: pointer;
+}

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

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TranslationsPageComponent } from './translations.page';
+
+describe('TranslationsPageComponent', () => {
+  let component: TranslationsPageComponent;
+  let fixture: ComponentFixture<TranslationsPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TranslationsPageComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TranslationsPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,37 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { Router } from '@angular/router';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { Database } from '@picsa/server-types';
+
+import { DashboardMaterialModule } from '../../../../material.module';
+import { TranslationDashboardService } from '../../translations.service';
+
+export type ITranslationRow = Database['public']['Tables']['translations']['Row'];
+@Component({
+  selector: 'dashboard-translations-page',
+  standalone: true,
+  imports: [CommonModule, DashboardMaterialModule, RouterModule],
+  templateUrl: './translations.page.html',
+  styleUrls: ['./translations.page.scss'],
+})
+export class TranslationsPageComponent implements OnInit {
+  displayedColumns: string[] = ['tool', 'context', 'en', 'mw_ny', 'zm_ny', 'sw', 'tg', 'created_at'];
+
+  constructor(public service: TranslationDashboardService, private router: Router) {}
+  ngOnInit(): void {
+    this.service.ready();
+    this.refreshTranslations();
+  }
+
+  goToRecord(row: ITranslationRow) {
+    this.router.navigate([`/translations`, row.id]);
+  }
+
+  refreshTranslations() {
+    this.service.listTranslations().catch((error) => {
+      console.error('Error fetching translations:', error);
+    });
+  }
+}

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

@@ -0,0 +1,34 @@
+<div class="page-content">
+  <h2>New Translations</h2>
+
+  <form class="form-content">
+
+    <div class="form-data">
+      <label>English</label>
+      <input matInput [(ngModel)]="en" name="en" />
+    </div>
+
+    <div class="form-data">
+      <label>mw_ny</label>
+      <input matInput [(ngModel)]="mw_ny" name="mw_ny" />
+    </div>
+
+    <div class="form-data">
+      <label>sw</label>
+      <input matInput [(ngModel)]="sw" name="sw" />
+    </div>
+    <div class="form-data">
+      <label>tg</label>
+      <input matInput [(ngModel)]="tg" name="tg" />
+    </div>
+    <div class="form-data">
+      <label>zm_ny</label>
+      <input matInput [(ngModel)]="zm_ny" name="zm_ny" />
+    </div>
+    <button mat-raised-button color="primary" class="submitButton" (click)="submitForm()">Submit</button>
+  </form>
+
+  @if(editActionFeedbackMessage){
+    <div>{{editActionFeedbackMessage}}</div>
+  }
+</div>