Add new features

todolist-app-5-v2/src/App.vue

@@ -8,14 +8,14 @@
 </template>
 
 <script>
-import Navbar from "@/components/Navbar"
+import Navbar from "@/components/Navbar";
 export default {
   components: {
-    Navbar
-  }
-}
+    Navbar,
+  },
+};
 </script>
 
 <style lang="scss">
-  @import "~materialize-css/dist/css/materialize.min.css";
+@import "~materialize-css/dist/css/materialize.min.css";
 </style>

todolist-app-5-v2/src/components/Navbar.vue

@@ -1,23 +1,26 @@
 <template>
   <nav class="blue darken-3">
     <div class="nav-wrapper">
-      <router-link to="/" class="brand-logo">Tasks</router-link>
       <ul class="right">
-        <li><router-link to="/" exact active-class="active"><a href="#">Create</a></router-link></li>
-        <li><router-link to="/list" active-class="active"><a href="#">List</a></router-link></li>
+        <li>
+          <router-link to="/create" exact active-class="active">
+            <i class="small material-icons" title="create task">add_box</i>
+          </router-link>
+        </li>
+        <li>
+          <router-link to="/" active-class="active"> Tasks list </router-link>
+        </li>
       </ul>
     </div>
   </nav>
 </template>
 
 <script>
-export default {
-
-}
+export default {};
 </script>
 
 <style>
-  nav {
-    padding: 0 2rem;
-  }
+nav {
+  padding: 0 2rem;
+}
 </style>

todolist-app-5-v2/src/components/Tasks.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="row">
+    <div v-if="tasks.length">
+      <div v-if="viewStyle">
+        <div
+          class="card col l3"
+          style="margin: 5px"
+          v-for="task of displayTasks"
+          :key="task.id"
+          @dblclick="$router.push('/task/' + task.id)"
+        >
+          <!-- Cards View -->
+          <div class="card-content">
+            <span class="card-title activator grey-text text-darken-4">
+              <label>
+                <input
+                  type="checkbox"
+                  class="filled-in"
+                  :checked="task.isCompleted"
+                  @click="toggleCompleteStatus(task.id)"
+                />
+                <span></span>
+              </label>
+              <span>{{ task.title }}</span>
+              <i class="material-icons right">more_vert</i>
+            </span>
+            <p>
+              Date: {{ new Date(task.date).toLocaleDateString() }} &nbsp;|&nbsp;
+              Tags: {{ task.tags.length }}
+            </p>
+            <p>Description:</p>
+            <p class="text" style="width: 250px">
+              {{ task.desc }}
+            </p>
+
+            <hr />
+            <router-link
+              tag="button"
+              class="btn btn-small"
+              :to="'/task/' + task.id"
+            >
+              Edit
+            </router-link>
+            <button class="btn btn-small red" @click="deleteTask(task.id)">
+              X
+            </button>
+          </div>
+          <div class="card-reveal">
+            <span class="card-title grey-text text-darken-4">
+              <i class="material-icons right">close</i>
+            </span>
+            <div class="input-field">
+              <textarea
+                disabled
+                style="min-height: 150px"
+                :value="task.desc"
+                id="desc"
+                class="materialize-textarea"
+              ></textarea>
+              <span
+                class="character-counter"
+                style="float: right; font-size: 12px"
+              >
+                {{ task.desc.length }}/1024
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        <!-- Table View -->
+        <table class="tasks">
+          <thead>
+            <tr>
+              <th><i class="tiny material-icons">check</i></th>
+              <th>Title</th>
+              <th>Description</th>
+              <th>Tags</th>
+              <th>Date</th>
+              <th>Status</th>
+              <th>Edit</th>
+              <th>Delete</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="task of displayTasks"
+              :key="task.id"
+              @dblclick="$router.push('/task/' + task.id)"
+            >
+              <td>
+                <label>
+                  <input
+                    type="checkbox"
+                    class="filled-in"
+                    :checked="task.isCompleted"
+                    @click="toggleCompleteStatus(task.id)"
+                  />
+                  <span></span>
+                </label>
+              </td>
+              <td>{{ task.title }}</td>
+
+              <td>
+                <div class="text">{{ task.desc }}</div>
+              </td>
+              <td>
+                {{ task.tags.length }}
+              </td>
+              <td>{{ new Date(task.date).toLocaleDateString() }}</td>
+              <td>{{ task.status }}</td>
+              <td>
+                <router-link
+                  tag="button"
+                  class="btn btn-small"
+                  :to="'/task/' + task.id"
+                >
+                  Edit
+                </router-link>
+              </td>
+              <td>
+                <button class="btn btn-small red" @click="deleteTask(task.id)">
+                  X
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <p v-else>No tasks</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    viewStyle: {
+      type: Boolean,
+      default: false,
+    },
+
+    filter: {
+      type: String,
+      default: "",
+    },
+  },
+  computed: {
+    tasks() {
+      return this.$store.getters.tasks;
+    },
+
+    displayTasks() {
+      return this.tasks.filter((t) => {
+        if (!this.filter) {
+          return true;
+        }
+
+        return t.status === this.filter;
+      });
+    },
+  },
+  methods: {
+    deleteTask(id) {
+      this.$store.dispatch("deleteTask", id);
+    },
+
+    toggleCompleteStatus(id) {
+      this.$store.dispatch("toggleCompleteStatus", id);
+    },
+  },
+};
+</script>
+
+<style>
+.tasks tr:hover {
+  background-color: lightgreen;
+}
+.text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 400px;
+}
+</style>

todolist-app-5-v2/src/directives/markdown.js

@@ -0,0 +1,33 @@
+const rules = [
+    [/^#{6}\s?(.*$)/gim, '<h6>$1</h6>'], // ######  ->  <h6>
+    [/^#{5}\s?(.*$)/gim, '<h5>$1</h5>'], // #####  ->  <h5>
+    [/^#{4}\s?(.*$)/gim, '<h4>$1</h4>'], // ####  ->  <h4>
+    [/^#{3}\s?(.*$)/gim, '<h3>$1</h3>'], // ###  ->  <h3>
+    [/^#{2}\s?(.*$)/gim, '<h2>$1</h2>'], // ##  ->  <h2>
+    [/^#{1}\s?(.*$)/gim, '<h1>$1</h1>'], // #  ->  <h1>
+    [/(\*\*|__)(.*)(\*\*|__)/gim, '<b>$1</b>'], // ** X ** | __ X __ ->   <b>
+    [/(\*|_)(.*)(\*|_)/gim, '<i>$1</i>'], // * X * | _ X _ ->   <i>
+    // [/((\n\d\..+)+)/g, '<ol>$1</ol>'],
+    // [/((\n\*.+)+)/g, '<ul>$1</ul>'],
+    // [/\n\d\.([^\n]+)/g, '<li>$1</li>'],
+    // [/^\*([^\n]+)/g, '<li>$1</li>'],
+    // [/^(\*|\+|-) .*$/g, '<li>$1</li>'],
+    [/!\[(.*?)\]\((.*?)\)/gim, "<img alt='$1' src='$2' />"],  // ![]()  ->   <img>
+    [/\[(.*?)\]\((.*?)\)/gim,  "<a href='$2' target='_blank'>$1</a>"],  // []()  ->   <a>
+    [/^\> (.*$)/gim, '<blockquote>$1</blockquote>'],  //  > X   ->   <blockquote>
+    //[/\n$/gim, '<br />'],
+    [/([^\n]+\n)/g, '<p>$1</p>'],          //  \n -> <p>
+];
+
+export default {
+    mounted(el) {
+        let html = el.textContent;
+        console.log(html);
+        rules.forEach(([rule, template]) =>  {
+            html = html.replace(rule, template);
+        })
+        console.log(html);
+
+        el.innerHTML = html.trim();
+      }
+}

todolist-app-5-v2/src/main.js

@@ -2,7 +2,8 @@ import {createApp} from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import markdown from './directives/markdown.js'
 import 'materialize-css/dist/js/materialize.min'
 import './registerServiceWorker'
 
-createApp(App).use(store).use(router).mount('#app')
+createApp(App).use(store).use(router).directive('markdown', markdown).mount('#app')

todolist-app-5-v2/src/router/index.js

@@ -2,19 +2,19 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 
 const routes = [
   {
-    path: '/',
+    path: '/create',
     name: 'create',
-    component: () => import('@/views/Create.vue')
+    component: () => import('@/views/CreateTask.vue')
   },
   {
-    path: '/list',
+    path: '/',
     name: 'list',
     component: () => import('@/views/List.vue')
   },
   {
     path: '/task/:id',
     name: 'task',
-    component: () => import('@/views/Task.vue')
+    component: () => import('@/views/EditTask.vue')
   }
 ]
 
@@ -23,31 +23,4 @@ const router = createRouter({
   routes
 })
 
-export default router
-
-// import Vue from 'vue'
-// import Router from 'vue-router'
-
-// Vue.use(Router)
-
-// export default new Router({
-//   mode: 'history',
-//   base: process.env.BASE_URL,
-//   routes: [
-//     {
-//       path: '/',
-//       name: 'create',
-//       component: () => import('@/views/Create.vue')
-//     },
-//     {
-//       path: '/list',
-//       name: 'list',
-//       component: () => import('@/views/List.vue')
-//     },
-//     {
-//       path: '/task/:id',
-//       name: 'task',
-//       component: () => import('@/views/Task.vue')
-//     }
-//   ]
-// })
+export default router