From 2f11ae9a878dff5fb9887b4095d8ed2e6e48727e Mon Sep 17 00:00:00 2001 From: Carlos Henrique Date: Mon, 9 Mar 2026 20:51:16 -0300 Subject: [PATCH] Feito a opcao de detalhamento dos projetos, mudado logo do sakai padrao e arrumado a pagina inicial do projeto. --- src/app.menu.ts | 144 +----------------- src/app.routes.ts | 3 +- src/app/core/service/coolify.service.ts | 14 +- src/app/layout/component/app.topbar.ts | 44 ++---- src/app/pages/teste/teste.html | 55 ++++--- src/app/pages/teste/teste.ts | 113 +++++++++++--- src/app/shared/custom-table/CustomColumn.ts | 6 + src/app/shared/custom-table/custom-table.html | 26 ++++ src/app/shared/custom-table/custom-table.ts | 17 +++ 9 files changed, 210 insertions(+), 212 deletions(-) create mode 100644 src/app/shared/custom-table/CustomColumn.ts create mode 100644 src/app/shared/custom-table/custom-table.html create mode 100644 src/app/shared/custom-table/custom-table.ts diff --git a/src/app.menu.ts b/src/app.menu.ts index 956749a..e18f9ca 100644 --- a/src/app.menu.ts +++ b/src/app.menu.ts @@ -24,148 +24,18 @@ export class AppMenu { ngOnInit() { this.model = [ { - label: 'Home', - items: [ - { label: 'Dashboard', icon: 'pi pi-fw pi-home', routerLink: ['/'] }, - { label: 'Teste', icon: 'pi pi-fw pi-home', routerLink: ['/teste'] } - ] - }, - { - label: 'UI Components', - items: [ - { label: 'Form Layout', icon: 'pi pi-fw pi-id-card', routerLink: ['/uikit/formlayout'] }, - { label: 'Input', icon: 'pi pi-fw pi-check-square', routerLink: ['/uikit/input'] }, - { label: 'Button', icon: 'pi pi-fw pi-mobile', class: 'rotated-icon', routerLink: ['/uikit/button'] }, - { label: 'Table', icon: 'pi pi-fw pi-table', routerLink: ['/uikit/table'] }, - { label: 'List', icon: 'pi pi-fw pi-list', routerLink: ['/uikit/list'] }, - { label: 'Tree', icon: 'pi pi-fw pi-share-alt', routerLink: ['/uikit/tree'] }, - { label: 'Panel', icon: 'pi pi-fw pi-tablet', routerLink: ['/uikit/panel'] }, - { label: 'Overlay', icon: 'pi pi-fw pi-clone', routerLink: ['/uikit/overlay'] }, - { label: 'Media', icon: 'pi pi-fw pi-image', routerLink: ['/uikit/media'] }, - { label: 'Menu', icon: 'pi pi-fw pi-bars', routerLink: ['/uikit/menu'] }, - { label: 'Message', icon: 'pi pi-fw pi-comment', routerLink: ['/uikit/message'] }, - { label: 'File', icon: 'pi pi-fw pi-file', routerLink: ['/uikit/file'] }, - { label: 'Chart', icon: 'pi pi-fw pi-chart-bar', routerLink: ['/uikit/charts'] }, - { label: 'Timeline', icon: 'pi pi-fw pi-calendar', routerLink: ['/uikit/timeline'] }, - { label: 'Misc', icon: 'pi pi-fw pi-circle', routerLink: ['/uikit/misc'] } - ] - }, - { - label: 'Pages', - icon: 'pi pi-fw pi-briefcase', - path: '/pages', items: [ { - label: 'Landing', - icon: 'pi pi-fw pi-globe', - routerLink: ['/landing'] - }, - { - label: 'Auth', - icon: 'pi pi-fw pi-user', - path: '/auth', - items: [ - { - label: 'Login', - icon: 'pi pi-fw pi-sign-in', - routerLink: ['/auth/login'] - }, - { - label: 'Error', - icon: 'pi pi-fw pi-times-circle', - routerLink: ['/auth/error'] - }, - { - label: 'Access Denied', - icon: 'pi pi-fw pi-lock', - routerLink: ['/auth/access'] - } - ] - }, - { - label: 'Crud', - icon: 'pi pi-fw pi-pencil', - routerLink: ['/pages/crud'] - }, - { - label: 'Not Found', - icon: 'pi pi-fw pi-exclamation-circle', - routerLink: ['/pages/notfound'] - }, - { - label: 'Empty', - icon: 'pi pi-fw pi-circle-off', - routerLink: ['/pages/empty'] - } - ] - }, - { - label: 'Hierarchy', - path: '/hierarchy', - items: [ - { - label: 'Submenu 1', - icon: 'pi pi-fw pi-bookmark', - path: '/hierarchy/submenu_1', - items: [ - { - label: 'Submenu 1.1', - icon: 'pi pi-fw pi-bookmark', - path: '/hierarchy/submenu_1/submenu_1_1', - items: [ - { label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark' }, - { label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark' }, - { label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark' } - ] - }, - { - label: 'Submenu 1.2', - icon: 'pi pi-fw pi-bookmark', - path: '/hierarchy/submenu_1/submenu_1_2', - items: [{ label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark' }] - } - ] - }, - { - label: 'Submenu 2', - icon: 'pi pi-fw pi-bookmark', - path: '/hierarchy/submenu_2', - items: [ - { - label: 'Submenu 2.1', - icon: 'pi pi-fw pi-bookmark', - path: '/hierarchy/submenu_2/submenu_2_1', - items: [ - { label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark' }, - { label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark' } - ] - }, - { - label: 'Submenu 2.2', - icon: 'pi pi-fw pi-bookmark', - path: '/hierarchy/submenu_2/submenu_2_2', - items: [{ label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark' }] - } + label: 'Home', + icon: 'pi pi-home', + path: '/home', + items: + [ + { label: 'Projects', icon: 'pi pi-box', routerLink: ['/'] } ] } ] }, - { - label: 'Get Started', - items: [ - { - label: 'Documentation', - icon: 'pi pi-fw pi-book', - routerLink: ['/documentation'] - }, - { - label: 'View Source', - icon: 'pi pi-fw pi-github', - url: 'https://github.com/primefaces/sakai-ng', - target: '_blank' - } - ] - } - ]; + ] } } diff --git a/src/app.routes.ts b/src/app.routes.ts index a45e6ee..e11bbe7 100644 --- a/src/app.routes.ts +++ b/src/app.routes.ts @@ -11,10 +11,9 @@ export const appRoutes: Routes = [ path: '', component: AppLayout, children: [ - { path: '', component: Dashboard }, + { path: '', component: Teste }, { path: 'uikit', loadChildren: () => import('./app/pages/uikit/uikit.routes') }, { path: 'documentation', component: Documentation }, - { path: 'teste', component: Teste }, { path: 'pages', loadChildren: () => import('./app/pages/pages.routes') } ] }, diff --git a/src/app/core/service/coolify.service.ts b/src/app/core/service/coolify.service.ts index bfa4983..6d3b038 100644 --- a/src/app/core/service/coolify.service.ts +++ b/src/app/core/service/coolify.service.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; +import { HttpClient, HttpParams } from '@angular/common/http'; import { catchError, Observable } from 'rxjs'; import { Project } from '@/app/core/domain/Project'; @@ -15,4 +15,16 @@ export class CoolifyService { getProjects(): Observable { return this.http.get(`${this.urlProd}/projects/buscar`); } + + getProjectDetail(uuid: string) { + let params = new HttpParams(); + + if (uuid) { + params = params.append('uuid', uuid); + } + + + return this.http.get(`${this.urlProd}/projects/buscarProject`, {params}); + } + } diff --git a/src/app/layout/component/app.topbar.ts b/src/app/layout/component/app.topbar.ts index 448d196..d2913d0 100644 --- a/src/app/layout/component/app.topbar.ts +++ b/src/app/layout/component/app.topbar.ts @@ -16,22 +16,20 @@ import { LayoutService } from '@/app/layout/service/layout.service'; @@ -62,22 +60,6 @@ import { LayoutService } from '@/app/layout/service/layout.service'; - ` }) diff --git a/src/app/pages/teste/teste.html b/src/app/pages/teste/teste.html index ce4284e..bf5da72 100644 --- a/src/app/pages/teste/teste.html +++ b/src/app/pages/teste/teste.html @@ -1,23 +1,34 @@ -
- - - - Code - Name - Category - Quantity - - - - - {{ project.sequence }} - {{ project.nameProject }} - {{ project.description }} - {{ project.uuid }} - - - - - - +
+ + + + + + + + + +
+ + + + + + + + + + diff --git a/src/app/pages/teste/teste.ts b/src/app/pages/teste/teste.ts index fd599b7..4aff03d 100644 --- a/src/app/pages/teste/teste.ts +++ b/src/app/pages/teste/teste.ts @@ -1,14 +1,19 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { Button } from 'primeng/button'; -import { Product, ProductService } from '@/app/pages/service/product.service'; import { FormsModule } from '@angular/forms'; import { TableModule } from 'primeng/table'; import { CoolifyService } from '@/app/core/service/coolify.service'; import { Project } from '@/app/core/domain/Project'; +import { CustomTableComponent } from '@/app/shared/custom-table/custom-table'; +import { CustomColumn } from '@/app/shared/custom-table/CustomColumn'; +import { InputTextModule } from 'primeng/inputtext'; +import { FloatLabel } from 'primeng/floatlabel'; +import { MenubarModule } from 'primeng/menubar'; +import { ButtonModule } from 'primeng/button'; +import { DialogModule } from 'primeng/dialog'; @Component({ selector: 'app-teste', - imports: [FormsModule, TableModule, Button], + imports: [FormsModule, TableModule, CustomTableComponent, InputTextModule, FloatLabel, MenubarModule, ButtonModule, DialogModule], templateUrl: './teste.html', styleUrl: './teste.scss' }) @@ -19,36 +24,106 @@ export class Teste implements OnInit { projects: Project[] = []; project: Project = new Project(); + filtrarBusca: Project[] = []; + + projectsDetalhes: any[] = []; + + visibleDetails: boolean = false; + + filtros = { + buscaUuid: '', + nome: '' + }; + + columns: CustomColumn[] = [ + { field: 'sequence', header: 'Sequence' }, + { field: 'nameProject', header: 'Name' }, + { field: 'description', header: 'Description' }, + { field: 'uuid', header: 'UUID' }, + { field: 'acoes', header: 'Detalhes', icon: 'pi pi-book', command: (project) => this.detalhes(project) } + ]; + + columnsDetails: CustomColumn[] = [ + { field: 'tipo_recurso', header: 'Tipo' }, + { field: 'name', header: 'Name' }, + { field: 'image', header: 'Image Docker' }, + { field: 'public_port', header: 'Port' }, + { field: 'uuid', header: 'UUID' } + ]; constructor( - private productService: ProductService, private nexusService: CoolifyService, - private cd: ChangeDetectorRef, + private cd: ChangeDetectorRef ) {} ngOnInit() { - this.buscarProjects(); } buscarProjects() { this.isLoadingTable = true; - this.nexusService.getProjects() - .subscribe((data) => { - if (data && data.length > 0) { - this.projects = [...data]; - this.isLoadingTable = false; - console.log(data); - this.cd.detectChanges(); - } - else { - console.log('Nada aqui', data); - } - }) + this.nexusService.getProjects().subscribe((data) => { + if (data && data.length > 0) { + this.projects = [...data]; + this.filtrarBusca = [...data]; + this.isLoadingTable = false; + console.log(data); + this.cd.detectChanges(); + } else { + console.log('Nada aqui', data); + } + }); + } + + filtrar() { + this.filtrarBusca = this.projects.filter((project) => { + const porNome = project.nameProject?.toLocaleLowerCase().includes(this.filtros.nome.toLocaleLowerCase()); + const porUuid = project.uuid?.toLocaleLowerCase().includes(this.filtros.buscaUuid.toLocaleLowerCase()); + + return porNome && porUuid; + }); } detalhes(project: Project): void { - console.log('Projeto enviado: ',project); + + const uuid = project.uuid ? project.uuid : ''; + + this.nexusService.getProjectDetail(uuid).subscribe((data) => { + if (data) { + let todosOsDetalhes: any[] = []; + + if (data.mysqls) { + const mysqls = data.mysqls.map ((item: any) => ({ ...item, tipo_recurso: 'MYSQL'})); + todosOsDetalhes = [...todosOsDetalhes, ...mysqls]; + } + + if (data.postgresql) { + const pgs = data.postgresql.map((item: any) => ({ ...item, tipo_recurso: 'POSTGRESQL' }) ); + todosOsDetalhes = [...todosOsDetalhes, ...pgs]; + } + + if (data.services){ + const services = data.services.map((item: any) => ({ ...item, tipo_recurso: 'SERVICES'})); + todosOsDetalhes = [...todosOsDetalhes, ...services]; + } + + if (data.applications && data.applications.length > 0) { + const apps = data.applications.map((item: any) => ({ ...item, tipo_recurso: 'APPLICATION' })); + todosOsDetalhes = [...todosOsDetalhes, ...apps]; + } + + this.projectsDetalhes = todosOsDetalhes; + this.visibleDetails = true; + this.cd.detectChanges(); + } + }); + } + + limparCampos() { + this.filtros.nome = ''; + this.filtros.buscaUuid = ''; + + this.filtrar(); } } diff --git a/src/app/shared/custom-table/CustomColumn.ts b/src/app/shared/custom-table/CustomColumn.ts new file mode 100644 index 0000000..4d38e65 --- /dev/null +++ b/src/app/shared/custom-table/CustomColumn.ts @@ -0,0 +1,6 @@ +export interface CustomColumn { + field: string; + header: string; + icon?: string; + command?: (row?: any) => void; +} diff --git a/src/app/shared/custom-table/custom-table.html b/src/app/shared/custom-table/custom-table.html new file mode 100644 index 0000000..cc1f0c5 --- /dev/null +++ b/src/app/shared/custom-table/custom-table.html @@ -0,0 +1,26 @@ +
+
{{ title }}
+ + + + @for (col of columns; track col.field) { + {{ col.header }} + } + + + + + @for (col of columns; track col.field) { + + @if (col.command) { + + } @else { + {{ project[col.field] }} + } + + + } + + + +
diff --git a/src/app/shared/custom-table/custom-table.ts b/src/app/shared/custom-table/custom-table.ts new file mode 100644 index 0000000..c0aa2f8 --- /dev/null +++ b/src/app/shared/custom-table/custom-table.ts @@ -0,0 +1,17 @@ +import { Component, Input } from '@angular/core'; +import { CustomColumn } from '@/app/shared/custom-table/CustomColumn'; +import { TableModule } from 'primeng/table'; +import { ButtonModule } from 'primeng/button'; + + +@Component({ + selector: 'custom-table', + templateUrl: './custom-table.html', + imports: [TableModule, ButtonModule] +}) +export class CustomTableComponent { + @Input() data: any[] = []; + @Input() columns: CustomColumn[] = []; + @Input() title: string = ''; + @Input() isLoading: boolean = true; +}