Feature/login

.editorconfig

@@ -5,7 +5,7 @@ root = true
 charset = utf-8
 indent_style = space
 indent_size = 2
-# insert_final_newline = true
+insert_final_newline = true
 trim_trailing_whitespace = true
 
 [*.ts]

package.json

@@ -23,6 +23,8 @@
     "@angular/platform-browser": "^17.3.0",
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/router": "^17.3.0",
+    "angular-calendar": "^0.31.1",
+    "date-fns": "^4.1.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

src/app/app-routing.module.ts

@@ -2,8 +2,13 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { PagesRouting } from './pages/routing';
 import { LayoutComponent } from './core/layout/layout.component';
+import { LoginComponent } from './pages/login/login.component';
 
 const routes: Routes = [
+  {
+    path: 'login',
+    component: LoginComponent,
+  },
   {
     path: '',
     pathMatch: 'full',

src/app/app.module.ts

@@ -7,9 +7,10 @@ import { AppComponent } from './app.component';
 import { SharedModule } from './shared/shared.module';
 import { CoreModule } from './core/core.module';
 import { HomeComponent } from './pages/home/home.component';
+import { LoginComponent } from './pages/login/login.component';
 
 @NgModule({
-  declarations: [AppComponent, HomeComponent],
+  declarations: [AppComponent, HomeComponent, LoginComponent],
   imports: [BrowserModule, AppRoutingModule, SharedModule, CoreModule],
   providers: [],
   bootstrap: [AppComponent],

src/app/core/components/menu/menu.component.scss

@@ -1,4 +1,4 @@
-@import '../../../../styles/main';
+@import '../../../../styles/styles.scss';
 
 $menu-width: 96px;
 $menu-padding: 20px;
@@ -11,15 +11,16 @@ $menu-box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.25);
 
 .menu {
   width: $menu-width;
-  height: auto;
+  height: 100%;
+  max-height: $menu-max-height;
   padding: $menu-padding;
   margin: $menu-margin;
-  max-height: $menu-max-height;
   position: relative;
   border-radius: $menu-border-radius;
   transition: $menu-transition;
   background: $menu-background;
   box-shadow: $menu-box-shadow;
+  margin-right: 32px;
 
   .header-menu {
     display: flex;
@@ -58,7 +59,6 @@ $menu-box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.25);
   }
 
   .side-nav {
-    height: 90vh;
     display: flex;
     overflow: hidden;
     list-style: none;

src/app/core/layout/layout.component.scss

@@ -1,10 +1,14 @@
-@import '../../../styles/main';
+@import '../../../styles/styles';
 main {
   display: flex;
   align-items: center;
   height: 100%;
   padding: $padding-ultra-large;
 
+  header {
+    height: 100%;
+  }
+
   section {
     display: flex;
     align-items: center;

src/app/pages/diary/components/calendar-diary/calendar-diary.component.html

@@ -0,0 +1,3 @@
+<div class="calendar-container">
+  <mwl-calendar-month-view [viewDate]="viewDate" [events]="[]"> </mwl-calendar-month-view>
+</div>

src/app/pages/diary/components/calendar-diary/calendar-diary.component.scss

@@ -0,0 +1,6 @@
+.calendar-container {
+  display: flex;
+  justify-content: center;
+  padding: 20px;
+  width: 1000px;
+}

src/app/pages/diary/components/calendar-diary/calendar-diary.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { CalendarView } from 'angular-calendar';
+
+@Component({
+  selector: 'app-calendar-diary',
+  templateUrl: './calendar-diary.component.html',
+  styleUrl: './calendar-diary.component.scss',
+})
+export class CalendarDiaryComponent {
+  view: CalendarView = CalendarView.Month;
+  viewDate: Date = new Date();
+}

src/app/pages/diary/components/home-diary/home-diary.component.html

@@ -0,0 +1,10 @@
+<section>
+  <div class="msg-welcome">
+    <p>
+      Bem-vindo ao seu espaço de reflexão! Escreva como se sente e tudo o que deseja lembrar. Cada registro é um passo importante
+      para se conhecer melhor!
+    </p>
+    <img src="assets/imgDiary/nilo-newRegister.png" alt="" />
+  </div>
+  <app-button [width]="'306px'" [router]="'register'"> Registrar Emoção </app-button>
+</section>

src/app/pages/diary/components/home-diary/home-diary.component.scss

@@ -0,0 +1,23 @@
+@import '../../../../../styles/styles';
+
+section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 100px;
+
+  .msg-welcome {
+    display: inline-flex;
+    align-items: center;
+
+    p {
+      width: 416px;
+      background-color: $bg-color-alternative-2;
+      padding: $padding-medium;
+      border-radius: $border-radius-medium;
+      @include body-font(600);
+    }
+
+  }
+}
+

src/app/pages/diary/components/home-diary/home-diary.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeDiaryComponent } from './home-diary.component';
+
+describe('HomeDiaryComponent', () => {
+  let component: HomeDiaryComponent;
+  let fixture: ComponentFixture<HomeDiaryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [HomeDiaryComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HomeDiaryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/diary/components/home-diary/home-diary.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home-diary',
+  templateUrl: './home-diary.component.html',
+  styleUrl: './home-diary.component.scss',
+})
+export class HomeDiaryComponent {}

src/app/pages/diary/components/register-diary/register-diary.component.html

@@ -0,0 +1,81 @@
+<section>
+  <header>
+    <span>03/11/2024 - Sexta-feira</span>
+
+    <button routerLink="/diario/calendar">
+      <img src="assets/icons/weekly-calendar-daily-calendar 1.svg" alt="" />
+      Meus Registros
+    </button>
+  </header>
+  <form #diaryForm="ngForm" (ngSubmit)="submitReflection()">
+    <div class="emotion-selector">
+      <span>Como você está se sentindo hoje?</span>
+      <ul>
+        <li>
+          <input type="radio" name="emotion" id="happy" [(ngModel)]="reflection.emotion" value="happy" />
+          <label for="happy">
+            <div class="img-content">
+              <img src="assets/iconsFeel/icon-feel-happy.png" alt="" />
+            </div>
+            <span>Feliz</span>
+          </label>
+        </li>
+        <li>
+          <input type="radio" name="emotion" id="good" [(ngModel)]="reflection.emotion" value="good" />
+          <label for="good">
+            <div class="img-content">
+              <img src="assets/iconsFeel/icon-feel-good.png" alt="" />
+            </div>
+            <span>Bem</span>
+          </label>
+        </li>
+        <li>
+          <input type="radio" name="emotion" id="neutral" [(ngModel)]="reflection.emotion" value="neutral" />
+          <label for="neutral">
+            <div class="img-content">
+              <img src="assets/iconsFeel/icon-feel-neutral.png" alt="" />
+            </div>
+            <span>Neutro</span>
+          </label>
+        </li>
+        <li>
+          <input type="radio" name="emotion" id="anxious" [(ngModel)]="reflection.emotion" value="anxious" />
+          <label for="anxious">
+            <div class="img-content">
+              <img src="assets/iconsFeel/icon-feel-anxious.png" alt="" />
+            </div>
+            <span>Ansioso</span>
+          </label>
+        </li>
+        <li>
+          <input type="radio" name="emotion" id="sad" [(ngModel)]="reflection.emotion" value="sad" />
+          <label for="sad">
+            <div class="img-content">
+              <img src="assets/iconsFeel/icon-feel-sad.png" alt="" />
+            </div>
+            <span>Triste</span>
+          </label>
+        </li>
+        <li>
+          <input type="radio" name="emotion" id="horrible" [(ngModel)]="reflection.emotion" value="horrible" />
+          <label for="horrible">
+            <div class="img-content">
+              <img src="assets/iconsFeel/icon-feel-horrible.png" alt="" />
+            </div>
+            <span>Horrível</span>
+          </label>
+        </li>
+      </ul>
+    </div>
+    <div class="daily-reflections">
+      <span>Suas Reflexões do Dia</span>
+      <textarea
+        name="reflectionText"
+        id="reflectionText"
+        placeholder="Escreva aqui suas ideias, reflexões ou qualquer coisa que queira lembrar. Este é seu espaço livre para anotações."
+        [(ngModel)]="reflection.reflectionText">
+      </textarea>
+    </div>
+    <button type="submit" class="primary">Register</button>
+  </form>
+</section>