> [name=Lucas] [time=Tue, Mar 7, 2023] [color=#72ea69]
> [name=Lukas] [time=Tue, Mar 7, 2023]

**Original Dokument: [hackmd.io](https://hackmd.io/@LucLukWissM324/BylK2uVJ2) - in diesem PDF sind nicht alle Information und Darstellung korrekt.**

# SQ30B

# Kanban Board
Für weitere Umsetzungsprozesse nutzen wir das Kanban Board von GitLab. Um dies übersichtlich zu gestalten haben wir Label und Boards für die jeweiligen Prozessschritte erstellt.

*<p style="text-align: center;">Die erstellten Labels</p>*

---

<p style="text-align: center;">Unter Issues -> Board neue Liste erstellt</p>

---

# Brainstorming & Priorisierung

In einem kurzen Brainstorming haben wir die Userstories ausgewertet und nach Prioritätskriterien ausgewählt.

*<p style="text-align: center;">Unsere priorisierten Userstories auf dem Kanban Board</p>*

---

# Userstory Analyse
Folgende Userstories haben wir zur Umsetzung gewählt und analysiert:
- Datenbank
- Priorität
- Mobile

---

## Tasks
Daraus haben wir folgende Tasks erstellt:

### Datebank:
- Datenbank initialisieren
- Aufsetzen
- Init-file
- Tabelle erstellen
- Back-End Anbindung und Konfiguration
- Dependencies konfiguration
- Application properties konfiguration
- Controller classes
- Entities
- Front-End CRUD Opperations
- Post/Get-functions

### Priorität
- Datenbank Tabelle erweitern
- Back-End entity
- Controller class
- Front-End Darstellung
- Sort Funktion
- Priorität nach Farben
- Dropdown beim erstellen für Priorität

### Mobile Compatible
- Front-End
- css erweitern mit MediaQueries

---

*<p style="text-align: center;">Task wurden im Issue eingetragen</p>*

*<p style="text-align: center;">Tasks wurden in diesem Schritt automatisch erstellt</p>*

---

*<p style="text-align: center;">Für die gewählten Issues wurde jeweils ein Branch, mit der jeweiligen Ticket-Nummer erstellt.</p>*

---

# Milestones
Unsere Milestones entsprechen unseren gewählten Issues und es wurde auf Gitab unter Milestones neue Milestones erstellt mit den jeweiligen Start- und Enddaten.


---

# Beginn der Arbeit
Die Tasks wurden nun den Entwicklern zugewiesen.

*<p style="text-align: center;">Bearbeiten des Tasks: Datenbank</p>*

*<p style="text-align: center;">Task zugewiesen</p>*

*<p style="text-align: center;">Die Userstory ist nun 'In Progress'</p>*

*<p style="text-align: center;">Ansicht der persönlichen Todo Liste</p>*

---

# Task Journal

## User Stories -Datenbank- #12 :heavy_check_mark:

**Branch**: https://gitlab.wiss-edu.ch/LucasColaco/m324-todolist/-/tree/%2312-Datenbank

Wir haben uns entschieden das Backend komplett zu überarbeiten, um die Anbindung der MySQL Datenbank reibungsfrei zu ermöglichen.

### Das neue Back-End:
Das Back-End besteht nach wie vor aus den Maven Spring-Boot Komponenten.
**Maven Module und Dependencies:**
- spring-boot-starter-data-jpa
- spring-boot-starter-web
- mysql-connector-j
- spring-boot-maven-plugin
- Java 17
Das Config file pom.xml wurde dementsprechend angepasst.

#### File Struktur des Back-End's:

Durch die **Model** Class werden die Entities beim Ausführen automatisch in der Datenbank erstellt.
- *Todos.java* enthält folgende Datentypen:
- Long id
- String task
- Integer priority


###### Priority wurde hier bereits für eine zukünftige Funktion implementiert -> @see gitlab issue #2

In der **TodoController** Class wurden die CRUD Opperationen erstellt und sind auf der Root-URL "/" erreichbar:
- @GetMapping("/")
- getAllTodos()
- @PostMapping("/add")
- addTask() -> als json [{ "task":, "priority": }]
- @DeleteMapping("/{id}")
- deleteTask()

### Die Datenbank

Eine MySQL Datenbank mit Port 3306 wurde aufgesetzt und die *application.properties* angepasst:
> spring.datasource.url=jdbc:mysql://${MYSQL_HOST:localhost}:3306/todo
> spring.datasource.username=root
> spring.datasource.password=root

Danach die 'todo' Datenbank erstellen:
> CREATE DATABASE todo;

---

**To-Do des tasks auf GitLab**:

---

### Front-End Anpassungen

Das Front-End benötigt einige Änderungen an den CRUD Operationen, Handlern und State props.

    this.state = {
      todos: typeof props.todos === 'undefined' ? [] : props.todos,
      task: "",
      id: 0,
      priority: 0,
    };

Der Content-Type ist nach wie vor JSON, jedoch muss nun auch noch die id und Priorität mitgesendet werden.

    fetch("http://localhost:8080/add", { 
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ task: this.state.task, priority: this.state.priority })
    })

Ausserdem wurde die done/delete Funktion im Back-End so überarbeited, dass es nun ein DELETE CRUD ist und der Fetch direkt über die url + id des Tasks funktioniert.

    fetch(`http://localhost:8080/`+todo, {
      method: "DELETE",
        ....

---
---

## User Story -PriotityTodo- #2 :heavy_check_mark:

**Branch**: https://gitlab.wiss-edu.ch/LucasColaco/m324-todolist/-/tree/%232-PriotityTodo

Die Tasks sollen auf 3 Stufen priorisiert werden: "Low", "Medium" oder "High".
In der Datenbank der Wert jedoch als int abgespeichert werden und der Output als String handelt das Front-End mit einem Switch-Case.

  prioToString = prio => {
    switch(prio) {
      case 0:
        return "Low";
      case 1:
        return "Medium";
      case 2:
        return "High";
      default:
        return "Unknown";
    }
  }

Mittels einem 'select' Menu soll es dann möglich sein, diese Priorität beim Erstellen eines Tasks zu setzen. Dazu benötigt es einen Change-handler.

  handleChangePriority = event => {
    this.setState({ priority: event.target.value });
  }

Und das Select im HTML-Render-Bereich:

   <select value={this.state.priority} onChange={this.handleChangePriority}>
          <option value="0">Low</option>
          <option value="1">Medium</option>
          <option value="2">High</option>
    </select>

Die Darstellung der Liste aus dem Fetch mit Priorität und Id. Der darin eingebundene 'Done' Button, der den Eintrag aus der Datenbank löscht, handelt jetzt mit der Datenbank Id, damit der DELETE CRUD korrekt funktioniert.

<li key={index}>
    {"Task " + (index+1) + ": "+ todo.task + " with priority: " + this.prioToString(todo.priority) + " and id: " + todo.id + " "}
    <button onClick={this.handleClick.bind(this, todo.id)}>Done</button>
</li>

#### Resultat:

---

# next up:
- merge Reuqest?