[RM-1003] View details of a list

src/components/Home.vue

@@ -1,19 +1,16 @@
 <template>
   <div class="home">
     <SideBar />
-    <ListDetails />
+    <router-view :key="$route.fullPath"></router-view>
   </div>
 </template>
 
 <script>
 import SideBar from "./SideBar/SideBar.vue";
-import ListDetails from "./ListDetails/ListDetails.vue";
-
 export default {
   name: "Home",
   components: {
     SideBar,
-    ListDetails,
   },
 };
 </script>

src/components/ListDetails/AddTaskButton.vue

@@ -1,11 +1,17 @@
 <template>
-  <div class="add-task-button">
-    <button>AddTaskButton</button>
-  </div>
+  <button class="add-task-button">
+    <i class="material-icons">
+      add
+    </i>
+  </button>
 </template>
 
 <style scoped>
 .add-task-button {
   text-align: end;
+  width: 100%;
+  height: 3%;
+  border: none;
+  background: none;
 }
 </style>

src/components/ListDetails/ListDetails.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="list-details">
+  <div class="list-details" v-if="listName && allTasks">
     <AddTaskButton />
-    <ListSummary />
-    <ListTasks />
+    <ListSummary :listName="listName" :countAllTasks="allTasks.length" />
+    <ListTasks :allTasks="allTasks" />
   </div>
 </template>
 
@@ -17,11 +17,21 @@ export default {
     ListSummary,
     ListTasks,
   },
+  props: {
+    listName: {
+      type: String,
+    },
+    allTasks: {
+      type: Array,
+    },
+  },
 };
 </script>
 
 <style scoped>
 .list-details {
-  width: 70%;
+  width: 66%;
+  padding: 10px;
+  margin-left: 12px;
 }
 </style>

src/components/ListDetails/ListSummary.vue

@@ -1,13 +1,42 @@
 <template>
   <div class="list-summary">
-    <h2>List Name</h2>
-    <h2>CountTaskOfList</h2>
+    <h2 class="list-name">{{ listName }}</h2>
+    <h2>{{ countAllTasks }}</h2>
   </div>
 </template>
 
+<script>
+export default {
+  name: "ListSummary",
+  props: {
+    listName: {
+      type: String,
+    },
+    countAllTasks: {
+      type: Number,
+    },
+  },
+};
+</script>
+
 <style scoped>
 .list-summary {
   display: flex;
   justify-content: space-between;
+  height: 50px;
+  margin-top: 15px;
+  padding-right: 10px;
+}
+
+h2 {
+  font-size: 40px;
+  color: blue;
+}
+
+.list-name {
+  width: 90%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 </style>

src/components/ListDetails/ListTask.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="list-task-detail">
+    <div class="list-task-detail-left">
+      <input type="checkbox" :checked="task.done" />
+      <p :class="{ 'task-content': true, 'task-completed': task.done }">
+        {{ task.content }}
+      </p>
+    </div>
+    <div class="list-task-detail-right">
+      <select :disabled="task.done">
+        <option
+          v-for="priority in priorities"
+          :key="priority.id"
+          :value="priority.name"
+          :selected="priority.id === task.priority"
+        >
+          {{ priority.name }}
+        </option>
+      </select>
+      <i class="delete-task-icon material-icons">
+        delete
+      </i>
+    </div>
+  </div>
+</template>
+
+<script>
+import { priorities } from "@/data";
+export default {
+  name: "ListTask",
+  props: {
+    task: {
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      priorities,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.list-task-detail {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  padding-right: 5px;
+  padding-left: 5px;
+}
+
+.list-task-detail-left {
+  display: flex;
+  width: 80%;
+}
+
+.task-content {
+  margin-left: 10px;
+  margin-top: 3px;
+  width: 100%;
+  white-space: normal;
+  line-height: 1.4;
+}
+
+input {
+  margin: auto;
+  width: 20px;
+  height: 30px;
+}
+
+.list-task-detail-right {
+  justify-content: flex-end;
+  display: flex;
+}
+
+select {
+  height: 25px;
+  margin: auto;
+  margin-right: 15px;
+}
+
+.delete-task-icon {
+  margin: auto;
+}
+
+.task-completed {
+  text-decoration-line: line-through;
+}
+</style>

src/components/ListDetails/ListTasks.vue

@@ -1,32 +1,42 @@
 <template>
   <div class="list-tasks">
-    <div class="list-tasks-detail">
-      <input type="checkbox" />
-      <p>TaskName</p>
-    </div>
-    <div class="function-task">
-      <select>
-        <option value="low">Low</option>
-        <option value="medium">Medium</option>
-        <option value="high">High</option>
-      </select>
-      <span>icon_delete</span>
-    </div>
+    <ListTask v-for="task in allTasks" :key="task.id" :task="task" />
   </div>
 </template>
 
+<script>
+import ListTask from "./ListTask.vue";
+export default {
+  name: "ListTasks",
+  components: {
+    ListTask,
+  },
+  props: {
+    allTasks: {
+      type: Array,
+    },
+  },
+};
+</script>
+
 <style scoped>
 .list-tasks {
-  display: flex;
-  justify-content: space-between;
+  height: 88%;
+  margin-top: 20px;
+  overflow: auto;
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
 }
 
-.list-tasks-detail {
-  display: flex;
-  width: 100%;
+*::-webkit-scrollbar-track {
+  background: rgb(214, 210, 210, 0);
 }
 
-.function-task {
-  width: 20%;
+*::-webkit-scrollbar-thumb {
+  background-color: rgb(150, 150, 150);
+  border-radius: 10px;
+  border: 1px solid rgb(214, 210, 210, 0);
 }
 </style>

src/components/PageNotFound.vue

@@ -0,0 +1,3 @@
+<template>
+  <h2>404. That’s an error.</h2>
+</template>

src/components/SideBar/PersonalList.vue

@@ -17,9 +17,17 @@
         @keyup.enter="$event.target.blur()"
         @blur="editListName(list.id, $event)"
       />
-      <p class="list-name" v-else @click="$store.selectedListId = list.id">
-        {{ list.name }}
-      </p>
+      <router-link
+        :to="{
+          name: 'ListDetails',
+          params: { listId: list.id },
+        }"
+        v-else
+        class="list-name"
+        @click.native="$store.selectedListId = list.id"
+      >
+        <p>{{ list.name }}</p>
+      </router-link>
     </div>
     <div class="personal-list-detail-right">
       <p>{{ $store.countAllTasksByListId(list.id) }}</p>
@@ -111,6 +119,8 @@ input {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-decoration: none;
+  color: black;
 }
 
 *::-webkit-scrollbar {

src/components/SideBar/PersonalLists.vue

@@ -14,6 +14,11 @@ export default {
   components: {
     PersonalList,
   },
+  mounted() {
+    if (this.$route.params.listId) {
+      this.$store.selectedListId = this.$route.params.listId;
+    }
+  },
   computed: {
     $lists() {
       return this.$store.listsData;

src/data/index.js

@@ -17,22 +17,37 @@ const tasks = [
     content:
       "Di hoc kjanwj dkj anwdk ajwn daw wandkj nawjk awndknawkkj anwdjnaw kjanwdkjanwjkd kjanwdkjnawkj jkanwdkjnawk jkawndkjawawjnd kjawjkdnajk wdjkanw jnadkj ajw ndjkna wjn anajw ndjnaw ndanwk ndkjawn knawkj dnkjawndk akjwdn kjanwdnawndkjawjh abwhjdbjhaw habwhjdbjhaw jhabwdjhbawjhhjdab jhawbjhd bhjawbdjh bajwhdb jhabwj hdbjahwb jhwndkjnawkjdnkjawndjkwankjdnawkjndk",
     done: false,
-    priority: "medium",
+    priority: 1,
   },
   {
     id: 2,
     id_list: "xzN_2SRsBg-ijAGsUBI9h",
     content: "Di hoc1",
     done: false,
-    priority: "medium",
+    priority: 2,
   },
   {
     id: 1,
     id_list: "y3KgqeuBJdYwLVBI9aDbF",
     content: "Di lam",
     done: true,
-    priority: "medium",
+    priority: 3,
   },
 ];
 
-export { lists, tasks };
+const priorities = [
+  {
+    id: 1,
+    name: "Low",
+  },
+  {
+    id: 2,
+    name: "Medium",
+  },
+  {
+    id: 3,
+    name: "High",
+  },
+];
+
+export { lists, tasks, priorities };