From 3e239df1bfa4de24415707f7d900c931cde53ced Mon Sep 17 00:00:00 2001
From: Sebastian <mail@fawkes100.de>
Date: Mon, 2 Oct 2023 10:57:56 +0200
Subject: [PATCH] Create Component for Creating and Editing Tasks

---
 backend/.idea/workspace.xml                   |   6 -
 frontend/src/api/.openapi-generator/FILES     |   3 +
 frontend/src/api/api.module.ts                |   1 +
 frontend/src/api/api/api.ts                   |   4 +-
 frontend/src/api/api/task.service.ts          | 223 ++++++++++++++++++
 frontend/src/api/model/models.ts              |   2 +
 frontend/src/api/model/taskEntityInfo.ts      |  40 ++++
 frontend/src/api/model/taskFieldInfo.ts       |  32 +++
 frontend/src/app/app.module.ts                |  52 ++--
 .../taskgroup-dashboard.component.css         |   6 +
 .../taskgroup-dashboard.component.html        |   5 +-
 .../taskgroup-dashboard.component.ts          |   5 +
 .../task-editor/task-editor.component.css     |   3 +
 .../task-editor/task-editor.component.html    |  27 +++
 .../task-editor/task-editor.component.spec.ts |  25 ++
 .../task-editor/task-editor.component.ts      |  19 ++
 16 files changed, 421 insertions(+), 32 deletions(-)
 create mode 100644 frontend/src/api/api/task.service.ts
 create mode 100644 frontend/src/api/model/taskEntityInfo.ts
 create mode 100644 frontend/src/api/model/taskFieldInfo.ts
 create mode 100644 frontend/src/app/tasks/task-editor/task-editor.component.css
 create mode 100644 frontend/src/app/tasks/task-editor/task-editor.component.html
 create mode 100644 frontend/src/app/tasks/task-editor/task-editor.component.spec.ts
 create mode 100644 frontend/src/app/tasks/task-editor/task-editor.component.ts

diff --git a/backend/.idea/workspace.xml b/backend/.idea/workspace.xml
index 76f6eff..72dd965 100644
--- a/backend/.idea/workspace.xml
+++ b/backend/.idea/workspace.xml
@@ -5,13 +5,7 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="3a869f59-290a-4ab2-b036-a878ce801bc4" name="Changes" comment="Datastructure for Tasks">
-      <change afterPath="$PROJECT_DIR$/src/main/java/core/api/controller/TaskController.java" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/java/core/api/models/timemanager/tasks/TaskEntityInfo.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/api/models/timemanager/tasks/TaskEntityInfo.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/java/core/entities/timemanager/Task.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/entities/timemanager/Task.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/java/core/entities/timemanager/Taskgroup.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/entities/timemanager/Taskgroup.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/java/core/services/TaskService.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/services/TaskService.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../openapi.yaml" beforeDir="false" afterPath="$PROJECT_DIR$/../openapi.yaml" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
diff --git a/frontend/src/api/.openapi-generator/FILES b/frontend/src/api/.openapi-generator/FILES
index 8f617f7..7a04693 100644
--- a/frontend/src/api/.openapi-generator/FILES
+++ b/frontend/src/api/.openapi-generator/FILES
@@ -5,6 +5,7 @@ api/account.service.ts
 api/api.ts
 api/login.service.ts
 api/properties.service.ts
+api/task.service.ts
 api/taskgroup.service.ts
 api/users.service.ts
 configuration.ts
@@ -25,6 +26,8 @@ model/propertiesInfo.ts
 model/propertyInfo.ts
 model/propertyUpdateRequest.ts
 model/signUpRequest.ts
+model/taskEntityInfo.ts
+model/taskFieldInfo.ts
 model/taskgroupEntityInfo.ts
 model/taskgroupFieldInfo.ts
 model/userAddInfo.ts
diff --git a/frontend/src/api/api.module.ts b/frontend/src/api/api.module.ts
index a695643..eb73404 100644
--- a/frontend/src/api/api.module.ts
+++ b/frontend/src/api/api.module.ts
@@ -5,6 +5,7 @@ import { HttpClient } from '@angular/common/http';
 import { AccountService } from './api/account.service';
 import { LoginService } from './api/login.service';
 import { PropertiesService } from './api/properties.service';
+import { TaskService } from './api/task.service';
 import { TaskgroupService } from './api/taskgroup.service';
 import { UsersService } from './api/users.service';
 
diff --git a/frontend/src/api/api/api.ts b/frontend/src/api/api/api.ts
index e3102eb..5df9774 100644
--- a/frontend/src/api/api/api.ts
+++ b/frontend/src/api/api/api.ts
@@ -4,8 +4,10 @@ export * from './login.service';
 import { LoginService } from './login.service';
 export * from './properties.service';
 import { PropertiesService } from './properties.service';
+export * from './task.service';
+import { TaskService } from './task.service';
 export * from './taskgroup.service';
 import { TaskgroupService } from './taskgroup.service';
 export * from './users.service';
 import { UsersService } from './users.service';
-export const APIS = [AccountService, LoginService, PropertiesService, TaskgroupService, UsersService];
+export const APIS = [AccountService, LoginService, PropertiesService, TaskService, TaskgroupService, UsersService];
diff --git a/frontend/src/api/api/task.service.ts b/frontend/src/api/api/task.service.ts
new file mode 100644
index 0000000..92f7dc7
--- /dev/null
+++ b/frontend/src/api/api/task.service.ts
@@ -0,0 +1,223 @@
+/**
+ * API Title
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/* tslint:disable:no-unused-variable member-ordering */
+
+import { Inject, Injectable, Optional }                      from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams,
+         HttpResponse, HttpEvent, HttpParameterCodec, HttpContext 
+        }       from '@angular/common/http';
+import { CustomHttpParameterCodec }                          from '../encoder';
+import { Observable }                                        from 'rxjs';
+
+import { InlineResponse403 } from '../model/models';
+import { TaskEntityInfo } from '../model/models';
+import { TaskFieldInfo } from '../model/models';
+
+import { BASE_PATH, COLLECTION_FORMATS }                     from '../variables';
+import { Configuration }                                     from '../configuration';
+
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TaskService {
+
+    protected basePath = 'http://localhost:8080/api';
+    public defaultHeaders = new HttpHeaders();
+    public configuration = new Configuration();
+    public encoder: HttpParameterCodec;
+
+    constructor(protected httpClient: HttpClient, @Optional()@Inject(BASE_PATH) basePath: string, @Optional() configuration: Configuration) {
+        if (configuration) {
+            this.configuration = configuration;
+        }
+        if (typeof this.configuration.basePath !== 'string') {
+            if (typeof basePath !== 'string') {
+                basePath = this.basePath;
+            }
+            this.configuration.basePath = basePath;
+        }
+        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
+    }
+
+
+    private addToHttpParams(httpParams: HttpParams, value: any, key?: string): HttpParams {
+        if (typeof value === "object" && value instanceof Date === false) {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value);
+        } else {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
+        }
+        return httpParams;
+    }
+
+    private addToHttpParamsRecursive(httpParams: HttpParams, value?: any, key?: string): HttpParams {
+        if (value == null) {
+            return httpParams;
+        }
+
+        if (typeof value === "object") {
+            if (Array.isArray(value)) {
+                (value as any[]).forEach( elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
+            } else if (value instanceof Date) {
+                if (key != null) {
+                    httpParams = httpParams.append(key,
+                        (value as Date).toISOString().substr(0, 10));
+                } else {
+                   throw Error("key may not be null if value is Date");
+                }
+            } else {
+                Object.keys(value).forEach( k => httpParams = this.addToHttpParamsRecursive(
+                    httpParams, value[k], key != null ? `${key}.${k}` : k));
+            }
+        } else if (key != null) {
+            httpParams = httpParams.append(key, value);
+        } else {
+            throw Error("key may not be null if value is not object or array");
+        }
+        return httpParams;
+    }
+
+    /**
+     * creates a new task
+     * creates tasks
+     * @param taskgroupID internal id of taskgroup
+     * @param taskFieldInfo 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public tasksTaskgroupIDPut(taskgroupID: number, taskFieldInfo?: TaskFieldInfo, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<TaskEntityInfo>;
+    public tasksTaskgroupIDPut(taskgroupID: number, taskFieldInfo?: TaskFieldInfo, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<HttpResponse<TaskEntityInfo>>;
+    public tasksTaskgroupIDPut(taskgroupID: number, taskFieldInfo?: TaskFieldInfo, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<HttpEvent<TaskEntityInfo>>;
+    public tasksTaskgroupIDPut(taskgroupID: number, taskFieldInfo?: TaskFieldInfo, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<any> {
+        if (taskgroupID === null || taskgroupID === undefined) {
+            throw new Error('Required parameter taskgroupID was null or undefined when calling tasksTaskgroupIDPut.');
+        }
+
+        let localVarHeaders = this.defaultHeaders;
+
+        let localVarCredential: string | undefined;
+        // authentication (API_TOKEN) required
+        localVarCredential = this.configuration.lookupCredential('API_TOKEN');
+        if (localVarCredential) {
+            localVarHeaders = localVarHeaders.set('Authorization', 'Bearer ' + localVarCredential);
+        }
+
+        let localVarHttpHeaderAcceptSelected: string | undefined = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts: string[] = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+
+        let localVarHttpContext: HttpContext | undefined = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+            'application/json'
+        ];
+        const httpContentTypeSelected: string | undefined = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Content-Type', httpContentTypeSelected);
+        }
+
+        let responseType_: 'text' | 'json' = 'json';
+        if(localVarHttpHeaderAcceptSelected && localVarHttpHeaderAcceptSelected.startsWith('text')) {
+            responseType_ = 'text';
+        }
+
+        return this.httpClient.put<TaskEntityInfo>(`${this.configuration.basePath}/tasks/${encodeURIComponent(String(taskgroupID))}`,
+            taskFieldInfo,
+            {
+                context: localVarHttpContext,
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * list tasks
+     * list tasks
+     * @param taskgroupID internal id of taskgroup
+     * @param status scope of listed tasks
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public tasksTaskgroupIDStatusGet(taskgroupID: number, status: 'all' | 'overdue' | 'upcoming', observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<Array<TaskEntityInfo>>;
+    public tasksTaskgroupIDStatusGet(taskgroupID: number, status: 'all' | 'overdue' | 'upcoming', observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<HttpResponse<Array<TaskEntityInfo>>>;
+    public tasksTaskgroupIDStatusGet(taskgroupID: number, status: 'all' | 'overdue' | 'upcoming', observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<HttpEvent<Array<TaskEntityInfo>>>;
+    public tasksTaskgroupIDStatusGet(taskgroupID: number, status: 'all' | 'overdue' | 'upcoming', observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<any> {
+        if (taskgroupID === null || taskgroupID === undefined) {
+            throw new Error('Required parameter taskgroupID was null or undefined when calling tasksTaskgroupIDStatusGet.');
+        }
+        if (status === null || status === undefined) {
+            throw new Error('Required parameter status was null or undefined when calling tasksTaskgroupIDStatusGet.');
+        }
+
+        let localVarHeaders = this.defaultHeaders;
+
+        let localVarCredential: string | undefined;
+        // authentication (API_TOKEN) required
+        localVarCredential = this.configuration.lookupCredential('API_TOKEN');
+        if (localVarCredential) {
+            localVarHeaders = localVarHeaders.set('Authorization', 'Bearer ' + localVarCredential);
+        }
+
+        let localVarHttpHeaderAcceptSelected: string | undefined = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts: string[] = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+
+        let localVarHttpContext: HttpContext | undefined = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+
+
+        let responseType_: 'text' | 'json' = 'json';
+        if(localVarHttpHeaderAcceptSelected && localVarHttpHeaderAcceptSelected.startsWith('text')) {
+            responseType_ = 'text';
+        }
+
+        return this.httpClient.get<Array<TaskEntityInfo>>(`${this.configuration.basePath}/tasks/${encodeURIComponent(String(taskgroupID))}/${encodeURIComponent(String(status))}`,
+            {
+                context: localVarHttpContext,
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+}
diff --git a/frontend/src/api/model/models.ts b/frontend/src/api/model/models.ts
index adcbb18..54ad6fc 100644
--- a/frontend/src/api/model/models.ts
+++ b/frontend/src/api/model/models.ts
@@ -11,6 +11,8 @@ export * from './propertiesInfo';
 export * from './propertyInfo';
 export * from './propertyUpdateRequest';
 export * from './signUpRequest';
+export * from './taskEntityInfo';
+export * from './taskFieldInfo';
 export * from './taskgroupEntityInfo';
 export * from './taskgroupFieldInfo';
 export * from './userAddInfo';
diff --git a/frontend/src/api/model/taskEntityInfo.ts b/frontend/src/api/model/taskEntityInfo.ts
new file mode 100644
index 0000000..10b82d2
--- /dev/null
+++ b/frontend/src/api/model/taskEntityInfo.ts
@@ -0,0 +1,40 @@
+/**
+ * API Title
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export interface TaskEntityInfo { 
+    /**
+     * internal id of task
+     */
+    taskID: number;
+    /**
+     * name of task
+     */
+    taskName: string;
+    /**
+     * expected time to finish task
+     */
+    eta: number;
+    /**
+     * date from which the task can be started
+     */
+    startDate: string;
+    /**
+     * date until the task has to be finished
+     */
+    deadline: string;
+    /**
+     * determines whether the task is overdue
+     */
+    overdue: boolean;
+}
+
diff --git a/frontend/src/api/model/taskFieldInfo.ts b/frontend/src/api/model/taskFieldInfo.ts
new file mode 100644
index 0000000..6f89152
--- /dev/null
+++ b/frontend/src/api/model/taskFieldInfo.ts
@@ -0,0 +1,32 @@
+/**
+ * API Title
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export interface TaskFieldInfo { 
+    /**
+     * name of task
+     */
+    taskName: string;
+    /**
+     * expected time to finish task
+     */
+    eta: number;
+    /**
+     * date from which the task can be started
+     */
+    startDate: string;
+    /**
+     * date until the task has to be finished
+     */
+    deadline: string;
+}
+
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 0b23766..8038d4d 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -39,6 +39,8 @@ import {MatListModule} from "@angular/material/list";
 import { TaskgroupDashboardComponent } from './taskgroups/taskgroup-dashboard/taskgroup-dashboard.component';
 import { TaskgroupCreationComponent } from './taskgroups/taskgroup-creation/taskgroup-creation.component';
 import { TaskgroupDeletionComponent } from './taskgroups/taskgroup-deletion/taskgroup-deletion.component';
+import { TaskEditorComponent } from './tasks/task-editor/task-editor.component';
+import {MatDatepickerModule} from "@angular/material/datepicker";
 
 @NgModule({
   declarations: [
@@ -58,31 +60,33 @@ import { TaskgroupDeletionComponent } from './taskgroups/taskgroup-deletion/task
     SettingsComponent,
     TaskgroupDashboardComponent,
     TaskgroupCreationComponent,
-    TaskgroupDeletionComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    FormsModule,
-    ApiModule,
-    HttpClientModule,
-    BrowserAnimationsModule,
-    MatToolbarModule,
-    MatButtonModule,
-    MatIconModule,
-    MatDialogModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatProgressSpinnerModule,
-    MatSnackBarModule,
-    MatMenuModule,
-    MatTabsModule,
-    MatTableModule,
-    MatCheckboxModule,
-    MatCardModule,
-    ReactiveFormsModule,
-    MatListModule
+    TaskgroupDeletionComponent,
+    TaskEditorComponent
   ],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        FormsModule,
+        ApiModule,
+        HttpClientModule,
+        BrowserAnimationsModule,
+        MatToolbarModule,
+        MatButtonModule,
+        MatIconModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatProgressSpinnerModule,
+        MatSnackBarModule,
+        MatMenuModule,
+        MatTabsModule,
+        MatTableModule,
+        MatCheckboxModule,
+        MatCardModule,
+        ReactiveFormsModule,
+        MatListModule,
+        MatDatepickerModule
+    ],
   providers: [
     HttpClientModule,
     /*
diff --git a/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.css b/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.css
index a1970b1..813f89c 100644
--- a/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.css
+++ b/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.css
@@ -33,6 +33,12 @@
 
 #addTaskgroupBtn {
   margin-top: 20px;
+  float: right;
+}
+
+#addTaskBtn {
+  margin-top: 20px;
+  float: left;
 }
 
 .edit-btn {
diff --git a/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.html b/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.html
index 7fd2200..df3a715 100644
--- a/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.html
+++ b/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.html
@@ -15,5 +15,8 @@
     </mat-card-content>
 
   </mat-card>
-  <button id="addTaskgroupBtn" mat-raised-button color="primary" (click)="openTaskgroupCreation()">Create new Taskgroup</button>
+  <div>
+    <button id="addTaskBtn" mat-raised-button color="primary" (click)="openTaskCreation()">Create New Task</button>
+    <button id="addTaskgroupBtn" mat-raised-button color="primary" (click)="openTaskgroupCreation()">Create new Taskgroup</button>
+  </div>
 </div>
diff --git a/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.ts b/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.ts
index cfbaa87..11c84c4 100644
--- a/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.ts
+++ b/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.ts
@@ -4,6 +4,7 @@ import {TaskgroupCreationComponent} from "../taskgroup-creation/taskgroup-creati
 import {TaskgroupEntityInfo, TaskgroupService} from "../../../api";
 import {TaskgroupDeletionComponent} from "../taskgroup-deletion/taskgroup-deletion.component";
 import {ActivatedRoute} from "@angular/router";
+import {TaskEditorComponent} from "../../tasks/task-editor/task-editor.component";
 
 @Component({
   selector: 'app-taskgroup-dashboard',
@@ -65,4 +66,8 @@ export class TaskgroupDashboardComponent implements OnInit {
       }
     })
   }
+
+  openTaskCreation() {
+    const dialogRef = this.dialog.open(TaskEditorComponent, {minWidth: "400px"})
+  }
 }
diff --git a/frontend/src/app/tasks/task-editor/task-editor.component.css b/frontend/src/app/tasks/task-editor/task-editor.component.css
new file mode 100644
index 0000000..4e80027
--- /dev/null
+++ b/frontend/src/app/tasks/task-editor/task-editor.component.css
@@ -0,0 +1,3 @@
+.long-form {
+  width: 100%;
+}
diff --git a/frontend/src/app/tasks/task-editor/task-editor.component.html b/frontend/src/app/tasks/task-editor/task-editor.component.html
new file mode 100644
index 0000000..f5af9a7
--- /dev/null
+++ b/frontend/src/app/tasks/task-editor/task-editor.component.html
@@ -0,0 +1,27 @@
+<h1 mat-dialog-title>Create New Task</h1>
+<div mat-dialog-content>
+  <mat-form-field appearance="outline" class="long-form">
+    <mat-label>Name</mat-label>
+    <input matInput [formControl]="nameCtrl">
+    <mat-hint align="end">{{nameCtrl.value.length}} / 255</mat-hint>
+  </mat-form-field>
+  <mat-form-field appearance="outline" class="long-form">
+    <mat-label>ETA</mat-label>
+    <input matInput type="number" [formControl]="etaCtrl" min="0">
+  </mat-form-field>
+ <!--
+  <mat-form-field>
+    <mat-label>Startdate</mat-label>
+    <input matInput [matDatepicker]="startpicker">
+    <mat-hint>MM/DD/YYYY</mat-hint>
+    <mat-datepicker-toggle matIconSuffix [for]="startpicker"></mat-datepicker-toggle>
+    <mat-datepicker #startpicker></mat-datepicker>
+  </mat-form-field>
+  <mat-form-field>
+    <mat-label>Deadline</mat-label>
+    <input matInput [matDatepicker]="deadlinepicker">
+    <mat-hint>MM/DD/YYYY</mat-hint>
+    <mat-datepicker-toggle matIconSuffix [for]="deadlinepicker"></mat-datepicker-toggle>
+    <mat-datepicker #deadlinepicker></mat-datepicker>
+  </mat-form-field>-->
+</div>
diff --git a/frontend/src/app/tasks/task-editor/task-editor.component.spec.ts b/frontend/src/app/tasks/task-editor/task-editor.component.spec.ts
new file mode 100644
index 0000000..288f467
--- /dev/null
+++ b/frontend/src/app/tasks/task-editor/task-editor.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TaskEditorComponent } from './task-editor.component';
+
+describe('TaskEditorComponent', () => {
+  let component: TaskEditorComponent;
+  let fixture: ComponentFixture<TaskEditorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TaskEditorComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TaskEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/tasks/task-editor/task-editor.component.ts b/frontend/src/app/tasks/task-editor/task-editor.component.ts
new file mode 100644
index 0000000..96aa5e9
--- /dev/null
+++ b/frontend/src/app/tasks/task-editor/task-editor.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import {FormControl, Validators} from "@angular/forms";
+
+@Component({
+  selector: 'app-task-editor',
+  templateUrl: './task-editor.component.html',
+  styleUrls: ['./task-editor.component.css']
+})
+export class TaskEditorComponent implements OnInit {
+
+  nameCtrl = new FormControl('', [Validators.required, Validators.maxLength(255)])
+  etaCtrl = new FormControl(0, [Validators.required, Validators.min(0)])
+  startDate = new FormControl(Date.now(), [Validators.required])
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}