From 189f2ec5e50d8be55aae698252010da8ca157ec0 Mon Sep 17 00:00:00 2001 From: khalifan-kfan Date: Wed, 3 Jan 2024 09:20:25 +0300 Subject: [PATCH] fix data display --- .../pages/edit/translations-edit.component.ts | 35 ++----- .../pages/home/translations.page.html | 43 ++++++++ .../pages/home/translations.page.scss | 4 + .../pages/home/translations.page.ts | 19 +++- .../translations/translations.service.ts | 98 +++---------------- ...240102153452_translations_table_create.sql | 11 +++ apps/picsa-server/supabase/types/index.ts | 30 ++++++ .../src/assets/resources/contents.json | 24 ++--- .../storage-file-picker.component.ts | 2 +- libs/webcomponents/package.json | 16 +-- 10 files changed, 146 insertions(+), 136 deletions(-) create mode 100644 apps/picsa-server/supabase/migrations/20240102153452_translations_table_create.sql diff --git a/apps/picsa-apps/dashboard/src/app/modules/translations/pages/edit/translations-edit.component.ts b/apps/picsa-apps/dashboard/src/app/modules/translations/pages/edit/translations-edit.component.ts index e2020b8ed..f5075d86d 100644 --- a/apps/picsa-apps/dashboard/src/app/modules/translations/pages/edit/translations-edit.component.ts +++ b/apps/picsa-apps/dashboard/src/app/modules/translations/pages/edit/translations-edit.component.ts @@ -1,48 +1,33 @@ 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 { -// IUploadResult, -// SupabaseStoragePickerDirective, -// SupabaseUploadComponent, -// } from '@picsa/shared/services/core/supabase'; -// import { IStorageEntry } from '@picsa/shared/services/core/supabase/services/supabase-storage.service'; + 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 { ResourcesDashboardService } from '../../translations.service'; +import { TranslationDashboardService } from '../../translations.service'; // type IResourceEntry = Database['public']['Tables']['resources']['Row']; @Component({ - selector: 'dashboard-resource-create', + selector: 'dashboard-translations-edit', standalone: true, imports: [ CommonModule, - // DashboardMaterialModule, - // DashboardResourcesStorageLinkComponent, - // FormsModule, - // ReactiveFormsModule, - // SupabaseStoragePickerDirective, - // SupabaseUploadComponent, + DashboardMaterialModule, + FormsModule, + ReactiveFormsModule, ], templateUrl: './translations-edit.component.html', styleUrls: ['./translations-edit.component.scss'], }) export class TranslationsEditComponent { constructor( - // private service: ResourcesDashboardService, + private service: TranslationDashboardService, private route: ActivatedRoute ) {} - - - - - - } diff --git a/apps/picsa-apps/dashboard/src/app/modules/translations/pages/home/translations.page.html b/apps/picsa-apps/dashboard/src/app/modules/translations/pages/home/translations.page.html index ca08f6a58..8b6399289 100644 --- a/apps/picsa-apps/dashboard/src/app/modules/translations/pages/home/translations.page.html +++ b/apps/picsa-apps/dashboard/src/app/modules/translations/pages/home/translations.page.html @@ -2,4 +2,47 @@

Translations

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
en {{ element.en }} mw_ny {{ element.mw_ny }} sw {{ element.sw }} tg {{ element.tg }} zm_ny {{ element.zm_ny }} Date {{ element.created_at | date: 'mediumDate' }}
diff --git a/apps/picsa-apps/dashboard/src/app/modules/translations/pages/home/translations.page.scss b/apps/picsa-apps/dashboard/src/app/modules/translations/pages/home/translations.page.scss index 05bb98ef7..b79bcd6c7 100644 --- a/apps/picsa-apps/dashboard/src/app/modules/translations/pages/home/translations.page.scss +++ b/apps/picsa-apps/dashboard/src/app/modules/translations/pages/home/translations.page.scss @@ -12,3 +12,7 @@ tr.resource-row { th { font-weight: bold; } + +td { + cursor: pointer; +} \ No newline at end of file diff --git a/apps/picsa-apps/dashboard/src/app/modules/translations/pages/home/translations.page.ts b/apps/picsa-apps/dashboard/src/app/modules/translations/pages/home/translations.page.ts index ea99e6041..3e6d42056 100644 --- a/apps/picsa-apps/dashboard/src/app/modules/translations/pages/home/translations.page.ts +++ b/apps/picsa-apps/dashboard/src/app/modules/translations/pages/home/translations.page.ts @@ -1,22 +1,31 @@ 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 { DashboardResourcesStorageLinkComponent } from '../../components'; -import { ResourcesDashboardService } from '../../translations.service'; +import { TranslationDashboardService } from '../../translations.service'; +export type ITranslationRow = Database['public']['Tables']['translations']['Row']; @Component({ - selector: 'dashboard-resources-page', + selector: 'dashboard-translations-page', standalone: true, imports: [CommonModule, DashboardMaterialModule, RouterModule], templateUrl: './translations.page.html', styleUrls: ['./translations.page.scss'], }) export class TranslationsPageComponent implements OnInit { - //public displayedColumns = ['title', 'storage_file']; - constructor(public service: ResourcesDashboardService) {} + displayedColumns: string[] = [ 'en', 'mw_ny', 'sw', 'tg', 'zm_ny','created_at',]; + constructor(public service: TranslationDashboardService, private router: Router) {} ngOnInit(): void { this.service.ready(); + + } + goToRecord(row:ITranslationRow){ + console.log(row) + this.router.navigate([`/`, row.id]); + } } diff --git a/apps/picsa-apps/dashboard/src/app/modules/translations/translations.service.ts b/apps/picsa-apps/dashboard/src/app/modules/translations/translations.service.ts index 0638c4133..758941b9c 100644 --- a/apps/picsa-apps/dashboard/src/app/modules/translations/translations.service.ts +++ b/apps/picsa-apps/dashboard/src/app/modules/translations/translations.service.ts @@ -1,113 +1,41 @@ -import { Injectable, signal } from '@angular/core'; +import { Injectable } from '@angular/core'; // eslint-disable-next-line @nx/enforce-module-boundaries import { Database } from '@picsa/server-types'; import { PicsaAsyncService } from '@picsa/shared/services/asyncService.service'; -import { PicsaNotificationService } from '@picsa/shared/services/core/notification.service'; +// import { PicsaNotificationService } from '@picsa/shared/services/core/notification.service'; import { SupabaseService } from '@picsa/shared/services/core/supabase'; import { IStorageEntry } from '@picsa/shared/services/core/supabase/services/supabase-storage.service'; -import { arrayToHashmap } from '@picsa/utils'; + +export type ITranslationRow = Database['public']['Tables']['translations']['Row']; export interface IResourceStorageEntry extends IStorageEntry { /** Url generated when upload to public bucket (will always be populated, even if bucket not public) */ publicUrl: string; } - -export type IResourceEntry = Database['public']['Tables']['resources']['Row']; - @Injectable({ providedIn: 'root' }) -export class ResourcesDashboardService extends PicsaAsyncService { - private storageFiles: IResourceStorageEntry[] = []; - public storageFilesHashmap: Record = {}; - public readonly resources = signal([]); +export class TranslationDashboardService extends PicsaAsyncService { + + public translations: ITranslationRow[] = []; public get table() { - return this.supabaseService.db.table('resources'); + return this.supabaseService.db.table('translations'); } - constructor(private supabaseService: SupabaseService, private notificationService: PicsaNotificationService) { + constructor(private supabaseService: SupabaseService) { super(); } public override async init() { await this.supabaseService.ready(); - await this.listStorageFiles(); - await this.listResources(); - } - - /** Retrieve storage db meta for a file */ - public async getStorageFileById(id: string) { - // Refresh storage file cache if id not found - if (!this.storageFilesHashmap[id]) { - await this.listStorageFiles(); - } - return this.storageFilesHashmap[id]; - } - - /** - * - * TODO - only enable super admin/local dev - * TODO - remove when no longer required - */ - public async migrateHardcodedResources() { - // NOTE - assumes storage files manually uploaded - - // eslint-disable-next-line @nx/enforce-module-boundaries - const { DB_COLLECTION_ENTRIES, DB_FILE_ENTRIES, DB_LINK_ENTRIES } = await import( - '@picsa/resources/src/app/data/index' - ); - console.log({ DB_COLLECTION_ENTRIES, DB_FILE_ENTRIES, DB_LINK_ENTRIES }); - const ref = this.supabaseService.db.table('resources'); - const uploaded: unknown[] = []; - const missing: unknown[] = []; - - for (const fileEntry of Object.values(DB_FILE_ENTRIES)) { - const { type, description, url } = fileEntry; - // extract pathname from firebase url - const { pathname } = new URL(url); - const storagePath = decodeURI(pathname).replace(/%2F/g, '/').replace('/v0/b/picsa-apps.appspot.com/o/', ''); - // check for equivalent storage file - const storageFile = this.storageFiles.find((file) => file.name === storagePath); - if (storageFile) { - const dbEntry: Database['public']['Tables']['resources']['Insert'] = { - description, - type, - - storage_file: storageFile.id, - }; - const { error } = await ref.upsert(dbEntry, { ignoreDuplicates: false }); - - if (error) { - console.error(error); - } - uploaded.push(fileEntry); - } else { - missing.push(fileEntry); - } - } - console.log({ uploaded, missing }); - if (missing.length > 0) { - this.notificationService.showUserNotification({ - matIcon: 'error', - message: `${missing.length} files missing from storage`, - }); - } + await this.listTranslations(); } - private async listStorageFiles() { - const storageFiles = await this.supabaseService.storage.list('resources'); - this.storageFiles = storageFiles.map((file) => ({ - ...file, - publicUrl: this.supabaseService.storage.getPublicLink(file.bucket_id as string, file.name as string), - })); - this.storageFilesHashmap = arrayToHashmap(this.storageFiles, 'id'); - console.log('storage files', this.storageFilesHashmap); - } - private async listResources() { - const { data, error } = await this.supabaseService.db.table('resources').select<'*', IResourceEntry>('*'); + private async listTranslations() { + const { data, error } = await this.supabaseService.db.table('translations').select<'*', ITranslationRow>('*'); if (error) { throw error; } - this.resources.set(data); + this.translations = data || []; } } diff --git a/apps/picsa-server/supabase/migrations/20240102153452_translations_table_create.sql b/apps/picsa-server/supabase/migrations/20240102153452_translations_table_create.sql new file mode 100644 index 000000000..c661792b0 --- /dev/null +++ b/apps/picsa-server/supabase/migrations/20240102153452_translations_table_create.sql @@ -0,0 +1,11 @@ +create table + public.translations ( + id bigint generated by default as identity, + created_at timestamp with time zone not null default now(), + en text null, + mw_ny text null, + sw text null, + tg text null, + zm_ny text null, + constraint translations_pkey primary key (id) + ) tablespace pg_default; \ No newline at end of file diff --git a/apps/picsa-server/supabase/types/index.ts b/apps/picsa-server/supabase/types/index.ts index 7da0ffaea..5946a1596 100644 --- a/apps/picsa-server/supabase/types/index.ts +++ b/apps/picsa-server/supabase/types/index.ts @@ -264,6 +264,36 @@ export interface Database { } Relationships: [] } + translations: { + Row: { + created_at: string + en: string | null + id: number + mw_ny: string | null + sw: string | null + tg: string | null + zm_ny: string | null + } + Insert: { + created_at?: string + en?: string | null + id?: number + mw_ny?: string | null + sw?: string | null + tg?: string | null + zm_ny?: string | null + } + Update: { + created_at?: string + en?: string | null + id?: number + mw_ny?: string | null + sw?: string | null + tg?: string | null + zm_ny?: string | null + } + Relationships: [] + } } Views: { storage_objects: { diff --git a/apps/picsa-tools/resources-tool/src/assets/resources/contents.json b/apps/picsa-tools/resources-tool/src/assets/resources/contents.json index fe8583095..89bc4db74 100644 --- a/apps/picsa-tools/resources-tool/src/assets/resources/contents.json +++ b/apps/picsa-tools/resources-tool/src/assets/resources/contents.json @@ -44,8 +44,8 @@ "covers/facebook.svg": { "relativePath": "covers/facebook.svg", "size_kb": 1.1, - "md5Checksum": "8626bc9119bd6b8bc0fa04e8a20b6e74", - "modifiedTime": "2022-09-28T20:19:52.986Z" + "md5Checksum": "a09b2f44f6b44b5b6e29aedba9f92029", + "modifiedTime": "2023-07-10T22:11:12.359Z" }, "covers/gap.jpg": { "relativePath": "covers/gap.jpg", @@ -61,9 +61,9 @@ }, "covers/gender-equality.svg": { "relativePath": "covers/gender-equality.svg", - "size_kb": 5.5, - "md5Checksum": "0b6599c4d8b3a87b787910b18a9d8851", - "modifiedTime": "2022-11-01T20:27:18.286Z" + "size_kb": 5.4, + "md5Checksum": "95af38f37c2179d4ad0c5288cbb236ed", + "modifiedTime": "2023-07-10T22:11:12.359Z" }, "covers/gras-nelk.jpg": { "relativePath": "covers/gras-nelk.jpg", @@ -110,8 +110,8 @@ "covers/spreadsheet.svg": { "relativePath": "covers/spreadsheet.svg", "size_kb": 2.8, - "md5Checksum": "a03a4bfb0a1791fda8e232a8b032715b", - "modifiedTime": "2022-09-30T09:35:53.529Z" + "md5Checksum": "0a1bc91188bbc03fda0a7cb2bc1aa6ce", + "modifiedTime": "2023-07-10T22:11:12.360Z" }, "covers/twitter.png": { "relativePath": "covers/twitter.png", @@ -121,15 +121,15 @@ }, "covers/videos.svg": { "relativePath": "covers/videos.svg", - "size_kb": 3.5, - "md5Checksum": "9bee23e2f74d07bd0cdd27bdc286e777", - "modifiedTime": "2023-09-25T18:01:08.322Z" + "size_kb": 3.4, + "md5Checksum": "37516a0c19e20344d02960c6368dde62", + "modifiedTime": "2023-11-16T07:09:42.068Z" }, "covers/weather.svg": { "relativePath": "covers/weather.svg", "size_kb": 3.1, - "md5Checksum": "db07c7d20d9520124c251c810c5817fd", - "modifiedTime": "2022-09-28T19:22:58.064Z" + "md5Checksum": "ca87f24916d258b8b8b5dd8343d4305b", + "modifiedTime": "2023-07-10T22:11:12.360Z" }, "covers/whatsapp.svg": { "relativePath": "covers/whatsapp.svg", diff --git a/libs/shared/src/services/core/supabase/components/storage-file-picker/storage-file-picker.component.ts b/libs/shared/src/services/core/supabase/components/storage-file-picker/storage-file-picker.component.ts index e0dfd1712..7995046d7 100644 --- a/libs/shared/src/services/core/supabase/components/storage-file-picker/storage-file-picker.component.ts +++ b/libs/shared/src/services/core/supabase/components/storage-file-picker/storage-file-picker.component.ts @@ -66,7 +66,7 @@ export class SupabaseStorageFilePickerComponent { const entries = await this.storage.list(this.storageBucketName, this.storageFolderPath); this.fileEntries = entries // filter out metadata files which have filename starting with `.` - .filter(({ name }) => !name?.split('/').pop()?.startsWith('.')) + .filter(({ name }) => name && !name.split('/').pop()?.startsWith('.')) .sort((a, b) => { if (!b.name) return 1; if (!a.name) return -1; diff --git a/libs/webcomponents/package.json b/libs/webcomponents/package.json index 40a5cd7d9..9e6d67516 100644 --- a/libs/webcomponents/package.json +++ b/libs/webcomponents/package.json @@ -1,14 +1,14 @@ { "name": "@picsa/webcomponents", "version": "0.0.1", - "main": "./dist/index.cjs.js", - "module": "./dist/index.js", - "es2015": "./dist/esm/index.mjs", - "es2017": "./dist/esm/index.mjs", - "types": "./dist/types/components.d.ts", - "collection": "./dist/collection/collection-manifest.json", - "collection:main": "./dist/collection/index.js", - "unpkg": "./dist/picsa-webcomponents/picsa-webcomponents.js", + "main": "../../dist/libs/webcomponents/dist/index.cjs.js", + "module": "../../dist/libs/webcomponents/dist/index.js", + "es2015": "../../dist/libs/webcomponents/dist/esm/index.mjs", + "es2017": "../../dist/libs/webcomponents/dist/esm/index.mjs", + "types": "../../dist/libs/webcomponents/dist/types/components.d.ts", + "collection": "../../dist/libs/webcomponents/dist/collection/collection-manifest.json", + "collection:main": "../../dist/libs/webcomponents/dist/collection/index.js", + "unpkg": "../../dist/libs/webcomponents/dist/picsa-webcomponents/picsa-webcomponents.js", "files": [ "dist/", "loader/"