Skip to content

Commit 207a7a0

Browse files
author
Manuela Paula Ritter
committed
update task-card with colors and forms
1 parent 002051b commit 207a7a0

File tree

8 files changed

+208
-12
lines changed

8 files changed

+208
-12
lines changed

‎src/app/matrix/detail/detail.component.html

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
<div class="detail">
22
<h2>Settings</h2>
3-
<p>{{ currentTask?.name }}</p>
4-
<app-task-card></app-task-card>
3+
<p *ngFor="let task of taskHistory; let i = index">
4+
<app-task-card
5+
[task]="task"
6+
[position]="i"
7+
[topic]="topics[task.topic]"
8+
(changeTask)="changeTask($event)"
9+
></app-task-card>
10+
</p>
511
</div>

‎src/app/matrix/detail/detail.component.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
:host {
2-
min-width: 25%;
2+
width: 25%;
33
background-color: #373737;
44
}
55

‎src/app/matrix/detail/detail.component.ts

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component, OnInit } from '@angular/core';
22
import { map } from 'rxjs/operators';
3-
import { Task } from '../matrix.interfaces';
3+
import { Task, Topic } from '../matrix.interfaces';
44
import { MatrixService } from '../matrix.service';
55

66
@Component({
@@ -9,17 +9,40 @@ import { MatrixService } from '../matrix.service';
99
styleUrls: ['./detail.component.scss'],
1010
})
1111
export class DetailComponent implements OnInit {
12-
currentTask: Task | undefined;
12+
taskHistory: Task[] = [];
13+
topics: { [key: number]: Topic } = {};
1314

1415
constructor(private readonly matrixService: MatrixService) {}
1516

1617
ngOnInit(): void {
18+
this.subscribeToTaskHistory();
19+
this.subscribeToTopics();
20+
}
21+
22+
changeTask(task: Task): void {
23+
this.matrixService.updateTask(task);
24+
}
25+
26+
private subscribeToTaskHistory(): void {
27+
this.matrixService
28+
.selectTaskHistory()
29+
.pipe(
30+
map((tasks) => {
31+
if (tasks.length > 0) {
32+
this.taskHistory = tasks;
33+
}
34+
}),
35+
)
36+
.subscribe();
37+
}
38+
39+
private subscribeToTopics(): void {
1740
this.matrixService
18-
.selectCurrentTask()
41+
.selectTopics()
1942
.pipe(
20-
map((currentTask) => {
21-
if (currentTask) {
22-
this.currentTask = currentTask;
43+
map((topics) => {
44+
if (topics.length > 0) {
45+
topics.forEach((t) => (this.topics[t.id] = t));
2346
}
2447
}),
2548
)

‎src/app/matrix/matrix.module.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { CommonModule } from '@angular/common';
22
import { NgModule } from '@angular/core';
3+
import { ReactiveFormsModule } from '@angular/forms';
34
import { BrowserModule } from '@angular/platform-browser';
45
import { CanvasComponent } from './canvas/canvas.component';
56
import { DetailComponent } from './detail/detail.component';
@@ -12,7 +13,7 @@ import { XPositionPipe } from './x-position.pipe';
1213
import { YPositionPipe } from './y-position.pipe';
1314

1415
@NgModule({
15-
imports: [BrowserModule, CommonModule],
16+
imports: [ReactiveFormsModule, BrowserModule, CommonModule],
1617
declarations: [
1718
CanvasComponent,
1819
DetailComponent,

‎src/app/matrix/task-card/task-card.component.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<div [class]="topic.color">
2+
<div *ngIf="position <= 1" class="card-container">
3+
<label *ngIf="task.name === ''" class="name-label" for="name"
4+
>task name</label
5+
>
6+
<input
7+
type="text"
8+
class="name-input"
9+
id="name"
10+
required
11+
value="{{ task.name }}"
12+
/>
13+
<label for="description">description</label>
14+
<textarea id="description" value="{{ task.description }}"></textarea>
15+
<div class="row imp-due-date">
16+
<input
17+
type="number"
18+
id="importance"
19+
required
20+
value="{{ task.importance }}"
21+
/>
22+
<span class="separator">imp.</span>
23+
<input type="number" id="day" value="{{ task.dueDate.getDay() + 1 }}" />
24+
<span>.</span>
25+
<input
26+
type="number"
27+
id="month"
28+
value="{{ task.dueDate.getMonth() + 1 }}"
29+
/>
30+
<span>.</span>
31+
<span>20</span>
32+
<input
33+
type="number"
34+
id="year"
35+
value="{{ task.dueDate.getFullYear() - 2000 }}"
36+
/>
37+
</div>
38+
<div class="row topic-done">
39+
<p>{{ task.topic }}</p>
40+
<button class="done-btn">
41+
{{ task.done ? 'mark undone' : 'mark done' }}
42+
</button>
43+
</div>
44+
</div>
45+
46+
<div *ngIf="position >= 2" class="card-small-container">
47+
<small>{{ task.name }}</small>
48+
</div>
49+
</div>

‎src/app/matrix/task-card/task-card.component.scss

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
@import '../../../colors.scss';
2+
3+
.card-container {
4+
padding: 1rem;
5+
background-color: green;
6+
border-radius: 20px;
7+
display: flex;
8+
flex-direction: column;
9+
color: #f3f3f3;
10+
}
11+
12+
.separator {
13+
margin-right: 2rem;
14+
}
15+
16+
.row {
17+
display: flex;
18+
flex-direction: row;
19+
justify-content: space-between;
20+
}
21+
22+
.imp-due-date {
23+
margin-top: 0.5rem;
24+
margin-bottom: 0.5rem;
25+
align-items: center;
26+
27+
span {
28+
padding-right: 4px;
29+
padding-left: 2px;
30+
}
31+
}
32+
33+
.done-btn {
34+
border: none;
35+
background-color: #f3f3f3;
36+
font-size: 1rem;
37+
font-family: Nunito;
38+
box-shadow: 4px 4px 5px rgba(32, 32, 32, 0.3);
39+
border-radius: 20px;
40+
padding: 0.5rem 2rem;
41+
}
42+
43+
.topic-done {
44+
p {
45+
margin: 0;
46+
}
47+
}
48+
49+
@mixin color-card($color-primary, $color-secondary, $color-lighter) {
50+
.card-container {
51+
background-image: linear-gradient(
52+
205.21deg,
53+
$color-primary 5.69%,
54+
$color-secondary 83.94%
55+
);
56+
57+
input,
58+
textarea {
59+
color: #f3f3f3;
60+
border: none;
61+
background-color: transparent;
62+
}
63+
64+
input[type='text'],
65+
textarea {
66+
font-size: 2rem;
67+
font-family: Nunito;
68+
border-bottom: 1px solid $color-lighter;
69+
}
70+
71+
input[type='number'] {
72+
padding: 0.5rem;
73+
font-size: 1rem;
74+
border: 1px solid $color-lighter;
75+
border-radius: 10px;
76+
box-sizing: border-box;
77+
width: 4rem;
78+
}
79+
}
80+
}
81+
82+
.blue {
83+
@include color-card($blue-primary, $blue-secondary, $blue-lighter);
84+
}
85+
86+
.green {
87+
@include color-card($green-primary, $green-secondary, $blue-lighter);
88+
}
89+
90+
.orange {
91+
@include color-card($orange-primary, $orange-secondary, $orange-lighter);
92+
}

‎src/app/matrix/task-card/task-card.component.ts

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,31 @@
1-
import { Component } from '@angular/core';
1+
import { Component, EventEmitter, Input, Output } from '@angular/core';
2+
import { FormControl, FormGroup } from '@angular/forms';
3+
import { Task, Topic } from '../matrix.interfaces';
24

35
@Component({
46
selector: 'app-task-card',
57
templateUrl: './task-card.component.html',
68
styleUrls: ['./task-card.component.scss'],
79
})
8-
export class TaskCardComponent {}
10+
export class TaskCardComponent {
11+
@Input() task!: Task;
12+
@Input() topic!: Topic;
13+
@Input() position = 0;
14+
@Output() changeTask = new EventEmitter<Task>();
15+
taskForm = new FormGroup({
16+
name: new FormControl(''),
17+
description: new FormControl(''),
18+
importance: new FormControl(''),
19+
dueDate: new FormGroup({
20+
day: new FormControl(''),
21+
month: new FormControl(''),
22+
year: new FormControl(''),
23+
}),
24+
topic: new FormControl(''),
25+
done: new FormControl(''),
26+
});
27+
28+
onChange(task: Task): void {
29+
this.changeTask.emit(task);
30+
}
31+
}

‎src/colors.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
$blue-primary: #0096ff;
22
$blue-secondary: #0066ff;
3+
$blue-lighter: #6ac2ff;
34

45
$green-primary: #30a64a;
56
$green-secondary: #164c32;
67

78
$orange-primary: #ff9300;
89
$orange-secondary: #ff4d00;
10+
$orange-lighter: #ffecd2;
911

1012
$red-primary: #b80c09;
1113
$red-secondary: #750706;

0 commit comments

Comments
 (0)