todo item markup

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>

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'};

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 = "";
+}