From 9398744731fcd3564449ce54874b1eacb2338b38 Mon Sep 17 00:00:00 2001 From: aledguedes Date: Thu, 20 Jun 2024 17:57:01 -0300 Subject: [PATCH] =?UTF-8?q?integra=C3=A7=C3=A3o=20com=20servi=C3=A7o=20on?= =?UTF-8?q?=20line?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/models/Generics.model.ts | 11 + .../category-edit/category-edit.component.ts | 11 +- .../category-form.component.html | 21 +- .../category-form.component.scss | 4 + .../category-form/category-form.component.ts | 87 +++++- .../category-list.component.html | 16 +- .../category-list/category-list.component.ts | 52 +++- .../breadcrumb/breadcrumb.component.html | 2 +- .../breadcrumb/breadcrumb.component.ts | 31 +- .../thumbnail-products.component.html | 2 +- .../thumbnail-products.component.scss | 4 +- .../upload-preview.component.html | 6 +- .../dash-content/dash-content.component.html | 36 +-- .../dash-content/dash-content.component.scss | 61 ++++ .../dash-content/dash-content.component.ts | 18 +- .../dash-default/dash-default.component.html | 170 +++++----- .../dash-default/dash-default.component.scss | 292 +----------------- .../dash-default/dash-default.component.ts | 54 ++-- .../login-default.component.html | 17 +- .../login-default.component.scss | 4 + .../product-edit/product-edit.component.html | 10 +- .../product-form/product-form.component.html | 12 +- .../product-list/product-list.component.html | 26 +- .../product-list/product-list.component.scss | 2 +- .../product-list/product-list.component.ts | 32 +- src/app/services/status/status.service.ts | 3 +- src/app/utils/sidebar-menu | 17 + 27 files changed, 479 insertions(+), 522 deletions(-) create mode 100644 src/app/utils/sidebar-menu diff --git a/src/app/models/Generics.model.ts b/src/app/models/Generics.model.ts index c77f143..40e3457 100644 --- a/src/app/models/Generics.model.ts +++ b/src/app/models/Generics.model.ts @@ -1,4 +1,15 @@ export interface ProdForm { isCreate: boolean; product_id: number; +}; +export interface BreadcrumbItems { + icon?: string; + route?: string; + label?: string; +}; + +export interface MenuList { + label: string; + router: string; + icon: string; } \ No newline at end of file diff --git a/src/app/pages/categories/components/category-edit/category-edit.component.ts b/src/app/pages/categories/components/category-edit/category-edit.component.ts index 0baecba..ef9848a 100644 --- a/src/app/pages/categories/components/category-edit/category-edit.component.ts +++ b/src/app/pages/categories/components/category-edit/category-edit.component.ts @@ -1,9 +1,10 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { CategoryFormComponent } from '../category-form/category-form.component'; import { CardModule } from 'primeng/card'; import { ButtonModule } from 'primeng/button'; import { InputTextModule } from 'primeng/inputtext'; +import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-category-edit', @@ -17,9 +18,15 @@ import { InputTextModule } from 'primeng/inputtext'; templateUrl: './category-edit.component.html', styleUrl: './category-edit.component.scss' }) -export class CategoryEditComponent { +export class CategoryEditComponent implements OnInit { errorFielfd: boolean = true; title_component: string = "Adicionar nova categoria"; + constructor( + ) { } + + ngOnInit(): void { + } + } diff --git a/src/app/pages/categories/components/category-form/category-form.component.html b/src/app/pages/categories/components/category-form/category-form.component.html index b73ca97..3244b8c 100644 --- a/src/app/pages/categories/components/category-form/category-form.component.html +++ b/src/app/pages/categories/components/category-form/category-form.component.html @@ -1,15 +1,18 @@
-
- - -
+
+
+ + +
+
- - + +
@@ -18,7 +21,7 @@
- Aqui ficará um editor de texto + EDITOR DE TEXTO
@@ -27,13 +30,13 @@
- upload + ÁREA DE UPLOAD
- +
\ No newline at end of file diff --git a/src/app/pages/categories/components/category-form/category-form.component.scss b/src/app/pages/categories/components/category-form/category-form.component.scss index 8e93bbd..397b18e 100644 --- a/src/app/pages/categories/components/category-form/category-form.component.scss +++ b/src/app/pages/categories/components/category-form/category-form.component.scss @@ -5,4 +5,8 @@ display: flex; align-items: center; justify-content: center; +} + +label { + color: var(--red-600); } \ No newline at end of file diff --git a/src/app/pages/categories/components/category-form/category-form.component.ts b/src/app/pages/categories/components/category-form/category-form.component.ts index 407bc8b..a7a9c38 100644 --- a/src/app/pages/categories/components/category-form/category-form.component.ts +++ b/src/app/pages/categories/components/category-form/category-form.component.ts @@ -1,19 +1,98 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { InputTextModule } from 'primeng/inputtext'; import { FileUploadModule } from 'primeng/fileupload'; +import { ActivatedRoute, RouterLink } from '@angular/router'; +import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { CategoriesService } from '../../../../services/categories/categories.service'; +import { Category } from '../../../../models/Category.model'; +import { StatusService } from '../../../../services/status/status.service'; +import { Status } from '../../../../models/Status.model'; +import { DropdownModule } from 'primeng/dropdown'; +import { ProgressSpinnerModule } from 'primeng/progressspinner'; @Component({ selector: 'app-category-form', standalone: true, imports: [ InputTextModule, - FileUploadModule + FileUploadModule, + ReactiveFormsModule, + DropdownModule, + FormsModule, + ProgressSpinnerModule, + RouterLink ], templateUrl: './category-form.component.html', styleUrl: './category-form.component.scss' }) -export class CategoryFormComponent { +export class CategoryFormComponent implements OnInit { + status: Status[] = []; + loading: boolean = false; + categoryForm!: FormGroup; + selectedStatus: Status | undefined; - onUpload(evt: any) { } + constructor( + private fb: FormBuilder, + private statusService: StatusService, + private actvRoute: ActivatedRoute, + private catService: CategoriesService, + ) { } + + ngOnInit(): void { + this.actvRoute.queryParams.subscribe((p: any) => { + console.log('PARAMS CATEGORY', p); + if (p['action'] === 'update') { + setTimeout(() => { + this.categoryById(+p['category']); + }, 1500); + } + }); + + this.initForm(); + this.getAllStatus(); + } + + initForm() { + this.categoryForm = this.fb.group({ + name: [''] + }); + } + + getAllStatus() { + this.statusService.getAllStatus().subscribe({ + next: (data) => { + let statusFiltered: Status[] = []; + data.forEach((item: Status) => { + if (item.enabled.includes("categories")) { + statusFiltered.push(item); + } + }); + this.status = statusFiltered; + console.log('GET ALL STATUS DATA:', data, this.status); + }, + error: (err) => { + console.log('GET ALL STATUS ERR:', err); + } + }); + } + + categoryById(catgory_id: number) { + this.catService.getCategoriesById(catgory_id).subscribe({ + next: (data) => { + console.log('PRODUCT BY ID DATA:', data); + this.updateFormCategory(data); + }, + error: (err) => { + console.log('PRODUCT BY ID ERR:', err); + } + }); + } + + updateFormCategory(category: Category) { + this.categoryForm.patchValue({ + name: category.name + }); + this.selectedStatus = category.status + } } diff --git a/src/app/pages/categories/components/category-list/category-list.component.html b/src/app/pages/categories/components/category-list/category-list.component.html index 85bd521..51f761f 100644 --- a/src/app/pages/categories/components/category-list/category-list.component.html +++ b/src/app/pages/categories/components/category-list/category-list.component.html @@ -1,14 +1,13 @@
-
- +
+
-
+
-
- +
+
@@ -39,15 +38,14 @@ {{ category.id }} - + {{ category.name }} {{ category.qt_products }} {{ category.status.name }} - + diff --git a/src/app/pages/categories/components/category-list/category-list.component.ts b/src/app/pages/categories/components/category-list/category-list.component.ts index 70064d3..b8f0275 100644 --- a/src/app/pages/categories/components/category-list/category-list.component.ts +++ b/src/app/pages/categories/components/category-list/category-list.component.ts @@ -1,8 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { NgClass } from '@angular/common'; import { FormsModule } from '@angular/forms'; -import { RouterLink } from '@angular/router'; -import { BreadcrumbComponent } from '../../../components/breadcrumb/breadcrumb.component'; +import { Router, RouterLink } from '@angular/router'; import { ButtonModule } from 'primeng/button'; import { Table, TableModule } from 'primeng/table'; @@ -13,12 +12,10 @@ import { Category } from '../../../../models/Category.model'; import { HttpClient } from '@angular/common/http'; import { AvatarModule } from 'primeng/avatar'; import { AvatarGroupModule } from 'primeng/avatargroup'; - -interface Status { - id: number; - name: string; - slug: string; -} +import { BreadcrumbItems } from '../../../../models/Generics.model'; +import { BreadcrumbComponent } from '../../../components/breadcrumb/breadcrumb.component'; +import { StatusService } from '../../../../services/status/status.service'; +import { Status } from '../../../../models/Status.model'; @Component({ selector: 'app-category-list', @@ -33,22 +30,51 @@ export class CategoryListComponent implements OnInit { searchValue: string | undefined; selectedStatus: Status | undefined; - category: Category[] = []; - status: Status[] = []; + category: Category[] = []; + breadcrumb: BreadcrumbItems[] = []; constructor( + private router: Router, private http: HttpClient, + private statusService: StatusService, private catService: CategoriesService ) { } ngOnInit(): void { - this.http.get('http://localhost:3000/status').subscribe({ + this.allCategories(); + this.getAllStatus(); + this.checkUrl(); + } + + getAllStatus() { + this.statusService.getAllStatus().subscribe({ next: (data) => { - this.status = data; + let statusFiltered: Status[] = []; + data.forEach((item: Status) => { + if (item.enabled.includes("categories")) { + statusFiltered.push(item); + } + }); + this.status = statusFiltered; + console.log('GET ALL STATUS DATA:', data, this.status); + }, + error: (err) => { + console.log('GET ALL STATUS ERR:', err); } }); - this.allCategories(); + } + + checkUrl() { + const route_url = this.router.url; + const urlParts = route_url.split('/'); + let parts: any[] = []; + urlParts.shift(); + + urlParts.forEach((item: string) => { + parts.push({ label: item }); + }); + this.breadcrumb = parts; } allCategories() { diff --git a/src/app/pages/components/breadcrumb/breadcrumb.component.html b/src/app/pages/components/breadcrumb/breadcrumb.component.html index 6b148df..b36fa55 100644 --- a/src/app/pages/components/breadcrumb/breadcrumb.component.html +++ b/src/app/pages/components/breadcrumb/breadcrumb.component.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/pages/components/breadcrumb/breadcrumb.component.ts b/src/app/pages/components/breadcrumb/breadcrumb.component.ts index 6600d23..957c3e8 100644 --- a/src/app/pages/components/breadcrumb/breadcrumb.component.ts +++ b/src/app/pages/components/breadcrumb/breadcrumb.component.ts @@ -1,11 +1,8 @@ -import { Component } from '@angular/core'; +import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; +import { log } from 'console'; +import { MenuItem } from 'primeng/api'; import { BreadcrumbModule } from 'primeng/breadcrumb'; - -interface MenuItem { - icon?: string; - route?: string; - label?: string; -}; +import { BreadcrumbItems } from '../../../models/Generics.model'; interface Home { icon: string; @@ -19,15 +16,17 @@ interface Home { templateUrl: './breadcrumb.component.html', styleUrl: './breadcrumb.component.scss' }) -export class BreadcrumbComponent { +export class BreadcrumbComponent implements OnChanges { + + @Input() items: BreadcrumbItems[] = []; + + home: Home = { icon: 'pi pi-home', routerLink: '/dashboard' }; + // items: BreadcrumbItems[] = []; - home: Home = { icon: 'pi pi-home', routerLink: '/' }; - items: MenuItem[] = [ - { label: 'Electronics' }, - { label: 'Computer' }, - { label: 'Accessories' }, - { label: 'Keyboard' }, - { label: 'Wireless' } - ]; + ngOnChanges(changes: SimpleChanges): void { + if (changes['breadcrumb']) { + this.items = changes['breadcrumb'].currentValue; + } + } } diff --git a/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.html b/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.html index 255a7bc..696e86f 100644 --- a/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.html +++ b/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.html @@ -7,7 +7,7 @@

-->
- +
diff --git a/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.scss b/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.scss index da2f18a..dd61cfe 100644 --- a/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.scss +++ b/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.scss @@ -14,5 +14,7 @@ } ::ng-deep .p-card .p-card-title { - height: 95px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } \ No newline at end of file diff --git a/src/app/pages/components/upload-preview/upload-preview.component.html b/src/app/pages/components/upload-preview/upload-preview.component.html index 997355e..92248a3 100644 --- a/src/app/pages/components/upload-preview/upload-preview.component.html +++ b/src/app/pages/components/upload-preview/upload-preview.component.html @@ -3,7 +3,7 @@

Imagens selecionadas

@for (preview of previews; track $index) { -
+
@@ -14,9 +14,9 @@

Imagens selecionadas

-
+
}
diff --git a/src/app/pages/dashboard/dash-content/dash-content.component.html b/src/app/pages/dashboard/dash-content/dash-content.component.html index bf622b4..9ec67b7 100644 --- a/src/app/pages/dashboard/dash-content/dash-content.component.html +++ b/src/app/pages/dashboard/dash-content/dash-content.component.html @@ -1,7 +1,7 @@ -
-
-
- +
+
+
+

Lorem ipsum dolor sit amet...

@@ -20,26 +20,14 @@
-
-
- -

- Lorem ipsum dolor sit amet... -

- - - -

- Lorem ipsum dolor sit amet... -

- - - -

- Lorem ipsum dolor sit amet... -

- -
+
+ @for (item of dashOrders; track $index) { + +

+ {{item.info}} +

+ + }
\ No newline at end of file diff --git a/src/app/pages/dashboard/dash-content/dash-content.component.scss b/src/app/pages/dashboard/dash-content/dash-content.component.scss index e69de29..681e9fa 100644 --- a/src/app/pages/dashboard/dash-content/dash-content.component.scss +++ b/src/app/pages/dashboard/dash-content/dash-content.component.scss @@ -0,0 +1,61 @@ +.cards { + display: flex; + justify-content: space-between; +} + +.container { + display: grid; + grid-template-columns: 2fr 1fr; + gap: 20px; +} + +.order { + grid-area: order; +} + +.mini-cards { + grid-area: mini-cards; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.container { + grid-template-areas: + 'order mini-cards'; +} + +@media (max-width: 992px) { + + .container { + grid-template-columns: 1fr; + grid-template-areas: + 'mini-cards' + 'order'; + } + + .mini-cards { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + } + + .mini-card { + flex: 0 0 auto; + max-width: none; + } +} + +@media (max-width: 767px) { + + .mini-cards { + flex: 0 0 auto; + flex-direction: column; + width: 100%; + } + + .mini-card { + flex: 0 0 auto; + max-width: none; + } +} \ No newline at end of file diff --git a/src/app/pages/dashboard/dash-content/dash-content.component.ts b/src/app/pages/dashboard/dash-content/dash-content.component.ts index aebfbd2..706b2d1 100644 --- a/src/app/pages/dashboard/dash-content/dash-content.component.ts +++ b/src/app/pages/dashboard/dash-content/dash-content.component.ts @@ -3,14 +3,30 @@ import { Component } from '@angular/core'; import { CardModule } from 'primeng/card'; import { ButtonModule } from 'primeng/button'; import { DividerModule } from 'primeng/divider'; +import { NgStyle } from '@angular/common'; @Component({ selector: 'app-dash-content', standalone: true, - imports: [CardModule, ButtonModule, DividerModule], + imports: [CardModule, ButtonModule, DividerModule, NgStyle], templateUrl: './dash-content.component.html', styleUrl: './dash-content.component.scss' }) export class DashContentComponent { + dashOrders: any[] = [ + { + title: "Simple Card 1", + info: "Lorem ipsum dolor sit amet 1111..." + }, + { + title: "Simple Card 2", + info: "Lorem ipsum dolor sit amet 2222..." + }, + { + title: "Simple Card 3", + info: "Lorem ipsum dolor sit amet 3333..." + } + ] + } diff --git a/src/app/pages/dashboard/dash-default/dash-default.component.html b/src/app/pages/dashboard/dash-default/dash-default.component.html index b77ac90..aa184e6 100644 --- a/src/app/pages/dashboard/dash-default/dash-default.component.html +++ b/src/app/pages/dashboard/dash-default/dash-default.component.html @@ -1,85 +1,87 @@ -
- - - - - -
- -
- -
- -
-
\ No newline at end of file +
+ +
+
+
+ + + Amy Elsner + +
+
+ + + + + \ No newline at end of file diff --git a/src/app/pages/dashboard/dash-default/dash-default.component.scss b/src/app/pages/dashboard/dash-default/dash-default.component.scss index 58bfc34..1dd4364 100644 --- a/src/app/pages/dashboard/dash-default/dash-default.component.scss +++ b/src/app/pages/dashboard/dash-default/dash-default.component.scss @@ -1,291 +1,21 @@ -ul, ol { +ul, +ol { padding: 0 !important; } -.sidebar_menu { - position: fixed; - left: 0; - top: 0; - height: 100%; - width: 78px; - background: #D91A2A; - padding: 6px 14px; - z-index: 99; - transition: all 0.5s ease; -} - -.sidebar_menu .logo { - height: 60px; - display: flex; - align-items: center; - position: relative; -} - -.sidebar_menu .logo .text_logo { - color: #fff; - font-size: 20px; - font-weight: 600; - opacity: 0; - transition: all 0.5s ease; -} - -.sidebar_menu.open { - width: 260px; -} - -.sidebar-open { - width: 260px; -} - -.sidebar_menu .logo #button { - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - font-size: 22px; - transition: all 0.4s ease; - font-size: 23px; - text-align: center; - cursor: pointer; - transition: all 0.5s ease; -} - -.sidebar_menu .logo .icon { - opacity: 0; - transition: all 0.5s ease; -} - -.sidebar_menu.open .logo .icon, -.sidebar_menu.open .logo .text_logo { - opacity: 1; -} - - -.sidebar_menu.open .logo #button { - text-align: right; -} - -.sidebar_menu i { - color: #fff; - height: 60px; - min-width: 50px; - font-size: 28px; - text-align: center; - line-height: 60px; -} - -.sidebar_menu .nav_item { - margin-top: 20px; - height: 100%; -} - -.sidebar_menu li { - position: relative; - margin: 8px 0; - list-style: none; -} - -.sidebar_menu li .menu_btn { - position: absolute; - top: -20px; - left: calc(100% + 15px); - z-index: 3; - background: #fff; - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.382); - padding: 6px 12px; - border-radius: 6px; - font-size: 15px; - font-weight: 400; - opacity: 0; - white-space: nowrap; - pointer-events: none; - transition: 0s; -} - -.sidebar_menu li:hover .menu_btn { - opacity: 1; - pointer-events: auto; - transition: all 0.4s ease; - top: 50%; - transform: translateY(-50%); -} - -.sidebar_menu.open li .menu_btn { - display: none; -} - -.sidebar_menu input { - font-size: 15px; - color: rgba(0, 0, 0, 0.382); - font-weight: 400; - outline: none; - height: 50px; - width: 100%; - width: 50px; - border: none; - border-radius: 17px; - transition: all 0.5s ease; - background: #f3cfff; -} - -.sidebar_menu.open input { - padding: 0 0px 0 60px; - width: 100%; -} - -.sidebar_menu .bx-search { - position: absolute; - top: 50%; - left: 0; - transform: translateY(-50%); - font-size: 22px; - background: #D91A2A; - color: #F2F2F2; -} - -.sidebar_menu.open .bx-search:hover { - background: #D91A2A; - color: #F2F2F2; -} - -.sidebar_menu .bx-search:hover { - background: #F2F2F2; - color: #D91A2A; -} - -.sidebar_menu li a { - display: flex; - height: 100%; - width: 100%; - border-radius: 17px; - align-items: center; +a { text-decoration: none; - transition: all 0.4s ease; - background: #D91A2A; -} - -.sidebar_menu li a:hover { - background: #F2F2F2; -} - -.sidebar_menu li a .item_name { - color: #fff; - font-size: 15px; - font-weight: 400; - white-space: nowrap; - opacity: 0; - pointer-events: none; - transition: 0.4s; -} - -.sidebar_menu.open li a .item_name { - opacity: 1; - pointer-events: auto; + color: #000; } -.sidebar_menu li a:hover .item_name, -.sidebar_menu li a:hover i { - transition: all 0.5s ease; - color: #D91A2A; -} - -.sidebar_menu li i { - height: 50px; - line-height: 50px; - font-size: 18px; - border-radius: 17px; -} - -.sidebar_menu li.details { - position: fixed; - height: 60px; - width: 78px; - left: 0; - bottom: -8px; - padding: 10px 14px; - background: #D91A2A; - transition: all 0.5s ease; - overflow: hidden; -} - -.sidebar_menu.open li.details { - width: 250px; -} - -.sidebar_menu li .child_details { - display: flex; - align-items: center; - flex-wrap: nowrap; -} - -.sidebar_menu li img { - height: 45px; - width: 45px; - object-fit: cover; - border-radius: 14px; - margin-right: 10px; -} - -.sidebar_menu li.details .name, -.sidebar_menu li.details .roll { - font-size: 15px; - font-weight: 400; - color: #fff; - white-space: nowrap; -} - -.sidebar_menu li.details .roll { - font-size: 12px; -} - -.sidebar_menu .details #log_out { - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - background: #D91A1A; - width: 100%; - height: 60px; - line-height: 60px; - border-radius: 0px; - transition: all 0.5s ease; -} - -.sidebar_menu.open .details #log_out { - width: 50px; - background: none; -} - -.dashboard_text { - position: relative; - background: #f3f2f2; - min-height: 100vh; - top: 0; - left: 80px; - width: calc(100% - 80px); - transition: all 0.5s ease; - z-index: 2; -} - -.sidebar_menu.open~.dashboard_text { - left: 260px; - width: calc(100% - 260px); -} - -.dashboard_text .child_text { - display: inline-block; - color: #ae1e97; - font-size: 22px; - font-weight: 450; - margin: 14px; +li { + list-style: none; } -@media (max-width: 420px) { - .sidebar_menu li .menu_btn { - display: none; +:host ::ng-deep { + .p-sidebar { + // background-color: #D91A1A; + padding: 6px 14px; + transition: all 0.5s ease; } -} - -.pi-bars { - font-size: 36px; } \ No newline at end of file diff --git a/src/app/pages/dashboard/dash-default/dash-default.component.ts b/src/app/pages/dashboard/dash-default/dash-default.component.ts index 5dd6ea8..0691483 100644 --- a/src/app/pages/dashboard/dash-default/dash-default.component.ts +++ b/src/app/pages/dashboard/dash-default/dash-default.component.ts @@ -9,41 +9,53 @@ import { ToolbarModule } from 'primeng/toolbar'; import { StyleClassModule } from 'primeng/styleclass'; import { HeaderComponent } from '../../components/header/header.component'; import { RouterLink, RouterOutlet } from '@angular/router'; +import { MenuList } from '../../../models/Generics.model'; @Component({ selector: 'app-dash-default', standalone: true, - imports: [RouterLink, RouterOutlet, HeaderComponent, SidebarModule, ButtonModule, AvatarModule, RippleModule, StyleClassModule, NgClass, ToolbarModule], + imports: [ + RouterLink, + RouterOutlet, + HeaderComponent, + SidebarModule, + ButtonModule, + AvatarModule, + RippleModule, + StyleClassModule, + NgClass, + ToolbarModule + ], templateUrl: './dash-default.component.html', styleUrl: './dash-default.component.scss' }) export class DashDefaultComponent { isSidebarOpen: boolean = false; - - toggleSidebar() { - this.isSidebarOpen = !this.isSidebarOpen; - this.menuBtnChange(); - const sidebarMenu = document.querySelector(".sidebar_menu"); - if (sidebarMenu) { - sidebarMenu.classList.toggle("open", this.isSidebarOpen); + sidebarVisible: boolean = false; + + menu: MenuList[] = [ + { + label: "Dashboard", + router: "/dashboard", + icon: "ri-dashboard-line mr-2" + }, + { + label: "Produtos", + router: "products", + icon: "ri-box-3-line mr-2" + }, + { + label: "Categorias", + router: "categories", + icon: "ri-list-unordered mr-2" } - } - - menuBtnChange() { - const closeBtn = document.querySelector("#button"); - if (closeBtn) { - if (this.isSidebarOpen) { - closeBtn.classList.replace("pi-arrow-circle-left", "pi-arrow-circle-right"); - } else { - closeBtn.classList.replace("pi-arrow-circle-right", "pi-arrow-circle-left"); - } - } - } + ]; crtlMenu(evt: any) { - this.toggleSidebar(); + // this.toggleSidebar(); + this.sidebarVisible = evt; } } diff --git a/src/app/pages/login/login-default/login-default.component.html b/src/app/pages/login/login-default/login-default.component.html index aab9934..fc7d69e 100644 --- a/src/app/pages/login/login-default/login-default.component.html +++ b/src/app/pages/login/login-default/login-default.component.html @@ -1,17 +1,10 @@ - -
-
-
- +
+ -
-
+
+
diff --git a/src/app/pages/login/login-default/login-default.component.scss b/src/app/pages/login/login-default/login-default.component.scss index d3c8566..779e41a 100644 --- a/src/app/pages/login/login-default/login-default.component.scss +++ b/src/app/pages/login/login-default/login-default.component.scss @@ -2,4 +2,8 @@ display: flex; align-items: center; justify-content: center; +} + +.img-login { + width: 80%; } \ No newline at end of file diff --git a/src/app/pages/products/components/product-edit/product-edit.component.html b/src/app/pages/products/components/product-edit/product-edit.component.html index cce2f8e..374cf0d 100644 --- a/src/app/pages/products/components/product-edit/product-edit.component.html +++ b/src/app/pages/products/components/product-edit/product-edit.component.html @@ -2,10 +2,10 @@
{{ title_component }}
-
+
-
+
@@ -13,8 +13,8 @@
{{ title_co
-
- - +
+ +
\ No newline at end of file diff --git a/src/app/pages/products/components/product-form/product-form.component.html b/src/app/pages/products/components/product-form/product-form.component.html index 2021223..056dfe9 100644 --- a/src/app/pages/products/components/product-form/product-form.component.html +++ b/src/app/pages/products/components/product-form/product-form.component.html @@ -14,16 +14,16 @@
-
-
-
+
+
+
-
-
+
+
@@ -32,7 +32,7 @@
-
+
diff --git a/src/app/pages/products/components/product-list/product-list.component.html b/src/app/pages/products/components/product-list/product-list.component.html index 2bb8e5e..96180e8 100644 --- a/src/app/pages/products/components/product-list/product-list.component.html +++ b/src/app/pages/products/components/product-list/product-list.component.html @@ -1,23 +1,15 @@
-

Products

- +

Products

-
- +
+
-
- +
-
+
Itens por página: Products }
+
+ Itens por página: + + +
\ No newline at end of file diff --git a/src/app/pages/products/components/product-list/product-list.component.scss b/src/app/pages/products/components/product-list/product-list.component.scss index d4316c6..ac9c1d9 100644 --- a/src/app/pages/products/components/product-list/product-list.component.scss +++ b/src/app/pages/products/components/product-list/product-list.component.scss @@ -1,5 +1,5 @@ .grid-products { display: grid; - grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 30px; } \ No newline at end of file diff --git a/src/app/pages/products/components/product-list/product-list.component.ts b/src/app/pages/products/components/product-list/product-list.component.ts index 4d16814..2efc490 100644 --- a/src/app/pages/products/components/product-list/product-list.component.ts +++ b/src/app/pages/products/components/product-list/product-list.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, inject } from '@angular/core'; import { NgClass } from '@angular/common'; -import { RouterLink } from '@angular/router'; +import { Router, RouterLink } from '@angular/router'; import { FormsModule } from '@angular/forms'; import { Product } from '../../../../models/Products.model'; import { ThumbnailProductsComponent } from '../../../components/thumbnail/thumbnail-products/thumbnail-products.component'; @@ -9,6 +9,8 @@ import { ProductsService } from '../../../../services/products/products.service' import { ButtonModule } from 'primeng/button'; import { BreadcrumbModule } from 'primeng/breadcrumb'; import { PaginatorModule } from 'primeng/paginator'; +import { BreadcrumbComponent } from '../../../components/breadcrumb/breadcrumb.component'; +import { BreadcrumbItems } from '../../../../models/Generics.model'; interface MenuItem { icon?: string; @@ -31,7 +33,8 @@ interface Home { FormsModule, NgClass, ButtonModule, - PaginatorModule + PaginatorModule, + BreadcrumbComponent ], templateUrl: './product-list.component.html', styleUrl: './product-list.component.scss' @@ -44,30 +47,35 @@ export class ProductListComponent implements OnInit { first: number = 1; rows: number = 10; totalRecords: number = 41; + breadcrumb: BreadcrumbItems[] = []; options = [ { label: 5, value: 5 }, { label: 10, value: 10 }, { label: 20, value: 20 }, { label: 120, value: 120 } ]; - - home: Home = { icon: 'pi pi-home', routerLink: '/' }; - - items: MenuItem[] = [ - { label: 'Electronics' }, - { label: 'Computer' }, - { label: 'Accessories' }, - { label: 'Keyboard' }, - { label: 'Wireless' } - ]; products: Product[] = []; + private router = inject(Router); private productService = inject(ProductsService); ngOnInit(): void { + this.checkUrl(); this.getAllProducts(); } + checkUrl() { + const route_url = this.router.url; + const urlParts = route_url.split('/'); + let parts: any[] = []; + urlParts.shift(); + + urlParts.forEach((item: string) => { + parts.push({ label: item }); + }); + this.breadcrumb = parts; + } + getAllProducts() { this.productService.getAllProducts(this.page, this.perPage).subscribe({ next: (data) => { diff --git a/src/app/services/status/status.service.ts b/src/app/services/status/status.service.ts index d489695..777c953 100644 --- a/src/app/services/status/status.service.ts +++ b/src/app/services/status/status.service.ts @@ -9,8 +9,7 @@ import { Status } from '../../models/Status.model'; }) export class StatusService { - // private url: string = environment.BASE_URL; - private url: string = 'http://localhost:3000'; + private url: string = environment.BASE_URL; private uri: string = 'api/v1'; private flag: string = 'status' diff --git a/src/app/utils/sidebar-menu b/src/app/utils/sidebar-menu new file mode 100644 index 0000000..5c36850 --- /dev/null +++ b/src/app/utils/sidebar-menu @@ -0,0 +1,17 @@ +export const listMenu = [ + { + label: "Dashboard", + router: "/dashboard", + icon: "ri-dashboard-line mr-2" + }, + { + label: "Produtos", + router: "products", + icon: "ri-box-3-line mr-2" + }, + { + label: "Categorias", + router: "categories", + icon: "ri-list-unordered mr-2" + } +] \ No newline at end of file