tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(account-page): implement account layout with sidebar, profile form, and purchase list components

Browse Source
This commit is contained in:
ncoronel
2026-07-08 08:39:52 -03:00
parent 1a2d303b4e
commit 09d88e6324
19 changed files with 204 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/features/store/pages/account-page/account-layout/account-layout.html Normal file
View File

@@ -0,0 +1,6 @@
<div class="account-layout">
<app-account-sidebar class="account-sidebar"></app-account-sidebar>
<div class="account-content">
<router-outlet></router-outlet>
</div>
</div>

16
src/app/features/store/pages/account-page/account-layout/account-layout.scss Normal file
View File

@@ -0,0 +1,16 @@
.account-layout {
display: flex;
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
gap: 40px;
background-color: #f7f7f7;
min-height: calc(100vh - 100px);
}
.account-sidebar {
width: 250px;
flex-shrink: 0;
}
.account-content {
flex: 1;
}

28
src/app/features/store/pages/account-page/account-layout/account-layout.ts
View File

@@ -6,31 +6,7 @@ import { AccountSidebar } from '../components/account-sidebar/account-sidebar';
selector: 'app-account-layout',
standalone: true,
imports: [RouterOutlet, AccountSidebar],
template: `
<div class="account-layout">
<app-account-sidebar class="account-sidebar"></app-account-sidebar>
<div class="account-content">
<router-outlet></router-outlet>
</div>
</div>
`,
styles: `
.account-layout {
display: flex;
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
gap: 40px;
background-color: #f7f7f7;
min-height: calc(100vh - 100px);
}
.account-sidebar {
width: 250px;
flex-shrink: 0;
}
.account-content {
flex: 1;
}
`,
templateUrl: './account-layout.html',
styleUrl: './account-layout.scss',
})
export class AccountLayout {}

8
src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.html Normal file
View File

@@ -0,0 +1,8 @@
<div class="sidebar-container">
<h2 class="sidebar-title">MI CUENTA</h2>
<div class="divider"></div>
<nav class="sidebar-nav">
<a routerLink="/mi-cuenta/datos-personales" routerLinkActive="active" class="nav-link">Datos Personales</a>
<a routerLink="/mi-cuenta/compras" routerLinkActive="active" class="nav-link">Mis compras</a>
</nav>
</div>

34
src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.scss Normal file
View File

@@ -0,0 +1,34 @@
.sidebar-container {
display: flex;
flex-direction: column;
}
.sidebar-title {
font-size: 16px;
font-weight: bold;
color: #1a1a1a;
margin-bottom: 12px;
}
.divider {
height: 1px;
background-color: #e0e0e0;
margin-bottom: 20px;
}
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 16px;
}
.nav-link {
text-decoration: none;
color: #888;
font-size: 14px;
font-weight: 500;
transition: color 0.2s;
}
.nav-link:hover {
color: #5a5a5a;
}
.nav-link.active {
color: #5b75ff; /* Blue color matching the image */
font-weight: 600;
}

48
src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.ts
View File

@@ -5,51 +5,7 @@ import { RouterLink, RouterLinkActive } from '@angular/router';
selector: 'app-account-sidebar',
standalone: true,
imports: [RouterLink, RouterLinkActive],
template: `
<div class="sidebar-container">
<h2 class="sidebar-title">MI CUENTA</h2>
<div class="divider"></div>
<nav class="sidebar-nav">
<a routerLink="/mi-cuenta/datos-personales" routerLinkActive="active" class="nav-link">Datos Personales</a>
<a routerLink="/mi-cuenta/compras" routerLinkActive="active" class="nav-link">Mis compras</a>
</nav>
</div>
`,
styles: `
.sidebar-container {
display: flex;
flex-direction: column;
}
.sidebar-title {
font-size: 16px;
font-weight: bold;
color: #1a1a1a;
margin-bottom: 12px;
}
.divider {
height: 1px;
background-color: #e0e0e0;
margin-bottom: 20px;
}
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 16px;
}
.nav-link {
text-decoration: none;
color: #888;
font-size: 14px;
font-weight: 500;
transition: color 0.2s;
}
.nav-link:hover {
color: #5a5a5a;
}
.nav-link.active {
color: #5b75ff; /* Blue color matching the image */
font-weight: 600;
}
`,
templateUrl: './account-sidebar.html',
styleUrl: './account-sidebar.scss',
})
export class AccountSidebar {}

56
src/app/features/store/pages/account-page/components/profile-form/profile-form.html Normal file
View File

@@ -0,0 +1,56 @@
<form [formGroup]="profileForm" class="profile-form">
<div class="form-group">
<label>Nombre y Apellido:</label>
<app-input
type="text"
placeholder="Descripción"
[value]="profileForm.controls['fullName'].value"
(valueChange)="profileForm.controls['fullName'].setValue($event)"
></app-input>
</div>
<div class="form-group">
<label>Email:</label>
<app-input
type="email"
placeholder="Descripción"
[value]="profileForm.controls['email'].value"
(valueChange)="profileForm.controls['email'].setValue($event)"
></app-input>
</div>
<div class="form-group">
<label>DNI:</label>
<app-input
type="text"
placeholder="Descripción"
[value]="profileForm.controls['dni'].value"
(valueChange)="profileForm.controls['dni'].setValue($event)"
></app-input>
</div>
<div class="form-group">
<label>Teléfono:</label>
<app-input
type="text"
placeholder="Descripción"
[value]="profileForm.controls['phone'].value"
(valueChange)="profileForm.controls['phone'].setValue($event)"
></app-input>
</div>
<div class="form-group">
<label>Contraseña:</label>
<app-input
type="password"
placeholder="Descripción"
[value]="profileForm.controls['password'].value"
(valueChange)="profileForm.controls['password'].setValue($event)"
></app-input>
</div>
<div class="form-actions">
<app-button type="button" variant="cancel" hostClass="action-btn">Cancelar</app-button>
<app-button type="submit" variant="primary" hostClass="action-btn">Guardar</app-button>
</div>
</form>

24
src/app/features/store/pages/account-page/components/profile-form/profile-form.scss Normal file
View File

@@ -0,0 +1,24 @@
.profile-form {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 500px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group label {
font-size: 14px;
color: #888;
}
.form-actions {
display: flex;
gap: 12px;
margin-top: 16px;
}
.action-btn {
flex: 1;
display: block;
}

86
src/app/features/store/pages/account-page/components/profile-form/profile-form.ts
View File

@@ -7,90 +7,8 @@ import { ButtonComponent } from '../../../../../../shared/components/button/butt
selector: 'app-profile-form',
standalone: true,
imports: [ReactiveFormsModule, InputComponent, ButtonComponent],
template: `
<form [formGroup]="profileForm" class="profile-form">
<div class="form-group">
<label>Nombre y Apellido:</label>
<app-input
type="text"
placeholder="Descripción"
[value]="profileForm.controls['fullName'].value"
(valueChange)="profileForm.controls['fullName'].setValue($event)"
></app-input>
</div>
<div class="form-group">
<label>Email:</label>
<app-input
type="email"
placeholder="Descripción"
[value]="profileForm.controls['email'].value"
(valueChange)="profileForm.controls['email'].setValue($event)"
></app-input>
</div>
<div class="form-group">
<label>DNI:</label>
<app-input
type="text"
placeholder="Descripción"
[value]="profileForm.controls['dni'].value"
(valueChange)="profileForm.controls['dni'].setValue($event)"
></app-input>
</div>
<div class="form-group">
<label>Teléfono:</label>
<app-input
type="text"
placeholder="Descripción"
[value]="profileForm.controls['phone'].value"
(valueChange)="profileForm.controls['phone'].setValue($event)"
></app-input>
</div>
<div class="form-group">
<label>Contraseña:</label>
<app-input
type="password"
placeholder="Descripción"
[value]="profileForm.controls['password'].value"
(valueChange)="profileForm.controls['password'].setValue($event)"
></app-input>
</div>
<div class="form-actions">
<app-button type="button" variant="cancel" hostClass="action-btn">Cancelar</app-button>
<app-button type="submit" variant="primary" hostClass="action-btn">Guardar</app-button>
</div>
</form>
`,
styles: `
.profile-form {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 500px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group label {
font-size: 14px;
color: #888;
}
.form-actions {
display: flex;
gap: 12px;
margin-top: 16px;
}
.action-btn {
flex: 1;
display: block;
}
`,
templateUrl: './profile-form.html',
styleUrl: './profile-form.scss',
})
export class ProfileForm {
profileForm: FormGroup;

9
src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.html Normal file
View File

@@ -0,0 +1,9 @@
<div class="purchase-item">
<div class="purchase-info">
<span class="purchase-id">Compra {{ purchase.id }}.</span>
<span class="purchase-date">Fecha de compra: {{ purchase.date }}</span>
</div>
<div class="purchase-action">
<span class="arrow-icon">›</span>
</div>
</div>

6
src/app/features/store/pages/account-page/components/purchase-list/purchase-list.html Normal file
View File

@@ -0,0 +1,6 @@
<div class="purchase-list-container">
<app-purchase-list-item
*ngFor="let purchase of purchases"
[purchase]="purchase">
</app-purchase-list-item>
</div>

5
src/app/features/store/pages/account-page/components/purchase-list/purchase-list.scss Normal file
View File

@@ -0,0 +1,5 @@
.purchase-list-container {
display: flex;
flex-direction: column;
max-width: 600px;
}

17
src/app/features/store/pages/account-page/components/purchase-list/purchase-list.ts
View File

@@ -6,21 +6,8 @@ import { PurchaseListItem } from '../purchase-list-item/purchase-list-item';
selector: 'app-purchase-list',
standalone: true,
imports: [CommonModule, PurchaseListItem],
template: `
<div class="purchase-list-container">
<app-purchase-list-item
*ngFor="let purchase of purchases"
[purchase]="purchase">
</app-purchase-list-item>
</div>
`,
styles: `
.purchase-list-container {
display: flex;
flex-direction: column;
max-width: 600px;
}
`,
templateUrl: './purchase-list.html',
styleUrl: './purchase-list.scss',
})
export class PurchaseList {
purchases = [

4
src/app/features/store/pages/account-page/pages/profile-page/profile-page.html Normal file
View File

@@ -0,0 +1,4 @@
<div class="page-container">
<h2 class="page-title">DATOS PERSONALES</h2>
<app-profile-form></app-profile-form>
</div>

10
src/app/features/store/pages/account-page/pages/profile-page/profile-page.scss Normal file
View File

@@ -0,0 +1,10 @@
.page-container {
display: flex;
flex-direction: column;
}
.page-title {
font-size: 16px;
font-weight: bold;
color: #888;
margin-bottom: 24px;
}

20
src/app/features/store/pages/account-page/pages/profile-page/profile-page.ts
View File

@@ -5,23 +5,7 @@ import { ProfileForm } from '../../components/profile-form/profile-form';
selector: 'app-profile-page',
standalone: true,
imports: [ProfileForm],
template: `
<div class="page-container">
<h2 class="page-title">DATOS PERSONALES</h2>
<app-profile-form></app-profile-form>
</div>
`,
styles: `
.page-container {
display: flex;
flex-direction: column;
}
.page-title {
font-size: 16px;
font-weight: bold;
color: #888;
margin-bottom: 24px;
}
`,
templateUrl: './profile-page.html',
styleUrl: './profile-page.scss',
})
export class ProfilePage {}

4
src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.html Normal file
View File

@@ -0,0 +1,4 @@
<div class="page-container">
<h2 class="page-title">MIS COMPRAS</h2>
<app-purchase-list></app-purchase-list>
</div>

10
src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.scss Normal file
View File

@@ -0,0 +1,10 @@
.page-container {
display: flex;
flex-direction: column;
}
.page-title {
font-size: 16px;
font-weight: bold;
color: #888;
margin-bottom: 24px;
}

20
src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.ts
View File

@@ -5,23 +5,7 @@ import { PurchaseList } from '../../components/purchase-list/purchase-list';
selector: 'app-purchases-page',
standalone: true,
imports: [PurchaseList],
template: `
<div class="page-container">
<h2 class="page-title">MIS COMPRAS</h2>
<app-purchase-list></app-purchase-list>
</div>
`,
styles: `
.page-container {
display: flex;
flex-direction: column;
}
.page-title {
font-size: 16px;
font-weight: bold;
color: #888;
margin-bottom: 24px;
}
`,
templateUrl: './purchases-page.html',
styleUrl: './purchases-page.scss',
})
export class PurchasesPage {}