From 31348bbc636f26baec73b5982af0b536fb830d36 Mon Sep 17 00:00:00 2001
From: Markus Thielen <markus.thielen@basebox.tech>
Date: Sat, 11 Mar 2023 12:15:55 +0100
Subject: [PATCH] todo item markup

---
 src/assets/img/trash-solid.png | Bin 0 -> 2624 bytes
 src/components/TodoRoot.vue    |  73 ++++++++++++++++++++++++++++++---
 src/router/index.js            |  19 ++-------
 src/store.js                   |  15 ++++++-
 4 files changed, 84 insertions(+), 23 deletions(-)
 create mode 100644 src/assets/img/trash-solid.png

diff --git a/src/assets/img/trash-solid.png b/src/assets/img/trash-solid.png
new file mode 100644
index 0000000000000000000000000000000000000000..167df76088c1cf2880c8eb8f5b15d244a1cb913d
GIT binary patch
literal 2624
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

literal 0
HcmV?d00001

diff --git a/src/components/TodoRoot.vue b/src/components/TodoRoot.vue
index 97b907b..78959ef 100644
--- a/src/components/TodoRoot.vue
+++ b/src/components/TodoRoot.vue
@@ -6,6 +6,21 @@
 -->
 <template>
 
+  <h1>ToDo List</h1>
+
+  <div id="todo-container">
+
+    <div :class="todoItemClass(task)" v-for="(task, i) in tasks" :id="i">
+      <div class="todo-v-container">
+        <input class="todo-title" type="text" v-bind="task.title">
+        <input class="todo-description" type="text" v-bind="task.description">
+      </div>
+      <div class="todo-meta">
+        <img src="@/assets/img/trash-solid.png" class="btn-icon">
+      </div>
+    </div>
+
+  </div>
 </template>
 
 <script>
@@ -19,15 +34,38 @@ export default {
   data() {
     return {
       /* array of todo lists currently known */
-      lists: [],
-      /* the name of the list currently being shown */
-      currentList: null,
-      /* tasks of the current list */
-      tasks: [],
+      lists: [
+        { id: 1, title: "Default"},
+        { id: 2, title: "House" },
+        { id: 3, title: "Car" },
+      ],
+      /* the id of the list currently being shown */
+      currentList: 1,
+      /* known tasks  */
+      tasks: [
+        { id: 1, completed: false, title: "Go to dentist", description: "Last time is way too long ago...", list: { id: 1 } },
+        { id: 2, completed: true, title: "Change engine oil", description: "", list: { id: 3 } },
+        { id: 3, completed: false, title: "Clean windows", description: "Regualar stuff", list: { id: 2 } },
+        { id: 4, completed: false, title: "Oil ove hinges", description: "They are stiff and screechy", list: { id: 2 } },
+      ],
     }
   },
 
+  methods: {
 
+    /**
+     * Return class object for a todo item
+     *
+     * @param task the item
+     */
+    todoItemClass(task) {
+      return {
+        "todo-item": true,
+        "completed": task.completed,
+      }
+    },
+
+  },
 
   /**
    * mounted lifecycle hook.
@@ -50,6 +88,7 @@ export default {
           id
           title
           description
+          completed
           list {
             id
           }
@@ -66,6 +105,28 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
+.todo-item {
+  display: flex;
+  background-color: #aaa;
+  margin-bottom: 5px;
+  padding: 10px;
+  input {
+    border: none;
+  }
+  .todo-title {
+    font-size: 1.5rem;
+  }
+  .todo-description {
+    color: #555;
+  }
+}
+
+.todo-v-container {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+}
 
 </style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index b5c74ce..68b9954 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,7 +5,7 @@
  * https://basebox.tech
  */
 
-import { store } from "../store";
+import {showError, store} from "../store";
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import OAUthError from "../components/FatalError.vue";
@@ -47,13 +47,8 @@ router.beforeEach(async (to, from) => {
     } catch (err) {
       const errorMsg = `Failed to get session info from basebox/finish OpenID Connect login:  ${err}`;
       console.error(errorMsg);
-      /* show error component */
-      return {
-        name: "oauth-error",
-        params: {
-          errorMsg
-        }
-      }
+      /* show error */
+      showError(errorMsg);
     }
 
     /* We have to create the logged-in user explicitly; see comment for `createUser()` */
@@ -62,13 +57,7 @@ router.beforeEach(async (to, from) => {
     } catch (err) {
       const errorMsg = `Failed to create user: ${err}`;
       console.error(errorMsg);
-      /* show error component */
-      return {
-        name: "oauth-error",
-        params: {
-          errorMsg
-        }
-      }
+      showError(errorMsg);
     }
 
     return {name: 'home'};
diff --git a/src/store.js b/src/store.js
index 3813642..97d1199 100644
--- a/src/store.js
+++ b/src/store.js
@@ -17,7 +17,7 @@ export const store = reactive({
   /** basebox session data */
   session: {},
 
-  /** Fatal errort message, if any */
+  /** Fatal error message, if any */
   fatalError: "",
 
 });
@@ -36,5 +36,16 @@ export function clearSession() {
   store.session = {};
 }
 
+/**
+ * Show an error.
+ */
+export function showError(message) {
+  store.fatalError = message;
+}
 
-
+/**
+ * Clear error.
+ */
+export function clearError() {
+  store.fatalError = "";
+}