Skip to content

Commit 0f52b3a

Browse files
andrefelipebarrosandrefelipebarros
committed
feat: atualizações no componente home e ajustes no backend
1 parent 95f2c69 commit 0f52b3a

File tree

6 files changed

+222
-15
lines changed

6 files changed

+222
-15
lines changed

‎securetimenotes-frontend/securetimenotes/src/app/components/home/home.component.css

+113-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
.home-container {
22
text-align: center;
3-
max-width: 400px;
3+
max-width: 900px;
44
margin: 50px auto;
55
padding: 20px;
6-
margin-top: 200px;
6+
margin-top: 190px;
77
border-radius: 10px;
88
background-color: #f9f9f9;
99
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
@@ -17,7 +17,7 @@ h2 {
1717
}
1818

1919
h2::after {
20-
content: "Notes";
20+
content: " Notes";
2121
color: #00aeff;
2222
font-weight: bold;
2323
}
@@ -43,4 +43,113 @@ button:hover {
4343
p {
4444
font-size: 16px;
4545
color: #555;
46-
}
46+
}
47+
48+
/* Modal */
49+
.modal {
50+
background: white;
51+
padding: 20px;
52+
border-radius: 8px;
53+
margin-top: 20px;
54+
box-shadow: 0 0 10px rgba(0,0,0,0.1);
55+
}
56+
57+
.modal input {
58+
width: 100%;
59+
padding: 10px;
60+
margin: 10px 0;
61+
}
62+
63+
/* Área de nota */
64+
.note-form textarea {
65+
width: 100%;
66+
height: 300px;
67+
padding: 15px;
68+
margin-top: 10px;
69+
border-radius: 5px;
70+
resize: vertical;
71+
font-size: 18px;
72+
border: 1px solid #ccc;
73+
}
74+
75+
/* Container que agrupa o cartão de criação e os cartões de nota */
76+
.notes-container {
77+
display: flex;
78+
flex-wrap: wrap;
79+
gap: 10px;
80+
justify-content: flex-start;
81+
align-items: flex-start;
82+
padding: 10px;
83+
}
84+
85+
/* Cartão de criação minimalista */
86+
.create-document {
87+
width: 100px;
88+
height: 120px;
89+
border: 1px solid #007bff; /* Borda azul */
90+
border-radius: 6px;
91+
display: flex;
92+
align-items: center;
93+
justify-content: center;
94+
cursor: pointer;
95+
transition: background 0.3s;
96+
background-color: #eef;
97+
}
98+
99+
.create-document:hover {
100+
background-color: #dde;
101+
}
102+
103+
.plus-symbol {
104+
font-size: 48px;
105+
color: #007bff;
106+
}
107+
108+
/* Cartão de nota com altura igual ao cartão de criação */
109+
.note-card {
110+
width: 100px;
111+
height: 100px; /* Altura igual ao create-document */
112+
padding: 10px;
113+
border: 1px solid #007bff; /* Borda azul */
114+
border-radius: 6px;
115+
display: flex;
116+
flex-direction: column;
117+
align-items: center;
118+
justify-content: center;
119+
cursor: pointer;
120+
transition: background 0.3s;
121+
background-color: #eef;
122+
}
123+
124+
.note-card:hover {
125+
background-color: #dde;
126+
}
127+
128+
.note-card .note-icon {
129+
font-size: 24px;
130+
}
131+
132+
.note-card .note-title {
133+
margin-top: 5px;
134+
font-size: 16px;
135+
font-weight: bold;
136+
overflow: hidden;
137+
white-space: nowrap;
138+
text-overflow: ellipsis;
139+
}
140+
141+
/* Responsivo */
142+
@media (max-width: 600px) {
143+
.notes-container {
144+
justify-content: center;
145+
}
146+
147+
.note-card,
148+
.create-document {
149+
width: 100%;
150+
}
151+
152+
.note-form textarea {
153+
height: 200px;
154+
}
155+
}

‎securetimenotes-frontend/securetimenotes/src/app/components/home/home.component.html

+40-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,48 @@
11
<div class="home-container">
2-
<h2>SecureTime</h2>
2+
<h2 *ngIf="!showTitlePrompt && !showNoteEditor">SecureTime</h2>
33

4-
<ng-container *ngIf="!isAuthenticated(); else loggedInTemplate">
5-
<button [routerLink]="'/login'">Login</button>
6-
<br>
7-
<button [routerLink]="'/register'">Register</button>
4+
<ng-container *ngIf="!isAuthenticated(); else loggedInTemplate">
5+
<button [routerLink]="'/login'">Login</button>
6+
<br />
7+
<button [routerLink]="'/register'">Register</button>
88
</ng-container>
99

1010
<ng-template #loggedInTemplate>
11-
<p>Você está logado!</p>
11+
<!-- Header e Logout (apenas quando não estiver criando/editando) -->
12+
<div *ngIf="!showTitlePrompt && !showNoteEditor" class="header-info">
1213
<button (click)="logout()">Logout</button>
14+
</div>
15+
16+
<!-- Modal para o título da nota -->
17+
<div class="modal" *ngIf="showTitlePrompt">
18+
<h3>Digite o título da nota</h3>
19+
<input type="text" [(ngModel)]="newNoteTitle" placeholder="Título da nota" />
20+
<button (click)="confirmTitle()">Continuar</button>
21+
</div>
22+
23+
<!-- Editor da nota -->
24+
<div class="note-form" *ngIf="showNoteEditor">
25+
<h3>{{ editingNote ? 'Editando' : 'Criando' }}: {{ newNoteTitle }}</h3>
26+
<textarea [(ngModel)]="newNoteContent" placeholder="Digite o conteúdo da nota..."></textarea>
27+
<button (click)="editingNote ? saveEdit() : createNote()">
28+
{{ editingNote ? 'Salvar' : 'Criar' }}
29+
</button>
30+
<button (click)="cancelEdit()">Cancelar</button>
31+
</div>
32+
33+
<!-- Container com o cartão de criação e os cartões de nota -->
34+
<div class="notes-container" *ngIf="!showTitlePrompt && !showNoteEditor">
35+
<!-- Cartão de criação minimalista (só o "+") -->
36+
<div class="create-document" (click)="openNoteTitlePrompt()">
37+
<span class="plus-symbol">+</span>
38+
</div>
39+
40+
<!-- Cartões de nota existentes -->
41+
<div class="note-card" *ngFor="let note of notes" (click)="editNote(note)">
42+
<div class="note-icon">📄</div>
43+
<!-- Limita o título aos primeiros 15 caracteres -->
44+
<div class="note-title">{{ note.title | slice:0:9 }}</div>
45+
</div>
46+
</div>
1347
</ng-template>
1448
</div>

‎securetimenotes-frontend/securetimenotes/src/app/components/home/home.component.ts

+61-4
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,23 @@ import { Component } from '@angular/core';
22
import { RouterModule } from '@angular/router';
33
import { AuthService } from '../../service/auth.service';
44
import { CommonModule } from '@angular/common';
5+
import { FormsModule } from '@angular/forms';
56

67
@Component({
78
selector: 'app-home',
89
standalone: true,
9-
imports: [RouterModule, CommonModule],
10+
imports: [RouterModule, CommonModule, FormsModule],
1011
templateUrl: './home.component.html',
11-
styleUrl: './home.component.css'
12+
styleUrls: ['./home.component.css']
1213
})
1314
export class HomeComponent {
14-
title = "Home";
15+
showTitlePrompt = false;
16+
showNoteEditor = false;
17+
newNoteTitle = '';
18+
newNoteContent = '';
19+
editingNote: any = null;
20+
21+
notes: any[] = [];
1522

1623
constructor(private authService: AuthService) {}
1724

@@ -21,6 +28,56 @@ export class HomeComponent {
2128

2229
logout(): void {
2330
this.authService.logout();
24-
location.reload(); // Atualiza a página para refletir o logout
31+
location.reload();
32+
}
33+
34+
openNoteTitlePrompt() {
35+
this.showTitlePrompt = true;
36+
this.newNoteTitle = '';
37+
}
38+
39+
confirmTitle() {
40+
if (this.newNoteTitle.trim()) {
41+
this.showTitlePrompt = false;
42+
this.showNoteEditor = true;
43+
this.newNoteContent = '';
44+
}
45+
}
46+
47+
createNote() {
48+
if (this.newNoteTitle.trim() && this.newNoteContent.trim()) {
49+
this.notes.push({
50+
title: this.newNoteTitle,
51+
content: this.newNoteContent
52+
});
53+
this.resetNoteForm();
54+
}
55+
}
56+
57+
editNote(note: any) {
58+
this.editingNote = note;
59+
this.newNoteTitle = note.title;
60+
this.newNoteContent = note.content;
61+
this.showNoteEditor = true;
62+
}
63+
64+
saveEdit() {
65+
if (this.editingNote) {
66+
this.editingNote.title = this.newNoteTitle;
67+
this.editingNote.content = this.newNoteContent;
68+
}
69+
this.resetNoteForm();
70+
}
71+
72+
cancelEdit() {
73+
this.resetNoteForm();
74+
}
75+
76+
private resetNoteForm() {
77+
this.showNoteEditor = false;
78+
this.showTitlePrompt = false;
79+
this.newNoteTitle = '';
80+
this.newNoteContent = '';
81+
this.editingNote = null;
2582
}
2683
}

‎securetimenotes/src/main/java/securetimenotes/andrefelipebarros/securetimenotes/infra/security/SecurityFilter.java

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
import org.springframework.web.filter.OncePerRequestFilter;
1616

1717
import java.io.IOException;
18+
1819
@Component
1920
public class SecurityFilter extends OncePerRequestFilter{
2021
@Autowired

‎securetimenotes/src/main/java/securetimenotes/andrefelipebarros/securetimenotes/model/note/Note.java

+6
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
import securetimenotes.andrefelipebarros.securetimenotes.model.user.User;
44

5+
import com.fasterxml.jackson.annotation.JsonIgnore;
6+
57
import jakarta.persistence.*;
68
import lombok.*;
79

@@ -16,10 +18,14 @@ public class Note {
1618
@GeneratedValue(strategy = GenerationType.IDENTITY)
1719
private Long id;
1820

21+
@Column(unique = true, length = 9)
22+
private String titule;
23+
1924
private String content;
2025

2126
// Relacionamento ManyToOne com User
2227
@ManyToOne
28+
@JsonIgnore
2329
@JoinColumn(name = "user_id")
2430
private User user;
2531

‎securetimenotes/src/main/java/securetimenotes/andrefelipebarros/securetimenotes/model/user/User.java

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
import jakarta.persistence.Entity;
1212
import jakarta.persistence.Table;
1313
import jakarta.persistence.Id;
14-
import jakarta.persistence.Table;
14+
1515
import jakarta.persistence.Column;
1616
import jakarta.persistence.OneToMany;
1717
import lombok.AllArgsConstructor;

0 commit comments

Comments
 (0)