added app-task component to overlay
This commit is contained in:
Chneemann
parent
774ae02ff8
commit
780743215e
6 changed files with 139 additions and 245 deletions
|
|
@ -1,5 +1,10 @@
|
|||
<section>
|
||||
<div class="headline">
|
||||
<section
|
||||
[ngStyle]="{ 'background-color': overlayData !== '' ? 'var(--white)' : '' }"
|
||||
>
|
||||
<div
|
||||
class="headline"
|
||||
[ngStyle]="{ display: overlayData !== '' ? 'none' : 'block' }"
|
||||
>
|
||||
<div class="title">Add Tasks</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ section {
|
|||
|
||||
.content {
|
||||
display: flex;
|
||||
margin-top: 48px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -53,9 +52,15 @@ p {
|
|||
}
|
||||
}
|
||||
|
||||
.d-none {
|
||||
display: none;
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
/*------------- HEADER -------------*/
|
||||
|
||||
.headline {
|
||||
margin-bottom: 48px;
|
||||
.title {
|
||||
font-size: 61px;
|
||||
font-weight: 700;
|
||||
|
|
@ -86,6 +91,30 @@ p {
|
|||
}
|
||||
}
|
||||
|
||||
.assigned-badget {
|
||||
display: flex;
|
||||
margin-top: 6px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.circle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 100%;
|
||||
border: 2px solid var(--white);
|
||||
margin-right: 6px;
|
||||
.initials {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--white);
|
||||
text-shadow: 1px 1px 2px var(--black);
|
||||
}
|
||||
}
|
||||
|
||||
.subtask {
|
||||
position: relative;
|
||||
.add {
|
||||
|
|
@ -147,30 +176,6 @@ p {
|
|||
}
|
||||
}
|
||||
|
||||
.assigned-badget {
|
||||
display: flex;
|
||||
margin-top: 6px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.circle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 100%;
|
||||
border: 2px solid var(--white);
|
||||
margin-right: 6px;
|
||||
.initials {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--white);
|
||||
text-shadow: 1px 1px 2px var(--black);
|
||||
}
|
||||
}
|
||||
|
||||
/*------------- MIDDLE -------------*/
|
||||
|
||||
.middle-spacer {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
import { CommonModule } from '@angular/common';
|
||||
import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';
|
||||
import {
|
||||
Component,
|
||||
ElementRef,
|
||||
HostListener,
|
||||
Input,
|
||||
ViewChild,
|
||||
} from '@angular/core';
|
||||
import { FormsModule, NgForm, NgModel } from '@angular/forms';
|
||||
import { AssignedComponent } from './assigned/assigned.component';
|
||||
import { User } from '../../interfaces/user.interface';
|
||||
|
|
@ -17,6 +23,8 @@ export class AddTaskComponent {
|
|||
@ViewChild('title', { static: true }) titleField!: NgModel;
|
||||
@ViewChild('description', { static: true }) descriptionField!: NgModel;
|
||||
@ViewChild('category', { static: true }) categoryField!: NgModel;
|
||||
@Input() task: string = '';
|
||||
@Input() overlayData: string = '';
|
||||
|
||||
currentDate: string = new Date().toISOString().split('T')[0];
|
||||
dateInPast: boolean = false;
|
||||
|
|
@ -40,6 +48,37 @@ export class AddTaskComponent {
|
|||
date: this.currentDate,
|
||||
};
|
||||
|
||||
ngOnInit() {
|
||||
if (this.overlayData !== '') {
|
||||
this.loadEditTaskData();
|
||||
}
|
||||
const storedTaskData = localStorage.getItem('taskData');
|
||||
if (storedTaskData) {
|
||||
this.taskData = JSON.parse(storedTaskData);
|
||||
} else {
|
||||
this.saveTaskData();
|
||||
}
|
||||
}
|
||||
|
||||
loadEditTaskData() {
|
||||
const taskData = this.getTaskData(this.overlayData)[0];
|
||||
this.taskData.title = taskData.title;
|
||||
this.taskData.description = taskData.description;
|
||||
this.taskData.category = taskData.category;
|
||||
this.taskData.status = taskData.status;
|
||||
this.taskData.priority = taskData.priority;
|
||||
this.taskData.subtasksTitle = taskData.subtasksTitle;
|
||||
this.taskData.subtasksDone = taskData.subtasksDone;
|
||||
this.taskData.assigned = taskData.assigned;
|
||||
this.taskData.date = taskData.date;
|
||||
}
|
||||
|
||||
getTaskData(taskId: string) {
|
||||
return this.firebaseService
|
||||
.getAllTasks()
|
||||
.filter((task) => task.id === taskId);
|
||||
}
|
||||
|
||||
receiveAssigned(assigned: string[]) {
|
||||
this.taskData.assigned = assigned;
|
||||
}
|
||||
|
|
@ -59,15 +98,6 @@ export class AddTaskComponent {
|
|||
this.saveTaskData();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
const storedTaskData = localStorage.getItem('taskData');
|
||||
if (storedTaskData) {
|
||||
this.taskData = JSON.parse(storedTaskData);
|
||||
} else {
|
||||
this.saveTaskData();
|
||||
}
|
||||
}
|
||||
|
||||
updateSearchInput() {
|
||||
if (this.searchValue) {
|
||||
this.searchInput = this.searchValue.toLowerCase().length > 0;
|
||||
|
|
|
|||
|
|
@ -2,135 +2,7 @@
|
|||
<div class="header">
|
||||
<app-btn-close (click)="closeDialog()"></app-btn-close>
|
||||
</div>
|
||||
|
||||
<form
|
||||
(ngSubmit)="onSubmit(taskForm)"
|
||||
#taskForm="ngForm"
|
||||
onsubmit="return false"
|
||||
>
|
||||
<div class="content">
|
||||
<div class="title headline">
|
||||
<p>Title<span class="red-dot">*</span></p>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
name="title"
|
||||
#title="ngModel"
|
||||
(input)="saveTaskData()"
|
||||
placeholder="{{
|
||||
taskDataEdit.title ? taskDataEdit.title : 'Enter a description'
|
||||
}}"
|
||||
[(ngModel)]="taskDataEdit.title"
|
||||
autocomplete="off"
|
||||
required
|
||||
/>
|
||||
<div class="error-msg">
|
||||
@if (!title.valid && title.touched) {
|
||||
<p>You must enter a title.</p>
|
||||
}
|
||||
<app-add-task [task]="'Edit'" [overlayData]="overlayData"></app-add-task>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description headline">
|
||||
<p>Description<span class="red-dot">*</span></p>
|
||||
<textarea
|
||||
id="description"
|
||||
rows="5"
|
||||
name="description"
|
||||
#description="ngModel"
|
||||
minlength="10"
|
||||
(input)="saveTaskData()"
|
||||
placeholder="{{
|
||||
taskDataEdit.description
|
||||
? taskDataEdit.description
|
||||
: 'Enter a description'
|
||||
}}"
|
||||
[(ngModel)]="taskDataEdit.description"
|
||||
autocomplete="off"
|
||||
required
|
||||
></textarea>
|
||||
<div class="error-msg">
|
||||
@if (!description.valid && description.touched) {
|
||||
<p>You must enter a description. (min. 10 letters)</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="date headline">
|
||||
<p>Due date<span class="red-dot">*</span></p>
|
||||
<input
|
||||
type="date"
|
||||
id="date"
|
||||
name="date"
|
||||
#date="ngModel"
|
||||
(input)="checkDateInput()"
|
||||
placeholder="{{ taskDataEdit.date }}"
|
||||
[(ngModel)]="taskDataEdit.date"
|
||||
autocomplete="off"
|
||||
required
|
||||
/>
|
||||
<div class="error-msg">
|
||||
@if (!date.valid && date.touched) {
|
||||
<p>You must enter a date.</p>
|
||||
} @if (dateInPast && date.valid) {
|
||||
<p>The date must be in the future</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="priority">
|
||||
<p>Prio</p>
|
||||
<div class="btns">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
[ngClass]="{
|
||||
'btn-active': taskDataEdit.priority == 'urgent'
|
||||
}"
|
||||
[ngStyle]="{
|
||||
'background-color':
|
||||
taskDataEdit.priority == 'urgent' ? 'red' : 'white'
|
||||
}"
|
||||
(click)="tooglePriority('urgent')"
|
||||
>
|
||||
<div class="btn-text">
|
||||
<span>Urgent</span>
|
||||
<img src="./../../../assets/img/urgent.svg" alt="" />
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
[ngClass]="{
|
||||
'btn-active': taskDataEdit.priority == 'medium'
|
||||
}"
|
||||
[ngStyle]="{
|
||||
'background-color':
|
||||
taskDataEdit.priority == 'medium' ? 'orange' : 'white'
|
||||
}"
|
||||
(click)="tooglePriority('medium')"
|
||||
>
|
||||
<div class="btn-text">
|
||||
<span>Medium</span>
|
||||
<img src="./../../../assets/img/medium.svg" alt="" />
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
[ngClass]="{
|
||||
'btn-active': taskDataEdit.priority == 'low'
|
||||
}"
|
||||
[ngStyle]="{
|
||||
'background-color':
|
||||
taskDataEdit.priority == 'low' ? 'green' : 'white'
|
||||
}"
|
||||
(click)="tooglePriority('low')"
|
||||
>
|
||||
<div class="btn-text">
|
||||
<span>Low</span>
|
||||
<img src="./../../../assets/img/low.svg" alt="" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
section {
|
||||
width: 525px;
|
||||
width: 925px;
|
||||
height: 700px;
|
||||
padding: 48px 40px 48px 40px;
|
||||
border-radius: 30px;
|
||||
|
|
@ -9,11 +9,11 @@ section {
|
|||
.header {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: calc(700px - 104px);
|
||||
height: calc(700px - 48px);
|
||||
padding: 0 6px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
|
@ -105,3 +105,47 @@ p {
|
|||
.btn:hover {
|
||||
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
// ASSIGNED
|
||||
|
||||
.assigned {
|
||||
position: relative;
|
||||
.open {
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
right: 20px;
|
||||
width: 14px;
|
||||
height: 7px;
|
||||
}
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
right: 15px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.assigned-badget {
|
||||
display: flex;
|
||||
margin-top: 6px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.circle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 100%;
|
||||
border: 2px solid var(--white);
|
||||
margin-right: 6px;
|
||||
.initials {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--white);
|
||||
text-shadow: 1px 1px 2px var(--black);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,100 +5,38 @@ import { BtnCloseComponent } from '../../buttons/btn-close/btn-close.component';
|
|||
import { FormsModule, NgForm } from '@angular/forms';
|
||||
import { Task } from '../../../../interfaces/task.interface';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { User } from '../../../../interfaces/user.interface';
|
||||
import { AssignedComponent } from '../../../../components/add-task/assigned/assigned.component';
|
||||
import { AddTaskComponent } from '../../../../components/add-task/add-task.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-task-edit-overlay',
|
||||
standalone: true,
|
||||
imports: [BtnCloseComponent, FormsModule, CommonModule],
|
||||
imports: [
|
||||
BtnCloseComponent,
|
||||
FormsModule,
|
||||
CommonModule,
|
||||
AssignedComponent,
|
||||
AddTaskComponent,
|
||||
],
|
||||
templateUrl: './task-edit-overlay.component.html',
|
||||
styleUrl: './task-edit-overlay.component.scss',
|
||||
})
|
||||
export class TaskEditOverlayComponent implements OnInit {
|
||||
export class TaskEditOverlayComponent {
|
||||
@Input() overlayData: string = '';
|
||||
@Output() closeDialogEmitter = new EventEmitter<string>();
|
||||
|
||||
dateInPast: boolean = false;
|
||||
|
||||
taskDataEdit: Task = {
|
||||
title: '',
|
||||
description: '',
|
||||
category: '',
|
||||
status: 'todo',
|
||||
priority: 'medium',
|
||||
subtasksTitle: [],
|
||||
subtasksDone: [],
|
||||
assigned: [],
|
||||
date: '',
|
||||
};
|
||||
|
||||
constructor(
|
||||
public firebaseService: FirebaseService,
|
||||
private overlayService: OverlayService
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
const taskData = this.getTaskData(this.overlayData)[0];
|
||||
this.taskDataEdit.title = taskData.title;
|
||||
this.taskDataEdit.description = taskData.description;
|
||||
this.taskDataEdit.category = taskData.category;
|
||||
this.taskDataEdit.status = taskData.status;
|
||||
this.taskDataEdit.priority = taskData.priority;
|
||||
this.taskDataEdit.subtasksTitle = taskData.subtasksTitle;
|
||||
this.taskDataEdit.subtasksDone = taskData.subtasksDone;
|
||||
this.taskDataEdit.assigned = taskData.assigned;
|
||||
this.taskDataEdit.date = taskData.date;
|
||||
}
|
||||
|
||||
closeDialog() {
|
||||
this.closeDialogEmitter.emit('');
|
||||
this.removeTaskData();
|
||||
}
|
||||
|
||||
getTaskData(taskId: string) {
|
||||
return this.firebaseService
|
||||
.getAllTasks()
|
||||
.filter((task) => task.id === taskId);
|
||||
}
|
||||
|
||||
saveTaskData() {
|
||||
localStorage.setItem('taskDataEdit', JSON.stringify(this.taskDataEdit));
|
||||
}
|
||||
|
||||
removeTaskData() {
|
||||
localStorage.removeItem('taskDataEdit');
|
||||
this.clearFormData();
|
||||
}
|
||||
|
||||
clearFormData() {
|
||||
this.taskDataEdit.title = '';
|
||||
this.taskDataEdit.description = '';
|
||||
this.taskDataEdit.date = '';
|
||||
this.taskDataEdit.category = '';
|
||||
this.taskDataEdit.assigned = [];
|
||||
this.taskDataEdit.subtasksTitle = [];
|
||||
this.taskDataEdit.subtasksDone = [];
|
||||
}
|
||||
|
||||
checkDateInput() {
|
||||
const currentDateForm = this.taskDataEdit.date.replaceAll('-', '');
|
||||
const currentDate = new Date()
|
||||
.toISOString()
|
||||
.split('T')[0]
|
||||
.replaceAll('-', '');
|
||||
currentDateForm < currentDate
|
||||
? (this.dateInPast = true)
|
||||
: (this.dateInPast = false);
|
||||
}
|
||||
|
||||
tooglePriority(prio: string) {
|
||||
this.taskDataEdit.priority !== prio
|
||||
? (this.taskDataEdit.priority = prio)
|
||||
: this.taskDataEdit.priority;
|
||||
this.saveTaskData();
|
||||
}
|
||||
|
||||
onSubmit(ngForm: NgForm) {
|
||||
if (ngForm.submitted && ngForm.form.valid) {
|
||||
}
|
||||
localStorage.removeItem('taskData');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue